/* ============================================================
   FOOTER
   Una sola estructura que reflowea. A diferencia del header, A no
   lo duplica por breakpoint, así que se reconstruye tal cual.
   Medidas de referencia: reference/footer/MEDIDAS.md
   Ningún color literal — todo sale de tokens.css.
   ============================================================ */

.t-footer {
  /* 60 y no los 40 de A: el mismo margen que el marco común de las páginas
     (`style.css`), para que el footer quede alineado con el contenido. */
  --t-footer-gutter: 60px;

  /* ⚠️ 17 y 15 px están FUERA de la escala de tokens, que salta de 14 a 16.
     Son los valores medidos en A y se respetan para no mover píxeles, pero
     quedan acá arriba y no repartidos por el archivo: cuando se apruebe la
     escala tipográfica (DESIGN-SYSTEM.md §3.8) se cambian en un solo lugar. */
  --t-footer-titulo-size: 17px;
  --t-footer-texto-size: 15px;

  background: var(--t-navy-footer);
  color: var(--t-white);

  /* Lo que el footer tomaba de las reglas del footer viejo sobre la etiqueta
     `footer`, que se borraron de `style.css` porque pintaban cualquier
     `<footer>` —el de Mercado Pago en el checkout—. Medido en B el 2026-09-30:
     con esto el footer queda igual al píxel en la home, la FAQ y la ficha, a
     1280, 768 y 390. En `rem` a propósito: con el tamaño raíz de Astra da 60
     en desktop y 54,72 en tablet y mobile, que es lo aprobado. */
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 4rem 0;
}

/* ---------- Banda principal ---------- */

/* Porcentajes derivados de A a 1280 (ancho útil 1265, interior 1185 descontando
   los dos gutters de 40): columna del escudo 368 px = 31 %, «INFORMACIÓN» 363 =
   30,6 %, acciones 323 alineadas al borde derecho.

   El ancho de la columna del medio no es cosmético: con 27 % la caja quedaba en
   320 y «Cambios y devoluciones» se partía en dos renglones, lo que estiraba el
   footer 26 px de más. */
.t-footer__principal {
  display: grid;
  grid-template-areas: "marca info acciones";
  grid-template-columns: 31% 30.6% 1fr;
  align-items: start;
  padding: 40px var(--t-footer-gutter) 16px;
  /* El mismo tope que las páginas; el fondo navy sigue de borde a borde.
     Pedido de la usuaria el 2026-10-01. */
  box-sizing: border-box;
  width: 100%;
  max-width: var(--t-container-wide);
  margin-inline: auto;
}

.t-footer__marca    { grid-area: marca; }
.t-footer__info     { grid-area: info; }
.t-footer__acciones { grid-area: acciones; justify-self: end; }

/* ---------- Escudo ---------- */

.t-footer__escudo {
  display: inline-block;
}

/* Mismo criterio que en el header: alto medido y proporción respetada, sin
   estirar el PNG para llenar una caja. */
.t-footer__escudo img {
  display: block;
  width: auto;
  height: 75px;
  /* `style.css` arrastraba del footer viejo `footer img { margin-bottom: 5rem }`,
     y hasta la Fase 4 lo anulaba el CSS adicional del Personalizador. Esa
     regla se borró el 2026-09-30; esto queda para que el escudo no dependa
     del margen por defecto de otra hoja. */
  margin: 0;
}

/* ---------- Información ---------- */

.t-footer .t-footer__titulo {
  margin: 0 0 12px;
  color: var(--t-white);
  font-family: var(--t-font-body);
  font-size: var(--t-footer-titulo-size);
  font-weight: var(--t-weight-medium);
  line-height: 1.4;
  text-transform: uppercase;
}

/* Dos sub-columnas, como en A: cinco enlaces quedan 3 + 2.

   Va con grilla y no con `columns`, que era lo primero que probé. `columns`
   parte la caja en dos mitades iguales —181 px cada una— y A no hace eso: sus
   dos grupos se ajustan al ancho de su contenido y quedan separados 53 px, con
   el segundo arrancando en x 616. Con mitades iguales el segundo grupo caía en
   x 600, y si se ajustaba el gap para corregirlo la columna quedaba en 155 px
   y «Cambios y devoluciones» —157 px— se partía en dos renglones.

   `max-content` resuelve las dos cosas: cada grupo mide lo que mide su enlace
   más largo y nada se parte.

   ⚠️ Las tres filas son fijas. Con hasta 6 enlaces queda 3 + 3; con más, la
   grilla agrega una tercera columna y puede desbordar los 363 px de la caja.
   Si el menú crece bastante, revisar acá. */
.t-footer__links {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: max-content max-content;
  grid-template-rows: repeat(3, auto);
  column-gap: 53px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.t-footer__links li {
  list-style: none;
}

/* Prefijado con `.t-footer` por lo mismo que el header: los estilos por widget
   de Elementor y el CSS de `custom-css-js` siguen compitiendo hasta la Fase 4.
   Ver CLAUDE.md → «Especificidad contra Elementor».

   Renglón de 25 px, medido en A (enlaces en y 135, 160 y 185). Con padding
   propio más un line-height relativo daba 30 y el footer salía 40 px más alto
   que el de A. */
.t-footer .t-footer__links a {
  display: block;
  padding: 0;
  color: var(--t-footer-link);
  font-family: var(--t-font-body);
  font-size: var(--t-footer-texto-size);
  font-weight: var(--t-weight-regular);
  line-height: 25px;
  text-decoration: none;
  /* La transición de color es de A (`transition: color .3s`); el transform se
     suma para que el desplazamiento acompañe y no salte. */
  transition: color .3s ease, transform .3s ease;
}

/* Hover de A: el texto pasa a blanco **y se corre 6 px a la derecha**. Sin
   subrayado — el subrayado fue una invención mía y no está en A.

   ⚠️ El desplazamiento se reproduce por observación, no por regla encontrada.
   Se buscó a fondo y **no aparece en ninguna hoja de A**: ni en las reglas de
   los dos widgets de enlaces (`3d8115b` y `37d559e`, que solo declaran
   `transition: color .3s` y el cambio a blanco), ni en `widget-icon-list.css`
   —que no tiene una sola regla `:hover`—, ni en el resto de las hojas, ni en
   el HTML, ni bajo la clase propia `footer-links`, que no tiene reglas.
   Pero se ve, y hay captura. Vale la regla de la sala limpia: se copia el
   resultado, no el código.

   Los enlaces del footer tampoco pasan a naranja: se quedan en gris claro
   sobre el navy. Decisión de DESIGN-SYSTEM.md §1.5. */
.t-footer .t-footer__links a:hover,
.t-footer .t-footer__links a:focus-visible {
  color: var(--t-white);
  transform: translateX(6px);
}

/* ---------- Acciones: redes y botón ---------- */

/* `align-items: flex-start` y no el `stretch` por defecto: en A el botón no
   tiene regla de ancho, así que se ajusta a su texto. Estirado ocupaba los
   290 px de la fila de íconos y se veía más ancho que el de A. */
.t-footer__acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.t-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.t-footer__social li {
  list-style: none;
}

/* Círculo blanco con el glifo en el navy del footer. Hoy esto lo pinta el
   widget de Elementor; al apagarlo hay que tenerlo en el theme, que es lo que
   hace esta regla. Ver MEDIDAS del footer. */
.t-footer .t-footer__social-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--t-white);
  color: var(--t-navy-footer);
  border-radius: var(--t-radius-full);
  text-decoration: none;
  transition: transform .2s ease;
}

.t-footer .t-footer__social-item:hover,
.t-footer .t-footer__social-item:focus-visible {
  color: var(--t-navy-footer);
  transform: scale(1.1);
}

.t-footer__social-icono {
  display: block;
}

/* Botón fantasma: mismo fondo que el footer y borde blanco. */
.t-footer .t-footer__boton {
  display: inline-block;
  padding: 16px 28px 17px;
  background: transparent;
  color: var(--t-white);
  border: 1px solid var(--t-white);
  border-radius: var(--t-radius-input);
  font-family: var(--t-font-body);
  font-size: var(--t-footer-texto-size);
  font-weight: var(--t-weight-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

/* Blanco al 88 %, no sólido: es lo que declara A (`#FFFFFFE0`). */
.t-footer .t-footer__boton:hover,
.t-footer .t-footer__boton:focus-visible {
  background: var(--t-white-soft);
  color: var(--t-navy-footer);
}

/* ---------- Copyright ---------- */

/* Misma banda de color: en A no hay cambio de tono ni línea divisoria. */
.t-footer__copyright {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

/* Medido en A: 14 px con peso **300**, no 15 con 400. El 14 sí está en la
   escala (`--t-body-sm-size`), así que este texto no arrastra la deuda de los
   tamaños fuera de escala del resto del footer. */
.t-footer__copyright p {
  margin: 0;
  color: var(--t-white);
  font-family: var(--t-font-body);
  font-size: var(--t-body-sm-size);
  font-weight: var(--t-weight-light);
  line-height: 25px;
  text-align: center;
}

/* «Grupo EON» va en peso 500, **no en negrita**: 700 era invención mía. El 500
   sale del estilo de enlace del kit, que el theme ahora replica acá. */
.t-footer .t-footer__eon {
  color: var(--t-white);
  font-weight: var(--t-weight-medium);
  text-decoration: none;
}

/* En A este enlace se pone teal al pasar el mouse —un color secundario
   retirado, que se colaba por el hover global del kit—. Eso no se reproduce:
   queda blanco, como el resto del footer. */
.t-footer .t-footer__eon:hover,
.t-footer .t-footer__eon:focus-visible {
  color: var(--t-white);
}

/* ============================================================
   TABLET Y MOBILE
   ============================================================ */

@media (max-width: 1023px) {
  .t-footer {
    --t-footer-gutter: 20px;
  }

  .t-footer__principal {
    gap: 28px;
    padding: 40px var(--t-footer-gutter) 20px;
  }
}

/* ---------- Tablet: 768 a 1023 ----------
   Las tres columnas, como en A y como en desktop. Pedido de la diseñadora el
   2026-09-11.

   ⚠️ Acá NO se copia a A tal cual: **a 768 el footer de A está roto**, con el
   escudo y los enlaces superpuestos porque las columnas colisionan antes de
   apilarse. Por eso este theme lo apilaba. La forma de tener las tres columnas
   sin el defecto es repartir el ancho de otra manera, que es lo que hacen las
   cuatro reglas de abajo. Medido a 768, 820, 900 y 1000: **cero
   superposiciones** entre escudo, título, enlaces, íconos y botón.

   Qué hace cada una, porque ninguna es cosmética:

   - `.4fr 1.6fr .4fr` en vez de los porcentajes de desktop. Con `31% 30.6%`
     la caja de enlaces quedaba en 312 px y los enlaces necesitan 352, así que
     la segunda columna —«Preguntas Frecuentes» y «Cómo comprar»— se salía y
     se metía debajo de los íconos. Acá el grueso del ancho va al centro, que
     es donde está el contenido que no entraba.

     Ojo con leer los `fr` de forma literal: la tercera columna **no** mide
     0.4 partes. Un `fr` no baja del `min-content` de su contenido, y el del
     botón es 220 px, así que la columna se planta en 220 y el reparto .4/1.6
     se aplica sobre lo que sobra. Medido a 768: 90 / 362 / 220.
   - El hueco entre enlaces baja de 53 a 32 px: es lo que hace entrar las dos
     columnas en el ancho que queda.
   - Los íconos pasan a una grilla de 4, así quedan 4 + 2 como en la
     referencia. En flex se acomodaban 5 + 1, y de paso su fila estiraba la
     columna de acciones y le robaba ancho a los enlaces.
   - El botón va más compacto y con `nowrap`. Sin el `nowrap` no alcanzaba con
     el padding: a 768 lo que lo partía en dos renglones no era su relleno sino
     el ancho de la fila de íconos, que lo estaba limitando.
   ----------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
  .t-footer__principal {
    grid-template-columns: .4fr 1.6fr .4fr;
    column-gap: 20px;
  }

  .t-footer__links {
    column-gap: 32px;
  }

  .t-footer__social {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 10px;
  }

  .t-footer .t-footer__boton {
    padding: 12px 18px;
    white-space: nowrap;
  }
}

/* ---------- Mobile: hasta 767 ----------
   Apilado en una sola columna, que es lo que A hace bien en mobile.
   --------------------------------------- */

@media (max-width: 767px) {
  .t-footer__principal {
    grid-template-areas:
      "marca"
      "info"
      "acciones";
    grid-template-columns: 1fr;
  }

  /* El escudo al borde izquierdo, alineado con «INFORMACIÓN» y con los
     enlaces. Pedido de la diseñadora el 2026-09-11; antes iba centrado, que
     es lo que hace A. Medido: queda en x = 20, la misma sangría que el resto
     de la columna. */
  .t-footer__marca {
    justify-self: start;
  }

  .t-footer__acciones {
    justify-self: stretch;
    align-items: stretch;
  }

  /* En mobile A invierte el orden: primero el botón y después las redes. */
  .t-footer__social {
    order: 2;
    justify-content: flex-start;
  }

  /* El botón se ajusta a su texto y no ocupa todo el ancho. Mismo relleno
     compacto que en tablet. Medido a 360, 390, 600 y 700: 220 px de ancho,
     una sola línea y sin desbordes. */
  .t-footer .t-footer__boton {
    order: 1;
    align-self: flex-start;
    padding: 12px 18px;
  }
}

@media (max-width: 600px) {
  .t-footer__links {
    grid-auto-flow: row;
    grid-template-columns: max-content;
    grid-template-rows: none;
  }

  /* Acá había un `align-self: stretch` que estiraba el botón a todo el ancho.
     Se quitó el 2026-09-11: ahora se ajusta a su texto en todo mobile.
     Como este bloque va DESPUÉS del de 767, su regla le ganaba por orden
     aunque las dos tuvieran la misma especificidad; dejarla habría anulado
     el `flex-start` de arriba sin que se notara al leer el bloque anterior. */
}

@media (prefers-reduced-motion: reduce) {
  .t-footer * {
    transition: none !important;
  }
}