:root {
  --cafe: #1B0F09;
  --cafe2: #2A1810;
  --marron: #5A3A28;
  --crema: #F3EBDD;
  --hueso: #FBF6EC;
  --tostado: #D4722C;
  --gris: #8B7768;
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --lado: clamp(20px, 5vw, 72px);
  --suave: cubic-bezier(.16, 1, .3, 1);
  --medio: cubic-bezier(.76, 0, .24, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cafe); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cafe); color: var(--crema); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
img, video, canvas { display: block; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
em { font-style: italic; }
.et { font: 500 .78rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--tostado); }
.gigante { font: 300 clamp(3.1rem, 7.2vw, 7.8rem)/.98 var(--serif); letter-spacing: -.03em; font-variation-settings: "opsz" 144; }
.grande { font: 300 clamp(2.6rem, 6.6vw, 6.4rem)/1 var(--serif); letter-spacing: -.028em; font-variation-settings: "opsz" 144; }
.gigante em, .grande em { color: var(--tostado); font-weight: 300; }
.corte { display: inline-block; overflow: hidden; overflow: clip; vertical-align: top; margin: 0 -.06em -.2em; padding: 0 .06em .2em; }
.corte > i { display: inline-block; font-style: inherit; will-change: transform; }

/* carga */
.carga { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; background: var(--crema); overflow: hidden; }
.sin-js .carga { display: none; }
.carga__nivel { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: var(--cafe); transform: translateY(100%); }
.carga__marca { position: relative; font: 300 clamp(3rem, 8vw, 6rem)/1 var(--serif); color: var(--marron); mix-blend-mode: difference; }

/* lienzo de las gotas y cursor */
.gotas { position: fixed; z-index: 30; left: 0; top: 0; width: 100vw; height: 100vh; height: 100lvh; pointer-events: none; }
.cursor { position: fixed; z-index: 50; left: 0; top: 0; width: 86px; height: 86px; margin: -43px 0 0 -43px; display: grid; place-items: center; border-radius: 50%; background: var(--tostado); color: var(--hueso); font: 500 .82rem/1 var(--sans); pointer-events: none; opacity: 0; transform: scale(.2); transition: opacity .3s, scale .4s var(--suave); }
@media (hover: none) { .cursor { display: none; } }

/* encabezado */
.tope { position: fixed; z-index: 40; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--lado); color: var(--crema); transition: color .4s, transform .6s var(--suave); }
.tope.claro { color: var(--cafe2); }
.tope.oculto { transform: translateY(-110%); }
.tope__marca { font: 400 1.5rem/1 var(--serif); letter-spacing: -.02em; text-decoration: none; }
.tope__nav { display: flex; gap: 32px; }
.tope__nav a { position: relative; font: 500 .92rem/1 var(--sans); text-decoration: none; }
.tope__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--suave); }
.tope__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.tope__cta { padding: 12px 20px; border: 1px solid currentColor; border-radius: 999px; font: 500 .9rem/1 var(--sans); text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.tope__cta:hover { background: var(--tostado); border-color: var(--tostado); color: var(--hueso); }

/* 1 · chorro */
.chorro { position: relative; background: var(--cafe); }
.con-js .chorro__pista { height: 520vh; height: 520svh; }
.chorro__escena { position: relative; height: 100vh; height: 100svh; min-height: 540px; overflow: hidden; overflow: clip; background: #3A1A12 url(medios/foto/inicio-pc.jpg) center / cover; }
.con-js .chorro__escena { position: -webkit-sticky; position: sticky; top: 0; }
.chorro__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.chorro__sombra { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(27 15 9 / .5), transparent 34%, transparent 62%, rgb(27 15 9 / .62)); }
.chorro__oscuro { position: absolute; inset: 0; background: var(--cafe); opacity: 0; }
.chorro__tit { position: absolute; z-index: 2; left: var(--lado); right: var(--lado); top: clamp(100px, 15vh, 150px); top: clamp(100px, 15svh, 150px); }
.chorro__tit .et { margin-bottom: 20px; color: #F0B98A; }
.chorro__tit .gigante { max-width: 11ch; color: var(--hueso); }
.chorro__tit .gigante em { color: #F0B98A; }
.chorro__frase { position: absolute; z-index: 2; left: var(--lado); bottom: clamp(50px, 12vh, 110px); bottom: clamp(50px, 12svh, 110px); max-width: 12ch; font: 300 clamp(2.5rem, 6vw, 5.6rem)/1 var(--serif); letter-spacing: -.025em; color: var(--hueso); opacity: 0; transform: translateY(26px); transition: opacity .6s, transform .9s var(--suave); }
.chorro__frase em { color: #F0B98A; }
.chorro__frase.ve { opacity: 1; transform: none; }
.chorro__baja { position: absolute; z-index: 2; right: var(--lado); bottom: clamp(30px, 6vh, 56px); bottom: clamp(30px, 6svh, 56px); display: grid; justify-items: center; gap: 12px; font: 500 .84rem/1 var(--sans); color: var(--hueso); transition: opacity .4s; }
.chorro__baja i { width: 1px; height: 50px; background: linear-gradient(var(--hueso), transparent); transform-origin: top; animation: cae 2.2s var(--medio) infinite; }
@keyframes cae { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* secciones claras */
.mani, .carta, .reserva { position: relative; background: var(--crema); color: var(--cafe2); padding-inline: var(--lado); }
.mani { padding-block: clamp(260px, 52vh, 540px) clamp(70px, 10vw, 130px); padding-block: clamp(260px, 52svh, 540px) clamp(70px, 10vw, 130px); }
.mani__texto { max-width: 21ch; margin-top: 30px; font: 300 clamp(2.2rem, 5.4vw, 5.2rem)/1.1 var(--serif); letter-spacing: -.024em; }
.mani__texto .pal { opacity: .16; transition: opacity .35s; }
.mani__texto .pal.on { opacity: 1; }
.mani__par { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: clamp(30px, 6vw, 90px); margin-top: clamp(60px, 9vw, 120px); }
.marco { position: relative; overflow: hidden; overflow: clip; border-radius: 6px; background: var(--marron); }
.marco img, .marco video { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; }
.marco--alto { aspect-ratio: 16 / 11; }
.con-js .marco { clip-path: inset(100% 0 0 0); }
.con-js .marco.visto { clip-path: inset(0); transition: clip-path 1.4s var(--medio); }
.mani__dato p:last-child { max-width: 30ch; margin-top: 16px; color: var(--marron); font-size: 1.08rem; }
.numero { display: flex; align-items: flex-start; font: 300 clamp(5rem, 13vw, 12rem)/.9 var(--serif); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.numero span { margin-top: .12em; font-size: .34em; color: var(--tostado); }
.numero b { font-weight: 300; }

/* carta */
.carta { padding-block: clamp(60px, 8vw, 120px) clamp(170px, 26vh, 260px); padding-block: clamp(60px, 8vw, 120px) clamp(170px, 26svh, 260px); }
.cab .grande { margin-top: 20px; max-width: 14ch; }
.platos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 4vw, 56px) clamp(16px, 2.4vw, 34px); margin-top: clamp(40px, 6vw, 80px); }
.plato { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 14px; align-items: start; cursor: pointer; }
.plato .marco { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
.plato .marco img { top: 0; height: 100%; transition: transform 1.2s var(--suave); }
.plato:hover .marco img { transform: scale(1.06); }
.plato h3 { font: 400 clamp(1.4rem, 2vw, 1.8rem)/1.1 var(--serif); letter-spacing: -.015em; }
.plato p { margin-top: 5px; color: var(--marron); font-size: .96rem; }
.plato b { font: 500 1rem/1.5 var(--sans); }

/* origen */
.origen { position: relative; background: var(--cafe); padding: clamp(120px, 20vh, 200px) var(--lado) clamp(70px, 10vw, 130px); padding: clamp(120px, 20svh, 200px) var(--lado) clamp(70px, 10vw, 130px); overflow: hidden; overflow: clip; }
.cinta { margin: 0 calc(var(--lado) * -1) clamp(60px, 9vw, 120px); overflow: hidden; }
.cinta__pista { display: flex; gap: .7em; width: max-content; font: 300 italic clamp(3.4rem, 10vw, 9rem)/1.1 var(--serif); letter-spacing: -.02em; color: #7A543C; will-change: transform; }
.cinta__pista span::after { content: "·"; margin-left: .7em; color: var(--tostado); }
.fincas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); align-items: center; margin-top: clamp(40px, 6vw, 80px); }
.marco--cenital { aspect-ratio: 1 / 1; }
.fincas__lista li { display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: 28px 0; border-top: 1px solid rgb(243 235 221 / .16); }
.fincas__lista li:last-child { border-bottom: 1px solid rgb(243 235 221 / .16); }
.fincas__lista span { font: 500 .84rem/1.9 var(--sans); color: var(--tostado); }
.fincas__lista h3 { font: 300 clamp(1.7rem, 3vw, 2.6rem)/1.1 var(--serif); letter-spacing: -.02em; }
.fincas__lista p { margin-top: 8px; color: #BCA998; }

/* proceso */
.proceso { position: relative; background: var(--cafe); }
.con-js .proceso__pista { height: 320vh; height: 320svh; }
.proceso__escena { position: relative; height: 100vh; height: 100svh; min-height: 540px; overflow: hidden; overflow: clip; }
.con-js .proceso__escena { position: -webkit-sticky; position: sticky; top: 0; }
.proceso__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proceso__velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(27 15 9 / .78), transparent 62%); }
.pasos { position: absolute; left: var(--lado); top: 50%; transform: translateY(-50%); width: min(560px, calc(100% - var(--lado) * 2)); height: 300px; }
.pasos li { position: absolute; inset: 0; opacity: 0; transform: translateY(34px); transition: opacity .55s, transform .9s var(--suave); }
.pasos li.on { opacity: 1; transform: none; }
.pasos span { font: 500 .78rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #F0B98A; }
.pasos h2 { margin-top: 18px; font: 300 clamp(3.2rem, 8vw, 7.6rem)/1 var(--serif); letter-spacing: -.03em; }
.pasos p { margin-top: 16px; max-width: 26ch; color: #E2D5C5; font-size: 1.14rem; }
.pasos__barra { position: absolute; left: var(--lado); bottom: clamp(40px, 8vh, 70px); width: min(320px, 50%); height: 1px; background: rgb(243 235 221 / .22); }
.pasos__barra i { display: block; height: 100%; background: var(--crema); transform: scaleX(0); transform-origin: left; }

/* barista */
.barra { position: relative; display: grid; justify-items: center; background: var(--cafe); padding: clamp(50px, 8vw, 110px) var(--lado) clamp(190px, 30vh, 280px); padding: clamp(50px, 8vw, 110px) var(--lado) clamp(190px, 30svh, 280px); }
.barra__marco { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; overflow: clip; border-radius: 6px; will-change: transform; }
.barra__marco video { width: 100%; height: 100%; object-fit: cover; }
.barra__frase { margin-top: clamp(40px, 6vw, 70px); text-align: center; font: 300 clamp(2.4rem, 6vw, 5.8rem)/1.05 var(--serif); letter-spacing: -.026em; }
.barra__frase em { color: #F0B98A; }

/* reserva */
.reserva { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); padding-block: clamp(220px, 40vh, 400px) clamp(90px, 12vw, 150px); padding-block: clamp(220px, 40svh, 400px) clamp(90px, 12vw, 150px); }
.reserva .grande { margin-top: 20px; }
.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.datos dt { font: 500 .78rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--tostado); }
.datos dd { margin-top: 10px; }
.form { display: grid; gap: 22px; align-self: end; }
.form label { display: grid; gap: 8px; font: 500 .9rem/1 var(--sans); }
.form input, .form select { width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid rgb(42 24 16 / .34); border-radius: 0; background: none; color: inherit; font: 400 1.1rem/1.3 var(--sans); outline: none; transition: border-color .3s; }
.form input:focus, .form select:focus { border-color: var(--tostado); }
.form__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.boton { position: relative; overflow: hidden; margin-top: 8px; padding: 19px 28px; border: 0; border-radius: 999px; background: var(--cafe2); color: var(--hueso); font: 500 1rem/1 var(--sans); cursor: pointer; }
.boton span { position: relative; z-index: 1; }
.boton::before { content: ""; position: absolute; inset: 0; background: var(--tostado); transform: translateY(101%); transition: transform .6s var(--medio); }
.boton:hover::before { transform: none; }
.form__ok { min-height: 1.6em; color: var(--marron); }

/* pie */
.pie { position: relative; overflow: hidden; overflow: clip; background: var(--cafe); padding: clamp(50px, 7vw, 90px) var(--lado) 26px; }
.pie__marca { font: 300 clamp(6rem, 27vw, 30rem)/.86 var(--serif); letter-spacing: -.05em; text-align: center; color: var(--crema); }
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; margin-top: 30px; color: #BCA998; font-size: .88rem; }

/* celular: lo mismo, adaptado */
@media (max-width: 760px) {
  .tope__nav { display: none; }
  .chorro__escena { background-image: url(medios/foto/inicio-cel.jpg); }
  .con-js .chorro__pista { height: 420vh; height: 420svh; }
  .mani__par, .fincas, .reserva { grid-template-columns: minmax(0, 1fr); }
  .platos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plato { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .plato p { display: block; font-size: .88rem; }
  .proceso__velo { background: linear-gradient(0deg, rgb(27 15 9 / .84), transparent 72%); }
  .pasos { top: auto; bottom: 86px; transform: none; height: 260px; }
  .barra__marco { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  .chorro__baja i { animation: none; }
  .con-js .marco { clip-path: none; }
  .mani__texto .pal { opacity: 1; }
}