/* =========================================================
   RESPONSIVE.CSS
   ---------------------------------------------------------
   Todos los ajustes por tamaño de pantalla, en un solo lugar.

   Va DESPUÉS de componentes.css a propósito. Un @media no le
   suma especificidad a un selector: si esta regla y la del
   componente pesan lo mismo, gana la que se carga de última.
   Cuando estos ajustes vivían en base.css (que carga primero),
   componentes.css los pisaba en silencio: el logo del evento
   nunca aparecía, el banner no se medía por alto y el
   encabezado no se compactaba en escritorio.
   Ref: https://developer.mozilla.org/docs/Web/CSS/Cascade
   ========================================================= */

/* ---------- 6. Solo teléfono ----------------------------- */
/* En pantalla chica el encabezado es logo arriba y frase debajo.
   Centrar el logo del evento en el alto total lo dejaba flotando
   entre ambos; aquí se alinea con la FILA del logo principal:

     top = padding superior + (alto del logo − alto del secundario) / 2

   Es decir, los centros de los dos logos quedan a la misma altura
   y la frase corre debajo, libre. Desde tablet vuelve el centrado
   general, que ahí sí funciona porque hay más espacio. */
@media (max-width: 39.99rem) {
  /* Actualización: los dos logos forman una fila y la frase pasa
     DEBAJO de ambos, a todo el ancho. Antes la frase ocupaba la
     columna izquierda hasta el 58% y eso encogía al logo del
     evento; liberada esa columna, el logo puede usar casi la mitad
     de la fila y crecer. Queda un poco más alto que el de AIVRAZ
     (1.1 veces) y sigue centrado con él por la fórmula de abajo. */
  .hero {
    --alto-secundario: calc(var(--alto-logo) * 1.1);
    /* Ancho ÷ alto del logo principal (aivraz-blanco.png, 583×192).
       Sirve para saber cuánto ocupa y cuánto espacio le queda al
       otro logo. Si cambia la imagen, hay que actualizar este número. */
    --proporcion-logo: 3.04;
  }
  .hero--con-secundario .hero__contenido { max-width: none; }
  /* La frase también trae su propio tope (32ch en componentes.css).
     Bajo los dos logos ya no hace falta: sin quitarlo, "El motor de
     la industria automotriz" seguía partiéndose en un teléfono común. */
  .hero--con-secundario .hero__lema { max-width: none; }

  /* El ancho máximo del logo del evento es lo que sobra de la fila:
     ancho total − márgenes − ancho de AIVRAZ − 1rem de separación.
     Con un porcentaje fijo, a 360px los logos quedaban pegados y a
     320px se encimaban. Si no cabe entero, object-fit lo achica sin
     deformarlo. */
  .hero__secundario {
    bottom: auto;
    margin-block: 0;
    top: calc(var(--hero-pad-top) + (var(--alto-logo) - var(--alto-secundario)) / 2);
    max-width: calc(100% - 2 * var(--lateral) - var(--alto-logo) * var(--proporcion-logo) - 1rem);
  }
}

/* ---------- 7. Tablet y móvil horizontal ----------------- */
/* De aquí en adelante el banner se mide por el ALTO. Al ser un
   flex item, el ancho se deduce solo de la proporción, así que la
   relación se mantiene exacta y sin recortes: lo único que cambia
   es cuál de las dos medidas manda. En una tablet de 800px el
   banner pasa de 160px de alto a 110. */
@media (min-width: 40rem) {
  :root { --lateral: 1.75rem; --max-contenido: 48rem; }

  .banner {
    display: flex;
    justify-content: center;
  }

  .banner__enlace {
    width: auto;
    height: clamp(105px, 13vw, 145px);
    max-width: 100%;
    flex: 0 0 auto;
  }

  /* Secciones algo más ajustadas: en pantalla apaisada entra más
     contenido por pantalla y el scroll se acorta. */
  .bloque { padding-block: 1.75rem; }

  /* En tablet las redes tienen todo el ancho: cuatro caben en una
     sola fila. En escritorio vuelven a 2x2 (ver más abajo), porque
     ahí comparten el ancho con el "acerca de". */
  .redes[data-cantidad="4"] { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 8. Escritorio -------------------------------- */
/* Dos columnas para "acerca de" y redes. El encabezado, los
   banners, la encuesta y el pie siguen a ancho completo, así que
   la página se lee como una página, no como una tarjeta. */
@media (min-width: 62rem) {
  :root {
    --lateral: 2.25rem;
    --max-contenido: 60rem;
  }

  /* Media columna de ancho: cuatro en fila quedarían apretadas. */
  .redes[data-cantidad="4"] { grid-template-columns: repeat(2, 1fr); }

  .pagina {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-areas:
      "hero      hero"
      "acerca    redes"
      "bnr-uno   bnr-uno"
      "bnr-tres  bnr-tres"
      "encuesta  encuesta"
      "bnr-dos   bnr-dos"
      "pie       pie";
  }

  /* Los contenedores de banner sin usar no deben abrir fila. */
  .pagina > div:empty { display: none; }

  #hero                 { grid-area: hero; }
  #acerca               { grid-area: acerca; }
  #redes                { grid-area: redes; border-left: 1px solid var(--linea); }
  #banner-tras-acerca   { grid-area: bnr-uno; }
  #banner-tras-redes    { grid-area: bnr-tres; }
  #encuesta             { grid-area: encuesta; }
  #banner-tras-encuesta { grid-area: bnr-dos; }
  #pie                  { grid-area: pie; }

  /* En la fila de dos columnas, el borde exterior mantiene el
     centrado general y el interior usa una separación fija. */
  #acerca { padding-right: var(--e4); }
  #redes  { padding-left: var(--e4); }

  /* El encabezado crece, pero con medida: antes ocupaba casi
     200px de alto en una laptop y empujaba todo lo demás fuera
     de la primera pantalla. */
  .hero { padding-block: 2.7rem 2.5rem; }
  .hero__nombre { font-size: 2.5rem; }
  .hero__lema { font-size: 1.08rem; max-width: 42ch; }
  .hero__logo { height: 70px; }
  /* Solo crecen: la posición ya la resuelve la regla base, que las
     alinea con el margen del contenido. */
  .hero__ondas { width: 175px; }

  /* La encuesta cruza las dos columnas, pero su contenido se
     limita: una línea de 60rem es incómoda de leer y las opciones
     quedarían tiras larguísimas. */
  #encuesta .bloque__titulo,
  #encuesta > div {
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
  }

  #encuesta .bloque__titulo { margin-bottom: var(--e3); }
}

/* ---------- 9. Pantallas muy anchas ---------------------- */
/* Tope al ancho del texto: pasado cierto punto, seguir estirando
   solo empeora la lectura. */
@media (min-width: 100rem) {
  :root { --max-contenido: 72rem; }
}