/* Café Amato Gourmet — estilos
   Identidad: negro espresso, crema y el rojo del sol del logo. Cormorant Garamond + Jost. */
:root {
  --negro: #12100e;
  --carbon: #1c1915;
  --carbon-2: #26221d;
  --crema: #f5efe6;
  --arena: #ebe1d2;
  --arena-2: #dccdb8;
  --rojo: #e2492b;
  --rojo-osc: #c23a1f;
  --cafe: #6b4a33;
  --texto: #1f1a15;
  --texto-2: #5e5246;
  --claro: #efe7dc;
  --claro-2: #b9ad9e;
  --linea: rgba(31, 26, 21, .12);
  --linea-clara: rgba(239, 231, 220, .14);
  --fuente: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-t: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --e: cubic-bezier(.22, 1, .36, 1);
  --radio: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.65 var(--fuente); color: var(--texto); background: var(--crema); overflow-x: hidden; }
main { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--fuente-t); font-weight: 600; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0 0 1em; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; border-radius: 4px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contenedor { width: min(1200px, 100% - 40px); margin-inline: auto; }

.saltar { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--rojo); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.saltar:focus { top: 12px; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1.5px solid transparent; font: 500 16px/1.2 var(--fuente); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; }
.btn svg { width: 20px; height: 20px; }
.btn--rojo { background: var(--rojo); color: #fff; box-shadow: 0 10px 26px rgba(226, 73, 43, .32); }
.btn--rojo:hover { background: var(--rojo-osc); }
.btn--linea { border-color: rgba(239, 231, 220, .55); color: var(--claro); }
.btn--linea:hover { background: rgba(239, 231, 220, .1); border-color: var(--claro); }
.btn--grande { min-height: 56px; padding: 15px 30px; font-size: 17px; }
.btn--bloque { width: 100%; }
.enlace { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; color: var(--rojo-osc); }
.enlace svg { width: 18px; height: 18px; transition: translate .3s var(--e); }
.enlace:hover svg, a:hover .enlace svg { translate: 4px 0; }

/* ---------- menú ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--claro); transition: background-color .35s, box-shadow .35s; }
.nav__barra { font-size: 13px; letter-spacing: .04em; color: var(--claro-2); border-bottom: 1px solid var(--linea-clara); transition: margin-top .35s var(--e); }
.nav__barra-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 34px; }
.nav__barra span { display: inline-flex; align-items: center; gap: 6px; }
.nav__barra svg { width: 14px; height: 14px; color: var(--rojo); }
.nav__fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.nav__logo img { width: 168px; height: auto; }
.nav.is-scrolled { background: rgba(18, 16, 14, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.nav.is-scrolled .nav__barra { margin-top: -35px; }
.menu { display: flex; align-items: center; gap: 2px; }
.menu a:not(.btn) { position: relative; padding: 10px 13px; font-size: 15px; letter-spacing: .04em; text-decoration: none; color: var(--claro); transition: color .2s; }
.menu a:not(.btn)::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 1.5px; background: var(--rojo); scale: 0 1; transform-origin: left; transition: scale .35s var(--e); }
.menu a:not(.btn):hover::after, .menu a.activo:not(.btn)::after { scale: 1 1; }
.menu__cta { margin-left: 10px; min-height: 44px; padding: 9px 18px; font-size: 15px; }
.burger { display: none; width: 46px; height: 46px; border: 1px solid var(--linea-clara); border-radius: 12px; background: transparent; cursor: pointer; padding: 13px 11px; flex-direction: column; justify-content: space-between; }
.burger span { display: block; height: 2px; border-radius: 2px; background: var(--claro); transition: transform .3s, opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- encabezados de sección ---------- */
.seccion { padding: 112px 0; }
.encabezado { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.encabezado h2 { font-size: clamp(40px, 5.4vw, 64px); margin-bottom: 18px; }
.encabezado p:not(.eyebrow) { color: var(--texto-2); font-size: 18px; }
.encabezado--claro h2 { color: var(--claro); }
.encabezado--fila { display: flex; justify-content: space-between; align-items: end; max-width: none; text-align: left; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; font: 500 13px/1.3 var(--fuente); letter-spacing: .22em; text-transform: uppercase; color: var(--rojo-osc); }
.eyebrow::before { content: ""; width: 28px; height: 1.5px; background: currentColor; transform-origin: left; }
.eyebrow--claro { color: #f08a6f; }

/* ---------- hero con historia (js/historia.js) ---------- */
.nav--solido { background: rgba(18, 16, 14, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hero--historia { position: relative; height: 800vh; background: var(--negro); color: var(--claro); }
.hx-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.hx-escena { --sombra: 0; --dim: 0; position: absolute; inset: 0; z-index: 0; background: #fff; }
#hxCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hxFondo { display: none; }
/* al final, la escena se hace a un lado para dejarle espacio al título */
@media (min-aspect-ratio: 6/5) { #hxCanvas { scale: calc(1 + var(--corre, 0) * .3); translate: calc(var(--corre, 0) * 15%) 0; } }
@media (max-aspect-ratio: 6/5) { #hxFondo { display: block; position: absolute; inset: -4%; width: 108%; height: 108%; filter: blur(14px) brightness(.85); } }
.hx-escena::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--sombra); background: linear-gradient(90deg, rgba(18, 16, 14, .72) 0%, rgba(18, 16, 14, .3) 40%, transparent 65%), linear-gradient(0deg, rgba(18, 16, 14, .85) 0%, transparent 45%); }
.hx-escena::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(18, 16, 14, calc(var(--dim) * 1.5)) 0%, rgba(18, 16, 14, var(--dim)) 45%, rgba(18, 16, 14, calc(var(--dim) * .3)) 100%); }

/* rótulos: se editan en el HTML */
.hx-rotulo { position: absolute; z-index: 3; left: max(20px, calc((100vw - 1200px) / 2)); bottom: clamp(110px, 17vh, 190px); max-width: min(600px, calc(100vw - 40px)); color: #fff; pointer-events: none; }
.hx-rotulo > * { display: block; opacity: 0; translate: 0 18px; transition: opacity .75s var(--e), translate .75s var(--e); }
.hx-rotulo.is-on > * { opacity: 1; translate: 0 0; }
.hx-rotulo.is-on > :nth-child(1) { transition-delay: .1s; }
.hx-rotulo.is-on > :nth-child(2) { transition-delay: .22s; }
.hx-rotulo__tag { margin-bottom: 18px; font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: #ff9d80; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.hx-rotulo__tag::before { content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 1.5px; margin-right: 12px; background: currentColor; }
.hx-rotulo__titulo { font: 600 clamp(40px, 5.6vw, 76px)/1.02 var(--fuente-t); text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }

/* hero final: aparece al terminar el video */
.hx-final { position: absolute; z-index: 4; left: 50%; top: 50%; translate: -50% -46%; color: var(--claro); }
.hx-final > * { max-width: 640px; }
.hx-final h1 { font-size: clamp(46px, 5.6vw, 78px); font-weight: 600; line-height: 1; margin-bottom: 26px; color: #fff; }
.hx-final h1 em { display: block; font-style: italic; font-weight: 500; color: #f4c7b4; }
.hero__lead { font-size: 19px; color: var(--claro); max-width: 520px; margin-bottom: 34px; opacity: .92; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }
.hero__datos { list-style: none; margin: 0; padding: 24px 0 0; display: flex; gap: 40px; border-top: 1px solid var(--linea-clara); font-size: 15px; line-height: 1.3; color: var(--claro-2); }
.hero__datos strong { font: 600 30px/1 var(--fuente-t); color: #fff; }
.hero__datos small { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
/* Pantallas bajas de escritorio: el bloque final se centra bajo el menú y se compacta por altura (antes se metía bajo el menú) */
@media (min-width: 961px) and (max-height: 760px) {
  .hx-final { top: calc(50% + 38px); translate: -50% -50%; }
  .hx-final h1 { font-size: clamp(40px, min(5.6vw, 9.5vh), 78px); margin-bottom: 2.6vh; }
  .hx-final .eyebrow { margin-bottom: 1.6vh; }
  .hx-final .hero__lead { font-size: 17px; margin-bottom: 3.4vh; }
  .hx-final .hero__ctas { margin-bottom: 3.4vh; }
  .hx-final .hero__datos { padding-top: 2.2vh; }
}
.hx .hx-final { pointer-events: none; }
.hx .hx-final.is-ready { pointer-events: auto; }
.hx .hx-final > * { opacity: 0; translate: 0 22px; filter: blur(6px); transition: opacity .8s var(--e), translate .8s var(--e), filter .8s var(--e); }
.hx .hx-final.is-ready > * { opacity: 1; translate: 0 0; filter: blur(0); }
.hx .hx-final.is-ready > :nth-child(1) { transition-delay: .05s; }
.hx .hx-final.is-ready > :nth-child(2) { transition-delay: .17s; }
.hx .hx-final.is-ready > :nth-child(3) { transition-delay: .29s; }
.hx .hx-final.is-ready > :nth-child(4) { transition-delay: .41s; }
.hx .hx-final.is-ready > :nth-child(5) { transition-delay: .53s; }

/* guía: "Desliza" + barra de avance, legible sobre fondo blanco u oscuro */
.hx-guia { position: absolute; z-index: 5; left: 50%; bottom: 26px; translate: -50% 0; display: flex; align-items: center; gap: 14px; padding: 9px 18px; border-radius: 999px; background: rgba(18, 16, 14, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--claro); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; opacity: 0; transition: opacity .6s ease; }
.hero--historia.is-live .hx-guia { opacity: 1; }
.hx-guia__barra { width: min(160px, 32vw); height: 2px; border-radius: 2px; background: rgba(239, 231, 220, .22); overflow: hidden; }
.hx-guia__barra span { display: block; height: 100%; background: var(--rojo); transform-origin: left; scale: 0 1; }

/* movimiento reducido, ?estatico o cuadros que no cargaron: una pantalla con todo visible */
.hero--historia.is-static { height: auto; }
.hero--historia.is-static .hx-sticky { position: relative; height: auto; min-height: 100svh; }
.hero--historia.is-static .hx-escena { background: var(--negro); --dim: .55; }
.hero--historia.is-static .hx-rotulo, .hero--historia.is-static .hx-guia { display: none; }
.hero--historia.is-static .hx-final { position: relative; left: auto; top: auto; translate: none; padding: 170px 0 110px; }
@keyframes rueda { 0% { opacity: 0; translate: 0 0; } 30% { opacity: 1; } 100% { opacity: 0; translate: 0 14px; } }

/* ---------- manifiesto ---------- */
.manifiesto { padding: 120px 0 110px; background: var(--crema); text-align: center; overflow: hidden; }
.manifiesto__caja { max-width: 920px; }
.manifiesto__sol { width: 92px; margin: 0 auto 34px; }
.manifiesto__frase { font: italic 500 clamp(30px, 4.2vw, 50px)/1.22 var(--fuente-t); color: var(--texto); margin: 0; text-wrap: balance; }

/* ---------- historia ---------- */
.historia { background: var(--carbon); color: var(--claro); overflow: hidden; }
.historia__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.historia h2 { font-size: clamp(40px, 5vw, 62px); color: #fff; margin-bottom: 22px; }
.historia__lead { font-size: 18px; color: var(--claro-2); margin-bottom: 40px; }
.valores { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.valor { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; padding: 22px 0; border-top: 1px solid var(--linea-clara); }
.valor:last-child { border-bottom: 1px solid var(--linea-clara); }
.valor__num { grid-row: span 2; font: italic 500 28px/1 var(--fuente-t); color: var(--rojo); padding-top: 4px; }
.valor h3 { font-size: 26px; color: #fff; margin-bottom: 6px; }
.valor p { margin: 0; color: var(--claro-2); font-size: 16px; }
.historia__visual { position: relative; padding-bottom: 70px; }
.historia__foto { margin: 0; border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 5; }
.historia__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.historia__empaque { position: absolute; left: -44px; bottom: 0; width: 46%; margin: 0; padding: 10px; background: #d9cdbd; border-radius: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.historia__empaque img { border-radius: 8px; }

/* ---------- armador de bolsa ---------- */
.cafe { background: var(--crema); }
.armador { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-bottom: 96px; }
.armador__visual { position: relative; isolation: isolate; aspect-ratio: 1; border-radius: 28px; background: #fff; overflow: hidden; box-shadow: 0 30px 70px rgba(60, 40, 20, .12); }
.armador__visual img { position: relative; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease, scale .5s var(--e); }
.armador__visual img.cambiando { opacity: 0; scale: .94; }
.armador__halo { position: absolute; z-index: 0; inset: 18% 22%; border-radius: 50%; background: radial-gradient(circle, rgba(226, 73, 43, .14), transparent 70%); filter: blur(10px); }
.armador__sello { position: absolute; top: 22px; left: 22px; z-index: 1; padding: 6px 14px; border-radius: 999px; background: var(--rojo); color: #fff; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.armador__panel { display: grid; gap: 26px; }
.opcion { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.opcion legend { width: 100%; margin-bottom: 10px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-2); }
.opcion label { flex: 1 1 0; min-width: 120px; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion span { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 10px 18px; border: 1.5px solid var(--arena-2); border-radius: 14px; font-size: 17px; font-weight: 500; background: #fffaf3; transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s; }
.opcion label:hover span { border-color: var(--cafe); }
.opcion input:checked + span { border-color: var(--negro); background: var(--negro); color: #fff; box-shadow: 0 10px 24px rgba(18, 16, 14, .22); }
.opcion input:focus-visible + span { outline: 2px solid var(--rojo); outline-offset: 3px; }
.armador__resumen { padding: 22px 0 4px; border-top: 1px solid var(--linea); }
.armador__nombre { font: 600 26px/1.2 var(--fuente-t); margin-bottom: 8px; }
.armador__precio { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.armador__precio span { font: 600 52px/1 var(--fuente-t); color: var(--texto); font-variant-numeric: tabular-nums; }
.armador__precio s { font-size: 20px; color: var(--texto-2); }
.armador__precio small { font-size: 14px; letter-spacing: .12em; color: var(--texto-2); }
.armador__nota { margin: 0; font-size: 14px; color: var(--texto-2); }

.precios { max-width: 820px; margin: 0 auto; }
.precios__titulo { font-size: 34px; text-align: center; margin-bottom: 22px; }
.precios__tabla { overflow-x: auto; border-radius: var(--radio); border: 1px solid var(--linea); background: #fffaf3; }
.precios table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.precios th, .precios td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--linea); }
.precios thead th { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--texto-2); background: var(--arena); }
.precios tbody th { font-weight: 500; }
.precios tbody tr:last-child > * { border-bottom: 0; }
.precios td { font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .2s; }
.precios td:hover, .precios td.elegido { background: rgba(226, 73, 43, .08); }
.precios td.elegido { box-shadow: inset 3px 0 0 var(--rojo); }
.precios s { margin-left: 6px; font-weight: 400; font-size: 14px; color: var(--texto-2); }

/* ---------- perfil de taza ---------- */
.perfil { position: relative; isolation: isolate; background: var(--negro); color: var(--claro); overflow: hidden; }
.perfil__fondo { position: absolute; inset: -10% 0; z-index: -1; background: url("/img/fondo-granos.jpg") center / cover; opacity: .32; }
.perfil::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, transparent 20%, rgba(18, 16, 14, .9) 80%); }
.perfil__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; perspective: 1200px; }
.nota-cata { --mx: 50%; --my: 0%; position: relative; padding: 32px 30px; border-radius: var(--radio); border: 1px solid var(--linea-clara); background: rgba(28, 25, 21, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow: hidden; transition: border-color .3s; }
.nota-cata::before { content: ""; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--mx) var(--my), rgba(226, 73, 43, .16), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.nota-cata:hover { border-color: rgba(226, 73, 43, .45); }
.nota-cata:hover::before { opacity: 1; }
.nota-cata__icono { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 22px; border-radius: 50%; border: 1px solid rgba(226, 73, 43, .5); color: #f08a6f; }
.nota-cata__icono svg { width: 26px; height: 26px; }
.nota-cata h3 { font-size: 27px; color: #fff; margin-bottom: 10px; }
.nota-cata p { margin: 0; color: var(--claro-2); font-size: 16px; }

/* ---------- cómo pedir ---------- */
.pedidos { background: var(--arena); }
.pasos { list-style: none; margin: 0 0 52px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: paso; }
.paso { position: relative; padding: 36px 30px 32px; border-radius: var(--radio); background: var(--crema); counter-increment: paso; }
.paso::after { content: counter(paso, decimal-leading-zero); position: absolute; top: 20px; right: 26px; font: italic 500 46px/1 var(--fuente-t); color: var(--arena-2); }
.paso__icono { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 22px; border-radius: 16px; background: var(--negro); color: #fff; }
.paso__icono svg { width: 28px; height: 28px; }
.paso h3 { font-size: 28px; margin-bottom: 10px; }
.paso p { margin: 0; color: var(--texto-2); font-size: 16px; }
.pedidos__cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 28px; }

/* ---------- rancho ---------- */
.rancho { position: relative; isolation: isolate; padding: 140px 0; color: var(--claro); background: var(--negro); overflow: hidden; }
.rancho__foto { position: absolute; inset: -12% 0; z-index: -2; }
.rancho__foto img { width: 100%; height: 100%; object-fit: cover; }
.rancho::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 16, 14, .9) 0%, rgba(18, 16, 14, .65) 50%, rgba(18, 16, 14, .82) 100%); }
.rancho__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.rancho h2 { font-size: clamp(48px, 6.4vw, 84px); color: #fff; }
.rancho__lugar { font: italic 500 30px/1.2 var(--fuente-t); color: #f4c7b4; margin: 6px 0 22px; }
.rancho__texto p:last-child { font-size: 18px; max-width: 460px; color: var(--claro); }
.proceso { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.proceso li { display: flex; gap: 18px; align-items: center; padding: 20px 24px; border-radius: 16px; background: rgba(18, 16, 14, .6); border: 1px solid var(--linea-clara); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.proceso svg { width: 34px; height: 34px; color: #f08a6f; }
.proceso h3 { font-size: 24px; color: #fff; margin-bottom: 2px; }
.proceso p { margin: 0; color: var(--claro-2); font-size: 15px; }

/* ---------- notas ---------- */
.notas { background: var(--crema); }
.notas__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; perspective: 1200px; }
.nota a { display: block; height: 100%; text-decoration: none; border-radius: var(--radio); overflow: hidden; background: #fffaf3; border: 1px solid var(--linea); transition: box-shadow .35s, border-color .35s; }
.nota a:hover { box-shadow: 0 24px 50px rgba(60, 40, 20, .14); border-color: transparent; }
.nota__foto { aspect-ratio: 16 / 9; overflow: hidden; }
.nota__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--e); }
.nota a:hover .nota__foto img { scale: 1.05; }
.nota__cuerpo { padding: 26px 28px 30px; }
.nota__meta { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--rojo-osc); margin-bottom: 10px; }
.nota h3 { font-size: 30px; margin-bottom: 18px; }

/* ---------- ubicación ---------- */
.ubicacion { background: var(--arena); }
.ubicacion__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.ubicacion h2 { font-size: clamp(38px, 4.6vw, 56px); margin-bottom: 30px; }
.contacto { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 18px; }
.contacto li { display: flex; gap: 16px; align-items: flex-start; }
.contacto svg { width: 24px; height: 24px; margin-top: 3px; color: var(--rojo); }
.contacto a { text-decoration: none; }
.contacto a:hover strong { color: var(--rojo-osc); }
.contacto strong { font-weight: 600; transition: color .2s; }
.ubicacion__mapa { border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--arena-2); box-shadow: 0 30px 60px rgba(60, 40, 20, .16); }
.ubicacion__mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: sepia(.25) saturate(.85); }
.redes { display: flex; gap: 10px; margin-top: 20px; }
.redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea-clara); color: var(--claro); transition: background-color .25s, border-color .25s, color .25s; }
.redes a:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.redes svg { width: 20px; height: 20px; }
.redes--oscuras a { border-color: var(--linea); color: var(--texto); }

/* ---------- cierre ---------- */
.cierre { position: relative; isolation: isolate; padding: 130px 0; text-align: center; color: var(--claro); background: var(--negro); overflow: hidden; }
.cierre__fondo { position: absolute; inset: 0; z-index: -2; }
.cierre__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.cierre::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(18, 16, 14, .66); }
.cierre__caja { max-width: 720px; }
.cierre h2 { font-size: clamp(42px, 6vw, 76px); color: #fff; margin-bottom: 18px; }
.cierre p { font-size: 19px; margin-bottom: 32px; }

/* ---------- footer ---------- */
.footer { position: relative; isolation: isolate; background: var(--negro); color: var(--claro-2); padding: 80px 0 28px; font-size: 16px; }
.footer::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(900px, 100%); height: 240px; translate: -50% 0; background: radial-gradient(ellipse at top, rgba(226, 73, 43, .16), transparent 70%); pointer-events: none; }
.footer__linea { position: absolute; top: -1px; left: 0; right: 0; height: 1.5px; transform-origin: left; background: linear-gradient(90deg, transparent, var(--rojo) 30%, #f4c7b4 60%, transparent); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.footer h2 { font: 500 13px/1.3 var(--fuente); letter-spacing: .2em; text-transform: uppercase; color: var(--claro); margin-bottom: 16px; }
.footer__logo { width: 170px; margin-bottom: 18px; }
.footer p { margin: 0; }
.footer__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer__lista a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; text-decoration: none; transition: color .2s; overflow-wrap: anywhere; }
.footer__lista a:hover { color: #fff; }
.footer__lista svg { width: 18px; height: 18px; color: var(--rojo); }
.footer__legal { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--linea-clara); font-size: 14px; text-align: center; }

/* ---------- botón flotante ---------- */
.flotante { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #1faa53; color: #fff; box-shadow: 0 12px 28px rgba(16, 110, 52, .45); transition: background-color .2s; }
.flotante:hover { background: #178a43; }
.flotante svg { width: 32px; height: 32px; }
.flotante::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #1faa53; animation: onda 2.4s ease-out infinite; }
@keyframes onda { 0% { opacity: .8; scale: 1; } 100% { opacity: 0; scale: 1.6; } }

/* ---------- páginas internas ---------- */
.pagina { padding: 170px 0 100px; background: var(--crema); }
.pagina__cabeza { background: var(--carbon); color: var(--claro); padding: 160px 0 70px; }
.pagina__cabeza h1 { font-size: clamp(40px, 5.6vw, 66px); color: #fff; max-width: 900px; }
.pagina__cabeza p { color: var(--claro-2); margin: 16px 0 0; }
.texto { max-width: 760px; margin: 0 auto; padding: 72px 0 100px; }
.texto h2 { font-size: 32px; margin: 42px 0 12px; }
.texto p, .texto li { color: var(--texto-2); }
.texto ul, .texto ol { padding-left: 22px; margin: 0 0 1.2em; }
.texto li { margin-bottom: 6px; }
.texto__foto { margin: 0 0 40px; border-radius: var(--radio); overflow: hidden; aspect-ratio: 16 / 8; }
.texto__foto img { width: 100%; height: 100%; object-fit: cover; }
.texto__cta { margin-top: 48px; padding: 32px; border-radius: var(--radio); background: var(--arena); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; }
.texto__cta p { margin: 0; font: 600 26px/1.2 var(--fuente-t); color: var(--texto); }
.volver { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--claro-2); text-decoration: none; font-size: 15px; }
.volver svg { width: 18px; height: 18px; rotate: 180deg; }
.volver:hover { color: #fff; }

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  .menu a:not(.btn) { padding: 10px 9px; font-size: 14px; }
  .menu a:not(.btn)::after { left: 9px; right: 9px; }
}
@media (max-width: 960px) {
  .burger { display: flex; }
  .menu { position: fixed; inset: 0 0 auto; flex-direction: column; align-items: stretch; gap: 2px; padding: 128px 20px 26px; background: var(--negro); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); transform: translateY(-105%); visibility: hidden; transition: transform .4s var(--e), visibility .4s; z-index: -1; }
  .menu.abierto { transform: none; visibility: visible; }
  .menu a:not(.btn) { padding: 14px 6px; font-size: 18px; border-bottom: 1px solid var(--linea-clara); }
  .menu a:not(.btn)::after { left: 6px; right: auto; width: 40px; bottom: -1px; }
  .menu__cta { margin: 16px 0 0; min-height: 54px; }
  .nav.is-scrolled .menu { padding-top: 94px; }
  .historia__grid, .rancho__fila, .ubicacion__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .historia__visual { max-width: 520px; margin-inline: auto; width: 100%; }
  .historia__empaque { left: -10px; }
  .armador { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .armador__visual { max-width: 520px; width: 100%; margin-inline: auto; }
  .perfil__grid, .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .contenedor { width: min(1200px, 100% - 32px); }
  .seccion { padding: 80px 0; }
  .encabezado { margin-bottom: 40px; }
  .nav__barra .nav__barra-envios { display: none; }
  .nav__logo img { width: 138px; }
  .nav__fila { min-height: 66px; }
  .hero--historia { height: 650vh; }
  .hx-escena::before { background: linear-gradient(0deg, rgba(18, 16, 14, .9) 0%, rgba(18, 16, 14, .55) 32%, transparent 52%); }
  .hx-escena::after { background: linear-gradient(0deg, rgba(18, 16, 14, calc(var(--dim) * 1.6)) 0%, rgba(18, 16, 14, calc(var(--dim) * 1.2)) 60%, rgba(18, 16, 14, calc(var(--dim) * .4)) 100%); }
  .hx-rotulo { left: 16px; right: 16px; bottom: 96px; }
  .hx-rotulo__titulo { font-size: clamp(32px, 9vw, 40px); line-height: 1.08; }
  .hx-final { top: auto; bottom: 86px; translate: -50% 0; }
  .hx-final h1 { font-size: clamp(38px, 11vw, 48px); margin-bottom: 16px; }
  .hero--historia.is-static .hx-final { padding: 120px 0 64px; }
  .hero__lead { font-size: 15px; line-height: 1.55; margin-bottom: 22px; }
  .hero__ctas { gap: 10px; margin-bottom: 24px; }
  .hero__ctas .btn--grande { min-height: 50px; padding: 12px 22px; font-size: 16px; }
  .hero__datos { padding-top: 16px; }
  .hero__ctas .btn { width: 100%; }
  .hero__datos { gap: 18px; justify-content: space-between; }
  .hero__datos strong { font-size: 24px; }
  .hero__datos small { font-size: 11px; }
  .hx-guia { bottom: 18px; }
  .manifiesto { padding: 88px 0 80px; }
  .perfil__grid, .pasos, .notas__grid { grid-template-columns: minmax(0, 1fr); }
  .historia__empaque { width: 50%; }
  .opcion label { min-width: 0; }
  .armador__precio span { font-size: 44px; }
  .precios th, .precios td { padding: 14px 14px; }
  .precios s { display: block; margin: 2px 0 0; }
  .rancho { padding: 96px 0; }
  .encabezado--fila { display: block; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .texto__cta .btn { width: 100%; }
}

/* =========================================================
   Coreografía (motion.js + motion-extra.js)
   Todo vive bajo .m (lo pone el <head> solo si no se pidió menos movimiento).
   ========================================================= */
.palabra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.palabra > span { display: inline-block; }
.m [data-m] { opacity: 0; }
.m [data-m="palabras"].dividido { opacity: 1; }
.m [data-m="palabras"] .palabra > span { opacity: 0; translate: 0 110%; }
.m [data-m].eyebrow::before { scale: 0 1; transition: scale .7s var(--e) .25s; }
.m [data-m].eyebrow.on::before { scale: 1 1; }

.progreso { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 101; pointer-events: none; transform-origin: left; scale: 0 1; background: linear-gradient(90deg, var(--rojo), #f4c7b4); }

.m .footer__linea { scale: 0 1; }
.m .footer::before { opacity: 0; }
.m .footer [data-f] { opacity: 0; translate: 0 22px; filter: blur(6px); }
.m .footer.on .footer__linea { scale: 1 1; transition: scale 1.1s var(--e); }
.m .footer.on::before { opacity: 1; transition: opacity 1.2s ease .45s; }
.m .footer.on [data-f] { opacity: 1; translate: 0 0; filter: blur(0); transition: opacity .8s ease, translate .8s var(--e), filter .8s ease; transition-delay: calc(.6s + var(--i, 0) * .11s); }

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