/* ==========================================================================
   MOIRE - pie (footer)
   --------------------------------------------------------------------------
   Medidas sacadas de tres frames de Figma:
     FOOTER escritorio   222:2053   1920x220
     FOOTER TABLET       222:2741    768x395
     FOOTER/Mobile       216:1505    375x249

   UN SOLO MARCADO para las tres anchuras (ver inc/footer.php): aqui solo se
   cambia la posicion por CSS, nunca el HTML. El marcado de la tarea agrupa
   el pie en seis piezas (marca, dos <nav> de enlaces, el mail list, el
   selector de idioma y las redes) y cada breakpoint las coloca con
   CSS Grid y grid-template-areas: la unica manera de reordenar visualmente
   seis hermanos sueltos sin tocar el orden del DOM (que es el orden de
   lectura de un lector de pantalla, y ese no cambia con el ancho).

   EL SELECTOR DE IDIOMA NO ESTA EN NINGUN FRAME (ver el comentario de
   inc/footer.php): al igual que en nav.css, se coloca por criterio propio,
   en la esquina superior derecha del pie. Su aspecto (flex, tipografia,
   opacidad de cada idioma, separador) vive en assets/css/base.css, junto
   con el de su gemelo de la cabecera: aqui solo va su posicion.
   ========================================================================== */

.pie {
  position: relative;   /* ancla de .pie__idiomas, ver mas abajo */
  background: var(--c-crema);
  color: var(--c-burdeos);
}

/* --- Enlaces: dos <nav class="pie__enlaces"> hermanos ---------------------
   nth-of-type cuenta entre hermanos del mismo elemento (aqui, los dos unicos
   <nav> del pie), no hace falta una clase distinta para el primero y el
   segundo. */
nav.pie__enlaces:nth-of-type(1) { grid-area: enlaces1; }
nav.pie__enlaces:nth-of-type(2) { grid-area: enlaces2; }

.pie__enlaces a {
  /* El diseno pone estos textos en VERSALES; las claves de t() se guardan
     con mayuscula inicial nada mas (ver nav.css, mismo criterio), asi que
     el mayusculado es cosa del CSS y no toca los diccionarios. */
  text-transform: uppercase;
}

.pie__enlaces a {
  display: block;
  font-weight: var(--peso-medium);
  letter-spacing: 0.09em;
}

.pie__enlaces a:hover {
  opacity: 0.7;
}

.pie__enlaces ul {
  display: flex;
  flex-direction: column;
}

/* --- Marca (monograma) ----------------------------------------------------
   127x127 en el diseno de escritorio y tablet (222:2053, 222:2741); en
   movil (216:1505) el mismo monograma se reduce a 60x60. El <img> ya trae
   width/height=127 como atributos (para reservar hueco y no dar salto de
   layout); el CSS los reescribe por breakpoint. */
.pie__marca { grid-area: marca; }

.pie__marca img {
  width: 60px;
  height: 60px;
}

/* EL MAIL LIST SE RETIRA (25/09/2026). Eran un titulo, un campo de correo
   y un boton, los tres inactivos porque el formulario nunca llego a
   conectarse a nada. Con ellos se van sus reglas y su area en las tres
   rejillas.

   CONSECUENCIA QUE CONVIENE SABER: con esto el sitio deja de recoger NINGUN
   dato personal. Era el unico campo que habia en todo el proyecto.

   Y --c-rosa deja de usarse en el pie: ahora solo lo gastan las cuatro
   paginas legales, donde es el fondo. */

/* --- Selector de idioma -----------------------------------------------
   El aspecto (flex, tipografia, color, opacidad de cada idioma y el
   separador "/") es el mismo componente que su gemelo de la cabecera y
   vive en assets/css/base.css (ver el comentario de alli). Aqui solo va
   lo que es propio del pie: la posicion. Aparte del grid
   (position:absolute) porque no existe en ningun frame de Figma: no tiene
   sentido reservarle una celda en una reticula medida sobre un diseno que
   no lo contempla. */
.pie__idiomas {
  position: absolute;
  top: 24px;
  right: 24px;
}

/* --- Redes sociales ---------------------------------------------------
   El diseno llama "Hitbox" a la caja de 44x44 que envuelve cada icono
   (visible a 20x20): la zona pulsable es mas grande que el dibujo, que es
   justo lo que pide un objetivo tactil accesible. Se reproduce dando al
   <a>, no al <img>, esos 44x44. */
.pie__redes {
  grid-area: redes;
  display: flex;
  align-items: center;
  gap: 16px;
}

.pie__redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

/* SIN MEDIDA AQUI (24/09/2026). Esta regla ponia 20x20 a los tres iconos,
   que funcionaba mientras los tres eran cuadrados. Con TikTok no: su dibujo
   es 14,93x17,19 y el cuadrado lo estiraba un 15% a lo ancho. Cada <img>
   lleva ahora las medidas de SU dibujo, que es lo que dice el nodo, y aqui
   solo queda lo que si es comun a los dos. */
.pie__redes img {
  display: block;
}

/* ==========================================================================
   Base: movil, FOOTER/Mobile (216:1505), <768
   --------------------------------------------------------------------------
   Todo apilado en una columna, salvo los dos <nav> de enlaces (que en el
   diseno van uno junto al otro): dos columnas resuelven ese caso.

   El mail list y las redes SI comparten fila en el diseno movil.
   Con la rejilla de dos columnas iguales de aqui abajo (1fr 1fr) no caben:
   los "Hitbox" de 44px (ver .pie__redes mas arriba) piden 164px con sus
   huecos cuando son tres, y cada columna deja solo ~151,5px de los 375 del
   frame. Desde el 24/09/2026 son DOS y piden 104, o sea que ahora si
   cabrian; la decision de apilarlos no cambia, porque no se tomo por sitio
   sino por lo que se lee justo debajo.

   Pero repartiendo esa fila SIN columnas iguales -las redes a su ancho
   fijo (164px) y el formulario ocupando el resto- si entrarian los dos:
   quedarian unos 139px para el campo de email, que no desborda. Se
   descarto esa opcion no porque no cupiera, sino porque un campo de 139px
   junto a un boton de 34 es incomodo de tocar y de leer en un movil real;
   apilarlos en su propia fila deja a cada uno el ancho completo y es mas
   usable. */
.pie {
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 20px;
  grid-template-areas:
    "marca    marca"
    "enlaces1 enlaces2"
    "redes    redes";
}

.pie__enlaces ul {
  gap: 8px;
}

/* LOS ROTULOS DEL PIE, MAS PEQUENOS (30/09/2026).

   Lo pidio el responsable. Bajan dos puntos en los tres cortes -14 a 12 en
   movil y 16 a 14 de 768 en adelante- y con eso el pie deja de competir con
   el contenido: son enlaces de servicio, no navegacion principal.

   EL MONOGRAMA NO SE TOCA, y va dicho porque es lo que alguien encogeria
   "para que acompane": sigue en 60 en movil y 127 de 1200 en adelante. Lo
   pidio asi el responsable y ademas es la marca, no un rotulo.

   12px ES EL SUELO Y NO CONVIENE BAJAR MAS: por debajo de eso un enlace
   deja de ser comodo de pulsar con el dedo y el texto en versales con
   0,09em de espaciado empieza a costar de leer. */
.pie__enlaces a {
  font-size: 12px;
}

/* ==========================================================================
   Tablet: FOOTER TABLET (222:2741), 768 a 1199
   --------------------------------------------------------------------------
   El diseno pasa a 395 de alto: la marca queda arriba a la izquierda, los
   dos bloques de enlaces a su derecha, y debajo -con un salto grande, medido
   sobre el frame- el mail list a la izquierda y las redes a la derecha.
   Tres columnas resuelven las dos filas sin duplicar marcado.
   ========================================================================== */
@media (min-width: 768px) {
  .pie {
    /* 33px = 4.3% de 768, el margen izquierdo del frame. */
    padding: 56px 33px;
    grid-template-columns: 160px 1fr 1fr;
    column-gap: 24px;
    row-gap: 64px;
    /* Sin el mail list, la segunda fila la ocupan solo las redes, que
       siguen pegadas al margen derecho por su justify-self. */
    grid-template-areas:
      "marca enlaces1 enlaces2"
      "redes redes    redes";
  }

  .pie__marca img {
    width: 127px;
    height: 127px;
  }

  .pie__enlaces ul {
    gap: 10px;
  }

  .pie__enlaces a {
    font-size: 14px;
    letter-spacing: 0.09em;
  }

  .pie__redes {
    justify-self: end;
    align-self: start;
  }
}

/* ==========================================================================
   Escritorio: FOOTER escritorio (222:2053), >=1200
   --------------------------------------------------------------------------
   Una sola fila de 220 de alto. En el diseno cada pieza esta a una
   distancia fija de la anterior (80 - marca - 125 - enlaces1 - 40 -
   enlaces2 - 40 - lista - ... - redes, pegada al margen derecho): un flex
   en fila con esos huecos por margen reproduce las mismas distancias sin
   recurrir a posicionamiento absoluto pieza a pieza.

   ALINEACION VERTICAL: el diseno NO centra cada bloque por su propia
   altura (eso fue un criterio de partida equivocado). La marca y las tres
   columnas de texto empiezan todas en la misma linea -el monograma en
   y=46,65, y la primera fila de cada columna centrada en y=54, que con su
   interlineado de 16px empieza tambien sobre el 46- asi que el criterio
   del contenedor pasa a "arriba" (align-items:flex-start) y ese arranque
   comun se declara UNA vez para las cuatro piezas. Las redes, en cambio,
   SI se centran de verdad: y=88 con 44 de alto da centro en 110, la mitad
   exacta de los 220 del pie, y no es casualidad.

   Por que asi y no con margin-top calculado pieza a pieza: un margen
   pensado para cuadrar la columna de 2 enlaces con la de 4 se descuadra en
   cuanto alguien anada o quite un enlace de cualquiera de las dos. Un
   mismo margen-top compartido, en cambio, no depende de cuanto contenido
   tenga cada columna: siempre las deja arrancar en la misma linea. */
/* EL CORTE VUELVE A 1200, QUE ES EL DEL RESTO DEL PROYECTO (25/09/2026).

   ESTUVO EN 1500 POR UN MOTIVO QUE YA NO EXISTE. Este pie no se adapta, se
   coloca: sus medidas salen del diseno de 1920 y son fijas -monograma de
   127, 125 de aire a su derecha, 40 entre columnas y 80 de margen de pagina
   a cada lado-. Lo unico elastico es el ancho de cada columna de enlaces,
   que vale lo que midan sus palabras. Con el mail list puesto y con
   "Preguntas frecuentes" en la primera columna, medido barriendo anchos en
   /es/collections, el pie dejaba de caber por debajo de 1470 de area de
   contenido: el monograma empezaba a encogerse y a 1265 desaparecia del
   todo. Cero y no pequeno, porque es un <img> y el reset de base.css le
   impide pasar del ancho de su contenedor.

   Retirados los dos el 25/09/2026, el pie pide 1097 de area de contenido:
   160 de margenes + 252 la marca con su aire + 137 la primera columna + 444
   la segunda + 104 las redes. Medido otra vez a 1200 en castellano, que es
   el idioma largo: el monograma se mantiene en 127, el pie no desborda y
   las redes quedan clavadas en su margen de 80.

   O sea que a 1200 sobran unos 88 pixeles. Se baja el corte porque tenerlo
   en 1500 dejaba a cualquier portatil entre 1200 y 1500 con el pie de
   tablet teniendo sitio de sobra para el de escritorio.

   LA HOLGURA SIGUE SIENDO PEQUENA. Si alguien alarga un enlace del pie en
   espanol, hay que comprobar el monograma en /es/collections a 1200 de
   ventana. No hay prueba automatica que lo cace: las de humo hablan HTTP y
   no miden maquetacion. El flex-shrink:0 de mas abajo es la red de
   seguridad, y esta puesto justo para que ese fallo sea ruidoso. */
@media (min-width: 1200px) {
  .pie {
    display: flex;
    align-items: flex-start;
    height: 220px;
    padding-block: 0;
    padding-inline: var(--margen-pagina);
  }

  .pie__marca,
  nav.pie__enlaces {
    margin-top: 46.65px;   /* y del monograma en el diseno; ver comentario de arriba */
  }

  .pie__redes {
    align-self: center;   /* las unicas que SI se centran, ver comentario de arriba */
  }

  .pie__marca {
    margin-right: 125px;

    /* NO SE ENCOGE. No es decorativo: cambia el modo de fallo. Si algun dia
       el contenido vuelve a no caber, sin esto el monograma se desvanece en
       silencio y nadie se entera; con esto algo desborda, que se ve y se
       diagnostica. Un fallo ruidoso es mejor que uno invisible. */
    flex-shrink: 0;
  }

  .pie__marca img {
    width: 127px;
    height: 127px;
  }

  nav.pie__enlaces:nth-of-type(1) { margin-right: 40px; }
  nav.pie__enlaces:nth-of-type(2) { margin-right: 40px; }

  .pie__enlaces ul {
    gap: 10px;
  }

  .pie__enlaces a {
    font-size: 14px;
    letter-spacing: 0.09em;
    white-space: nowrap;
  }

  /* LAS REDES SE VAN AL MARGEN DERECHO SOLAS. Antes las empujaba el
     margin-right:auto del mail list, que era la pieza anterior de la fila;
     retirado el mail list, el empujon lo da ahora la propia caja de redes
     tirando de su margen izquierdo. El hueco que queda en medio sigue
     siendo "el resto del ancho disponible", como en el diseno. */
  .pie__redes {
    margin-left: auto;
  }

  .pie__idiomas {
    top: 34px;
    right: var(--margen-pagina);
  }
}