/* ============================================================
   Terrazas de Arturo Soria Plaza — styles.css
   Paradigma: «Crepúsculo mediterráneo · el oasis que enciende
   sus luces al anochecer». Día→noche al hacer scroll.
   Firma de motion: festón que enciende en cascada + llama de vela.
   ============================================================ */

:root{
  --indigo:#232A44;      --indigo-deep:#161B2E;
  --amber:#E9A94C;       --glow:#F6CE82;
  --palm:#5B6E45;        --palm-deep:#3C4A34;
  --brass:#B79055;
  --caliza:#F3EBDA;      --arena:#E7D9BE;
  --ink:#232A44;         --cream:#F3EBDA;
  --line:rgba(183,144,85,.30);
  --line-dark:rgba(183,144,85,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1180px;
  --nav-h:64px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--caliza); color:var(--ink);
  font-family:"Epilogue",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:clamp(16px,1.05vw,17.5px); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:"Young Serif",Georgia,serif; font-weight:400; line-height:1.08; letter-spacing:-.01em}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
.wrap{width:min(92%,var(--wrap)); margin-inline:auto}
.eyebrow{font-family:"Epilogue"; font-size:.74rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--brass)}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; gap:.55rem; font-family:"Epilogue"; font-weight:600;
  font-size:.96rem; padding:.85rem 1.5rem; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);}
.btn:active{transform:translateY(1px)}
.btn-amber{background:var(--amber); color:#241a08; box-shadow:0 8px 26px -12px rgba(233,169,76,.9)}
.btn-amber:hover{background:var(--glow); box-shadow:0 12px 34px -12px rgba(246,206,130,.95); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--cream); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brass); background:rgba(183,144,85,.12); transform:translateY(-2px)}
.btn-ghost-dark{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost-dark:hover{border-color:var(--brass); background:rgba(183,144,85,.10)}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Festón (firma) ---------- */
.festoon{display:block; width:100%; height:auto; overflow:visible; pointer-events:none}
.festoon .wire{stroke:rgba(183,144,85,.55); stroke-width:1.4; stroke-linecap:round}
.festoon .stem{stroke:rgba(183,144,85,.6); stroke-width:1.2}
.festoon .glass{fill:var(--glow); filter:drop-shadow(0 0 5px rgba(233,169,76,.85))}
html.is-anim .festoon:not(.lit) .glass{fill:rgba(126,116,96,.55); filter:none; opacity:.55}
html.is-anim .festoon.lit .glass{animation:bulbOn .55s var(--ease) both; animation-delay:var(--d,0ms)}
@keyframes bulbOn{
  0%{fill:rgba(126,116,96,.55); filter:none; opacity:.5}
  60%{fill:var(--glow); filter:drop-shadow(0 0 9px rgba(246,206,130,.95)); opacity:1}
  100%{fill:var(--glow); filter:drop-shadow(0 0 5px rgba(233,169,76,.85)); opacity:1}
}

/* ---------- Llama de vela ---------- */
.flame{transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .flame{animation:flick 2.6s ease-in-out infinite}
}
@keyframes flick{
  0%,100%{transform:scale(1) translateX(0); opacity:.96}
  25%{transform:scale(1.05,.97) translateX(.4px); opacity:1}
  50%{transform:scale(.96,1.04) translateX(-.35px); opacity:.9}
  75%{transform:scale(1.02,1) translateX(.25px); opacity:1}
}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(18px,5vw,52px); transition:background .3s var(--ease), backdrop-filter .3s var(--ease), box-shadow .3s var(--ease);}
.nav.scrolled{background:rgba(22,27,46,.86); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line-dark)}
.brand{font-family:"Young Serif"; font-size:1.18rem; color:var(--cream); letter-spacing:.01em; display:flex; align-items:baseline; gap:.5rem}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--glow);display:inline-block}
.nav-links{display:flex; align-items:center; gap:1.6rem}
.nav-links a{color:var(--cream); font-size:.9rem; font-weight:500; opacity:.86; transition:opacity .2s}
.nav-links a:hover{opacity:1; color:var(--glow)}
.nav .btn{padding:.6rem 1.15rem; font-size:.86rem}
.hamb{display:none; background:none; border:0; cursor:pointer; padding:.4rem}
.hamb span{display:block; width:23px; height:2px; background:var(--cream); margin:5px 0; border-radius:2px; transition:.25s var(--ease)}

/* Menú móvil — patrón A PRUEBA DE FALLOS (default OCULTO) */
.mobile-menu{display:none; position:fixed; inset:var(--nav-h) 0 auto 0; z-index:59;
  flex-direction:column; gap:.2rem; padding:1rem clamp(18px,6vw,52px) 1.5rem;
  background:rgba(22,27,46,.98); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-dark)}
.mobile-menu:not([hidden]){display:flex}
.mobile-menu a{color:var(--cream); padding:.75rem 0; font-size:1.02rem; border-bottom:1px solid rgba(243,235,218,.08)}
.mobile-menu .btn{margin-top:.9rem; justify-content:center}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:calc(var(--nav-h) + 3vh) 0 clamp(48px,9vh,110px); overflow:hidden; isolation:isolate; background:var(--indigo-deep)}
.hero-media{position:absolute; inset:0; z-index:-3}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 42%}
@media (prefers-reduced-motion:no-preference){
  .hero-media img{animation:ken 24s ease-in-out infinite alternate; will-change:transform}
}
@keyframes ken{from{transform:scale(1.03)}to{transform:scale(1.1) translateY(-1.4%)}}
.hero-veil{position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 80% at 70% 8%, rgba(246,206,130,.20), transparent 46%),
    linear-gradient(180deg, rgba(22,27,46,.55) 0%, rgba(22,27,46,.30) 34%, rgba(22,27,46,.72) 74%, rgba(15,19,34,.94) 100%);}
.hero-festoon{position:absolute; top:calc(var(--nav-h) + 6px); left:0; right:0; z-index:-1; padding:0 2vw}
.hero-palms{position:absolute; left:0; right:0; bottom:-2px; z-index:-1; width:100%; height:auto; opacity:.9}
.hero-inner{position:relative; z-index:1; color:var(--cream)}
.hero .eyebrow{color:var(--glow)}
.hero h1{font-size:clamp(2.5rem,6.4vw,5rem); color:var(--cream); margin:.5rem 0 .2rem; max-width:16ch;
  text-shadow:0 2px 30px rgba(15,19,34,.5)}
.hero h1 em{font-style:normal; color:var(--glow)}
.hero-sub{font-size:clamp(1.02rem,1.5vw,1.22rem); max-width:52ch; color:rgba(243,235,218,.92); margin:.2rem 0 1.6rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center}
.chip{display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:600; letter-spacing:.02em;
  padding:.5rem .95rem; border-radius:999px; border:1px solid var(--line); color:var(--cream); background:rgba(22,27,46,.4); margin-bottom:1.1rem}
.chip .pulse{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(233,169,76,.6)}
@media (prefers-reduced-motion:no-preference){ .chip .pulse{animation:pulse 2.4s ease-out infinite} }
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(233,169,76,.55)}70%{box-shadow:0 0 0 9px rgba(233,169,76,0)}100%{box-shadow:0 0 0 0 rgba(233,169,76,0)}}

/* ============================================================
   SECCIONES — títulos
   ============================================================ */
section{position:relative}
.sec{padding:clamp(64px,11vh,130px) 0}
.sec-head{max-width:60ch; margin-bottom:clamp(28px,5vh,52px)}
.sec-title{font-size:clamp(1.9rem,4.2vw,3.1rem); margin:.4rem 0 .3rem}
.sec-lead{font-size:1.08rem; opacity:.86; max-width:52ch}

/* Superficies */
.s-night{background:var(--indigo); color:var(--cream)}
.s-night-deep{background:var(--indigo-deep); color:var(--cream)}
.s-day{background:var(--caliza); color:var(--ink)}
.s-sand{background:var(--arena); color:var(--ink)}
.s-night .eyebrow, .s-night-deep .eyebrow{color:var(--glow)}
.s-night .sec-lead, .s-night-deep .sec-lead{color:rgba(243,235,218,.85)}

/* Divisor de festón sobre bandas noche */
.fest-divider{position:relative; margin-top:-1px}
.fest-divider .festoon{max-width:1000px; margin:0 auto; padding:0 4vw}

/* Cielo crepuscular (fondo de bandas noche) */
.dusk{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(130% 90% at 50% 0%, rgba(233,169,76,.14), transparent 42%),
            linear-gradient(180deg, rgba(60,44,74,.35) 0%, transparent 40%);}
.s-night .wrap, .s-night-deep .wrap{position:relative; z-index:1}

/* ============================================================
   2 · ANSWER-FIRST
   ============================================================ */
.answer{text-align:center}
.answer .wrap{max-width:900px}
.answer p{font-family:"Young Serif"; font-size:clamp(1.5rem,3.4vw,2.55rem); line-height:1.32; color:var(--cream); margin:1.4rem auto 0}
.answer p b{font-weight:400; color:var(--glow)}
.lantern{width:64px; height:auto; margin:0 auto; display:block}

/* ============================================================
   3 · EL OASIS (split editorial)
   ============================================================ */
.oasis-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,68px); align-items:center}
.oasis-figure{position:relative; padding:14px}
.oasis-figure::before{content:""; position:absolute; inset:0; border:1px solid var(--brass); border-radius:4px;
  transform:translate(12px,12px); opacity:.65}
.oasis-figure img{width:100%; border-radius:3px; position:relative; box-shadow:0 30px 60px -30px rgba(35,42,68,.6)}
.oasis-figure figcaption{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-top:.9rem; text-align:center}
.oasis-body h2{font-size:clamp(1.8rem,3.6vw,2.7rem); margin:.4rem 0 .8rem}
.oasis-list{list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.7rem}
.oasis-list li{display:flex; gap:.7rem; align-items:flex-start; font-size:.98rem}
.oasis-list li svg{width:20px;height:20px;flex:none;color:var(--palm);margin-top:2px}

/* ============================================================
   4 · AGENDA (cartel + timeline)
   ============================================================ */
.agenda .wrap{max-width:920px}
.timeline{list-style:none; margin:clamp(20px,4vh,44px) 0 0; padding:0; position:relative}
.timeline::before{content:""; position:absolute; left:11px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg, var(--amber), rgba(183,144,85,.25))}
.tl-item{position:relative; padding:0 0 clamp(28px,5vh,48px) 44px}
.tl-item::before{content:""; position:absolute; left:3px; top:4px; width:19px; height:19px; border-radius:50%;
  background:var(--indigo-deep); border:2px solid var(--amber); box-shadow:0 0 12px rgba(233,169,76,.55)}
.tl-item:last-child{padding-bottom:0}
.tl-cadence{font-family:"Epilogue"; font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--glow)}
.tl-title{font-family:"Young Serif"; font-size:clamp(1.4rem,2.8vw,2rem); color:var(--cream); margin:.15rem 0 .35rem; line-height:1.12}
.tl-desc{color:rgba(243,235,218,.86); font-size:.99rem; max-width:54ch}
.tl-tag{display:inline-block; margin-top:.6rem; font-size:.78rem; letter-spacing:.04em; color:var(--amber);
  border:1px solid var(--line); border-radius:999px; padding:.28rem .8rem}
.agenda-note{margin-top:clamp(24px,4vh,40px); font-size:.86rem; color:rgba(243,235,218,.62); border-left:2px solid var(--brass); padding-left:1rem; max-width:56ch}

/* ============================================================
   5 · A CUALQUIER HORA (arco día→noche)
   ============================================================ */
.arc{background:linear-gradient(90deg,#F3EBDA 0%,#EBD9B4 26%,#E9A94C 52%,#7A5A78 78%,#232A44 100%); color:var(--ink)}
.arc .sec-head{color:var(--indigo-deep)}
.arc-bar{position:relative; margin:clamp(30px,6vh,60px) 0 0; height:2px; background:rgba(35,42,68,.35)}
.arc-stops{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.4rem}
.arc-stop{position:relative}
.arc-stop::before{content:""; position:absolute; top:-1.9rem; left:0; width:12px; height:12px; border-radius:50%;
  background:var(--indigo-deep); border:2px solid var(--caliza)}
.arc-time{font-family:"Young Serif"; font-size:1.5rem; display:block; line-height:1}
.arc-label{font-size:.86rem; font-weight:600; margin-top:.3rem; display:block}
.arc-sub{font-size:.82rem; opacity:.78}
.arc-stop:nth-child(4){color:var(--cream)}
.arc-stop:nth-child(4) .arc-sub{opacity:.9}
.arc-winter{margin-top:clamp(30px,5vh,54px); display:flex; gap:.9rem; align-items:center; max-width:60ch;
  background:rgba(243,235,218,.55); border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.3rem; backdrop-filter:blur(4px)}
.arc-winter svg{width:30px;height:30px;flex:none;color:var(--amber)}
.arc-winter b{font-family:"Young Serif";font-weight:400}

/* ============================================================
   6 · QUINCE TERRAZAS (roster editorial)
   ============================================================ */
.terrazas .wrap{max-width:1000px}
.roster-lead{max-width:50ch; font-size:1.12rem}
.roster-lead b{font-family:"Young Serif"; font-weight:400; color:var(--glow); font-size:1.2em}
.roster{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin:clamp(26px,5vh,50px) 0 0; align-items:baseline}
.roster li{list-style:none; font-family:"Young Serif"; font-size:clamp(1.15rem,2.6vw,1.9rem); color:var(--cream); opacity:.9;
  display:flex; align-items:baseline; gap:1.4rem}
.roster li::after{content:"·"; color:var(--brass); opacity:.7}
.roster li:last-child::after{content:""}
.roster li:hover{color:var(--glow)}
.roster-note{margin-top:clamp(24px,4vh,40px); font-size:.86rem; color:rgba(243,235,218,.6); max-width:56ch}

/* ============================================================
   7 · VISITA
   ============================================================ */
.visit-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(26px,4vw,56px); align-items:stretch}
.visit-facts{display:grid; gap:1.15rem; align-content:start}
.fact{display:flex; gap:.9rem; align-items:flex-start}
.fact svg{width:26px;height:26px;flex:none;color:var(--brass);margin-top:2px}
.fact h3{font-family:"Epilogue"; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin:0 0 .18rem}
.fact p{margin:0; font-size:1rem; color:var(--ink)}
.visit-cta{margin-top:.6rem}
.map-embed{border-radius:10px; overflow:hidden; border:1px solid var(--line); min-height:340px; box-shadow:0 24px 50px -30px rgba(35,42,68,.5)}
.map-embed iframe{width:100%; height:100%; min-height:340px; border:0; display:block; filter:saturate(.9)}

/* ============================================================
   8 · FAQ
   ============================================================ */
.faq .wrap{max-width:820px}
.faq-item{border-bottom:1px solid var(--line-dark)}
.faq-item summary{list-style:none; cursor:pointer; padding:1.15rem 2.4rem 1.15rem 0; position:relative;
  font-family:"Young Serif"; font-size:clamp(1.08rem,2.1vw,1.32rem); color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%);
  font-family:"Epilogue"; font-size:1.5rem; color:var(--brass); transition:transform .25s var(--ease)}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary:hover{color:var(--palm-deep)}
.faq-answer{padding:0 0 1.25rem; color:#4a4a4a; font-size:1rem; max-width:64ch}

/* ============================================================
   FAB
   ============================================================ */
.fab{position:fixed; right:18px; bottom:18px; z-index:55; opacity:0; transform:translateY(14px) scale(.96);
  pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); box-shadow:0 14px 34px -12px rgba(35,42,68,.7)}
.fab.show{opacity:1; transform:none; pointer-events:auto}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--indigo-deep); color:var(--cream); padding:clamp(52px,9vh,96px) 0 2.5rem; position:relative; overflow:hidden}
.footer .festoon{max-width:900px; margin:0 auto clamp(30px,5vh,54px); padding:0 4vw}
.footer-brand{font-family:"Young Serif"; font-size:2rem; margin:0 0 .4rem}
.footer-brand .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);display:inline-block;box-shadow:0 0 9px var(--glow);margin-left:.2rem}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; align-items:start}
.footer p{color:rgba(243,235,218,.72); font-size:.95rem; max-width:44ch}
.footer-meta{font-size:.9rem; display:grid; gap:.45rem}
.footer-meta a:hover{color:var(--glow)}
.footer-note{font-size:.78rem; color:rgba(243,235,218,.5); margin-top:1.4rem; max-width:60ch}
.footer-sign{margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--line-dark); font-size:.9rem; color:rgba(243,235,218,.72)}
.footer-sign a{color:var(--glow); font-weight:600; border-bottom:1px solid rgba(246,206,130,.4)}
.footer-sign a:hover{border-color:var(--glow)}
.footer-legal{margin-top:1rem; font-size:.78rem; color:rgba(243,235,218,.42)}

/* ============================================================
   MODAL WHATSAPP — A PRUEBA DE FALLOS (default OCULTO)
   ============================================================ */
.wa-modal{display:none; position:fixed; inset:0; z-index:90; place-items:center; padding:1.2rem}
.wa-modal:not([hidden]){display:grid}
.wa-overlay{position:absolute; inset:0; background:rgba(15,19,34,.72); backdrop-filter:blur(6px)}
.wa-card{position:relative; z-index:1; width:min(94vw,380px); background:var(--caliza); color:var(--ink);
  border-radius:16px; padding:1.8rem 1.6rem; border:1px solid var(--line); box-shadow:0 40px 80px -30px rgba(15,19,34,.8); text-align:center}
.wa-card h3{font-size:1.4rem; margin:.2rem 0 .4rem}
.wa-card p{font-size:.92rem; color:#4a4a4a; margin:0 0 1.1rem}
.wa-qr{width:172px; height:172px; margin:0 auto 1.1rem; background:#fff; border-radius:10px; display:grid; place-items:center; padding:8px; border:1px solid var(--line)}
.wa-qr img{width:100%; height:100%; image-rendering:pixelated}
.wa-preview{font-size:.82rem; color:var(--palm-deep); margin-bottom:1rem}
.wa-close{position:absolute; top:.7rem; right:.9rem; background:none; border:0; font-size:1.6rem; line-height:1; color:var(--ink); cursor:pointer; opacity:.6}
.wa-close:hover{opacity:1}

/* ============================================================
   REVEAL (gated por .is-anim; sin JS todo visible)
   ============================================================ */
html.is-anim [data-r]{opacity:0; will-change:opacity,transform}
html.is-anim [data-r="fade"]{transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
html.is-anim [data-r="clip"]{transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
html.is-anim [data-r].in{opacity:1; transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .nav-links{display:none}
  .hamb{display:block}
  .oasis-grid, .visit-grid{grid-template-columns:1fr}
  .oasis-figure{order:-1; max-width:520px; margin-inline:auto}
  .arc-stops{grid-template-columns:repeat(2,1fr); gap:1.4rem 1rem}
  .arc-stop:nth-child(4){color:var(--ink)}
  .footer-grid{grid-template-columns:1fr}
  .map-embed{min-height:300px}
}
@media (max-width:520px){
  .hero{align-items:flex-end}
  .hero .btn{width:100%; justify-content:center}
  .hero-cta{width:100%}
  .roster li{font-size:1.2rem; gap:1rem}
}

@media (prefers-reduced-motion:reduce){
  html.is-anim [data-r]{opacity:1 !important; transform:none !important}
  .festoon .glass{fill:var(--glow) !important; filter:drop-shadow(0 0 5px rgba(233,169,76,.85)) !important; opacity:1 !important; animation:none !important}
  *{animation:none !important}
}