/* ==========================================================================
   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 ---------------------------------------------------------------- */

.sf-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.sf-marca__sigla {
  font-family: var(--sf-fuente-marca);
  font-weight: var(--sf-marca-peso);
  font-optical-sizing: none;
  font-variation-settings: 'opsz' var(--sf-marca-opsz);
  font-size: 46px;
  line-height: .95;
  color: var(--sf-texto-marca);
}

.sf-marca__f { color: var(--sf-accion-acento); }

.sf-marca__bajada {
  font-family: var(--sf-fuente-marca);
  font-weight: var(--sf-marca-peso);
  font-optical-sizing: none;
  font-variation-settings: 'opsz' var(--sf-marca-opsz);
  font-size: 11px;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--sf-texto-marca);
  padding-left: .36em;
  margin-top: 3px;
}

.sf-superficie-inversa .sf-marca__sigla,
.sf-superficie-inversa .sf-marca__bajada { color: var(--sf-texto-inverso); }
.sf-superficie-inversa .sf-marca__f { color: var(--sf-acento-inverso); }

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

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

.sf-boton.sf-boton--primario {
  background: var(--sf-accion-primaria);
  color: var(--sf-accion-inversa);
}
.sf-boton.sf-boton--primario:hover { background: var(--sf-accion-primaria-hover); color: var(--sf-accion-inversa); }

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

.sf-boton.sf-boton--contorno {
  background: transparent;
  border-color: var(--sf-accion-primaria);
  color: var(--sf-accion-primaria);
}
.sf-boton.sf-boton--contorno:hover { background: var(--sf-accion-primaria); color: var(--sf-accion-inversa); }

/* El rojo de Tenryu. Solo para acciones que llevan a Tenryu, que es el limite
   que fija D8: el resto del sitio acentua con el azul acero del logo. Hoy lo
   usa el primer boton del hero, «Ver cañas Tenryu». */
.sf-boton.sf-boton--tenryu {
  background: var(--sf-accion-tenryu);
  color: #FFFFFF;
}
.sf-boton.sf-boton--tenryu:hover { background: var(--sf-accion-tenryu-hover); color: #FFFFFF; }

/* Contorno sobre foto o sobre superficie inversa: el de arriba pinta el borde
   con el azul de accion y sobre una foto oscura no se ve. */
.sf-boton.sf-boton--linea {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .55);
  color: var(--sf-texto-inverso);
}
.sf-boton.sf-boton--linea:hover {
  background: rgba(255, 255, 255, .16);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

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

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

/* Barra de promesas: fondo marino, iconos en ámbar y el teléfono a la derecha. */
.sf-promesas {
  background: var(--sf-superficie-inversa);
  color: var(--sf-texto-inverso-suave);
  font-size: var(--sf-cuerpo-s);
}

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

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

.sf-promesas__item {
  display: flex;
  align-items: center;
  gap: var(--sf-esp-2);
}

.sf-promesas__item .sf-icono { color: var(--sf-acento-inverso); flex: none; }






/* En móvil no cabe: el cliente revisa esto en escritorio. */

.sf-promesas__telefono {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sf-esp-2);
  color: var(--sf-texto-inverso);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* La franja de promesas se pinta sobre --sf-superficie-inversa, así que el
   acento de acá es el inverso: el normal es azul oscuro y daba 1,93:1. */
.sf-promesas__telefono .sf-icono { color: var(--sf-acento-inverso); }
.sf-promesas__telefono:hover { color: var(--sf-acento-inverso); }

/* --- Bloque derecho de la franja de promesas -------------------------------

   Aca vivieron tambien los estilos del interruptor de modo claro y oscuro. Se
   fueron el 27-08-2026 con el interruptor: el cliente eligio quedarse en claro.
   Ver D20. */

.sf-promesas__derecha {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sf-esp-4);
}

/* El teléfono ya no necesita empujarse solo: lo hace el contenedor. */
.sf-promesas__derecha .sf-promesas__telefono { margin-left: 0; }

/* Las redes de la franja de arriba van con el nombre escrito, no con un icono
   de 24px: en el artefacto (`.cb__top`) se lee «Instagram  Facebook  +56 9 2749
   2795» y las tres son texto. El icono ahi no se lee como enlace. */
.sf-promesas__redes {
  display: flex;
  align-items: center;
  gap: var(--sf-esp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-promesas__redes a {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-esp-2);
  color: var(--sf-texto-inverso-suave);
  text-decoration: none;
  white-space: nowrap;
}

/* El logotipo oficial de una red, en el tamano que le pide `sf_logo_red()`.
   El color vive dentro del SVG: aca solo se le da caja. `flex: none` es lo que
   evita que el gradiente de Instagram se aplaste cuando la franja se aprieta. */
.sf-red {
  display: inline-flex;
  flex: none;
  width: var(--sf-red-lado, 19px);
  height: var(--sf-red-lado, 19px);
}

.sf-red svg { display: block; width: 100%; height: 100%; }

.sf-promesas__redes a:hover { color: var(--sf-acento-inverso); }
.sf-promesas__redes a:focus-visible { outline: 2px solid var(--sf-foco-inverso); outline-offset: 2px; }

/* Bajo 900px el teléfono se esconde (regla de más abajo) y la franja queda con
   las promesas solas y centradas. Al bloque derecho se le saca el margen
   automático: si no, absorbe todo el espacio libre y el `justify-content: center`
   de la franja deja de tener efecto. */
@media (max-width: 899px) {
  .sf-promesas__derecha { margin-left: 0; gap: var(--sf-esp-2); }

  /* Las redes se van con el teléfono: en el ancho de un teléfono la franja solo
     tiene sitio para dos promesas, y las redes siguen estando en el pie. */
  .sf-promesas__redes { display: none; }
}

/* En móvil solo caben dos promesas, en una línea, y el teléfono se va al pie. */
@media (max-width: 899px) {
  .sf-promesas__interior { min-height: 34px; justify-content: center; }

  .sf-promesas__lista {
    gap: 0;
    flex-wrap: nowrap;
    font-size: var(--sf-etiqueta);
    line-height: var(--sf-etiqueta-alto);
  }

  .sf-promesas__item { white-space: nowrap; }
  .sf-promesas__item .sf-icono { display: none; }

  .sf-promesas__item + .sf-promesas__item::before {
    content: "·";
    margin-inline: var(--sf-esp-2);
    color: var(--sf-texto-inverso-tenue);
  }

  .sf-promesas__item--opcional,
  .sf-promesas__telefono { display: none; }
}

/* Barra principal */
.sf-barra { border-bottom: 1px solid var(--sf-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. */
.sf-barra__interior {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sf-esp-6);
  min-height: var(--sf-header-alto);
  padding-top: var(--sf-esp-3);
}

.sf-barra__marca {
  flex: none;
  text-decoration: none;
}

/* El logo lo sirve el tema desde `assets/marca/`, no la biblioteca de medios.
   Es cuadrado (280x280) y se pinta por alto: el ancho sale solo. */
.sf-marca__imagen {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sf-barra__marca .sf-marca__imagen {
  max-height: calc( var(--sf-header-fila-alto) - var(--sf-esp-4) );
}

/* En la cabecera fija la fila es mas baja, asi que el logo tambien. */
.sf-cabecera--fija .sf-barra__marca .sf-marca__imagen { height: 40px; max-height: 40px; }

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

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

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

.sf-barra__buscador input[type="search"] {
  flex: 1;
  min-width: 0;
  height: var(--sf-campo-alto);
  padding: 0 var(--sf-esp-3);
  border: 0;
  background: transparent;
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-m);
  color: var(--sf-texto-principal);
}

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

.sf-barra__buscar-boton {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sf-esp-6);
  border: 0;
  background: var(--sf-accion-primaria);
  color: var(--sf-accion-inversa);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-s);
  font-weight: 600;
  cursor: pointer;
}

.sf-barra__buscar-boton:hover { background: var(--sf-accion-primaria-hover); }
.sf-barra__buscar-boton .sf-icono { display: none; }

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

.sf-acceso {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sf-esp-1);
  min-width: var(--sf-alto-tactil);
  color: var(--sf-texto-marca);
  font-size: var(--sf-etiqueta);
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
}

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

.sf-acceso__cuenta {
  position: absolute;
  top: -5px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sf-radio-redondo);
  background: var(--sf-descuento);
  color: var(--sf-accion-inversa);
  font-size: 10px;
  font-weight: 600;
}

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

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

/* La barra lleva DOS listas, una por ubicacion registrada: `principal` a la
   izquierda y `secundario` a la derecha. Por eso el propio `.sf-nav` es flex y
   no solo un envoltorio. */
.sf-nav {
  display: flex;
  align-items: center;
  gap: var(--sf-esp-6);
  flex: 1 0 100%;
  border-top: 1px solid var(--sf-borde-medio);
}

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

.sf-nav__item { position: static; }

/* A la izquierda queda lo que se compra y a la derecha lo que se lee sobre la
   tienda. El hueco lo abre la LISTA de la derecha, no su primera entrada.

   Hasta el 17-09-2026 era una sola lista y el `margin-left: auto` iba sobre la
   primera entrada que el tema decidia que era «de la derecha», comparando su
   titulo contra una lista escrita a mano: renombrar «Nosotros» la cambiaba de
   lado y se llevaba el hueco con ella. */
.sf-nav__lista--secundaria { margin-left: auto; }

.sf-nav__enlace {
  line-height: var(--sf-alto-compacto);
  display: flex;
  align-items: center;
  gap: var(--sf-esp-1);
  padding-block: var(--sf-esp-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--sf-texto-principal);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-s);
  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. */
.sf-nav__enlace:hover {
  color: var(--sf-texto-marca);
  border-bottom-color: var(--sf-accion-primaria);
}

.sf-nav__item--mega .sf-nav__disparador[aria-expanded="true"] {
  color: var(--sf-texto-marca);
  font-weight: 600;
  border-bottom-color: var(--sf-accion-primaria);
}

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

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

.sf-nav__corto { display: none; }

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

/* --- Cabecera de escritorio: dos filas (1280px y mas) ---------------------

   Hasta el 01-09-2026 esto aplastaba marca, menu, buscador e iconos en una sola
   fila de 76px. El artefacto v3 no hace eso: hace dos filas, una con el logo,
   el buscador y los iconos, y otra con el menu. La diferencia no es estetica.
   Con todo en una fila el buscador se queda con el hueco que sobra: medido,
   215px de 1216, el 17% del ancho. En el artefacto ocupa el 68%.

   La reja da tres columnas y dos filas, y el logo toma la columna de la
   izquierda entera:

       marca | buscador | accesos
       marca | nav      | nav

   Se usa reja y no flex-wrap porque con wrap el logo vive solo en la primera
   fila: para que cruce las dos tiene que ser una celda que abarque ambas. */

@media (min-width: 1280px) {

  .sf-barra__interior {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: var(--sf-header-fila-alto) var(--sf-header-nav-alto);
    grid-template-areas:
      "marca buscador accesos"
      "marca nav      nav";
    align-items: center;
    /* row-gap explicito en 0: la regla base pone `gap` a 24px y en reja eso
       tambien separa las filas, metiendo 24px entre la barra y el menu que en
       el artefacto no existen. */
    column-gap: var(--sf-esp-6);
    row-gap: 0;
    min-height: auto;
    padding-top: 0;
  }

  .sf-barra__marca    { grid-area: marca; align-self: center; }
  .sf-barra__buscador { grid-area: buscador; }
  .sf-barra__accesos  { grid-area: accesos; }
  .sf-nav             { grid-area: nav; align-self: start; }

  /* El logo cruza las dos filas: 72 de la barra mas 44 del menu, menos 6px de
     aire arriba y abajo. Decision D24. */
  .sf-barra__marca .sf-marca__imagen {
    height: var(--sf-header-logo-alto);
    max-height: var(--sf-header-logo-alto);
    max-width: none;
    width: auto;
  }

  /* La marca en texto, para el caso sin logo cargado. */
  .sf-barra__marca .sf-marca {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sf-esp-1);
  }

  .sf-barra__marca .sf-marca__sigla { font-size: 32px; }

  .sf-barra__marca .sf-marca__bajada {
    margin-top: 0;
    padding-left: 0;
    font-size: 10px;
    letter-spacing: .28em;
  }

  /* El buscador ya no pelea por el hueco que sobra: tiene su propia columna y
     la llena. El tope de 420px era el parche de la fila unica. */
  .sf-barra__buscador {
    max-width: none;
    min-width: 0;
    margin-left: 0;
  }

  .sf-barra__buscador input[type="search"] { height: var(--sf-boton-s); }
  .sf-barra__buscar-boton { padding-inline: var(--sf-esp-4); }

  /* El menu recupera su fila y arranca pegado al borde izquierdo de su columna,
     sin la linea de arriba que lo separaba cuando era una franja aparte. */
  .sf-nav {
    border-top: 0;
    width: 100%;
    gap: var(--sf-esp-4);
  }

  .sf-nav__lista { gap: var(--sf-esp-4); flex-wrap: nowrap; }
  .sf-nav__enlace { padding-block: var(--sf-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. */
  .sf-nav__item--destacado { margin-left: 0; }

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

  .sf-acceso { min-width: var(--sf-boton-s); }

  .sf-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;
  }

  .sf-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. */
.sf-cabecera--fija {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: var(--sf-sombra-2);
}

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

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

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

.sf-cabecera--fija .sf-marca__sigla { font-size: 26px; }
.sf-cabecera--fija .sf-marca__bajada { display: none; }

.sf-cabecera--fija .sf-barra__buscador input[type="search"] { height: var(--sf-boton-s); }

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

.sf-cabecera--fija .sf-nav__enlace { padding-block: var(--sf-esp-2); }
.sf-cabecera--fija .sf-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) {
  .sf-cabecera--fija .sf-barra__interior { flex-wrap: nowrap; }

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

  .sf-cabecera--fija .sf-barra__buscador form { border-color: transparent; background: none; }
  .sf-cabecera--fija .sf-barra__buscador input[type="search"] { display: none; }
  .sf-cabecera--fija .sf-barra__buscar-boton {
    background: none;
    color: var(--sf-texto-marca);
    padding: 0;
    width: var(--sf-alto-tactil);
  }
  .sf-cabecera--fija .sf-barra__buscar-texto { display: none; }
  .sf-cabecera--fija .sf-barra__buscar-boton .sf-icono { display: block; }

  .sf-cabecera--fija .sf-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;
  }

  .sf-cabecera--fija .sf-acceso--favoritos { display: none; }

  .sf-cabecera--fija .sf-nav__largo { display: none; }
  .sf-cabecera--fija .sf-nav__corto { display: inline; }
  /* Las entradas sin texto corto conservan el largo. */
  .sf-cabecera--fija .sf-nav__item:not(:has(.sf-nav__corto)) .sf-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) {
  /* El hueco ENTRE las dos listas se aprieta al mismo valor que el hueco entre
     entradas, que es lo que hace la lista de al lado en esta misma franja. No
     arregla el recorte: medido a 1100px, las doce entradas piden 785px y la
     barra compacta deja 779, asi que «Contacto» sale cortado por 6px con 16 o
     con 24 de hueco. Era igual antes de partir la lista en dos. */
  .sf-cabecera--fija .sf-nav { gap: var(--sf-esp-4); }

  /* El `min-width: 0` es lo que deja encoger a las dos listas: sin el, un item
     flex no baja del ancho de su contenido y el `overflow: hidden` no recorta
     nada, se desborda. Antes no hacia falta porque la lista era una sola y era
     un bloque, no un item flex. */
  .sf-cabecera--fija .sf-nav__lista {
    gap: var(--sf-esp-4);
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
  }
}

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

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

/* El top es explicito y no la posicion estatica: el contexto es .sf-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. */
.sf-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--sf-superficie-base);
  border-top: 1px solid var(--sf-borde-sutil);
  box-shadow: var(--sf-sombra-2);
  z-index: 45;
}

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

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

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

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

.sf-mega__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-3);
}

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

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

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

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

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

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

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

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

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

.sf-mega__marca--vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-style: dashed;
  background: none;
  text-align: center;
  font-size: 10px;
  line-height: 1.25;
  color: var(--sf-accion-desactivada-txt);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sf-menu-movil__buscador input[type="search"] {
  flex: 1;
  min-width: 0;
  height: var(--sf-campo-alto);
  padding: 0 var(--sf-esp-3);
  border: 1px solid var(--sf-borde-campo);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-base);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-m);
}

.sf-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. */
.sf-menu-movil__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-esp-3);
  width: 100%;
  min-height: var(--sf-alto-tactil);
  padding: 0 var(--sf-esp-4);
  border: 0;
  border-bottom: 1px solid var(--sf-borde-sutil);
  background: none;
  color: var(--sf-texto-principal);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-m);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

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

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

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

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

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

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

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

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

@media (max-width: 899px) {
  .sf-barra__interior {
    min-height: 64px;
    gap: var(--sf-esp-3);
    flex-wrap: wrap;
  }

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

  /* En móvil solo se ve el carrito: cuenta y favoritos viven en el menú. */
  .sf-acceso--cuenta,
  .sf-acceso--favoritos { display: none; }
  .sf-acceso__texto { display: none; }

  .sf-barra__buscador {
    order: 4;
    flex: 1 0 100%;
    max-width: none;
    padding-bottom: var(--sf-esp-3);
  }

  .sf-barra__buscar-boton { padding: 0 var(--sf-esp-4); }

  .sf-cabecera--fija .sf-barra__buscador { display: none; }
}

/* --- 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. */

/* Los aires del pie salen de `.pi__c` del artefacto: 22,4px de relleno y
   16/22,4 de separacion entre columnas sobre un lienzo de 1024, que a 1280 son
   28 y 20/28. Estaban en 48 arriba y 32 de separacion, y por eso el pie media
   450px contra los 365 del artefacto. */
.sf-pie__interior {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-5) var(--sf-esp-8);
  padding-block: var(--sf-esp-8);
}

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

.sf-pie__marca { display: flex; flex-direction: column; gap: var(--sf-esp-3); align-items: flex-start; }

/* El logo del pie. En el artefacto (`.pi__lg`) mide 46px sobre 1024, que son 57
   a 1280, y lleva media linea de aire debajo. */
.sf-pie__logo { display: block; text-decoration: none; }
.sf-pie__logo .sf-marca__imagen { height: var(--sf-pie-logo-alto); width: auto; }
.sf-pie__descripcion { margin: 0; color: var(--sf-texto-inverso-suave); }

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

/* El borde va con el tono tenue del texto inverso y no con
   --sf-accion-secundaria: ese token es casi negro en modo claro y sobre el pie,
   que tambien es casi negro, el recuadro desaparecia. Un borde no es texto, asi
   que no lo cazo la auditoria de contraste; se vio mirando. */
.sf-pie__redes a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sf-texto-inverso-tenue);
  color: var(--sf-texto-inverso-suave);
}

/* Con el logotipo oficial adentro, el hover ya no puede cambiar el color del
   icono: es el color de la marca. Se mueve el borde, que es lo nuestro. */
.sf-pie__redes a:hover { border-color: var(--sf-acento-inverso); color: var(--sf-acento-inverso); }

.sf-pie__columna .sf-etiqueta { color: var(--sf-acento-inverso); margin-bottom: var(--sf-esp-2); }

/* La separacion entre enlaces era de 12px y cada fila ya mide 25,6 por su
   propio interlineado, asi que el paso salia 37,6. En el artefacto la
   separacion es 3,84 sobre 1024, o sea 4,8 a 1280, y el paso 29,8. Es el
   espaciado del pie que Daniel marco el 01-09-2026. */
.sf-pie__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sf-esp-1); }
.sf-pie__lista a { color: var(--sf-texto-inverso-suave); text-decoration: none; font-size: var(--sf-cuerpo-s); }
.sf-pie__lista a:hover { color: var(--sf-acento-inverso); text-decoration: underline; }
.sf-pie__lista--datos { color: var(--sf-texto-inverso-suave); font-size: var(--sf-cuerpo-s); line-height: var(--sf-cuerpo-s-alto); }

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

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

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

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

.sf-pie__pago .sf-icono { color: var(--sf-acento-inverso); }

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

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

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

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

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

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

/* El crédito del estudio se va al otro extremo de la línea de legales. Con
   `flex-wrap` en el contenedor, en pantallas donde no cabe baja solo y queda
   alineado a la izquierda con el resto, que es lo correcto: alineado a la
   derecha en una línea propia se lee como un dato suelto. */
/* El selector lleva el contenedor delante para ganarle a
   `.sf-pie__legales-interior p { margin: 0 }`, que tiene una clase y un elemento
   y por eso pisaba el `margin-left: auto`. Misma trampa que el ojal del bloque
   de Tenryu: se iguala la especificidad, no se sube con !important. */
.sf-pie__legales-interior .sf-pie__credito { margin: 0 0 0 auto; }
.sf-pie__credito a { color: var(--sf-texto-inverso-suave); text-decoration: none; }
.sf-pie__credito a:hover { color: var(--sf-acento-inverso); text-decoration: underline; }

@media (max-width: 899px) {
  .sf-pie__legales-interior .sf-pie__credito { margin-left: 0; }
}

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

.sf-whatsapp {
  position: fixed;
  right: var(--sf-esp-4);
  bottom: var(--sf-esp-4);
  z-index: 50;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sf-radio-redondo);
  /* Verde de WhatsApp, no el azul del sitio: punto 12 del correo del 03-09.
     El glifo de adentro se queda blanco y en trazo, que es como WhatsApp
     dibuja su propio boton. Meterle el logotipo completo aca pintaria un
     circulo verde dentro de otro circulo verde. */
  background: var(--sf-red-whatsapp);
  color: var(--sf-accion-inversa);
  box-shadow: var(--sf-sombra-3);
}

.sf-whatsapp:hover { background: var(--sf-red-whatsapp-hover); color: var(--sf-accion-inversa); }

/* En la ficha de producto sube para no taparse con la barra de compra fija. */
@media (max-width: 899px) {
  .single-product .sf-whatsapp { bottom: calc(var(--sf-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. */
.sf-favorito {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sf-esp-2);
  border: 1px solid var(--sf-borde-sutil);
  background: var(--sf-superficie-base);
  color: var(--sf-texto-secundario);
  cursor: pointer;
  padding: 0;
  transition: color .15s ease, border-color .15s ease;
}

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

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

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

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

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

/* En la tarjeta, solo el icono. */
.sf-favorito--icono {
  position: absolute;
  top: var(--sf-esp-2);
  right: var(--sf-esp-2);
  width: var(--sf-boton-s);
  height: var(--sf-boton-s);
  z-index: 2;
}

.sf-favorito--icono .sf-favorito__texto { display: none; }

/* En el teléfono sube a la zona táctil del sistema. En escritorio 40px sobre la
   foto ya es holgado para un puntero, pero un dedo pide más. */
@media (max-width: 899px) {
  .sf-favorito--icono {
    width: var(--sf-alto-tactil);
    height: var(--sf-alto-tactil);
  }
}

.sf-producto { position: relative; }

/* En la ficha hay espacio y conviene decir qué hace: compite con «Añadir al
   carrito» y un corazón suelto no se entiende como «guardar para después». */
.sf-favorito--texto {
  width: 100%;
  min-height: var(--sf-boton-m);
  padding-inline: var(--sf-esp-4);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-s);
  font-weight: 600;
  color: var(--sf-accion-primaria);
  border-color: var(--sf-accion-primaria);
}

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

.sf-ficha__guardar { margin-top: var(--sf-esp-3); }

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

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