/* ===== Tokens (edita aquí la paleta y tipografía) ===== */
:root{
  --espresso:#2a1a12; --crema:#f6ecda; --crema-2:#efe0c6; --cobalto:#1f3b8c;
  --calendula:#f2a900; --hoja:#3f7d3a; --texto:#2a1a12; --suave:#6b5646;
  --serif:"Fraunces",Georgia,serif; --sans:"DM Sans",system-ui,sans-serif;
  --r:20px; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font:400 1.05rem/1.65 var(--sans);color:var(--texto);background:var(--crema);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1120px,92%);margin:auto}
h1,h2,h3{font-family:var(--serif);line-height:1.1;font-weight:700}
h1{font-size:clamp(2.3rem,6vw,4.4rem);letter-spacing:-.02em}
h1 em{color:var(--cobalto);font-weight:500}
h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:1.2rem}
.eyebrow{display:flex;align-items:center;gap:.6rem;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--cobalto);margin-bottom:1rem}
.lead{font-size:1.2rem;color:var(--suave);max-width:46ch;margin:1.2rem 0 1.8rem}
.muted,.note{color:var(--suave);font-size:.92rem}
.note{margin-top:1.4rem}
:focus-visible{outline:3px solid var(--calendula);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:99}

/* Botones */
.btn{display:inline-block;background:var(--espresso);color:var(--crema);padding:.9rem 1.6rem;border-radius:99px;text-decoration:none;font-weight:700;border:2px solid var(--espresso);transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.btn:hover{transform:translateY(-3px);background:var(--cobalto);border-color:var(--cobalto);box-shadow:0 10px 20px -8px rgba(31,59,140,.5)}
.btn-ghost{background:transparent;color:var(--espresso)}
.btn-ghost:hover{color:#fff}
.btn-sm{padding:.5rem 1.1rem;font-size:.9rem}
.btn-big{background:var(--calendula);color:var(--espresso);border-color:var(--calendula);font-size:1.15rem;padding:1.1rem 2.2rem}
.btn-big:hover{background:#fff;border-color:#fff}
.cta{display:flex;flex-wrap:wrap;gap:.8rem}

/* Nav */
.nav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:.8rem 4%;background:rgba(246,236,218,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(42,26,18,.08)}
.logo{font:700 1.4rem var(--serif);text-decoration:none}
.logo span{color:var(--cobalto);font-style:italic;font-weight:500;margin-left:.3rem}
.nav nav{display:flex;align-items:center;gap:1.6rem}
.nav nav a:not(.btn){text-decoration:none;font-weight:500;position:relative}
.nav nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--calendula);transition:width .3s var(--ease)}
.nav nav a:not(.btn):hover::after{width:100%}
.burger{display:none;background:none;border:0;padding:.6rem;cursor:pointer}
.burger i{display:block;width:26px;height:2px;background:var(--espresso);margin:6px 0;transition:transform .3s}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center;width:min(1200px,94%);margin:auto;padding:4rem 0 3rem}
.dot{width:10px;height:10px;border-radius:50%;background:#999}
.dot.on{background:var(--hoja);box-shadow:0 0 0 4px rgba(63,125,58,.2)}
.dot.off{background:#b3452c}
.hero-art{position:relative}
.hero-art>img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:75% center;border-radius:240px 240px var(--r) var(--r);border:6px solid var(--cobalto);box-shadow:14px 14px 0 var(--calendula)}
.seal{position:absolute;left:-30px;bottom:30px;width:128px;height:128px;border-radius:50%;background:var(--espresso);color:var(--crema);display:grid;place-content:center;text-align:center}
.seal svg{position:absolute;inset:0;animation:spin 22s linear infinite}
.seal text{font:700 9.500px var(--sans);letter-spacing:2px;fill:var(--calendula);text-transform:uppercase}
.seal b{font:700 1.5rem var(--serif);line-height:1}.seal small{font-size:.7rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* Cinta */
.marquee{background:var(--cobalto);color:var(--crema);overflow:hidden;padding:.9rem 0;transform:rotate(-1deg);margin:2rem -2%}
.marquee div{display:flex;gap:2.5rem;width:max-content;animation:slide 28s linear infinite;font:italic 500 1.4rem var(--serif)}
.marquee span::after{content:"✦";margin-left:2.5rem;color:var(--calendula)}
@keyframes slide{to{transform:translateX(-50%)}}

/* Historia */
.story{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:center;width:min(1050px,92%);margin:5rem auto}
.story img{border-radius:var(--r);transform:rotate(-3deg);box-shadow:0 20px 40px -20px rgba(0,0,0,.4);max-height:560px;width:100%;object-fit:cover}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin-top:1.5rem}
.chips li{background:var(--crema-2);padding:.35rem .9rem;border-radius:99px;font-size:.88rem;font-weight:500;border:1px solid rgba(42,26,18,.12)}

/* Carta */
.menu{background:var(--espresso);color:var(--crema);padding:5rem 0}
.menu .eyebrow{color:var(--calendula)}
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 2rem}
.tabs button{font:500 1rem var(--sans);color:var(--crema);background:transparent;border:1.5px solid rgba(246,236,218,.35);padding:.6rem 1.3rem;border-radius:99px;cursor:pointer;transition:.25s}
.tabs button:hover{border-color:var(--calendula)}
.tabs button[aria-selected=true]{background:var(--calendula);color:var(--espresso);border-color:var(--calendula);font-weight:700}
.panel ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem;animation:fade .5s var(--ease)}
.panel li{padding:1rem 0;border-bottom:1px dashed rgba(246,236,218,.25)}
.panel b{display:block;font:500 1.25rem var(--serif)}
.panel span{display:block;font-size:.92rem;opacity:.75}
.menu .note{color:rgba(246,236,218,.7)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}}

/* Galería */
.gallery{padding:5rem 0}
.grid{columns:3;column-gap:1rem}
.grid button{display:block;width:100%;margin-bottom:1rem;padding:0;border:0;border-radius:var(--r);overflow:hidden;cursor:zoom-in;background:none;break-inside:avoid}
.grid img{width:100%;transition:transform .6s var(--ease)}
.grid img.top{aspect-ratio:1;object-fit:cover;object-position:top}
.grid button:hover img{transform:scale(1.06)}
dialog{border:0;border-radius:var(--r);padding:0;background:transparent;max-width:92vw}
dialog::backdrop{background:rgba(20,10,5,.85)}
dialog img{max-height:88vh;border-radius:var(--r)}
.x{position:absolute;right:8px;top:8px;width:40px;height:40px;border-radius:50%;border:0;font-size:1.6rem;cursor:pointer;background:var(--crema)}

/* Visita */
.visit{background:var(--crema-2);padding:5rem 0}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start}
address{font:italic 500 1.6rem/1.3 var(--serif);margin-bottom:1rem}
.visit .muted{margin-bottom:1.5rem}
.hours{background:var(--crema);border-radius:var(--r);padding:2rem;border:2px solid var(--cobalto)}
.hours h3{font-size:1.6rem;margin-bottom:1rem}
.hours small{font:700 .75rem var(--sans);margin-left:.5rem;padding:.2rem .6rem;border-radius:99px;vertical-align:middle}
.hours small.on{background:#d9ecd6;color:#245a1f}.hours small.off{background:#f4d9d2;color:#8a2c18}
.hours ul{list-style:none;padding:0}
.hours li{display:flex;justify-content:space-between;padding:.55rem .6rem;border-radius:8px}
.hours li.today{background:var(--calendula);font-weight:700}

/* Contacto */
.contact{background:var(--cobalto);color:var(--crema);text-align:center;padding:5rem 0}
.contact p{margin:.5rem 0 1.8rem}.contact .muted{color:rgba(246,236,218,.75);margin-top:1.5rem}
footer{text-align:center;padding:1.5rem;font-size:.9rem;color:var(--suave)}
.wa-float{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.3);z-index:40;transition:transform .25s}
.wa-float:hover{transform:scale(1.1) rotate(-6deg)}

/* Animación de entrada */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.story img.reveal.in{transform:rotate(-3deg)}

/* Responsive */
@media(max-width:860px){
  .burger{display:block}
  .nav nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:1.5rem;background:var(--crema);gap:1rem;display:none;border-bottom:1px solid rgba(0,0,0,.1)}
  .nav nav.open{display:flex}
  .hero,.story,.two{grid-template-columns:1fr}
  .hero{padding-top:2rem}.hero-art{max-width:460px;margin:0 auto}
  .seal{left:-8px;width:104px;height:104px}.seal b{font-size:1.2rem}
  .story img{max-width:320px;margin:auto}
  .panel ul{grid-template-columns:1fr}
  .grid{columns:2}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}