/* Aromas del Sur · prototipo v2 · «El tueste manda»
   El color del grano gobierna la página: una escala de seis tonos, del verde crudo al carbón.
   Cada café pinta su interfaz con su propio punto (--roast, que sale de su Agtron).
   Fuentes self-hosted: Martian Mono (display y datos: el tostador habla en números) +
   Newsreader (texto: la taza habla en palabras). 0 requests externos. */

@font-face { font-family: "Martian Mono"; src: url("../fonts/martianmono.woff2") format("woff2");
  font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap; }
/* Respaldos con métricas de las fuentes web (CLS 0 al cambiar de fuente; medido el 3-oct: el cambio Georgia/Menlo →
   Newsreader/Martian movía la tienda 0,0497 a 390 px). size-adjust = ancho en la fuente web ÷ ancho en la local, media
   de 7 frases del sitio por peso y al tamaño donde más se usa cada cara (Newsreader tiene eje óptico: la 400 da 0,905 a
   18–24 px y 1,004 a 100 px; la itálica 400 0,827 a 24 px; la itálica 300 sólo está en el héroe, 0,856 a 200 px),
   medido en Chromium; Consolas sale de su avance (1126/2048 = 0,5498 em) contra el de Martian (0,600 / 0,650 /
   0,700 em a 75 / 87,5 / 100 %). Los override llevan ascenso/descenso de la fuente web (Newsreader 0,735/0,265;
   Martian 1,0/0,2) divididos por el size-adjust, que también los escala. */
@font-face { font-family: "Newsreader Respaldo"; src: local("Georgia"); font-style: normal; font-weight: 200 349;
  size-adjust: 94.00%; ascent-override: 78.19%; descent-override: 28.19%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Respaldo"; src: local("Georgia"); font-style: normal; font-weight: 350 449;
  size-adjust: 90.50%; ascent-override: 81.22%; descent-override: 29.28%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Respaldo"; src: local("Georgia"); font-style: normal; font-weight: 450 549;
  size-adjust: 93.00%; ascent-override: 79.03%; descent-override: 28.49%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Respaldo"; src: local("Georgia"); font-style: normal; font-weight: 550 800;
  size-adjust: 96.00%; ascent-override: 76.56%; descent-override: 27.60%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Respaldo"; src: local("Georgia Italic"), local("Georgia-Italic"); font-style: italic; font-weight: 200 349;
  size-adjust: 85.56%; ascent-override: 85.90%; descent-override: 30.97%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Respaldo"; src: local("Georgia Italic"), local("Georgia-Italic"); font-style: italic; font-weight: 350 449;
  size-adjust: 82.70%; ascent-override: 88.88%; descent-override: 32.04%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Respaldo"; src: local("Georgia Italic"), local("Georgia-Italic"); font-style: italic; font-weight: 450 800;
  size-adjust: 87.00%; ascent-override: 84.48%; descent-override: 30.46%; line-gap-override: 0%; }
@font-face { font-family: "Martian Respaldo"; src: local("Menlo"), local("Menlo-Regular"); font-stretch: 75%;
  size-adjust: 99.66%; ascent-override: 100.34%; descent-override: 20.07%; line-gap-override: 0%; }
@font-face { font-family: "Martian Respaldo"; src: local("Menlo"), local("Menlo-Regular"); font-stretch: 87.5%;
  size-adjust: 107.97%; ascent-override: 92.62%; descent-override: 18.52%; line-gap-override: 0%; }
@font-face { font-family: "Martian Respaldo"; src: local("Menlo"), local("Menlo-Regular"); font-stretch: 100%;
  size-adjust: 116.27%; ascent-override: 86.01%; descent-override: 17.2%; line-gap-override: 0%; }
@font-face { font-family: "Martian Respaldo C"; src: local("Consolas"); font-stretch: 75%;
  size-adjust: 109.13%; ascent-override: 91.63%; descent-override: 18.33%; line-gap-override: 0%; }
@font-face { font-family: "Martian Respaldo C"; src: local("Consolas"); font-stretch: 87.5%;
  size-adjust: 118.22%; ascent-override: 84.59%; descent-override: 16.92%; line-gap-override: 0%; }
@font-face { font-family: "Martian Respaldo C"; src: local("Consolas"); font-stretch: 100%;
  size-adjust: 127.32%; ascent-override: 78.54%; descent-override: 15.71%; line-gap-override: 0%; }

:root {
  /* La escala del grano (6 tonos). Medida contra --paper/--ink en el brief. */
  --t0: #A2A57B;  /* verde crudo */
  --t1: #D2B774;  /* paja: fin del secado */
  --t2: #B0773F;  /* canela: tueste claro */
  --t3: #87532E;  /* avellana: medio claro */
  --t4: #5B341C;  /* cacao: medio */
  --t45: #45271A; /* medio oscuro: punto entre cacao y carbón (no es un tono nuevo de la escala) */
  --t5: #2A170D;  /* carbón: oscuro */

  --paper: #F1EBDF;   /* papel kraft claro: el fondo de la tienda */
  --paper-2: #E3D7C3; /* bandeja de cata: un escalón de superficie (1,15:1 contra --paper) */
  --ink: #170F0A;     /* negro café: tinta y fondo oscuro */
  --ink-2: #5A4636;   /* texto secundario sobre papel (≥ 4,5:1 en --paper y --paper-2) */
  --paper-ink-2: #C9BBA6; /* texto secundario sobre --ink (≥ 7:1) */
  --brasa: #C4441D;   /* la llama del tostador: sólo el primer crack, la aguja y el progreso */
  --linea: color-mix(in oklab, currentColor 18%, transparent);
  /* Relleno de hover con texto papel: el tueste del café oscurecido 28 % con tinta, para que hasta el
     más claro (canela) dé ≥ 4,5:1 con --paper. Medido en el brief. */
  --roast-fondo: color-mix(in oklab, var(--roast, var(--t4)) 72%, var(--ink));

  --f-mono: "Martian Mono", "Martian Respaldo", "Martian Respaldo C", ui-monospace, Menlo, Consolas, monospace;
  --f-serif: "Newsreader", "Newsreader Respaldo", Georgia, "Times New Roman", serif;

  /* Espaciado: escala de 4 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  /* Margen de página: manda el VIEWPORT (es el borde de la ventana), por eso vw. Rye: 4 % a 1440. */
  --gut: clamp(20px, 4vw, 64px);
  --max: 1600px;
  --hdr-h: 68px;

  --d-fast: 160ms; --d-ui: 240ms; --d-med: 420ms; --d-slow: 700ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  /* Trazo que se dibuja: recorte a lo largo de su eje (oculto → entero). −5 %/105 % y −100 % en % de la caja del path
     dejan entrar la tapa y el grosor, que con non-scaling-stroke caen fuera de esa caja. */
  --trazo-0: inset(-100% 105% -100% -5%);
  --trazo-1: inset(-100% -5% -100% -5%);

  /* Ruido de grano para las fotos tratadas (inline: 0 requests) */
  /* La firma: el área bajo la curva de un lote (carga → giro → salida). Recorta el borde de arriba de las fotos. */
  --mascara-curva: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0.0 19.1L26.3 50.6L52.6 72.9L78.9 86.6L105.3 92.7L131.6 90.9L157.9 86.4L184.2 82.1L210.5 77.9L236.8 73.9L263.2 70.0L289.5 66.3L315.8 62.8L342.1 59.4L368.4 56.1L394.7 53.0L421.1 49.9L447.4 47.0L473.7 44.3L500.0 41.6L526.3 39.0L552.6 36.5L578.9 34.2L605.3 31.9L631.6 29.7L657.9 27.6L684.2 25.6L710.5 23.6L736.8 21.8L763.2 20.0L789.5 18.3L815.8 16.6L842.1 15.0L868.4 13.5L894.7 12.0L921.1 10.6L947.4 9.3L973.7 8.0L1000.0 6.7L1000 101L0 101Z'/%3E%3C/svg%3E");
  /* Papel kraft: fibras largas en horizontal (feTurbulence estirado) + el grano fino de abajo. Inline: 0 requests. */
  --kraft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .55' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .25 0 0 0 0 .14 0 0 0 1.25 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* Estrella para las notas (máscara: el relleno lo pone el color de la nota) */
  --estrella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15'%3E%3Cpath d='M8 0l2.35 4.76 5.25.77-3.8 3.7.9 5.23L8 11.99 3.3 14.46l.9-5.23L.4 5.53l5.25-.77z'/%3E%3C/svg%3E");
  /* El subrayado que se tuesta: del paja a la brasa */
  --tostado: linear-gradient(90deg, var(--t1), var(--t2) 38%, var(--t3) 68%, var(--brasa));
  --ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Reset ───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.5 var(--f-serif);
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ol, ul { list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ins { text-decoration: none; }
sup { line-height: 0; }
:where(p, li, dd, h1, h2, h3, a, span, b) { overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--brasa); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: fixed; left: var(--gut); top: -60px; z-index: 300; background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--s4); font: 500 13px/1 var(--f-mono); transition: top var(--d-fast) var(--ease), var(--tx-toque); }
.saltar:focus { top: var(--s3); }

/* ── Tipos ───────────────────────────────────────────────────────────────────────── */
.mono { font-family: var(--f-mono); font-stretch: 87.5%; letter-spacing: 0; }
/* Número de sección editorial: la cifra en el peso más fino de Martian (100) contra el h2 en 300 y las etiquetas en 500. */
.num { font: 100 clamp(44px, 6.4cqw, 96px)/.78 var(--f-mono); font-stretch: 75%; letter-spacing: -.06em; display: flex; align-items: flex-start; gap: var(--s2); }
.num b { font-weight: 100; }
.num span { font-size: 12px; font-weight: 500; letter-spacing: .04em; font-stretch: 87.5%; padding-top: .35em; opacity: .75; }
.h2 { font: 300 clamp(30px, 5.2cqw, 76px)/.98 var(--f-mono); font-stretch: 75%; text-transform: uppercase;
  letter-spacing: -.04em; text-wrap: balance; }
/* La voz de cata: serif itálica, minúscula, al lado de la mono gritona */
.h2 em { font: italic 400 1.1em/.9 var(--f-serif); text-transform: none; letter-spacing: -.03em; }
em { font-style: italic; }

.enlace { display: inline-flex; align-items: center; gap: var(--s2); font: 500 13px/1.3 var(--f-mono); font-stretch: 87.5%;
  text-transform: uppercase; letter-spacing: .02em; text-decoration: none; padding-block: var(--s2);
  background: linear-gradient(currentColor, currentColor) 100% 100% / 100% 1px no-repeat, var(--tostado) 0 100% / 0 3px no-repeat;
  transition: background-size var(--d-med) var(--ease), color var(--d-fast); }
.enlace::after { content: ""; width: 18px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: translate var(--d-ui) var(--ease); }
@media (hover: hover) { .enlace:hover { background-size: 0 1px, 100% 3px; } }
@media (hover: hover) { .enlace:hover::after { translate: 6px 0; } }

/* Botón: placa con su «sombra» desplazada como una bolsa apoyada sobre otra (Rye: borde doble
   desplazado 4 px). El desplazamiento se cierra al apretar. */
.btn { --b-bg: transparent; --b-fg: currentColor; --b-sombra: currentColor; position: relative; display: inline-flex;
  align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s5); border: 1px solid currentColor;
  background: var(--b-bg); color: var(--b-fg); font: 500 13px/1.1 var(--f-mono); font-stretch: 87.5%; text-transform: uppercase;
  letter-spacing: .03em; text-decoration: none; text-align: center; isolation: isolate;
  transition: translate var(--d-fast) var(--ease), background-color var(--d-ui), color var(--d-ui), var(--tx-toque); }
.btn::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--b-sombra); translate: 5px 5px; z-index: -1;
  transition: translate var(--d-ui) var(--ease); pointer-events: none; }
@media (hover: hover) { .btn:hover::after { translate: 8px 8px; } }
.btn:active { translate: 3px 3px; }
.btn:active::after { translate: 2px 2px; }
.btn--lleno { --b-bg: var(--ink); --b-fg: var(--paper); --b-sombra: var(--ink); border-color: var(--ink); }
@media (hover: hover) { .btn--lleno:hover { --b-bg: var(--roast-fondo); --b-fg: var(--paper); border-color: var(--roast-fondo); } }

.precio { font-size: 15px; font-weight: 500; display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; }
.precio del { font-weight: 400; font-size: .82em; opacity: .62; }
.precio--grande { font-size: 26px; font-stretch: 75%; letter-spacing: -.02em; }

/* ── Foto tratada: duotono al color del tueste + grano + máscara ──────────────────── */
.duo { --duo-claro: color-mix(in oklab, var(--roast, var(--t3)) 46%, #FFF7E8);
  --duo-oscuro: color-mix(in oklab, var(--roast, var(--t3)) 62%, #0B0705);
  position: relative; isolation: isolate; overflow: hidden; background: var(--duo-claro); }
.duo img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.duo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--duo-oscuro); mix-blend-mode: lighten; pointer-events: none;
  transition: background-color var(--d-med); }
.duo::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--ruido); opacity: .2; mix-blend-mode: overlay; pointer-events: none; }
.muestra { border-radius: 50%; aspect-ratio: 1; }
.muestra--dib { display: grid; place-items: center; border: 1px dashed color-mix(in oklab, var(--ink) 45%, transparent); background: var(--paper); }
.dib { width: 62%; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.dib__fino { stroke-width: 1.2; }

/* ── Cabecera: toma el color de la sección que tiene debajo ───────────────────────── */
.hdr { --hdr-bg: var(--paper); --hdr-fg: var(--ink); position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr-h);
  background: var(--hdr-bg); color: var(--hdr-fg); border-bottom: 1px solid color-mix(in oklab, var(--hdr-fg) 14%, transparent);
  transition: background-color var(--d-med) var(--ease), color var(--d-med) var(--ease); }
.hdr.is-vivo { transition: none; } /* durante el héroe el color lo lleva el scroll: sin retraso */
.hdr__in { max-width: var(--max); height: 100%; margin-inline: auto; padding-inline: var(--gut); display: flex; align-items: center; gap: var(--s5); }
.marca { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; margin-right: auto; min-width: 0; }
.marca__grano { width: 14px; height: 18px; border-radius: 50%; background: var(--hdr-grano, var(--t3)); position: relative; flex: none;
  transition: background-color var(--d-med); }
.marca__grano::after { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1.4px; translate: -50% 0; border-radius: 2px;
  background: var(--hdr-bg); }
.marca__txt { font: 500 15px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: -.02em; white-space: nowrap; }
.hdr__nav ul { display: flex; gap: var(--s6); }
.hdr__nav a { font: 400 13px/1 var(--f-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .03em; text-decoration: none;
  padding-block: var(--s2); background: var(--tostado) 0 100% / 0 2px no-repeat;
  transition: background-size var(--d-med) var(--ease); }
.hdr__nav a[aria-current="page"] { background-size: 100% 2px; }
@media (hover: hover) { .hdr__nav a:hover { background-size: 100% 2px; } }
.hdr__solo-menu { display: none; }
.hdr__acciones { display: flex; align-items: center; gap: var(--s4); }
.hdr__bolsa { display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s3) 0 var(--s4);
  border: 1px solid currentColor; font: 400 13px/1 var(--f-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .03em;
  transition: background-color var(--d-fast), color var(--d-fast), var(--tx-toque); }
@media (hover: hover) { .hdr__bolsa:hover { background: var(--hdr-fg); color: var(--hdr-bg); } }
.hdr__n { min-width: 24px; height: 24px; display: inline-grid; place-items: center; background: var(--hdr-fg); color: var(--hdr-bg);
  font-size: 12px; transition: scale var(--d-ui) var(--ease); }
@media (hover: hover) { .hdr__bolsa:hover .hdr__n { background: var(--hdr-bg); color: var(--hdr-fg); } }
.hdr__n.is-salto { animation: salto var(--d-med) var(--ease); }
@keyframes salto { 40% { scale: 1.35; } }
.hdr__menu { display: none; align-items: center; gap: var(--s2); height: 40px; font: 400 13px/1 var(--f-mono); font-stretch: 87.5%; text-transform: uppercase; }
.hdr__menu-ico { width: 20px; height: 9px; border-block: 1.5px solid currentColor; transition: height var(--d-ui) var(--ease); }
.hdr__menu[aria-expanded="true"] .hdr__menu-ico { height: 1.5px; border-bottom: 0; }

@media (max-width: 860px) {
  .hdr__menu { display: inline-flex; }
  .hdr__nav { position: fixed; inset: var(--hdr-h) 0 auto; height: calc(100dvh - var(--hdr-h)); background: var(--hdr-bg); color: var(--hdr-fg);
    padding: var(--s7) var(--gut); display: flex; flex-direction: column; justify-content: space-between;
    visibility: hidden; opacity: 0; translate: 0 -12px;
    transition: opacity var(--d-ui) var(--ease), translate var(--d-ui) var(--ease), visibility 0s linear var(--d-ui); }
  .hdr__nav.is-open { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
  .hdr__nav ul { flex-direction: column; gap: var(--s4); }
  .hdr__nav a { font-size: clamp(28px, 9vw, 44px); font-stretch: 75%; letter-spacing: -.03em; }
  .hdr__solo-menu { display: block; }
  .hdr__dato { font-size: 12px; opacity: .8; }
}
@media (max-width: 420px) { .hdr__menu-txt { display: none; } .hdr__bolsa span:first-child { display: none; } .hdr__bolsa { padding: 0 var(--s2); } }

main { display: block; }

/* ── 00 · Héroe: el lote se tuesta mientras bajás ─────────────────────────────────── */
.tost { --p: 0; --roast: var(--t0); position: relative; background: var(--tost-bg, var(--paper)); color: var(--tost-fg, var(--ink)); }
html.js .tost { height: 250svh; } /* sin JS no hay recorrido: el héroe mide una pantalla */
.tost__pin { position: sticky; top: 0; min-height: 100svh; overflow-x: clip; }
.tost__in { container-type: inline-size; position: relative; max-width: var(--max); min-height: 100svh; margin-inline: auto;
  padding: calc(var(--hdr-h) + var(--s5)) var(--gut) var(--s5);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto auto; column-gap: var(--s5); }
.tost__kicker { grid-column: 1 / 7; grid-row: 1; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; align-self: start; }
.tost__lectura { grid-column: 8 / 13; grid-row: 1; display: flex; justify-content: flex-end; gap: var(--s5); font-size: 12px; text-transform: uppercase; }
.tost__lectura div { min-width: 0; }
/* Rótulo tenue con el color calculado por parada (≥ 4,7:1), no con opacidad: a .7 bajaba a 3,2:1 (medido el 3-oct). */
.tost__lectura dt { color: var(--tost-tenue, var(--ink-2)); letter-spacing: .04em; }
.tost__lectura dd { font-size: 20px; font-stretch: 75%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: var(--s1); white-space: nowrap; }
/* Cada lectura reserva el ancho de su valor más largo («218 °C», «12:40», «Primer crack»): al tiquear, «21 °C» → «100 °C»
   corría a las vecinas (CLS 0,0001–0,0004 por tramo de scroll, medido el 3-oct). Es mono: 1 ch = 1 carácter. */
.tost__lectura div:nth-child(1) dd { min-width: 6ch; }
.tost__lectura div:nth-child(2) dd { min-width: 5ch; }
.tost__lectura div:nth-child(3) dd { min-width: 12ch; }
/* 12 caracteres («CADA ORIGEN,») a 0,56 em cada uno en Martian Mono wdth 75 con −0,04 em → 6,72 em.
   100 / 6,72 = 14,88 cqw; se deja 14,4 de holgura. Medido en el navegador: ver el brief. */
.tost__h { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2; margin-top: clamp(16px, 5cqw, 72px);
  font: 400 14.4cqw/.86 var(--f-mono); font-stretch: 75%; letter-spacing: -.04em; text-transform: uppercase; }
/* Velo del titular (lo arma app.js): «ORIGEN,» y «punto.» pasan sobre la muestra y la foto tiene píxeles casi tan
   oscuros como la tinta (1,88:1 en el 5 % peor, parada 22 a 1440). El fondo queda a 4,7:1 de la tinta, así que junto a
   la letra todo píxel tiene que quedar al menos tan claro como el fondo: un velo translúcido por bloque no llega. La
   copia del titular pinta el fondo vivo alrededor de cada letra, difuso (sin borde) y en lighten: aclara las sombras de
   la foto y deja los brillos. Va entre la muestra (z 1, antes en el DOM) y el titular (z 2). Su caja es la del titular
   (misma fila, misma letra): no cambia la maqueta. Reemplaza el trazo de 0,07 em («calcomanía», QA 3-oct). */
.tost__velo { z-index: 1; color: var(--tost-velo, transparent); -webkit-text-stroke: 6px var(--tost-velo, transparent); filter: url(#tost-velo); mix-blend-mode: lighten; pointer-events: none; user-select: none; }
.tost__velo-def { position: absolute; width: 0; height: 0; overflow: hidden; }
.tost__h span { display: block; }
/* 1,2 em = los 2 ch de antes medidos en Newsreader itálica 300 (0,599 em por «0»): el ch cambia con la fuente de respaldo
   y corría el renglón 30 px al cargar la web (CLS 0,0044, 3-oct). */
.tost__h span + span { padding-left: 1.2em; }
/* «su punto.»: la voz de la taza contra la del tostador. Newsreader itálica 300 a 1,06 em ocupa ~4,3 em (cabe en los 5,8 libres). */
.tost__h .tost__h-it { font: italic 300 1.06em/.86 var(--f-serif); text-transform: none; letter-spacing: -.035em; }
.tost__muestra { grid-column: 6 / 13; grid-row: 2 / 5; z-index: 1; justify-self: end; align-self: center;
  width: min(44cqw, 66svh); translate: 0 4%; }
/* Al principio el grano está crudo: el lado oscuro del duotono arranca claro y se cierra con el tueste */
.tost__muestra { --duo-oscuro: color-mix(in oklab, var(--roast) calc(78% - var(--p) * 40%), #0B0705); --duo-claro: color-mix(in oklab, var(--roast) calc(40% + var(--p) * 12%), #FFF7E8); }
.tost__muestra img { scale: calc(1.04 + var(--p) * .08); rotate: calc(var(--p) * 24deg); }
.tost__lead { grid-column: 1 / 6; grid-row: 4; z-index: 2; max-width: 34ch; align-self: end; font-size: clamp(18px, 1.4cqw, 21px); line-height: 1.4; margin-top: var(--s6); }
/* Tenue por color calculado (≥ 4,7:1), no opacidad: a .8 bajaba a 3,73:1 en las paradas 20–25 (medido el 3-oct). */
.tost__lead em { display: block; margin-top: var(--s2); color: var(--tost-tenue, var(--ink-2)); }
.btn--tost { grid-column: 10 / 13; grid-row: 4; z-index: 2; justify-self: end; align-self: end; --b-bg: var(--tost-fg, var(--ink)); --b-fg: var(--tost-bg, var(--paper));
  --b-sombra: var(--tost-fg, var(--ink)); border-color: var(--tost-fg, var(--ink)); }
@media (hover: hover) { .btn--tost:hover { --b-bg: var(--brasa); --b-fg: #fff; border-color: var(--brasa); } }
/* El riel es el display del tostador: banda tinta fija. Sobre el fondo vivo no había color posible para la etapa
   pendiente: con el fondo en canela/avellana la tinta queda a ~4,7:1, y dos textos que den ≥ 4,5 contra ese fondo no
   pueden diferir 2:1 entre sí (activa/pendiente medía 1,00–1,14 en las paradas 18–26, QA 3-oct). Sobre tinta fija:
   activa = papel, pendiente = papel 55 % (5,4:1 contra la banda, 2,9:1 contra la activa) en las 41 paradas. */
.tost__riel { --riel-pend: #8F887F; /* = papel 55 % + tinta, en hex: las sondas de contraste no leen color(srgb …) */
  --riel-crack: #F0B191; /* = #F08A5D (brasa sobre oscuro) 60 % + papel: 10,3:1 contra la banda, 2,2:1 contra la pendiente */
  grid-column: 1 / -1; grid-row: 5; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: var(--s6); padding: var(--s3) var(--s4); background: var(--ink); color: var(--paper);
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.tost__riel::before, .tost__riel::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; }
.tost__riel::before { right: 0; background: currentColor; opacity: .22; }
.tost__riel::after { width: calc(var(--p) * 100%); background: var(--brasa); }
/* Etapa que todavía no llegó: --riel-pend sobre la banda (no opacidad). Sin JS ninguna está activa: todas en --riel-pend. */
.tost__riel li { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--riel-pend); transition: color var(--d-ui); position: relative; }
.tost__riel li::before { content: ""; position: absolute; left: 0; top: calc(-1 * var(--s3) - 4px); width: 2px; height: 10px; background: currentColor; }
.tost__riel li[data-activa] { color: var(--paper); }
.tost__riel li[data-etapa="3"][data-activa] b { color: var(--riel-crack); }
.tost__riel b { font-weight: 400; font-size: 13px; font-stretch: 75%; }

@media (max-width: 900px) {
  html.js .tost { height: 160svh; } /* en el teléfono el lote se tuesta en menos recorrido */
  .tost__in { grid-template-rows: auto auto auto auto auto auto; row-gap: var(--s3); padding-top: calc(var(--hdr-h) + var(--s4)); }
  .tost__lead em { display: none; }
  .tost__kicker { grid-column: 1 / -1; }
  .tost__h { font-size: 14.4cqw; }
  .tost__muestra { grid-column: 1 / -1; grid-row: 3; justify-self: center; width: min(70cqw, 36svh); translate: 0 0; margin-top: -2cqw; }
  .tost__lectura { grid-column: 1 / -1; grid-row: 4; justify-content: space-between; }
  /* En el teléfono la etapa toma lo que sobra, alineada a la derecha: 12 ch no entran a 320 px junto a las otras dos. */
  .tost__lectura div:nth-child(3) { flex: 1; text-align: right; }
  .tost__lectura div:nth-child(3) dd { min-width: 0; }
  .tost__lead { grid-column: 1 / -1; grid-row: 5; margin-top: 0; }
  .btn--tost { grid-column: 1 / -1; grid-row: 6; justify-self: start; }
  .tost__riel { grid-row: 7; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s4); margin-top: var(--s4); }
}

/* ── 01 · La escala ──────────────────────────────────────────────────────────────── */
.escala { background: var(--ink); color: var(--paper); padding-block: var(--s10) var(--s9); }
.escala__in { container-type: inline-size; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); }
.escala__cab { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--hdr-h) + var(--s6)); display: grid; gap: var(--s5); padding-right: var(--s5); }
.escala__lead { font-size: 20px; line-height: 1.45; color: var(--paper-ink-2); max-width: 32ch; }
.escala__nota { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--paper-ink-2); }
.escala__bandas { grid-column: 5 / 13; container-type: inline-size; display: grid; }
.banda { --fg: var(--paper); margin-left: calc(var(--i) * 4cqw); background: var(--c); color: var(--fg);
  border-top: 1px solid color-mix(in oklab, var(--paper) 14%, transparent); }
.banda:first-child { --fg: var(--ink); }
.banda__link { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) minmax(0, 1.1fr) 28px; grid-template-areas: "n nombre taza flecha" "n dato cafes flecha";
  column-gap: var(--s5); row-gap: var(--s3); align-items: start; padding: var(--s6) var(--s5); text-decoration: none; min-height: 168px;
  transition: padding var(--d-med) var(--ease), translate var(--d-med) var(--ease); }
.banda__n { grid-area: n; font-size: 12px; padding-top: .6em; }
.banda__nombre { grid-area: nombre; font: 400 clamp(26px, 5cqw, 64px)/.95 var(--f-mono); font-stretch: 75%; letter-spacing: -.04em; text-transform: uppercase; }
.banda__dato { grid-area: dato; font-size: 12px; line-height: 1.6; opacity: .85; }
.banda__taza { grid-area: taza; font-size: 19px; line-height: 1.35; font-style: italic; max-width: 30ch; }
.banda__cafes { grid-area: cafes; font-size: 12px; line-height: 1.6; opacity: .85; }
.banda__flecha { grid-area: flecha; width: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: translate var(--d-med) var(--ease); }
/* 3.ª pasada: el hover ya no engorda el padding (empujaba las bandas de abajo: CLS 0,009 por hover, medido). Se corre y se tuesta. */
@media (hover: hover) { .banda__link:hover { translate: calc(-1 * 2cqw) 0; } }
@media (hover: hover) { .banda__link:hover .banda__flecha { translate: 6px 0; } }
.banda__link:focus-visible { outline-color: var(--paper); outline-offset: -6px; }
.banda:first-child .banda__link:focus-visible { outline-color: var(--ink); }

@media (max-width: 960px) {
  .escala__cab { grid-column: 1 / -1; position: static; margin-bottom: var(--s7); padding-right: 0; }
  .escala__bandas { grid-column: 1 / -1; }
  .banda { margin-left: calc(var(--i) * 3cqw); }
  .banda__link { grid-template-columns: 2.4em minmax(0, 1fr) 24px; grid-template-areas: "n nombre flecha" "n taza taza" "n dato dato" "n cafes cafes"; padding: var(--s5) var(--s4); min-height: 0; }
  .banda__nombre { font-size: clamp(26px, 8cqw, 48px); }
  @media (hover: hover) { .banda__link:hover { translate: 0 0; } }
}

/* ── 02 · En el tambor esta semana ───────────────────────────────────────────────── */
.tanda { background: var(--paper); padding-block: var(--s10); }
.tanda__in { container-type: inline-size; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s5); }
.tanda__in > .num, .tanda__h { grid-column: 1 / -1; }
.tanda__h { max-width: 14ch; margin-bottom: var(--s7); }
.destacado { --roast-fondo: color-mix(in oklab, var(--roast) 72%, var(--ink)); grid-column: 1 / 8; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s5); align-items: start; }
/* «ETIOPÍA»: 7 caracteres × 0,56 em = 3,92 em → 100/3,92 = 25,5 cqw; 24,6 con holgura. */
.destacado__palabra { grid-column: 1 / -1; grid-row: 1; font: 400 24.6cqw/.8 var(--f-mono); font-stretch: 75%; letter-spacing: -.04em; text-transform: uppercase;
  color: color-mix(in oklab, var(--roast) 70%, var(--paper)); user-select: none; }
.destacado__muestra { grid-column: 2; grid-row: 1 / 3; margin-top: 9cqw; z-index: 1; width: 86%; justify-self: end; transition: rotate 1.2s var(--ease); }
@media (hover: hover) { .destacado:hover .destacado__muestra { rotate: 18deg; } }
/* La bolsa del café se apoya adelante del disco de grano, tapando el origen (Rye) */
.destacado__bolsa { grid-column: 2; grid-row: 1 / 3; z-index: 2; width: 44%; justify-self: start; align-self: start; margin-top: 22cqw; rotate: -4deg;
  transition: rotate var(--d-slow) var(--ease), translate var(--d-slow) var(--ease); }
@media (hover: hover) { .destacado:hover .destacado__bolsa { rotate: -1deg; translate: 0 -8px; } }
.destacado__info { grid-column: 1; grid-row: 2; display: grid; gap: var(--s4); padding-top: var(--s6); }
.destacado__banda { display: flex; align-items: center; gap: var(--s2); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.punto { width: 12px; height: 12px; border-radius: 50%; background: var(--roast); flex: none; }
.destacado__nombre { font: 400 clamp(30px, 6cqw, 52px)/1.02 var(--f-serif); letter-spacing: -.015em; }
.destacado__nombre a { text-decoration: none; background: var(--tostado) 0 100% / 0 3px no-repeat; transition: background-size var(--d-med) var(--ease); }
@media (hover: hover) { .destacado__nombre a:hover { background-size: 100% 3px; } }
.destacado__notas { font-size: 22px; font-style: italic; line-height: 1.3; color: color-mix(in oklab, var(--roast) 55%, var(--ink)); }
.destacado__txt { color: var(--ink-2); max-width: 40ch; }
.destacado__compra { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s3); }
.tanda__lista { grid-column: 9 / 13; align-self: end; display: grid; gap: var(--s5); }
.tanda__sub { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.tanda__filas { border-top: 1px solid var(--linea); }
.tanda__fila { --roast-fondo: color-mix(in oklab, var(--roast) 72%, var(--ink)); display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-areas: "p nombre add" "p dato add" "p notas precio";
  column-gap: var(--s3); row-gap: 2px; padding-block: var(--s4); border-bottom: 1px solid var(--linea); align-items: center; position: relative;
  transition: background-color var(--d-ui); }
@media (hover: hover) { .tanda__fila:hover { background: color-mix(in oklab, var(--roast) 9%, transparent); } }
.tanda__punto { grid-area: p; align-self: stretch; width: 6px; background: var(--roast); transition: width var(--d-ui) var(--ease); }
@media (hover: hover) { .tanda__fila:hover .tanda__punto { width: 14px; } }
.tanda__nombre { grid-area: nombre; font-size: 21px; line-height: 1.2; text-decoration: none; }
.tanda__nombre::after { content: ""; position: absolute; inset: 0; } /* toda la fila navega */
.tanda__dato { grid-area: dato; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.tanda__notas { grid-area: notas; font-size: 15px; font-style: italic; color: var(--ink-2); }
.tanda__precio { grid-area: precio; font-size: 13px; justify-self: end; align-self: end; }
.tanda__add { grid-area: add; position: relative; z-index: 1; width: 40px; height: 40px; border: 1px solid currentColor; display: grid; place-items: center; justify-self: end;
  transition: background-color var(--d-fast), color var(--d-fast), var(--tx-toque); }
.tanda__add svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (hover: hover) { .tanda__add:hover { background: var(--roast-fondo); color: var(--paper); border-color: var(--roast-fondo); } }
@media (max-width: 960px) {
  .destacado, .tanda__lista { grid-column: 1 / -1; }
  .tanda__lista { margin-top: var(--s7); }
}
@media (max-width: 560px) {
  .destacado { grid-template-columns: minmax(0, 1fr); }
  .destacado__muestra { grid-column: 1; grid-row: 2; width: 70%; justify-self: end; margin-top: -8cqw; }
  .destacado__bolsa { grid-column: 1; grid-row: 2; width: 40%; margin-top: 18cqw; margin-left: 4cqw; }
  .destacado__info { grid-row: 3; }
}

/* ── 03 · El taller ──────────────────────────────────────────────────────────────── */
.taller { background: var(--paper); padding-block: var(--s10); }
.taller__in { container-type: inline-size; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); }
.taller__foto { grid-column: 1 / 7; grid-row: 1; align-self: start; aspect-ratio: 5 / 3; }
.taller__foto2 { grid-column: 3 / 6; grid-row: 2; margin-top: -9cqw; z-index: 1; border: 6px solid var(--paper); align-self: start; aspect-ratio: 900 / 945; }
.taller__foto2 figcaption { position: absolute; left: 0; bottom: 0; z-index: 3; background: var(--paper); color: var(--ink); padding: var(--s2) var(--s3) 0 0; font-size: 11px; }
.taller__txt { grid-column: 8 / 13; grid-row: 1 / 3; display: grid; gap: var(--s5); align-content: start; }
.taller__lead { font-size: 22px; line-height: 1.35; font-style: italic; max-width: 30ch; }
.pasos { display: grid; margin-top: var(--s5); border-top: 1px solid var(--linea); }
.paso { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); column-gap: var(--s5); padding-block: var(--s5); border-bottom: 1px solid var(--linea); }
.paso__cifra { font-size: clamp(30px, 3.2cqw, 46px); line-height: 1; font-stretch: 75%; letter-spacing: -.04em; color: var(--t4); }
.paso__h { font-size: 20px; line-height: 1.25; font-weight: 500; margin-bottom: var(--s2); display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; }
.paso__h .mono { font-size: 11px; font-weight: 400; color: var(--ink-2); }
.paso p:not(.paso__cifra) { color: var(--ink-2); font-size: 17px; }
@media (max-width: 960px) {
  .taller__foto { grid-column: 1 / -1; }
  .taller__foto2 { grid-column: 6 / -1; grid-row: 2; margin-top: -12cqw; }
  .taller__txt { grid-column: 1 / -1; grid-row: 3; margin-top: var(--s7); }
}
@media (max-width: 480px) { .paso { grid-template-columns: minmax(0, 1fr); row-gap: var(--s2); } }

/* ── 07 · Suscripción: café + frecuencia, el precio se recalcula ───────────────────── */
.suscri { background: var(--t2); color: var(--ink); padding-block: var(--s6) var(--s10); }
.suscri :focus-visible { outline-color: var(--ink); } /* brasa sobre canela no llega a 3:1 */
.suscri__in { container-type: inline-size; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); margin-top: var(--s7);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s7); align-items: start; }
.suscri__txt { grid-column: 1 / 6; display: grid; gap: var(--s5); justify-items: start; }
.suscri__txt > p:not(.num) { font-size: 19px; max-width: 38ch; }
.suscri__puntos { display: grid; gap: var(--s2); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.suscri__puntos li { display: flex; gap: var(--s3); align-items: baseline; }
.suscri__puntos li::before { content: ""; width: 18px; height: 1px; background: currentColor; flex: none; translate: 0 -3px; }
.suscri__form { grid-column: 7 / 13; display: grid; gap: var(--s5); }
@media (hover: hover) { .suscri .btn--lleno:hover { --b-bg: var(--t5); border-color: var(--t5); } }
/* ── Pie grande ──────────────────────────────────────────────────────────────────── */
.pie { background: var(--ink); color: var(--paper); padding-block: var(--s9) var(--s5); }
.pie__in { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s8); }
.pie__lote { grid-column: 1 / 5; display: grid; gap: var(--s3); align-content: start; }
.pie__kicker, .pie__h { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; color: var(--paper-ink-2); }
.pie__lote-dato { font-size: 21px; line-height: 1.35; }
.pie__lote-dato span { font-style: italic; color: var(--paper-ink-2); }
.pie__cols { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.pie__cols ul { display: grid; gap: var(--s2); margin-top: var(--s4); font-size: 16px; }
.pie__cols a { text-decoration: none; background: var(--tostado) 0 100% / 0 2px no-repeat; transition: background-size var(--d-med) var(--ease); }
@media (hover: hover) { .pie__cols a:hover { background-size: 100% 2px; } }
.pie__marca { grid-column: 1 / -1; }
.pie__wordmark { width: 100%; height: auto; overflow: visible; }
.pie__wordmark text { font-family: var(--f-mono); font-stretch: 75%; font-weight: 400; font-size: 132px; }
.pie__escala { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: var(--s3); font-size: 11px; text-transform: uppercase; color: var(--paper-ink-2);
  border-top: 1px solid color-mix(in oklab, var(--paper) 18%, transparent); padding-top: var(--s2); }
.pie__escala li { min-width: 0; }
.pie__legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; font-size: 11px; color: var(--paper-ink-2); }
@media (max-width: 900px) { .pie__lote, .pie__cols { grid-column: 1 / -1; } }
@media (max-width: 600px) { .pie__cols { grid-template-columns: minmax(0, 1fr); } .pie__escala { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s2); } }

/* ── Tienda ─────────────────────────────────────────────────────────────────────── */
.tienda { background: var(--paper); padding-top: var(--hdr-h); }
.tienda__in { container-type: inline-size; max-width: var(--max); margin-inline: auto; padding: var(--s6) var(--gut) var(--s10); }
.migas { display: flex; gap: var(--s2); flex-wrap: wrap; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.migas a { text-decoration: none; background: var(--tostado) 0 100% / 0 2px no-repeat; transition: background-size var(--d-med) var(--ease); }
@media (hover: hover) { .migas a:hover { background-size: 100% 2px; } }
.tienda__cab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); align-items: end; margin-top: var(--s6); }
.tienda__h { grid-column: 1 / 8; font: 400 clamp(56px, 13cqw, 200px)/.82 var(--f-mono); font-stretch: 75%; letter-spacing: -.045em; text-transform: uppercase; }
.tienda__lead { grid-column: 8 / 13; font-size: 20px; line-height: 1.4; padding-bottom: var(--s3); max-width: 34ch; }
@media (max-width: 860px) { .tienda__h, .tienda__lead { grid-column: 1 / -1; } .tienda__lead { margin-top: var(--s5); } }

.filtros { margin-top: var(--s8); display: grid; gap: var(--s5); }
/* La regla: los cinco puntos de tueste son el filtro. Continua, sin huecos: es la escala. */
.regla { position: relative; display: grid; gap: var(--s3); padding-top: var(--s4); }
.regla__cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.regla__h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.regla__todo { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: var(--s2) 0; border-bottom: 1px solid transparent; transition: border-color var(--d-fast), var(--tx-toque); }
@media (hover: hover) { .regla__todo:hover { border-bottom-color: currentColor; } }
.regla__todo[aria-pressed="true"] { border-bottom-color: currentColor; font-weight: 600; }
.regla__puntos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.regla__punto { display: grid; grid-template-rows: auto auto; gap: var(--s2); text-align: left; min-width: 0; position: relative; }
.regla__chip { display: block; height: 44px; background: var(--c); transition: height var(--d-ui) var(--ease), opacity var(--d-ui), filter var(--d-ui), scale var(--d-ui) var(--ease), box-shadow var(--d-ui); }
.regla__punto:first-child .regla__chip { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 10%, transparent); }
.regla__nombre { font: 500 14px/1.2 var(--f-mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: -.01em; padding-right: 3em; }
.regla__n { position: absolute; right: var(--s3); bottom: 0; font-size: 12px; color: var(--ink-2); }
/* 3.ª pasada: el hover crece con scale desde abajo (antes height: empujaba la grilla, CLS 0,0025 por hover, medido) */
.regla__chip { transform-origin: 50% 100%; }
@media (hover: hover) { .regla__punto:not([aria-pressed="true"]):hover .regla__chip { scale: 1 1.27; } }
.regla[data-activa] .regla__punto[aria-pressed="false"] .regla__chip { opacity: .35; filter: saturate(.6); }
.regla__punto[aria-pressed="true"] .regla__chip { height: 64px; }
.regla__punto[aria-pressed="true"] .regla__nombre { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.regla__punto[data-vacio] .regla__nombre, .regla__punto[data-vacio] .regla__n { opacity: .45; }
.regla__aguja { position: absolute; top: 0; left: 0; width: 2px; height: 22px; background: var(--brasa); translate: var(--x, 0) 0; opacity: 0;
  transition: translate var(--d-med) var(--ease), opacity var(--d-fast); pointer-events: none; }
.regla__aguja::before { content: ""; position: absolute; left: 50%; top: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--brasa); translate: -50% 0; }
.regla[data-activa] .regla__aguja { opacity: 1; }
.regla__extremos { display: flex; justify-content: space-between; gap: var(--s4); font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 640px) {
  .regla__puntos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .regla__nombre { font-size: 11px; padding-right: 0; }
  .regla__n { position: static; }
  .regla__chip { height: 36px; }
  .regla__punto[aria-pressed="true"] .regla__chip { height: 48px; }
}
.filtros__fila { display: flex; justify-content: space-between; align-items: center; gap: var(--s5); flex-wrap: wrap; border-block: 1px solid var(--linea); padding-block: var(--s3); }
.cats { display: flex; flex-wrap: wrap; column-gap: var(--s5); row-gap: var(--s2); }
.cat { font-size: 19px; padding: var(--s2) 0; position: relative; color: var(--ink-2); transition: color var(--d-fast), var(--tx-toque); }
.cat sup { font-size: 10px; margin-left: 3px; vertical-align: super; }
.cat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--ink); scale: 0 1; transform-origin: left; transition: scale var(--d-ui) var(--ease); }
@media (hover: hover) { .cat:hover { color: var(--ink); } }
@media (hover: hover) { .cat:hover::after { scale: .4 1; } }
.cat[aria-pressed="true"] { color: var(--ink); font-style: italic; }
.cat[aria-pressed="true"]::after { scale: 1 1; }
.orden { display: inline-flex; align-items: center; gap: var(--s3); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.orden select { appearance: none; border: 0; border-bottom: 1px solid currentColor; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23170F0A' stroke-width='1.4'/%3E%3C/svg%3E") right 2px center / 11px no-repeat;
  padding: var(--s2) 22px var(--s2) 0; font: 400 13px/1.2 var(--f-mono); font-stretch: 87.5%; border-radius: 0; cursor: pointer; max-width: 100%; }
.filtros__estado { font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }

.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr)); column-gap: var(--s5); row-gap: var(--s8); margin-top: var(--s7); }
.card { --roast-fondo: color-mix(in oklab, var(--roast) 72%, var(--ink)); display: flex; flex-direction: column; min-width: 0; --roast-suave: color-mix(in oklab, var(--roast) 16%, var(--paper-2)); }
.card[data-salida] { opacity: 0; scale: .97; transition: opacity var(--d-fast) var(--ease), scale var(--d-fast) var(--ease); }
.card[data-entrada] { opacity: 0; scale: .97; }
.card[data-entrada="ya"] { opacity: 1; scale: 1; transition: opacity var(--d-med) var(--ease), scale var(--d-med) var(--ease); }
.card.is-oculta { display: none; }
.card__visual { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--paper-2);
  transition: background-color var(--d-med) var(--ease); }
.card__muestra { width: 74%; transition: rotate 1.1s var(--ease), scale var(--d-med) var(--ease); }
@media (hover: hover) { .card:hover .card__visual { background: var(--roast-suave); } }
@media (hover: hover) { .card:hover .card__muestra { rotate: 16deg; scale: 1.03; } }
.card__agtron { position: absolute; left: var(--s3); top: var(--s3); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.card__cuerpo { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s4); flex: 1; border-top: 3px solid var(--roast); }
.card[data-cat="accesorios"] .card__cuerpo { border-top-color: var(--ink); }
.card__banda { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.card__nombre { font: 400 24px/1.12 var(--f-serif); letter-spacing: -.01em; }
.card__nombre a { text-decoration: none; background: var(--tostado) 0 100% / 0 2px no-repeat; transition: background-size var(--d-med) var(--ease); }
@media (hover: hover) { .card__nombre a:hover, .card:hover .card__nombre a { background-size: 100% 2px; } }
.card__origen { font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .02em; line-height: 1.5; }
.card__notas { font-size: 16px; font-style: italic; line-height: 1.35; color: var(--ink-2); }
.card__pie { margin-top: auto; padding-top: var(--s3); display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.card__add { position: relative; height: 40px; padding: 0 var(--s4); border: 1px solid var(--ink); font: 500 12px/1 var(--f-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .03em;
  overflow: hidden; isolation: isolate; transition: color var(--d-ui) var(--ease), border-color var(--d-ui), var(--tx-toque); }
.card__add::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--roast-fondo); translate: 0 101%; transition: translate var(--d-ui) var(--ease); }
.card[data-cat="accesorios"] .card__add::before { background: var(--ink); }
@media (hover: hover) { .card__add:hover { color: var(--paper); border-color: var(--roast-fondo); } }
@media (hover: hover) { .card__add:hover::before { translate: 0 0; } }
.card__add.is-ok::before { translate: 0 0; background: var(--ink); }
.card__add.is-ok { color: var(--paper); }

.regla-mini { position: relative; display: inline-block; width: 76px; height: 12px; flex: none; }
.regla-mini__barra { position: absolute; left: 0; right: 0; top: 4px; height: 4px; background: linear-gradient(90deg, var(--t1), var(--t2) 22%, var(--t3) 45%, var(--t4) 68%, var(--t5)); }
.regla-mini__marca { position: absolute; top: 0; left: var(--pos); width: 2px; height: 12px; background: var(--ink); translate: -50% 0;
  box-shadow: 0 0 0 1.5px var(--paper); }
.regla-mini--nada { width: auto; height: auto; font-size: 11px; color: var(--ink-2); }

.grilla__vacia { display: grid; justify-items: center; text-align: center; gap: var(--s4); padding: var(--s9) var(--s5); border: 1px dashed var(--linea); margin-top: var(--s7); }
.grilla__vacia[hidden] { display: none; }
.grilla__vacia-disco { width: 120px; aspect-ratio: 1; border-radius: 50%; border: 1px dashed var(--ink-2);
  background: repeating-conic-gradient(from 0deg, transparent 0 8deg, color-mix(in oklab, var(--ink) 8%, transparent) 8deg 9deg); }
.grilla__vacia-h { font: 400 clamp(26px, 4cqw, 40px)/1.05 var(--f-mono); font-stretch: 75%; letter-spacing: -.03em; text-transform: uppercase; }
.grilla__vacia p:not(.grilla__vacia-h) { max-width: 44ch; color: var(--ink-2); }

/* ── Ficha ──────────────────────────────────────────────────────────────────────── */
.ficha__cab { --roast-fondo: color-mix(in oklab, var(--roast) 72%, var(--ink)); background: var(--paper); padding-top: var(--hdr-h); }
.ficha__in { container-type: inline-size; max-width: var(--max); margin-inline: auto; padding: var(--s6) var(--gut) var(--s9);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); }
.ficha__in > .migas { grid-column: 1 / -1; }
/* El nombre llena el ancho según su largo (--n caracteres, lo pone el JS): 0,56 em por carácter. */
.ficha__in { --pais-fs: min(17cqw, calc(97cqw / (var(--n, 7) * .56))); }
.ficha__h { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s6); display: grid; z-index: 0; }
.ficha__pais { font: 400 var(--pais-fs)/.82 var(--f-mono); font-stretch: 75%; letter-spacing: -.04em; text-transform: uppercase; }
.ficha__zona { font: italic 400 clamp(26px, 4.4cqw, 64px)/1.05 var(--f-serif); margin-top: var(--s3); color: color-mix(in oklab, var(--roast) 60%, var(--ink)); }
/* La bajada nunca queda bajo la muestra ni la bolsa (QA v2: «Degustación · tres puntos» tapado a todos los anchos). En
   escritorio la muestra arranca en la columna 5 y la bolsa en la 4 + 20 % de sus 3 columnas: la bajada se queda en 3,5
   columnas y, si es larga, baja de renglón parejo. Las bajadas cortas («Yirgacheffe», «Santos») no cambian. */
.ficha__in { --col: calc((100cqw - 11 * var(--s5)) / 12); }
@media (min-width: 961px) { .ficha__zona { max-width: calc(var(--col) * 3.5 + var(--s5) * 3); text-wrap: balance; } }
/* La muestra se apoya sobre la mitad de abajo del nombre (Rye: la bolsa tapa el titular) */
.ficha__muestra { grid-column: 5 / 9; grid-row: 2 / 4; align-self: start; margin-top: calc(var(--s6) + var(--pais-fs) * .5); z-index: 1; width: 100%; }
.ficha__dato { grid-column: 1 / 4; grid-row: 3; align-self: start; display: grid; gap: var(--s2); padding-top: var(--s7); }
.ficha__dato-n { font-size: clamp(56px, 9cqw, 140px); line-height: .85; font-stretch: 75%; letter-spacing: -.05em; color: var(--roast); }
.ficha__dato-u { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.ficha__dato-txt { font: italic 400 16px/1.35 var(--f-serif); color: var(--ink-2); max-width: 22ch; }
.ficha__compra { grid-column: 9 / 13; grid-row: 3; display: grid; gap: var(--s4); align-content: end; padding-top: var(--s6); }
.ficha__banda { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  border-top: 3px solid var(--roast); padding-top: var(--s3); }
.ficha__notas { font-size: 24px; font-style: italic; line-height: 1.25; }
.ficha__resumen { color: var(--ink-2); font-size: 17px; }
.molienda { display: grid; gap: var(--s3); }
.molienda legend { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--s3); }
.molienda__ops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.molienda__op { position: relative; display: grid; gap: var(--s2); justify-items: start; cursor: pointer; font: 400 12px/1.2 var(--f-mono); font-stretch: 87.5%; text-transform: uppercase; min-width: 0; }
.molienda__op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Muestra de molienda: la partícula crece de espresso a prensa (--g es su tamaño real a escala). */
.molienda__muestra { width: 100%; aspect-ratio: 1; border: 1px solid var(--linea);
  background: radial-gradient(circle, var(--roast) calc(var(--g) * .5), transparent calc(var(--g) * .5 + .6px)) 0 0 / calc(var(--g) * 2.1) calc(var(--g) * 2.1), var(--paper-2);
  transition: border-color var(--d-fast), box-shadow var(--d-fast), background-color var(--d-fast), var(--tx-toque); }
.molienda__muestra--grano { background: radial-gradient(ellipse 5px 7px, var(--roast) 92%, transparent 100%) 0 0 / 15px 17px, var(--paper-2); }
@media (hover: hover) { .molienda__op:hover .molienda__muestra { border-color: var(--ink); } }
.molienda__op input:checked + .molienda__muestra { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.molienda__op input:checked ~ span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.molienda__op input:focus-visible + .molienda__muestra { outline: 2px solid var(--brasa); outline-offset: 3px; }
.molienda__fija { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.molienda__fija[hidden], .molienda[hidden] { display: none; }
.ficha__accion { display: flex; gap: var(--s4); align-items: stretch; flex-wrap: wrap; }
.cant { display: inline-flex; border: 1px solid var(--ink); height: 48px; }
.cant button { width: 44px; display: grid; place-items: center; transition: background-color var(--d-fast), var(--tx-toque); }
@media (hover: hover) { .cant button:hover { background: var(--paper-2); } }
.cant svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.cant output { min-width: 32px; display: grid; place-items: center; font-size: 15px; }
.ficha__add { flex: 1; min-width: 180px; }
/* Cantidad sin JS: el − / + no funciona sin el script, así que no se muestra; queda el número nativo con el mismo marco.
   Con JS (la clase .js la pone el <head> antes de pintar) es al revés: el número se oculta y el − / + escribe en él. */
.cant-nativa { display: inline-flex; }
.cant-nativa input { width: 5.5em; height: 48px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font-size: 15px; text-align: center; transition: var(--tx-toque); }
.cant-nativa input:focus-visible { outline: 2px solid var(--brasa); outline-offset: 2px; }
html:not(.js) .cant, html.js .cant-nativa { display: none; }
.ficha__envio { font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; line-height: 1.6; }
@media (max-width: 960px) {
  /* Antes subía 0,35 del origen sobre el título y tapaba la bajada (QA v2: el pack a 320–960). Arranca debajo del h1. */
  .ficha__muestra { grid-column: 3 / 11; grid-row: 3; margin-top: var(--s4); align-self: start; }
  .ficha__dato { grid-column: 1 / -1; grid-row: 4; margin-top: var(--s5); padding-top: 0; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s4); align-items: end; }
  .ficha__dato-n { grid-row: 1 / 3; }
  .ficha__dato-txt { max-width: 32ch; }
  .ficha__compra { grid-column: 1 / -1; grid-row: 5; }
}

/* La curva */
.curva { background: var(--ink); color: var(--paper); padding-block: var(--s9); }
.curva__in { container-type: inline-size; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s7); }
.curva__cab { grid-column: 1 / 6; display: grid; gap: var(--s4); align-content: start; }
.curva__lead { color: var(--paper-ink-2); font-size: 18px; max-width: 34ch; }
.curva__fig { grid-column: 1 / -1; display: grid; gap: var(--s5); }
.curva__lienzo { position: relative; height: clamp(280px, 38cqw, 520px); touch-action: pan-y; cursor: crosshair; }
.curva__svg { width: 100%; height: 100%; overflow: visible; }
.curva__svg .grid { stroke: color-mix(in oklab, var(--paper) 14%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.curva__svg .fase { opacity: .14; }
.curva__svg .linea { fill: none; stroke: color-mix(in oklab, var(--roast) 55%, var(--paper)); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.curva__svg .ror { fill: none; stroke: color-mix(in oklab, var(--paper) 40%, transparent); stroke-width: 1.2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.curva__svg .hito { stroke: color-mix(in oklab, var(--paper) 45%, transparent); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.curva__svg .hito--crack { stroke: var(--brasa); stroke-dasharray: none; stroke-width: 1.5; }
/* Las líneas que se dibujan (curva, firma, carga, wordmark, quiz, confirmación, trayecto) se revelan con clip-path, no con
   stroke-dasharray: con vector-effect:non-scaling-stroke Chrome mide el guion en px de pantalla y pathLength en unidades
   del viewBox; con el SVG estirado el trazo quedaba en 1/k (79 % a 1440, hallazgo 10-oct). Todas son monótonas en su
   eje (el tiempo del tueste), así que recortar por x es dibujarlas. Sonda: scripts/qa/trazo-completo.mjs. */
.curva.is-dibujando .linea { clip-path: var(--trazo-0); animation: trazo 1.8s var(--ease-io) forwards; }
@keyframes trazo { from { clip-path: var(--trazo-0); } to { clip-path: var(--trazo-1); } }
.curva__marcas { position: absolute; inset: 0; pointer-events: none; }
.curva__marca { position: absolute; top: 0; translate: 6px 0; font: 400 11px/1.3 var(--f-mono); font-stretch: 87.5%; text-transform: uppercase; color: var(--paper-ink-2); white-space: nowrap; }
.curva__marca b { display: block; font-weight: 400; color: var(--paper); font-size: 13px; }
.curva__marca--crack b { color: #F08A5D; }
.curva__marca--der { translate: calc(-100% - 6px) 0; text-align: right; }
.curva__eje { position: absolute; left: 4px; font: 400 10px/1 var(--f-mono); color: var(--paper-ink-2); translate: 0 calc(-100% - 4px); }
.curva__cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--paper); pointer-events: none; }
.curva__cursor span { position: absolute; top: 50%; left: 8px; white-space: nowrap; background: var(--paper); color: var(--ink); padding: 4px 8px; font-size: 12px; }
.curva__cursor.is-izq span { left: auto; right: 8px; }
.curva__cursor[hidden] { display: none; }
.curva__datos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s4); border-top: 1px solid color-mix(in oklab, var(--paper) 20%, transparent); padding-top: var(--s4); }
.curva__datos div { display: grid; gap: var(--s1); min-width: 0; }
.curva__datos span { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--paper-ink-2); }
.curva__datos b { font-weight: 400; font-size: clamp(18px, 2cqw, 26px); font-stretch: 75%; letter-spacing: -.02em; }
.curva__datos .is-crack b { color: #F08A5D; }
@media (max-width: 860px) { .curva__cab { grid-column: 1 / -1; } .curva__datos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .curva__marca { font-size: 10px; } }
@media (max-width: 520px) { .curva__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .curva__marca span { display: none; } }

/* En la taza */
.taza { background: var(--paper); padding-block: var(--s9); }
.taza__in { container-type: inline-size; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s6); }
.taza__cab { grid-column: 1 / -1; display: grid; gap: var(--s4); }
.termo { grid-column: 1 / 6; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "e n" "e t"; column-gap: var(--s6); align-items: end; }
.termo__escala { grid-area: e; position: relative; height: 280px; width: 22px; border: 1px solid var(--ink); border-radius: 11px; justify-self: center; }
.termo__columna { position: absolute; left: 3px; right: 3px; bottom: 3px; border-radius: 8px; background: var(--roast);
  height: calc((var(--agua, 95) - 84) / 14 * (100% - 6px)); transition: height var(--d-slow) var(--ease), background-color var(--d-med); }
.termo__marca { position: absolute; left: calc(100% + 6px); bottom: calc((var(--t) - 84) / 14 * 100%); width: 10px; height: 1px; background: var(--ink); }
.termo__marca i { position: absolute; left: 14px; top: -6px; font: normal 400 11px/1 var(--f-mono); white-space: nowrap; }
.termo__n { grid-area: n; display: flex; align-items: flex-start; font-size: clamp(88px, 14cqw, 200px); line-height: .8; }
.termo__n .mono { font-stretch: 75%; letter-spacing: -.06em; }
.termo__u { font: 400 .28em/1 var(--f-mono); margin-left: .2em; margin-top: .1em; }
.termo__txt { grid-area: t; margin-top: var(--s4); max-width: 30ch; }
.termo__txt em { display: block; color: var(--ink-2); margin-top: var(--s2); }
.receta { grid-column: 7 / 13; align-self: end; display: grid; gap: var(--s4); border-top: 3px solid var(--roast); padding-top: var(--s4); }
.receta__metodo { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.receta__h { font: 400 clamp(26px, 3.4cqw, 40px)/1.1 var(--f-serif); letter-spacing: -.01em; }
.receta__datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); border-block: 1px solid var(--linea); padding-block: var(--s4); }
.receta__datos div { min-width: 0; }
.receta__datos dt { font-size: 11px; text-transform: uppercase; color: var(--ink-2); letter-spacing: .03em; }
.receta__datos dd { font-size: clamp(18px, 2cqw, 24px); font-stretch: 75%; margin-top: var(--s1); }
.receta__txt { color: var(--ink-2); }
.receta.is-cambio { animation: receta var(--d-med) var(--ease); }
@keyframes receta { from { opacity: .3; translate: 0 6px; } }
@media (max-width: 960px) { .termo, .receta { grid-column: 1 / -1; } }
@media (max-width: 480px) { .receta__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .termo { column-gap: var(--s5); grid-template-columns: 44px minmax(0, 1fr); } .termo__escala { height: 220px; } }

/* Origen */
.origen { background: var(--paper-2); padding-block: var(--s9); }
.origen__in { container-type: inline-size; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s5); }
.origen__in > .num { grid-column: 1 / -1; }
.origen__in > .h2 { grid-column: 1 / 5; }
.origen__txt { grid-column: 5 / 9; display: grid; gap: var(--s4); font-size: 19px; }
.origen__txt p:first-child::first-letter { font: 400 3.2em/.8 var(--f-mono); font-stretch: 75%; float: left; margin: .08em .1em 0 0; color: var(--roast); }
.origen__tabla { grid-column: 10 / 13; display: grid; align-content: start; border-top: 1px solid var(--linea); }
.origen__tabla div { display: grid; grid-template-columns: minmax(0, 6em) minmax(0, 1fr); gap: var(--s3); padding-block: var(--s3); border-bottom: 1px solid var(--linea); font-size: 12px; }
.origen__tabla dt { text-transform: uppercase; color: var(--ink-2); letter-spacing: .03em; }
@media (max-width: 960px) { .origen__in > .h2, .origen__txt { grid-column: 1 / -1; } .origen__tabla { grid-column: 1 / -1; margin-top: var(--s5); } }

/* Vecinos en la escala */
.vecinos { background: var(--ink); color: var(--paper); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid color-mix(in oklab, var(--paper) 16%, transparent); }
.vecino { --c: var(--t3); display: grid; gap: var(--s3); padding: var(--s8) var(--gut); text-decoration: none; position: relative; isolation: isolate; overflow: hidden; min-width: 0; }
.vecino + .vecino { text-align: right; border-left: 1px solid color-mix(in oklab, var(--paper) 16%, transparent); }
.vecino::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in oklab, var(--c) 72%, var(--ink)); translate: var(--desde, -101%) 0; transition: translate var(--d-med) var(--ease); }
.vecino--next { --desde: 101%; }
@media (hover: hover) { .vecino:hover::before { translate: 0 0; } }
.vecino span { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--paper-ink-2); transition: color var(--d-med); }
@media (hover: hover) { .vecino:hover span { color: currentColor; } }
.vecino b { font: 400 clamp(26px, 4vw, 56px)/1 var(--f-serif); }
.vecino[aria-disabled="true"] { pointer-events: none; opacity: .4; }
@media (max-width: 600px) { .vecinos { grid-template-columns: minmax(0, 1fr); } .vecino + .vecino { border-left: 0; border-top: 1px solid color-mix(in oklab, var(--paper) 16%, transparent); } }

/* ── La bolsa (mini-carrito lateral) ─────────────────────────────────────────────── */
.bolsa { position: fixed; inset: 0; z-index: 200; visibility: hidden; transition: visibility 0s linear var(--d-med); }
.bolsa.is-open { visibility: visible; transition-delay: 0s; }
.bolsa__velo { position: absolute; inset: 0; background: color-mix(in oklab, var(--ink) 55%, transparent); opacity: 0; transition: opacity var(--d-med) var(--ease); }
.bolsa.is-open .bolsa__velo { opacity: 1; }
.bolsa__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(460px, 100%); background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column; translate: 100% 0; transition: translate var(--d-med) var(--ease); outline: none; }
.bolsa.is-open .bolsa__panel { translate: 0 0; }
.bolsa__cab { display: flex; justify-content: space-between; align-items: center; padding: var(--s5) var(--s5) var(--s4); border-bottom: 1px solid var(--linea); }
.bolsa__h { font: 400 26px/1 var(--f-mono); font-stretch: 75%; letter-spacing: -.03em; text-transform: uppercase; display: flex; gap: var(--s3); align-items: baseline; }
.bolsa__h .mono { font-size: 13px; color: var(--ink-2); letter-spacing: 0; }
.bolsa__cerrar { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid transparent; transition: border-color var(--d-fast), rotate var(--d-ui) var(--ease), var(--tx-toque); }
@media (hover: hover) { .bolsa__cerrar:hover { border-color: currentColor; rotate: 90deg; } }
.bolsa__cerrar svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.bolsa__mezcla { padding: var(--s4) var(--s5); display: grid; gap: var(--s2); }
.bolsa__tira { display: flex; height: 14px; gap: 2px; }
.bolsa__tira span { background: var(--c); transition: flex-grow var(--d-med) var(--ease); min-width: 6px; }
.bolsa__promedio { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.bolsa__items { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s5); }
:is(.bolsa__item, .bolsa__fantasma) { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "d n x" "d m m" "d c p"; column-gap: var(--s4); row-gap: var(--s1);
  padding-block: var(--s4); border-bottom: 1px solid var(--linea); align-items: center; }
.bolsa__item.is-nuevo { animation: nuevo var(--d-slow) var(--ease); }
@keyframes nuevo { from { background: color-mix(in oklab, var(--roast) 22%, transparent); } }
.bolsa__disco { grid-area: d; width: 56px; aspect-ratio: 1; border-radius: 50%; align-self: start; }
.bolsa__disco.muestra--dib .dib { width: 70%; }
.bolsa__nombre { grid-area: n; font-size: 18px; line-height: 1.2; text-decoration: none; }
.bolsa__meta { grid-area: m; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-2); }
.bolsa__quitar { grid-area: x; width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink-2); transition: color var(--d-fast), var(--tx-toque); }
@media (hover: hover) { .bolsa__quitar:hover { color: var(--brasa); } }
.bolsa__quitar svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
:is(.bolsa__item, .bolsa__fantasma) .cant { grid-area: c; height: 36px; justify-self: start; }
:is(.bolsa__item, .bolsa__fantasma) .cant button { width: 34px; }
:is(.bolsa__item, .bolsa__fantasma) .cant output { font-size: 13px; min-width: 26px; }
:is(.bolsa__item, .bolsa__fantasma) .precio { grid-area: p; font-size: 14px; justify-self: end; }
.bolsa__vacia { display: grid; justify-items: center; gap: var(--s4); text-align: center; padding: var(--s8) var(--s5); }
.bolsa__vacia[hidden] { display: none; }
.bolsa__vacia-disco { width: 96px; aspect-ratio: 1; border-radius: 50%; border: 1px dashed var(--ink-2); }
.bolsa__vacia p { font-size: 20px; font-style: italic; }
.bolsa__pie { border-top: 1px solid var(--linea); padding: var(--s4) var(--s5) var(--s5); display: grid; gap: var(--s3); background: var(--paper-2); }
.bolsa__envio p { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.bolsa__envio-barra { height: 4px; background: color-mix(in oklab, var(--ink) 12%, transparent); margin-top: var(--s2); }
.bolsa__envio-barra span { display: block; height: 100%; width: 0; background: var(--brasa); transition: width var(--d-slow) var(--ease); }
.bolsa__envio.is-gratis .bolsa__envio-barra span { background: var(--t4); }
.bolsa__total { display: flex; justify-content: space-between; font-size: 18px; align-items: baseline; }
.bolsa__total .mono { font-size: 20px; font-stretch: 75%; }
.bolsa__nota { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); text-align: center; }
.bolsa .btn--lleno { width: 100%; }
.bolsa .btn--lleno::after { display: none; }
.bolsa.is-vacia .bolsa__mezcla, .bolsa.is-vacia .bolsa__pie { display: none; }
html.bolsa-abierta { overflow: hidden; }

/* ── Aparición al scroll: mejora progresiva. Sólo se oculta lo que el JS marcó (.rv) y
   sólo si está por debajo de la pantalla al cargar; un temporizador lo libera igual. ── */
.rv { opacity: 0; translate: 0 28px; }
.rv.is-in { opacity: 1; translate: 0 0; transition: opacity var(--d-slow) var(--ease), translate var(--d-slow) var(--ease); transition-delay: var(--rv-d, 0ms); }

/* ══ Segunda pasada: vida, café de verdad, venta e identidad ═══════════════════════════ */

/* ── Papel kraft en las superficies claras ─────────────────────────────────────────────── */
.kraft { position: relative; isolation: isolate; }
.kraft::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kraft); opacity: .5; pointer-events: none; }

/* ── Foto tratada en color: tinte al punto de tueste + grano. La curva recorta el borde de arriba. ── */
.foto { position: relative; isolation: isolate; overflow: hidden; margin: 0; background: var(--paper-2); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--roast, var(--t3)); mix-blend-mode: color; opacity: .3; pointer-events: none; }
.foto::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--ruido); opacity: .16; mix-blend-mode: overlay; pointer-events: none; }
/* El alto de la curva sale del ancho del contenedor (cqw), con piso y techo para no comerse la foto. */
.foto--curva { --curva-h: clamp(32px, 6cqw, 104px);
  -webkit-mask: var(--mascara-curva) 0 0 / 100% var(--curva-h) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--curva-h) - 1px) / 100% 100% no-repeat;
          mask: var(--mascara-curva) 0 0 / 100% var(--curva-h) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--curva-h) - 1px) / 100% 100% no-repeat; }
.foto--curva figcaption { z-index: 3; }

/* ── La bolsa: foto kraft real + etiqueta propia; el hover la tuesta un punto ──────────────── */
.bolsa-foto { --tueste: var(--roast); position: relative; aspect-ratio: 480 / 809; filter: drop-shadow(0 14px 14px rgb(23 15 10 / .16)); }
.bolsa-foto__img { display: block; width: 100%; height: 100%; object-fit: contain; transition: filter var(--d-slow) var(--ease); }
.etiqueta { position: absolute; left: 16%; top: 31%; width: 68%; height: auto; overflow: visible; }
.etq__papel { fill: #F7F2E8; }
.etq__banda { fill: var(--tueste); transition: fill var(--d-slow) var(--ease); }
.etq__marca { font-family: var(--f-mono); font-size: 7px; font-stretch: 87.5%; font-weight: 500; letter-spacing: .05em; fill: var(--ink-2); }
.etq__pais { font-family: var(--f-mono); font-stretch: 75%; font-weight: 500; letter-spacing: -.035em; fill: var(--ink); }
.etq__zona { font-family: var(--f-serif); font-style: italic; font-size: 15px; fill: color-mix(in oklab, var(--tueste) 62%, var(--ink)); transition: fill var(--d-slow) var(--ease); }
.etq__curva { fill: none; stroke: var(--tueste); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--d-slow) var(--ease); }
.etq__fin { fill: var(--brasa); }
.etq__dato { font-family: var(--f-mono); font-size: 7.4px; font-stretch: 87.5%; letter-spacing: .03em; fill: var(--ink-2); }
.card:focus-within .bolsa-foto { --tueste: var(--roast-mas); }
@media (hover: hover) { :is(.card, .destacado, .reco__item):hover .bolsa-foto { --tueste: var(--roast-mas); } }
.card:focus-within .bolsa-foto__img { filter: sepia(.32) saturate(1.3) brightness(.9); }
@media (hover: hover) { :is(.card, .destacado, .reco__item):hover .bolsa-foto__img { filter: sepia(.32) saturate(1.3) brightness(.9); } }

/* La tarjeta: la bolsa parada en la bandeja de cata */
.card__visual { overflow: hidden; }
.card__visual > .card__bolsa.bolsa-foto { position: absolute; left: 50%; top: 9%; height: 82%; translate: -50% 0; transition: translate var(--d-slow) var(--ease); }
@media (hover: hover) { .card:hover .card__visual > .card__bolsa.bolsa-foto { translate: -50% -6px; } }
.card__visual > .foto--acc { position: absolute; inset: 0; }
.card__visual > .foto--acc img { transition: scale var(--d-slow) var(--ease); }
@media (hover: hover) { .card:hover .card__visual > .foto--acc img { scale: 1.04; } }
.card__agtron { z-index: 3; }
.foto--acc + .card__agtron { background: var(--paper); padding: 2px 6px; }
.card__nota, .nota { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.nota__n { opacity: .85; }
.nota__estrellas { display: inline-block; flex: none; width: 64px; height: 12px; vertical-align: -1px;
  background: linear-gradient(90deg, currentColor var(--v), color-mix(in oklab, currentColor 26%, transparent) var(--v));
  -webkit-mask: var(--estrella) 0 0 / 12.8px 12px repeat-x; mask: var(--estrella) 0 0 / 12.8px 12px repeat-x; }
.card__nota { color: var(--ink); }
.card__nota > span:last-child { color: var(--ink-2); }

/* Packs: la franja de arriba es su recorrido por la escala */
.card--pack .card__cuerpo { border-top: 0; position: relative; padding-top: calc(var(--s4) + 6px); }
.card--pack .card__cuerpo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--franja); }
.card--pack .card__add::before { background: var(--ink); }
@media (hover: hover) { .card--pack .card__add:hover { border-color: var(--ink); } }
.pack-fan { position: absolute; inset: 0; }
.pack-fan__bolsa.bolsa-foto { position: absolute; bottom: 8%; height: 70%; left: calc(50% + (var(--i) - (var(--n) - 1) / 2) * 22%); translate: -50% 0;
  rotate: calc((var(--i) - (var(--n) - 1) / 2) * 7deg); transform-origin: 50% 100%; transition: rotate var(--d-slow) var(--ease); }
@media (hover: hover) { .card--pack:hover .pack-fan__bolsa.bolsa-foto { rotate: calc((var(--i) - (var(--n) - 1) / 2) * 12deg); } }
.pack__cafes { display: grid; gap: var(--s1); }
.pack__cafes li { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: var(--s2); align-items: baseline; }
.pack__cafes li::before { content: ""; grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; background: var(--c); translate: 0 1px; }
.pack__cafes a { font-size: 17px; line-height: 1.25; text-decoration: none; background: var(--tostado) 0 100% / 0 2px no-repeat; transition: background-size var(--d-med) var(--ease); }
@media (hover: hover) { .pack__cafes a:hover { background-size: 100% 2px; } }
.pack__cafes span { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }

/* ── La firma: la curva de un lote como separador, línea de carga y subrayado del wordmark ── */
.firma { position: relative; height: clamp(44px, 6vw, 96px); margin-inline: var(--gut); color: var(--ink); }
/* vw a propósito: la firma no vive en un contenedor; va de margen a margen de la ventana. */
.firma svg { display: block; width: 100%; height: 100%; overflow: visible; }
.firma__linea { fill: none; stroke: currentColor; stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .6; }
.firma__hito { position: absolute; display: flex; align-items: center; gap: 6px; translate: -3.5px -50%; font: 400 10px/1 var(--f-mono); font-stretch: 87.5%;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; transition: opacity var(--d-med) var(--ease) .9s; }
.firma__hito i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.firma__hito--crack i { background: var(--brasa); }
.firma__hito--fin { flex-direction: row-reverse; translate: calc(-100% + 3.5px) -50%; }
.firma.rv { opacity: 1; translate: none; }
.firma.rv .firma__linea { clip-path: var(--trazo-0); }
.firma.rv .firma__hito { opacity: 0; }
.firma.rv.is-in .firma__linea { clip-path: var(--trazo-1); transition: clip-path 1.6s var(--ease-io); }
.firma.rv.is-in .firma__hito { opacity: 1; }
.tanda > .firma { margin-bottom: var(--s8); margin-top: calc(-1 * var(--s7)); }
@media (max-width: 600px) { .firma__hito { font-size: 0; gap: 0; } }

.carga { position: fixed; left: 0; right: 0; top: calc(var(--hdr-h) - 12px); height: 24px; z-index: 60; pointer-events: none; }
.carga svg { display: block; width: 100%; height: 100%; overflow: visible; }
.carga path { fill: none; stroke: var(--brasa); stroke-width: 2; vector-effect: non-scaling-stroke; clip-path: var(--trazo-0);
  animation: trazo 900ms var(--ease-io) 80ms forwards, carga-fuera 420ms ease 1150ms forwards; }
@keyframes carga-fuera { to { opacity: 0; } }

.marca__txt { position: relative; }
.marca__curva { position: absolute; left: 0; right: 0; bottom: -8px; width: 100%; height: 6px; overflow: visible; }
.marca__curva path { fill: none; stroke: currentColor; stroke-width: 1.3; vector-effect: non-scaling-stroke; opacity: .7; }
html.js .marca__curva path { animation: trazo-re 1s var(--ease-io) .25s backwards; }
@media (hover: hover) { .marca:hover .marca__curva path { animation: trazo-re .8s var(--ease-io); stroke: var(--brasa); opacity: 1; } }
@keyframes trazo-re { from { clip-path: var(--trazo-0); } to { clip-path: var(--trazo-1); } }
.pie__curva { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ── Transición entre páginas: cortina del color de tueste del destino ───────────────────── */
@view-transition { navigation: auto; }
::view-transition-image-pair(root) { background: var(--cortina, var(--ink)); }
::view-transition-old(root) { animation: vt-sale 190ms var(--ease-io) both; }
::view-transition-new(root) { animation: vt-entra 250ms var(--ease) 170ms both; }
@keyframes vt-sale { to { opacity: 0; translate: 0 -28px; } }
@keyframes vt-entra { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.cortina { position: fixed; inset: 0; z-index: 400; background: var(--cortina-sal, var(--ink)); pointer-events: none; visibility: hidden; scale: 1 0; transform-origin: 50% 100%; }
.cortina.is-cubre { visibility: visible; scale: 1 1; transition: scale 180ms var(--ease-io); }
html.cortina-entra::after { content: ""; position: fixed; inset: 0; z-index: 400; background: var(--cortina, var(--ink)); pointer-events: none;
  animation: cortina-sube 240ms var(--ease) 40ms forwards; }
@keyframes cortina-sube { to { translate: 0 -100%; } }

/* ── Héroe: granos que caen (canvas), tablero que tiquea ─────────────────────────────────── */
.tost__granos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.tost__lectura dd { font-variant-numeric: tabular-nums; }
.tic { display: inline-block; }

/* ── Lo que dicen de cada tueste: la escala atraviesa la página en diagonal ───────────────── */
.dicen { background: var(--paper); padding-block: var(--s9) var(--s9); overflow-x: clip; }
.dicen__cab { container-type: inline-size; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s4); align-items: end; }
.dicen__cab .h2 { grid-column: 1 / 8; }
.dicen__lead { grid-column: 9 / 13; color: var(--ink-2); font-size: 18px; max-width: 34ch; }
.dicen__lead .mono { display: block; margin-top: var(--s2); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
/* A sangre: cinco pistas de la ventana, cada una 4,5 cqw más abajo; la franja es un paralelogramo continuo. */
.dicen__escala { --baja: 4.5cqw; container-type: inline-size; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: var(--s8); padding-bottom: calc(var(--baja) * 4); }
.dicen__punto { --fg: var(--paper); min-width: 0; display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--s4); background: var(--c); color: var(--fg);
  padding: calc(var(--baja) + var(--s5)) clamp(16px, 2cqw, 36px) calc(var(--baja) + var(--s6));
  translate: 0 calc(var(--i) * var(--baja)); clip-path: polygon(0 0, 100% var(--baja), 100% 100%, 0 calc(100% - var(--baja))); }
.dicen__punto[data-tinta="ink"] { --fg: var(--ink); }
.dicen__banda { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.dicen__banda span:first-child { font-weight: 600; }
.dicen__cita { font: italic 400 clamp(18px, 1.5cqw, 26px)/1.3 var(--f-serif); }
.dicen__quien { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.dicen__quien .mono { font-size: 11px; text-transform: uppercase; }
.dicen__cafe { justify-self: start; font-size: 17px; text-decoration: none; padding-block: var(--s1);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size var(--d-med) var(--ease); }
@media (hover: hover) { .dicen__cafe:hover { background-size: 30% 3px; } }
.dicen__cafe:focus-visible { outline-color: var(--fg); }
@media (max-width: 900px) {
  .dicen__cab .h2, .dicen__lead { grid-column: 1 / -1; }
  .dicen__escala { --baja: 0px; grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .dicen__punto { translate: none; clip-path: none; margin-left: calc(var(--i) * 3.5cqw); padding: var(--s5) var(--gut) var(--s6); }
  .dicen__cita { font-size: 20px; }
}

/* ── 03 · El productor: foto a sangre, el origen cruza el borde (dos capas recortadas) ────── */
.productor { background: var(--paper-2); overflow-x: clip; }
.productor__in { --fs: min(18.4cqw, 320px); --corte: 40cqw; container-type: inline-size; position: relative;
  min-height: max(640px, 56cqw); padding: var(--s9) var(--gut) calc(var(--fs) * .8 + 9cqw); }
.productor__foto { position: absolute; top: 0; bottom: 0; left: var(--corte); right: 0; }
.productor__velo { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, transparent 45%, rgb(23 15 10 / .5)); pointer-events: none; }
.productor__palabra { position: absolute; left: 3cqw; right: 0; bottom: 6cqw; z-index: 4; display: grid; pointer-events: none;
  font: 400 var(--fs)/.8 var(--f-mono); font-stretch: 75%; letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap; }
.productor__capa { grid-area: 1 / 1; }
/* El corte cae justo en el borde de la foto: 40 cqw del contenedor = 37 cqw de esta caja (que arranca en 3 cqw). */
.productor__capa--tinta { color: var(--t4); clip-path: inset(0 calc(100% - (var(--corte) - 3cqw)) 0 0); }
.productor__capa--papel { color: var(--paper); clip-path: inset(0 0 0 calc(var(--corte) - 3cqw)); }
.productor__txt { position: relative; z-index: 5; width: calc(var(--corte) - var(--gut) - var(--s7)); display: grid; gap: var(--s5); align-content: start; }
.productor__lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.productor__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); border-top: 1px solid var(--linea); padding-top: var(--s4); }
.productor__datos div { min-width: 0; display: grid; gap: var(--s1); align-content: start; }
.productor__datos dt { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.productor__datos dd { font-size: clamp(22px, 2.4cqw, 34px); font-weight: 200; font-stretch: 75%; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.productor__cerezas { position: absolute; z-index: 4; right: var(--gut); top: calc(var(--s8) + 3cqw); width: clamp(140px, 15cqw, 280px); aspect-ratio: 1; border: 6px solid var(--paper-2); }
@media (max-width: 900px) {
  .productor__in { --corte: 0px; min-height: 0; padding: 0 0 var(--s9); }
  .productor__foto { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; }
  /* En el teléfono el borde es horizontal: la palabra se centra sobre el pie de la foto y se corta arriba/abajo. */
  .productor__palabra { position: relative; left: auto; bottom: auto; margin: calc(var(--fs) * -.4) 0 0 3cqw; }
  .productor__capa--papel { clip-path: inset(0 0 50% 0); }
  .productor__capa--tinta { clip-path: inset(50% 0 0 0); }
  .productor__txt { width: auto; padding: var(--s7) var(--gut) 0; }
  .productor__cerezas { top: var(--s5); width: 30cqw; border-width: 4px; }
}
@media (max-width: 480px) { .productor__datos { grid-template-columns: minmax(0, 1fr); } }

/* ── 05 · ¿Qué café es para mí? ──────────────────────────────────────────────────────────── */
.quiz { background: var(--ink); color: var(--paper); padding-block: var(--s10); }
.quiz :focus-visible { outline-color: var(--t1); }
.quiz__in { container-type: inline-size; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s7); }
.quiz__cab { grid-column: 1 / 6; display: grid; gap: var(--s5); align-content: start; }
.quiz__lead { color: var(--paper-ink-2); font-size: 20px; max-width: 34ch; }
.quiz__foto { aspect-ratio: 1; width: min(100%, 480px); margin-top: var(--s4); }
.quiz__form { grid-column: 7 / 13; display: grid; gap: var(--s5); align-content: start; }
.quiz__progreso { height: 56px; }
.quiz__progreso svg { display: block; width: 100%; height: 100%; overflow: visible; }
.quiz__base, .quiz__avance { fill: none; vector-effect: non-scaling-stroke; }
.quiz__base { stroke: color-mix(in oklab, var(--paper) 22%, transparent); stroke-width: 1; stroke-dasharray: 3 5; }
/* el borde derecho del recorte va de 105 % (nada) a −5 % (entero): 105 % − avance × 110 %, los mismos márgenes que --trazo-0/1 */
.quiz__avance { stroke: var(--t1); stroke-width: 2.5; clip-path: inset(-100% calc(105% - var(--avance, 0) * 110%) -100% -5%); transition: clip-path var(--d-slow) var(--ease-io); }
.quiz__paso { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--paper-ink-2); }
.quiz__q { display: grid; }
.quiz__h { display: grid; gap: var(--s2); margin-bottom: var(--s5); font: italic 400 clamp(28px, 3.6cqw, 48px)/1.08 var(--f-serif); letter-spacing: -.015em; }
.quiz__h .mono { font-style: normal; font-size: 12px; letter-spacing: .04em; color: var(--paper-ink-2); }
.quiz__op { position: relative; display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; grid-template-areas: "l t d"; align-items: baseline; column-gap: var(--s4);
  padding: var(--s4) var(--s3) var(--s4) var(--s4); border-top: 1px solid color-mix(in oklab, var(--paper) 18%, transparent); cursor: pointer;
  transition: background-color var(--d-ui) var(--ease), padding var(--d-ui) var(--ease), var(--tx-toque); }
.quiz__op:last-of-type { border-bottom: 1px solid color-mix(in oklab, var(--paper) 18%, transparent); }
.quiz__op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quiz__op::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--c, var(--t2)); transition: width var(--d-ui) var(--ease); }
.quiz__l { grid-area: l; font-size: 12px; color: var(--paper-ink-2); }
.quiz__t { grid-area: t; font-size: 22px; line-height: 1.2; }
.quiz__d { grid-area: d; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--paper-ink-2); text-align: right; }
@media (hover: hover) { .quiz__op:hover { background: color-mix(in oklab, var(--paper) 7%, transparent); padding-left: var(--s5); } }
@media (hover: hover) { .quiz__op:hover::before { width: 3px; } }
.quiz__op:has(input:checked) { background: color-mix(in oklab, var(--paper) 12%, transparent); padding-left: var(--s5); }
.quiz__op:has(input:checked)::before { width: 8px; }
.quiz__op:has(input:checked) .quiz__l { color: var(--paper); }
.quiz__op:has(input:focus-visible) { outline: 2px solid var(--t1); outline-offset: -2px; }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.quiz__atras { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--paper-ink-2); padding: var(--s3) 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: color var(--d-fast), var(--tx-toque); }
@media (hover: hover) { .quiz__atras:hover { color: var(--paper); } }
.quiz__nav .btn { margin-left: auto; }
.btn--claro { --b-bg: var(--paper); --b-fg: var(--ink); --b-sombra: var(--paper); border-color: var(--paper); }
@media (hover: hover) { .btn--claro:hover { --b-bg: var(--t1); --b-fg: var(--ink); border-color: var(--t1); } }
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
@media (hover: hover) { .btn[aria-disabled="true"]:hover::after { translate: 5px 5px; } }
.quiz__res { display: grid; gap: var(--s5); }
.quiz__res:focus { outline: none; }
.quiz__res-h { font: italic 400 clamp(28px, 3.6cqw, 48px)/1.08 var(--f-serif); }
.quiz__res-k { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--paper-ink-2); }
.reco { display: grid; gap: var(--s4); }
.reco__item { --roast-fondo: color-mix(in oklab, var(--roast) 72%, var(--ink)); display: grid; grid-template-columns: clamp(76px, 9cqw, 112px) minmax(0, 1fr); column-gap: var(--s5);
  align-items: center; padding-block: var(--s4); border-top: 1px solid color-mix(in oklab, var(--paper) 18%, transparent); }
.reco__item .bolsa-foto { width: 100%; }
.reco__body { display: grid; gap: var(--s2); min-width: 0; }
.reco__k { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--paper-ink-2); }
.reco__n { font: 400 clamp(24px, 2.6cqw, 32px)/1.1 var(--f-serif); }
.reco__n a { text-decoration: none; background: var(--tostado) 0 100% / 0 2px no-repeat; transition: background-size var(--d-med) var(--ease); }
@media (hover: hover) { .reco__n a:hover { background-size: 100% 2px; } }
.reco__porque { font-size: 17px; font-style: italic; color: var(--paper-ink-2); line-height: 1.4; }
.reco__pie { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s2); }
.reco__add { height: 40px; padding: 0 var(--s4); border: 1px solid var(--paper); font: 500 12px/1 var(--f-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .03em;
  transition: background-color var(--d-ui) var(--ease), color var(--d-ui), var(--tx-toque); }
@media (hover: hover) { .reco__add:hover { background: var(--paper); color: var(--ink); } }
.reco__acc { display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap; }
@media (max-width: 960px) {
  .quiz__cab, .quiz__form { grid-column: 1 / -1; }
  .quiz__foto { width: min(70%, 420px); }
}
@media (max-width: 520px) {
  .quiz__op { grid-template-columns: 1.6em minmax(0, 1fr); grid-template-areas: "l t" "l d"; row-gap: var(--s1); }
  .quiz__d { text-align: left; }
  .quiz__t { font-size: 20px; }
}

/* ── 06 · Packs ────────────────────────────────────────────────────────────────────────────── */
.packs { background: var(--paper-2); padding-block: var(--s10); }
.packs__in { container-type: inline-size; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s7); }
.packs__cab { grid-column: 1 / 5; display: grid; gap: var(--s5); align-content: start; }
.packs__lead { font-size: 19px; color: var(--ink-2); max-width: 34ch; }
.packs__lista { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.pack-home .card__visual { background: var(--paper); }
@media (max-width: 960px) { .packs__cab, .packs__lista { grid-column: 1 / -1; } }
@media (max-width: 560px) { .packs__lista { grid-template-columns: minmax(0, 1fr); } }

/* ── Suscripción: campos, frecuencia y calendario de envíos ─────────────────────────────── */
.suscri__campo { display: grid; gap: var(--s2); }
.suscri__campo > span, .frec legend { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.suscri__campo select { appearance: none; width: 100%; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; color: var(--ink); cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23170F0A' stroke-width='1.4'/%3E%3C/svg%3E") right 4px center / 12px no-repeat;
  font: 400 21px/1.3 var(--f-serif); padding: var(--s2) 28px var(--s2) 0; transition: border-color var(--d-fast), box-shadow var(--d-fast), var(--tx-toque); }
@media (hover: hover) { .suscri__campo select:hover { box-shadow: 0 1px 0 var(--ink); } }
.frec legend { margin-bottom: var(--s3); }
.frec__ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--ink); }
.frec__op { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n u" "n d"; column-gap: var(--s3); align-items: end;
  padding: var(--s4) var(--s3); cursor: pointer; border-left: 1px solid color-mix(in oklab, var(--ink) 35%, transparent); min-width: 0;
  transition: background-color var(--d-ui) var(--ease), color var(--d-ui) var(--ease), var(--tx-toque); }
.frec__op:first-child { border-left: 0; }
.frec__op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.frec__n { grid-area: n; font-size: clamp(44px, 5cqw, 64px); font-weight: 200; font-stretch: 75%; letter-spacing: -.06em; line-height: .78; }
.frec__u { grid-area: u; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.frec__d { grid-area: d; font-size: 13px; font-weight: 600; }
@media (hover: hover) { .frec__op:hover { background: color-mix(in oklab, var(--ink) 9%, transparent); } }
.frec__op:has(input:checked) { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .frec__op:has(input:checked):hover { background: var(--t5); } }
.frec__op:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.cal { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; align-items: end; }
.cal__s { display: grid; gap: var(--s1); min-width: 0; }
.cal__s i { display: block; height: 8px; background: color-mix(in oklab, var(--ink) 16%, transparent); transition: height var(--d-med) var(--ease), background-color var(--d-med); }
.cal__s.is-envio i { height: 26px; background: var(--ink); }
.cal__s b { font-size: 10px; font-weight: 400; }
.cal__s b::before { content: "S"; opacity: .6; }
.suscri__precio { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); flex-wrap: wrap; border-top: 1px solid color-mix(in oklab, var(--ink) 30%, transparent); padding-top: var(--s4); }
.suscri__precio .precio del { opacity: .75; }
.precio__u { font-size: 12px; font-stretch: 87.5%; letter-spacing: 0; font-weight: 400; }
.suscri__mes { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.suscri__btn { justify-self: start; }
.suscri > .firma { color: var(--ink); }
@media (max-width: 960px) { .suscri__txt, .suscri__form { grid-column: 1 / -1; } }

/* ── Ficha: bolsa, modo de compra, envío, taza con humo, reseñas ────────────────────────── */
.ficha__bolsa { grid-column: 4 / 7; grid-row: 2 / 4; align-self: start; justify-self: end; width: 80%; z-index: 2; rotate: -3deg;
  margin-top: calc(var(--s6) + var(--pais-fs) * .66); }
.ficha__bolsa.foto--acc { aspect-ratio: 4 / 5; width: 100%; rotate: -2deg; }
/* Pack: el abanico es absoluto con inset:0 porque en la tarjeta llena la caja de la foto. En la ficha no tiene caja y
   medía 0 × 0 (las tres bolsas no se veían, heredado del prototipo): acá se le da la suya, con la proporción del abanico. */
.ficha__bolsa.pack-fan { position: relative; inset: auto; aspect-ratio: 5 / 4; rotate: 0deg; }
@media (max-width: 960px) { .ficha__in > .ficha__bolsa.pack-fan { grid-column: 1 / 8; width: 100%; align-self: end; margin-top: 0; } }
/* Accesorio con foto propia: la foto va al lado del dibujo, no encima (QA v2: la foto de la prensa pisaba el dibujo).
   Escritorio: foto en 1–4 debajo del nombre (no hay dato Agtron ahí), dibujo en 5–8. Móvil: mitad y mitad. */
.ficha__in:has(> .foto--acc) > .foto--acc { grid-column: 1 / 5; grid-row: 3; margin-top: var(--s6); width: 86%; justify-self: start; }
.ficha__in:has(> .foto--acc) > .ficha__muestra { grid-row: 3; margin-top: var(--s6); }
/* Con la foto y el dibujo en la fila 3, nada se apoya sobre el nombre: la bajada usa el ancho y queda en un renglón
   («Francesa 350 ml», «Manual Cerámico»). Y la compra arranca arriba de su fila: alineada al pie, la foto de 4/5 la
   empujaba bajo el pliegue (botón a 947 px a 1440×900, prototipo 748). */
@media (min-width: 961px) {
  .ficha__in:has(> .foto--acc) .ficha__zona { max-width: none; }
  .ficha__in:has(> .foto--acc) > .ficha__compra { align-content: start; }
  /* Pack: el nombre es «PACK» (4 caracteres, ocupa 5 columnas) y la bajada va en dos renglones al lado del abanico.
     La compra ya no espera a que termine el h1: ocupa las filas 2–3 a la derecha y apoya al pie (botón a 843 px, QA v2b). */
  .ficha__in:has(> .pack-fan) > .ficha__compra { grid-row: 2 / 4; }
}
@media (max-width: 960px) {
  .ficha__in:has(> .foto--acc) > .foto--acc { grid-column: 1 / 7; grid-row: 3; margin-top: var(--s4); width: 100%; }
  .ficha__in:has(> .foto--acc) > .ficha__muestra { grid-column: 7 / 13; align-self: center; }
}
.ficha__nota-link { justify-self: start; text-decoration: none; }
@media (hover: hover) { .ficha__nota-link:hover .nota > span:last-child { text-decoration: underline; text-underline-offset: 3px; } }
.ficha__nota { color: var(--ink); }
.modo { display: grid; }
.modo legend { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--s3); }
.modo__op { display: grid; gap: var(--s2); padding-block: var(--s3); border-top: 1px solid var(--linea); }
.modo__op:last-child { border-bottom: 1px solid var(--linea); }
.modo__lbl { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: var(--s3); align-items: center; cursor: pointer; }
.modo__lbl input { appearance: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.modo__lbl input::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); scale: 0; transition: scale var(--d-fast) var(--ease); }
.modo__lbl input:checked::before { scale: 1; }
@media (hover: hover) { .modo__lbl:hover .modo__t { text-decoration: underline; text-underline-offset: 3px; } }
.modo__t { font-size: 18px; }
.modo__ahorro { font-size: 11px; font-weight: 600; color: var(--roast-fondo); margin-left: var(--s2); white-space: nowrap; }
.modo__p { font-size: 15px; font-weight: 500; white-space: nowrap; }
.modo__frec { padding-left: calc(18px + var(--s3)); }
.modo__frec select { appearance: none; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23170F0A' stroke-width='1.4'/%3E%3C/svg%3E") right 2px center / 10px no-repeat;
  padding: var(--s1) 20px var(--s1) 0; font: 400 12px/1.4 var(--f-mono); font-stretch: 87.5%; cursor: pointer; max-width: 100%; }
@media (hover: hover) { .modo__frec select:hover { box-shadow: 0 1px 0 currentColor; } }
.envio-ficha { display: grid; gap: var(--s2); }
.envio-ficha__txt { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.envio-ficha .bolsa__envio-barra { position: relative; margin-top: 0; }
.envio-ficha .bolsa__envio-barra span { position: absolute; top: 0; bottom: 0; left: 0; transition: width var(--d-slow) var(--ease), left var(--d-slow) var(--ease); }
.envio-ficha .bolsa__envio-barra .envio-ficha__suma { background: repeating-linear-gradient(-45deg, var(--roast-fondo) 0 3px, transparent 3px 6px); }
.envio-ficha.is-gratis .bolsa__envio-barra .envio-ficha__suma { background: var(--t4); }

.taza__foto { grid-column: 1 / 6; grid-row: 2 / 4; aspect-ratio: 10 / 9; align-self: start; }
.taza__foto figcaption { position: absolute; left: 0; bottom: 0; z-index: 4; background: var(--paper); color: var(--ink); padding: var(--s2) var(--s3) 0 0; font-size: 11px;
  text-transform: uppercase; letter-spacing: .03em; }
.taza .termo { grid-column: 7 / 13; grid-row: 2; }
.taza .receta { grid-column: 7 / 13; grid-row: 3; }
/* Caja acotada adentro de la foto (top 4 % → 54 %): el humo nunca sale del recorte. */
.humo { position: absolute; left: 31%; width: 38%; top: 4%; height: 50%; z-index: 3; overflow: visible; fill: none; stroke: rgb(255 248 236 / .78); stroke-width: 3.2;
  stroke-linecap: round; filter: blur(2.4px); opacity: 0; pointer-events: none; }
.humo path { stroke-dasharray: 60 400; stroke-dashoffset: 60; }
.taza.is-humo .humo { opacity: 1; }
.taza.is-humo .humo path { animation: humo 2.1s var(--ease) 2 both; }
.taza.is-humo .humo path:nth-child(2) { animation-delay: .35s; }
.taza.is-humo .humo path:nth-child(3) { animation-delay: .7s; }
@keyframes humo { 0% { stroke-dashoffset: 60; opacity: 0; translate: 0 8px; } 25% { opacity: .95; } 100% { stroke-dashoffset: -190; opacity: 0; translate: 0 -26px; } }
html.en-pausa .humo path, html.en-pausa .carga path { animation-play-state: paused; }
@media (max-width: 960px) {
  .ficha__bolsa { grid-column: 2 / 6; grid-row: 3; margin-top: calc(var(--pais-fs) * .1); width: 82%; justify-self: start; }
  .taza__foto { grid-column: 1 / -1; grid-row: auto; width: min(100%, 560px); }
  .taza .termo, .taza .receta { grid-column: 1 / -1; grid-row: auto; }
}

.resenas { background: var(--paper); padding-block: var(--s9); }
.resenas__in { container-type: inline-size; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s6); }
.resenas__cab { grid-column: 1 / -1; display: grid; gap: var(--s4); }
.resenas__prom { grid-column: 1 / 5; display: grid; gap: var(--s3); align-content: start; }
.resenas__n { font-size: clamp(96px, 14cqw, 200px); font-weight: 100; line-height: .9; font-stretch: 75%; letter-spacing: -.07em; color: var(--roast-fondo); font-variant-numeric: tabular-nums; }
.resenas__de { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.resenas__lista { grid-column: 5 / 13; display: grid; }
.resena { display: grid; gap: var(--s3); padding-block: var(--s5); border-top: 1px solid var(--linea); }
.resena:last-child { border-bottom: 1px solid var(--linea); }
.resena .nota__estrellas { color: var(--roast-fondo); }
.resena__txt { font: italic 400 clamp(21px, 2.3cqw, 30px)/1.3 var(--f-serif); letter-spacing: -.01em; max-width: 46ch; }
.resena__quien { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
@media (max-width: 860px) { .resenas__prom, .resenas__lista { grid-column: 1 / -1; } }

/* ── Tienda: búsqueda instantánea ─────────────────────────────────────────────────────────── */
.buscar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--s4); border-bottom: 2px solid var(--ink);
  transition: border-color var(--d-fast), box-shadow var(--d-fast), var(--tx-toque); }
@media (hover: hover) { .buscar:hover { box-shadow: 0 1px 0 var(--ink); } }
.buscar:focus-within { border-bottom-color: var(--brasa); box-shadow: 0 2px 0 var(--brasa); }
.buscar__lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.buscar__in { appearance: none; min-width: 0; width: 100%; border: 0; border-radius: 0; background: transparent; color: var(--ink); padding: var(--s3) 0;
  font: italic 400 clamp(20px, 2.6cqw, 34px)/1.2 var(--f-serif); }
.buscar__in::placeholder { color: var(--ink-2); opacity: 1; }
.buscar__in:focus { outline: none; }
.buscar__in::-webkit-search-cancel-button { display: none; }
.buscar__x { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid transparent; transition: border-color var(--d-fast), color var(--d-fast), var(--tx-toque); }
@media (hover: hover) { .buscar__x:hover { border-color: currentColor; color: var(--brasa); } }
.buscar__x svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.card mark { background: color-mix(in oklab, var(--t1) 55%, transparent); color: inherit; padding: 0 1px; }
.card[data-cat="packs"] .card__visual { background: var(--paper-2); }

/* ── Partículas (molido que se desparrama): un solo canvas fijo, sólo mientras dura el efecto ── */
.particulas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 250; pointer-events: none; } /* sobre la bolsa (200), bajo la cortina (400) */
/* 100vw/100vh a propósito: es una capa de la ventana, no de un contenedor */

/* ── 3.ª pasada · cada toque responde ──────────────────────────────────────────────────────
   Un vocabulario corto que se repite en todo lo que se toca (inventario completo en el brief):
   (a) tostado — hover y foco de teclado: el control sube un punto de tueste y vuelve.
   (b) grano   — al pulsar saltan 3–8 granos desde el punto de contacto (efectos.js: un canvas, tope global 48).
   (c) curva   — la curva de tueste se traza como confirmación: agregar a la bolsa, suscribirse, terminar el quiz.
   (d) tic     — la cifra que cambia cae en su celda como en el tablero del tostador (170 ms, el del héroe).
   (e) presión — scale .97 + sombra interior en 90 ms (Web Animations: no pisa las transiciones de cada control).
   Error: «se quema» — un sacudón de 240 ms con filo de brasa. Todo es transform/opacity/filter/box-shadow: 0 layout.
   Los hover van en @media (hover: hover): en táctil no quedan pegados. */
:root {
  /* Un punto de tueste: el tratamiento de la bolsa al hover (sepia .32 · saturate 1.3 · brightness .9), apenas
     más suave porque acá cae también sobre texto. Contraste en hover medido por píxel: ver el brief. */
  --f-tostar: sepia(.3) saturate(1.3) brightness(.92);
  --tx-toque: filter var(--d-ui) var(--ease);
  /* Sombra interior de la presión: la tinta al 32 %, como el borde de una bolsa apretada */
  --sh-presion: inset 0 2px 7px rgb(23 15 10 / .32);
}
:where(.hdr__menu, .orden, .modo__lbl, .modo__frec, .banda, .vecino, .ficha__nota-link) { transition: var(--tx-toque); }
@media (hover: hover) {
  :is(.btn, .hdr__bolsa, .hdr__menu, .bolsa__cerrar, .bolsa__quitar, .cant button, .card__add, .tanda__add, .reco__add,
      .regla__todo, .cat, .orden, .buscar, .buscar__x, .quiz__op, .quiz__atras, .frec__op, .suscri__campo select, .modo__lbl,
      .modo__frec, .saltar, .banda, .vecino, .ficha__nota-link):hover,
  .molienda__op:hover .molienda__muestra,
  .regla .regla__punto[aria-pressed]:hover .regla__chip { filter: var(--f-tostar); }
  /* un punto frío se entibia al pasar: anticipa el calor */
  .regla[data-activa] .regla__punto[aria-pressed="false"]:hover .regla__chip { opacity: .7; }
}
:is(.btn, .hdr__bolsa, .hdr__menu, .bolsa__cerrar, .bolsa__quitar, .cant button, .card__add, .tanda__add, .reco__add,
    .regla__todo, .cat, .buscar__x, .quiz__atras, .saltar, .vecino, .ficha__nota-link, .suscri__campo select):focus-visible,
:is(.orden, .buscar, .quiz__op, .frec__op, .modo__lbl, .modo__frec, .banda):has(:focus-visible),
.molienda__op:has(input:focus-visible) .molienda__muestra,
.regla .regla__punto[aria-pressed]:focus-visible .regla__chip { filter: var(--f-tostar); }

/* Subrayado que se tuesta, también en los enlaces que no lo tenían */
.bolsa__nombre, .tanda__nombre { background: var(--tostado) 0 100% / 0 2px no-repeat; transition: background-size var(--d-med) var(--ease); }
.dicen__cafe { background-image: linear-gradient(currentColor, currentColor), var(--tostado); background-position: 0 100%, 0 100%;
  background-size: 100% 1px, 0 3px; background-repeat: no-repeat; transition: background-size var(--d-med) var(--ease); }
.ficha__nota-link .nota > span:last-child { background: var(--tostado) 0 100% / 0 2px no-repeat; transition: background-size var(--d-med) var(--ease); }
@media (hover: hover) {
  .bolsa__nombre:hover, .tanda__fila:hover .tanda__nombre { background-size: 100% 2px; }
  .dicen__cafe:hover { background-size: 0 1px, 100% 3px; }
  .ficha__nota-link:hover .nota > span:last-child { text-decoration: none; background-size: 100% 2px; }
}
:is(.bolsa__nombre, .migas a, .hdr__nav a, .pie__cols a, .card__nombre a, .reco__n a, .destacado__nombre a, .pack__cafes a):focus-visible { background-size: 100% 2px; }
.dicen__cafe:focus-visible { background-size: 0 1px, 100% 3px; }

/* Presión con movimiento reducido: el estado cambia al instante, sin escala */
.is-presion { box-shadow: var(--sh-presion); }
a.is-presion { box-shadow: none; opacity: .8; }

/* La regla se calienta: el punto elegido brilla con filo de brasa; el resto ya se enfría (opacity .35 + saturate .6) */
.regla__punto[aria-pressed="true"] .regla__chip { filter: saturate(1.2);
  box-shadow: inset 0 3px 0 var(--brasa), 0 10px 22px -12px color-mix(in oklab, var(--brasa) 80%, transparent); }

/* Búsqueda: cada letra tuesta una pizca del borde (--b-k = letras / 12, lo pone efectos.js) */
.buscar { position: relative; }
.buscar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--tostado);
  scale: var(--b-k, 0) 1; transform-origin: 0 50%; transition: scale var(--d-ui) var(--ease); pointer-events: none; }

/* Quiz: la opción elegida se pinta con el tueste al que empuja (--c en cada opción) */
.quiz__op:has(input:checked) { background: color-mix(in oklab, var(--c, var(--t2)) 40%, color-mix(in oklab, var(--paper) 12%, transparent)); }

/* La curva como confirmación: se traza bajo lo que se confirmó y se apaga (420 ms + 180 ms) */
.bolsa__item, .quiz__res-h { position: relative; }
.trazo { position: absolute; left: 0; right: 0; bottom: -1px; height: 16px; width: 100%; overflow: visible; pointer-events: none; }
.trazo path { fill: none; stroke: var(--brasa); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke;
  clip-path: var(--trazo-0); }

/* Vuelo a la bolsa: un clon de la bolsa del café (o un grano de su color) cruza la pantalla y se va */
.vuelo { position: fixed; z-index: 250; margin: 0; pointer-events: none; }
.vuelo__in { width: 100%; height: 100%; }
.vuelo__in > * { width: 100% !important; height: 100% !important; margin: 0 !important; position: relative !important;
  inset: auto !important; translate: none !important; rotate: none !important; scale: none !important; } /* el clon pierde su contexto: se lo normaliza */
.vuelo__grano { display: block; border-radius: 50%; background: var(--roast, var(--t3)); }

/* Desgrane: el ítem que se quita deja su fantasma, que se deshace en granos (el dato ya se fue: no espera a nadie) */
.bolsa__fantasma { position: absolute; margin: 0; pointer-events: none; background: var(--paper); z-index: 1; }

/* El trayecto: la curva de tueste en el borde derecho marca dónde estás mientras scrolleás o saltás a una sección */
.trayecto { position: fixed; right: 4px; top: calc(var(--hdr-h) + var(--s4)); bottom: var(--s4); width: 10px; z-index: 40;
  pointer-events: none; opacity: 0; transition: opacity var(--d-med) var(--ease); }
.trayecto.is-vivo { opacity: 1; }
.trayecto svg { display: block; width: 100%; height: 100%; overflow: visible; }
.trayecto path { fill: none; vector-effect: non-scaling-stroke; }
.trayecto__base { stroke: color-mix(in oklab, var(--brasa) 30%, transparent); stroke-width: 1; }
.trayecto__av { stroke: var(--brasa); stroke-width: 2; clip-path: inset(-5% -100% calc(105% - var(--av, 0) * 110%) -100%); } /* vertical: recorta por abajo */

/* Menú móvil: los enlaces entran escalonados (40 ms) al abrir */
@media (max-width: 860px) {
  .hdr__nav li { transition: opacity var(--d-ui) var(--ease), translate var(--d-ui) var(--ease); }
  .hdr__nav:not(.is-open) li { opacity: 0; translate: 0 12px; }
  .hdr__nav.is-open li:nth-child(2) { transition-delay: 40ms; }
  .hdr__nav.is-open li:nth-child(3) { transition-delay: 80ms; }
  .hdr__nav.is-open li:nth-child(4) { transition-delay: 120ms; }
  .hdr__nav.is-open li:nth-child(n+5) { transition-delay: 160ms; }
}

/* ── Lenis (scroll con inercia, vendoreado): el scroll-behavior nativo no se pelea con él ── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  html.js .tost { height: auto; }
  .tost__pin { position: relative; }
  .rv { opacity: 1; translate: none; }
  .curva.is-dibujando .linea { clip-path: none; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .carga, .tost__granos, .humo, .particulas, .cortina { display: none; }
  html.cortina-entra::after { display: none; }
  .firma.rv .firma__linea { clip-path: none; }
  .firma.rv .firma__hito { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   TEMA · lo que el prototipo no dibuja (plan §3.4). Todo con los tokens de arriba; nada de valores sueltos.
   ════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Enlaces que en el prototipo eran botones (navegan sin JS) ─────────────────────────────── */
a.cat, a.hdr__bolsa, a.regla__punto, a.card__add, .bolsa__nota a { text-decoration: none; }
a.regla__punto { color: inherit; }
.cat[aria-current="page"] { color: var(--ink); font-style: italic; }
.cat[aria-current="page"]::after { scale: 1 1; }
.bolsa__nota a { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; color: var(--ink); }
@media (hover: hover) { .bolsa__nota a:hover { background-image: var(--tostado); background-size: 100% 2px; } }
/* Sin JS el buscador y el orden no hacen nada: no se muestran (plan 1.14) */
html:not(.js) :is(.filtros .buscar, .orden) { display: none; }
/* Una categoría como título: su palabra más larga manda el tamaño (--n la escribe PHP) */
.tienda__h--cat { font-size: clamp(40px, min(13cqw, calc(56cqw / (var(--n, 8) * .58))), 200px); }
@media (max-width: 860px) { .tienda__h--cat { font-size: clamp(36px, min(13cqw, calc(96cqw / (var(--n, 8) * .58))), 200px); } }

/* ── Escala de la home: en las dos bandas claras (canela y avellana) el dato al 85 % daba 4,20 y 4,35:1 contra la
   banda (axe, igual en el prototipo). Opacidad entera: 4,8 y 5,5:1. Cambio de aspecto declarado en la entrega. ── */
.escala__bandas .banda:nth-child(-n+2) :is(.banda__dato, .banda__cafes) { opacity: 1; }
/* Lo mismo sobre la canela de la suscripción (07): «/ 07» y el precio tachado daban 3,63:1 (axe, igual en el prototipo). */
.suscri :is(.num span, .precio del) { opacity: 1; }

/* ── Aviso de la suscripción de demostración (ficha, home 07, bolsa, checkout) ──────────── */
.aviso-demo { font: 400 11px/1.45 var(--f-mono); font-stretch: 87.5%; letter-spacing: .02em; color: var(--ink-2);
  padding: var(--s2) var(--s3); border-left: 2px solid var(--brasa); background: color-mix(in oklab, var(--paper) 70%, transparent); }
.suscri .aviso-demo { color: var(--ink); background: color-mix(in oklab, var(--paper) 55%, transparent); }
.modo .aviso-demo { margin-top: var(--s2); }

/* ── Avisos de Woo (agregado sin JS, errores del checkout, cupones) ───────────────────── */
.ficha__avisos { grid-column: 1 / -1; }
.ficha__avisos:empty, .woocommerce-notices-wrapper:empty { display: none; }
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) {
  list-style: none; margin: 0 0 var(--s5); padding: var(--s4) var(--s5); display: flow-root; border: 1px solid var(--linea); border-left: 3px solid var(--t3);
  background: color-mix(in oklab, var(--paper-2) 60%, var(--paper)); font-size: 17px; line-height: 1.4; }
.woocommerce-error { border-left-color: var(--brasa); }
.woocommerce-error li { margin: 0; }
.woocommerce-error li + li { margin-top: var(--s2); }
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { content: none; }
:is(.woocommerce-message, .woocommerce-info) .button { float: right; margin: 0 0 0 var(--s4); }

/* ── Páginas: genérica, Nosotros, Contacto, 404, búsqueda ──────────────────────────────── */
.pagina { padding-top: var(--hdr-h); background: var(--paper); }
.pagina__in { container-type: inline-size; max-width: var(--max); margin-inline: auto; padding: var(--s6) var(--gut) var(--s10); }
.pagina__h { margin: var(--s6) 0 var(--s6); font: 400 clamp(40px, 9cqw, 132px)/.86 var(--f-mono); font-stretch: 75%;
  letter-spacing: -.045em; text-transform: uppercase; text-wrap: balance; }
.pagina__h em { font: italic 400 .8em/.9 var(--f-serif); text-transform: none; letter-spacing: -.03em; }
.pagina__lead { font-size: clamp(19px, 2.2cqw, 24px); line-height: 1.4; max-width: 40ch; }
.prosa { max-width: 68ch; display: grid; gap: var(--s4); }
.prosa :is(h2, h3) { font: 400 clamp(24px, 3cqw, 34px)/1.1 var(--f-mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: -.03em; margin-top: var(--s5); }
.prosa a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prosa :is(ul, ol) { padding-left: 1.2em; list-style: revert; }
.pagina__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); margin-top: var(--s6); }
.pagina--404 .num { margin-top: var(--s6); }
.pagina--404 .num b { font-size: clamp(96px, 22cqw, 280px); }
.buscar--404 { max-width: 640px; margin-top: var(--s6); }
/* A ≤ 480 px la etiqueta en línea dejaba 91–161 px al campo y el ejemplo («Perú, chocolate, natural…», 191 px) se cortaba
   (QA v2): la etiqueta sube y el campo toma el ancho entero. */
@media (max-width: 480px) { .buscar--404 { grid-template-columns: minmax(0, 1fr); } .buscar--404 .buscar__lbl { padding-top: var(--s2); } }
.nos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s6); align-items: start; }
.nos__foto { grid-column: 1 / 7; aspect-ratio: 5 / 3; }
.nos__foto img { width: 100%; height: 100%; object-fit: cover; }
.nos__txt { grid-column: 8 / 13; }
.nos__valores { margin-block: var(--s8) var(--s6); }
@media (max-width: 860px) { .nos__foto, .nos__txt { grid-column: 1 / -1; } }
.canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); border-top: 1px solid var(--linea); margin-top: var(--s7); }
.canal { display: grid; gap: var(--s2); align-content: start; padding: var(--s5) var(--s5) var(--s6) 0; border-bottom: 1px solid var(--linea); min-width: 0; }
.canal__k { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.canal__v { font: 400 clamp(22px, 2.6cqw, 30px)/1.15 var(--f-serif); text-decoration: none; justify-self: start;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat, var(--tostado) 0 100% / 0 3px no-repeat;
  transition: background-size var(--d-med) var(--ease); }
@media (hover: hover) { .canal__v:hover { background-size: 0 1px, 100% 3px; } }
.canal__v:focus-visible { background-size: 0 1px, 100% 3px; }
.canal__txt { color: var(--ink-2); font-size: 17px; }
.listado { display: grid; border-top: 1px solid var(--linea); }
.listado__item { display: grid; gap: var(--s2); padding-block: var(--s5); border-bottom: 1px solid var(--linea); }
.listado__k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.listado__h { font: 400 clamp(24px, 3cqw, 34px)/1.1 var(--f-serif); }
.listado__h a { text-decoration: none; background: var(--tostado) 0 100% / 0 2px no-repeat; transition: background-size var(--d-med) var(--ease); }
@media (hover: hover) { .listado__h a:hover { background-size: 100% 2px; } }
.listado__txt { color: var(--ink-2); max-width: 70ch; }

/* ── 09 · Comercio: carrito, checkout, mi cuenta y gracias (plantillas de Woo, sólo piel; plan 1.16).
   Woo carga acá woocommerce-layout + smallscreen (floats y tabla apilada); woocommerce.css no. Las reglas van a la
   especificidad de esas hojas (.woocommerce …, .woocommerce-page …) y se verifican en cada estado. ──────────── */
.pagina--comercio .pagina__h { font-size: clamp(40px, 7cqw, 104px); margin-bottom: var(--s6); }
.pagina--comercio .pagina__cuerpo { min-width: 0; }
.pagina--comercio :is(table.shop_table) { width: 100%; border-collapse: collapse; margin: 0 0 var(--s6); font-size: 17px; }
.pagina--comercio table.shop_table :is(th, td) { padding: var(--s4) var(--s3); border-bottom: 1px solid var(--linea); text-align: left; vertical-align: middle; }
.pagina--comercio table.shop_table thead th, .pagina--comercio table.shop_table tfoot th, .pagina--comercio .cart_totals th {
  font: 500 11px/1.3 var(--f-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.pagina--comercio table.shop_table thead th { border-bottom-color: var(--ink); }
.pagina--comercio table.shop_table :is(.amount, .product-total, .product-subtotal) { font-family: var(--f-mono); font-stretch: 87.5%; }
/* Un importe no se parte nunca («$26.0 / 90» en el total, QA v2): el :where(span) de la base le da overflow-wrap:anywhere
   y la mono lo cortaba en celdas estrechas. Con nowrap el mínimo intrínseco de la columna ES el importe más largo (la tabla
   automática no baja de ahí): las columnas de importe toman ese ancho y la que cede es la del nombre (width:auto, anywhere). */
.woocommerce-Price-amount { white-space: nowrap; overflow-wrap: normal; }
.pagina--comercio table.shop_table :is(td.product-price, td.product-subtotal, td.product-total, th.product-total, th.product-subtotal, th.product-price, tfoot td, .cart_totals td) { white-space: nowrap; }
/* width:1% sólo donde la tabla es tabla: el carrito ≤ 768 px se apila (smallscreen pone las celdas en display:block y un
   1 % las aplastaría). Los importes van a la derecha, también en el pie del pedido, para que las cifras se lean en columna. */
.pagina--comercio table.shop_table:not(.shop_table_responsive) :is(td.product-total, tfoot td) { width: 1%; text-align: right; }
.pagina--comercio table.shop_table:not(.shop_table_responsive) th.product-total { text-align: right; }
@media (min-width: 769px) {
  .pagina--comercio table.shop_table_responsive :is(td.product-price, td.product-subtotal) { width: 1%; text-align: right; }
  .pagina--comercio table.shop_table_responsive :is(th.product-price, th.product-subtotal) { text-align: right; }
}
.pagina--comercio table.shop_table td.product-name { overflow-wrap: anywhere; min-width: 0; }
/* El envío trae etiqueta + importe («Envío a domicilio: $ 2.500»): la etiqueta sí puede bajar de línea; el importe no. */
.pagina--comercio table.shop_table .woocommerce-shipping-totals td { white-space: normal; }
/* …pero el nombre del método va entero (span de inc/20-woo-config.php): «Envío a domicilio:» / «$ 2.500», 2 renglones. */
.pagina--comercio .envio-nombre { white-space: nowrap; }
.pagina--comercio tr.order-total :is(th, td), .pagina--comercio .order-total .amount { font-size: 19px; font-weight: 600; color: var(--ink); border-bottom-color: var(--ink); }
.pagina--comercio .product-thumbnail img { width: 72px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.pagina--comercio .product-name a { text-decoration: none; background: var(--tostado) 0 100% / 0 2px no-repeat; transition: background-size var(--d-med) var(--ease); }
@media (hover: hover) { .pagina--comercio .product-name a:hover { background-size: 100% 2px; } }
.pagina--comercio :is(dl.variation, .wc-item-meta) { margin: var(--s2) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s2); font: 400 12px/1.5 var(--f-mono); font-stretch: 87.5%; color: var(--ink-2); }
.pagina--comercio :is(dl.variation, .wc-item-meta) :is(dt, dd, p, li, strong) { margin: 0; font-weight: 400; overflow-wrap: normal; }
/* «Incluye: Etiopía Yirgacheffe, …»: la lista se parte entre palabras, nunca adentro (con el anywhere de la base salía
   «Yirgachef / fe,» a 320, QA v2b). Para que la celda pueda ceder, en angosto la etiqueta va arriba y el valor debajo:
   así el mínimo de la celda es la palabra más larga del valor, no etiqueta + palabra. */
@media (max-width: 400px) { .pagina--comercio :is(dl.variation, .wc-item-meta) { grid-template-columns: minmax(0, 1fr); } }
.pagina--comercio .wc-item-meta li { display: contents; }
.pagina--comercio a.remove { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--linea); color: var(--ink);
  font: 400 20px/1 var(--f-mono); text-decoration: none; transition: background-color var(--d-fast), color var(--d-fast), var(--tx-toque); }
@media (hover: hover) { .pagina--comercio a.remove:hover { background: var(--ink); color: var(--paper); } }
.pagina--comercio .quantity .qty { width: 4.5em; min-height: 40px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font: 400 15px/1 var(--f-mono); text-align: center; }
.pagina--comercio td.actions { padding-block: var(--s5); }
.pagina--comercio .coupon { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.woocommerce-page .pagina__cuerpo .cart-collaterals .cart_totals { float: none; width: min(100%, 520px); margin-left: auto; }
.pagina--comercio .cart_totals h2, .pagina--comercio :is(#order_review_heading, .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3, .woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-customer-details h2, #customer_login h2) {
  font: 400 clamp(22px, 2.6cqw, 30px)/1.1 var(--f-mono); font-stretch: 75%; text-transform: uppercase; letter-spacing: -.02em; margin: 0 0 var(--s4); }
.pagina--comercio #shipping_method { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.pagina--comercio .wc-proceed-to-checkout { padding-top: var(--s4); }
.pagina--comercio .wc-proceed-to-checkout .checkout-button { width: 100%; }
.pagina--comercio .cart-empty { margin-bottom: var(--s5); }

/* Campos */
.pagina--comercio .form-row { margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s1); }
.pagina--comercio .form-row label, .pagina--comercio .woocommerce-form-row label, .pagina--comercio .coupon label {
  font: 500 11px/1.3 var(--f-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.pagina--comercio .form-row label.checkbox, .pagina--comercio label.woocommerce-form__label-for-checkbox { display: flex; gap: var(--s2); align-items: flex-start;
  font: 400 16px/1.4 var(--f-serif); text-transform: none; letter-spacing: 0; color: var(--ink); }
.pagina--comercio .required { color: var(--brasa); text-decoration: none; border: 0; }
.pagina--comercio :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea, select) {
  appearance: none; width: 100%; min-height: 44px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent;
  color: var(--ink); font: 400 19px/1.3 var(--f-serif); padding: var(--s2) 0; transition: border-color var(--d-fast), box-shadow var(--d-fast); }
.pagina--comercio textarea { min-height: 96px; resize: vertical; }
.pagina--comercio :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea, select):focus {
  outline: none; border-bottom-color: var(--brasa); box-shadow: 0 1px 0 var(--brasa); }
.pagina--comercio .woocommerce-invalid :is(input.input-text, select) { border-bottom-color: var(--brasa); }
.pagina--comercio input[type="checkbox"], .pagina--comercio input[type="radio"] { accent-color: var(--ink); width: 18px; height: 18px; margin: 3px 0 0; flex: none; }
.pagina--comercio .coupon .input-text { width: auto; min-width: 0; flex: 1 1 160px; }
.pagina--comercio .coupon .button { flex: 1 0 auto; white-space: nowrap; }
/* selectWoo / select2: la caja que reemplaza al <select> del país */
.pagina--comercio .select2-container .select2-selection--single { height: 44px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; }
.pagina--comercio .select2-container .select2-selection__rendered { padding-left: 0; font: 400 19px/44px var(--f-serif); color: var(--ink); }
.pagina--comercio .select2-container .select2-selection__arrow { height: 42px; }

/* Botones de Woo con la placa del sistema (.btn): borde, sombra desplazada que se cierra al apretar */
.pagina--comercio :is(.button, button[type="submit"]):not(.select2-selection) {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s5);
  border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 500 13px/1.1 var(--f-mono); font-stretch: 87.5%;
  text-transform: uppercase; letter-spacing: .03em; text-decoration: none; text-align: center; cursor: pointer; isolation: isolate;
  box-shadow: 5px 5px 0 -1px var(--paper), 5px 5px 0 0 var(--ink);
  transition: translate var(--d-fast) var(--ease), box-shadow var(--d-ui) var(--ease), background-color var(--d-ui), color var(--d-ui), var(--tx-toque); }
.pagina--comercio :is(.button.alt, #place_order, .checkout-button, .woocommerce-form-login__submit) { background: var(--ink); color: var(--paper); }
@media (hover: hover) {
  .pagina--comercio :is(.button, button[type="submit"]):not(.select2-selection):hover { box-shadow: 8px 8px 0 -1px var(--paper), 8px 8px 0 0 var(--ink); filter: var(--f-tostar); color: var(--ink); background: transparent; }
  .pagina--comercio :is(.button.alt, #place_order, .checkout-button, .woocommerce-form-login__submit):hover { background: var(--roast-fondo); color: var(--paper); }
}
.pagina--comercio :is(.button, button[type="submit"]):focus-visible { filter: var(--f-tostar); }
.pagina--comercio :is(.button, button[type="submit"]):active { translate: 3px 3px; box-shadow: 2px 2px 0 -1px var(--paper), 2px 2px 0 0 var(--ink); }
.pagina--comercio :is(.button, button[type="submit"]):disabled, .pagina--comercio .button.disabled { opacity: .45; cursor: not-allowed; }
.pagina--comercio #place_order { width: 100%; min-height: 56px; font-size: 14px; }

/* Checkout: dos columnas (datos | pedido) desde 960 px; Woo flota .col-1/.col-2, acá se apilan dentro de su columna */
.pagina--comercio form.checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6) var(--s8); }
@media (min-width: 960px) {
  .pagina--comercio form.checkout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pagina--comercio form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
  .pagina--comercio form.checkout > #customer_details { grid-column: 1; grid-row: span 3; }
  .pagina--comercio form.checkout > :is(#order_review_heading, #order_review) { grid-column: 2; }
}
.woocommerce-page .pagina--comercio .col2-set :is(.col-1, .col-2) { float: none; width: 100%; }
.pagina--comercio .col2-set { display: grid; gap: var(--s6); }
.pagina--comercio .col2-set::before, .pagina--comercio .col2-set::after { content: none; }
@media (min-width: 640px) {
  .woocommerce-page .pagina--comercio .form-row-first, .woocommerce-page .pagina--comercio .form-row-last { float: none; width: auto; }
  .pagina--comercio .woocommerce-billing-fields__field-wrapper, .pagina--comercio .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
  .pagina--comercio .woocommerce-billing-fields__field-wrapper > .form-row-wide, .pagina--comercio .woocommerce-shipping-fields__field-wrapper > .form-row-wide { grid-column: 1 / -1; }
}
.pagina--comercio #order_review { position: sticky; top: calc(var(--hdr-h) + var(--s5)); align-self: start; }
.pagina--comercio #payment { margin-top: var(--s5); }
.pagina--comercio #payment ul.payment_methods { list-style: none; margin: 0 0 var(--s5); padding: 0; border-top: 1px solid var(--linea); }
.pagina--comercio #payment li.wc_payment_method { padding: var(--s4) 0; border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s3); }
.pagina--comercio #payment li.wc_payment_method > label { font: 400 19px/1.3 var(--f-serif); cursor: pointer; }
.pagina--comercio #payment .payment_box { grid-column: 2; margin-top: var(--s2); font-size: 16px; color: var(--ink-2); }
.pagina--comercio #payment .payment_box p { margin: 0; }
.pagina--comercio .woocommerce-terms-and-conditions-wrapper, .pagina--comercio .woocommerce-privacy-policy-text { font-size: 15px; color: var(--ink-2); margin-bottom: var(--s4); }
.pagina--comercio :is(.woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle) .woocommerce-info a { color: var(--ink); }
.pagina--comercio form.checkout_coupon, .pagina--comercio form.woocommerce-form-login { border: 1px dashed var(--linea); padding: var(--s5); margin: 0 0 var(--s6); }
.pagina--comercio .aviso-demo { margin: 0 0 var(--s4); }

/* Gracias y Mi cuenta */
.pagina--comercio ul.woocommerce-order-overview { list-style: none; margin: 0 0 var(--s7); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  border-top: 1px solid var(--linea); }
.pagina--comercio ul.woocommerce-order-overview li { padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--linea); font: 500 11px/1.4 var(--f-mono);
  font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.pagina--comercio ul.woocommerce-order-overview li strong { display: block; margin-top: var(--s1); font: 400 21px/1.2 var(--f-serif); text-transform: none; letter-spacing: 0; color: var(--ink); }
.pagina--comercio .woocommerce-thankyou-order-received { font: 400 clamp(22px, 3cqw, 32px)/1.25 var(--f-serif); margin-bottom: var(--s6); }
.pagina--comercio address { font-style: normal; line-height: 1.6; }
.pagina--comercio :is(.woocommerce-order-details, .woocommerce-customer-details, .woocommerce-bacs-bank-details) { margin-top: var(--s7); }
.pagina--comercio .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 var(--s6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); border-bottom: 1px solid var(--linea); }
.pagina--comercio .woocommerce-MyAccount-navigation a { display: inline-block; padding: var(--s3) 0; font: 400 19px/1.2 var(--f-serif); color: var(--ink-2); text-decoration: none; transition: color var(--d-fast); }
@media (hover: hover) { .pagina--comercio .woocommerce-MyAccount-navigation a:hover { color: var(--ink); } }
.pagina--comercio .woocommerce-MyAccount-navigation .is-active a { color: var(--ink); font-style: italic; box-shadow: inset 0 -2px 0 var(--ink); }
.woocommerce-account .pagina--comercio :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) { float: none; width: 100%; }
.pagina--comercio #customer_login { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s7); }
.woocommerce-page .pagina--comercio #customer_login :is(.u-column1, .u-column2) { float: none; width: auto; }
.pagina--comercio .woocommerce-form-login__rememberme { margin-block: var(--s3); }
.pagina--comercio .lost_password a, .pagina--comercio .woocommerce-LostPassword a { color: var(--ink-2); }
/* Ojo de la contraseña: Woo lo deja en 22 × 22 sin relleno (target-size < 24, QA v2). Caja de 40 × 40 con el dibujo de
   22 centrado, por encima de la especificidad de woocommerce-layout (.woocommerce form …). El campo ya trae padding-right: 2,5rem
   (40 px) de Woo: el texto termina donde empieza la caja. */
.pagina--comercio .woocommerce form .show-password-input { width: 40px; height: 40px; right: 0; display: grid; place-items: center;
  transition: background-color var(--d-fast); }
@media (hover: hover) { .pagina--comercio .woocommerce form .show-password-input:hover { background-color: var(--paper-2); } }
/* Tabla apilada de smallscreen (≤ 768 px): la etiqueta de cada celda en mono */
@media (max-width: 768px) {
  .pagina--comercio table.shop_table_responsive tr td::before { font: 500 11px/1.3 var(--f-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
  .pagina--comercio table.shop_table_responsive tr td { padding-block: var(--s2); }
  .pagina--comercio table.cart td.actions .coupon .input-text { width: auto; }
}