/* ==========================================================================
   Secciones de la portada y tarjeta de producto.
   Depende de tokens.css, base.css y componentes.css.
   ========================================================================== */

/* --- Piezas compartidas --------------------------------------------------- */

.zfc-seccion__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zfc-esp-4);
  flex-wrap: wrap;
  margin-bottom: var(--zfc-esp-2);
}

.zfc-seccion__cabecera h2 { margin: 0; }

.zfc-seccion__bajada {
  max-width: 640px;
  color: var(--zfc-texto-secundario);
  margin: 0 0 var(--zfc-esp-6);
}

/* Variante compacta: titulo, bajada y enlace en una sola linea. La cabecera
   apilada costaba 104px antes de que empezara el contenido de la seccion. */
.zfc-seccion__cabecera--compacta {
  align-items: baseline;
  margin-bottom: var(--zfc-esp-4);
}

.zfc-seccion__cabecera--compacta .zfc-enlace-acento { margin-left: auto; }

.zfc-seccion__bajada--linea {
  margin: 0;
  font-size: var(--zfc-cuerpo-s);
}

/* En pantallas donde no cabe todo en una linea, la bajada se pasa entera
   abajo en vez de partirse en dos palabras por linea.

   El ORDEN importa y estaba al revés: quedaba el título, después el enlace de
   «Ver todo» flotando a la derecha, y recién después la bajada que explica el
   título. El enlace se metía entre un titular y su propia frase. Va al final,
   que es donde se lee después de haber entendido de qué va la sección. */
@media (max-width: 899px) {
  .zfc-seccion__bajada--linea { flex: 1 0 100%; order: 2; }
  .zfc-seccion__cabecera--compacta .zfc-enlace-acento { order: 3; margin-left: 0; }
}

.zfc-etiqueta--acento { color: var(--zfc-acento-texto); letter-spacing: .16em; }
.zfc-superficie-inversa .zfc-etiqueta--acento { color: var(--zfc-accion-acento); }

.zfc-enlace-acento {
  display: inline-flex;
  align-items: center;
  gap: var(--zfc-esp-2);
  color: var(--zfc-acento-texto);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.zfc-enlace-acento:hover { color: var(--zfc-acento-texto); text-decoration: underline; }

/* Botón grande: el de las bandas y el hero. */
.zfc-boton.zfc-boton--l { min-height: var(--zfc-boton-l); padding-inline: var(--zfc-esp-8); font-size: var(--zfc-cuerpo-m); }

.zfc-boton.zfc-boton--inverso {
  background: var(--zfc-accion-inversa);
  color: var(--zfc-texto-marca);
}
.zfc-boton.zfc-boton--inverso:hover { background: var(--zfc-texto-inverso-suave); color: var(--zfc-texto-marca); }

/* Contorno sobre fondo oscuro. El `--contorno` normal se dibuja en marino y
   sobre la banda marino desaparece. */
.zfc-boton.zfc-boton--contorno-inverso {
  background: transparent;
  border-color: var(--zfc-texto-inverso-tenue);
  color: var(--zfc-texto-inverso);
}
.zfc-boton.zfc-boton--contorno-inverso:hover {
  background: var(--zfc-accion-inversa);
  border-color: var(--zfc-accion-inversa);
  color: var(--zfc-texto-marca);
}

/* --- Hero ----------------------------------------------------------------- */

/* El alto, el encuadre y las dos fotos los administra la óptica y llegan como
   propiedades personalizadas en el atributo `style` de la sección, que escribe
   `zfc_hero_estilo()`. Los valores de reserva que van acá son los que la
   portada tenía antes de que el panel existiera: sirven si alguna vez se pinta
   un `.zfc-hero` fuera de la portada, para que el banner no colapse a cero. */

.zfc-hero {
  /* Ancla de `.zfc-hero__enlace`, la capa que cubre el banner cuando lleva
     enlace. Sin desplazamientos no cambia nada de la maquetación. */
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--zfc-hero-alto, 400px);
  padding-block: var(--zfc-esp-8);
  /* Sin la foto de campaña queda una textura discreta, no un hueco. */
  background: repeating-linear-gradient(45deg,
    var(--zfc-superficie-hundida) 0 12px,
    var(--zfc-superficie-calida) 12px 24px);
}

/* El encuadre de la foto del cliente, elegido por Daniel el 14-09-2026 sobre el
   propio banner: 18% y 36%, sin ampliar. Antes se ampliaba al 150% para poder
   correr la foto de Unsplash; esta ya trae a la persona donde tiene que estar,
   y ampliar solo restaba nitidez (la foto mide 1500 de ancho). Desde el
   16-09-2026 esos dos números son el defecto de dos campos del panel, porque la
   foto la sube la óptica y cada foto pide su encuadre. */
.zfc-hero--con-imagen {
  position: relative;
  background-image: var(--zfc-hero-foto);
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
}

@media (min-width: 900px) {
  .zfc-hero--con-imagen {
    background-size: 100% auto;
    background-position: var(--zfc-hero-x, 18%) var(--zfc-hero-y, 36%);
  }
}

/* El texto va SOBRE la foto, sin caja. Lo pidió el cliente el 14-09-2026: el
   rectángulo marfil tapaba media imagen y con esta foto tapaba el rostro.

   Lo que sostiene el texto es un degradado que arranca opaco a la izquierda y
   se apaga ANTES del rostro, así que la cara se ve entera. No es adorno: sin
   él, un titular blanco sobre foto depende de qué foto suba la óptica, y la
   sube ella desde el personalizador. Medido en el navegador sobre la foto de
   hoy: el titular queda en 12,2 a 1, contra el 4,5 del mínimo legible. */
@media (min-width: 900px) {
  .zfc-hero--con-imagen::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(10, 26, 47, .88) 0%,
      rgba(10, 26, 47, .72) 34%,
      rgba(10, 26, 47, .28) 58%,
      rgba(10, 26, 47, 0) 76%
    );
  }

  .zfc-hero--con-imagen .zfc-hero__tarjeta {
    position: relative;   /* por encima del degradado */
    background: none;
    border-left: 0;
    padding-left: 0;
    padding-right: var(--zfc-esp-8);
  }

  /* La etiqueta usa la clase del sistema (`--acento`), que sobre marfil va en
     un ámbar oscuro. Sobre el degradado necesita el ámbar claro, el mismo que
     ya usan las secciones de fondo marino. */
  .zfc-hero--con-imagen .zfc-etiqueta--acento { color: var(--zfc-accion-acento); }
  .zfc-hero--con-imagen .zfc-hero__titulo   { color: var(--zfc-texto-inverso); }
  .zfc-hero--con-imagen .zfc-hero__bajada   { color: var(--zfc-texto-inverso-suave); }
}

/* Sin foto el hero sigue siendo la textura de rayas con la tarjeta marfil: ahí
   no hay nada que dejar ver y el texto oscuro es el que se lee. */

.zfc-hero__tarjeta {
  /* Ancho suficiente para que el titular quepa en tres líneas con el H1 de 56px
     que fija el sistema de diseño. */
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-4);
  padding: var(--zfc-esp-8) var(--zfc-esp-8);
  background: var(--zfc-superficie-calida);
  border-left: 3px solid var(--zfc-accion-acento);
}

.zfc-hero__titulo { margin: 0; }
.zfc-hero__bajada { margin: 0; color: var(--zfc-texto-secundario); }

/* El banner entero como enlace, cuando la óptica carga uno. Va de capa suelta y
   no de envoltorio del texto porque dentro hay dos botones y un <a> no se anida
   en otro; el porqué entero está en `front-page.php`, que es donde se decide
   imprimirla. Sin enlace cargado no existe, así que el banner de hoy no lleva
   ninguna capa encima. */
.zfc-hero__enlace {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.zfc-hero__acciones {
  display: flex;
  gap: var(--zfc-esp-3);
  flex-wrap: wrap;
  margin-top: var(--zfc-esp-1);
  /* Por encima de `.zfc-hero__enlace`, la capa que hace clicable el banner
     entero: sin esto, con enlace cargado los dos botones dejarían de ser
     suyos. El `z-index` va escrito aunque el orden del documento ya bastaría,
     porque desde 900px la tarjeta está posicionada y dejarlo al orden es
     dejarlo a que nadie mueva nunca este bloque dentro del hero. */
  position: relative;
  z-index: 2;
}

/* En el teléfono los dos botones se apilan, y sueltos quedaban de anchos
   distintos según lo que dice cada uno: «Ver los marcos» corto y «Cotizar con mi
   receta» largo, uno debajo del otro y desalineados. Son las dos vías de venta
   del sitio y tienen que verse como dos opciones, no como una principal y una
   sobra. */
@media (max-width: 599px) {
  .zfc-hero__acciones { flex-direction: column; }
  .zfc-hero__acciones .zfc-boton { width: 100%; }
}

/* En pantalla grande el banner mide 60px más, y esos 60 se suman al alto que
   administra la óptica en vez de ser otro número aparte: con dos campos, uno de
   los dos se queda atrás y el banner termina midiendo distinto en cada pantalla
   sin que nadie lo haya decidido. Con el panel vacío da los 460px de siempre. */
@media (min-width: 900px) {
  .zfc-hero { min-height: calc(var(--zfc-hero-alto, 400px) + 60px); }
  .zfc-hero__tarjeta { padding: var(--zfc-esp-8) var(--zfc-esp-12); }
}

/* En el teléfono el hero deja de ser foto de fondo con tarjeta encima y pasa a
   dos piezas apiladas: una banda de foto arriba y la tarjeta debajo.

   Con la tarjeta centrada sobre un hero de 400px de alto, en un teléfono de
   375 quedaban 32px de imagen arriba y otros 32 abajo: la foto de la tienda,
   que es la que dice «somos una óptica de verdad», no se veía. Y la tarjeta se
   comía la pantalla entera, así que había que deslizar antes de encontrar el
   primer marco.

   La foto sigue siendo el fondo del propio hero (no hay elemento propio que
   darle), así que la banda se hace con `background-size` de alto fijo y un
   `padding-top` del mismo alto que empuja la tarjeta debajo. El
   `background-origin` por defecto es `padding-box`, o sea que la imagen arranca
   en el borde de arriba. */
@media (max-width: 899px) {
  .zfc-hero--con-imagen {
    --zfc-hero-banda: clamp(180px, 46vw, 260px);

    display: block;
    min-height: 0;
    padding-block: 0;
    padding-top: var(--zfc-hero-banda);
    /* Acá, y solo acá, puede entrar una foto distinta: la de escritorio es
       apaisada y en esta banda se recorta por el ancho, así que una óptica que
       la vea mal cortada carga una versión propia. Sin esa segunda foto queda
       la misma de arriba, que es lo que hay hoy. */
    background-image: var(--zfc-hero-foto-movil, var(--zfc-hero-foto));
    /* `100% auto` y no `auto <alto>`, que era lo que había: escalando por el
       alto, una foto apaisada no llega a llenar el ancho del teléfono. Con la
       foto del cliente (3 a 2) la banda de 180px daba 270px de imagen en una
       pantalla de 375 y quedaban 52px de fondo a cada lado.

       Y NO `cover`, que es lo que parece la respuesta y no lo es: el fondo se
       pinta sobre el elemento ENTERO (la banda más la tarjeta de texto, que
       mide 800px), así que `cover` escala la foto para cubrir esos 800 y en la
       banda solo se ve un primer plano del pelo. Con `100% auto` la imagen
       llena el ancho y la banda muestra su parte de arriba, que es donde está
       el rostro. */
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }

  /* La tarjeta a ancho completo, pegada a la banda y con su filete ámbar. */
  .zfc-hero--con-imagen .zfc-contenido { padding-inline: 0; }

  .zfc-hero--con-imagen .zfc-hero__tarjeta {
    max-width: none;
    padding: var(--zfc-esp-6) var(--zfc-esp-4);
  }
}

/* --- Franja de marcas ----------------------------------------------------- */

.zfc-marcas { border-bottom: 1px solid var(--zfc-borde-medio); }

/* La franja de marcas era una grilla de cinco fichas con borde, nombre grande y
   contador: 321px de alto para mostrar cinco de diecisiete marcas. Ahora es una
   tira que desliza, del alto de un logo. Ver docs/ecommerce/09-densidad-home.md. */

.zfc-marcas__carrusel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-2);
}

.zfc-marcas__tira {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--zfc-esp-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.zfc-marcas__tira::-webkit-scrollbar { display: none; }

.zfc-marcas__ficha {
  flex: 0 0 auto;
  width: 132px;
  scroll-snap-align: start;
}

@media (min-width: 900px) {
  .zfc-marcas__ficha { width: 148px; }
}

.zfc-marcas__ficha a {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--zfc-esp-3);
  text-align: center;
  text-decoration: none;
  opacity: .75;
  transition: opacity .15s ease;
}

.zfc-marcas__ficha a:hover { opacity: 1; }

/* Catorce de las diecisiete marcas todavia no tienen logo cargado: para esas,
   zfc_logo_marca() imprime el nombre y tiene que caber en el mismo alto. */
.zfc-marcas__nombre {
  font-size: var(--zfc-cuerpo-s);
  font-weight: 500;
  letter-spacing: .07em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--zfc-texto-secundario);
}

/* Los logos ya vienen normalizados a un lienzo de 3 a 1 y con el area de tinta
   pareja, asi que aqui basta con encajarlos: los hace demo/normalizar-logos.py.
   Sin eso, un wordmark de 12 a 1 como Carolina Herrera queda de diez pixeles al
   lado de uno casi cuadrado como ZEISS. */
.zfc-marcas__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zfc-marcas__flecha {
  flex: none;
  width: 32px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--zfc-borde-medio);
  background: var(--zfc-superficie-base);
  color: var(--zfc-texto-marca);
  cursor: pointer;
}

.zfc-marcas__flecha:hover { border-color: var(--zfc-accion-primaria); }
.zfc-marcas__flecha[hidden] { display: none; }

/* En el teléfono la tira deja de deslizar y se vuelve parrilla.
   Deslizando mostraba DOS logos de diecisiete, sin barra de desplazamiento
   (está escondida a propósito) y con una flecha gris como única pista de que
   había quince más. La sección que tiene que ordenar el sitio parecía un hueco
   con dos logos. En parrilla se ven nueve de una vez, sin ningún gesto.

   Y las flechas no tienen sentido con el dedo: se esconden por puntero, no por
   ancho, porque lo que las hace inútiles es que no haya cursor. */
@media (max-width: 899px) {
  /* La cabecera de esta sección se comprime a una línea: el título a la
     izquierda y el enlace a la derecha. La bajada («Elige una marca y ve todo
     lo que tenemos de ella») ocupaba dos renglones para decir lo que la
     parrilla de logos ya dice sola. Antes eran 166px de cabecera por 60px de
     tira; ahora la cabecera cuesta una línea y la parrilla enseña nueve marcas. */
  .zfc-marcas .zfc-seccion__bajada--linea { display: none; }
  .zfc-marcas .zfc-seccion__cabecera--compacta { flex-wrap: nowrap; align-items: center; }
  .zfc-marcas .zfc-seccion__cabecera--compacta .zfc-enlace-acento { order: 0; margin-left: auto; }

  .zfc-marcas__tira {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    overflow-x: visible;
    background: var(--zfc-borde-sutil);
    border: 1px solid var(--zfc-borde-sutil);
  }

  .zfc-marcas__ficha {
    width: auto;
    background: var(--zfc-superficie-base);
  }

  /* Solo las nueve primeras: con diecisiete, la parrilla se comía media
     pantalla y el enlace «Ver todas las marcas» de la cabecera es la salida. */
  .zfc-marcas__ficha:nth-child(n + 10) { display: none; }

  .zfc-marcas__ficha a { height: 60px; }
}

@media (hover: none) {
  .zfc-marcas__flecha { display: none; }
}

/* --- Recién llegados ------------------------------------------------------ */

.zfc-recientes { border-bottom: 1px solid var(--zfc-borde-medio); }

/* --- Probador ------------------------------------------------------------- */

.zfc-probador {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .zfc-probador { grid-template-columns: 1.1fr 1fr; }
}

.zfc-probador__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zfc-esp-4);
  justify-content: center;
  padding: var(--zfc-esp-8) var(--zfc-esp-4);
}

/* El texto arranca donde arranca `.zfc-contenido`, no en el borde del bloque.
   Esta sección va a ancho completo por la foto, así que sin este cálculo su
   titular empezaba 28px antes que el del resto de la página y se notaba al
   mirar la portada entera. La cuenta es la misma que hace el contenedor
   centrado: mitad del sobrante, más su padding. */
@media (min-width: 900px) {
  .zfc-probador__texto {
    padding-block: var(--zfc-esp-12);
    padding-right: var(--zfc-esp-12);
    padding-left: max(
      var(--zfc-esp-8),
      calc((100vw - var(--zfc-contenido-max)) / 2 + var(--zfc-esp-8))
    );
  }
}

/* El botón dice una frase larga («Ver los marcos que se pueden probar») y en el
   teléfono se parte en dos líneas. Con el icono centrado por el `align-items`
   del botón genérico quedaba pegado al borde izquierdo, con un hueco entre él y
   un texto de dos líneas. Se sube el icono a la primera línea. */
@media (max-width: 599px) {
  .zfc-probador__texto .zfc-boton {
    align-items: flex-start;
    padding-block: var(--zfc-esp-3);
    text-align: left;
  }

  .zfc-probador__texto .zfc-boton .zfc-icono { margin-top: 2px; flex: none; }
}

.zfc-probador__texto h2 { margin: 0; }
.zfc-probador__texto p { margin: 0; max-width: 460px; color: var(--zfc-texto-inverso-suave); }
.zfc-probador__nota { color: var(--zfc-texto-inverso-tenue); }

/* La imagen va absoluta a proposito: en flujo normal, un retrato de 1200x1800
   con height:100% aporta su alto intrinseco a la fila del grid y estiraba la
   seccion a 1029px. Sacada del flujo, la altura la manda la columna de texto. */
.zfc-probador__medio {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  /* Igual que el hero: mientras no llegue la captura, textura y no un hueco. */
  background: repeating-linear-gradient(45deg, #1B2E45 0 12px, #16283C 12px 24px);
}

.zfc-probador__medio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Carrusel de productos ------------------------------------------------ */

/* Mismo mecanismo que la tira de marcas: desliza con el dedo y con la rueda, y
   las flechas son para el ratón. Las clases son propias porque las tarjetas de
   producto tienen otro alto y otras flechas que los logos. */

.zfc-carrusel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-2);
}

.zfc-productos.zfc-productos--tira {
  flex: 1;
  min-width: 0;
  display: flex;
  grid-template-columns: none;
  gap: var(--zfc-esp-6);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: var(--zfc-esp-2);
}

.zfc-productos.zfc-productos--tira::-webkit-scrollbar { display: none; }

.zfc-productos.zfc-productos--tira > .zfc-producto {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
}

@media (min-width: 900px) {
  .zfc-productos.zfc-productos--tira > .zfc-producto { width: 268px; }
}

.zfc-carrusel__flecha {
  flex: none;
  width: 36px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--zfc-borde-medio);
  background: var(--zfc-superficie-base);
  color: var(--zfc-texto-marca);
  cursor: pointer;
}

.zfc-carrusel__flecha:hover { border-color: var(--zfc-accion-primaria); }
.zfc-carrusel__flecha[hidden] { display: none; }

/* Con el dedo las flechas no sirven y encima estorban: se llevaban 44px de los
   375, y la de la izquierda APARECE al empezar a deslizar, así que todas las
   tarjetas daban un tirón de 52px justo cuando el dedo iba a tocar una. Si
   ibas a tocar un marco, tocabas el de al lado.

   Se esconden por PUNTERO y no por ancho: lo que las hace inútiles es que no
   haya cursor, no que la pantalla sea chica. Un portátil táctil de 1440
   también las tiene de sobra... pero ahí sí hay ratón, y `hover: none` sólo
   casa cuando el puntero principal no puede pasar por encima. */
@media (hover: none) {
  .zfc-carrusel__flecha { display: none; }

  /* Y la pista recupera el ancho completo: entra una tarjeta más el borde de la
     siguiente, que es lo que le dice al dedo que hay más. */
  .zfc-carrusel { gap: 0; }
}

/* --- Explora por marca ---------------------------------------------------- */

.zfc-explora__pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zfc-esp-2);
  margin-bottom: var(--zfc-esp-6);
}

/* En el teléfono las cinco marcas se envolvían en TRES filas de botones antes
   de llegar a un solo producto. Pasan a una fila que desliza. */
@media (max-width: 899px) {
  .zfc-explora__pestanas {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--zfc-esp-4) * -1);
    padding-inline: var(--zfc-esp-4);
  }

  .zfc-explora__pestanas::-webkit-scrollbar { display: none; }
  .zfc-explora__pestana { flex: 0 0 auto; min-height: var(--zfc-alto-tactil); }

  /* Y la parrilla muestra CUATRO productos, no ocho: la sección ocupaba 1.863px,
     dos pantallas y media de una portada de diez, y quien llegó por el probador
     todavía no lo había visto. Los otros cuatro se ocultan por CSS, sin tocar la
     consulta ni el escritorio: la salida real a esa marca es el enlace del pie
     de la sección. */
  .zfc-explora__panel .zfc-producto:nth-child(n + 5) { display: none; }
}

.zfc-explora__pestana {
  display: inline-flex;
  align-items: center;
  gap: var(--zfc-esp-2);
  min-height: 40px;
  padding: 0 var(--zfc-esp-4);
  border: 1px solid var(--zfc-borde-medio);
  background: var(--zfc-superficie-base);
  color: var(--zfc-texto-principal);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.zfc-explora__pestana:hover { border-color: var(--zfc-accion-primaria); }

.zfc-explora__pestana--activa {
  background: var(--zfc-accion-primaria);
  border-color: var(--zfc-accion-primaria);
  color: var(--zfc-texto-inverso);
}

.zfc-explora__total {
  font-size: var(--zfc-etiqueta);
  color: var(--zfc-texto-secundario);
  font-variant-numeric: tabular-nums;
}

.zfc-explora__pestana--activa .zfc-explora__total { color: var(--zfc-texto-inverso-tenue); }

/* Mientras llega la grilla nueva, la anterior se atenúa en vez de desaparecer:
   así la página no da un salto de alto en cada pestaña. */
.zfc-explora__panel { transition: opacity .15s ease; }
.zfc-explora__panel[data-cargando] { opacity: .4; }

.zfc-marca-vacia { color: var(--zfc-texto-secundario); }

/* --- Cierre de la portada ------------------------------------------------- */

/* Motivos y receta en un solo bloque, sobre marfil.

   El orden de color de la portada es marino (probador), marfil (motivos), ámbar
   (la caja de la receta) y marino otra vez (el pie). Antes los motivos también
   iban en marino y quedaban tres marinos seguidos con el pie: se leía como una
   sola mancha larga. La receta va DENTRO de este bloque, no en su propia banda,
   para que se siga leyendo como continuación de los motivos. */

.zfc-cierre { padding-block: var(--zfc-esp-9); }

.zfc-cierre__razones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zfc-esp-6);
}

@media (min-width: 900px) {
  .zfc-cierre__razones { grid-template-columns: repeat(3, 1fr); gap: var(--zfc-esp-8); }
}

.zfc-cierre__razon { display: flex; flex-direction: column; gap: var(--zfc-esp-2); }
.zfc-cierre__razon .zfc-icono { color: var(--zfc-acento-texto); }

.zfc-cierre__titulo {
  margin: 0;
  font-size: var(--zfc-h5);
  line-height: var(--zfc-h5-alto);
  font-family: var(--zfc-fuente-ui);
  font-weight: 600;
  color: var(--zfc-texto-marca);
}

.zfc-cierre__razon p {
  margin: 0;
  font-size: var(--zfc-cuerpo-s);
  line-height: var(--zfc-cuerpo-s-alto);
  color: var(--zfc-texto-secundario);
}

/* La receta: la única caja ámbar de la portada. */
.zfc-cierre__receta {
  margin-top: var(--zfc-esp-8);
  padding: var(--zfc-esp-6);
  background: var(--zfc-accion-acento);
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-6);
}

@media (min-width: 900px) {
  .zfc-cierre__receta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--zfc-esp-8);
  }
}

.zfc-cierre__texto { max-width: 620px; }
.zfc-cierre__texto h2 { margin: 0 0 var(--zfc-esp-2); color: var(--zfc-texto-marca); }
.zfc-cierre__texto p { margin: 0; color: var(--zfc-texto-marca); }

.zfc-cierre__acciones { display: flex; flex-wrap: wrap; gap: var(--zfc-esp-3); flex: none; }

/* Sobre el ámbar el contorno marino sí se ve, así que los dos botones usan la
   pareja normal: marino sólido y marino en contorno. */
.zfc-cierre__acciones .zfc-boton--contorno { background: transparent; }
.zfc-cierre__acciones .zfc-boton--contorno:hover { background: var(--zfc-accion-primaria); color: var(--zfc-texto-inverso); }

/* --- Confianza ------------------------------------------------------------ */

.zfc-confianza { border-bottom: 1px solid var(--zfc-borde-medio); }

.zfc-confianza__grilla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zfc-esp-6);
}

@media (min-width: 900px) {
  .zfc-confianza__grilla { grid-template-columns: repeat(3, 1fr); }
}

.zfc-confianza__item {
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-3);
  padding-top: var(--zfc-esp-6);
  border-top: 2px solid var(--zfc-accion-primaria);
}

.zfc-confianza__item .zfc-icono { color: var(--zfc-accion-primaria); }
.zfc-confianza__titulo { margin: 0; font-size: var(--zfc-h4); }
.zfc-confianza__item p { margin: 0; color: var(--zfc-texto-secundario); }

/* --- Banda de receta ------------------------------------------------------ */

.zfc-receta {
  background: var(--zfc-accion-acento);
  color: var(--zfc-texto-marca);
  padding-block: var(--zfc-esp-8);
}

.zfc-receta__interior {
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-8);
  flex-wrap: wrap;
}

.zfc-receta__texto { flex: 1 1 460px; min-width: 0; }
.zfc-receta__texto h2 { margin: 0 0 var(--zfc-esp-3); }
.zfc-receta__texto p { margin: 0; max-width: 560px; }

.zfc-receta__acciones { display: flex; gap: var(--zfc-esp-3); flex-wrap: wrap; flex: none; }

/* Sobre el ámbar, el contorno va en marino y no en blanco. */
.zfc-receta .zfc-boton.zfc-boton--contorno { border-color: var(--zfc-accion-primaria); color: var(--zfc-accion-primaria); }
.zfc-receta .zfc-boton.zfc-boton--contorno:hover { background: var(--zfc-accion-primaria); color: var(--zfc-texto-inverso); }

/* --- Cabecera de catálogo ------------------------------------------------- */

/* Las migas se pegan al menú: son una referencia, no una sección. El aire de
   arriba lo pone el contenedor, que en las páginas de tienda se recorta. */
.woocommerce-breadcrumb {
  margin: 0 0 var(--zfc-esp-3);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.woocommerce-breadcrumb a { color: var(--zfc-texto-secundario); }

.woocommerce-products-header { margin-bottom: var(--zfc-esp-6); }
.woocommerce-products-header__title { margin: 0; }

.woocommerce-result-count {
  margin: 0;
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.woocommerce-ordering { margin: 0 0 var(--zfc-esp-6); }

/* 16px y no 14: iOS amplia la pagina al enfocar un campo mas chico, y eso vale
   tambien para un `select`. El carrito y el cupon son esquinas del sitio; por
   el catalogo pasa todo el mundo, asi que este era el peor de los tres. */
.woocommerce-ordering select {
  height: var(--zfc-campo-alto);
  padding: 0 var(--zfc-esp-3);
  border: 1px solid var(--zfc-borde-campo);
  border-radius: var(--zfc-radio);
  background: var(--zfc-superficie-bloque);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-m);
  color: var(--zfc-texto-principal);
}

@media (min-width: 700px) {
  .woocommerce-result-count { float: left; }
  .woocommerce-ordering { float: right; }
  .woocommerce ul.products { clear: both; }
}

/* --- Tarjeta de producto -------------------------------------------------- */

/* La rejilla, en tres tramos y sin escalones bruscos.
   Antes era `repeat(2, 1fr)` con un salto seco a 4 columnas en 900px, y ese
   salto hacia dos cosas a la vez: en 899 la tarjeta media 416px y en 900 caia a
   125, porque en el mismo breakpoint entraba tambien la barra lateral de 250px.
   Achicar la ventana 20 pixeles hacia los marcos tres veces mas grandes.

   - Hasta 699: DOS columnas fijas. Es el telefono, y son 163px por tarjeta:
     esta medido y trabajado (ver la tercera ronda de responsive del 31-08). Un
     minimo de 200px aqui daria UNA columna, que no es el diseno.
   - De 700 a 1199: fluida, con la tarjeta nunca bajo 200px. Aqui es donde
     estaba el escalon y donde `auto-fill` lo borra.
   - Desde 1200: cuatro columnas fijas, para que una pantalla muy ancha no
     acabe con seis tarjetas diminutas. Con la barra lateral puesta eso deja
     217px por tarjeta, no los 125 de antes. */
.zfc-productos,
.woocommerce ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--zfc-esp-4);
}

@media (min-width: 700px) {
  .zfc-productos,
  .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* Un elemento de grid nace con `min-width: auto`, o sea que no baja de su
   contenido minimo, y entonces la rejilla se sale de su columna en vez de
   encoger. Estaba escrito solo dentro de `@media (max-width: 599px)`, asi que
   no alcanzaba a la tarjeta MAS angosta del sitio, que no esta en el telefono
   (163px) sino en un portatil a 900px (125px). Va fuera de toda media query. */
.zfc-producto,
.woocommerce ul.products li.product { min-width: 0; }

/* WooCommerce le pone un clearfix con ::before y ::after a `ul.products`. En
   un contenedor grid esos pseudo-elementos cuentan como celdas y corren la
   grilla entera. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

@media (min-width: 1200px) {
  /* Techo. El corte es 1200 y no 1100 por una cuenta: con la barra lateral de
     250px mas su gap de 32, a 1100 quedan 818px para cuatro columnas, o sea
     171px por tarjeta, todavia por debajo del minimo de 200. A 1200 quedan 918
     y la tarjeta sale en 217. */
  .zfc-productos--4,
  .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
  .zfc-productos--3,
  .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
  .zfc-productos,
  .woocommerce ul.products { gap: var(--zfc-esp-6); }
}

/* La tarjeta es un bloque: va en blanco sobre el marfil de la página, y al
   revés en la ficha, donde el fondo es blanco. */
/* La tarjeta es el contexto de posicionamiento de lo suyo. Sin esto, el
   `span.screen-reader-text` que WooCommerce mete en el botón se posiciona
   contra el ancestro que haya más arriba: dentro del carrusel se salía del
   contenedor con overflow y le daba scroll horizontal a la página entera. */
.zfc-producto {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--zfc-borde-sutil);
  background: var(--zfc-superficie-bloque);
  transition: border-color .15s ease;
}

.zfc-producto:hover { border-color: var(--zfc-accion-primaria); }

/* Los packshots vienen sobre blanco, así que este recuadro va siempre en
   blanco, cambie o no la superficie del resto de la tarjeta. */
/* El aire lo pone la imagen con su propio padding, no la caja: la imagen va
   absoluta y un padding aquí no la afectaría. */
.zfc-producto__foto {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: #FFFFFF;
}

/* La imagen va absoluta para que el aspect-ratio de la caja mande solo. En
   flujo, un packshot 2:1 y uno 3:2 daban cajas de distinto alto y las tarjetas
   de una misma fila quedaban descuadradas.
   Ocupa la caja entera y el aire lo pone su padding: una `img` es un elemento
   reemplazado, así que con `width: auto` usaría su tamaño intrínseco en vez de
   estirarse al inset.
   El segundo selector repite el contexto de WooCommerce, que fuerza
   `width: 100%` a las imágenes del catálogo con más especificidad. */
.zfc-producto__foto img,
.woocommerce ul.products li.product .zfc-producto__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: var(--zfc-esp-4);
  object-fit: contain;
}

@media (max-width: 699px) {
  .zfc-producto__foto img,
  .woocommerce ul.products li.product .zfc-producto__foto img { padding: var(--zfc-esp-3); }
}

/* El hueco de la derecha es del corazón de favoritos, que va encima de la foto
   en esa esquina. Sin reservarlo, la insignia «Pruébatelos» le pasaba por
   debajo y quedaba cortada. */
.zfc-producto__insignias {
  position: absolute;
  inset: var(--zfc-esp-2) calc(var(--zfc-favorito-tam) + var(--zfc-esp-3)) auto var(--zfc-esp-2);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--zfc-esp-2);
  /* Con dos insignias en una tarjeta de cuatro columnas no caben en la misma
     línea y «Pruébatelos» se cortaba a media palabra. Que baje entera. */
  flex-wrap: wrap;
  pointer-events: none;
}

/* --- La tarjeta en el teléfono -------------------------------------------
   A 375px la grilla es de dos columnas y la tarjeta mide 163px. Con el cuerpo
   pensado para escritorio, «ARMANI EXCHANGE» se partía en dos líneas y el
   nombre en tres: cinco líneas de texto para una foto de 81px de alto, o sea la
   tarjeta hablando más que el producto que vende.

   Lo que se aprieta es el TEXTO, no la foto: en una óptica la foto es el
   argumento. El espaciado entre letras de la marca es lo primero que se va,
   porque es puro adorno y es lo que hacía que no cupiera. */
@media (max-width: 599px) {
  .zfc-producto__cuerpo {
    padding: var(--zfc-esp-2) var(--zfc-esp-3) var(--zfc-esp-3);
  }

  /* Un elemento de grid nace con `min-width: auto`, o sea que NO baja de su
     contenido mínimo. Con la marca en `nowrap`, «ARMANI EXCHANGE» pasó a ser un
     bloque de 180px que no se puede partir, y las dos columnas se ensancharon
     hasta salirse del contenedor. Y no se veía midiendo `scrollWidth` de la
     página: el desborde quedaba recortado por un ancestro. Se ve mirando. */
  .zfc-producto { min-width: 0; }

  /* Sin `nowrap`. Se probó con elipsis y quedaba «ARMANI EXCHAN...», que es
     peor que partir en dos líneas: la marca es lo primero que se busca en una
     tarjeta de lentes y cortarla la deja sin decir nada. Basta con quitarle el
     espaciado entre letras, que es puro adorno y era lo que hacía que no
     cupiera: con .04em «ARMANI EXCHANGE» entra en una línea de 140px. */
  .zfc-producto__marca { letter-spacing: .04em; }

  .zfc-producto__nombre { font-size: var(--zfc-cuerpo-m); line-height: 1.3; }
  .zfc-producto__precio { font-size: var(--zfc-h6); }
  .zfc-producto__accion { padding-top: var(--zfc-esp-2); }
}

/* «Pruébatelos» en su propia esquina, abajo a la izquierda de la foto.
   Arriba se dice en qué ESTADO está el producto y acá QUÉ SE PUEDE HACER con
   él, que son dos cosas distintas y en una tarjeta de teléfono no caben juntas:
   a 375px la tarjeta mide 163px, y la insignia sola pide 120 mientras el
   corazón se lleva 60 con su separación.

   Se intentó antes bajar todas las insignias debajo del corazón. Resolvía el
   choque y quedaba peor: las dejaba encima del marco, o sea tapando justo lo
   que se está vendiendo. Se ve en cuanto se mira la pantalla, y no lo detecta
   ninguna medición. */
.zfc-producto__probador {
  position: absolute;
  left: var(--zfc-esp-2);
  bottom: var(--zfc-esp-2);
  z-index: var(--zfc-capa-tarjeta);
  pointer-events: none;
}

.zfc-insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--zfc-esp-1);
  padding: var(--zfc-esp-1) var(--zfc-esp-2);
  /* Iba a 10px, por debajo del mínimo del sistema, en un sitio cuyo público es
     adulto mayor. Con el espaciado entre letras un poco menor entra igual. */
  font-size: var(--zfc-etiqueta);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
  /* Nunca se parten en dos líneas: si no cabe, se achica la tarjeta, no el
     badge. Con «Sin stock» y «Pruébatelos» juntos se notaba. */
  white-space: nowrap;
}

.zfc-insignia--descuento { background: var(--zfc-descuento); color: var(--zfc-texto-inverso); }
.zfc-insignia--nuevo     { background: var(--zfc-accion-primaria); color: var(--zfc-texto-inverso); }
.zfc-insignia--agotado   { background: var(--zfc-accion-desactivada); color: var(--zfc-accion-desactivada-txt); }

/* El badge del probador no reserva espacio: si el marco no es compatible, la
   tarjeta simplemente no lo tiene y no queda ningún hueco. */
.zfc-insignia--probador {
  margin-left: auto;
  background: var(--zfc-accion-acento);
  color: var(--zfc-texto-marca);
}

.zfc-producto__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-1);
  padding: var(--zfc-esp-3) var(--zfc-esp-4) var(--zfc-esp-4);
  border-top: 1px solid var(--zfc-borde-sutil);
  flex: 1;
}

.zfc-producto__marca {
  font-size: var(--zfc-etiqueta);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--zfc-texto-secundario);
}

/* El nombre es un `h3`, y `woocommerce.css` le pone `padding: .5em 0` con
   `.woocommerce ul.products li.product h3`. El tema nunca lo sobrescribio.

   Con la letra en 16px eran 8px arriba y abajo y no se notaba; desde que la
   escala es fluida el nombre mide 18 y son 9 y 9: DIECIOCHO pixeles de aire por
   tarjeta, en escritorio, donde no hay ningun dedo que lo justifique. Es `em`,
   asi que crece con la letra: por eso aparecio al hacer fluida la escala y por
   eso no lo tocaba nada de lo que se apreto antes.

   Hay que igualar su contexto para ganarle, como con la paginacion y las
   miniaturas de la ficha: su selector vale (0,3,3) y este (0,4,2). */
.woocommerce ul.products li.product .zfc-producto__nombre,
.zfc-producto__nombre {
  margin: 0;
  padding: 0;
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-h6);
  font-weight: 500;
  line-height: 1.35;
  color: var(--zfc-texto-principal);
}

.zfc-producto__precio {
  font-size: var(--zfc-h5);
  font-weight: 600;
  color: var(--zfc-precio);
  font-variant-numeric: tabular-nums;
}

.zfc-producto__precio del {
  margin-left: var(--zfc-esp-2);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 400;
  color: var(--zfc-precio-tachado);
}

.zfc-producto__precio ins { text-decoration: none; }

.zfc-producto__stock { font-size: var(--zfc-cuerpo-s); color: var(--zfc-texto-secundario); }
.zfc-producto__stock p { margin: 0; }
.zfc-producto__stock--agotado { color: var(--zfc-accion-desactivada-txt); }

/* El botón se alinea abajo para que quede a la misma altura en toda la fila,
   aunque una tarjeta tenga una línea más de texto. El aire mínimo es corto: con
   uno grande, las tarjetas cortas quedaban con un hueco enorme. */
.zfc-producto__accion { margin-top: auto; padding-top: var(--zfc-esp-3); }

.zfc-producto__precio { margin-top: var(--zfc-esp-1); }
.zfc-producto__stock { margin-top: var(--zfc-esp-1); }

/* El botón de añadir es el único ámbar de la tarjeta.
   La primera pareja de selectores existe solo para ganarle a
   `.woocommerce ul.products li.product .button`, que en el catálogo lo volvía
   inline-block con line-height 14 dentro de una caja de 48px (texto pegado
   arriba) y le sumaba margin-top: 1em. Esa regla vale (0,4,2) por los dos
   elementos de la cadena, así que hay que repetir su contexto para superarla.
   En la home no hacía falta: la lista no es `ul.products`. Sin !important. */
.woocommerce ul.products li.product .zfc-producto__accion .button,
.woocommerce ul.products li.product .zfc-producto__accion .added_to_cart,
.zfc-producto .zfc-producto__accion .button,
.zfc-producto .zfc-producto__accion .added_to_cart {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--zfc-boton-m);
  padding: 0 var(--zfc-esp-4);
  border: 1px solid var(--zfc-accion-acento);
  background: var(--zfc-accion-acento);
  color: var(--zfc-texto-marca);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.zfc-producto .zfc-producto__accion .button:hover { background: var(--zfc-accion-acento-hover); border-color: var(--zfc-accion-acento-hover); }

/* Mientras WooCommerce añade al carrito marca el botón con `loading`, pero su
   rueda vive en woocommerce-layout.css, que el tema desencola: sin esto no hay
   ninguna señal de que pasó algo entre el clic y el panel. Se reusa el mismo
   giro de la ficha (`.zfc-cargando`, en compra.css) y se anula el padding de
   2.618em que WooCommerce le mete a la derecha para su spinner. */
.woocommerce ul.products li.product .zfc-producto__accion .button.loading,
.zfc-producto .zfc-producto__accion .button.loading {
  padding: 0 var(--zfc-esp-4);
  position: relative;
  color: transparent;
  pointer-events: none;
}

.woocommerce ul.products li.product .zfc-producto__accion .button.loading::after,
.zfc-producto .zfc-producto__accion .button.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(10, 26, 47, .25);
  border-top-color: var(--zfc-texto-marca);
  border-radius: var(--zfc-radio-redondo);
  background: none;
  animation: zfc-girar .6s linear infinite;
}

/* Variables y avisos de stock no compran: van en contorno marino. */
.zfc-producto.product_type_variable .zfc-producto__accion .button,
.zfc-producto.outofstock .zfc-producto__accion .button {
  background: transparent;
  border-color: var(--zfc-accion-primaria);
  color: var(--zfc-accion-primaria);
}

.zfc-producto.product_type_variable .zfc-producto__accion .button:hover,
.zfc-producto.outofstock .zfc-producto__accion .button:hover {
  background: var(--zfc-accion-primaria);
  color: var(--zfc-texto-inverso);
}

/* El «Ver carrito» que aparece tras añadir es un enlace secundario: no compite
   con el botón de compra. */
.zfc-producto .zfc-producto__accion .added_to_cart {
  margin-top: var(--zfc-esp-2);
  background: transparent;
  border-color: var(--zfc-accion-primaria);
  color: var(--zfc-accion-primaria);
}

.zfc-producto .zfc-producto__accion .added_to_cart:hover {
  background: var(--zfc-accion-primaria);
  color: var(--zfc-texto-inverso);
}

/* Con dos tarjetas por fila, «Añadir al carrito» no cabe en una línea al
   tamaño de escritorio. Se aprieta el botón en vez de partir la frase. */
@media (max-width: 599px) {
  .zfc-producto .zfc-producto__accion .button,
  .zfc-producto .zfc-producto__accion .added_to_cart {
    padding-inline: var(--zfc-esp-2);
    font-size: 13px;
  }

  .zfc-producto__cuerpo { padding: var(--zfc-esp-3); }
}

/* --- Página Nosotros ------------------------------------------------------ */

/* Era un muro de texto de 122 caracteres por línea, sin una sola imagen y sin
   ningún camino de salida. La plantilla reparte el mismo texto en bloques y
   aquí se le da la forma. */

.zfc-nosotros__portada { padding-block: var(--zfc-esp-12); }
.zfc-nosotros__portada h1 { margin: var(--zfc-esp-2) 0 var(--zfc-esp-4); color: var(--zfc-texto-inverso); }

.zfc-nosotros__bajada {
  max-width: 58ch;
  color: var(--zfc-texto-inverso-suave);
}

.zfc-nosotros__bajada p { margin: 0; }

/* Dos columnas: el texto a medida legible y el hueco de la foto al lado. */
.zfc-nosotros__cuerpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zfc-esp-8);
  align-items: start;
}

@media (min-width: 900px) {
  .zfc-nosotros__cuerpo { grid-template-columns: 1fr 340px; gap: var(--zfc-esp-12); }
}

/* 65 caracteres es la medida que se lee sin perder el renglón. A 1280px de
   ancho el texto iba a 122, casi el doble, y el sistema de diseño avisa de que
   el público es adulto mayor. */
.zfc-nosotros__texto { max-width: 65ch; }
.zfc-nosotros__texto p { margin: 0 0 var(--zfc-esp-4); }
.zfc-nosotros__texto p:last-child { margin-bottom: 0; }

.zfc-nosotros__foto {
  margin: 0;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--zfc-esp-4);
  text-align: center;
  background: repeating-linear-gradient(45deg,
    var(--zfc-superficie-hundida) 0 12px,
    var(--zfc-superficie-calida) 12px 24px);
  border: 1px dashed var(--zfc-borde-medio);
}

.zfc-nosotros__foto-pendiente {
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

/* Los motivos: los mismos tres de la portada, con su iconografía. */
.zfc-nosotros__motivos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zfc-esp-8);
}

@media (min-width: 700px) {
  .zfc-nosotros__motivos { grid-template-columns: repeat(3, 1fr); }
}

.zfc-nosotros__motivo { display: flex; flex-direction: column; gap: var(--zfc-esp-2); }
.zfc-nosotros__motivo .zfc-icono { color: var(--zfc-acento-texto); }

/* Estos h2 son tarjetas, no cabeceras de sección: van en la escala de la
   interfaz, no en la de los titulares de página. */
.zfc-nosotros__motivo h2 {
  margin: 0;
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-h5);
  line-height: var(--zfc-h5-alto);
  font-weight: 600;
}

.zfc-nosotros__motivo p { margin: 0; color: var(--zfc-texto-secundario); }

.zfc-nosotros__cierre { padding-block: var(--zfc-esp-12); }

.zfc-nosotros__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zfc-esp-3);
  justify-content: center;
}

/* --- Guías de ayuda ------------------------------------------------------- */

/* Eran páginas sueltas de texto corrido a todo el ancho: 94 caracteres por
   línea, sin migas, sin enlaces y sin salida. */

.zfc-guia__migas {
  margin-bottom: var(--zfc-esp-4);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.zfc-guia__migas a { color: var(--zfc-texto-secundario); }
.zfc-guia__migas span { margin-inline: var(--zfc-esp-1); }

.zfc-guia__cabecera { max-width: 65ch; margin-bottom: var(--zfc-esp-8); }
.zfc-guia__cabecera h1 { margin: 0 0 var(--zfc-esp-3); font-size: var(--zfc-h2); line-height: var(--zfc-h2-alto); }
.zfc-guia__entrada { color: var(--zfc-texto-secundario); }
.zfc-guia__entrada p { margin: 0 0 var(--zfc-esp-3); }
.zfc-guia__entrada p:last-child { margin-bottom: 0; }

/* 65 caracteres es la medida que se lee sin perder el renglón. */
.zfc-guia__cuerpo { max-width: 65ch; }

.zfc-guia__bloque + .zfc-guia__bloque { margin-top: var(--zfc-esp-8); }

/* Los bloques son destino de enlace desde el pie: sin este margen, al saltar
   quedan justo debajo de la cabecera fija y parece que no pasó nada. */
.zfc-guia__bloque { scroll-margin-top: calc(var(--zfc-header-fijo-alto) + var(--zfc-esp-6)); }

.zfc-guia__bloque h2 {
  margin: 0 0 var(--zfc-esp-3);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-h5);
  line-height: var(--zfc-h5-alto);
  font-weight: 600;
}

.zfc-guia__bloque p { margin: 0 0 var(--zfc-esp-3); }
.zfc-guia__bloque p:last-child { margin-bottom: 0; }

/* --- La salida de cada guía ----------------------------------------------- */

.zfc-guia__ayuda {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zfc-esp-4);
  margin-top: var(--zfc-esp-12);
  padding: var(--zfc-esp-6);
  background: var(--zfc-superficie-base);
  border-left: 3px solid var(--zfc-accion-acento);
}

@media (min-width: 700px) {
  .zfc-guia__ayuda { flex-direction: row; align-items: center; justify-content: space-between; }
  .zfc-guia__ayuda .zfc-boton { flex: none; }
}

.zfc-guia__ayuda strong { display: block; color: var(--zfc-texto-marca); }
.zfc-guia__ayuda p { margin: var(--zfc-esp-1) 0 0; color: var(--zfc-texto-secundario); font-size: var(--zfc-cuerpo-s); }

/* --- Las otras guías ------------------------------------------------------ */

/* Sin esto cada guía es un callejón: se lee y no lleva a ninguna parte. */
.zfc-guia__otras { margin-top: var(--zfc-esp-12); }

.zfc-guia__otras-titulo {
  margin: 0 0 var(--zfc-esp-4);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-h6);
  font-weight: 600;
}

.zfc-guia__otras ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zfc-esp-3);
}

@media (min-width: 700px) {
  .zfc-guia__otras ul { grid-template-columns: repeat(3, 1fr); }
}

.zfc-guia__otras a {
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-1);
  height: 100%;
  padding: var(--zfc-esp-4);
  background: var(--zfc-superficie-base);
  border: 1px solid var(--zfc-borde-sutil);
  text-decoration: none;
  transition: border-color .15s ease;
}

.zfc-guia__otras a:hover { border-color: var(--zfc-accion-primaria); }
.zfc-guia__otras .zfc-icono { color: var(--zfc-acento-texto); }
.zfc-guia__otras-nombre { font-weight: 600; color: var(--zfc-texto-marca); }
.zfc-guia__otras-bajada { font-size: var(--zfc-cuerpo-s); color: var(--zfc-texto-secundario); }

/* --- Receta de ejemplo ---------------------------------------------------- */

/* La página explicaba OD, ESF, CIL y compañía en párrafos. Sobre una receta de
   mentira se entienden sin leer: quien llega aquí tiene el papel en la mano. */

.zfc-receta-ejemplo {
  margin: 0 0 var(--zfc-esp-12);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zfc-esp-4);
}

@media (min-width: 900px) {
  .zfc-receta-ejemplo { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; gap: var(--zfc-esp-8); }
}

.zfc-receta-ejemplo__papel {
  padding: var(--zfc-esp-6);
  background: var(--zfc-superficie-base);
  border: 1px solid var(--zfc-borde-medio);
  box-shadow: var(--zfc-sombra-1);
}

.zfc-receta-ejemplo__tabla {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.zfc-receta-ejemplo__tabla th,
.zfc-receta-ejemplo__tabla td {
  padding: var(--zfc-esp-3);
  text-align: center;
  border: 1px solid var(--zfc-borde-sutil);
}

.zfc-receta-ejemplo__tabla thead th {
  background: var(--zfc-superficie-hundida);
  font-size: var(--zfc-etiqueta);
  letter-spacing: .1em;
  color: var(--zfc-acento-texto);
}

.zfc-receta-ejemplo__tabla tbody th {
  background: var(--zfc-superficie-hundida);
  color: var(--zfc-texto-marca);
}

.zfc-receta-ejemplo__dp {
  margin: var(--zfc-esp-4) 0 0;
  font-variant-numeric: tabular-nums;
  color: var(--zfc-texto-secundario);
}

.zfc-receta-ejemplo__pie {
  order: 1;
  grid-column: 1 / -1;
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.zfc-receta-ejemplo__leyenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-2);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.zfc-receta-ejemplo__leyenda b { color: var(--zfc-texto-marca); font-variant-numeric: tabular-nums; }

/* --- Tabla de calibres en la guía ----------------------------------------- */

.zfc-calibres-guia {
  max-width: 520px;
  margin: 0 0 var(--zfc-esp-12);
  padding: var(--zfc-esp-6);
  background: var(--zfc-superficie-base);
  border: 1px solid var(--zfc-borde-sutil);
}

.zfc-calibres-guia .zfc-calibres__tabla { margin: 0; }

/* --- Preguntas frecuentes ------------------------------------------------- */

/* A esta página se llega con UNA pregunta, no a leerla entera: en acordeón se
   ven las cinco de un vistazo. Va en `details` para que funcione sin JS y para
   que el buscador del navegador encuentre el texto aunque esté cerrado. */

.zfc-faq__lista {
  max-width: 70ch;
  border-top: 1px solid var(--zfc-borde-sutil);
}

.zfc-faq__item { border-bottom: 1px solid var(--zfc-borde-sutil); }

.zfc-faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zfc-esp-4);
  padding: var(--zfc-esp-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-h6);
  font-weight: 600;
  color: var(--zfc-texto-marca);
}

.zfc-faq__pregunta::-webkit-details-marker { display: none; }
.zfc-faq__pregunta:hover { color: var(--zfc-acento-texto); }
.zfc-faq__pregunta .zfc-icono { flex: none; color: var(--zfc-texto-secundario); transition: transform .15s ease; }
.zfc-faq__item[open] .zfc-faq__pregunta .zfc-icono { transform: rotate(180deg); }

.zfc-faq__respuesta { padding: 0 0 var(--zfc-esp-5); color: var(--zfc-texto-secundario); }
.zfc-faq__respuesta p { margin: 0 0 var(--zfc-esp-3); }
.zfc-faq__respuesta p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .zfc-faq__pregunta .zfc-icono { transition: none; }
}

/* --- Páginas legales ------------------------------------------------------ */

/* Reutilizan las migas, la cabecera y los bloques de las guías: son la misma
   forma de página, texto repartido por sus h2. Lo propio es el índice, que
   estas sí necesitan (a un texto legal se llega con una pregunta concreta) y la
   fecha del documento. */

.zfc-legal__fecha {
  margin: 0 0 var(--zfc-esp-3);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.zfc-legal__indice {
  max-width: 65ch;
  margin-bottom: var(--zfc-esp-8);
  padding: var(--zfc-esp-4) var(--zfc-esp-6);
  background: var(--zfc-superficie-bloque);
  border: 1px solid var(--zfc-borde-sutil);
  border-radius: var(--zfc-radio);
}

.zfc-legal__indice-titulo {
  margin: 0 0 var(--zfc-esp-3);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--zfc-texto-secundario);
}

/* Sin marcador: los títulos del documento legal ya vienen numerados, y la
   lista ordenada les ponía un segundo número encima («1. 1. Aspectos»). */
.zfc-legal__indice ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: var(--zfc-esp-2);
  color: var(--zfc-texto-secundario);
}

.zfc-legal__indice a { color: var(--zfc-texto-marca); }
.zfc-legal__indice a:hover { color: var(--zfc-acento-texto); }

.zfc-legal__cierre {
  max-width: 65ch;
  margin-top: var(--zfc-esp-9);
  padding-top: var(--zfc-esp-4);
  border-top: 1px solid var(--zfc-borde-sutil);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.zfc-legal__cierre p { margin: 0 0 var(--zfc-esp-2); }
.zfc-legal__cierre p:last-child { margin-bottom: 0; }
.zfc-legal__cierre a { color: var(--zfc-acento-texto); }

/* Las listas del texto legal traen párrafos largos dentro de cada punto. */
.zfc-legal .zfc-guia__bloque ul { margin: 0; padding-left: var(--zfc-esp-4); display: grid; gap: var(--zfc-esp-3); }