/* Ventisca — café de especialidad (plantilla conceptual)
   Mismo lenguaje que los sitios de Crespo y Bio Prana: portada a pantalla
   completa con velo y zoom lento, etiquetas en mayúsculas con línea, títulos
   con serifa, botones rectos con relleno que entra desde la izquierda,
   tarjetas altas que se agrandan, secciones oscuras y claras alternadas.
   Paleta propia: espresso, crema y cobre. Sin bordes redondeados. */
:root {
    --espresso: #1a120d;
    --espresso-2: #241912;
    --cream: #f4ece0;
    --cream-2: #ebe0cf;
    --ink: #2a1f18;
    --ink-soft: #66574b;
    --copper: #b7773f;
    --copper-light: #d49a63;
    --copper-deep: #8c5528;
    --on-dark: #f4ece0;
    --on-dark-muted: rgba(244, 236, 224, 0.7);
    --line: rgba(42, 31, 24, 0.15);
    --line-dark: rgba(244, 236, 224, 0.16);
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Jost', system-ui, sans-serif;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --pad: clamp(20px, 5vw, 72px);
    --max: 1200px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 0.98; letter-spacing: -0.01em; }
h2 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
em { font-style: italic; font-weight: 500; color: var(--copper-light); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--espresso); color: var(--cream); padding: 8px 12px; z-index: 200; }
.skip:focus { left: 8px; }

/* Pantalla de carga: el nombre y una línea de cobre */
.preloader { position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--espresso); transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease); }
.preloader.is-done { opacity: 0; visibility: hidden; }
.pre-word { font-family: var(--serif); font-size: 2.4rem; font-style: italic; color: var(--cream); }
.pre-line { width: 80px; height: 1px; background: var(--copper); transform-origin: left; animation: preLine 1.2s ease-in-out infinite; }
@keyframes preLine { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 100% { transform: scaleX(0); transform-origin: right; } }

/* Etiqueta en mayúsculas con línea adelante */
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--copper-deep); }
.eb-line { width: 42px; height: 1px; background: var(--copper); flex: none; }

/* Botones rectos: relleno que entra desde la izquierda y flecha que avanza */
.btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 18px;
    padding: 17px 32px;
    border: 1px solid var(--copper);
    background: linear-gradient(135deg, var(--copper-light), var(--copper) 55%, var(--copper-deep));
    color: var(--espresso);
    font: 600 12.5px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
    cursor: pointer;
    transition: color 0.35s ease, transform 0.35s var(--ease);
}
.btn::before { content: ''; position: absolute; inset: 0; background: var(--espresso); transform: translateX(-101%); transition: transform 0.45s var(--ease); }
.btn > span { position: relative; z-index: 1; }
.btn .arr { font-size: 16px; transition: transform 0.4s var(--ease); }
.btn:hover, .btn:focus-visible { color: var(--copper-light); outline: none; }
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn:hover .arr { transform: translateX(5px); }
.btn-line { background: transparent; color: var(--on-dark); border-color: rgba(244, 236, 224, 0.45); }
.btn-line::before { background: var(--cream); }
.btn-line:hover, .btn-line:focus-visible { color: var(--espresso); }
.btn-sm { padding: 13px 22px; font-size: 11.5px; }

/* Encabezado: sobre la portada es transparente; al bajar toma fondo */
.top { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; gap: 32px; padding: 18px var(--pad); color: var(--on-dark); transition: background-color 0.4s ease, padding 0.4s ease, color 0.4s ease; }
.top.is-scrolled { background: var(--cream); color: var(--ink); padding-block: 12px; box-shadow: 0 1px 0 var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; font-style: italic; font-size: 1.8rem; text-decoration: none; }
.brand-mark { width: 32px; height: 19px; fill: none; stroke: var(--copper); stroke-width: 2; stroke-linecap: square; }
.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a { position: relative; font-size: 12.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; opacity: 0.85; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.menu-btn, .menu { display: none; }

/* Portada */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--espresso); color: var(--on-dark); }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; filter: saturate(0.85) contrast(1.06); transform-origin: 60% 40%; animation: heroZoom 26s ease-in-out infinite alternate; }
@keyframes heroZoom { to { transform: scale(1.08); } }
.hero-veil { position: absolute; inset: 0; background: radial-gradient(ellipse 45% 55% at 80% 50%, rgba(183, 119, 63, 0.18), transparent 70%), linear-gradient(100deg, rgba(20, 13, 9, 0.92) 0%, rgba(20, 13, 9, 0.62) 40%, rgba(20, 13, 9, 0.18) 72%, rgba(20, 13, 9, 0.35) 100%); }
.hero-in { position: relative; z-index: 2; width: min(720px, calc(100% - 2 * var(--pad))); margin-left: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); padding-top: 70px; animation: heroIn 1s var(--ease) 0.9s both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } }
.hero .eyebrow { color: var(--copper-light); }
.hero-title { font-size: clamp(3.6rem, 8.6vw, 7.6rem); margin-bottom: 26px; }
.hero-text { max-width: 470px; margin-bottom: 38px; font-size: 1.12rem; color: var(--on-dark-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-open { position: absolute; z-index: 2; right: var(--pad); bottom: 34px; display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-muted); }
.hero-open strong { color: var(--cream); font-weight: 600; }
.hero-open .dot { width: 7px; height: 7px; background: #7fb37d; }
.hero-open.is-closed .dot { background: var(--copper); }
.wind { position: absolute; z-index: 1; left: 0; right: 0; bottom: 6%; width: 100%; height: 160px; pointer-events: none; }
.wind path { fill: none; stroke: var(--cream); stroke-opacity: 0.22; stroke-width: 1; stroke-dasharray: 140 900; animation: gust 9s linear infinite; }
.wind path:nth-child(2) { animation-duration: 12s; animation-delay: -4s; }
.wind path:nth-child(3) { animation-duration: 15s; animation-delay: -8s; }
@keyframes gust { from { stroke-dashoffset: 1040; } to { stroke-dashoffset: 0; } }

/* Franja */
.strip { overflow: hidden; background: var(--espresso-2); color: var(--cream); border-top: 1px solid var(--line-dark); }
.strip-track { display: flex; width: max-content; animation: slide 40s linear infinite; }
.strip > div > span { padding: 18px 30px; font-family: var(--serif); font-size: 1.45rem; font-style: italic; white-space: nowrap; }
.strip span::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 60px; background: var(--copper); vertical-align: middle; transform: rotate(45deg); }
@keyframes slide { to { transform: translateX(-50%); } }

/* Secciones */
.section { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 13vh, 150px) var(--pad); }
.section-head { margin-bottom: 48px; }

/* Carta */
.tabs { display: flex; flex-wrap: wrap; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.tabs button { position: relative; padding: 14px 24px; border: 0; background: none; color: var(--ink-soft); font: 500 12.5px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: color 0.2s; }
.tabs button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--copper); transform: scaleX(0); transition: transform 0.35s var(--ease); }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.tabs button:focus-visible { outline: 1px solid var(--copper); outline-offset: -1px; }
.menu-list[hidden] { display: none; }
.menu-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 72px; }
.menu-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0 14px; padding: 20px 0; border-bottom: 1px solid var(--line); animation: rise 0.5s var(--ease) both; }
.menu-list li:nth-child(2) { animation-delay: 0.05s; } .menu-list li:nth-child(3) { animation-delay: 0.1s; }
.menu-list li:nth-child(4) { animation-delay: 0.15s; } .menu-list li:nth-child(5) { animation-delay: 0.2s; } .menu-list li:nth-child(6) { animation-delay: 0.25s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.item { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; }
.dots { border-bottom: 1px dotted rgba(42, 31, 24, 0.35); transform: translateY(-6px); }
.price { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--copper-deep); }
.menu-list small { grid-column: 1 / -1; margin-top: 2px; color: var(--ink-soft); font-size: 15px; }
.note { margin-top: 30px; color: var(--ink-soft); font-size: 14px; letter-spacing: 0.04em; }

/* Origen (bloque oscuro) */
.origen { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; background: var(--espresso); color: var(--on-dark); padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); }
.origen .eyebrow { color: var(--copper-light); }
.origen-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 4.4; }
.origen-photo::after { content: ''; position: absolute; inset: 16px; border: 1px solid rgba(212, 154, 99, 0.5); pointer-events: none; }
.origen-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8); }
.origen-copy h2 { margin-bottom: 22px; }
.origen-copy > p { max-width: 46ch; color: var(--on-dark-muted); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.facts div { padding-top: 16px; border-top: 1px solid var(--copper); }
.facts dt { font-family: var(--serif); font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--copper-light); }
.facts dd { margin-top: 8px; color: var(--on-dark-muted); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }

/* El lugar: tarjetas altas; la que tiene el mouse crece y las demás se achican */
.panels-x { display: flex; gap: 12px; height: 520px; }
.px-card { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--espresso); transition: flex-grow 0.6s var(--ease); }
.px-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) brightness(0.85); transition: transform 0.9s var(--ease), filter 0.6s ease; }
.px-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 13, 9, 0.85), transparent 55%); }
.px-card figcaption { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 22px; display: grid; gap: 4px; color: var(--cream); font-family: var(--serif); font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.px-card figcaption span { font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.24em; color: var(--copper-light); }
.panels-x:hover .px-card { flex-grow: 0.7; }
.panels-x .px-card:hover { flex-grow: 2.2; }
.px-card:hover img { transform: scale(1.05); filter: saturate(1) brightness(1); }

/* Reservas (bloque oscuro) */
.reservas { max-width: none; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; background: var(--espresso-2); color: var(--on-dark); padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); }
.reservas .eyebrow { color: var(--copper-light); }
.reservas h2 { margin-bottom: 20px; }
.reservas-copy p:last-child { max-width: 38ch; color: var(--on-dark-muted); }
.form { display: grid; gap: 20px; }
.form .row { display: grid; grid-template-columns: 0.8fr 1.2fr 1fr; gap: 16px; }
.form label { display: grid; gap: 10px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-muted); }
.form .opt { letter-spacing: 0.08em; text-transform: none; opacity: 0.7; }
.form input, .form select, .form textarea { width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line-dark); border-radius: 0; background: transparent; color: var(--cream); font: 400 17px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color-scheme: dark; transition: border-color 0.25s; }
.form select option { background: var(--espresso-2); }
.form textarea { padding: 12px; border: 1px solid var(--line-dark); resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--copper-light); }
.form .btn { justify-self: start; margin-top: 6px; }
.form-msg { min-height: 1.6em; color: var(--copper-light); }
.form-msg.ok { color: #c7dcc0; }

/* Visitanos */
.visitanos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.addr { margin-top: 22px; color: var(--ink-soft); font-size: 1.1rem; }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: 18px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.hours th { font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; }
.hours td { text-align: right; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; }
.hours tr.is-today th { color: var(--copper-deep); }
.hours tr.is-today th::after { content: '— hoy'; margin-left: 10px; letter-spacing: 0.1em; }

/* Pie */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; padding: 30px var(--pad); background: var(--espresso); color: var(--on-dark-muted); }
.foot-brand { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--cream); }
.foot-concept { font-size: 14px; }
.foot-concept a { color: var(--copper-light); }

/* Aparición al bajar */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* Celular */
@media (max-width: 860px) {
    body { font-size: 16px; }
    .nav, .top > .btn { display: none; }
    .menu-btn { display: grid; gap: 7px; margin-left: auto; width: 44px; height: 44px; place-content: center; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
    .menu-btn span { display: block; width: 18px; height: 1px; background: currentColor; transition: transform 0.3s; }
    .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
    .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
    .menu:not([hidden]) { position: fixed; inset: 0; z-index: 90; display: grid; align-content: center; gap: 4px; padding: 0 var(--pad); background: var(--espresso); }
    .menu a { padding: 12px 0; font-family: var(--serif); font-size: 2.4rem; font-style: italic; color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--line-dark); }
    .top:has(.menu-btn[aria-expanded="true"]) { background: transparent; color: var(--cream); box-shadow: none; }
    .hero-in { margin-left: var(--pad); }
    .hero-veil { background: linear-gradient(to top, rgba(20, 13, 9, 0.95) 10%, rgba(20, 13, 9, 0.55) 60%, rgba(20, 13, 9, 0.4)); }
    .hero { align-items: flex-end; padding-bottom: 90px; }
    .hero-open { left: var(--pad); right: auto; }
    .menu-list { grid-template-columns: 1fr; }
    .origen, .visitanos, .reservas { grid-template-columns: 1fr; }
    .origen-photo { aspect-ratio: 4 / 3; }
    .panels-x { flex-direction: column; height: auto; }
    .px-card { flex: none; height: 220px; }
    .panels-x:hover .px-card, .panels-x .px-card:hover { flex-grow: 0; }
    .form .row { grid-template-columns: 1fr 1fr; }
    .form .row label:first-child { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
    .preloader { display: none; }
    html { scroll-behavior: auto; }
}
.hero-title em { display: block; }