/** Shopify CDN: Minification failed

Line 1216:10 Expected identifier but found "%"
Line 1217:44 Unexpected "<"
Line 1222:1 Expected identifier but found "%"
Line 1223:0 Unexpected "{"
Line 1223:1 Expected identifier but found "%"

**/
/* ===========================================================================
   Natfy — hoja de estilo del tema
   ---------------------------------------------------------------------------
   Los valores salen de diseno/design_handoff_tema_natfy/README.md y de
   design.md. No hay tema debajo: aqui no se redefine nada de nadie, se define.

   RAIZ AL 62,5 %: 1rem = 10 px, asi que los numeros del traspaso de diseno se
   escriben tal cual (15 px -> 1.5rem). Es un porcentaje, no un valor fijo, asi
   que sigue escalando con la preferencia de cuerpo del navegador.

   Sin modo oscuro. Natfy es una tienda de papel; una version oscura seria otra
   tienda. Sin radios de esquina y sin sombras, salvo las dos que el traspaso
   autoriza: el panel de filtros movil y el megamenu.
   ======================================================================== */

/* --- 1. Reinicio ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta-85);
  font-family: var(--texto);
  font-size: var(--cuerpo);
  line-height: var(--cuerpo-alto);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-inline-size: 100%; }
img { block-size: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* El foco se ve siempre, y se ve en turquesa: es el unico sitio del tema donde
   el acento aparece sin pedir permiso, porque no verlo es una barrera. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* --- 2. Tokens --------------------------------------------------------- */

:root {
  /* --- Color -------------------------------------------------------------
     Valores del prototipo `Laboratorio Natfy.dc.html`, tal cual.

     OJO, esto es una decisión tomada en contra de dos documentos: el README del
     propio handoff dice «media fidelidad en identidad visual, sustituye los
     tokens por los reales del sistema», y CLAUDE.md fija papel crudo, turquesa
     y radio 0. Manuel pidió el 9/09/2026 que lo visual fuese al milímetro con
     el template. Se revierte cambiando solo este bloque.
     -------------------------------------------------------------------- */

  --acento: #00A651;          /* acciones primarias, barras de progreso */
  --acento-oscuro: #00873F;   /* hover del botón, enlaces */
  --acento-hondo: #00693A;    /* texto sobre fondos verdes claros */
  --acento-tinte: #F1F9F4;    /* fondo de avisos positivos y pastillas */
  --acento-linea: #CFE8D9;    /* borde de esos bloques */

  --tinta: #0B0F0D;           /* texto principal, acciones secundarias */
  --tinta-85: #2A322C;        /* cuerpo de texto */
  --tinta-70: #3C453E;        /* texto secundario */
  --tinta-60: #5C6660;        /* metadatos, etiquetas */
  --tinta-45: #8A948D;        /* secundario sobre fondo oscuro */
  --tinta-30: #A8B0A9;

  --blanco: #FFFFFF;          /* tarjetas y zona de compra */
  --papel: #FBFCFA;           /* fondo de secciones de contenido */
  --papel-denso: #F1F9F4;
  --filete-fuerte: #E3E7E3;   /* bordes de 1 px */
  --filete: #E3E7E3;
  --filete-tenue: #EFF1EE;    /* separadores internos */

  --aviso: #C2410C;           /* agotado, incidencias */
  --aviso-tinte: #FDF1EB;
  --stock-bajo: #8A6D1F;      /* «últimas unidades» */
  --agotado: #C2410C;
  --acento-12: #F1F9F4;

  /* --- Tipografía ---------------------------------------------------------
     Titulares Archivo 600/700/800, texto IBM Plex Sans, etiquetas y datos en
     IBM Plex Mono. Las sirve Shopify desde su CDN, no Google Fonts.
     -------------------------------------------------------------------- */
  --display: var(--display-tema, Archivo), "Archivo respaldo", "Helvetica Neue", Arial, sans-serif;
  --texto: var(--texto-tema, "IBM Plex Sans"), "Plex respaldo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: var(--mono-tema, "IBM Plex Mono"), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --cuerpo: 1.55rem;
  --cuerpo-alto: 1.64;
  --coleccion: 1.4rem;
  --blog: 1.6rem;
  --blog-alto: 1.68;

  /* --- Radios -------------------------------------------------------------
     Cinco escalones, del prototipo. No hay ninguno más: un radio suelto que no
     esté en esta lista es un despiste.
     -------------------------------------------------------------------- */
  --r-etiqueta: 5px;   /* pastillas de etiqueta */
  --r-ctrl: 9px;       /* controles pequeños */
  --r-boton: 12px;     /* botones y campos */
  --r-caja: 16px;      /* tarjetas y contenedores */
  --r-pastilla: 999px; /* pastillas de sabor y de filtro */

  /* --- Rejilla ----------------------------------------------------------- */
  --ancho: 144rem;
  --medida: 74ch;
  --lateral: 1.8rem;   /* móvil; en pantalla grande sube, ver más abajo */
  --calle: 1.2rem;
  --canal: 1.8rem;
  --columna-filtros: 23.2rem;
  --tactil: 4.4rem;

  /* Solo dos sombras en toda la tienda. Las tarjetas se apoyan en bordes de
     1 px, no en sombras. */
  --sombra-menu: 0 12px 32px rgba(11, 15, 13, 0.06);
  --sombra-panel: 0 -6px 20px rgba(11, 15, 13, 0.06);
}

/* El prototipo usa 18 px de margen lateral, pero su maqueta vive DENTRO de un
   contenedor del laboratorio, no a pantalla completa. Aplicado tal cual a un
   escaparate de 1440, el contenido queda pegado a los dos bordes. En pantalla
   grande sube a los 32 px que pedía el traspaso de diseño de Natfy. */
@media screen and (min-width: 1000px) {
  :root { --lateral: 3.2rem; --calle: 2rem; --canal: 2.4rem; }
}

@media screen and (max-width: 749px) {
  :root {
    --lateral: 1.6rem;
    --calle: 1.4rem;
    --blog: 1.65rem;
    --blog-alto: 1.7;
  }
}

/* --- 3. Tipografia base ------------------------------------------------ */

/* Archivo 800 en titulares, con el tracking negativo del prototipo: a estos
   cuerpos y con esta anchura de letra, sin apretar se ve suelto. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  color: var(--tinta);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: 3.8rem; line-height: 1.06; letter-spacing: -0.035em; }
h2 { font-size: 2.2rem; line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.01em; }

@media screen and (max-width: 749px) {
  h1 { font-size: 2.8rem; }
  h2 { font-size: 2rem; }
}

p { margin: 0; }

a { color: inherit; }

/* Etiquetas y datos en monoespaciada: es lo que distingue en el prototipo un
   rótulo de estructura de un texto que se lee. */
.n-rotulo {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-60);
}

.n-medida { max-inline-size: var(--medida); }

.n-mono {
  font-family: var(--mono);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

/* Solo para lectores de pantalla. Lo usan el salto al contenido, las leyendas
   de las regiones y los rotulos que la maqueta resuelve visualmente. */
.n-oculto {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.n-saltar {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--lateral);
  z-index: 100;
  padding: 1rem 1.6rem;
  background: var(--tinta);
  color: var(--papel);
  font-size: 1.3rem;
}
.n-saltar:focus { inset-block-start: 1rem; }

/* --- 4. Rejilla -------------------------------------------------------- */

.n-env {
  max-inline-size: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--lateral);
}

.n-zona { padding-block: 4.8rem; }
.n-zona--fina { padding-block: 3.2rem; }

.n-zona__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem 2.4rem;
  margin-block-end: 2.4rem;
}

.n-mas {
  font-size: 1.3rem;
  color: var(--acento);
  text-decoration: none;
}
.n-mas:hover { text-decoration: underline; text-underline-offset: 0.3em; }

/* --- 5. Botones y campos ----------------------------------------------- */

.n-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-block-size: var(--tactil);
  padding: 0 2.4rem;
  border: 1px solid var(--acento);
  border-radius: var(--r-boton);
  background: var(--acento);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.n-boton:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.n-boton[disabled],
.n-boton[aria-disabled="true"] {
  background: var(--filete-fuerte);
  border-color: var(--filete-fuerte);
  color: var(--tinta-60);
  cursor: not-allowed;
}

.n-boton--secundario {
  background: transparent;
  border-color: var(--tinta);
  color: var(--tinta);
}
.n-boton--secundario:hover { background: var(--acento-tinte); border-color: var(--tinta); }

.n-campo {
  inline-size: 100%;
  min-block-size: 4.4rem;
  padding: 0 1.4rem;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--r-boton);
  background: var(--blanco);
  color: var(--tinta);
  font-size: 1.4rem;
  -webkit-appearance: none;
  appearance: none;
}
.n-campo::placeholder { color: var(--tinta-45); }

.n-select {
  padding-inline-end: 3.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-60) 50%),
                    linear-gradient(135deg, var(--tinta-60) 50%, transparent 50%);
  background-position: right 1.4rem center, right 0.9rem center;
  background-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
  background-repeat: no-repeat;
}

/* --- 6. Cabecera ------------------------------------------------------- */

.n-cab { border-block-end: 1px solid var(--filete); background: var(--papel); }

.n-aviso {
  background: var(--papel-denso);
  font-size: 1.2rem;
  color: var(--tinta-60);
}
.n-aviso__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3.4rem;
  text-align: center;
}

.n-marca-fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2.4rem;
  min-block-size: 7.2rem;
}

/* El logotipo es texto: Inter 300 en versalitas muy abiertas, turquesa. Es la
   unica pieza de marca que existe hoy, y un texto bien puesto es mejor que un
   recuadro esperando un SVG. */
.n-logo {
  font-family: var(--texto);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--acento);
  text-decoration: none;
  white-space: nowrap;
}
.n-logo img { max-block-size: 3.2rem; inline-size: auto; }

/* El buscador esta SIEMPRE a la vista, no detras de una lupa: es la via
   principal de un catalogo de 461 fichas para un publico que sabe lo que
   busca y lo escribe. */
.n-buscar { position: relative; max-inline-size: 52rem; margin-inline: auto; inline-size: 100%; }
.n-buscar__campo { min-block-size: 4.2rem; padding-inline-end: 4.8rem; }
.n-buscar__boton {
  position: absolute;
  inset-block: 1px;
  inset-inline-end: 1px;
  inline-size: 4.4rem;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--tinta-60);
}
.n-buscar__boton:hover { color: var(--tinta); }

.n-cuenta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.n-cuenta__enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-block-size: var(--tactil);
  padding-inline: 1rem;
  font-size: 1.3rem;
  text-decoration: none;
  color: var(--tinta);
}
.n-cuenta__enlace:hover { color: var(--acento); }
.n-cesta__cuenta { font-variant-numeric: tabular-nums; }

/* Fila de navegacion. La pestana activa lleva filete inferior turquesa de 2 px
   y nada mas: ni fondo, ni negrita, que a este cuerpo se leen como ruido. */
.n-nav { border-block-start: 1px solid var(--filete); }
/* `padding-block` y NO `padding`. La lista lleva también la clase `.n-env`, que
   es la que pone el margen lateral de la tienda, y un `padding: 0` aquí lo
   borraba: la navegación empezaba pegada al borde izquierdo mientras el
   logotipo de arriba estaba metido. Es la trampa de escribir una propiedad
   corta encima de una larga que puso otra regla. */
.n-nav__lista {
  display: flex;
  align-items: stretch;
  gap: 2.4rem;
  margin: 0;
  padding-block: 0;
  list-style: none;
  min-block-size: 5rem;
}
.n-nav__enlace {
  display: inline-flex;
  align-items: center;
  min-block-size: 5rem;
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--tinta);
  border-block-end: 2px solid transparent;
}
.n-nav__enlace:hover { border-block-end-color: var(--filete-fuerte); }
.n-nav__item[aria-current="page"] > .n-nav__enlace,
.n-nav__enlace[aria-current="page"] { border-block-end-color: var(--acento); }

/* Megamenu. Cuatro columnas de necesidades ordenadas por recuento y una
   destacada de 300 px. Se abre con hover y con foco, y se cierra con Esc. */
.n-nav__item { position: relative; }
.n-mega {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 100%;
  z-index: 40;
  display: none;
  inline-size: min(112rem, calc(100vw - var(--lateral) * 2));
  padding: 2.4rem;
  background: var(--papel);
  border: 1px solid var(--filete);
  box-shadow: var(--sombra-menu);
}
.n-nav__item:hover > .n-mega,
.n-nav__item:focus-within > .n-mega { display: grid; }
.n-mega {
  grid-template-columns: repeat(4, minmax(0, 1fr)) 30rem;
  gap: 2.4rem 3.2rem;
}
.n-mega__col { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; align-content: start; }
.n-mega__enlace {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding-block: 0.6rem;
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--tinta-85);
}
.n-mega__enlace:hover { color: var(--tinta); }
.n-mega__cuenta { font-size: 1.2rem; color: var(--tinta-45); font-variant-numeric: tabular-nums; }
.n-mega__destacada { border-inline-start: 1px solid var(--filete); padding-inline-start: 2.4rem; }

@media screen and (max-width: 989px) {
  .n-nav, .n-mega { display: none; }

  /* Dos filas: menu, logotipo y cuenta arriba; el buscador entero debajo.
     En una fila sola, los tres bloques suman 660 px sobre un ancho de 375 y el
     buscador se quedaba en un tercio, que es tanto como esconderlo. Y el
     buscador es la via principal de entrada al catalogo. */
  .n-marca-fila {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "menu logo cuenta" "buscar buscar buscar";
    gap: 0.8rem 1.2rem;
    padding-block: 0.8rem;
  }
  .n-marca-fila > *:first-child { grid-area: menu; }
  .n-buscar { grid-area: buscar; margin-block-end: 1rem; max-inline-size: none; }
  .n-cuenta { grid-area: cuenta; }
}

@media screen and (max-width: 749px) {
  /* El logotipo baja a 13 px con menos apertura: a 20 px y .44em ocupaba 108 px
     de los 375 que hay, y empujaba la cesta fuera de la fila. */
  .n-logo { font-size: 1.3rem; letter-spacing: 0.3em; }
  .n-cuenta__enlace { padding-inline: 0.6rem; font-size: 1.2rem; }


  .n-migas { font-size: 1.1rem; }
  .n-migas ol { gap: 0.2rem 0.6rem; }
}

.n-hamburguesa {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--tactil);
  block-size: var(--tactil);
  border: 0;
  background: transparent;
  color: var(--tinta);
}
@media screen and (max-width: 989px) { .n-hamburguesa { display: inline-flex; } }

/* Menu movil: panel completo, acordeon de un solo nivel, filas de 51 px. */
.n-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--papel);
}
.n-panel[hidden] { display: none; }
.n-panel__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.2rem var(--lateral);
  border-block-end: 1px solid var(--filete);
}
.n-panel__cuerpo { overflow-y: auto; padding: 0 var(--lateral) 3.2rem; }
.n-panel__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  inline-size: 100%;
  min-block-size: 5.1rem;
  padding: 0;
  border: 0;
  border-block-end: 1px solid var(--filete-tenue);
  background: transparent;
  font-size: 1.5rem;
  text-align: start;
  text-decoration: none;
  color: var(--tinta);
}
.n-panel__sub { margin: 0; padding: 0 0 1.2rem 1.6rem; list-style: none; }
.n-panel__sub .n-panel__fila { min-block-size: 4.4rem; font-size: 1.4rem; color: var(--tinta-85); }

/* --- 7. Pie ------------------------------------------------------------ */

.n-pie {
  margin-block-start: 6.4rem;
  background: var(--papel-denso);
  border-block-start: 1px solid var(--filete);
}
.n-pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 3.2rem 4rem;
  padding-block: 4.8rem;
}
@media screen and (max-width: 989px) {
  .n-pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 599px) {
  .n-pie__rejilla { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
}
.n-pie__lista { margin: 0.8rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; }
.n-pie__lista a {
  display: inline-block;
  padding-block: 0.5rem;
  font-size: 1.4rem;
  color: var(--tinta-85);
  text-decoration: none;
}
.n-pie__lista a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 0.3em; }

.n-suscribe { display: flex; gap: 0.8rem; margin-block-start: 1.2rem; max-inline-size: 36rem; }
.n-suscribe .n-campo { background: var(--blanco); }

.n-pie__cierre {
  padding-block: 2.4rem;
  border-block-start: 1px solid var(--filete);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 3.2rem;
  justify-content: space-between;
  align-items: start;
}
/* La advertencia general de complementos alimenticios va en TODAS las paginas.
   Es la unica frase de salud que se puede escribir sin declaracion autorizada,
   y no se maqueta como aviso de error: es texto legal, no una alarma. */
.n-pie__legal {
  max-inline-size: 64ch;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--tinta-60);
}
.n-pie__copy { font-size: 1.25rem; color: var(--tinta-45); }

/* --- 8. Tarjeta de producto y rejilla ---------------------------------- */

.n-rejilla {
  display: grid;
  grid-template-columns: repeat(var(--columnas, 4), minmax(0, 1fr));
  gap: var(--canal) var(--calle);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 1199px) { .n-rejilla { --columnas: 3; } }
@media screen and (max-width: 899px)  { .n-rejilla { --columnas: 2; } }

.n-tarjeta { display: grid; gap: 0.8rem; align-content: start; }

.n-tarjeta__foto {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--blanco);
  border: 1px solid var(--filete-tenue);
  overflow: hidden;
}
.n-tarjeta__foto img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  padding: 1.2rem;
}
.n-tarjeta__hueco {
  display: grid;
  place-items: center;
  block-size: 100%;
  font-size: 1.1rem;
  color: var(--tinta-30);
}

.n-tarjeta__marca {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-45);
}

.n-tarjeta__titulo { font-size: 0; margin: 0; }
.n-tarjeta__enlace {
  font-family: var(--texto);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--tinta);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.n-tarjeta__enlace:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* El formato en linea propia, separado por filete superior. En una rejilla de
   cuatro columnas eso crea una columna vertical de formatos que el ojo compara
   de un solo barrido: es la comparacion que de verdad se hace al elegir. */
.n-tarjeta__formato {
  padding-block-start: 0.6rem;
  border-block-start: 1px solid var(--filete-tenue);
  font-size: 1.2rem;
  color: var(--tinta-60);
}

.n-tarjeta__precio { font-size: 1.6rem; font-weight: 500; color: var(--tinta); }
.n-tarjeta__precio del { color: var(--tinta-45); font-weight: 400; margin-inline-end: 0.6rem; }

.n-disponible {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.3rem;
  color: var(--tinta-60);
}
.n-disponible::before {
  content: "";
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
  background: var(--acento);
  flex: none;
}
.n-disponible--agotado::before { background: var(--agotado); }

/* --- 9. Coleccion ------------------------------------------------------ */

.n-col-cab { padding-block: 3.2rem 2.4rem; }
.n-col-cab__texto { max-inline-size: var(--medida); margin-block-start: 1.2rem; color: var(--tinta-85); }

/* Tira de subcategorias: circulos con foto real de producto, nunca icono ni
   ilustracion. Sin imagen de coleccion, el respaldo es la foto del primer
   producto, que es una foto real igualmente. */
.n-tira {
  display: flex;
  gap: 2rem;
  margin: 0 0 2.4rem;
  padding: 0 0 0.8rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.n-tira__enlace {
  display: grid;
  gap: 0.8rem;
  inline-size: 10rem;
  text-align: center;
  text-decoration: none;
  color: var(--tinta-85);
  font-size: 1.2rem;
  line-height: 1.3;
}
.n-tira__foto {
  inline-size: 10rem;
  block-size: 10rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--filete-tenue);
}
.n-tira__foto img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.n-tira__enlace:hover { color: var(--tinta); }

.n-col-cuerpo {
  display: grid;
  grid-template-columns: var(--columna-filtros) minmax(0, 1fr);
  gap: 3.2rem;
  align-items: start;
}
@media screen and (max-width: 989px) {
  .n-col-cuerpo { grid-template-columns: minmax(0, 1fr); }
}

.n-filtros { display: grid; gap: 2.4rem; align-content: start; }
.n-filtros__grupo { border-block-start: 1px solid var(--filete); padding-block-start: 1.2rem; }
.n-filtros__grupo:first-child { border-block-start: 0; padding-block-start: 0; }
.n-filtros__lista { margin: 0.8rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; }
.n-filtros__fila {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-block: 0.5rem;
  font-size: 1.3rem;
  color: var(--tinta-85);
  text-decoration: none;
}
.n-filtros__fila:hover { color: var(--tinta); }
.n-filtros__cuenta { margin-inline-start: auto; color: var(--tinta-45); font-variant-numeric: tabular-nums; }

.n-pildoras { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.n-pildora {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-block-size: 3.4rem;
  padding-inline: 1.2rem;
  border: 1px solid var(--filete-fuerte);
  font-size: 1.3rem;
  color: var(--tinta-85);
  text-decoration: none;
  background: var(--papel);
}
.n-pildora:hover { border-color: var(--tinta); color: var(--tinta); }
.n-pildora--activa { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }

.n-col-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-block-end: 1.6rem;
  margin-block-end: 2.4rem;
  border-block-end: 1px solid var(--filete);
  font-size: 1.3rem;
  color: var(--tinta-60);
}

/* En movil NUNCA una columna de filtros truncada: barra fija de 50 px y panel
   deslizante desde la derecha que deja 22 px de pagina a la vista, para que se
   vea que la pagina sigue ahi debajo. */
.n-barra-movil { display: none; }
@media screen and (max-width: 989px) {
  .n-barra-movil {
    position: sticky;
    inset-block-start: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--filete);
    border-block: 1px solid var(--filete);
    margin-block-end: 2.4rem;
  }
  .n-barra-movil button {
    min-block-size: 5rem;
    border: 0;
    background: var(--papel);
    font-size: 1.4rem;
    color: var(--tinta);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
  }
  .n-barra-movil .n-cuenta-filtros { color: var(--acento); font-variant-numeric: tabular-nums; }

  /* CERRADO POR DEFECTO, y con `display` y no con `hidden`.
     Con `hidden` había que ponérselo desde javascript al cargar, y hasta que
     el script se ejecutaba el panel tapaba la colección entera. Así el estado
     de reposo lo decide el CSS y no hay parpadeo. */
  .n-filtros {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 60;
    inline-size: calc(100% - 2.2rem);
    padding: 1.6rem;
    background: var(--blanco);
    box-shadow: var(--sombra-panel);
    overflow-y: auto;
    display: none;
  }
  .n-filtros[data-abierto] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  .n-filtros__cerrar { position: sticky; inset-block-end: 0; background: var(--papel); padding-block-start: 1.2rem; }
  .n-filtros__cerrar .n-boton { inline-size: 100%; min-block-size: 5rem; }
}

.n-velo {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(42, 39, 35, 0.35);
}
.n-velo[hidden] { display: none; }

.n-paginacion {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-block-start: 4.8rem;
  padding: 0;
  list-style: none;
}
.n-paginacion a, .n-paginacion span {
  display: inline-grid;
  place-items: center;
  min-inline-size: 4rem;
  min-block-size: 4rem;
  padding-inline: 0.8rem;
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--tinta-85);
  border: 1px solid transparent;
}
.n-paginacion a:hover { border-color: var(--filete-fuerte); }
.n-paginacion [aria-current="page"] { border-color: var(--tinta); color: var(--tinta); }

.n-vacio { max-inline-size: var(--medida); display: grid; gap: 1.6rem; padding-block: 4.8rem; }

/* --- 10. Ficha de producto -------------------------------------------- */

.n-ficha {
  display: grid;
  grid-template-columns: minmax(0, 64rem) minmax(0, 1fr);
  gap: 4.8rem;
  align-items: start;
  padding-block: 3.2rem;
}
@media screen and (max-width: 989px) {
  .n-ficha { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
}

/* Galeria con la tira de miniaturas AL LADO, no debajo.

   Es el patron del Figma de masmusculo (UI 2026) y se trae por usabilidad, no
   por estetica: debajo, la tira empuja toda la columna de compra por debajo del
   pliegue en un portatil de 768 px de alto, y con cinco fotos eso son 90 px que
   se le quitan al precio y al boton. Al lado no cuesta nada de alto.

   Las flechas sobre la foto grande son del mismo sitio y por el mismo motivo:
   pasar fotos sin tener que apuntar a una miniatura de 72 px. */
.n-galeria {
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}
/* Sin tira de miniaturas, una sola columna. Si no, la foto cae en el carril de
   72 px que la tira habria ocupado. */
.n-galeria--sola { grid-template-columns: minmax(0, 1fr); }

@media screen and (max-width: 749px) {
  /* En movil la tira vuelve abajo: 72 px de ancho en una pantalla de 390 son un
     18 % del ancho robado a la foto, que es lo que se mira. */
  .n-galeria { grid-template-columns: minmax(0, 1fr); }
  .n-galeria__tiras { order: 2; }
  .n-galeria__principal { order: 1; }
}

.n-galeria__principal {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--blanco);
  border: 1px solid var(--filete-tenue);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.n-galeria__principal img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 2.4rem; }

.n-galeria__flecha {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 4rem;
  block-size: 4rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--filete-fuerte);
  background: var(--papel);
  color: var(--tinta);
}
.n-galeria__flecha:hover { border-color: var(--tinta); }
.n-galeria__flecha--antes { inset-inline-start: 1.2rem; }
.n-galeria__flecha--despues { inset-inline-end: 1.2rem; }

.n-galeria__tiras {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 749px) {
  .n-galeria__tiras { grid-auto-flow: column; grid-auto-columns: 7.2rem; overflow-x: auto; }
}
.n-galeria__tira {
  inline-size: 7.2rem;
  block-size: 7.2rem;
  border: 1px solid var(--filete-tenue);
  background: var(--blanco);
  padding: 0.4rem;
}
.n-galeria__tira[aria-current="true"] { border-color: var(--tinta); }
.n-galeria__tira img { inline-size: 100%; block-size: 100%; object-fit: contain; }

/* Fila de confianza: envio, plazo, devolucion y pago, con los datos REALES de
   la tienda -las tarifas configuradas y la politica publicada-, nunca sellos
   genericos. Lo pidio Idento el 19 de agosto. Va justo bajo el boton, que es el
   patron del Figma y ademas donde se hacen las preguntas que responde. */
.n-confianza {
  list-style: none;
  margin: 0;
  padding: 1.4rem 0 0;
  display: grid;
  gap: 0.9rem;
  border-block-start: 1px solid var(--filete);
}
.n-confianza li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--tinta-85);
}
.n-confianza svg { color: var(--tinta-45); margin-block-start: 0.1rem; }
.n-confianza strong { font-weight: 500; color: var(--tinta); }
.n-confianza a { color: var(--acento); }

/* La espina dorsal de la columna derecha no cambia nunca de orden, tenga la
   ficha muchos datos o poquisimos: marca, titulo, formato, precio,
   disponibilidad, variantes, compra, datos verificables, declaracion. */
.n-espina { display: grid; gap: 1.6rem; align-content: start; }
.n-espina__marca { font-size: 1.2rem; letter-spacing: 0.14em; text-transform: uppercase; }
.n-espina__marca a { color: var(--tinta-60); text-decoration: none; }
.n-espina__marca a:hover { color: var(--tinta); }
.n-espina__titulo { font-size: 3.4rem; line-height: 1.2; letter-spacing: -0.01em; }
@media screen and (max-width: 749px) { .n-espina__titulo { font-size: 2.5rem; } }
.n-espina__formato { font-size: 1.4rem; color: var(--tinta-60); }
.n-espina__precio { font-size: 2.8rem; font-weight: 500; color: var(--tinta); }
.n-espina__precio del { font-size: 1.8rem; color: var(--tinta-45); font-weight: 400; margin-inline-end: 0.8rem; }
.n-espina__impuesto { font-size: 1.2rem; color: var(--tinta-45); }

.n-opcion { display: grid; gap: 0.8rem; }
.n-opcion__nombre { font-size: 1.2rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-60); }
.n-opcion__valores { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.n-opcion__valor {
  display: inline-flex;
  align-items: center;
  min-block-size: 4.2rem;
  padding-inline: 1.4rem;
  border: 1px solid var(--filete-fuerte);
  background: var(--papel);
  font-size: 1.4rem;
  color: var(--tinta-85);
}
.n-opcion__radio { position: absolute; opacity: 0; pointer-events: none; }
.n-opcion__radio:checked + .n-opcion__valor { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
.n-opcion__radio:focus-visible + .n-opcion__valor { outline: 2px solid var(--acento); outline-offset: 2px; }
/* Una combinacion que no existe no se esconde: se ensena tachada. Esconderla
   deja al cliente sin saber por que desaparecio el sabor que buscaba. */
.n-opcion__radio:disabled + .n-opcion__valor {
  color: var(--tinta-30);
  border-color: var(--filete-tenue);
  text-decoration: line-through;
}

.n-compra { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: stretch; }
.n-cantidad {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--filete-fuerte);
}
.n-cantidad button {
  inline-size: var(--tactil);
  border: 0;
  background: transparent;
  font-size: 1.8rem;
  color: var(--tinta-60);
}
.n-cantidad button:hover { color: var(--tinta); }
.n-cantidad input {
  inline-size: 5rem;
  border: 0;
  text-align: center;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  background: transparent;
  -moz-appearance: textfield;
}
.n-cantidad input::-webkit-outer-spin-button,
.n-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.n-compra .n-boton { flex: 1 1 22rem; }

/* Datos verificables. La confianza no la da que el dato este, la da que se
   pueda comprobar FUERA de la tienda: por eso el EAN se puede copiar y va en
   monoespaciada, que es como se lee una cifra que se va a cotejar. */
.n-verificables {
  border-block: 1px solid var(--filete);
  padding-block: 1.6rem;
  margin: 0;
  display: grid;
  gap: 0.2rem;
}
.n-verificables__par {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 1.2rem;
  padding-block: 0.5rem;
  font-size: 1.4rem;
}
.n-verificables dt { color: var(--tinta-60); }
.n-verificables dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }
.n-copiar {
  border: 0;
  background: transparent;
  padding: 0 0 0 0.8rem;
  font-size: 1.2rem;
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Declaracion autorizada del Reglamento (UE) 432/2012. Cita literal, y se
   maqueta como cita: sin icono, sin ambar, sin role="alert". Va ANTES de la
   descripcion porque es lo unico regulado que se puede decir. */
.n-declaracion {
  margin: 0;
  padding: 1.8rem 2rem;
  background: var(--papel-denso);
  border-block-start: 2px solid var(--acento);
  max-inline-size: var(--medida);
}
.n-declaracion blockquote {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.9rem;
  line-height: 1.5;
  color: var(--tinta);
}
.n-declaracion blockquote::before { content: "\00ab"; }
.n-declaracion blockquote::after { content: "\00bb"; }
.n-declaracion figcaption { margin-block-start: 0.8rem; }
.n-declaracion cite { font-style: normal; }
@media screen and (max-width: 749px) { .n-declaracion blockquote { font-size: 1.7rem; } }

.n-bajo-pliegue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4.8rem;
  padding-block: 4.8rem;
  border-block-start: 1px solid var(--filete);
}
@media screen and (max-width: 989px) {
  .n-bajo-pliegue { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }
}

.n-rte { max-inline-size: var(--medida); color: var(--tinta-85); }
.n-rte > * + * { margin-block-start: 1.4rem; }
.n-rte h2 { font-size: 2.2rem; margin-block-start: 3.2rem; }
.n-rte h3 { font-size: 1.8rem; margin-block-start: 2.4rem; }
.n-rte ul, .n-rte ol { padding-inline-start: 2.2rem; }
.n-rte li + li { margin-block-start: 0.6rem; }
.n-rte a { color: var(--acento); }
.n-rte table { border-collapse: collapse; inline-size: 100%; font-size: 1.4rem; }
.n-rte th, .n-rte td { text-align: left; padding: 0.7rem 1.2rem 0.7rem 0; border-block-end: 1px solid var(--filete-tenue); }
.n-rte sup { font-size: 0.7em; }

/* Acordeones nativos: sin JavaScript, accesibles de serie y buscables con la
   busqueda del navegador cuando el navegador lo soporta. */
.n-acordeon { max-inline-size: var(--medida); }
.n-acordeon__item { border-block-end: 1px solid var(--filete); }
.n-acordeon__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-block: 1.4rem;
  cursor: pointer;
  list-style: none;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--tinta);
}
.n-acordeon__item > summary::-webkit-details-marker { display: none; }
.n-acordeon__item > summary::after {
  content: "";
  inline-size: 0.9rem;
  block-size: 0.9rem;
  flex: none;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.15em, -0.15em);
  transition: transform 150ms ease;
}
.n-acordeon__item[open] > summary::after { transform: rotate(-135deg) translate(-0.1em, -0.1em); }
.n-acordeon__cuerpo { padding-block-end: 1.6rem; color: var(--tinta-85); }

/* Barra de compra persistente en movil: 48 px con precio y variante. */
.n-barra-compra { display: none; }
@media screen and (max-width: 749px) {
  .n-barra-compra {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-block-size: 4.8rem;
    padding: 0.4rem var(--lateral);
    background: var(--papel);
    border-block-start: 1px solid var(--filete-fuerte);
  }
  .n-barra-compra__dato { display: grid; min-inline-size: 0; }
  .n-barra-compra__precio { font-size: 1.6rem; font-weight: 500; color: var(--tinta); }
  .n-barra-compra__variante { font-size: 1.1rem; color: var(--tinta-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .n-barra-compra .n-boton { margin-inline-start: auto; min-block-size: 4rem; padding-inline: 1.6rem; }
  body { padding-block-end: 5.6rem; }
}

/* --- 11. Migas de pan --------------------------------------------------- */

/* Visibles, no solo en el marcado. La miga es la unica navegacion lateral que
   tiene una ficha, y en un catalogo con 15 necesidades y 37 ingredientes es lo
   que evita que la unica salida sea el boton de atras. */
.n-migas { padding-block: 1.6rem 0; font-size: 1.2rem; color: var(--tinta-45); }
.n-migas ol { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; margin: 0; padding: 0; list-style: none; }
.n-migas li { display: inline-flex; align-items: center; gap: 0.8rem; }
.n-migas li + li::before { content: "/"; color: var(--filete-fuerte); }
.n-migas a { color: var(--tinta-60); text-decoration: none; }
.n-migas a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 0.25em; }

/* --- 12. Estabilidad de maqueta (CLS) ----------------------------------- */

/* NO se pone `img[width][height] { block-size: auto }`, aunque sea el truco
   habitual para conservar la proporción.

   `img[width][height]` tiene DOS atributos, o sea especificidad 0,2,1, y gana a
   `.n-baldosa img` o `.n-tarjeta__foto img`, que son 0,1,1. El resultado era una
   foto de 668 px de alto dentro de una baldosa de 459, saliéndose de su caja
   redondeada, y lo mismo en todos los contenedores con `object-fit`.

   No hace falta: los atributos `width` y `height` del HTML ya le dan al
   navegador la proporción para reservar el hueco, que es lo que evita el salto
   de maqueta. La regla sobraba y encima estorbaba. */

/* La franja de aviso reserva su alto aunque el texto tarde: es lo primero que
   se pinta y lo que mas facil desplaza a todo lo demas. */
.n-aviso__inner { min-block-size: 3.4rem; }

/* El respaldo de tipografia se ajusta al ancho de Inter y Lora para que el
   cambio de fuente no mueva el texto. Los numeros salen de comparar la metrica
   de cada par; sin esto, el salto en un titular de 40 px es visible. */
@font-face {
  font-family: "Plex respaldo";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo respaldo";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 97%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* --- 13. Ficha de etiquetado -------------------------------------------
   Mismas clases que la maquetacion de masmusculo (migracion/mm/snippets/):
   el marcado es identico en las dos tiendas y lo unico que cambia es esta
   hoja. Llevarlo alli es cambiar de hoja, no volver a maquetar.
   -------------------------------------------------------------------- */
 y no en {% style %} porque el primero se compila una
  vez en styles.css y el segundo escribe un <style> en el HTML cada vez que se
  renderiza el snippet. Funciona en snippets: lo hace ya natfy-tokens.liquid.

  Sin `prefers-color-scheme: dark`: Natfy es una tienda de papel y una ficha en
  modo oscuro se veria de otra tienda.
{%- endcomment -%}
{% stylesheet %}
.ficha-tecnica {
  margin-block-start: 3.2rem;
  padding-block-start: 2.4rem;
  border-block-start: 1px solid var(--filete, #E4E0D4);
  font-family: var(--texto);
  color: var(--tinta-85, #403C36);
}

.ficha-tecnica__origen {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-60, #6E6961);
}
.ficha-tecnica__envase { color: var(--tinta, #2A2723); }

.ficha-tecnica__titulo {
  margin: 0 0 1.6rem;
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 500;
  color: var(--tinta, #2A2723);
}

.ficha-tecnica__bloque {
  padding-block: 2rem;
  border-block-start: 1px solid var(--filete, #E4E0D4);
}
.ficha-tecnica__bloque:first-of-type { border-block-start: none; padding-block-start: 0; }

/* Los rotulos de bloque son etiqueta de seccion, no titular: Inter en
   versalitas. El unico serif de la ficha es el titulo, y la unica cursiva, la
   declaracion autorizada. */
.ficha-tecnica__bloque h3 {
  margin: 0 0 1rem;
  font-family: var(--texto);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-60, #6E6961);
}
/* Las advertencias son texto legal obligatorio: se distinguen subiendo el
   rotulo a tinta plena. Sin ambar, sin icono y sin caja de alarma. */
.ficha-tecnica__bloque--aviso h3 { color: var(--tinta, #2A2723); }

.ficha-tecnica__grupo {
  margin: 1.6rem 0 0.6rem;
  font-family: var(--texto);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--tinta, #2A2723);
}

.ficha-tecnica__bloque p {
  margin: 0 0 0.8rem;
  max-inline-size: var(--medida, 64ch);
  font-size: var(--cuerpo, 1.5rem);
  line-height: var(--cuerpo-alto, 1.55);
}
.ficha-tecnica__bloque p:last-child { margin-block-end: 0; }

/* La lista de ingredientes es un parrafo largo y denso, y es lo que mas se lee
   de la ficha. Se queda en la medida de lectura de la tienda. */
.ficha-tecnica__ingredientes { max-inline-size: var(--medida, 64ch); }

/* "Contiene" pesa mas que "puede contener", y se nota sin depender del color:
   el filete continuo frente al punteado lo distingue tambien en gris. */
.ficha-tecnica__alergenos {
  padding-inline-start: 1.2rem;
  border-inline-start: 2px solid var(--filete-fuerte, #DCD8CC);
}
.ficha-tecnica__alergenos--contiene {
  border-inline-start-color: var(--tinta, #2A2723);
  color: var(--tinta, #2A2723);
}
.ficha-tecnica__alergenos--trazas {
  border-inline-start-style: dotted;
  color: var(--tinta-60, #6E6961);
}
.ficha-tecnica__alergenos strong { font-weight: 500; }

/* Pares dato/valor: dosis, raciones, peso neto, operador alimentario. Misma
   rejilla que .natfy-datos de la seccion, para que las dos zonas de la pagina
   se lean como una sola. */
.ficha-tecnica__pauta {
  margin: 0 0 0.8rem;
  max-inline-size: var(--medida, 64ch);
}
.ficha-tecnica__pauta > div {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 0.9rem;
  padding-block: 0.6rem;
  border-block-end: 1px solid var(--filete-tenue, #EDE9DE);
}
.ficha-tecnica__pauta dt { font-size: 1.4rem; color: var(--tinta-60, #6E6961); }
.ficha-tecnica__pauta dd {
  margin: 0;
  font-size: 1.4rem;
  color: var(--tinta, #2A2723);
  overflow-wrap: anywhere;
}

/* Las tablas del corpus llegan a seis columnas -"por 100 g", "%IR", "por 28 g",
   "por 56 g"...- y en 390 px no caben. Scrollean dentro de su caja y nunca
   ensanchan la pagina. tabindex las hace alcanzables con el teclado. */
.ficha-tecnica__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block-end: 0.8rem;
}
.ficha-tecnica__scroll:focus-visible {
  outline: 2px solid var(--acento, #11B5CB);
  outline-offset: 2px;
}

.ficha-tecnica__tabla {
  border-collapse: collapse;
  inline-size: 100%;
  min-inline-size: 28rem;
  max-inline-size: 64rem;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}
.ficha-tecnica__tabla th,
.ficha-tecnica__tabla td {
  padding: 0.7rem 1.2rem 0.7rem 0;
  text-align: right;
  white-space: nowrap;
  border-block-end: 1px solid var(--filete-tenue, #EDE9DE);
}
.ficha-tecnica__tabla th:last-child,
.ficha-tecnica__tabla td:last-child { padding-inline-end: 0; }
/* El nombre de la fila es texto; el valor es dato. Se separan por familia, que
   es lo que hace comparable una columna de un solo barrido. */
.ficha-tecnica__tabla th[scope="row"] {
  text-align: left;
  font-weight: 400;
  white-space: normal;
  padding-inline-end: 2.4rem;
  color: var(--tinta-85, #403C36);
}
.ficha-tecnica__tabla td { font-family: var(--mono); color: var(--tinta, #2A2723); }
.ficha-tecnica__tabla thead th {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: normal;
  color: var(--tinta-60, #6E6961);
  border-block-end: 1px solid var(--filete-fuerte, #DCD8CC);
}
.ficha-tecnica__tabla tbody tr:last-child th,
.ficha-tecnica__tabla tbody tr:last-child td { border-block-end: none; }

.ficha-tecnica__mono { font-family: var(--mono); letter-spacing: 0.05em; }

/* Declaracion autorizada del Reglamento (UE) 432/2012: cita literal, y se
   maqueta como cita. Es el unico sitio de la ficha donde se gasta turquesa. */
.ficha-tecnica__declaracion {
  margin: 2rem 0;
  padding: 1.8rem 2rem;
  max-inline-size: var(--medida, 64ch);
  background: var(--papel-denso, #F4F1E8);
  border-block-start: 2px solid var(--acento, #11B5CB);
}
.ficha-tecnica__declaracion blockquote {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.9rem;
  line-height: 1.5;
  color: var(--tinta, #2A2723);
}
.ficha-tecnica__declaracion blockquote::before { content: "\00ab"; }
.ficha-tecnica__declaracion blockquote::after { content: "\00bb"; }
.ficha-tecnica__declaracion figcaption {
  margin-block-start: 0.8rem;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-60, #6E6961);
}
.ficha-tecnica__declaracion cite { font-style: normal; }

.ficha-tecnica__nota,
.ficha-tecnica__parcial {
  max-inline-size: var(--medida, 64ch);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--tinta-60, #6E6961);
}
.ficha-tecnica__nota { margin: 0.4rem 0 0; }
.ficha-tecnica__parcial {
  margin: 2rem 0 0;
  padding-block-start: 1.2rem;
  border-block-start: 1px solid var(--filete, #E4E0D4);
}

.ficha-tecnica__bloque--legal .ficha-tecnica__pauta dt,
.ficha-tecnica__bloque--legal .ficha-tecnica__pauta dd { font-size: 1.3rem; }

/* Que no figura en la etiqueta. Cerrado por defecto y en tinta apagada: es
   informacion honesta, no una disculpa, y no compite con el dato que si esta. */
.ficha-tecnica__ausentes {
  margin-block-start: 2rem;
  padding-block-start: 1.2rem;
  max-inline-size: var(--medida, 64ch);
  border-block-start: 1px solid var(--filete, #E4E0D4);
}
.ficha-tecnica__ausentes > summary {
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--tinta-60, #6E6961);
}
.ficha-tecnica__ausentes > summary:focus-visible {
  outline: 2px solid var(--acento, #11B5CB);
  outline-offset: 2px;
}
.ficha-tecnica__ausentes-cuerpo { padding-block-start: 0.8rem; }
.ficha-tecnica__ausentes-cuerpo p {
  margin: 0 0 0.8rem;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--tinta-60, #6E6961);
}
.ficha-tecnica__ausentes-cuerpo ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  font-size: 1.3rem;
  color: var(--tinta-45, #8A857A);
}
.ficha-tecnica__ausentes-cuerpo li::after {
  content: "\00b7";
  margin-inline-start: 1.2rem;
  color: var(--filete-fuerte, #DCD8CC);
}
.ficha-tecnica__ausentes-cuerpo li:last-child::after { content: none; }

/* El bloque de cada variante se ensena y se esconde con el atributo `hidden`.
   Se declara explicitamente porque cualquier regla del tema que ponga un
   `display` a un div gana al `display:none` que el navegador le da a [hidden]:
   la ficha se quedaria con los siete sabores a la vista a la vez. */
.ficha-tecnica[hidden],
.ficha-tecnica__variante[hidden] { display: none; }

@media screen and (max-width: 749px) {
  .ficha-tecnica__titulo { font-size: 2rem; }
  .ficha-tecnica__declaracion blockquote { font-size: 1.7rem; }
  .ficha-tecnica__pauta > div { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
}

/* --- 14. Portada -------------------------------------------------------- */

/* Cinco baldosas de coleccion: una grande a la izquierda que ocupa dos filas y
   cuatro pequenas. NO hay hero editorial a pantalla completa, y es deliberado:
   la portada de una tienda de complementos es rejilla de producto y
   descubrimiento, porque quien llega ya sabe lo que busca. */
.n-baldosas {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: var(--calle);
  margin: 0;
  padding: 0;
  list-style: none;
}
.n-baldosas > li:first-child { grid-row: span 2; }
@media screen and (max-width: 899px) {
  .n-baldosas { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .n-baldosas > li:first-child { grid-column: span 2; grid-row: auto; }
}

.n-baldosa {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--papel-denso);
  text-decoration: none;
  color: var(--tinta);
}
.n-baldosas > li:first-child .n-baldosa { aspect-ratio: 16 / 11; }
.n-baldosa img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* El texto lo pinta el tema, NUNCA va quemado en la imagen: si estuviera en el
   pixel no se podria traducir, no se podria corregir una errata sin volver a
   generar la foto y no lo leeria un lector de pantalla. Las imagenes se generan
   con la mitad izquierda despejada para que quepa. */
.n-baldosa__texto {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: grid;
  gap: 0.4rem;
  padding: 2rem;
  background: linear-gradient(to top, rgba(251, 250, 246, 0.96) 40%, rgba(251, 250, 246, 0));
}
.n-baldosa__titulo {
  font-family: var(--display);
  font-size: 3.4rem;
  line-height: 1.1;
  font-weight: 500;
}
.n-baldosas > li:not(:first-child) .n-baldosa__titulo { font-size: 2rem; }
.n-baldosa__cuenta { font-size: 1.2rem; color: var(--tinta-60); font-variant-numeric: tabular-nums; }
.n-baldosa__hueco {
  display: grid;
  place-items: center;
  block-size: 100%;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-30);
  background: repeating-linear-gradient(45deg, #F2EFE5 0 8px, #EAE6DA 8px 16px);
}

/* Carrusel nativo: scroll-snap y nada mas. Sin javascript, sin flechas que
   tapan producto y con el desplazamiento del sistema, que es el que la gente ya
   sabe usar en un movil. */
.n-carrusel {
  display: grid;
  grid-auto-flow: column;
  /* El ancho va SIN `minmax(0, ...)`. Con el mínimo en 0 el navegador puede
     encoger las columnas todo lo que quiera, y las doce tarjetas se apretaban
     en el ancho visible a 106 px cada una en vez de salir seis y desplazarse.
     `minmax` con mínimo 0 en un carril automático no fija nada. */
  grid-auto-columns: calc((100% - var(--calle) * 5) / 6);
  gap: var(--calle);
  margin: 0;
  padding: 0 0 1.2rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.n-carrusel > li { scroll-snap-align: start; }
@media screen and (max-width: 1199px) { .n-carrusel { grid-auto-columns: calc((100% - var(--calle) * 3) / 4); } }
@media screen and (max-width: 899px)  { .n-carrusel { grid-auto-columns: calc((100% - var(--calle)) / 2.2); } }

/* Marcas: seis celdas de 64 px. Sin logotipos todavia, asi que va el nombre en
   texto. Un nombre legible es mejor que un recuadro vacio esperando un SVG. */
.n-marcas {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--filete);
  border: 1px solid var(--filete);
}
@media screen and (max-width: 899px) { .n-marcas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.n-marcas a {
  display: grid;
  place-items: center;
  min-block-size: 6.4rem;
  padding: 1rem;
  background: var(--papel);
  font-size: 1.3rem;
  text-align: center;
  text-decoration: none;
  color: var(--tinta-85);
}
.n-marcas a:hover { color: var(--tinta); background: var(--papel-denso); }

/* --- 15. Blog ----------------------------------------------------------- */

.n-destacado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.2rem;
  align-items: center;
  padding-block-end: 4rem;
  margin-block-end: 4rem;
  border-block-end: 1px solid var(--filete);
}
@media screen and (max-width: 899px) { .n-destacado { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } }
.n-destacado__foto { aspect-ratio: 16 / 10; overflow: hidden; background: var(--papel-denso); }
.n-destacado__foto img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.n-destacado__titulo { font-size: 3.2rem; line-height: 1.15; letter-spacing: -0.01em; }
.n-destacado__texto { margin-block-start: 1.2rem; max-inline-size: 52ch; color: var(--tinta-85); }

.n-tarjeta--articulo .n-tarjeta__foto { aspect-ratio: 16 / 10; border: 0; background: var(--papel-denso); }
.n-tarjeta--articulo .n-tarjeta__foto img { object-fit: cover; padding: 0; }
.n-tarjeta--articulo .n-tarjeta__enlace {
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1.25;
  -webkit-line-clamp: 3;
}

/* Producto relacionado A MEDIA LECTURA, no al final: al final lo ve quien ya
   ha terminado, y quien ha terminado se va. */
.n-relacionado {
  display: grid;
  grid-template-columns: 10.4rem minmax(0, 1fr);
  gap: 1.6rem;
  align-items: center;
  margin-block: 3.2rem;
  padding: 1.6rem;
  background: var(--papel-denso);
}
.n-relacionado__foto { inline-size: 10.4rem; block-size: 10.4rem; background: var(--blanco); }
.n-relacionado__foto img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 0.6rem; }
.n-relacionado__titulo { font-family: var(--display); font-size: 1.9rem; line-height: 1.25; margin-block: 0.4rem; }
.n-relacionado .n-boton { min-block-size: 4.6rem; margin-block-start: 0.8rem; }
@media screen and (max-width: 599px) { .n-relacionado { grid-template-columns: minmax(0, 1fr); } }

/* --- 16. Busqueda ------------------------------------------------------- */

.n-pestanas {
  display: flex;
  gap: 2.4rem;
  margin: 0 0 2.4rem;
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--filete);
}
.n-pestanas a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 1.2rem;
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--tinta-60);
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
}
.n-pestanas a[aria-current="page"] { color: var(--tinta); border-block-end-color: var(--acento); }

/* El termino que coincide, resaltado. Es el unico uso del acento al 12 %: sirve
   para que el ojo confirme en un barrido que el resultado es el que pedia. */
mark { background: var(--acento-12); color: inherit; padding: 0 0.2rem; }

/* --- 17. Carrito -------------------------------------------------------- */

.n-carrito {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34rem;
  gap: 4.8rem;
  align-items: start;
}
@media screen and (max-width: 989px) { .n-carrito { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; } }

.n-linea {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) 13rem 11rem;
  gap: 1.6rem;
  align-items: center;
  padding-block: 1.6rem;
  border-block-end: 1px solid var(--filete-tenue);
}
@media screen and (max-width: 749px) {
  .n-linea { grid-template-columns: 6.4rem minmax(0, 1fr); }
  .n-linea__cantidad, .n-linea__total { grid-column: 2; }
}
.n-linea__foto { inline-size: 8rem; block-size: 8rem; background: var(--blanco); border: 1px solid var(--filete-tenue); }
.n-linea__foto img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 0.4rem; }
.n-linea__total { text-align: right; font-variant-numeric: tabular-nums; }

.n-resumen { padding: 2rem; background: var(--papel-denso); display: grid; gap: 1.2rem; }
.n-resumen__fila { display: flex; justify-content: space-between; gap: 1.6rem; font-size: 1.4rem; }
.n-resumen__total { font-size: 2.2rem; font-weight: 500; color: var(--tinta); }
.n-resumen .n-boton { min-block-size: 5.2rem; inline-size: 100%; }

/* --- 18. Baldosas de salida (404) --------------------------------------- */

.n-salidas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--calle);
  margin: 3.2rem 0 0;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 749px) { .n-salidas { grid-template-columns: minmax(0, 1fr); } }
.n-salidas a {
  display: grid;
  gap: 0.6rem;
  padding: 2rem;
  border: 1px solid var(--filete-fuerte);
  text-decoration: none;
  color: var(--tinta);
}
.n-salidas a:hover { background: var(--papel-denso); }
.n-salidas span { font-size: 1.3rem; color: var(--tinta-60); }

/* --- 19. Valoraciones ---------------------------------------------------- */

/* Solo se pinta si hay reseñas de verdad detras. La nota agregada sin las
   reseñas que la sostienen es lo que Google sanciona con accion manual, y
   ademas es una cifra que el cliente no puede comprobar: justo lo contrario de
   lo que hace esta ficha con el EAN. */
.n-resenas {
  padding-block: 4.8rem;
  border-block-start: 1px solid var(--filete);
}
.n-resenas__cuerpo {
  display: grid;
  grid-template-columns: 21rem minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}
@media screen and (max-width: 899px) {
  .n-resenas__cuerpo { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
}

.n-resenas__resumen { display: grid; gap: 0.2rem; }
.n-resenas__nota {
  font-family: var(--display);
  font-size: 3.8rem;
  line-height: 1;
  font-weight: 500;
  color: var(--tinta);
}
.n-resenas__de { font-size: 1.2rem; color: var(--tinta-45); }
.n-resenas__cuantas { margin-block-start: 0.6rem; font-size: 1.3rem; color: var(--tinta-60); }

.n-histograma { margin: 1.6rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.n-histograma li {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr) 2.4rem;
  gap: 0.8rem;
  align-items: center;
  font-size: 1.2rem;
  color: var(--tinta-60);
  font-variant-numeric: tabular-nums;
}
.n-histograma__barra { block-size: 0.7rem; background: var(--filete-tenue); }
/* La barra es la unica pieza turquesa de este bloque: el resto va en tinta.
   Con cinco barras rellenas de acento, el acento deja de significar nada. */
.n-histograma__barra > span { display: block; block-size: 100%; background: var(--acento); }
.n-histograma__c { text-align: right; color: var(--tinta-45); }

.n-resenas__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 2rem; max-inline-size: var(--medida); }
.n-resena { padding-block-end: 2rem; border-block-end: 1px solid var(--filete-tenue); }
.n-resena:last-child { border-block-end: 0; padding-block-end: 0; }
.n-resena__estrellas { font-size: 1.3rem; letter-spacing: 0.1em; color: var(--tinta); }
.n-resena__vacia { color: var(--filete-fuerte); }
.n-resena__texto { margin-block: 0.6rem 0.6rem; color: var(--tinta-85); }
.n-resena__firma { font-size: 1.2rem; color: var(--tinta-45); }

.n-resenas__origen {
  margin-block-start: 2.4rem;
  max-inline-size: var(--medida);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--tinta-60);
}

/* --- 20. Zona de compra ------------------------------------------------- */

/* Resumen de valoraciones enlazado al bloque de abajo. */
.n-espina__nota { display: flex; align-items: baseline; gap: 0.8rem; font-size: 1.3rem; color: var(--tinta-60); }
.n-espina__nota strong { color: var(--tinta); font-weight: 500; }
.n-espina__nota a { color: var(--acento); text-underline-offset: 0.25em; }

/* Distintivos declarados en el envase. Encuadrados y en tinta apagada: no son
   argumentos de venta, son datos de etiqueta, y el diseño no debe darles el
   peso visual de una promesa. */
.n-distintivos { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.n-distintivos li {
  padding: 0.4rem 1rem;
  border: 1px solid var(--filete-fuerte);
  font-size: 1.2rem;
  color: var(--tinta-85);
}

.n-opcion { border: 0; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.n-opcion__nombre {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-60);
}
/* Los pasos van numerados porque la ficha de un complemento SÍ tiene un orden:
   primero el formato, que fija el precio, y después el sabor, que no. Numerar
   algo que no es una secuencia sería decoración. */
.n-opcion__n {
  display: inline-grid;
  place-items: center;
  inline-size: 1.8rem;
  block-size: 1.8rem;
  border: 1px solid var(--filete-fuerte);
  font-size: 1.1rem;
  letter-spacing: 0;
  color: var(--tinta);
}

/* Formato: filas apiladas, no pastillas. Cada fila lleva su precio por unidad a
   la izquierda y el ahorro a la derecha, que es la comparación que de verdad se
   hace y que nadie va a hacer de cabeza. */
.n-formatos { display: grid; gap: 0.8rem; }
.n-formato { display: block; cursor: pointer; }
.n-formato__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--filete-fuerte);
  background: var(--papel);
}
.n-formato:hover .n-formato__caja { border-color: var(--tinta-45); }
.n-opcion__radio:checked + .n-formato__caja {
  border-color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta);
  background: var(--papel-denso);
}
.n-opcion__radio:focus-visible + .n-formato__caja { outline: 2px solid var(--acento); outline-offset: 2px; }
.n-formato__izq, .n-formato__der { display: grid; gap: 0.2rem; }
.n-formato__der { text-align: right; }
.n-formato__nombre { font-size: 1.5rem; color: var(--tinta); }
.n-formato__unidad { font-size: 1.2rem; color: var(--tinta-60); font-variant-numeric: tabular-nums; }
.n-formato__precio { font-size: 1.6rem; font-weight: 500; color: var(--tinta); font-variant-numeric: tabular-nums; }
.n-formato__ahorro { font-size: 1.2rem; color: var(--tinta-45); }
/* El ahorro es el único sitio de la ficha, junto a la cita legal, donde se
   gasta turquesa: es el dato que decide entre dos formatos. */
.n-formato__ahorro--si { color: var(--acento); }

.n-opcion__envoltorio { display: inline-block; cursor: pointer; }
.n-opcion__estado {
  margin-inline-start: 0.6rem;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-45);
}

.n-espina__zona-precio { display: grid; gap: 0.4rem; }
.n-espina__unitario {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: 1.25rem;
  color: var(--tinta-60);
  font-variant-numeric: tabular-nums;
}
.n-espina__unitario > span:empty { display: none; }
/* Separador entre los datos de precio por unidad, sin escribir un punto en el
   HTML: así una pieza vacía no deja un separador huérfano. */
.n-espina__unitario > span + span:not(:empty)::before {
  content: "·";
  margin-inline-end: 1.2rem;
  color: var(--filete-fuerte);
}

.n-compra .n-boton { flex: 1 1 24rem; }

/* --- 21. Seguir por aquí y foto de etiqueta ------------------------------ */

/* La ficha nunca termina en un fondo de saco. La mínima es el caso frecuente y
   se acaba pronto: sin esto, el último pliegue es un hueco. */
.n-seguir { padding-block: 4rem; border-block-start: 1px solid var(--filete); }
.n-seguir__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--calle);
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 749px) { .n-seguir__lista { grid-template-columns: minmax(0, 1fr); } }
.n-seguir__lista a {
  display: grid;
  gap: 0.4rem;
  padding: 1.6rem;
  border: 1px solid var(--filete-fuerte);
  text-decoration: none;
  color: var(--tinta);
}
.n-seguir__lista a:hover { background: var(--papel-denso); }
.n-seguir__eje {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-60);
}
.n-seguir__que { font-size: 1.6rem; }

.ficha-tecnica__etiqueta { margin-block-end: 1.6rem; }
.ficha-tecnica__etiqueta > summary {
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--acento);
  text-underline-offset: 0.25em;
}
.ficha-tecnica__etiqueta > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.ficha-tecnica__etiqueta-cuerpo { padding-block-start: 1.2rem; max-inline-size: 46rem; }
.ficha-tecnica__etiqueta-caja {
  display: block;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--filete-tenue);
  border-radius: var(--r-ctrl);
  background: var(--blanco);
  overflow: hidden;
}
.ficha-tecnica__etiqueta-cuerpo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  padding: 0.8rem;
}
.ficha-tecnica__etiqueta-cuerpo p { margin-block-start: 0.8rem; font-size: 1.2rem; color: var(--tinta-60); }

/* --- 22. Índice de la ficha --------------------------------------------- */

/* Fijo al desplazar, pero NO son pestañas: no esconde ninguna sección, solo
   salta a ella. El traspaso de diseño lo dejó dicho y el motivo sigue siendo
   bueno: el público de Natfy está por encima de los 45 y un clic de más para
   ver un dato que ya estaba escrito se paga caro. */
.n-indice {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: var(--papel);
  border-block: 1px solid var(--filete);
}
.n-indice__lista {
  display: flex;
  gap: 2.4rem;
  margin: 0;
  padding-block: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.n-indice__lista::-webkit-scrollbar { display: none; }
.n-indice__lista a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-block-size: 4.8rem;
  white-space: nowrap;
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--tinta-60);
  border-block-end: 2px solid transparent;
}
.n-indice__lista a:hover { color: var(--tinta); border-block-end-color: var(--filete-fuerte); }
.n-indice__lista span { font-size: 1.2rem; color: var(--tinta-45); font-variant-numeric: tabular-nums; }

/* Al saltar con un ancla, el título no puede quedar tapado por la barra. */
#descripcion, #etiquetado, #valoraciones { scroll-margin-block-start: 6rem; }

/* --- 23. Móvil, al final a propósito -------------------------------------

   Estas reglas van LAS ULTIMAS del fichero y no junto al componente que
   retocan. El motivo es una pelea de cascada que ya costó una pasada: la
   consulta de medios de la galería estaba escrita en la sección de la cabecera,
   y la definición base de `.n-galeria__principal`, que viene después en el
   fichero, la pisaba con la misma especificidad. La consulta de medios NO sube
   la especificidad; solo decide si la regla aplica.
   ---------------------------------------------------------------------- */

@media screen and (max-width: 749px) {
  /* La foto deja de ser cuadrada: en 375 px un 1:1 son 343 px de alto y empuja
     el precio y el botón a la segunda pantalla. La comprobación 8 del traspaso
     de storefront pide justo lo contrario. */
  .n-galeria__principal { aspect-ratio: 4 / 3; }
  .n-galeria__principal img { padding: 1.2rem; }
  .n-galeria__tira { inline-size: 5.6rem; block-size: 5.6rem; }
  .n-galeria__tiras { grid-auto-columns: 5.6rem; }

  /* La ficha en móvil se lee de arriba abajo, así que los distintivos y el
     bloque de confianza pesan menos que el precio y el botón. */
  .n-distintivos li { font-size: 1.1rem; padding: 0.3rem 0.8rem; }
  .n-formato__caja { padding: 1rem 1.2rem; }
  .n-formato__nombre { font-size: 1.4rem; }
  .n-espina { gap: 1.2rem; }
}

/* --- 24. Umbral de envío y mini-carrito ---------------------------------- */

.n-umbral { display: grid; gap: 0.8rem; padding: 1.2rem 1.4rem; background: var(--papel-denso); }
.n-umbral__texto { font-size: 1.3rem; color: var(--tinta-85); }
.n-umbral__texto strong { color: var(--tinta); font-weight: 500; }
.n-umbral__barra { display: block; block-size: 0.7rem; background: var(--filete-tenue); }
.n-umbral__barra > span { display: block; block-size: 100%; background: var(--acento); transition: width 200ms ease; }
@media (prefers-reduced-motion: reduce) { .n-umbral__barra > span { transition: none; } }

.n-cajon { position: fixed; inset: 0; z-index: 70; }
.n-cajon[hidden] { display: none; }
.n-cajon__velo { position: absolute; inset: 0; background: rgba(42, 39, 35, 0.42); }
.n-cajon__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(38rem, calc(100% - 2.2rem));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--papel);
  box-shadow: var(--sombra-panel);
}
.n-cajon__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.6rem var(--lateral);
  border-block-end: 1px solid var(--filete);
}
.n-cajon__cerrar {
  inline-size: 4rem;
  block-size: 4rem;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--tinta-60);
}
.n-cajon__cerrar:hover { color: var(--tinta); }
.n-cajon__cuerpo { overflow-y: auto; padding: 1.6rem var(--lateral); display: grid; gap: 1.6rem; align-content: start; }
.n-cajon__lineas { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.6rem; }
.n-cajon__linea {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: start;
  padding-block-end: 1.6rem;
  border-block-end: 1px solid var(--filete-tenue);
}
.n-cajon__linea:last-child { border-block-end: 0; padding-block-end: 0; }
.n-cajon__foto { inline-size: 5.4rem; block-size: 5.4rem; background: var(--blanco); border: 1px solid var(--filete-tenue); }
.n-cajon__foto img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 0.3rem; }
.n-cajon__linea a { font-size: 1.4rem; color: var(--tinta); text-decoration: none; }
.n-cajon__variante, .n-cajon__cantidad { font-size: 1.2rem; color: var(--tinta-60); }
.n-cajon__total { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.n-cajon__pie {
  display: grid;
  gap: 0.8rem;
  padding: 1.6rem var(--lateral);
  border-block-start: 1px solid var(--filete);
  background: var(--papel);
}
.n-cajon__nota { font-size: 1.2rem; color: var(--tinta-60); }
.n-cajon__pie .n-boton { inline-size: 100%; }

/* --- 25. Ajuste al prototipo ---------------------------------------------
   Va al final por lo aprendido en la sección 23: una consulta de medios o una
   regla escrita antes que la definición base no gana por estar en un bloque
   más específico, y aquí se redefinen componentes declarados más arriba.
   ---------------------------------------------------------------------- */

/* Tarjetas y contenedores: borde de 1 px y radio, sin sombra. */
.n-tarjeta__foto,
.n-galeria__principal,
.n-formato__caja,
.n-linea__foto,
.n-cajon__foto,
.n-relacionado__foto,
.n-resenas__resumen,
.n-seguir__lista a,
.n-salidas a,
.n-distintivos li,
.n-pildora,
.n-umbral,
.n-resumen,
.n-relacionado {
  border-radius: var(--r-caja);
}
.n-galeria__tira, .n-tira__foto { border-radius: var(--r-ctrl); }
.n-tira__foto { border-radius: 50%; }
.n-distintivos li, .n-pildora, .n-opcion__valor { border-radius: var(--r-pastilla); }
.n-cantidad, .n-galeria__flecha, .n-cajon__cerrar { border-radius: var(--r-ctrl); }
.n-declaracion, .n-baldosa, .n-cajon__panel { border-radius: var(--r-caja); }

/* Distintivos de etiqueta: pastilla verde clara, como los chips de claim. */
.n-distintivos li {
  border-color: var(--acento-linea);
  background: var(--acento-tinte);
  color: var(--acento-hondo);
  font-weight: 600;
}

/* Sabor: pastilla redonda; la elegida en tinta plena, no en verde. El verde se
   reserva para la acción, y aquí la acción es el botón de añadir. */
.n-opcion__valor {
  min-block-size: 4rem;
  padding-inline: 1.4rem;
  border-radius: var(--r-pastilla);
  background: var(--blanco);
}
.n-opcion__radio:checked + .n-opcion__valor { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.n-opcion__radio:disabled + .n-opcion__valor { opacity: 0.45; text-decoration: none; }
.n-opcion__estado { color: var(--aviso); }

/* Formato elegido: fondo verde claro y borde de 1,5 px, como en el prototipo. */
.n-opcion__radio:checked + .n-formato__caja {
  border: 1.5px solid var(--acento);
  box-shadow: none;
  background: var(--acento-tinte);
}
.n-formato__ahorro--si { color: var(--acento-hondo); font-weight: 600; }

/* Zona de compra: tarjeta blanca sobre el fondo de sección. */
.n-espina {
  padding: 1.7rem;
  border: 1px solid var(--filete);
  border-radius: var(--r-caja);
  background: var(--blanco);
  gap: 1.5rem;
}
.n-espina__titulo { font-family: var(--display); font-size: 3rem; line-height: 1.06; letter-spacing: -0.03em; font-weight: 800; }
.n-espina__marca { font-family: var(--mono); font-size: 1.1rem; letter-spacing: 0.1em; text-transform: uppercase; }
.n-espina__marca a { color: var(--acento-oscuro); }
.n-espina__precio { font-family: var(--display); font-size: 3.3rem; font-weight: 800; letter-spacing: -0.02em; }
.n-espina__precio del { font-size: 1.5rem; }
.n-ficha { background: var(--papel); padding-inline: 0; }

/* El punto de disponibilidad usa el verde de acción y el naranja de aviso. */
.n-disponible::before { background: var(--acento); }
.n-disponible--agotado::before { background: var(--aviso); }
.n-disponible--agotado { color: var(--aviso); }

/* Estrellas en verde, como en el prototipo. */
.n-resena__estrellas { color: var(--acento); letter-spacing: 0.05em; }
.n-resena__vacia { color: var(--filete-tenue); }

/* La cita legal deja de ser Lora cursiva: en este sistema no hay serif. */
.n-declaracion, .ficha-tecnica__declaracion {
  border: 1px solid var(--acento-linea);
  border-block-start: 1px solid var(--acento-linea);
  background: var(--acento-tinte);
  padding: 1.6rem 1.8rem;
}
.n-declaracion blockquote,
.ficha-tecnica__declaracion blockquote {
  font-family: var(--texto);
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--acento-hondo);
}

/* Cabecera y pie sobre blanco, con la franja superior en tinta. */
.n-cab { background: var(--blanco); }
.n-aviso { background: var(--tinta); color: var(--tinta-45); }
.n-aviso__inner { color: var(--blanco); font-size: 1.25rem; }
.n-logo { font-family: var(--display); font-weight: 800; font-size: 2.2rem; letter-spacing: -0.03em; text-transform: none; color: var(--tinta); }
.n-logo::after { content: "."; color: var(--acento); }
.n-nav__enlace:hover, .n-nav__item[aria-current="page"] > .n-nav__enlace { border-block-end-color: var(--acento); color: var(--acento-oscuro); }
.n-pie { background: var(--papel); }

.n-buscar__campo { border-radius: var(--r-boton); }
.n-tarjeta__enlace:hover { color: var(--acento-oscuro); }
.n-mas { color: var(--acento-oscuro); }

@media screen and (max-width: 749px) {
  .n-logo { font-size: 1.8rem; letter-spacing: -0.03em; }
  .n-espina { padding: 1.4rem; }
  .n-espina__titulo { font-size: 2.4rem; }
}

/* --- 26. Sugerencias del buscador ---------------------------------------- */

.n-buscar { position: relative; }
.n-buscar__panel {
  position: absolute;
  inset-block-start: calc(100% + 0.6rem);
  inset-inline: 0;
  z-index: 45;
  max-block-size: min(60vh, 52rem);
  overflow-y: auto;
  padding: 1.6rem;
  background: var(--blanco);
  border: 1px solid var(--filete);
  border-radius: var(--r-caja);
  box-shadow: var(--sombra-menu);
}
.n-buscar__panel[hidden] { display: none; }

.n-sug { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: 2.4rem; }
@media screen and (max-width: 749px) { .n-sug { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } }

.n-sug__lado { border-inline-end: 1px solid var(--filete-tenue); padding-inline-end: 2.4rem; }
@media screen and (max-width: 749px) { .n-sug__lado { border-inline-end: 0; padding-inline-end: 0; } }

.n-sug__lista { margin: 0.8rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; }
.n-sug__lista a {
  display: block;
  padding-block: 0.6rem;
  font-size: 1.35rem;
  color: var(--tinta-85);
  text-decoration: none;
}
.n-sug__lista a:hover { color: var(--acento-oscuro); }
/* `styled_text` envuelve en <mark> lo que coincide con lo escrito: es lo que
   deja ver al visitante por qué le sale esa sugerencia. */
.n-sug__lista mark { background: var(--acento-tinte); color: inherit; }

.n-sug__prods { margin: 0.8rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.n-sug__prods a {
  display: grid;
  grid-template-columns: 4.8rem minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: center;
  padding: 0.8rem;
  border-radius: var(--r-ctrl);
  text-decoration: none;
  color: var(--tinta);
}
.n-sug__prods a:hover { background: var(--papel); }
.n-sug__foto { inline-size: 4.8rem; block-size: 4.8rem; background: var(--blanco); border: 1px solid var(--filete-tenue); border-radius: var(--r-ctrl); }
.n-sug__foto img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 0.2rem; }
.n-sug__datos { display: grid; gap: 0.1rem; min-inline-size: 0; }
.n-sug__marca { font-family: var(--mono); font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-60); }
.n-sug__titulo { font-size: 1.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-sug__precio { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.n-sug__todos { margin-block-start: 1.2rem; font-size: 1.3rem; }
.n-sug__todos a { color: var(--acento-oscuro); }
.n-sug__nada { font-size: 1.35rem; color: var(--tinta-60); max-inline-size: 52ch; }

/* --- 27. Landing de marca y sugerencias de cesta -------------------------- */

/* Hero oscuro a sangre, del handoff. Es el único bloque oscuro de la tienda, y
   por eso funciona: si hubiera cuatro, dejaría de señalar nada. */
.n-marca-hero {
  background: var(--tinta);
  color: var(--blanco);
  padding-block: 5.6rem;
  margin-block-end: 1.8rem;
}
.n-marca-hero h1 { color: var(--blanco); margin-block: 0.8rem; }
.n-marca-hero__rotulo { color: var(--acento); }
.n-marca-hero__cifra { font-size: 1.5rem; color: var(--tinta-45); }
.n-marca-hero__texto { max-inline-size: var(--medida); margin-block-start: 1.6rem; color: var(--tinta-45); }
.n-marca-hero__texto a { color: var(--acento); }

.n-marca-ejes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem; }
@media screen and (max-width: 749px) { .n-marca-ejes { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
.n-marca-ejes .n-pildoras { margin-block-start: 1rem; }

.n-rutina { margin-block-start: 2.4rem; padding-block-start: 1.6rem; border-block-start: 1px solid var(--filete); }
.n-rutina__lista { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.n-rutina__lista a {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
  padding: 0.8rem;
  border-radius: var(--r-ctrl);
  text-decoration: none;
  color: var(--tinta);
}
.n-rutina__lista a:hover { background: var(--papel); }
.n-rutina__foto { inline-size: 6.4rem; block-size: 6.4rem; background: var(--blanco); border: 1px solid var(--filete-tenue); border-radius: var(--r-ctrl); }
.n-rutina__foto img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 0.3rem; }
.n-rutina__datos { display: grid; gap: 0.1rem; min-inline-size: 0; }
.n-rutina__titulo { font-size: 1.35rem; line-height: 1.3; }
.n-rutina__precio { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Filtro de precio: dos campos y un botón, no una lista de valores. */
.n-filtros__precio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  margin-block-start: 0.8rem;
  font-size: 1.3rem;
  color: var(--tinta-60);
}
.n-filtros__precio .n-campo { min-block-size: 3.8rem; padding-inline: 1rem; font-size: 1.3rem; }
.n-filtros__precio .n-boton { grid-column: 1 / -1; min-block-size: 3.8rem; font-size: 1.3rem; }

/* --- 28. Entradilla de portada ------------------------------------------- */

/* El titular a 28 caracteres y no a 20: con 20 se partía en tres líneas muy
   cortas y el bloque parecía una columna estrecha en una pantalla de 1440. */
.n-hero { max-inline-size: 96rem; }
.n-hero h1 { max-inline-size: 28ch; }
.n-hero__entradilla {
  margin-block-start: 1.6rem;
  max-inline-size: 68ch;
  font-size: 1.7rem;
  line-height: 1.6;
  color: var(--tinta-85);
}
@media screen and (max-width: 749px) {
  .n-hero__entradilla { font-size: 1.55rem; }
}