/* ==========================================================================
   Componentes compartidos: marca, botones, cabecera, mega menú, menú móvil,
   pie y botón de WhatsApp.
   Depende de tokens.css y base.css. Solo tokens, nada de valores literales
   salvo los quiebres de media query.
   ========================================================================== */

/* --- Marca ----------------------------------------------------------------

   El logotipo es la IMAGEN del manual de marca, con el fondo recortado. Hasta el
   09-09-2026 se dibujaba con Bodoni reproduciendo las proporciones del original;
   se parecía mucho y no era, y el cliente lo notó dos veces. No volver a eso.

   Los cuatro PNG están en `assets/img/` y salen del propio PDF del manual con
   `ecommerce/recortar-logo-del-manual.py`. Se versionan, así que viajan con el
   tema: no hay que cargar nada en la base de datos ni en el personalizador.

   `zfc_marca_texto()` elige el archivo (lockup o monograma, normal o inverso) y
   ACÁ se le pone el alto. Nunca el ancho: la proporción la trae la imagen y el
   `width`/`height` del HTML evita que la página salte mientras carga.
   -------------------------------------------------------------------------- */

.zfc-marca {
  display: block;
  height: 40px;
  width: auto;
}

/* --- Botones -------------------------------------------------------------- */

.zfc-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zfc-esp-2);
  min-height: var(--zfc-boton-m);
  padding: 0 var(--zfc-esp-6);
  border: 1px solid transparent;
  border-radius: var(--zfc-radio);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.zfc-boton.zfc-boton--primario {
  background: var(--zfc-accion-primaria);
  color: var(--zfc-texto-inverso);
}
.zfc-boton.zfc-boton--primario:hover { background: var(--zfc-accion-primaria-hover); color: var(--zfc-texto-inverso); }

/* El ámbar solo se usa en «Añadir al carrito» y «Cotizar con mi receta». */
.zfc-boton.zfc-boton--acento {
  background: var(--zfc-accion-acento);
  color: var(--zfc-texto-marca);
}
.zfc-boton.zfc-boton--acento:hover { background: var(--zfc-accion-acento-hover); color: var(--zfc-texto-marca); }

.zfc-boton.zfc-boton--contorno {
  background: transparent;
  border-color: var(--zfc-accion-primaria);
  color: var(--zfc-accion-primaria);
}
.zfc-boton.zfc-boton--contorno:hover { background: var(--zfc-accion-primaria); color: var(--zfc-texto-inverso); }

/* --- Cabecera ------------------------------------------------------------- */

.zfc-cabecera {
  background: var(--zfc-superficie-calida);
  position: relative;
  z-index: var(--zfc-capa-cabecera);
}

/* Barra de promesas: fondo marino, iconos en ámbar y el teléfono a la derecha.

   Sube de alto y de cuerpo por la observación 4 del cliente (07-09-2026): la
   querían más grande «para que destaque su texto». Era una franja de 32px con
   letra de 14 a 15px, o sea la letra más chica del sitio en la barra que abre
   la página. Pasa a 44px con el cuerpo del texto normal, que es el escalón
   siguiente de los tokens y no un número suelto.

   Cuidado al tocarla: el ancho de la fila lo fija el contenido, no un grid.
   Con tres promesas, el teléfono y letra de 18px, entre 900 y 1200px la fila
   queda justa. Si se agrega una cuarta promesa, medirla en 960px antes.

   El fondo y la letra salen de los tokens de la zona desde el 16-09-2026, para
   que la óptica los cambie desde el personalizador. De fábrica valen lo de
   siempre: marino y gris claro. Ver tokens.css. */
.zfc-promesas {
  background: var(--zfc-encabezado-franja-fondo);
  color: var(--zfc-encabezado-franja-texto);
  font-size: var(--zfc-cuerpo-m);
}

.zfc-promesas__interior {
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-6);
  min-height: 44px;
}

/* La promesa de la izquierda. Desde el 11-09-2026 es UNA, no tres: las otras
   dos pasaron a ser mensajes del carrusel del centro. */
.zfc-promesas__promesa {
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-2);
  margin: 0;
  white-space: nowrap;
  flex: none;
}

.zfc-promesas__promesa .zfc-icono { color: var(--zfc-accion-acento); flex: none; }

/* --- Mensajes que rotan, el centro de la franja --------------------------- */

.zfc-franja-mensajes {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--zfc-esp-1);
}

.zfc-franja-mensajes__flecha {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  /* El matiz apagado de la franja, no un gris fijo: si la óptica aclara el
     fondo, las flechas tienen que irse con él o no se ven. */
  color: var(--zfc-encabezado-franja-texto-tenue);
  cursor: pointer;
}

/* La franja mide 44px de alto, así que un botón de 44x44 la llenaría entera y
   se vería como un bloque. El dibujo se queda en 28 y la ZONA QUE SE TOCA la
   pone este pseudo-elemento, que es lo que mide el QA táctil del tema. */
.zfc-franja-mensajes__flecha::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.zfc-franja-mensajes__flecha:hover { color: var(--zfc-encabezado-franja-texto-fuerte); }

.zfc-franja-mensajes__pista {
  min-width: 0;
  text-align: center;
}

.zfc-franja-mensajes__item {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: zfc-mensaje-entra .35s ease;
}

.zfc-franja-mensajes__item a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba( 255, 255, 255, .35 );
}

.zfc-franja-mensajes__item a:hover {
  color: var(--zfc-encabezado-franja-texto-fuerte);
  border-bottom-color: var(--zfc-encabezado-franja-texto-fuerte);
}

@keyframes zfc-mensaje-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media ( prefers-reduced-motion: reduce ) {
  .zfc-franja-mensajes__item { animation: none; }
}

.zfc-promesas__telefono {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-2);
  /* Destaca sobre el resto de la franja, y ese contraste se mantiene aunque la
     óptica cambie el color de la franja: el token lo sigue. */
  color: var(--zfc-encabezado-franja-texto-fuerte);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.zfc-promesas__telefono .zfc-icono { color: var(--zfc-accion-acento); }
.zfc-promesas__telefono:hover { color: var(--zfc-accion-acento); }

/* La tercera promesa se esconde hasta 1100px, y no hasta 900 como antes.

   La franja no tiene grilla: el ancho lo pide el contenido. Con las tres
   promesas, el teléfono y el cuerpo nuevo, la fila pide 1108px, así que entre
   900 y 1100 envolvía a dos líneas y la barra se iba a 72px, o sea lo contrario
   de lo que pedía el cliente. Medido con las tres promesas de hoy:

     cuerpo 18px, aire 24px -> 1108px    cuerpo 15px, aire 24px ->  973px
     cuerpo 16px, aire 24px -> 1018px    cuerpo 14px, aire 12px ->  892px

   O sea que ni volviendo al cuerpo viejo cabían las tres en 900px: la franja YA
   envolvía ahí antes de este cambio, solo que con letra chica y 32px de alto no
   se notaba. Se prefiere sacrificar la tercera promesa a bajar el cuerpo, que
   es justo lo que el cliente pidió subir, y para eso existe `--opcional`.

   Si se agrega o alarga una promesa en `zfc_promesas()`, volver a medir: el
   umbral de 1100px sale de estos números y no de una convención. */
/* Hasta 1099px la promesa de la izquierda se va y el mensaje se queda con toda
   la fila. El umbral sale de la misma medición de arriba: promesa, mensaje y
   teléfono en una sola línea piden más de lo que hay entre 900 y 1100, y la
   franja envolvía a dos líneas y se iba a 72px de alto. Lo que se sacrifica es
   lo fijo, no lo que el cliente administra. */
@media (max-width: 1099px) {
  .zfc-promesas__promesa { display: none; }
}

/* En móvil solo caben dos promesas, en una línea, y el teléfono se va al pie.

   Acá el alto y el cuerpo también suben (observación 4), pero menos: en el
   teléfono las dos promesas van en UNA línea sin envolver, así que el cuerpo lo
   manda el ancho disponible y no el gusto. 14px es lo que entra en 360px, que
   es la pantalla más angosta que se mide en este tema. */
@media (max-width: 899px) {
  .zfc-promesas__interior { min-height: 40px; justify-content: center; }

  /* La promesa ya se fue en 1100px; acá se va el teléfono, que en móvil vive en
     el pie, y la franja queda entera para el mensaje. */
  .zfc-promesas__telefono { display: none; }

  .zfc-franja-mensajes {
    font-size: var(--zfc-cuerpo-s);
    line-height: var(--zfc-cuerpo-s-alto);
  }

  /* Las flechas siguen: es la única forma de adelantar un mensaje sin esperar,
     y miden 28px porque van dentro de una franja de 40. */
  .zfc-franja-mensajes__flecha { width: 32px; }

  /* La promoción envuelve a dos líneas en 375px y con el aire de escritorio se
     iba a 88px, o sea que empujaba el hero media pantalla hacia abajo. */
  .zfc-promo__interior {
    min-height: 36px;
    padding-block: var(--zfc-esp-1);
    font-size: var(--zfc-texto-min);
  }
}

/* --- WhatsApp: la llamada de atención al entrar --------------------------- */

/* Lo pidió el cliente textual: «al ingresar a la página haga un movimiento cosa
   que llame la atención». Dos piezas: el botón se mueve una vez y sale un aviso
   con el texto que invita a cotizar. Las dos las dispara el JS, una vez por
   visita, y las dos se apagan con `prefers-reduced-motion`. */

.zfc-whatsapp__boton.esta-llamando {
  animation: zfc-whatsapp-llama 1.1s ease-in-out 2;
}

@keyframes zfc-whatsapp-llama {
  0%, 100% { transform: rotate(0) scale(1); }
  15%      { transform: rotate(-9deg) scale(1.06); }
  30%      { transform: rotate(7deg) scale(1.06); }
  45%      { transform: rotate(-5deg) scale(1.03); }
  60%      { transform: rotate(3deg) scale(1); }
}

.zfc-whatsapp__llamada {
  position: absolute;
  right: calc(100% + var(--zfc-esp-3));
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  margin: 0;
  cursor: pointer;
  padding: var(--zfc-esp-2) var(--zfc-esp-3);
  max-width: 230px;
  background: var(--zfc-superficie-base);
  border: 1px solid var(--zfc-borde-sutil);
  box-shadow: var(--zfc-sombra-2);
  color: var(--zfc-texto-principal);
  font-size: var(--zfc-cuerpo-s);
  line-height: var(--zfc-cuerpo-s-alto);
  font-weight: 600;
  white-space: nowrap;
  animation: zfc-llamada-entra .45s ease both;
}

/* El pico del globo, apuntando al botón. */
.zfc-whatsapp__llamada::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border: 7px solid transparent;
  border-left-color: var(--zfc-borde-sutil);
}

@keyframes zfc-llamada-entra {
  from { opacity: 0; transform: translate(8px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}

.zfc-whatsapp__llamada.se-va { animation: zfc-llamada-sale .35s ease both; }

@keyframes zfc-llamada-sale {
  from { opacity: 1; transform: translate(0, -50%); }
  to   { opacity: 0; transform: translate(8px, -50%); }
}

/* En pantallas angostas el aviso no cabe al lado del botón sin tapar media
   pantalla, así que se queda solo el movimiento. */
@media (max-width: 599px) {
  .zfc-whatsapp__llamada { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .zfc-whatsapp__boton.esta-llamando { animation: none; }
  .zfc-whatsapp__llamada,
  .zfc-whatsapp__llamada.se-va { animation: none; }
}

/* Con el interruptor del panel apagado, el aviso no se imprime y el movimiento
   se para desde acá: `navegacion.js` se lo pone al botón sin saber que la
   llamada está apagada, y el interruptor tiene que apagar las dos piezas, no
   una. */
.zfc-whatsapp--callado .zfc-whatsapp__boton.esta-llamando { animation: none; }

/* --- Franja de promoción -------------------------------------------------- */

/* Va DEBAJO de la barra y es la única de las dos que se apaga entera. Marino
   otra vez, como la de arriba: son la misma familia y el menú marfil las separa.
   No lleva icono a propósito, para que no compita con la franja superior. */
.zfc-promo {
  background: var(--zfc-encabezado-promo-fondo);
  color: var(--zfc-encabezado-promo-texto);
  font-size: var(--zfc-cuerpo-s);
  line-height: var(--zfc-cuerpo-s-alto);
}

.zfc-promo__interior {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-block: var(--zfc-esp-2);
  text-align: center;
}

.zfc-promo__texto { margin: 0; font-weight: 600; }

.zfc-promo__enlace {
  margin-left: var(--zfc-esp-2);
  color: var(--zfc-encabezado-promo-texto);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.zfc-promo__enlace:hover { color: var(--zfc-accion-acento); }

/* En la cabecera fija se va, igual que la franja superior: una promoción se lee
   al entrar, no persigue a nadie mientras baja. */
.zfc-cabecera--fija .zfc-promo { display: none; }

/* Barra principal.

   Hasta el 16-09-2026 no tenía fondo propio: dejaba ver el de `.zfc-cabecera`,
   que es el mismo marfil del `body`. Ahora lo declara, porque es la zona que el
   cliente pidió poder pintar («resaltar dónde está el menú (...) lo quiero
   transformar en azul»), y con el token en su valor de fábrica el resultado es
   el mismo marfil de antes. `.zfc-cabecera` conserva el suyo: la barra lo tapa
   entero y ninguna de las dos franjas oscuras lo deja ver.

   El `color` también es nuevo y también es el que ya se heredaba del `body`.
   Está acá para que las entradas del menú y los iconos de la derecha tengan de
   dónde salir cuando la óptica oscurezca el fondo. */
.zfc-barra {
  background: var(--zfc-encabezado-barra-fondo);
  color: var(--zfc-encabezado-barra-texto);
  border-bottom: 1px solid var(--zfc-borde-medio);
}

/* La navegación vive dentro de la barra para que la cabecera fija pueda
   plegarla a una sola línea de 56px sin duplicar markup. En reposo ocupa una
   fila completa gracias al flex-wrap. */
.zfc-barra__interior {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--zfc-esp-6);
  min-height: var(--zfc-header-alto);
  padding-top: var(--zfc-esp-3);
}

/* El area tocable del logo llega a la zona tactil sin cambiar como se ve el
   wordmark: solo crece la caja del enlace, no la letra. */
.zfc-barra__marca {
  min-height: var(--zfc-alto-tactil);
  flex: none;
  text-decoration: none;
  display: flex;
  align-items: center;
}

/* El logotipo de la cabecera: el monograma, a 44px. */
.zfc-barra__marca .zfc-marca { height: 44px; }

.zfc-barra__hamburguesa {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--zfc-alto-tactil);
  height: var(--zfc-alto-tactil);
  margin-left: calc(var(--zfc-esp-3) * -1);
  background: none;
  border: 0;
  color: var(--zfc-encabezado-barra-texto-fuerte);
  cursor: pointer;
}

/* Buscador: ocupa todo el centro de la barra. Con un ancho tope quedaba un
   hueco enorme a la derecha del campo. */
.zfc-barra__buscador { flex: 1; min-width: 0; }

.zfc-barra__buscador form {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--zfc-borde-campo);
  background: var(--zfc-superficie-base);
}

.zfc-barra__buscador input[type="search"] {
  flex: 1;
  min-width: 0;
  /* Alto del RECUADRO, no propio. Con `height` fijo el campo media 40px dentro
     de un recuadro de 54 (el boton pide 52 por zona tactil) y quedaba una banda
     blanca de 7px arriba y otros 7 abajo del texto, con el boton oscuro al lado
     marcandola. Lo marco el cliente el 11-09-2026 y se veia desde siempre. */
  align-self: stretch;
  padding: 0 var(--zfc-esp-3);
  border: 0;
  background: transparent;
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-m);
  color: var(--zfc-texto-principal);
}

.zfc-barra__buscador input[type="search"]::placeholder { color: var(--zfc-texto-secundario); }
.zfc-barra__buscador input[type="search"]:focus { outline: none; }
.zfc-barra__buscador form:focus-within { outline: 2px solid var(--zfc-foco); outline-offset: 2px; }

.zfc-barra__buscar-boton {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mismo criterio que los accesos: se toca, asi que mide la zona tactil. En
     escritorio se quedaba en 40px de alto. */
  min-height: var(--zfc-alto-tactil);
  padding: 0 var(--zfc-esp-6);
  border: 0;
  /* Invertido contra la barra: el fondo del botón es el color de LETRA de la
     barra y su letra el FONDO. Con los valores de fábrica sale lo de siempre,
     marino con letra blanca; con la barra en marino, el botón se vuelve claro
     en vez de desaparecer dentro de ella. */
  background: var(--zfc-encabezado-barra-texto-fuerte);
  color: var(--zfc-encabezado-barra-boton-texto);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
  cursor: pointer;
}

.zfc-barra__buscar-boton:hover { background: var(--zfc-encabezado-barra-boton-hover); }
.zfc-barra__buscar-boton .zfc-icono { display: none; }

/* Accesos: icono con su texto debajo, porque sin texto no se distinguen. */
.zfc-barra__accesos {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-6);
  flex: none;
}

/* Un icono con el que se interactua mide al menos la zona tactil, SIEMPRE.
   Aqui solo estaba el ancho, asi que con el texto debajo del icono quedaban en
   38px de alto entre 900 y 1279 en reposo, y en 22 cuando el texto se ocultaba.
   El alto va en la regla base y no en cada tramo: escrito por tramo ya se
   escapo tres veces. */
.zfc-acceso {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--zfc-esp-1);
  min-width: var(--zfc-alto-tactil);
  min-height: var(--zfc-alto-tactil);
  /* El matiz marcado de la barra, no el del texto: estos tres iconos van en
     marino y las entradas del menú en gris, y esa diferencia es de fábrica. Los
     dos tokens se igualan en cuanto la óptica elige un color de letra, que es
     lo que evita que los iconos queden marino sobre marino. */
  color: var(--zfc-encabezado-barra-texto-fuerte);
  font-size: var(--zfc-etiqueta);
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
}

.zfc-acceso:hover { color: var(--zfc-accion-primaria-hover); }
.zfc-acceso .zfc-icono { width: 22px; height: 22px; }

.zfc-acceso__cuenta {
  position: absolute;
  top: -5px;
  right: 2px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--zfc-radio-redondo);
  background: var(--zfc-descuento);
  color: var(--zfc-texto-inverso);
  /* 12px, no 10. Este numero dice cuantos marcos lleva y estaba en la letra
     mas chica de todo el sitio: alguien con presbicia miraba el icono y no
     sabia si decia 1 o 4. Es exactamente el tamano que este mismo tema ya subio
     de 10 a 12 en las insignias del catalogo, y por el mismo motivo; quedo la
     excepcion sin arreglar justo donde mas duele. El circulo pasa de 17 a 20px,
     que sigue cabiendo sobre un icono de 22. */
  font-size: 12px;
  font-weight: 600;
}

/* Con el carrito vacío el contador no aparece: un cero rojo alarma sin motivo. */
.zfc-acceso__cuenta--vacio { display: none; }

/* --- Navegación principal ------------------------------------------------- */

.zfc-nav {
  flex: 1 0 100%;
  border-top: 1px solid var(--zfc-borde-medio);
}

.zfc-nav__lista {
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.zfc-nav__item { position: static; }

.zfc-nav__enlace {
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-1);
  padding-block: var(--zfc-esp-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--zfc-encabezado-barra-texto);
  font-family: var(--zfc-fuente-ui);
  /* 14px FIJOS, no `--zfc-cuerpo-s`, que desde el 02-09-2026 es fluido y crece
     hasta 15. La fila unica de la cabecera esta medida al pixel para seis
     entradas a 14px (ver 09-densidad-home.md: el corte es 1280 y no menos
     porque a 1200 el menu ya no cabia). Con el token fluido, a 1280 exactos la
     fila desbordaba 10px. Aqui crecer no aporta nada: es cromo de interfaz, no
     texto de lectura, y lo que si crece es el cuerpo de las paginas. */
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

/* El hover no cambia el peso de la letra: si lo hiciera, el menú entero se
   correría unos píxeles cada vez que el cursor pasa por encima.

   Y el subrayado sigue al color de letra de la barra, no al azul de las
   acciones: escrito en marino desaparecía en cuanto la óptica pintaba la barra
   de marino, que es lo primero que va a hacer. De fábrica los dos valen el
   mismo #0A1A2F. */
.zfc-nav__enlace:hover {
  color: var(--zfc-encabezado-barra-texto-fuerte);
  border-bottom-color: var(--zfc-encabezado-barra-texto-fuerte);
}

.zfc-nav__item--mega .zfc-nav__disparador[aria-expanded="true"] {
  color: var(--zfc-encabezado-barra-texto-fuerte);
  font-weight: 600;
  border-bottom-color: var(--zfc-encabezado-barra-texto-fuerte);
}

.zfc-nav__item--destacado {
  margin-left: auto;
}

.zfc-nav__item--destacado .zfc-nav__enlace {
  color: var(--zfc-acento-texto);
  font-weight: 600;
}

.zfc-nav__corto { display: none; }

@media (max-width: 899px) {
  .zfc-nav { display: none; }
}

/* --- Cabecera en una sola fila (1200px y mas) -----------------------------

   La cabecera apilaba tres franjas: promesas, barra y menu, 196px en total.
   Desde 1280px marca, menu, buscador e iconos caben en una fila de 76px, que
   es lo que hace la referencia del diseno. Por debajo se mantienen las dos
   filas de siempre. Medido en docs/ecommerce/09-densidad-home.md.

   El corte esta en 1280 y no en 1200 porque a 1200 el menu de seis entradas ya
   no cabia y se montaba sobre el buscador. Con el menu actual sobran unos 275px
   a 1280, que dan para una entrada mas: si el cliente agrega varias desde
   WordPress, hay que volver a medir esta fila. */

@media (min-width: 1280px) {

  .zfc-barra__interior {
    flex-wrap: nowrap;
    min-height: var(--zfc-header-fila-alto);
    padding-top: 0;
    gap: var(--zfc-esp-6);
  }

  /* El menu esta al final del DOM porque en movil y en tablet va en su propia
     fila. Para la fila unica se recoloca junto a la marca. */
  .zfc-barra__marca    { order: 1; }
  .zfc-nav             { order: 2; }
  .zfc-barra__buscador { order: 3; }
  .zfc-barra__accesos  { order: 4; }

  /* El menu deja de reservarse una fila entera. No se encoge: con nowrap, un
     nav mas estrecho que su contenido no recorta, se derrama sobre el buscador.
     El que cede el ancho es el buscador. */
  .zfc-nav {
    flex: 0 0 auto;
    border-top: 0;
  }

  .zfc-nav__lista { gap: var(--zfc-esp-4); flex-wrap: nowrap; }
  .zfc-nav__enlace { padding-block: var(--zfc-esp-2); white-space: nowrap; }

  /* En una fila el auto separaria «Pruebatelos» hasta el borde del hueco
     disponible, que ya no es el ancho completo. */
  .zfc-nav__item--destacado { margin-left: 0; }

  /* Buscador acotado. Elastico se comia 867px para un campo de texto. */
  .zfc-barra__buscador {
    flex: 1 1 auto;
    min-width: 160px;
    max-width: 420px;
    margin-left: auto;
  }

  /* El campo NO lleva alto propio: lo toma del recuadro, que lo fija el botón.
     Con 40px aquí y 52 en el botón quedaba una banda blanca de 6px arriba y
     otros 6 abajo del texto, dentro del borde. Es lo que el cliente marcó el
     11-09-2026, y venía de esta línea, no del componente. */
  .zfc-barra__buscar-boton { min-height: var(--zfc-boton-m); }
  .zfc-barra__buscar-boton { padding-inline: var(--zfc-esp-4); }

  /* Los accesos pierden la etiqueta visible: el texto debajo del icono los
     hacia de 38px de alto. El nombre accesible se conserva. */
  .zfc-barra__accesos { margin-left: 0; gap: var(--zfc-esp-4); }

  /* Al ocultar el texto, el alto se va con el: los accesos quedaban en 22px de
     alto en pantallas de 1280 y mas, EN REPOSO Y EN FIJA por igual, y un iPad
     Pro acostado son 1366. La regla es: donde se esconde la etiqueta de un
     icono, en el mismo bloque va la altura.

     El ANCHO se queda en 40 y no sube a 48: aqui la fila unica esta medida al
     limite (ver 09-densidad-home.md, el corte es 1280 y no menos porque a 1200
     el menu de seis entradas ya no cabia). Subir los tres accesos 8px cada uno
     desbordaba 34px a 1280 exactos. Lo que se fallaba era el alto, no el ancho,
     y a estos anchos el puntero es un raton. */
  .zfc-acceso {
    min-width: var(--zfc-boton-s);
    min-height: var(--zfc-alto-tactil);
    justify-content: center;
  }

  .zfc-acceso__texto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .zfc-acceso__cuenta { top: -4px; right: 0; }
}

/* --- Cabecera fija -------------------------------------------------------- */

/* Se activa pasados 200px de scroll y baja la barra a 56px quitando la franja
   de promesas y la bajada del logo.

   Antes hacía mucho más: ocultaba el menú entero, colapsaba el buscador a un
   icono y escondía favoritos. Eso venía de cuando la cabecera en reposo era de
   tres filas y había que comprimirla de verdad. Con la fila única ya no hace
   falta, y ocultar el menú dejaba 999px de hueco en blanco donde antes estaban
   las entradas: la barra se veía vacía. */
.zfc-cabecera--fija {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: var(--zfc-sombra-2);
}

.zfc-cabecera--fija .zfc-promesas { display: none; }

.zfc-cabecera--fija .zfc-barra { border-bottom: 0; }

.zfc-cabecera--fija .zfc-barra__interior {
  min-height: var(--zfc-header-fijo-alto);
  padding-top: 0;
}

.zfc-cabecera--fija .zfc-marca { height: 32px; }

/* En la cabecera fija el conjunto se compacta: lo decide el recuadro, y el
   campo lo sigue por `align-self: stretch`. */
.zfc-cabecera--fija .zfc-barra__buscador form { min-height: var(--zfc-boton-s); }
.zfc-cabecera--fija .zfc-barra__buscar-boton { min-height: var(--zfc-boton-s); }

.zfc-cabecera--fija .zfc-acceso__cuenta { top: -4px; right: 0; }

.zfc-cabecera--fija .zfc-nav__enlace { padding-block: var(--zfc-esp-2); }
.zfc-cabecera--fija .zfc-nav__enlace:hover { border-bottom-color: transparent; }

/* Por debajo de la fila única el menú no cabe en 56px junto al buscador, así
   que ahí sí se comprime: entradas cortas, buscador colapsado a icono y sin
   favoritos. Es el comportamiento que tenía la barra compacta de siempre. */
@media (max-width: 1279px) {
  .zfc-cabecera--fija .zfc-barra__interior { flex-wrap: nowrap; }

  .zfc-cabecera--fija .zfc-barra__marca    { order: 1; }
  .zfc-cabecera--fija .zfc-nav             { order: 2; flex: 1; border-top: 0; }
  .zfc-cabecera--fija .zfc-barra__buscador { order: 3; flex: none; max-width: none; }
  .zfc-cabecera--fija .zfc-barra__accesos  { order: 4; margin-left: 0; gap: var(--zfc-esp-4); }

  .zfc-cabecera--fija .zfc-barra__buscador form { border-color: transparent; background: none; }
  .zfc-cabecera--fija .zfc-barra__buscador input[type="search"] { display: none; }
  /* `width` sin `height` dejaba este boton en 20px de alto: la lupa se tocaba
     tres veces antes de pegar. Es el mismo descuido de arriba. */
  .zfc-cabecera--fija .zfc-barra__buscar-boton {
    background: none;
    color: var(--zfc-encabezado-barra-texto-fuerte);
    padding: 0;
    width: var(--zfc-alto-tactil);
    min-height: var(--zfc-alto-tactil);
  }
  .zfc-cabecera--fija .zfc-barra__buscar-texto { display: none; }
  .zfc-cabecera--fija .zfc-barra__buscar-boton .zfc-icono { display: block; }

  .zfc-cabecera--fija .zfc-acceso__texto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* Y su altura, que se iba con la etiqueta. Sin esto los tres iconos de la
     barra compacta median 20 a 22px: se fallaba el toque, y si el dedo se
     corria de lado se abria Mi cuenta en vez del carrito. */
  .zfc-cabecera--fija .zfc-acceso {
    min-width: var(--zfc-alto-tactil);
    min-height: var(--zfc-alto-tactil);
    justify-content: center;
  }

  /* El corazon YA NO se esconde al compactarse la cabecera. Se guardaban marcos
     tocando el corazon de cada tarjeta y despues no habia ningun sitio al que
     volver ni ningun numero que mirar: la lista solo se encontraba abriendo la
     hamburguesa y bajando hasta una fila de texto. Con tres iconos de 48 caben
     de sobra en una barra de 56. */

  .zfc-cabecera--fija .zfc-nav__largo { display: none; }
  .zfc-cabecera--fija .zfc-nav__corto { display: inline; }
  /* Las entradas sin texto corto conservan el largo. */
  .zfc-cabecera--fija .zfc-nav__item:not(:has(.zfc-nav__corto)) .zfc-nav__largo { display: inline; }
}

/* Entre 900 y 1279 la cabecera en reposo pone el menú en su propia fila, pero
   la compacta lo sube a la misma línea. Ahí no caben seis entradas: se dejan
   las cortas y se recorta lo que sobra. */
@media (max-width: 1279px) and (min-width: 900px) {
  .zfc-cabecera--fija .zfc-nav__lista { gap: var(--zfc-esp-4); flex-wrap: nowrap; overflow: hidden; }
}

/* Mientras la cabecera está fija, el hueco lo tapa este relleno para que el
   contenido no salte de golpe. */
.zfc-relleno-cabecera { display: none; }
.zfc-relleno-cabecera--activo { display: block; }

/* --- Mega menú ------------------------------------------------------------ */

/* El top es explicito y no la posicion estatica: el contexto es .zfc-cabecera,
   asi que 100% es siempre su borde inferior, este el menu en su propia fila o
   dentro de la fila unica. Sin el, el panel se montaba 21px sobre la barra. */
.zfc-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--zfc-superficie-base);
  border-top: 1px solid var(--zfc-borde-sutil);
  box-shadow: var(--zfc-sombra-2);
  z-index: var(--zfc-capa-mega);
}

.zfc-mega[hidden] { display: none; }

.zfc-mega__interior {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
  gap: var(--zfc-esp-8);
  padding-block: var(--zfc-esp-8);
}

.zfc-mega__columna { display: flex; flex-direction: column; gap: var(--zfc-esp-3); }

.zfc-mega__columna .zfc-etiqueta {
  color: var(--zfc-acento-texto);
  padding-bottom: var(--zfc-esp-2);
  border-bottom: 1px solid var(--zfc-borde-sutil);
  margin: 0;
}

.zfc-mega__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* 6px, y esta FUERA de la escala de 4/8/12 a proposito.
     Son enlaces de una linea de 25px de alto: con los 12 de antes cada fila
     sumaba casi un 50% de aire y la columna se leia como cosas sueltas en vez
     de como un menu. El escalon de abajo (4) deja el texto pegado, y el de
     arriba (8) es el que usa el pie, donde el dedo manda. Aqui no: este panel
     solo existe de 900px para arriba, o sea con raton. */
  gap: 6px;
}

.zfc-mega__lista a {
  color: var(--zfc-texto-principal);
  text-decoration: none;
  font-size: var(--zfc-cuerpo-s);
}

.zfc-mega__lista a:hover { color: var(--zfc-texto-marca); text-decoration: underline; }

/* Marcas en fichas: la primera ocupa el ancho completo con su conteo. */
.zfc-mega__marcas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--zfc-esp-2);
}

.zfc-mega__marca {
  border: 1px solid var(--zfc-borde-medio);
  background: var(--zfc-superficie-base);
}

.zfc-mega__marca a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--zfc-esp-1);
  height: 50px;
  padding: 0 var(--zfc-esp-2);
  text-align: center;
  color: var(--zfc-texto-secundario);
  font-size: var(--zfc-etiqueta);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}

.zfc-mega__marca:hover { border-color: var(--zfc-accion-primaria); }
.zfc-mega__marca a:hover { color: var(--zfc-texto-marca); }

.zfc-mega__marca .zfc-marcas__logo {
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.zfc-mega__marca a { padding-inline: var(--zfc-esp-3); }

.zfc-mega__marca--principal { grid-column: span 2; }
.zfc-mega__marca--principal a { height: 68px; }
.zfc-mega__marca--principal .zfc-mega__marca-nombre {
  font-size: var(--zfc-h6);
  font-weight: 600;
  letter-spacing: .11em;
  color: var(--zfc-texto-marca);
}

.zfc-mega__marca-total {
  font-size: var(--zfc-cuerpo-s);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--zfc-texto-secundario);
}

.zfc-mega__ver-todo {
  display: inline-flex;
  align-items: center;
  gap: var(--zfc-esp-2);
  margin-top: var(--zfc-esp-1);
  color: var(--zfc-acento-texto);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
  text-decoration: none;
}

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

.zfc-mega__columna--atajos { gap: var(--zfc-esp-4); }

.zfc-mega__atajo {
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-2);
  padding: var(--zfc-esp-4);
  background: var(--zfc-superficie-calida);
  border-left: 3px solid var(--zfc-accion-acento);
  text-decoration: none;
}

.zfc-mega__atajo .zfc-icono { color: var(--zfc-acento-texto); }

.zfc-mega__atajo-titulo {
  font-size: var(--zfc-h6);
  font-weight: 600;
  color: var(--zfc-texto-marca);
}

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

.zfc-mega__atajo-cta {
  margin-top: var(--zfc-esp-1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--zfc-esp-2);
  min-height: var(--zfc-boton-m);
  background: var(--zfc-accion-acento);
  color: var(--zfc-texto-marca);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
}

.zfc-mega__atajo:hover .zfc-mega__atajo-cta { background: var(--zfc-accion-acento-hover); }

/* El segundo atajo va en marino: es el probador, no la vía de la receta. */
.zfc-mega__atajo + .zfc-mega__atajo {
  background: var(--zfc-superficie-inversa);
  border-left-color: var(--zfc-superficie-inversa);
}
.zfc-mega__atajo + .zfc-mega__atajo .zfc-icono { color: var(--zfc-accion-acento); }
.zfc-mega__atajo + .zfc-mega__atajo .zfc-mega__atajo-titulo { color: var(--zfc-texto-inverso); }
.zfc-mega__atajo + .zfc-mega__atajo .zfc-mega__atajo-texto { color: var(--zfc-texto-inverso-suave); }

/* --- Menú móvil ----------------------------------------------------------- */

.zfc-menu-movil {
  position: fixed;
  inset: 0;
  z-index: var(--zfc-capa-panel);
  display: flex;
  flex-direction: column;
  background: var(--zfc-superficie-base);
  overflow-y: auto;
}

.zfc-menu-movil[hidden] { display: none; }

.zfc-menu-movil__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zfc-esp-4);
  padding: var(--zfc-esp-3) var(--zfc-esp-4);
  border-bottom: 1px solid var(--zfc-borde-sutil);
}

.zfc-menu-movil__cabecera .zfc-marca { height: 40px; }

.zfc-menu-movil__cerrar {
  width: var(--zfc-alto-tactil);
  height: var(--zfc-alto-tactil);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--zfc-texto-marca);
  cursor: pointer;
}

.zfc-menu-movil__cuerpo { padding-bottom: var(--zfc-esp-8); }

.zfc-menu-movil__buscador {
  display: flex;
  padding: var(--zfc-esp-4);
  border-bottom: 1px solid var(--zfc-borde-sutil);
}

.zfc-menu-movil__buscador input[type="search"] {
  flex: 1;
  min-width: 0;
  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-base);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-m);
}

.zfc-menu-movil__lista { list-style: none; margin: 0; padding: 0; }

/* Cada fila mide 48px: es la zona táctil mínima que fijó el diseño. */
.zfc-menu-movil__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zfc-esp-3);
  width: 100%;
  min-height: var(--zfc-alto-tactil);
  padding: 0 var(--zfc-esp-4);
  border: 0;
  border-bottom: 1px solid var(--zfc-borde-sutil);
  background: none;
  color: var(--zfc-texto-principal);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-m);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.zfc-menu-movil__acordeon[aria-expanded="true"] .zfc-icono { transform: rotate(180deg); }

.zfc-menu-movil__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--zfc-superficie-calida);
}

.zfc-menu-movil__submenu[hidden] { display: none; }

.zfc-menu-movil__submenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zfc-esp-3);
  min-height: var(--zfc-alto-tactil);
  padding: 0 var(--zfc-esp-4) 0 var(--zfc-esp-8);
  border-bottom: 1px solid var(--zfc-borde-sutil);
  color: var(--zfc-texto-principal);
  font-size: var(--zfc-cuerpo-s);
  text-decoration: none;
}

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

.zfc-menu-movil__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-3);
  padding: var(--zfc-esp-4);
  background: var(--zfc-superficie-calida);
}

@media (min-width: 900px) {
  .zfc-menu-movil { display: none; }
}

/* --- Cabecera en móvil ---------------------------------------------------- */

/* La lupa del teléfono. La regla base va ANTES de su media query: escrita
   después ganaba por cascada y la lupa salía también en escritorio, al lado de
   la caja de buscar que ya está abierta. */
.zfc-barra__lupa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--zfc-encabezado-barra-texto-fuerte);
  cursor: pointer;
}

/* De 900 arriba no existe: ahí la caja de buscar está siempre visible. */
@media (min-width: 900px) {
  .zfc-barra__lupa { display: none; }
}

/* La cabecera del teléfono, en UNA fila.
   Medía 179px, el 27% de la pantalla de un iPhone SE, repartidos en tres filas:
   promesas, marca con iconos, y la caja de buscar en una fila propia. Y esos
   62px del buscador se evaporaban al bajar, así que para buscar había que subir
   hasta arriba del todo o adivinar que la búsqueda estaba en la hamburguesa.

   Ahora son 34 de promesas más 64 de barra: 98px, y devuelve 81px de marcos a
   la primera pantalla. La búsqueda vive detrás de la lupa, como una capa, y la
   lupa sigue estando cuando la cabecera se compacta. */
@media (max-width: 899px) {
  .zfc-barra__interior {
    min-height: 64px;
    gap: var(--zfc-esp-3);
    flex-wrap: nowrap;
  }

  .zfc-barra__hamburguesa { display: flex; order: 1; }
  .zfc-barra__marca { order: 2; margin-inline: auto; }
  .zfc-barra__accesos { order: 3; margin-left: 0; gap: var(--zfc-esp-2); }

  /* Cuenta se queda en el menú: es donde tiene sentido y no es una acción de
     una sola pulsación. Favoritos SÍ vuelve, con su contador: hasta ahora se
     guardaban marcos tocando el corazón de cada tarjeta y después no pasaba
     nada visible en ninguna parte, ni un número ni un sitio al que volver. */
  .zfc-acceso--cuenta { display: none; }
  .zfc-acceso--favoritos { display: inline-flex; }
  .zfc-acceso__texto { display: none; }

  /* Los tres de la derecha son cajas cuadradas de la zona táctil, no iconos
     sueltos: es lo que evita fallar el toque y abrir el de al lado. */
  .zfc-barra__lupa,
  .zfc-barra__accesos .zfc-acceso {
    width: var(--zfc-alto-tactil);
    min-height: var(--zfc-alto-tactil);
    justify-content: center;
  }

  /* La búsqueda es una capa bajo la cabecera, no una fila de la cabecera. */
  .zfc-barra__buscador {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: var(--zfc-capa-mega);
    display: none;
    padding: var(--zfc-esp-3) var(--zfc-esp-4);
    /* La capa cuelga de la barra y se lee como parte de ella: comparte su
       fondo, así que sigue a la barra si la óptica la pinta. */
    background: var(--zfc-encabezado-barra-fondo);
    border-bottom: 1px solid var(--zfc-borde-sutil);
    box-shadow: var(--zfc-sombra-2);
    max-width: none;
  }

  .zfc-barra--buscando .zfc-barra__buscador { display: block; }

  .zfc-barra__buscador form { display: flex; gap: var(--zfc-esp-2); }
  .zfc-barra__buscador input[type="search"] { flex: 1; min-width: 0; }
  .zfc-barra__buscar-boton { padding: 0 var(--zfc-esp-4); }

  /* La barra es el contenedor de posicionamiento de esa capa. */
  .zfc-barra { position: relative; }
}



/* --- Pie ------------------------------------------------------------------ */

/* El pie no lleva margen propio: va pegado a lo que venga arriba. El aire lo
   pone el padding de la última sección. */

.zfc-pie__interior {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zfc-esp-8);
  padding-block: var(--zfc-esp-12) var(--zfc-esp-8);
}

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

  /* La regla de arriba es la de dos columnas de enlaces, que es lo que trae el
     pie hoy. Desde el 16-09-2026 esas columnas pueden salir de un menú que arma
     la óptica, así que puede haber otra cantidad: la marca y la columna de la
     tienda conservan su ancho y las de enlaces se reparten el resto. Con cinco
     o más, las que sobran bajan a una segunda fila. */
  .zfc-pie__interior--enlaces-1 { grid-template-columns: 1.5fr 1fr 1.2fr; }
  .zfc-pie__interior--enlaces-3 { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; }
  .zfc-pie__interior--enlaces-4 { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1.2fr; }
}

.zfc-pie__marca { display: flex; flex-direction: column; gap: var(--zfc-esp-4); align-items: flex-start; }
.zfc-pie__descripcion { margin: 0; color: var(--zfc-texto-inverso-suave); }

.zfc-pie__redes { display: flex; gap: var(--zfc-esp-3); list-style: none; margin: 0; padding: 0; }

.zfc-pie__redes a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--zfc-accion-secundaria);
  color: var(--zfc-texto-inverso-suave);
}

.zfc-pie__redes a:hover { border-color: var(--zfc-accion-acento); color: var(--zfc-accion-acento); }

.zfc-pie__columna .zfc-etiqueta { color: var(--zfc-accion-acento); margin-bottom: var(--zfc-esp-3); }

/* 8px de hueco y no 12: son enlaces de una linea de 25px de alto, asi que 12
   sumaba casi un 50% de aire por fila y la columna se leia como una lista de
   cosas sueltas en vez de como un menu. En el telefono el hueco sube, porque
   ahi lo que se toca es el enlace y necesita su zona. */
.zfc-pie__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--zfc-esp-2); }
.zfc-pie__lista a { color: var(--zfc-texto-inverso-suave); text-decoration: none; font-size: var(--zfc-cuerpo-s); }
.zfc-pie__lista a:hover { color: var(--zfc-accion-acento); text-decoration: underline; }
.zfc-pie__lista--datos { color: var(--zfc-texto-inverso-suave); font-size: var(--zfc-cuerpo-s); line-height: var(--zfc-cuerpo-s-alto); }

.zfc-pie__confianza,
.zfc-pie__legales { border-top: 1px solid var(--zfc-accion-secundaria); }

.zfc-pie__confianza-interior {
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-6);
  flex-wrap: wrap;
  padding-block: var(--zfc-esp-4);
}

.zfc-pie__confianza-interior .zfc-etiqueta { color: var(--zfc-texto-inverso-tenue); }

.zfc-pie__pago {
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-2);
  padding: var(--zfc-esp-2) var(--zfc-esp-3);
  border: 1px solid var(--zfc-accion-secundaria);
  color: var(--zfc-texto-inverso-suave);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
}

.zfc-pie__pago .zfc-icono { color: var(--zfc-accion-acento); }

.zfc-pie__respaldo { margin: 0; color: var(--zfc-texto-inverso-tenue); }

@media (min-width: 900px) {
  .zfc-pie__respaldo { margin-left: auto; }
}

.zfc-pie__legales-interior {
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-6);
  flex-wrap: wrap;
  padding-block: var(--zfc-esp-4);
  color: var(--zfc-texto-inverso-tenue);
}

.zfc-pie__legales-interior p { margin: 0; }

.zfc-pie__legales-lista {
  display: flex;
  gap: var(--zfc-esp-6);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--zfc-cuerpo-s);
}

.zfc-pie__legales-lista a { color: var(--zfc-texto-inverso-tenue); text-decoration: none; }
.zfc-pie__legales-lista a:hover { color: var(--zfc-accion-acento); text-decoration: underline; }

/* El pie es el único sitio del tema con altura de sobra, así que acá va el
   lockup COMPLETO, con «ÓPTICAS». Y va a 96px porque ese es el número: la
   bajada es el 9,6% del alto del lockup, y por debajo de 96px cae de los 9px
   que necesita para leerse. */
.zfc-pie__marca .zfc-marca { height: 96px; }

/* --- WhatsApp flotante -----------------------------------------------------

   Un `<details>`: el círculo es el `<summary>` y la tarjeta es su contenido. Se
   eligió así y no un botón con JavaScript porque abre, cierra y navega con
   teclado sin que el tema tenga que hacer nada, y porque si el JS no carga el
   componente sigue entero. `navegacion.js` solo agrega cerrarlo al tocar fuera
   y con Escape.

   El círculo es ámbar y no verde WhatsApp a propósito: es el acento de la
   marca, y quien reconoce el medio es el logotipo, que ahora sí es el de
   WhatsApp y no el globo genérico del sistema de iconos. El verde aparece solo
   en el punto de estado, que es donde significa algo.
   -------------------------------------------------------------------------- */

.zfc-whatsapp {
  position: fixed;
  right: var(--zfc-esp-4);
  bottom: var(--zfc-esp-4);
  z-index: var(--zfc-capa-flotante);
}

/* El círculo. 64px contra los 60 de antes: el cliente lo pidió más grande, y
   64 es además el tamaño con el que se probó el panel encima. */
.zfc-whatsapp__boton {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--zfc-radio-redondo);
  background: var(--zfc-accion-acento);
  color: var(--zfc-texto-marca);
  box-shadow: var(--zfc-sombra-3);
  cursor: pointer;
  list-style: none;               /* saca el triangulito del summary */
  transition: background .2s ease, transform .2s ease;
}

.zfc-whatsapp__boton::-webkit-details-marker { display: none; }
.zfc-whatsapp__boton:hover { background: var(--zfc-accion-acento-hover); transform: scale(1.06); }
.zfc-whatsapp__boton:focus-visible { outline: 3px solid var(--zfc-superficie-inversa); outline-offset: 3px; }

/* Abierto, el círculo pasa a ser el botón de cerrar: se cambia un icono por el
   otro. Los dos están en el HTML y solo cambia cuál se ve, que es más barato y
   más fiable que reemplazar el SVG con JavaScript. */
.zfc-whatsapp__marca,
.zfc-whatsapp__aspa { display: flex; }
.zfc-whatsapp__aspa { display: none; }
.zfc-whatsapp[open] .zfc-whatsapp__marca { display: none; }
.zfc-whatsapp[open] .zfc-whatsapp__aspa  { display: block; }

/* La tarjeta. Sube desde el círculo y se ancla a la derecha, que es donde hay
   sitio: pegada al borde izquierdo se saldría de la pantalla en un teléfono. */
.zfc-whatsapp__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--zfc-esp-3));
  width: 320px;
  max-width: calc(100vw - var(--zfc-esp-4) * 2);
  border-radius: var(--zfc-radio);
  overflow: hidden;
  background: var(--zfc-superficie-base);
  box-shadow: var(--zfc-sombra-3);
  animation: zfc-whatsapp-entra .22s ease-out;
}

@keyframes zfc-whatsapp-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .zfc-whatsapp__panel { animation: none; }
  .zfc-whatsapp__boton { transition: none; }
  .zfc-whatsapp__boton:hover { transform: none; }
}

.zfc-whatsapp__cabecera {
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-3);
  padding: var(--zfc-esp-3) var(--zfc-esp-4);
  background: var(--zfc-superficie-inversa);
  color: var(--zfc-texto-inverso);
}

/* El avatar es el monograma de la marca, no la foto de una persona: no hay
   ninguna del equipo de la óptica, y poner una ajena sería mentir sobre quién
   contesta. Si el cliente entrega una, se cambia acá y en el nombre. */
.zfc-whatsapp__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--zfc-radio-redondo);
  background: var(--zfc-superficie-calida);
}

.zfc-whatsapp__avatar .zfc-marca { height: 22px; }

.zfc-whatsapp__quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.zfc-whatsapp__nombre {
  font-weight: 600;
  font-size: var(--zfc-cuerpo-s);
  line-height: 1.2;
}

.zfc-whatsapp__estado {
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-2);
  font-size: var(--zfc-etiqueta);
  line-height: var(--zfc-etiqueta-alto);
  color: var(--zfc-texto-inverso-tenue);
}

.zfc-whatsapp__punto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--zfc-radio-redondo);
  background: var(--zfc-whatsapp);
}

.zfc-whatsapp__conversacion {
  padding: var(--zfc-esp-4);
  background: var(--zfc-superficie-calida);
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-2);
}

/* Globos de conversación. Sin esquinas redondeadas: el sistema de diseño de
   este tema es de esquinas rectas, y copiar las de WhatsApp metería una forma
   que no existe en ninguna otra parte del sitio. Lo que los hace leer como
   mensajes es el ancho corto, la sombra y el fondo distinto, no el radio. */
.zfc-whatsapp__globo {
  margin: 0;
  max-width: 85%;
  padding: var(--zfc-esp-3);
  border-radius: var(--zfc-radio);
  background: var(--zfc-superficie-base);
  box-shadow: var(--zfc-sombra-1);
  font-size: var(--zfc-cuerpo-s);
  line-height: var(--zfc-cuerpo-s-alto);
  color: var(--zfc-texto-principal);
}

.zfc-whatsapp__pie {
  padding: var(--zfc-esp-4);
  border-top: 1px solid var(--zfc-borde-sutil);
  background: var(--zfc-superficie-base);
}

.zfc-whatsapp__abrir { width: 100%; }

.zfc-whatsapp__horario {
  margin: var(--zfc-esp-2) 0 0;
  text-align: center;
  font-size: var(--zfc-etiqueta);
  line-height: var(--zfc-etiqueta-alto);
  color: var(--zfc-texto-secundario);
}

/* Sube donde hay una barra fija abajo, para no taparla.

   Eran DOS barras y esta regla solo conocía una: la de la ficha
   (`.zfc-barra-compra`). En el checkout está `.zfc-barra-pedido`, con el total y
   «Confirmar pedido», y el botón de WhatsApp le caía justo encima: tapaba el
   botón con el que se termina de comprar, que es lo último que se puede tapar
   en una tienda.

   Se resuelve con `:has()` y no listando clases de página: así vale para
   cualquier barra fija que se agregue después, sin que nadie tenga que
   acordarse de volver acá. La regla con las clases se queda debajo como
   respaldo para un navegador sin `:has()`. */
@media (max-width: 899px) {
  .single-product .zfc-whatsapp,
  .woocommerce-checkout .zfc-whatsapp { bottom: calc(var(--zfc-esp-4) + 76px); }

  body:has(.zfc-barra-compra:not([hidden])) .zfc-whatsapp,
  body:has(.zfc-barra-pedido:not([hidden])) .zfc-whatsapp {
    bottom: calc(var(--zfc-esp-4) + 76px);
  }
}


/* --- Favoritos ------------------------------------------------------------ */

/* El corazón de la tarjeta va sobre la foto, arriba a la derecha, donde no
   tapa ni la insignia ni el nombre. Fuera del enlace de la foto: dentro sería
   un botón dentro de un enlace, que no es HTML válido y que en el teléfono
   abre el producto al querer guardar. */
.zfc-favorito {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zfc-esp-2);
  border: 1px solid var(--zfc-borde-sutil);
  background: var(--zfc-superficie-base);
  color: var(--zfc-texto-secundario);
  cursor: pointer;
  padding: 0;
  transition: color .15s ease, border-color .15s ease;
}

.zfc-favorito svg { fill: none; stroke: currentColor; stroke-width: 1.6; }

.zfc-favorito:hover { color: var(--zfc-accion-acento); border-color: var(--zfc-accion-acento); }

/* Guardado: el corazón se rellena. El color solo no basta, y menos con un
   público que puede no distinguirlo. */
.zfc-favorito--activo { color: var(--zfc-accion-acento); border-color: var(--zfc-accion-acento); }
.zfc-favorito--activo svg { fill: currentColor; }

.zfc-favorito:disabled { opacity: .6; cursor: progress; }

.zfc-favorito:focus-visible {
  outline: 2px solid var(--zfc-foco);
  outline-offset: 2px;
}

/* Solo el icono, en la esquina de la foto. Lo usan la tarjeta del catálogo y la
   ficha: el cliente pidió el 28-08-2026 que las dos se comporten igual. El
   tamaño sale de un token porque hay otras dos reglas que dependen de él. */
.zfc-favorito--icono {
  position: absolute;
  top: var(--zfc-esp-2);
  right: var(--zfc-esp-2);
  width: var(--zfc-favorito-tam);
  height: var(--zfc-favorito-tam);
  z-index: var(--zfc-capa-tarjeta);
}

/* «Guardar» y «Guardado» se esconden a la vista, NO al lector de pantalla.
   Estaba en `display: none`, y así el nombre accesible del botón era solo el
   del producto: el corazón no anunciaba qué hacía. Es el mismo recorte que
   `.zfc-solo-lectores` en base.css.

   Y se oculta por CSS, nunca quitándolo del HTML: el JS lo busca con
   querySelector para reescribirlo al guardar. Sin ese span el clic sigue
   funcionando y la etiqueta deja de actualizarse, que no se nota hasta que
   alguien lo prueba con lector de pantalla. */
.zfc-favorito--icono .zfc-favorito__texto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.zfc-producto { position: relative; }

/* El contador del corazón usa las mismas clases que el del carrito, así que
   solo hace falta el contexto para posicionarlo. */
.zfc-acceso--favoritos { position: relative; }

.zfc-favoritos__intro {
  margin: 0 0 var(--zfc-esp-6);
  color: var(--zfc-texto-secundario);
}