body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', Arial, sans-serif;
}

/* ====== PORTADA ====== */
.hero {
  position: relative;
  min-height: 75vh; /* ocupa toda la pantalla */
  width: 100vw;       /* ocupa todo el ancho */
  margin: 0;          /* elimina márgenes */
  padding: 0;         /* elimina espacios internos */
      background: url("../images/fondo.jpg") no-repeat 50% 30%/cover; /* X=50% Y=30% */
  display: flex;
  align-items: stretch; /* hace que las columnas ocupen toda la altura */
  justify-content: center;
  color: white;
  overflow: hidden;   /* evita que algo sobresalga */
    box-sizing: border-box;


}


.hero-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 40px;
  z-index: 1;
  padding: 0; /* cero espacio lateral */
}

/* Capa oscura para resaltar el texto */


/* Columna izquierda (imagen) */
.hero-left {
  padding-left: 60px;  /* margen interno a la izquierda */
    display: flex;              /* activa flexbox en la columna */
  align-items: flex-end;      /* coloca la imagen abajo */
  justify-content: center;    /* opcional: centra la imagen horizontalmente */
  height: 100%;            /* ocupa toda la altura de la portada */

}

/* Columna izquierda (imagen) */
.hero-left-img {
  max-width: 400px;
  margin-bottom: 20px;
  display: none; /* oculta solo la imagen grande */
}

/* Overlay Columna derecha (texto) */

.overlay-box {
  position: relative;
  padding: 20px;
  background: rgba(0,0,0,0.6); /* negro translúcido */
}


/* Columna derecha (texto) */
.hero-right {
  flex: 1;
  padding-right: 160px;   /* margen interno a la derecha */
  max-width: 770px;      /* limita el ancho del texto */
}

.hero-right h1 {
  font-size: 2.4rem;       /* grande en escritorio */
  margin-bottom: 20px;
  color: #FFA90A;        /* color dorado */
  font-weight: 800;      /* extra negrita */
  line-height: 1.2;      /* ajusta la separación de líneas */
  text-transform: uppercase; /* opcional: mayúsculas */
}

.hero-right p {
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: justify; /* justificado */
}



/* Logo empresa (oculto en desktop) */
.hero-logo {
  display: none;
  max-width: 180px;
  margin: 0 auto;
}


/* ===== Animaciones para la imagen izquierda ===== */
.hero-left {
  opacity: 0;
  animation: slideInLeft 0.8s forwards;
  animation-delay: 0.2s;
}

/* Imagen dentro del hero-left */
.hero-left-img {
  display: block; /* aseguramos que se vea */
  max-width: 400px;
  margin-bottom: 20px;
}

/* Overlay box (fondo semi-transparente) */
.overlay-box {
  opacity: 0;
  animation: slideInRight 0.8s forwards;
  animation-delay: 0.3s;
}

/* Título dentro del overlay */
.hero-right h1 {
  opacity: 0;
  animation: slideInRight 0.8s forwards;
  animation-delay: 0.5s;
}

/* Párrafo dentro del overlay */
.hero-right p {
  opacity: 0;
  animation: slideInRight 0.8s forwards;
  animation-delay: 0.7s;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 900px) {
  .hero-container {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

.hero-left {
  padding-left: 0;
  display: flex;
  justify-content: center;   /* centra horizontal */
  align-items: center;       /* centra vertical */
  height: 30vh;              /* ajusta la altura de la caja del logo */
  margin: 0px 0;            /* margen arriba y abajo */
}

.hero-logo {
  display: block; 
  max-width: 180px;
  margin: 0 auto;
}

.hero-img {
  max-width: 400px;
  margin-bottom: 20px;
  display: none; /* oculta solo la imagen grande */
}

  .hero-right {
    padding: 10px;
    max-width: 100%; /* ocupa todo el ancho en móvil */
  }

  /* Overlay en móvil se adapta al texto */
  .hero-right::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .hero-right h1 {
    font-size: 2rem;   /* más pequeño en móvil */
    font-weight: 700;  /* negrita normal */  }

  .hero-right p {
    font-size: 1rem;
    text-align: center;
  }
}


/* ====== RESPONSIVE FIX ====== */
@media (max-width: 1366px) {
  .hero {
    padding-bottom: 180px; /* espacio extra para que las cards nunca tapen texto */
  }
}

@media (max-width: 1024px) {
  .hero {
    padding-bottom: 220px; /* más espacio en tablets */
  }
}

@media (max-width: 768px) {
  .hero {
    padding-bottom: 260px; /* aún más espacio en móviles */
  }
}