/* Mobiliario Cronos — elegancia que perdura
   Grafito + oro bruñido mate + celeste · Pinyon Script / Marcellus / Karla
   Índice editorial numerado + swash dorado que se dibuja. Reveal robusto. */

:root{
  --ink:#24272C; --ink2:#191C20; --ink3:#0F1216;
  --gold:#B0803A; --gold2:#C9A85E; --gold3:#E3C57E;
  --celeste:#5F9A97; --celeste-deep:#356461; --celeste-soft:#C7DDDB;
  --rose:#B98A8F;
  --paper:#F4EFE6; --paper2:#EDE6D8; --card:#FBF8F2; --card-line:#E4DACA;
  --tx:#2A2721; --tx2:#6C6458; --tx-inv:#F3ECDD; --tx-inv2:#B9B09E;
  --serif:'Marcellus',Georgia,serif;
  --script:'Pinyon Script',cursive;
  --sans:'Karla',system-ui,sans-serif;
  --wrap:1180px; --r:16px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--tx);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; line-height:1.12; letter-spacing:.01em; margin:0}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}
.wrap.narrow{max-width:820px}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:200; border-radius:0 0 8px 0}
.skip:focus{left:0}

/* Brand wordmark (recrea el aviso: script dorado) */
.brand{display:flex; flex-direction:column; line-height:.9}
.brand-mark{font-family:var(--script); font-size:34px; color:var(--gold); letter-spacing:.01em}
.brand-sub{font-family:var(--sans); font-size:10px; letter-spacing:.42em; text-transform:uppercase; color:var(--tx2); margin-top:-3px; padding-left:4px}
.nav.scrolled .brand-mark, .foot .brand-mark{color:var(--gold2)}

/* ---------- NAV ---------- */
.nav{position:sticky; top:0; z-index:100; background:rgba(244,239,230,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s, background .3s}
.nav.scrolled{border-bottom-color:var(--card-line); box-shadow:0 6px 22px -18px rgba(0,0,0,.4)}
.nav-in{display:flex; align-items:center; gap:24px; height:74px}
.nav-links{display:flex; gap:30px; margin-left:auto; font-size:15px}
.nav-links a{color:var(--tx); position:relative; padding:4px 0; letter-spacing:.01em}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--gold); transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}

/* Botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans);
  font-weight:600; font-size:15px; letter-spacing:.01em; padding:12px 22px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .2s var(--ease), box-shadow .3s, background .3s, color .3s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-wa{background:linear-gradient(120deg,var(--gold),var(--gold2)); color:#241a08; box-shadow:0 10px 24px -12px rgba(176,128,58,.8)}
.btn-wa:hover{box-shadow:0 14px 30px -10px rgba(176,128,58,.95); transform:translateY(-2px)}
.btn-ghost{border-color:var(--ink); color:var(--ink); background:transparent}
.btn-ghost:hover{background:var(--ink); color:var(--paper)}
.btn.mini{padding:9px 16px; font-size:13.5px}
.nav .btn-wa{margin-left:6px}
.nav-links + .btn-wa{margin-left:0}

.hamb{display:none; margin-left:auto; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px}
.hamb span{width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.3s}
.mobile-menu{display:none; flex-direction:column; gap:4px; padding:12px 24px 20px; background:var(--paper); border-bottom:1px solid var(--card-line)}
.mobile-menu a{padding:12px 4px; font-size:17px; border-bottom:1px solid var(--card-line); color:var(--tx)}
.mobile-menu a:last-child{border:0; margin-top:8px}

/* ---------- HERO ---------- */
.hero{position:relative; background:linear-gradient(160deg,var(--ink) 0%, var(--ink2) 60%, var(--ink3) 100%);
  color:var(--tx-inv); overflow:hidden; padding:70px 0 84px}
.hero-grain{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(1200px 500px at 78% -8%, rgba(201,168,94,.14), transparent 60%),
             radial-gradient(700px 400px at -6% 108%, rgba(95,154,151,.12), transparent 65%)}
.hero-grid{position:relative; display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:12.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold3); margin:0 0 20px}
.ey-tick{width:26px; height:1px; background:linear-gradient(90deg,var(--gold),transparent)}
.hero-title{font-size:clamp(2.5rem,5.4vw,4rem); color:#fff; position:relative; margin-bottom:8px}
.hero-title em{font-style:italic; color:var(--gold3)}
.swash{display:block; width:min(340px,86%); height:auto; margin-top:6px}
.swash path{stroke-dasharray:640; stroke-dashoffset:640}
.is-anim .hero-title.in .swash path{animation:draw 1.6s .5s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-lead{font-size:19px; color:var(--tx-inv); max-width:33ch; margin:22px 0 28px; line-height:1.6}
.hero-lead strong{color:#fff; font-weight:700}
.hero-lead b{color:var(--gold3); font-weight:600}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px}
.hero .btn-ghost{border-color:rgba(227,197,126,.55); color:var(--gold3)}
.hero .btn-ghost:hover{background:var(--gold3); color:var(--ink2); border-color:var(--gold3)}
.hero-stats{list-style:none; display:flex; gap:34px; margin:38px 0 0; padding:30px 0 0; border-top:1px solid rgba(227,197,126,.22)}
.hero-stats li{display:flex; flex-direction:column}
.hero-stats b{font-family:var(--serif); font-size:34px; color:#fff; display:inline-flex; align-items:baseline}
.hero-stats .star{color:var(--gold3); font-size:20px; margin-left:3px}
.hero-stats span:last-child{font-size:13px; color:var(--tx-inv2); letter-spacing:.02em}

.hero-show{position:relative; margin:0}
.hero-frame{position:relative; border-radius:var(--r); overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.7);
  border:1px solid rgba(227,197,126,.25)}
.hero-frame img{width:100%; height:clamp(360px,52vh,520px); object-fit:cover; object-position:center 62%}
.frame-tick{position:absolute; width:34px; height:34px; border:2px solid var(--gold3); opacity:.9}
.frame-tick.tl{top:14px; left:14px; border-right:0; border-bottom:0}
.frame-tick.br{bottom:14px; right:14px; border-left:0; border-top:0}
.hero-seal{position:absolute; left:-18px; bottom:26px; background:var(--card); color:var(--ink);
  border-radius:12px; padding:12px 16px; box-shadow:0 20px 40px -20px rgba(0,0,0,.6); display:flex; flex-direction:column; align-items:center; line-height:1.05}
.seal-num{font-family:var(--serif); font-size:26px; color:var(--gold)}
.seal-star{color:var(--gold2); font-size:12px; letter-spacing:2px}
.seal-txt{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx2); margin-top:2px}

/* ---------- SECCIONES ---------- */
.sec{padding:88px 0}
.sec-head{max-width:640px; margin:0 0 46px}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.kicker{font-size:12.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 14px; font-weight:600}
.kicker.light{color:var(--gold3)}
.sec-title{font-size:clamp(1.8rem,3.6vw,2.7rem); color:var(--ink)}
.sec-title.light{color:#fff}
.sec-sub{font-size:18px; color:var(--tx2); margin:16px 0 0}
.sec-sub.light{color:var(--tx-inv2)}

/* Band answer-first */
.band-answer{background:var(--card); border-top:1px solid var(--card-line); border-bottom:1px solid var(--card-line); padding:52px 0}
.answer-first{font-family:var(--serif); font-size:clamp(1.3rem,2.5vw,1.9rem); line-height:1.5; color:var(--ink); max-width:24ch; margin:0 auto; text-align:center; max-width:900px}
.answer-first b{color:var(--celeste-deep)}

/* ---------- ÍNDICE NUMERADO ---------- */
.index{list-style:none; margin:0; padding:0; border-top:1px solid var(--card-line)}
.ix{display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; padding:26px 8px;
  border-bottom:1px solid var(--card-line); position:relative; transition:background .35s var(--ease), padding .35s var(--ease)}
.ix::before{content:""; position:absolute; left:0; top:0; height:100%; width:0; background:linear-gradient(90deg,rgba(201,168,94,.1),transparent); transition:width .4s var(--ease); z-index:0}
.ix:hover{background:transparent; padding-left:20px}
.ix:hover::before{width:100%}
.ix>*{position:relative; z-index:1}
.ix-n{font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.2rem); color:var(--gold2); min-width:56px}
.ix:hover .ix-n{color:var(--gold)}
.ix-body h3{font-size:clamp(1.35rem,2.6vw,1.85rem); color:var(--ink); transition:color .3s}
.ix-body p{margin:6px 0 0; color:var(--tx2); max-width:60ch; font-size:16px}
.ix-tag{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--celeste-deep);
  border:1px solid var(--celeste-soft); background:rgba(199,221,219,.4); padding:6px 13px; border-radius:999px; white-space:nowrap}

/* ---------- BAND DARK ---------- */
.band-dark{background:linear-gradient(165deg,var(--ink) 0%,var(--ink2) 100%); color:var(--tx-inv); padding:82px 0; position:relative; overflow:hidden}
.band-dark::before{content:""; position:absolute; inset:0; opacity:.6; pointer-events:none;
  background:radial-gradient(700px 300px at 84% 0%, rgba(201,168,94,.12), transparent 60%)}
.val-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; position:relative}
.val{background:rgba(255,255,255,.03); border:1px solid rgba(227,197,126,.18); border-radius:var(--r); padding:30px 26px; transition:transform .3s var(--ease), border-color .3s}
.val:hover{transform:translateY(-5px); border-color:rgba(227,197,126,.42)}
.val-ic{display:inline-flex; width:52px; height:52px; align-items:center; justify-content:center; border-radius:12px;
  background:rgba(201,168,94,.14); color:var(--gold3); margin-bottom:16px}
.val-ic svg{width:26px; height:26px}
.val h3{font-size:1.3rem; color:#fff; margin-bottom:8px}
.val p{color:var(--tx-inv2); font-size:15.5px; margin:0}

/* ---------- GALERÍA ---------- */
.gal{display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:auto; gap:16px}
.gal figure{position:relative; margin:0; border-radius:var(--r); overflow:hidden; box-shadow:0 24px 50px -32px rgba(0,0,0,.5)}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.gal figure:hover img{transform:scale(1.05)}
.gal-a{grid-row:span 2}
.gal-a img{min-height:430px}
.gal-b img,.gal-c img{min-height:207px; height:100%}
.gal figcaption{position:absolute; left:0; bottom:0; right:0; padding:26px 18px 14px; color:#fff; font-family:var(--serif); font-size:1.15rem;
  background:linear-gradient(to top,rgba(15,18,22,.82),transparent)}

/* ---------- RESEÑAS ---------- */
.sec-rev{background:var(--card); border-top:1px solid var(--card-line)}
.rev-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start}
.rev-big{margin:10px 0 24px}
.rev-big b{font-family:var(--serif); font-size:4.6rem; color:var(--ink); line-height:1; display:block}
.rev-stars{color:var(--gold); font-size:20px; letter-spacing:3px; display:block; margin:4px 0}
.rev-count{color:var(--tx2); font-size:15px}
.rev-bars{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-width:280px}
.rev-bars li{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--tx2)}
.rev-bars .bar{flex:1; height:7px; background:var(--paper2); border-radius:4px; overflow:hidden}
.rev-bars .bar i{display:block; height:100%; width:var(--w); background:linear-gradient(90deg,var(--gold),var(--gold2)); border-radius:4px}
.rev-list{display:grid; gap:18px}
.rev{margin:0; background:var(--paper); border:1px solid var(--card-line); border-left:3px solid var(--gold2); border-radius:12px; padding:22px 24px}
.rev p{margin:0 0 10px; color:var(--tx); font-size:16px; line-height:1.6}
.rev cite{font-style:normal; font-family:var(--serif); color:var(--celeste-deep); font-size:15px}

/* ---------- VISITA ---------- */
.visita-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:44px; align-items:start}
.visita-addr{font-size:19px; line-height:1.5; margin:18px 0 22px}
.visita-addr b{font-family:var(--serif); font-weight:400; font-size:1.35rem; color:var(--ink)}
.hours{list-style:none; margin:0 0 20px; padding:0; max-width:360px; border-top:1px solid var(--card-line)}
.hours li{display:flex; justify-content:space-between; padding:9px 4px; border-bottom:1px solid var(--card-line); font-size:15px; color:var(--tx2)}
.hours li.today{color:var(--ink); font-weight:700}
.hours li.today span:last-child{color:var(--gold)}
.hours li.today::before{content:"Hoy"; position:absolute; margin-left:-46px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); background:rgba(201,168,94,.14); padding:2px 6px; border-radius:5px}
.pay{font-size:14.5px; color:var(--tx2); margin:0 0 22px}
.pay-lb{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--celeste-deep); border:1px solid var(--celeste-soft); padding:3px 9px; border-radius:6px; margin-right:8px}
.visita-cta{display:flex; flex-wrap:wrap; gap:12px}
.visita-map{border-radius:var(--r); overflow:hidden; box-shadow:0 26px 54px -34px rgba(0,0,0,.5); border:1px solid var(--card-line)}
.visita-map iframe{width:100%; height:400px; border:0; display:block; filter:grayscale(.2) contrast(1.02)}
.map-link{display:block; text-align:center; padding:13px; background:var(--ink); color:var(--gold3); font-size:14.5px; font-weight:600}
.map-link:hover{background:var(--ink2)}

/* ---------- FAQ ---------- */
.sec-faq{background:var(--card); border-top:1px solid var(--card-line)}
.faq details{border-bottom:1px solid var(--card-line); padding:6px 0}
.faq summary{cursor:pointer; list-style:none; padding:16px 44px 16px 4px; font-family:var(--serif); font-size:1.16rem; color:var(--ink); position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-family:var(--sans); font-size:26px; color:var(--gold); transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{margin:0 4px 16px; color:var(--tx2); font-size:16px; max-width:70ch}

/* ---------- FOOTER ---------- */
.foot{background:var(--ink2); color:var(--tx-inv2); padding:60px 0 30px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; padding-bottom:36px; border-bottom:1px solid rgba(227,197,126,.16)}
.foot-brand .brand-mark{font-size:40px}
.foot-brand .brand-sub{color:var(--tx-inv2)}
.foot-brand p{margin:14px 0 0; font-size:15px; max-width:34ch}
.foot-col h4{font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold3); margin:0 0 14px; font-weight:700}
.foot-col a,.foot-col p{display:block; color:var(--tx-inv2); font-size:15px; margin:0 0 9px; transition:color .25s}
.foot-col a:hover{color:var(--gold3)}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:22px; font-size:13.5px; color:var(--tx-inv2)}
.panoramic a{color:var(--gold3)}
.panoramic a:hover{text-decoration:underline}

/* ---------- FAB ---------- */
.fab{position:fixed; right:20px; bottom:20px; width:56px; height:56px; border-radius:50%; border:0; cursor:pointer; z-index:80;
  background:linear-gradient(135deg,#25b34f,#128c3e); color:#fff; box-shadow:0 14px 30px -10px rgba(18,140,62,.8); opacity:0; display:grid; place-items:center}
.fab:hover{transform:scale(1.06)}

/* ---------- MODAL WHATSAPP ---------- */
.wa-modal{position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:20px}
.wa-modal[hidden]{display:none}
.wa-overlay{position:absolute; inset:0; background:rgba(15,18,22,.62); backdrop-filter:blur(4px)}
.wa-card{position:relative; width:100%; max-width:440px; max-height:90vh; overflow:auto; background:var(--paper);
  border-radius:20px; padding:30px 28px; box-shadow:0 40px 90px -30px rgba(0,0,0,.6); border:1px solid var(--card-line)}
.wa-x{position:absolute; right:16px; top:12px; background:none; border:0; font-size:28px; line-height:1; color:var(--tx2); cursor:pointer}
.wa-title{font-size:1.5rem; color:var(--ink); margin:0 0 6px}
.wa-sub{color:var(--tx2); font-size:15px; margin:0 0 20px}
.wa-opts{display:grid; gap:12px}
.wa-opt{text-align:left; background:var(--card); border:1px solid var(--card-line); border-radius:13px; padding:15px 18px; cursor:pointer; transition:border-color .25s, transform .2s, background .25s}
.wa-opt:hover{border-color:var(--gold); transform:translateY(-2px); background:#fff}
.wa-opt b{display:block; font-family:var(--serif); font-size:1.12rem; color:var(--ink); font-weight:400}
.wa-opt span{display:block; font-size:13.5px; color:var(--tx2); margin-top:2px}
.wa-back{background:none; border:0; color:var(--celeste-deep); font-size:14px; cursor:pointer; padding:0; margin:0 0 14px; font-family:var(--sans)}
.wa-form{display:grid; gap:13px}
.wa-form label{display:grid; gap:5px; font-size:13px; color:var(--tx2); font-weight:600}
.wa-form input{font-family:var(--sans); font-size:15px; padding:11px 13px; border:1px solid var(--card-line); border-radius:10px; background:#fff; color:var(--tx)}
.wa-form input:focus{outline:2px solid var(--gold2); border-color:var(--gold)}
.wa-row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.wa-form .btn{margin-top:6px; width:100%}
.wa-qr{display:grid; place-items:center; padding:14px; background:#fff; border-radius:14px; border:1px solid var(--card-line); margin-bottom:12px}
.wa-qr img{width:200px; height:200px; image-rendering:pixelated}
.wa-preview{font-size:12.5px; color:var(--tx2); text-align:center; margin:0 0 14px}
.wa-qr p{font-size:14px; color:var(--tx2); text-align:center; margin:0}

/* ---------- REVEAL ---------- */
.is-anim [data-r]{opacity:0; will-change:transform,opacity}
.is-anim [data-r].in{opacity:1}
.is-anim [data-r="fade"]{transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.is-anim [data-r="rise"]{transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.is-anim [data-r].in{transform:none}
.is-anim [data-r="clip"]{clip-path:inset(0 100% 0 0); transition:clip-path .9s var(--ease), opacity .5s}
.is-anim [data-r="clip"].in{clip-path:inset(0 0 0 0)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .hero-show{order:-1; max-width:480px}
  .hero-frame img{height:340px}
  .val-grid{grid-template-columns:1fr}
  .rev-grid{grid-template-columns:1fr; gap:28px}
  .visita-grid{grid-template-columns:1fr; gap:28px}
  .gal{grid-template-columns:1fr 1fr}
  .gal-a{grid-row:auto; grid-column:span 2}
  .gal-a img{min-height:300px}
}
@media (max-width:760px){
  .nav-links,.nav .btn-wa{display:none}
  .hamb{display:flex}
  .nav.open .mobile-menu{display:flex}
  .mobile-menu:not([hidden]){display:flex}
  .sec{padding:64px 0}
  .hero{padding:48px 0 64px}
  .hero-stats{gap:22px; flex-wrap:wrap}
  .ix{grid-template-columns:auto 1fr; gap:16px}
  .ix-tag{grid-column:2; justify-self:start; margin-top:2px}
  .ix:hover{padding-left:8px}
  .gal{grid-template-columns:1fr}
  .gal-a{grid-column:auto}
  .foot-grid{grid-template-columns:1fr; gap:26px}
  .rev-big b{font-size:3.6rem}
}
@media (prefers-reduced-motion:reduce){
  .is-anim [data-r]{opacity:1 !important; transform:none !important; clip-path:none !important}
  .swash path{stroke-dashoffset:0 !important; animation:none !important}
  .gal figure:hover img{transform:none}
}