/* =====================================================================
   Terapias Marbeth  ·  estilos.css
   Rutas de imagen relativas a esta hoja de estilo: ../img/
   ===================================================================== */

:root{
  --noche:#171021;         /* ciruela nocturna */
  --panel:rgba(255,255,255,.05);
  --borde:rgba(232,160,191,.18);
  --texto:#F3EDF7;
  --gris:#B4A8C4;
  --rosa:#E8A0BF;          /* rosa cuarzo */
  --orquidea:#B786E0;      /* violeta orquídea */
  --champan:#EFC88B;       /* oro champán */
  --grad:linear-gradient(100deg,var(--champan) 0%,var(--rosa) 50%,var(--orquidea) 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;background:var(--noche);color:var(--texto);font-size:16.5px;line-height:1.75;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.12;letter-spacing:.005em}
em{font-style:italic}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--rosa);outline-offset:4px;border-radius:4px}
::selection{background:rgba(232,160,191,.3)}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.5rem;position:relative;z-index:2}
section{padding:6.5rem 0;position:relative}

/* ===== Secciones de día: desierto vivo, naturaleza y salud ===== */
.dia{background:linear-gradient(180deg,#FBF6EC 0%,#F6E9D6 100%);color:#3C2E46;position:relative;z-index:2}
.dia::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(4px 4px at 8% 22%, rgba(214,104,143,.35), transparent),
    radial-gradient(3px 3px at 92% 34%, rgba(127,163,122,.4), transparent),
    radial-gradient(4px 4px at 16% 78%, rgba(239,200,139,.45), transparent),
    radial-gradient(3px 3px at 84% 82%, rgba(214,104,143,.3), transparent),
    radial-gradient(3px 3px at 50% 12%, rgba(127,163,122,.3), transparent)}
.dia .seccion-titulo p{color:#8A7890}
.dia .paso .estrella{background:#fff;border-color:#EAD9C4;color:#C9803F;text-shadow:none}
.dia .paso p{color:#8A7890}
.dia .paso::before{color:#C9683F}
.dia .testimonio{background:#FFFFFF;border-color:#EAD9C4}
.dia .testimonio:hover{border-color:#D6688F}
.dia .testimonio p{color:#5C4B60}
.dia .testimonio footer{color:#8A7890}
.dia .faq details{background:#FFFFFF;border-color:#EAD9C4}
.dia .faq details[open]{border-color:#D6688F}
.dia .faq details p{color:#8A7890}
.dia .panel-info{background:#FFFFFF;border-color:#EAD9C4}
.dia .dato{border-color:#F0E3CE}
.dia .dato span{color:#8A7890}
.dia .dato span a{color:#3C2E46;border-color:#C9803F}
.dia .mapa{filter:none;border-color:#EAD9C4}
.dia .eyebrow{color:#C9683F}
.dia .btn-ghost{background:#fff;color:#3C2E46;border-color:#EAD9C4}
.dia .btn-ghost:hover{border-color:#D6688F;box-shadow:0 12px 28px rgba(214,104,143,.22)}

/* Transición floral entre noche y día (silueta de desierto florido) */
.borde-flores{display:block;width:100%;height:auto;line-height:0;position:relative;z-index:2}

/* ===== Sol radiante ===== */
.sol-radiante{display:flex;justify-content:center;margin-bottom:1.6rem}
.sol-radiante svg{width:110px;height:110px;overflow:visible}
.sol-rayos{transform-origin:center;transform-box:fill-box;animation:gira-sol 36s linear infinite}
@keyframes gira-sol{to{transform:rotate(360deg)}}
.sol-nucleo{transform-origin:center;transform-box:fill-box;animation:latido 5s ease-in-out infinite}

/* ===== Mazo de tarot en movimiento ===== */
.mazo{display:flex;justify-content:center;align-items:flex-end;gap:0;margin:3rem auto 2.5rem;perspective:1200px;min-height:300px}
.tcarta{position:relative;width:172px;height:272px;border-radius:14px;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1.1rem .9rem;
  background:linear-gradient(165deg,#241A38 0%,#1B1329 55%,#2A1E42 100%);
  border:1px solid rgba(239,200,139,.55);box-shadow:0 18px 40px rgba(23,16,33,.45);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;will-change:transform}
.tcarta::before{content:"";position:absolute;inset:7px;border:1px solid rgba(239,200,139,.4);border-radius:9px;pointer-events:none}
.tcarta::after{content:"✧";position:absolute;top:12px;right:14px;color:rgba(239,200,139,.6);font-size:.7rem}
.tcarta .numeral{font-family:'Cormorant Garamond',serif;letter-spacing:.34em;font-size:.8rem;color:var(--champan)}
.tcarta .figura{width:104px;height:104px}
.tcarta .nombre{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:#F3EDF7;letter-spacing:.14em;text-transform:uppercase}
.tcarta .lema{font-size:.72rem;color:var(--gris);letter-spacing:.08em;text-align:center;margin-top:-.6rem}
.tcarta-1{transform:rotate(-9deg) translate(26px,16px);z-index:1;animation:levita 6.5s ease-in-out infinite}
.tcarta-2{transform:rotate(0deg) translateY(-6px);z-index:2;animation:levita 7.5s ease-in-out infinite .8s}
.tcarta-3{transform:rotate(9deg) translate(-26px,16px);z-index:1;animation:levita 7s ease-in-out infinite 1.6s}
@keyframes levita{0%,100%{margin-top:0}50%{margin-top:-14px}}
.tcarta:hover{transform:rotate(0deg) translateY(-26px) scale(1.06);z-index:5;box-shadow:0 30px 60px rgba(23,16,33,.55), 0 0 40px rgba(239,200,139,.25);animation-play-state:paused}
@media(max-width:640px){
  .mazo{flex-direction:column;align-items:center;gap:1.4rem;min-height:auto}
  .tcarta-1,.tcarta-2,.tcarta-3{transform:none}
}

/* ===== Fondo: aurora rosada + estrellas + destellos ===== */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orbe{position:absolute;border-radius:50%;filter:blur(95px);opacity:.5;will-change:transform}
.orbe-1{width:560px;height:560px;background:radial-gradient(circle,rgba(183,134,224,.5),transparent 65%);top:-160px;left:-120px;animation:flotar1 24s ease-in-out infinite}
.orbe-2{width:500px;height:500px;background:radial-gradient(circle,rgba(232,160,191,.42),transparent 65%);top:32%;right:-160px;animation:flotar2 28s ease-in-out infinite}
.orbe-3{width:520px;height:520px;background:radial-gradient(circle,rgba(239,200,139,.28),transparent 65%);bottom:-200px;left:26%;animation:flotar3 32s ease-in-out infinite}
@keyframes flotar1{0%,100%{transform:translate(0,0)}50%{transform:translate(90px,70px)}}
@keyframes flotar2{0%,100%{transform:translate(0,0)}50%{transform:translate(-80px,-60px)}}
@keyframes flotar3{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,-80px)}}
.estrellas{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 28%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 74% 18%, rgba(232,160,191,.8), transparent),
    radial-gradient(1.5px 1.5px at 58% 62%, rgba(239,200,139,.85), transparent),
    radial-gradient(1px 1px at 32% 78%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 88% 52%, rgba(183,134,224,.85), transparent),
    radial-gradient(1.5px 1.5px at 45% 10%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 20% 55%, rgba(232,160,191,.7), transparent);
  animation:titilar 5.5s ease-in-out infinite alternate}
@keyframes titilar{from{opacity:.35}to{opacity:.85}}
/* Polvo de estrellas que asciende */
.destello{position:fixed;bottom:-12px;z-index:1;pointer-events:none;color:var(--champan);font-size:10px;opacity:0;animation:asciende linear infinite}
@keyframes asciende{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  12%{opacity:.85}
  85%{opacity:.4}
  100%{transform:translateY(-105vh) rotate(200deg);opacity:0}
}

/* ===== Reveal on scroll ===== */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}

/* ===== Nav ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(23,16,33,.78);backdrop-filter:blur(16px);border-color:var(--borde)}
.nav-inner{max-width:1120px;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:'Cormorant Garamond',serif;font-size:1.3rem;letter-spacing:.03em}
.brand img{height:32px;width:auto}
.nav-links{display:flex;gap:1.9rem;list-style:none;align-items:center}
.nav-links a{text-decoration:none;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--gris);transition:color .2s}
.nav-links a:hover{color:var(--rosa)}
.nav-cta{background:var(--grad);color:var(--noche)!important;padding:.55rem 1.3rem;border-radius:999px;background-size:180% 180%;animation:gradmove 7s ease infinite;font-weight:600}
.menu-btn{display:none;background:none;border:1px solid var(--borde);color:var(--texto);border-radius:10px;padding:.35rem .7rem;font-size:1.2rem;cursor:pointer}

/* ===== Hero ===== */
.hero{min-height:100svh;display:flex;align-items:center;text-align:center;padding:8rem 0 5rem}
.luna{font-size:1.6rem;color:var(--champan);display:inline-block;margin-bottom:1.4rem;text-shadow:0 0 22px rgba(239,200,139,.8);animation:brilla 4s ease-in-out infinite}
@keyframes brilla{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.badge{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--borde);background:var(--panel);backdrop-filter:blur(8px);border-radius:999px;padding:.45rem 1.2rem;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);margin-bottom:2rem}
.hero h1{font-size:clamp(2.9rem,7.5vw,5.4rem);max-width:920px;margin:0 auto 1.2rem;font-weight:400}
/* Entrada letra por letra */
#letras span{display:inline-block;opacity:0;transform:translateY(.45em) rotate(4deg);animation:letra .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes letra{to{opacity:1;transform:none}}
/* Carrusel de palabras */
.rotador{display:inline-grid;vertical-align:baseline;text-align:center}
.rotador .palabra{grid-area:1/1;white-space:nowrap;opacity:0;transform:translateY(55%);filter:blur(5px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1),filter .65s}
.rotador .palabra.activa{opacity:1;transform:none;filter:none}
.rotador .palabra.salir{opacity:0;transform:translateY(-55%);filter:blur(5px)}
.grad-text{background:var(--grad);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradmove 8s ease infinite;font-style:italic}
@keyframes gradmove{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero p{max-width:560px;margin:0 auto 2.6rem;color:var(--gris);font-size:1.06rem}
.acciones{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;padding:1rem 2.3rem;border-radius:999px;background:var(--grad);background-size:180% 180%;color:var(--noche);animation:gradmove 7s ease infinite;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(232,160,191,.35)}
.btn-ghost{background:var(--panel);color:var(--texto);border:1px solid var(--borde);backdrop-filter:blur(8px);animation:none}
.btn-ghost:hover{border-color:var(--rosa);box-shadow:0 12px 30px rgba(232,160,191,.2)}
/* Divisor de fases lunares SVG de alta calidad */
.lunas{display:flex;justify-content:center;margin-top:3.5rem}
.lunas svg{width:min(620px,92vw);height:auto;overflow:visible}
.lunas .fase-etiqueta{font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.24em;fill:var(--gris);text-transform:uppercase}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.lunas .llena-glow{transform-origin:center;transform-box:fill-box;animation:latido 4.5s ease-in-out infinite}

/* Banda del ritual lunar: fotografía real del ciclo de la luna */
.luna-banda{position:relative;padding:7rem 0;text-align:center;overflow:hidden;z-index:2;
  background:#0F0A18 url('../img/luna.jpg') center/cover no-repeat}
.luna-banda::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,16,33,.82),rgba(23,16,33,.38) 50%,rgba(23,16,33,.85))}
.luna-banda > .wrap{position:relative;z-index:2}
.luna-banda h2{font-size:clamp(2.1rem,4.8vw,3.3rem);font-weight:400;margin-bottom:1rem;color:#FBF6EE;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.luna-banda p{color:#D8CFE4;max-width:640px;margin:0 auto 2.2rem;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.luna-banda .fase-chips{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-bottom:2.4rem}
.luna-banda .fase-chip{border:1px solid rgba(239,200,139,.4);background:rgba(23,16,33,.55);backdrop-filter:blur(6px);border-radius:999px;padding:.5rem 1.2rem;font-size:.82rem;letter-spacing:.06em;color:#F3EDF7}
.luna-banda .fase-chip b{color:var(--champan);font-weight:600}

/* Banda cita: fotografía del desierto florido con parallax */
.banda-florido{position:relative;padding:8rem 1.5rem;text-align:center;color:#fff;overflow:hidden;z-index:2;
  background:#4A3A32 url('../img/desierto-florido-2.jpg') center/cover no-repeat;
  background-attachment:fixed}
.banda-florido::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,16,33,.66),rgba(23,16,33,.45) 50%,rgba(23,16,33,.7))}
.banda-florido blockquote{position:relative;z-index:2;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.4;max-width:780px;margin:0 auto;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.banda-florido cite{display:block;margin-top:1.4rem;font-family:'Jost',sans-serif;font-style:normal;font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;color:var(--champan)}
@media(max-width:920px){.banda-florido{background-attachment:scroll}}

/* Skyline nocturno de Copiapó */
.copiapo{position:relative;z-index:2;padding:0;overflow:hidden;line-height:0}
.copiapo svg{width:100%;height:auto;display:block}
.copiapo .ventana{animation:titila-v ease-in-out infinite alternate}
@keyframes titila-v{from{opacity:.25}to{opacity:1}}
.copiapo-texto{text-align:center;padding:4.5rem 1.5rem 1rem;position:relative;z-index:2}
.copiapo-texto h2{font-size:clamp(1.9rem,4.2vw,2.8rem);font-weight:400;margin-bottom:.7rem}
.copiapo-texto p{color:var(--gris);max-width:560px;margin:0 auto}

/* ===== Marquee ===== */
.marquee{border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);overflow:hidden;padding:1.1rem 0;background:rgba(255,255,255,.02);position:relative;z-index:2}
.marquee-pista{display:flex;gap:3.2rem;width:max-content;animation:desliza 32s linear infinite}
.marquee span{font-family:'Cormorant Garamond',serif;font-size:1.08rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.marquee span i{font-style:normal;color:var(--rosa);margin-right:3.2rem}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== Títulos de sección ===== */
.seccion-titulo{max-width:620px;margin-bottom:3.5rem}
.centrado{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--rosa);font-weight:500;display:block;margin-bottom:1rem}
.eyebrow::before{content:"☽ ";color:var(--champan)}
.seccion-titulo h2{font-size:clamp(2rem,4.4vw,3.1rem);margin-bottom:.8rem;font-weight:400}
.seccion-titulo p{color:var(--gris)}

/* ===== Cartas de tarot ===== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.carta{position:relative;display:flex;flex-direction:column;text-align:center;text-decoration:none;background:var(--panel);border:1px solid var(--borde);border-radius:16px 16px 50% 50% / 16px 16px 8% 8%;padding:2.3rem 1.7rem 2.1rem;backdrop-filter:blur(10px);overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.carta::before{content:"";position:absolute;inset:9px;border:1px solid rgba(239,200,139,.28);border-radius:10px 10px 48% 48% / 10px 10px 7% 7%;pointer-events:none}
.carta::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(232,160,191,.16), transparent 45%)}
.carta:hover{transform:translateY(-8px) rotate(-.6deg);border-color:rgba(232,160,191,.5);box-shadow:0 22px 44px rgba(183,134,224,.22)}
.carta:hover::after{opacity:1}
.carta .arcano{font-family:'Cormorant Garamond',serif;font-size:.85rem;letter-spacing:.34em;color:var(--champan);margin-bottom:.9rem}
.carta .simbolo{font-size:1.7rem;margin-bottom:1rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform .35s}
.carta:hover .simbolo{transform:scale(1.15) rotate(8deg)}
.carta h3{font-size:1.45rem;margin-bottom:.6rem;font-weight:500}
.carta p{font-size:.9rem;color:var(--gris);flex:1}
.carta .ir{margin-top:1.4rem;font-size:.74rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--rosa)}
.carta .ir::after{content:" ✦";color:var(--champan)}

/* ===== Sobre ===== */
.sobre-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:center}
.marco{position:relative;border-radius:180px 180px 18px 18px;overflow:hidden;border:1px solid var(--borde)} /* arco de portal */
.marco::before{content:"";position:absolute;inset:10px;border:1px solid rgba(239,200,139,.35);border-radius:170px 170px 12px 12px;z-index:2;pointer-events:none}
.marco::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(183,134,224,.22),transparent 45%,rgba(232,160,191,.2));mix-blend-mode:screen;pointer-events:none}
.marco img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.marco:hover img{transform:scale(1.05)}
.sobre h2{font-size:clamp(2rem,4.2vw,2.9rem);margin-bottom:1.1rem;font-weight:400}
.sobre p{color:var(--gris);margin-bottom:1rem}
.sobre blockquote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.35rem;line-height:1.5;margin:1.7rem 0;padding-left:1.4rem;border-left:2px solid;border-image:var(--grad) 1;color:var(--texto)}

/* ===== Pasos: constelación ===== */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;counter-reset:paso;position:relative}
.paso{counter-increment:paso;text-align:center;position:relative;padding-top:.4rem}
.paso .estrella{width:58px;height:58px;margin:0 auto 1.2rem;border-radius:50%;border:1px solid var(--borde);background:var(--panel);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--champan);text-shadow:0 0 14px rgba(239,200,139,.8);transition:transform .3s,border-color .3s}
.paso:hover .estrella{transform:scale(1.12);border-color:var(--rosa)}
.paso::before{content:"0" counter(paso);font-family:'Cormorant Garamond',serif;font-size:.85rem;letter-spacing:.3em;color:var(--rosa);display:block;margin-bottom:.5rem}
.paso h3{font-size:1.3rem;margin-bottom:.45rem;font-weight:500}
.paso p{font-size:.92rem;color:var(--gris);max-width:300px;margin:0 auto}
@media(min-width:921px){
  .pasos::after{content:"";position:absolute;top:96px;left:18%;right:18%;height:1px;background:linear-gradient(90deg,transparent,var(--borde) 20%,var(--borde) 80%,transparent);z-index:-1}
}

/* ===== Testimonios ===== */
.testimonios{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.testimonio{background:var(--panel);border:1px solid var(--borde);border-radius:18px;padding:2rem 1.7rem;backdrop-filter:blur(10px);position:relative;transition:transform .25s,border-color .25s}
.testimonio:hover{transform:translateY(-5px);border-color:rgba(239,200,139,.4)}
.testimonio::before{content:"✧";position:absolute;top:1.1rem;right:1.3rem;color:var(--champan);opacity:.6}
.testimonio p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.18rem;line-height:1.5;color:#E4DDF0;margin-bottom:1.1rem}
.testimonio footer{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);font-weight:600}
.testimonio footer::before{content:"— ";color:var(--rosa)}

/* ===== FAQ ===== */
.faq{max-width:740px;margin:0 auto}
.faq details{border:1px solid var(--borde);background:var(--panel);backdrop-filter:blur(10px);border-radius:16px;padding:1.15rem 1.5rem;margin-bottom:.85rem;transition:border-color .25s}
.faq details[open]{border-color:rgba(232,160,191,.5)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:'Cormorant Garamond',serif;font-size:1.2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"✦";color:var(--champan);font-size:.9rem;transition:transform .3s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(180deg) scale(1.25);color:var(--rosa)}
.faq details p{margin-top:.8rem;color:var(--gris);font-size:.94rem}

/* ===== Ubicación ===== */
.ubicacion-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:2.5rem;align-items:stretch}
.panel-info{background:var(--panel);border:1px solid var(--borde);border-radius:20px;padding:2rem;backdrop-filter:blur(10px)}
.dato{display:flex;justify-content:space-between;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--borde);font-size:.93rem;flex-wrap:wrap}
.dato b{font-weight:600}
.dato span{color:var(--gris);text-align:right}
.dato span a{color:var(--texto);text-decoration:none;border-bottom:1px solid var(--rosa)}
.mapa{border-radius:20px;overflow:hidden;border:1px solid var(--borde);filter:grayscale(1) invert(.9) hue-rotate(190deg) contrast(.9);transition:filter .4s}
.mapa:hover{filter:none}
.mapa iframe{width:100%;height:100%;min-height:400px;border:0;display:block}

/* ===== CTA final ===== */
.cta-final{text-align:center;padding:7rem 1.5rem;position:relative;z-index:2}
.cta-caja{max-width:860px;margin:0 auto;background:var(--panel);border:1px solid var(--borde);border-radius:200px 200px 28px 28px;padding:5rem 2rem 4rem;backdrop-filter:blur(14px);position:relative;overflow:hidden}
.cta-caja::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:1.5px;background:var(--grad);background-size:220% 220%;animation:gradmove 7s ease infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.cta-caja .luna{margin-bottom:1rem}
.cta-caja h2{font-size:clamp(2rem,4.8vw,3.3rem);margin-bottom:1rem;font-weight:400}
.cta-caja p{color:var(--gris);max-width:480px;margin:0 auto 2.2rem}

/* ===== Footer ===== */
footer.pie{padding:2.8rem 0;font-size:.82rem;color:var(--gris);border-top:1px solid var(--borde);position:relative;z-index:2}
.pie-inner{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.pie a{text-decoration:none;color:var(--gris);margin-left:1.4rem;transition:color .2s}
.pie a:hover{color:var(--rosa)}
.pie .aviso{width:100%;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--borde);font-size:.75rem}

/* ===== WhatsApp flotante ===== */
.wsp{position:fixed;bottom:24px;right:24px;z-index:60;width:56px;height:56px;border-radius:50%;background:var(--grad);background-size:180% 180%;animation:gradmove 7s ease infinite;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 10px 28px rgba(232,160,191,.4);transition:transform .2s}
.wsp:hover{transform:translateY(-3px) scale(1.05)}
.wsp svg{width:27px;height:27px;fill:var(--noche)}
.wsp::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(239,200,139,.55);animation:onda 2.6s ease-out infinite}
@keyframes onda{from{transform:scale(.85);opacity:1}to{transform:scale(1.35);opacity:0}}
/* Selector flotante de 2 líneas de WhatsApp */
.wsp-fab{position:fixed;bottom:24px;right:24px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
.wsp-fab .wsp{position:relative;bottom:auto;right:auto;border:0;cursor:pointer;padding:0}
.wsp-menu{display:flex;flex-direction:column;gap:.55rem;opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.wsp-fab.abierto .wsp-menu{opacity:1;transform:none;pointer-events:auto}
.wsp-opt{display:flex;align-items:center;gap:.6rem;text-decoration:none;background:#fff;color:#3C2E46;font-weight:600;font-size:.78rem;letter-spacing:.02em;padding:.55rem .95rem;border-radius:18px;border:1px solid #EAD9C4;box-shadow:0 10px 26px rgba(23,16,33,.22);white-space:nowrap;transition:transform .2s,box-shadow .2s,border-color .2s}
.wsp-opt:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(214,104,143,.28);border-color:#D6688F}
.wsp-opt svg{width:22px;height:22px;flex:none;fill:#25D366}
.wsp-opt span{display:flex;flex-direction:column;line-height:1.2}
.wsp-opt span b{font-size:.86rem;color:#3C2E46}
.wsp-opt span{color:#8A7890}

/* ===== Marco portal animado: afiche completo y centrado sobre paspartú ===== */
.marco-portal{position:relative;width:100%;max-width:440px;margin-inline:auto;
  border-radius:120px 120px 22px 22px;isolation:isolate}
.portal-halo,.portal-aura{position:absolute;border-radius:inherit;overflow:hidden;pointer-events:none}
.portal-aura{inset:-3px}
.portal-halo{inset:-18px;filter:blur(20px);opacity:.42;animation:portal-respira 6s ease-in-out infinite alternate}
.portal-aura::before,.portal-halo::before{content:"";position:absolute;top:50%;left:50%;width:230%;height:230%;
  background:conic-gradient(from 0deg,var(--champan),var(--rosa) 20%,var(--orquidea) 40%,#9FCBC6 58%,var(--rosa) 76%,var(--champan));
  transform:translate(-50%,-50%);animation:portal-gira 16s linear infinite}
.portal-halo::before{animation-duration:11s;animation-direction:reverse}
@keyframes portal-gira{to{transform:translate(-50%,-50%) rotate(1turn)}}
@keyframes portal-respira{from{opacity:.26}to{opacity:.62}}
.portal-cuerpo{position:relative;border-radius:inherit;
  padding:clamp(3.4rem,8vw,4.2rem) clamp(1.3rem,3.4vw,1.9rem) clamp(1.3rem,3vw,1.8rem);
  background:linear-gradient(168deg,#FFFDF7 0%,#FBF6EC 46%,#F6EFF4 100%);
  box-shadow:0 30px 70px rgba(23,16,33,.5);
  transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s}
.marco-portal:hover .portal-cuerpo{transform:translateY(-8px);box-shadow:0 40px 80px rgba(23,16,33,.6)}
.marco-portal:hover .portal-aura::before{animation-duration:6s}
.portal-astro{position:absolute;top:clamp(1rem,3vw,1.5rem);left:50%;transform:translateX(-50%);
  font-size:1.4rem;color:#C9803F;text-shadow:0 0 22px rgba(239,200,139,.95);animation:brilla 4s ease-in-out infinite}
.portal-arco{position:absolute;top:clamp(2.5rem,6vw,3rem);left:50%;transform:translateX(-50%);
  width:52%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,128,63,.55),transparent)}
.portal-lienzo{position:relative;display:grid;place-items:center;aspect-ratio:4/5;
  background:#fff;border-radius:12px;padding:clamp(10px,2.4vw,18px);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(74,58,50,.10),0 14px 32px rgba(23,16,33,.24)}
.portal-lienzo::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.55) 46%,transparent 58%);
  transform:translateX(-120%);animation:portal-lustre 7s ease-in-out infinite}
@keyframes portal-lustre{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.portal-lienzo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:3px;
  transition:filter .6s}
.marco-portal:hover .portal-lienzo img{filter:saturate(1.08) brightness(1.03)}
.portal-esq{position:absolute;font-size:.78rem;color:var(--champan);animation:portal-titila 3.6s ease-in-out infinite}
.portal-esq.e3{bottom:.55rem;left:.6rem;animation-delay:1.4s}
.portal-esq.e4{bottom:.55rem;right:.6rem;animation-delay:2.6s}
@keyframes portal-titila{0%,100%{opacity:.2;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}
.portal-chispa{position:absolute;font-style:normal;font-size:.7rem;color:var(--rosa);opacity:0;
  animation:portal-flota 8s ease-in-out infinite;pointer-events:none}
.portal-chispa.c1{top:2.2rem;left:24%}
.portal-chispa.c2{top:1.4rem;right:26%;color:var(--orquidea);animation-delay:2.6s}
.portal-chispa.c3{top:3rem;left:70%;color:var(--champan);animation-delay:5s}
@keyframes portal-flota{0%{opacity:0;transform:translateY(6px) scale(.7)}
  25%{opacity:.95}60%{opacity:.5}100%{opacity:0;transform:translateY(-22px) scale(1.1)}}
.portal-pie{display:block;text-align:center;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:#A8927E;margin-top:.9rem;text-decoration:none;transition:color .3s}
.portal-pie:hover{color:#C9803F}
@media(max-width:920px){.marco-portal{max-width:380px}}

/* ===== Título destacado: tirada de tarot gratis ===== */
.tirada-titulo{position:relative;text-align:center;max-width:780px;margin:-.8rem auto 1rem;padding:2rem 1rem 1rem}
.tirada-titulo::before{content:"";position:absolute;inset:-10% -6%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 58% 62% at 50% 46%,rgba(239,200,139,.42),rgba(232,160,191,.16) 45%,transparent 72%);
  animation:tirada-aura 7s ease-in-out infinite alternate}
@keyframes tirada-aura{from{opacity:.55;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
.tirada-titulo>*{position:relative;z-index:1}
.tirada-simbolo{display:block;font-size:1.5rem;color:#C9803F;margin-bottom:.5rem;
  text-shadow:0 0 26px rgba(239,200,139,.9);animation:brilla 4.5s ease-in-out infinite}
.tirada-h{font-size:clamp(2rem,5.6vw,3.5rem);line-height:1.12;font-weight:500;color:#3C2E46;margin-top:.2rem}
.tirada-h .grad-text{background:linear-gradient(100deg,#C9683F,#D6688F 48%,#8156C4);background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:gradmove 8s ease infinite}
.tirada-h .gratis{position:relative;display:inline-block;font-style:italic;padding:.02em .42em .1em;
  color:#FFF8EC;border-radius:.34em;background:linear-gradient(100deg,#D6688F,#B786E0 52%,#C9803F);
  background-size:220% 220%;animation:gradmove 6s ease infinite,gratis-late 2.8s ease-in-out infinite alternate;
  box-shadow:0 10px 26px rgba(183,134,224,.42)}
@keyframes gratis-late{from{box-shadow:0 8px 20px rgba(183,134,224,.3)}
  to{box-shadow:0 14px 34px rgba(214,104,143,.55)}}
.tirada-sub{color:#8A7890;font-size:1rem;max-width:540px;margin:1.1rem auto 0;line-height:1.7}
.tirada-sello{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;padding:.5rem 1.1rem;
  border:1px solid rgba(201,128,63,.35);border-radius:999px;background:rgba(255,255,255,.62);
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:#C9683F;font-weight:500}
.tirada-sello i{font-style:normal;animation:portal-titila 2.8s ease-in-out infinite}
.tirada-linea{position:relative;display:block;width:min(340px,72%);height:1px;margin:1.5rem auto .4rem;
  background:linear-gradient(90deg,transparent,rgba(201,128,63,.6),transparent)}
.tirada-linea::after{content:"✦";position:absolute;top:50%;color:#C9803F;font-size:.72rem;
  transform:translate(-50%,-50%);animation:tirada-recorre 7s ease-in-out infinite}
@keyframes tirada-recorre{0%,100%{left:6%}50%{left:94%}}

/* ===== Naturaleza viva: colibrí interactivo y flores del oasis ===== */
.naturaleza{margin-top:4.5rem;line-height:0;text-align:center}
.naturaleza svg{width:min(880px,96vw);height:auto;overflow:visible;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pista-colibri{font-family:'Jost',sans-serif;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:#B3A2B9;margin-top:.7rem;line-height:1.8}
/* alas del colibrí */
#colibri{will-change:transform}
.ala{transform-box:fill-box;transform-origin:right center;animation:aleteo .09s linear infinite alternate;will-change:transform}
.ala-tras{animation-delay:.045s;opacity:.5}
@keyframes aleteo{from{transform:rotate(-36deg) scaleY(1)}to{transform:rotate(28deg) scaleY(.66)}}
.ala-estela{opacity:.1;animation:estela .32s ease-in-out infinite alternate}
@keyframes estela{from{opacity:.06}to{opacity:.2}}
/* flores: mecerse, abrirse y brillar al ser visitadas */
.flor{cursor:pointer;transform-box:fill-box;transform-origin:bottom center;animation:mece-flor 5.4s ease-in-out infinite alternate}
@keyframes mece-flor{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
.corola{transform-box:fill-box;transform-origin:center;transition:transform .85s cubic-bezier(.34,1.5,.5,1)}
.petalo{transform-box:fill-box;transform-origin:bottom center;transition:transform .85s cubic-bezier(.34,1.5,.5,1)}
.estambres{transform-box:fill-box;transform-origin:bottom center;transition:transform .85s ease}
.halo{opacity:0;transition:opacity .8s ease}
.hoja{transform-box:fill-box;transform-origin:center;transition:transform .8s ease}
.flor:hover .corola{transform:scale(1.07)}
.flor.libando .corola{transform:scale(1.16)}
.flor.libando .petalo{transform:translateY(-2.5px) scale(1.05)}
.flor.libando .estambres{transform:scale(1.14)}
.flor.libando .halo{opacity:.8}
/* polen, motas y ondas */
.chispa{animation:chispa-vuela var(--d,1.5s) ease-out forwards;pointer-events:none}
@keyframes chispa-vuela{0%{transform:translate(0,0) scale(.3);opacity:0}18%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}
.mota{animation:mota-flota 13s linear infinite;opacity:0}
@keyframes mota-flota{0%{transform:translate(0,0);opacity:0}18%{opacity:.7}80%{opacity:.3}100%{transform:translate(22px,-140px);opacity:0}}
.onda-viva{transform-box:fill-box;transform-origin:center;animation:onda-expande 2.4s ease-out forwards;pointer-events:none}
@keyframes onda-expande{0%{transform:scale(.3);opacity:.85}100%{transform:scale(3.4);opacity:0}}
.hoja-sway{transform-box:fill-box;transform-origin:bottom center;animation:balanceo 4.5s ease-in-out infinite alternate}
@keyframes balanceo{from{transform:rotate(-3.5deg)}to{transform:rotate(3.5deg)}}
.onda-agua{transform-box:fill-box;transform-origin:center;animation:onda-crece 4s ease-out infinite;opacity:0}
@keyframes onda-crece{0%{transform:scale(.3);opacity:.8}70%{opacity:.25}100%{transform:scale(1.6);opacity:0}}

/* ===== El faro de Marbeth: haz de luz giratorio ===== */
.faro-banda{text-align:center;padding:5.5rem 0 4rem;position:relative;z-index:2}
.faro-banda .wrap{max-width:900px}
.faro-escena{margin:2.5rem auto 0;line-height:0}
.faro-escena svg{width:min(680px,94vw);height:auto;overflow:visible}
.haz{transform-box:fill-box;transform-origin:center;animation:gira-haz 10s linear infinite}
@keyframes gira-haz{to{transform:rotate(360deg)}}
.faro-halo{transform-box:fill-box;transform-origin:center;animation:latido 4s ease-in-out infinite}
.faro-destello{animation:titilar 3.2s ease-in-out infinite alternate}

/* ===== Carrusel de fotos temático ===== */
.galeria{overflow:hidden;position:relative;padding:1rem 0 2rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.galeria-pista{display:flex;gap:1.6rem;width:max-content;animation:desliza 80s linear infinite}
.galeria:hover .galeria-pista{animation-play-state:paused}
.foto-carta{position:relative;width:300px;height:360px;border-radius:150px 150px 16px 16px;overflow:hidden;flex-shrink:0;
  border:1px solid #EAD9C4;box-shadow:0 16px 36px rgba(74,58,50,.16);transition:transform .35s}
.foto-carta::before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.65);border-radius:142px 142px 10px 10px;z-index:2;pointer-events:none}
.foto-carta:hover{transform:translateY(-8px)}
.foto-carta img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.foto-carta:hover img{transform:scale(1.06)}
.foto-carta figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1.1rem .9rem;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(23,16,33,.78));color:#FBF6EC;
  font-family:'Cormorant Garamond',serif;font-size:1.02rem;letter-spacing:.08em;text-align:center}
@media(max-width:640px){.foto-carta{width:240px;height:300px}}

/* ===== Responsive ===== */
@media(max-width:920px){
  section{padding:4.5rem 0}
  .menu-btn{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(23,16,33,.97);backdrop-filter:blur(16px);flex-direction:column;padding:1.4rem;gap:1.1rem;border-bottom:1px solid var(--borde)}
  .nav-links.abierto{display:flex}
  .grid,.pasos,.testimonios{grid-template-columns:1fr}
  .sobre-grid,.ubicacion-grid{grid-template-columns:1fr;gap:2rem}
  .hero{min-height:auto;padding:8.5rem 0 4.5rem}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .destello{display:none}
}