/* =====================================================================
   Esencia Café · home público (esenciacafe.co)
   Un solo recorrido: de la montaña (noche, foto) a la mesa (crema).
   Movimiento: solo transform y opacity; una entrada orquestada en la
   portada y el resto responde a lo que hace la persona.
   ===================================================================== */

/* ---------- 1 · Tokens ---------- */
:root{
  --noche:#16233F; --noche2:#1E3054; --tinta:#0E1729;
  --crema:#F6F1E6; --crema2:#EDE4D2; --crema-tenue:rgba(246,241,230,.72);
  --cereza:#C9472B; --cereza2:#E3775B; --cereza-texto:#A3361E;
  --ambar:#FDC856; --ambar2:#F5B93A; --ambar-texto:#8A5A00;   /* del logo */
  --hoja:#2F5E3E; --bruma:#B9CBE6; --menta:#3E8E6D;
  --noche-tenue:rgba(22,35,63,.66); --linea-clara:rgba(22,35,63,.14); --linea-oscura:rgba(246,241,230,.18);
  --sal:cubic-bezier(.23,1,.32,1); --hojac:cubic-bezier(.32,.72,0,1);
  --pad:clamp(20px,6vw,96px);
  --seccion:clamp(88px,13vw,176px);
  --ancho:1320px;
  --grano:#6B3E24;
}

/* ---------- 2 · Base ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body.home{
  margin:0;background:var(--noche);color:var(--crema);
  font-family:'Karla',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ambar);outline-offset:3px;border-radius:4px}
.tueste :focus-visible,.carta :focus-visible,.visita :focus-visible,.casa :focus-visible{outline-color:var(--noche)}

.saltar{position:absolute;left:-9999px;top:0;background:var(--crema);color:var(--noche);
  padding:12px 18px;z-index:200;font-weight:700}
.saltar:focus{left:0}

/* Secciones claras: mismo sistema, otro suelo. */
.tueste,.carta,.visita,.casa{background:var(--crema);color:var(--noche)}
.tueste .cuerpo,.carta .cuerpo,.visita .cuerpo,.tueste .sec-cab p,.carta .sec-cab p,.casa .sec-cab p{color:var(--noche-tenue)}

/* ---------- 3 · Tipografía ---------- */
.display{
  font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(38px,5.4vw,78px);line-height:1.02;letter-spacing:-.012em;
  max-width:17ch;text-wrap:balance;
}
.voz{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(27px,3.6vw,50px);line-height:1.14;max-width:26ch;text-wrap:pretty;
}
.cuerpo{font-size:clamp(17px,1.3vw,19px);line-height:1.6;max-width:56ch;color:var(--crema-tenue);text-wrap:pretty}
.sec-cab{display:grid;gap:18px;width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--pad)}
.sec-cab p{max-width:52ch;color:var(--crema-tenue);font-size:clamp(17px,1.3vw,19px)}
.tab{font-variant-numeric:tabular-nums}

/* ---------- 4 · Botones y enlaces ---------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 24px;border-radius:999px;font-weight:500;font-size:16px;line-height:1;
  text-decoration:none;border:1px solid transparent;
  transition:transform 180ms var(--sal),background-color 180ms var(--sal),border-color 180ms var(--sal);
}
.boton:active{transform:scale(.97);transition-duration:120ms}
.boton.primario{background:var(--ambar);color:var(--noche)}
.boton.fantasma{border-color:currentColor;background:transparent}
.enlace-flecha{
  position:relative;display:inline-block;padding:14px 0;font-weight:500;font-size:16px;text-decoration:none;
}
.enlace-flecha::after{
  content:"";position:absolute;left:0;right:0;bottom:10px;height:1.5px;background:currentColor;
  transform-origin:left;transition:transform 240ms var(--sal);
}
.redondo{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--linea-oscura);
  display:inline-flex;align-items:center;justify-content:center;font-size:26px;line-height:1;
  transition:transform 180ms var(--sal),border-color 180ms var(--sal);
}
.redondo:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .boton.primario:hover{background:var(--ambar2);transform:translateY(-1px)}
  .boton.fantasma:hover{background:rgba(127,127,127,.08)}
  .enlace-flecha:hover::after{transform:scaleX(.55)}
  .redondo:hover{border-color:currentColor}
}

/* Estado del local (abierto/cerrado): un punto y una frase, nada más. */
.estado{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--crema-tenue)}
.estado i{width:9px;height:9px;border-radius:50%;background:var(--cereza2);flex:none}
.estado.abierto i{background:var(--menta)}
.carta .estado,.visita .estado{color:var(--noche-tenue)}
.casa .boton.fantasma{color:var(--noche)}

/* ---------- 5 · Barra superior ---------- */
.hnav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:16px var(--pad);
  transition:background-color 260ms var(--sal);
}
.hnav.solida{background:rgba(14,23,41,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hnav-marca,.hpie-marca{
  font-family:'Italiana',serif;font-size:30px;line-height:1;letter-spacing:.02em;text-decoration:none;
}
.hnav-marca i,.hpie-marca i{font-style:normal;color:var(--ambar);font-size:14px;display:inline-block;transform:translateY(-6px)}
.hnav-marca{display:inline-flex;align-items:center;gap:10px}
.hnav-marca img{width:40px;height:40px;border-radius:50%;display:block}
.hpie > .hpie-logo{width:112px;height:112px;margin:0;border-radius:50%}
.hnav-links{display:flex;gap:28px;justify-content:center}
.hnav-links a{font-size:15px;text-decoration:none;color:var(--crema-tenue);padding:10px 2px;transition:color 180ms var(--sal)}
.hnav-cta{
  justify-self:end;font-size:15px;font-weight:500;text-decoration:none;
  padding:11px 18px;border-radius:999px;border:1px solid var(--linea-oscura);
  transition:background-color 180ms var(--sal),border-color 180ms var(--sal),transform 180ms var(--sal);
}
.hnav-cta:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .hnav-links a:hover{color:var(--crema)}
  .hnav-cta:hover{background:var(--crema);color:var(--noche);border-color:var(--crema)}
}
.hnav.clara{color:var(--noche)}
.hnav.clara .hnav-links a{color:var(--noche-tenue)}
.hnav.clara .hnav-cta{border-color:var(--linea-clara)}
.hnav.clara.solida{background:rgba(246,241,230,.8)}
@media (hover:hover) and (pointer:fine){
  .hnav.clara .hnav-links a:hover{color:var(--noche)}
  .hnav.clara .hnav-cta:hover{background:var(--noche);color:var(--crema);border-color:var(--noche)}
}
@media (max-width:899px){
  .hnav{grid-template-columns:1fr auto}
  .hnav-links{display:none}
}

/* ---------- 6 · Altímetro (lo que hace única a esta página) ---------- */
.altura{
  position:fixed;right:clamp(14px,2.4vw,34px);bottom:clamp(18px,3vw,36px);z-index:40;
  display:grid;justify-items:end;gap:6px;text-align:right;pointer-events:none;
  padding:14px 16px 18px;border-radius:18px;
  background:rgba(14,23,41,.42);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:opacity 300ms var(--sal),background-color 300ms var(--sal),color 300ms var(--sal);
}
.altura-num{font-family:'Cormorant Garamond',serif;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.altura-num b{font-weight:400;font-size:44px}
.altura-lugar{font-size:12.5px;color:var(--crema-tenue);letter-spacing:.02em}
.altura-escala{
  position:relative;width:1px;height:150px;margin-top:10px;background:var(--linea-oscura);
}
.altura-escala i{
  position:absolute;right:-5px;top:0;width:11px;height:11px;border-radius:50%;background:var(--ambar);
  transform:translateY(var(--y,0px));transition:transform 700ms var(--sal);
}
/* Sobre suelo claro el altímetro se oscurece. */
.altura.clara{color:var(--noche);background:rgba(246,241,230,.55)}
.altura.clara .altura-lugar{color:var(--noche-tenue)}
.altura.clara .altura-escala{background:var(--linea-clara)}
@media (max-width:899px){
  .altura{
    right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    grid-auto-flow:column;align-items:baseline;gap:8px;text-align:right;
    padding:7px 12px 8px;border-radius:999px;background:rgba(14,23,41,.72);
  }
  .altura.clara{color:var(--crema);background:rgba(14,23,41,.72)}
  .altura.clara .altura-lugar{color:var(--crema-tenue)}
  .altura-num{font-size:17px}
  .altura-num b{font-size:21px}
  .altura-lugar{font-size:11.5px;max-width:17ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .altura-escala{display:none}
}

/* ---------- 7 · Portada ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;isolation:isolate;overflow:hidden}
.hero-foto{position:absolute;inset:0;z-index:-2}
.hero-img{width:100%;height:100%;object-fit:cover;background:var(--noche2);object-position:50% 60%;transform:scale(1.06)}
body.lista .hero-img{transform:scale(1);transition:transform 2400ms var(--sal)}
.hero-velo{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(14,23,41,.45) 0%,rgba(14,23,41,.05) 30%,rgba(14,23,41,.72) 78%,rgba(14,23,41,.94) 100%),
    linear-gradient(90deg,rgba(14,23,41,.35),transparent 60%);
}
.hero-pie{font-size:12.5px;color:var(--crema-tenue);line-height:1.4;max-width:48ch;margin-top:8px}
.hero-texto{
  position:relative;max-width:var(--ancho);width:100%;margin:0 auto;
  padding:calc(var(--pad) + 44px) var(--pad) clamp(40px,6vw,72px);
  display:grid;gap:clamp(16px,2vw,26px);justify-items:start;
}
.hero-titulo{
  font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(46px,8.4vw,124px);line-height:.94;letter-spacing:-.02em;
  max-width:11ch;
}
.hero-titulo .linea{display:block}
.hero-sub{font-size:clamp(17px,1.4vw,21px);line-height:1.5;max-width:44ch;color:var(--crema-tenue);text-wrap:pretty}
.hero-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px}

/* Entrada: cada línea sube una vez, en orden. Es el único momento orquestado. */
.hero .linea,.hero-sub,.hero-acciones,.hero .estado,.hero-pie{opacity:0;transform:translateY(26px);filter:blur(6px)}
body.lista .hero .linea,body.lista .hero-sub,body.lista .hero-acciones,body.lista .hero .estado,body.lista .hero-pie{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity 900ms var(--sal) calc(var(--i,0) * 110ms + 120ms),transform 1000ms var(--sal) calc(var(--i,0) * 110ms + 120ms),filter 700ms var(--sal) calc(var(--i,0) * 110ms + 120ms);
}
@media (max-width:899px){
  .hero-titulo{font-size:clamp(40px,11.5vw,80px)}
  .hero-texto{padding-top:calc(var(--pad) + 80px)}
}

/* ---------- 7b · Fotos que se llenan (de abajo hacia arriba, como una taza) ---------- */
.js .revela{clip-path:inset(100% 0 0 0);transition:clip-path 1100ms var(--sal)}
.js .revela img{transform:scale(1.08);transition:transform 1400ms var(--sal)}
.js .revela.visto{clip-path:inset(0 0 0 0)}
.js .revela.visto img{transform:none}

/* ---------- 8 · Las manos ---------- */
.manos{padding-bottom:var(--seccion);display:grid;gap:clamp(40px,6vw,88px)}
.manos-foto img{width:100%;height:auto;max-height:92vh;object-fit:cover;object-position:50% 45%;background:var(--noche2)}
.manos-texto{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--pad);width:100%;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;
}
.manos-texto .voz{grid-column:2}
.manos-texto .cuerpo{grid-column:2}
.rostros{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--pad);width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,24px);
}
.rostros figure{aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:var(--noche2)}
.rostros img{width:100%;height:100%;object-fit:cover}
.rostros-pie{grid-column:1 / -1;font-size:14px;color:var(--crema-tenue)}
@media (max-width:899px){
  .manos-texto{grid-template-columns:1fr}
  .manos-texto .voz,.manos-texto .cuerpo{grid-column:1}
}

/* ---------- 9 · El camino del grano (secuencia) ---------- */
.camino{padding:var(--seccion) 0;display:grid;gap:clamp(36px,5vw,64px);background:var(--tinta)}
.camino-marco{position:relative;display:grid;gap:22px}
.camino-tira{
  display:flex;gap:clamp(16px,2.4vw,32px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--pad) 8px;scrollbar-width:none;cursor:grab;
  scroll-padding-inline:var(--pad);
}
.camino-tira::-webkit-scrollbar{display:none}
.camino-tira.arrastrando{cursor:grabbing;scroll-snap-type:none}
.paso{
  flex:0 0 clamp(260px,34vw,440px);scroll-snap-align:start;display:grid;gap:12px;align-content:start;
}
.paso figure{aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:var(--noche2)}
.paso img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none}
.paso-num{font-family:'Cormorant Garamond',serif;font-size:44px;line-height:1;color:var(--ambar);margin-top:8px}
.paso h3{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,2.6vw,36px);line-height:1.05}
.paso p{font-size:16px;line-height:1.55;color:var(--crema-tenue);text-wrap:pretty}
.paso-alt{font-size:13px;color:var(--crema-tenue);font-variant-numeric:tabular-nums}
.camino-ctl{display:flex;gap:10px;justify-content:flex-end;padding:0 var(--pad)}
@media (min-width:900px){
  .camino-tira{padding-right:calc(var(--pad) + 110px)}
  .camino-ctl{padding-right:calc(var(--pad) + 110px)}
}
@media (max-width:899px){
  .paso{flex-basis:80vw}
  .camino-ctl{display:none}
}

/* ---------- 10 · El tueste (interactivo) ---------- */
.tueste{padding:var(--seccion) 0;display:grid;gap:clamp(36px,5vw,64px)}
.tueste-ctl{
  max-width:720px;margin:0 auto;padding:0 var(--pad);width:100%;
  display:grid;justify-items:center;gap:22px;
}
.grano{width:clamp(96px,14vw,150px);height:auto;transform:rotate(var(--giro,-6deg));transition:transform 400ms var(--sal)}
.grano-cuerpo{fill:var(--grano);transition:fill 380ms var(--sal)}
.grano-surco{stroke:var(--crema)}
.tueste-label{font-size:14px;color:var(--noche-tenue)}
.tueste-rango{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer;
}
.tueste-rango::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;
  background:linear-gradient(90deg,#7FA36B,#B8794A 38%,#6B3E24 70%,#2E1A10);
}
.tueste-rango::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(90deg,#7FA36B,#B8794A 38%,#6B3E24 70%,#2E1A10)}
.tueste-rango::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-13.5px;border-radius:50%;box-sizing:border-box;
  background:var(--crema);border:2px solid var(--noche);box-shadow:0 4px 14px rgba(22,35,63,.22);
  transition:transform 160ms var(--sal);
}
.tueste-rango::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--crema);border:2px solid var(--noche);
  box-shadow:0 4px 14px rgba(22,35,63,.22);
}
.tueste-rango:active::-webkit-slider-thumb{transform:scale(1.12)}
.tueste-etq{display:flex;justify-content:space-between;width:100%;font-size:14px;color:var(--noche-tenue)}
.tueste-etq span{transition:color 200ms var(--sal),font-weight 0s}
.tueste-etq span.on{color:var(--noche);font-weight:700}
.tueste-paneles{max-width:640px;margin:0 auto;padding:0 var(--pad);width:100%;min-height:200px;text-align:center;display:grid}
.tueste-panel{display:grid;gap:14px;justify-items:center;grid-area:1/1}
/* Con JS todos los paneles conviven apilados y se funden: el que sale, rápido; el que entra, con calma. */
.tueste-paneles.apilado .tueste-panel{
  opacity:0;transform:translateY(8px);filter:blur(5px);visibility:hidden;pointer-events:none;
  transition:opacity 160ms var(--sal),transform 160ms var(--sal),filter 160ms var(--sal),visibility 0s linear 160ms;
}
.tueste-paneles.apilado .tueste-panel.on{
  opacity:1;transform:none;filter:blur(0);visibility:visible;pointer-events:auto;
  transition:opacity 300ms var(--sal) 60ms,transform 300ms var(--sal) 60ms,filter 300ms var(--sal) 60ms,visibility 0s;
}
.tueste-panel h3{font-family:'Cormorant Garamond',serif;font-size:clamp(34px,4vw,52px);line-height:1}
.tueste-panel .notas{font-size:clamp(18px,1.5vw,21px);line-height:1.5;text-wrap:pretty}
.tueste-panel .sirve{color:var(--noche-tenue);font-size:16px}
.tueste-panel .boton{margin-top:6px;color:var(--noche)}

/* ---------- 10b · Café para la casa ---------- */
.casa{padding:var(--seccion) 0;display:grid;gap:clamp(36px,5vw,64px);border-top:1px solid var(--linea-clara)}
.casa-grid{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--pad);width:100%;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(28px,5vw,80px);align-items:start;
}
.casa-elige{display:grid;gap:12px}
.casa-label{font-size:14px;color:var(--noche-tenue);margin-top:14px}

/* La bolsa: control segmentado con un indicador que se desliza. */
.seg{
  position:relative;display:grid;grid-template-columns:repeat(var(--n,3),1fr);
  border:1px solid var(--linea-clara);border-radius:18px;padding:5px;isolation:isolate;
}
.seg-ind{
  position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px) / var(--n,3));
  border-radius:13px;background:var(--ambar);z-index:-1;
  transform:translateX(calc(var(--k,0) * 100%));transition:transform 380ms var(--hojac);
}
.seg-btn{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 5px;
  padding:16px 8px 14px;min-height:64px;border-radius:13px;color:var(--noche-tenue);
  transition:color 220ms var(--sal),transform 160ms var(--sal);
}
.seg-btn:active{transform:scale(.97)}
.seg-btn b{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(34px,4vw,52px);line-height:.95}
.seg-btn small{font-size:15px}
.seg-btn em{flex-basis:100%;text-align:center;font-style:normal;font-size:13px;font-variant-numeric:tabular-nums}
.seg-btn[aria-pressed="true"]{color:var(--noche)}
.seg-para{font-size:15px;color:var(--noche-tenue);min-height:1.5em;text-wrap:pretty}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-m{
  padding:10px 15px;min-height:40px;border-radius:999px;border:1px solid var(--linea-clara);font-size:15px;
  transition:background-color 160ms var(--sal),color 160ms var(--sal),border-color 160ms var(--sal),transform 160ms var(--sal);
}
.chip-m:active{transform:scale(.96)}
.chip-m[aria-pressed="true"]{background:var(--noche);color:var(--crema);border-color:var(--noche)}
@media (hover:hover) and (pointer:fine){.chip-m:hover{border-color:var(--noche)}}

/* Campo de molienda: las partículas solo cambian de tamaño. */
.molienda{margin-top:10px;border:1px solid var(--linea-clara);border-radius:18px;padding:12px 14px 12px;display:grid;gap:6px;overflow:hidden}
.molienda-campo{width:100%;height:auto;display:block}
.molienda-campo circle{
  fill:var(--noche);transform-box:fill-box;transform-origin:center;
  transform:scale(var(--esc,.55));opacity:.92;
  transition:transform 560ms var(--sal) var(--d,0ms),opacity 420ms var(--sal) var(--d,0ms),fill 420ms var(--sal);
}
.casa.en-pepa .molienda-campo circle{fill:#6B3E24}
.casa.en-pepa .molienda-campo circle:nth-child(2n),.casa.en-pepa .molienda-campo circle:nth-child(3n){opacity:0;transform:scale(.2)}
.molienda figcaption{font-size:15px;color:var(--noche-tenue)}
.molienda figcaption b{color:var(--noche);font-weight:700}

/* La tarjeta «Pide así», con cuánto rinde. */
.pide{
  position:sticky;top:96px;background:var(--noche);color:var(--crema);border-radius:20px;
  padding:clamp(22px,3vw,34px);display:grid;gap:14px;
}
.pide h3{font-size:14px;color:var(--crema-tenue);font-family:'Karla',sans-serif;font-weight:500}
.pide-linea{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,2.6vw,36px);line-height:1.1;text-wrap:balance}
.pide-linea,.rinde-nota,.pide-tip,.molienda figcaption{transition:opacity 180ms var(--sal),filter 180ms var(--sal)}
.cambiando{opacity:.35;filter:blur(3px)}
.rinde{display:grid;gap:10px;padding:16px 0 18px;border-top:1px solid var(--linea-oscura);border-bottom:1px solid var(--linea-oscura)}
.rinde-num{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--crema-tenue);display:flex;align-items:baseline;gap:8px}
.rinde-num b{font-weight:400;font-size:clamp(52px,5.4vw,78px);line-height:.9;color:var(--ambar);font-variant-numeric:tabular-nums}
.rinde-nota{font-size:15px}
.tazas{display:flex;flex-wrap:wrap;gap:5px}
.tazas i{
  width:18px;height:18px;color:var(--ambar);display:block;
  opacity:0;transform:scale(.6);animation:tazaEntra 300ms var(--sal) forwards;animation-delay:calc(var(--i,0) * 14ms);
}
.tazas svg{width:100%;height:100%;display:block;fill:currentColor}
@keyframes tazaEntra{to{opacity:1;transform:none}}
.rinde-dosis{font-size:13px;color:var(--crema-tenue);line-height:1.45}
.pide-tip{font-size:15px;color:var(--crema-tenue);line-height:1.5}
.pide-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:4px}
.pide-barra{font-size:14px;color:var(--crema-tenue)}
.simbolos{position:absolute;width:0;height:0;overflow:hidden}
@media (max-width:899px){
  .casa-grid{grid-template-columns:1fr}
  .pide{position:static}
}
@media (max-width:480px){.seg-btn b{font-size:30px}.seg-btn{padding:14px 4px 12px}}

/* Ficha del café que está en la bolsa (Admin → Ajustes). Parece una etiqueta de bolsa. */
.cafe-ficha{
  border:1px solid var(--linea-clara);border-top:4px solid var(--ambar);border-radius:6px 6px 14px 14px;
  padding:16px 18px 18px;display:grid;gap:6px;background:rgba(255,255,255,.35);margin-bottom:6px;
}
.cafe-ficha.con-foto{grid-template-columns:minmax(0,1fr) clamp(120px,32%,220px);grid-template-areas:"cab foto" "tit foto" "ori foto" "dat foto" "not foto";column-gap:18px}
.cafe-ficha-foto{grid-area:foto;width:100%;height:100%;object-fit:cover;border-radius:10px;align-self:stretch}
.cafe-ficha.con-foto .cafe-ficha-cab{grid-area:cab}.cafe-ficha.con-foto h3{grid-area:tit}.cafe-ficha.con-foto .cafe-ficha-origen{grid-area:ori}
.cafe-ficha.con-foto .cafe-ficha-datos{grid-area:dat}.cafe-ficha.con-foto .cafe-ficha-notas{grid-area:not}
@media (max-width:480px){.cafe-ficha.con-foto{grid-template-columns:1fr;grid-template-areas:"foto" "cab" "tit" "ori" "dat" "not"}.cafe-ficha-foto{aspect-ratio:3/2;height:auto}}
.cafe-ficha-cab{font-size:13px;color:var(--noche-tenue)}
.cafe-ficha h3{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,2.6vw,34px);line-height:1.05}
.cafe-ficha-origen{font-size:15px}
.cafe-ficha-datos{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px 22px}
.cafe-ficha-datos div{display:grid}
.cafe-ficha-datos dt{font-size:12px;color:var(--noche-tenue)}
.cafe-ficha-datos dd{margin:0;font-size:15px;font-weight:500}
.cafe-ficha-notas{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;margin-top:4px}
.pide .boton.fantasma{color:var(--crema)}

/* ---------- 10c · Puntos Esencia (home) ---------- */
.fidelidad{background:var(--noche);color:var(--crema);padding:var(--seccion) 0}
.fid-cuerpo{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:clamp(28px,6vw,96px);align-items:center;
}
.fid-texto{display:grid;gap:18px;justify-items:start}
.fid-marca{font-family:'Italiana',serif;font-size:22px;letter-spacing:.04em;color:var(--ambar)}
.fid-premios{display:grid;gap:10px}
.fid-premios li{
  display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--linea-oscura);
}
.fid-premios li:first-child{border-top:1px solid var(--linea-oscura)}
.fid-premios b{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:34px;line-height:1;color:var(--ambar);min-width:2.2ch;font-variant-numeric:tabular-nums}
.fid-premios span{font-size:17px}
@media (max-width:899px){.fid-cuerpo{grid-template-columns:1fr}}

/* ---------- 17 · Página /puntos ---------- */
.pagina-puntos .hnav{position:sticky}
.puntos{display:grid;gap:clamp(56px,8vw,110px);padding-bottom:var(--seccion)}
.puntos-cab{width:100%;max-width:var(--ancho);margin:0 auto;padding:clamp(40px,6vw,80px) var(--pad) 0;display:grid;gap:20px;justify-items:start}
.puntos-marca{font-family:'Italiana',serif;font-size:24px;letter-spacing:.04em;color:var(--ambar)}
.puntos-como{max-width:var(--ancho);margin:0 auto;padding:0 var(--pad);width:100%}
.pasos-puntos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);counter-reset:none}
.pasos-puntos li{display:grid;gap:8px;align-content:start;padding-top:16px;border-top:1px solid var(--linea-oscura)}
.pasos-puntos b{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:40px;line-height:1;color:var(--ambar)}
.pasos-puntos h3{font-family:'Cormorant Garamond',serif;font-size:28px;line-height:1.05}
.pasos-puntos p{color:var(--crema-tenue);font-size:16px}
.puntos-premios{max-width:var(--ancho);margin:0 auto;padding:0 var(--pad);width:100%;display:grid;gap:22px}
.premios-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.premios-lista li{display:grid;gap:4px;padding:18px;border:1px solid var(--linea-oscura);border-radius:14px}
.premio-pts{font-size:14px;color:var(--crema-tenue)}
.premio-pts b{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:34px;color:var(--ambar);margin-right:4px}
.premio-nombre{font-size:18px}
.premio-desc{font-size:14px;color:var(--crema-tenue)}
.puntos-panel{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--pad);width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);gap:clamp(28px,6vw,96px);align-items:start;
}
.panel-texto{display:grid;gap:14px}
.formulario{display:grid;gap:6px;background:var(--crema);color:var(--noche);padding:clamp(22px,3vw,32px);border-radius:20px}
.formulario label{font-size:14px;color:var(--noche-tenue);margin-top:10px}
.formulario label small{text-transform:none;font-size:13px}
.formulario input,.formulario select{
  font:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--linea-clara);border-radius:12px;background:#fff;color:var(--noche);width:100%;
}
.formulario input:focus-visible,.formulario select:focus-visible{outline:2px solid var(--noche);outline-offset:2px}
.formulario .dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px}
.formulario .dos > div{display:grid;gap:6px}
.acepto{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px;color:var(--noche);text-transform:none}
.acepto input{width:20px;height:20px;margin-top:2px;accent-color:var(--noche)}
.acepto a{color:var(--noche)}
.formulario .boton{margin-top:16px;justify-self:start}
.formulario .boton.fantasma{color:var(--noche)}
.formulario-aviso{font-size:15px;line-height:1.45;min-height:1.4em;margin-top:8px;outline:none}
.formulario-aviso.error{color:var(--noche);background:rgba(201,71,43,.12);border-left:3px solid var(--cereza);padding:12px 14px;border-radius:0 10px 10px 0}
.formulario-aviso.ok{color:var(--noche);background:rgba(253,200,86,.28);border-left:3px solid var(--ambar);padding:12px 14px;border-radius:0 10px 10px 0}
.tarjeta-puntos{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--pad);width:100%;
  display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start;
}
.tarjeta{
  background:linear-gradient(160deg,var(--ambar),#E8A93A);color:var(--noche);border-radius:22px;padding:26px 26px 22px;
  display:grid;gap:8px;aspect-ratio:1.586;align-content:space-between;box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.tarjeta-cab{display:flex;align-items:center;gap:10px;font-family:'Italiana',serif;font-size:20px;letter-spacing:.04em}
.tarjeta-cab img{border-radius:50%}
.tarjeta-nombre{font-size:17px;font-weight:500}
.tarjeta-saldo{font-size:16px}
.tarjeta-saldo b{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(44px,5vw,60px);line-height:.9;margin-right:6px;font-variant-numeric:tabular-nums}
.tarjeta-codigo{font-size:14px}
.tarjeta-codigo b{font-family:'Karla',monospace;font-size:20px;letter-spacing:.14em;margin-left:6px}
.tarjeta-nota{font-size:12.5px;opacity:.8}
.tarjeta-detalle{display:grid;gap:12px}
.tarjeta-detalle h3{font-family:'Cormorant Garamond',serif;font-size:26px;margin-top:8px}
.progreso{display:grid;gap:10px}
.progreso li{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:10px 0;border-bottom:1px solid var(--linea-oscura)}
.pr-nombre{font-size:16px}
.pr-nombre small{margin-left:8px;color:var(--crema-tenue)}
.pr-barra{grid-column:1/-1;height:4px;border-radius:2px;background:var(--linea-oscura);overflow:hidden}
.pr-barra i{display:block;height:100%;width:var(--w,0%);background:var(--ambar);transition:width 600ms var(--sal)}
.pr-estado{font-size:13px;color:var(--crema-tenue);grid-column:2;grid-row:1}
.progreso li.listo .pr-estado{color:var(--ambar);font-weight:700}
.movimientos{display:grid;gap:6px}
.movimientos li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;font-size:14px;padding:8px 0;border-bottom:1px solid var(--linea-oscura);color:var(--crema-tenue)}
.movimientos b{color:var(--ambar);font-variant-numeric:tabular-nums}
.movimientos b.resta{color:var(--cereza2)}
@media (max-width:899px){
  .pasos-puntos{grid-template-columns:1fr}
  .puntos-panel,.tarjeta-puntos{grid-template-columns:1fr}
}

/* ---------- 11 · El Tolima (mapa) ---------- */
.tolima{position:relative;isolation:isolate;padding:var(--seccion) 0;overflow:hidden}
.tolima-fondo{position:absolute;inset:0;z-index:-1}
.tolima-fondo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.tolima-fondo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,23,41,.92),rgba(14,23,41,.72) 40%,rgba(14,23,41,.9));
}
.tolima-cuerpo{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);gap:clamp(32px,6vw,96px);align-items:center;
}
.tolima-texto{display:grid;gap:20px}
.tolima-texto > p{color:var(--crema-tenue);max-width:44ch}
.ficha{margin-top:18px;padding-top:24px;border-top:1px solid var(--linea-oscura);min-height:200px;display:grid}
.ficha-item{display:grid;gap:8px;grid-area:1/1}
.ficha.apilado .ficha-item{
  opacity:0;transform:translateY(8px);filter:blur(5px);visibility:hidden;pointer-events:none;
  transition:opacity 160ms var(--sal),transform 160ms var(--sal),filter 160ms var(--sal),visibility 0s linear 160ms;
}
.ficha.apilado .ficha-item.on{
  opacity:1;transform:none;filter:blur(0);visibility:visible;pointer-events:auto;
  transition:opacity 300ms var(--sal) 60ms,transform 300ms var(--sal) 60ms,filter 300ms var(--sal) 60ms,visibility 0s;
}
.ficha-item h3{font-family:'Cormorant Garamond',serif;font-size:clamp(30px,3.2vw,44px);line-height:1}
.ficha-alt{font-variant-numeric:tabular-nums;color:var(--ambar);font-size:15px}
.ficha-item p{color:var(--crema-tenue);max-width:46ch;text-wrap:pretty}
.tolima-mapa{position:relative;width:100%;max-width:440px;justify-self:center}
.tolima-mapa svg{width:100%;height:auto;display:block}
.mapa-tierra{fill:rgba(246,241,230,.07);stroke:rgba(246,241,230,.55);stroke-width:1.2;stroke-linejoin:round}
.lugar{
  position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;
  padding:6px;border-radius:999px;
}
.lugar i{
  width:12px;height:12px;border-radius:50%;background:var(--crema);flex:none;position:relative;
  transition:transform 200ms var(--sal),background-color 200ms var(--sal);
}
.lugar span{font-size:13px;white-space:nowrap;color:var(--crema-tenue);transition:color 200ms var(--sal)}
.lugar.on i{background:var(--cereza2);transform:scale(1.25)}
.lugar.on i::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--cereza2);
  animation:latido 2.4s var(--sal) infinite;
}
.lugar.on span{color:var(--crema);font-weight:700}
.lugar[data-lugar="ibague"] span,.lugar[data-lugar="libano"] span{order:-1}
.lugar[data-lugar="ibague"],.lugar[data-lugar="libano"]{transform:translate(calc(-100% + 12px),-50%)}
@keyframes latido{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.7);opacity:0}}
@media (hover:hover) and (pointer:fine){.lugar:hover i{transform:scale(1.25)}.lugar:hover span{color:var(--crema)}}
@media (max-width:899px){
  .tolima-cuerpo{grid-template-columns:1fr}
  .tolima-mapa{max-width:360px}
}

/* ---------- 12 · La carta ---------- */
.carta{padding:var(--seccion) 0;display:grid;gap:clamp(36px,5vw,64px)}
.carta-cols{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--pad);width:100%;
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr);gap:clamp(28px,6vw,96px);align-items:start;
}
.carta-cats li a{
  display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--linea-clara);
  text-decoration:none;font-size:18px;transition:padding-left 200ms var(--sal);
}
.carta-cats li:first-child a{border-top:1px solid var(--linea-clara)}
.carta-cats b{margin-left:auto;font-weight:400;color:var(--noche-tenue);font-variant-numeric:tabular-nums}
.carta-lista li a{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"tag tag" "nombre precio" "desc precio";
  gap:4px 18px;padding:18px 0;border-bottom:1px solid var(--linea-clara);
  text-decoration:none;color:inherit;transition:padding-left 200ms var(--sal);
}
.carta-lista li:first-child a{border-top:1px solid var(--linea-clara)}
@media (hover:hover) and (pointer:fine){.carta-cats li a:hover,.carta-lista li a:hover{padding-left:8px}}
.item-tag{grid-area:tag;font-size:13px;color:var(--ambar-texto);font-weight:700}
.item-nombre{grid-area:nombre;font-family:'Cormorant Garamond',serif;font-size:clamp(24px,2.2vw,30px);line-height:1.1}
.item-desc{grid-area:desc;font-size:15px;color:var(--noche-tenue);max-width:46ch}
.item-precio{grid-area:precio;align-self:start;font-variant-numeric:tabular-nums;font-weight:500;font-size:18px;padding-top:4px}
.carta-acciones{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--pad);width:100%;
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;
}
.carta-acciones p{color:var(--noche-tenue);max-width:44ch;font-size:16px}
.carta .boton.fantasma,.visita .boton.fantasma{color:var(--noche)}
@media (max-width:899px){.carta-cols{grid-template-columns:1fr}}

/* ---------- 13 · Pausa ---------- */
.pausa{
  padding:var(--seccion) var(--pad);background:var(--noche);
  display:grid;gap:26px;justify-items:start;
}
.pausa > *{max-width:var(--ancho);width:100%;margin:0 auto}
.pausa .voz{max-width:30ch}
.vapor{width:56px;height:70px;color:var(--ambar);display:block;overflow:visible}
.vapor .hilo{
  opacity:0;transform-box:fill-box;transform-origin:50% 100%;
  animation:vapor 4.2s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i,0) * 1.1s);
}
@keyframes vapor{
  0%{opacity:0;transform:translateY(8px) scaleY(.8)}
  25%{opacity:.9}
  70%{opacity:.35}
  100%{opacity:0;transform:translateY(-16px) scaleY(1.15)}
}
.pausa-links{display:flex;flex-wrap:wrap;gap:12px 36px}
.pausa-links a{
  font-family:'Cormorant Garamond',serif;font-size:clamp(24px,2.4vw,32px);text-decoration:none;
  border-bottom:1px solid var(--linea-oscura);padding-bottom:4px;transition:border-color 200ms var(--sal);
}
@media (hover:hover) and (pointer:fine){.pausa-links a:hover{border-color:var(--crema)}}

/* ---------- 14 · Visítanos ---------- */
.visita{
  padding:var(--seccion) var(--pad);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center;
}
.visita > *{max-width:calc(var(--ancho) / 2)}
.visita-foto{justify-self:end;width:100%}
.visita-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.visita-foto figcaption{font-size:13px;color:var(--noche-tenue);margin-top:10px}
.visita-datos{display:grid;gap:18px;justify-items:start}
.visita-datos address{font-style:normal;font-size:clamp(18px,1.5vw,21px);max-width:30ch;text-wrap:pretty}
.horario{margin:6px 0 0;width:100%;max-width:420px;display:grid}
.horario div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--linea-clara)}
.horario div:first-child{border-top:1px solid var(--linea-clara)}
.horario dt{color:var(--noche-tenue)}
.horario dd{margin:0;font-variant-numeric:tabular-nums}
.visita-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:8px}
@media (min-width:900px){.visita-links{padding-right:130px}}  /* deja libre la esquina del altímetro */
@media (max-width:899px){
  .visita{grid-template-columns:1fr}
  .visita-foto{justify-self:stretch}
}

/* ---------- 15 · Pie ---------- */
.hpie{
  background:var(--tinta);padding:clamp(56px,8vw,96px) var(--pad) calc(96px + env(safe-area-inset-bottom,0px));
  display:grid;gap:26px;justify-items:start;
}
.hpie > *{max-width:var(--ancho);width:100%;margin:0 auto}
.hpie > .hpie-nota{font-size:14px;color:var(--crema-tenue);max-width:60ch;margin:0}
.creditos{font-size:13px;color:var(--crema-tenue)}
.creditos summary{cursor:pointer;list-style:none;display:inline-block;border-bottom:1px solid var(--linea-oscura);padding:8px 0 2px}
.creditos summary::-webkit-details-marker{display:none}
.creditos ul{margin-top:14px;display:grid;gap:6px;max-width:70ch}
.creditos a{color:var(--crema)}
.hpie-links{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:15px}
.hpie-links a{text-decoration:none;color:var(--crema-tenue);display:inline-block;padding:8px 0}
@media (hover:hover) and (pointer:fine){.hpie-links a:hover{color:var(--crema)}}
@media (min-width:900px){.hpie{padding-bottom:clamp(56px,8vw,96px)}}

/* ---------- 16 · Menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero .linea,.hero-sub,.hero-acciones,.hero .estado,.hero-pie{opacity:1;transform:none;filter:none}
  .hero-img{transform:none}
  .tazas i{opacity:1;transform:none}
  .js .revela{clip-path:none}
  .js .revela img{transform:none}
  .vapor .hilo{opacity:.6;transform:none}
  .tueste-paneles.apilado .tueste-panel,.ficha.apilado .ficha-item{transform:none;filter:none}
}