/* ============================================================
   AURAL · refinamientos finales (capa superior, se carga última)
   1) El navbar se integra en el hero al iniciar (sin barra)
   2) Botones con color más morado
   3) El fluido se ve en móvil y es más morado (no blanco)
   4) Logo del navbar sin disco y más grande
   5) El logo AURAL aparece en el hero
   ============================================================ */

/* ---------- 1) NAVBAR INTEGRADO EN EL HERO (estado superior) ----------
   Mientras no hay scroll, la barra desaparece y solo flotan el logo,
   los enlaces y el botón sobre el hero. Al hacer scroll vuelve la
   píldora con degradado (que ya definían las capas anteriores). */
.nav-wrap:not(.scrolled) .nav,
.menu-open .nav-wrap:not(.scrolled) .nav{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.nav-wrap:not(.scrolled) .brand,
.nav-wrap:not(.scrolled) .brand span{
  color:var(--aural-plum)!important;
  text-shadow:0 1px 12px rgba(255,250,240,.6);
}
.nav-wrap:not(.scrolled) .nav-links a{
  color:var(--aural-plum)!important;
  text-shadow:0 1px 8px rgba(255,250,240,.55);
}
.nav-wrap:not(.scrolled) .nav-links a:hover{color:#8f208d!important}
.nav-wrap:not(.scrolled) .nav>.button{
  background:linear-gradient(120deg,#57169e 0%,#7a1fac 50%,#9a2685 100%)!important;
  color:#fff!important;border:0!important;
  box-shadow:0 12px 30px rgba(103,29,150,.32)!important;
}

/* ---------- NAVBAR CON SCROLL: marfil + morado + magenta (colores vibrantes),
   sin bordes/líneas, todo centrado verticalmente ---------- */
.nav,.scrolled .nav{
  border:0!important;height:76px!important;align-items:center!important;
}
.scrolled .nav{
  background:linear-gradient(100deg,#fff8eb 0%,#fff8eb 24%,#4b1b60 46%,#86277f 72%,#b02a86 100%)!important;
  box-shadow:0 14px 40px rgba(45,16,60,.2)!important;
}
.scrolled .brand,.scrolled .brand span{color:var(--aural-plum)!important;text-shadow:none!important}
.scrolled .nav-links a{color:#fbeede!important;text-shadow:none!important}
.scrolled .nav-links a:hover{color:#fff!important}
/* Centrado impecable de logo, texto, enlaces y botón */
.brand{align-items:center!important}
.brand span{line-height:1!important}
.nav-links{align-items:center!important}
.nav>.button,.scrolled .nav>.button{align-self:center!important}

/* ---------- 2) BOTONES MÁS MORADOS ---------- */
.button{
  background:linear-gradient(120deg,#57169e 0%,#7a1fac 50%,#9a2685 100%)!important;
  box-shadow:0 16px 38px rgba(103,29,150,.28),inset 0 1px rgba(255,255,255,.42)!important;
}
.button:hover{
  background:linear-gradient(120deg,#4d1290 0%,#6d1b9e 50%,#88237a 100%)!important;
  box-shadow:0 20px 46px rgba(103,29,150,.34),inset 0 1px rgba(255,255,255,.44)!important;
}
.mobile-menu-cta,.menu-open .nav-links .mobile-menu-cta{
  background:linear-gradient(120deg,#3a154f,#6d1b9e 55%,#9a2685)!important;
}
/* Banner de cookies: contraste correcto (antes el texto no se veía) */
.button.button-dark{
  background:linear-gradient(120deg,#57169e,#7a1fac 50%,#9a2685)!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;border:0!important;
}
.button.button-outline{
  background:#fff!important;color:#57169e!important;-webkit-text-fill-color:#57169e!important;
  border:1.5px solid rgba(122,31,172,.42)!important;
  box-shadow:0 8px 22px rgba(103,29,150,.12)!important;
}
.button.button-outline:hover{
  background:#faf4ff!important;color:#4d1290!important;-webkit-text-fill-color:#4d1290!important;
}
/* La píldora blanca sobre la barra con scroll se mantiene (mejor contraste) */
.scrolled .nav>.button{
  background:var(--aural-ivory)!important;color:var(--aural-plum)!important;
  box-shadow:0 8px 20px rgba(22,5,28,.2)!important;
}

/* ---------- 4) LOGO DEL NAVBAR: limpio, sin disco, sin reflejos blancos ---------- */
.brand img,.scrolled .brand img{
  width:66px!important;height:66px!important;
  padding:0!important;border-radius:0!important;background:transparent!important;
  filter:contrast(1.06) drop-shadow(0 5px 11px rgba(60,25,48,.2))!important;
  mix-blend-mode:normal!important;
}

/* ---------- 5) LOGO AURAL EN EL HERO ---------- */
.hero-brand-logo{
  display:block;width:clamp(160px,17vw,250px);height:auto;margin:0 0 20px;
  filter:drop-shadow(0 20px 38px rgba(88,33,120,.3));
}

/* ---------- FOOTER OSCURO DEGRADADO A MORADO (con logo gradiente) ---------- */
footer{
  background:linear-gradient(135deg,#160c1f 0%,#2b123d 44%,#7c247f 100%)!important;
  color:#e7d8ea!important;border-top:0!important;
}
footer .footer-brand,footer .footer-brand span{color:#fff!important}
footer .footer-brand img{
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.4))!important;
}
footer .footer-brand small{color:#cbb6d7!important}
footer .footer-links a,footer .footer-legal a,footer .footer-legal button{color:#cdb9d8!important}
footer .footer-links a:hover,footer .footer-legal a:hover,footer .footer-legal button:hover{color:#fff!important}
footer .footer-bottom{border-color:rgba(255,255,255,.15)!important;color:#b99fc7!important}

/* ---------- QUITAR EL AVISO "MANTÉN PULSADO PARA CONOCER A LAURA" ---------- */
.about-logo-hint{display:none!important}

/* ---------- 3) FLUIDO: una única geometría, contenida por la fotografía ----------
   El iframe comparte ahora exactamente la caja de .hero-media. No se desplaza
   ni se sobredimensiona: así no existen bordes internos capaces de formar una
   pared vertical en tablet o móvil. */
.hero-media{isolation:isolate}
.hero-media>img,.hero-media>video{position:relative;z-index:0}
.hero-media:after{z-index:1;pointer-events:none}
.hero-fluid{
  display:block!important;position:absolute!important;z-index:2!important;
  inset:0!important;width:100%!important;height:100%!important;max-width:none!important;
  border:0!important;border-radius:0!important;pointer-events:none!important;
  opacity:.62!important;mix-blend-mode:normal!important;
  filter:saturate(1.24) contrast(1.01) blur(.65px)!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}

/* ============================ TABLET ============================ */
@media(max-width:1000px) and (min-width:721px){
  .hero-fluid{
    inset:0!important;width:100%!important;height:100%!important;
    opacity:.64!important;filter:saturate(1.2) contrast(1.01) blur(.55px)!important;
  }
}

/* ============================ MÓVIL ============================ */
@media(max-width:720px){
  /* La barra también se integra en el hero al iniciar */
  .nav-wrap:not(.scrolled) .nav,
  .menu-open .nav-wrap:not(.scrolled) .nav{
    background:transparent!important;border-color:transparent!important;
    box-shadow:none!important;
  }
  .nav-wrap:not(.scrolled) .brand,
  .nav-wrap:not(.scrolled) .brand span{color:#351346!important}

  /* Altura de barra en móvil (no heredar la de escritorio) */
  .nav,.scrolled .nav{height:66px!important}

  /* Barra con scroll en móvil: colores vibrantes marfil→morado→magenta */
  .scrolled .nav{
    background:linear-gradient(100deg,#fff8eb 0%,#fff8eb 38%,#4b1b60 58%,#86277f 80%,#b02a86 100%)!important;
    box-shadow:0 12px 32px rgba(45,16,60,.2)!important;
  }

  .brand img,.scrolled .brand img{width:56px!important;height:56px!important}

  /* Hamburguesa: SIN círculo, solo 3 rayas en degradado morado→magenta */
  .menu-toggle,.scrolled .menu-toggle{
    display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px!important;
    position:fixed!important;top:16px!important;right:16px!important;transform:none!important;
    width:40px!important;height:34px!important;padding:0!important;border-radius:0!important;
    background:transparent!important;border:0!important;box-shadow:none!important;
    z-index:1000!important;
  }
  .menu-toggle span{
    position:static!important;left:auto!important;top:auto!important;
    display:block!important;width:28px!important;height:3px!important;margin:0!important;border-radius:3px!important;
    background:linear-gradient(90deg,#6a1fb0,#b02a86)!important;
    filter:drop-shadow(0 1px 1.5px rgba(255,255,255,.6))!important;
    transition:transform .3s var(--ease),opacity .2s!important;
  }
  .menu-open .menu-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)!important}
  .menu-open .menu-toggle span:nth-child(2){opacity:0!important}
  .menu-open .menu-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)!important}
  /* Con scroll las rayas van sobre el degradado: claras para que se vean */
  .scrolled .menu-toggle span{
    background:#fff9f0!important;filter:drop-shadow(0 1px 2px rgba(40,10,45,.4))!important;
  }

  /* MENÚ desplegable: fuera el óvalo/marca de agua; nombres bien visibles */
  .nav-links:before{display:none!important}
  .nav-links,.menu-open .nav-links{
    background:#fff9f0!important;box-shadow:0 26px 60px rgba(50,16,62,.26)!important;
  }
  .nav-links a{
    color:#2b1240!important;-webkit-text-fill-color:#2b1240!important;
    background:rgba(90,31,125,.05)!important;
    font:700 13px "Syne",sans-serif!important;letter-spacing:.12em!important;
    text-shadow:none!important;opacity:1!important;
  }
  .nav-links a:hover,.nav-links a:active{
    background:rgba(90,31,125,.1)!important;color:#7d207f!important;-webkit-text-fill-color:#7d207f!important;
  }
  .nav-links .mobile-menu-cta,.menu-open .nav-links .mobile-menu-cta{
    color:#fff!important;-webkit-text-fill-color:#fff!important;
    background:linear-gradient(120deg,#4b1b60,#86277f 60%,#b02a86)!important;
  }

  .hero-brand-logo{width:clamp(128px,36vw,180px);margin:0 0 14px}

  /* Misma caja que la imagen: se adapta al alto visual del hero sin invadir
     el bloque de texto inferior ni dejar un borde vertical. */
  .hero-fluid{
    inset:0!important;width:100%!important;height:100%!important;
    opacity:.66!important;mix-blend-mode:normal!important;
    filter:saturate(1.18) contrast(1.01) blur(.5px)!important;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
}

@media(max-width:380px){
  .brand img,.scrolled .brand img{width:54px!important;height:54px!important}
  .hero-fluid{inset:0!important;width:100%!important;height:100%!important;opacity:.64!important}
}

/* ============================================================
   AJUSTES ADICIONALES (petición del cliente)
   ============================================================ */

/* ---- Selección de texto: nada de cajas de color al tocar o doble-clic ---- */
body{-webkit-tap-highlight-color:transparent}
h1,h2,h3,.overline,.hero-lead,.hero-copy,.manifesto-kicker,.manifesto-copy,
.section-number,.sanctuary-copy,.cortex-intro,.cortex-reflection,.cortex-word,
.stats,.service-card,.step,.method-head,.faq-title,.accordions summary,
.interaction-note,.scroll-cue,blockquote,.brand,.nav-links,.contact,.footer-brand{
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
}
/* Donde sí conviene poder seleccionar/copiar (email, teléfono, textos legales) */
a[href^="mailto"],a[href^="tel"],.service-dialog,.service-dialog *,input,textarea{
  -webkit-user-select:text;-moz-user-select:text;user-select:text;
}
::selection{background:rgba(122,31,172,.16);color:inherit}
::-moz-selection{background:rgba(122,31,172,.16);color:inherit}

/* ---- "Vuelve a tu centro": ondas de agua hacia adentro (efecto gota) ---- */
.contact-orb{
  position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
  width:min(84vw,860px)!important;height:min(84vw,860px)!important;aspect-ratio:1!important;
  /* Anillos estáticos de base: garantizan que SIEMPRE se vean las ondas */
  background:
    repeating-radial-gradient(circle at 50% 50%,transparent 0 7.3%,rgba(163,52,190,.13) 7.3% 7.7%),
    radial-gradient(circle,rgba(180,60,190,.05),transparent 66%)!important;
  border:0!important;box-shadow:none!important;animation:none!important;
}
.contact-orb i{
  display:block!important;position:absolute!important;left:50%!important;top:50%!important;
  width:100%!important;height:100%!important;margin:0!important;
  border:2px solid rgba(163,52,190,.6)!important;border-radius:50%!important;
  box-shadow:0 0 46px rgba(180,58,192,.2),inset 0 0 46px rgba(180,58,192,.07)!important;
  opacity:0!important;transform:translate(-50%,-50%) scale(1.18)!important;
  /* delay NEGATIVO: arrancan ya a mitad de ciclo → visibles desde el inicio */
  animation:auralWaterIn 6.6s cubic-bezier(.22,.6,.2,1) infinite!important;
}
.contact-orb i:nth-child(1){animation-delay:-5.5s!important}
.contact-orb i:nth-child(2){animation-delay:-4.4s!important}
.contact-orb i:nth-child(3){animation-delay:-3.3s!important}
.contact-orb i:nth-child(4){animation-delay:-2.2s!important}
.contact-orb i:nth-child(5){animation-delay:-1.1s!important}
.contact-orb i:nth-child(6){animation-delay:0s!important}
@keyframes auralWaterIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}
  14%{opacity:.92}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.04)}
}
@media(prefers-reduced-motion:reduce){
  .contact-orb i{animation:none!important;opacity:.34!important}
  .contact-orb i:nth-child(1){transform:translate(-50%,-50%) scale(1)!important}
  .contact-orb i:nth-child(2){transform:translate(-50%,-50%) scale(.66)!important}
  .contact-orb i:nth-child(3){transform:translate(-50%,-50%) scale(.34)!important}
  .contact-orb i:nth-child(n+4){opacity:0!important}
}

/* Quitar el texto "Mueve para sentir el flujo" */
.cortex-interaction{display:none!important}

/* El propio fluido proporciona el aura; se elimina el círculo de respaldo que
   duplicaba el efecto y agrandaba visualmente la mancha en escritorio. */
.hero:before{display:none!important}

/* ---- Palabra gigante "AURAL": más clara (no tan oscura abajo) para que
   se distinga bien la L en PC ---- */
.cortex-word{
  letter-spacing:-.005em!important;
  background:linear-gradient(180deg,rgba(255,247,252,.94),rgba(228,170,209,.66) 50%,rgba(184,120,168,.42) 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  filter:drop-shadow(0 0 30px rgba(224,112,185,.12))!important;
}
@media(max-width:720px){
  .cortex-word{font-size:27vw!important;letter-spacing:-.005em!important;max-width:100%!important}
}

/* ---- Sección de partículas: texto legible y responsive ---- */
.sanctuary-copy .interaction-note{margin-top:26px}
@media(max-width:720px){
  .particle-sanctuary{text-align:left}
  .sanctuary-copy{max-width:100%}
  .sanctuary-copy h2{font-size:clamp(42px,13vw,60px)}
  .sanctuary-copy>p:not(.overline):not(.interaction-note){font-size:14px;line-height:1.75}
}

/* ---- TARIFAS: precios con otra fuente, en una sola línea ----
   (tanto en la lista como al abrir el detalle de la tarifa) */
.service-card .price,.dialog-foot strong{
  font-family:"Syne","DM Sans",sans-serif!important;font-weight:600!important;
  letter-spacing:-.01em!important;white-space:nowrap!important;
}
.service-card .price{font-size:clamp(19px,1.9vw,27px)!important;color:#8f1eb5!important}
.dialog-foot strong{font-size:clamp(28px,3vw,38px)!important;color:#a525b7!important}
/* Hover / selección de una sesión: se destaca claramente con color propio */
.service-card{
  position:relative!important;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease),padding .4s var(--ease)!important;
}
.service-card:before{
  background:linear-gradient(90deg,rgba(122,31,172,.16),rgba(216,58,151,.1) 55%,transparent 85%)!important;
}
.service-card:hover,.service-card:focus-visible,.service-card:active{
  background:linear-gradient(90deg,rgba(233,220,251,.96),rgba(251,226,241,.86))!important;
  border-color:rgba(122,31,172,.42)!important;
  box-shadow:0 16px 40px rgba(103,29,150,.18)!important;
}
.service-card:hover h3,.service-card:hover .price{color:#7a1fac!important}
.service-card:after{
  content:""!important;position:absolute!important;left:0!important;top:14px!important;bottom:14px!important;
  width:4px!important;border-radius:0 4px 4px 0!important;
  background:linear-gradient(#7a1fac,#c72c91)!important;
  transform:scaleY(0)!important;transform-origin:center!important;transition:transform .4s var(--ease)!important;
}
.service-card:hover:after,.service-card:focus-visible:after{transform:scaleY(1)!important}

/* ---- SOBRE AURAL: separar el epígrafe del título (no pegados) ---- */
.about-laura-copy .overline{margin-bottom:26px!important}
.about-laura-copy .overline #about-eyebrow{white-space:nowrap}
.about-laura-copy h2{margin-top:0!important}

/* ---- SESIONES: ayuda para elegir, grupo "Espacios y animales" y modal (misma paleta AURAL) ---- */
.services-modes{display:block;margin-top:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8b779b}
.service-guide{max-width:1200px;margin:0 auto 22px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 26px;border:1px solid rgba(128,83,121,.12);border-radius:22px;background:rgba(255,252,246,.62);box-shadow:0 8px 30px rgba(96,42,124,.06)}
.service-guide h3{margin:0 0 4px;font:600 clamp(17px,1.5vw,21px) var(--serif);letter-spacing:.02em;color:#2e1748}
.service-guide p{margin:0;max-width:640px;color:#756486;font-size:14px;line-height:1.6}
.service-guide .button{flex:0 0 auto}
.service-group-title{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin:22px 0 4px;font:700 11px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#8f1eb5}
.service-group-title span{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(143,30,181,.3),transparent)}
.service-empty{max-width:1200px;margin:auto;text-align:center;color:#756486}
.service-empty a{color:#8f1eb5;text-decoration:underline}
.service-dialog .dialog-question{margin:30px 0 0;font-weight:600;color:#5b2b73}
.service-dialog .dialog-question + .dialog-foot{margin-top:10px}
.service-dialog.booking-active .dialog-question{display:none}
.dialog-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 22px}
.dialog-actions .dialog-whatsapp{align-self:center}
.presence-help{margin:26px auto 0;max-width:760px;text-align:center;color:#766678;font-size:14px;line-height:1.7}
.presence-help .text-link{margin-left:6px;vertical-align:baseline}
@media (max-width:720px){
  .service-guide{flex-direction:column;align-items:flex-start;gap:14px;padding:18px}
  .service-guide .button{width:100%;justify-content:center}
  .dialog-actions{width:100%;justify-content:center}
  .dialog-actions .button{width:100%}
  .presence-help .text-link{margin:6px 0 0}
}
.service-dialog.booking-active>#dialog-extra-title,.service-dialog.booking-active>#dialog-extra{display:none}
/* Microdescripción visible también en tablet y móvil, debajo del nombre */
@media (max-width:1000px){
  .service-card .short{display:block;grid-column:2;grid-row:2;margin-top:-6px;font-size:12.5px;line-height:1.45;color:#766678}
  .service-card .short:before{display:none}
  .service-card .num{grid-row:1/span 2;align-self:center}
  .service-card h3{grid-column:2;grid-row:1;align-self:end}
  .service-card .price{grid-column:3;grid-row:1/span 2;align-self:center}
  .service-card .arrow{grid-column:4;grid-row:1/span 2;align-self:center}
}
/* Escritorio: algo más de ancho para la microdescripción */
@media (min-width:1001px){
  .service-card{grid-template-columns:58px minmax(0,.9fr) minmax(220px,1fr) 130px 42px!important}
}