/* ════════════════════════════════════════════════
   hero.css — Universolibro
   Sección principal de bienvenida
   Mobile-first · Sin JS · WCAG AA
   ════════════════════════════════════════════════

   ESTRUCTURA VISUAL (desktop):
   ┌────────────────────┬─────────────────────┐
   │  etiqueta          │                     │
   │  h1 con colores    │   imagen hero        │
   │  descripción       │   (fondo curvo)      │
   │  [botones]         │                     │
   │  [badges]          │                     │
   └────────────────────┴─────────────────────┘

   MOBILE:
   • Columna única
   • Imagen centrada con altura reducida
   • Badges en fila de 3
   ════════════════════════════════════════════════ */


/* ════════════════════
   SECCIÓN HERO
   ════════════════════ */
.hero {
  background: #fff;
  overflow:   hidden;   /* contiene el fondo curvo de la imagen */
  padding-bottom: var(--s-xl); /* espacio entre hero y banner */
}

/* Interior: columna en móvil, dos columnas en desktop */
.hero__interior {
  display:       flex;
  flex-direction: column;   /* mobile: apilado */
  max-width:     var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
}

/* ── Columna de contenido (izquierda en desktop) ── */
.hero__contenido {
  display:        flex;
  flex-direction: column;
  gap:            var(--s-md);
  padding-top:    var(--s-xl);
  /* en mobile ocupa todo el ancho */
  width: 100%;
}

/* ── Columna de imagen (derecha en desktop) ── */
.hero__imagen-col {
  position:   relative;
  width:       100%;
  /* mobile: imagen debajo del contenido */
  order:       2;
  /* Altura mínima para que la imagen se vea en mobile */
  min-height:  clamp(220px, 55vw, 340px);
  margin-top:  var(--s-md);
   object-position: top; /* ← cambio: ahora se recorta desde abajo */
}

/* ════════════════════
   DESKTOP: dos columnas
   ════════════════════ */
@media (min-width: 900px) {
  .hero__interior {
    flex-direction: row;
    align-items:    center;
    gap:            0;
    padding-top:    0;
    padding-bottom: 0;
    min-height:     clamp(460px, 50vw, 600px);
  }

  /* Contenido: 52% del ancho */
  .hero__contenido {
    flex:       0 0 52%;
    max-width:  52%;
      padding-top: clamp(0.8rem, 1.5vw, 1.8rem); 
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    order: 1;
  }

  /* Imagen: 48% restante */
@media (min-width: 900px) {
  .hero__imagen-col {
    flex: 0 0 48%;
    max-width: 48%;
    padding-top: clamp(0.8rem, 1.5vw, 1.8rem);
    align-self: flex-start;
    min-height: unset;
    margin-top: 0;
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    max-height: clamp(390px, 100vh, 520px);
    border-radius: 24px; /* esquinas redondeadas en el contenedor */
  }

  .hero__imagen {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 24px; /* ← añade esto también a la imagen */
    display: block; /* asegura que la imagen respete el border-radius */
  }
}
}


/* ════════════════════
   ETIQUETA SUPERIOR
   ════════════════════ */
.hero__etiqueta {
  display:     flex;
  align-items: center;
  gap:         var(--s-xs);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size:   var(--t-xs);
  letter-spacing: .06em;
  color:       var(--c-texto-suave);
}

.hero__etiqueta-estrella {
  color:     #F9A825;   /* dorado */
  font-size: 1rem;
}

.hero__etiqueta-texto strong {
  color: var(--c-rojo);
}


/* ════════════════════
   H1 — TÍTULO PRINCIPAL
   ════════════════════ */
.hero__titulo {
  font-family:  var(--f-titulo);
  font-weight:  900;
  /* Fluido: legible en móvil, impactante en desktop */
  font-size:    clamp(1.75rem, 4.5vw + 0.5rem, 3.25rem);
  line-height:  1.15;
  color:        var(--c-texto);         /* negro base */
  letter-spacing: -0.02em;
}

/* "estudiar" → verde oscuro (secundario de marca) */
.hero__titulo-estudiar {
  color:       #1B5E20;
  font-style:  normal;
}

/* "aprender" → azul */
.hero__titulo-aprender {
  color:       #1565C0;
  font-style:  normal;
}

/* "disfrutar." → naranja/acento */
.hero__titulo-disfrutar {
  color:       var(--c-naranja);
  font-style:  normal;
}

/* Línea decorativa debajo del h1 */
.hero__titulo::after {
  content:    '';
  display:    block;
  width:      clamp(48px, 8vw, 72px);
  height:     4px;
  background: var(--c-naranja);
  border-radius: var(--r-pill);
  margin-top: var(--s-sm);
}


/* ════════════════════
   DESCRIPCIÓN
   ════════════════════ */
.hero__descripcion {
  font-family: var(--f-cuerpo);
  font-size:   clamp(0.9rem, 1.5vw, 1.05rem);
  line-height: 1.65;
  color:       var(--c-texto-suave);
  max-width:   54ch;   /* longitud de línea óptima */
}

.hero__descripcion strong {
  color:       var(--c-texto);
  font-weight: 700;
}


/* ════════════════════
   BOTONES CTA
   ════════════════════ */
.hero__botones {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--s-sm);
  /* Alineados al inicio en mobile, igual en desktop */
}

/* Botón primario: verde sólido + lupa */
.hero__boton-primario {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--s-xs);
  padding:       clamp(0.7rem, 1.5vw, 0.875rem) clamp(1.25rem, 2.5vw, 1.75rem);
  background:    #1B5E20;
  color:         #fff;
  font-family:   var(--f-titulo);
  font-weight:   800;
  font-size:     clamp(0.875rem, 1.2vw, 1rem);
  border-radius: var(--r-md);
  white-space:   nowrap;
  /* Área táctil mínima WCAG 2.5.5 */
  min-height:    44px;
  transition:    background var(--tr-r), transform var(--tr-r), box-shadow var(--tr-r);
}
.hero__boton-primario:hover,
.hero__boton-primario:focus-visible {
  background: #2E7D32;
  box-shadow: 0 4px 16px rgba(27,94,32,.35);
  transform:  translateY(-1px);
}
.hero__boton-primario:active { transform: translateY(0); }

/* Botón secundario: borde rojo oscuro */
.hero__boton-secundario {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--s-xs);
  padding:       clamp(0.7rem, 1.5vw, 0.875rem) clamp(1.25rem, 2.5vw, 1.75rem);
  background:    transparent;
  color:         var(--c-rojo);
  border:        2px solid var(--c-rojo);
  font-family:   var(--f-titulo);
  font-weight:   800;
  font-size:     clamp(0.875rem, 1.2vw, 1rem);
  border-radius: var(--r-md);
  white-space:   nowrap;
  min-height:    44px;
  transition:    background var(--tr-r), color var(--tr-r), transform var(--tr-r);
}
.hero__boton-secundario:hover,
.hero__boton-secundario:focus-visible {
  background: var(--c-rojo);
  color:      #fff;
  transform:  translateY(-1px);
}
.hero__boton-secundario:active { transform: translateY(0); }


/* ════════════════════
   BADGES / PROPUESTAS
   ════════════════════ */
.hero__badges {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--s-md);
  padding-top: var(--s-xs);
}

.hero__badge {
  display:     flex;
  align-items: flex-start;
  gap:         var(--s-xs);
  flex:        1 1 120px;   /* se distribuyen pero nunca muy angostos */
  min-width:   0;
}

/* Ícono circular del badge */
.hero__badge-icono {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            40px;
  height:           40px;
  border-radius:    50%;
  flex-shrink:      0;
}

/* Colores por tipo */
.hero__badge-icono--envio   { background: #FFF3E0; color: var(--c-naranja); }
.hero__badge-icono--ws      { background: #E8F5E9; color: #25D366; }
.hero__badge-icono--seguro  { background: #EDE7F6; color: #6A1B9A; }

/* Texto del badge */
.hero__badge-texto {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.hero__badge-titulo {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size:   var(--t-sm);
  color:       var(--c-texto);
  line-height: 1.2;
}

.hero__badge-subtitulo {
  font-family: var(--f-cuerpo);
  font-size:   var(--t-xs);
  color:       var(--c-texto-tenue);
  line-height: 1.3;
}


/* ════════════════════
   IMAGEN HERO (columna derecha)
   ════════════════════ */

/* Fondo curvo/blob de colores detrás de la imagen */
.hero__imagen-fondo {
  position:      absolute;
  inset:         0;
  background:    conic-gradient(
    from 180deg at 60% 50%,
    #FFF8E1 0deg,
    #E8F5E9 90deg,
    #E3F2FD 180deg,
    #FFF3E0 270deg,
    #FFF8E1 360deg
  );
  border-radius: clamp(40%, 50%, 60%) 0 0 clamp(40%, 50%, 60%) / 50%;
  /* En mobile: forma redondeada arriba */
}

@media (max-width: 899px) {
  .hero__imagen-fondo {
    border-radius: var(--r-xl);
  }
}

/* Imagen de personas con libros */
.hero__imagen {
  position:   relative;   /* sobre el fondo */
  z-index:    1;
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center top;
  /* lazy innecesario aquí: está en el viewport inicial */
}

@media (min-width: 900px) {
  .hero__interior {
    flex-direction: row;
    align-items: flex-start;    /* ← Antes era 'center', ahora arriba */
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-height: clamp(460px, 50vw, 600px);
  }

  .hero__contenido {
    flex: 0 0 52%;
    max-width: 52%;
    padding-top: clamp(0.8rem, 1.5vw, 1.8rem);  /* ← También reducimos el superior */
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem); /* ← También reducimos el inferior */
    order: 1;
  }

  .hero__imagen-col {
    flex: 0 0 48%;
    max-width: 48%;
    align-self: stretch;
    min-height: unset;
    margin-top: 0;
    order: 2;
  }
}

/* ════════════════════
   MODO OSCURO
   ════════════════════ */
[data-tema="oscuro"] .hero {
  background: var(--c-fondo);
}

[data-tema="oscuro"] .hero__imagen-fondo {
  opacity: 0.35;
}

[data-tema="oscuro"] .hero__titulo {
  color: var(--c-texto);
}

[data-tema="oscuro"] .hero__badge-icono--envio  { background: rgba(230,81,0,.15);  }
[data-tema="oscuro"] .hero__badge-icono--ws     { background: rgba(37,211,102,.12); }
[data-tema="oscuro"] .hero__badge-icono--seguro { background: rgba(106,27,154,.15); }