/* SERÉNA SPA · capa de movimiento v5.8.0 (2026-10-16)
 * Se carga DESPUÉS de serena-luxo-v570.css y no cambia contenido ni colores.
 * Patrones de spas de lujo: entradas lentas, imágenes que se descubren, parallax suave, header compacto,
 * transición entre páginas. Todo el movimiento vive dentro de prefers-reduced-motion:no-preference.
 * Usa las propiedades translate/scale (no transform) para no pisar los transform que ya trae el diseño.
 */
:root{
  --sm-out:cubic-bezier(.16,1,.3,1);
  --sm-soft:cubic-bezier(.22,.61,.36,1);
  --sm-gold:#C8A94A;
}

/* ── Arreglos generales (siempre activos) ─────────────────────────── */
/* El carrusel "Claridad desde el primer mensaje" ensanchaba la página a 465 px en celulares de 390 px. */
.s540-testimonials{overflow:hidden}
.s540-slide-dots{display:flex;gap:10px;margin-top:22px}
.s540-slide-dots button{width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.s540-slide-dots button::before{content:"";width:22px;height:2px;border-radius:2px;background:rgba(32,56,46,.22);transition:background .4s,width .4s var(--sm-out)}
.s540-slide-dots button[aria-current="true"]::before{width:34px;background:var(--s5-gold-dark,#8E6B20)}
/* Header en celular: solo el círculo "WA" (una regla !important posterior volvía a mostrar la palabra encimada) */
@media (max-width:600px){
  body .s5-header-wa{font-size:0!important;padding:0!important;width:42px!important;height:42px!important;min-height:42px!important;border-radius:50%!important;gap:0!important}
}
/* Botones secundarios (fondo verde): el texto verde oscuro no se leía — menú móvil y Contacto */
.s5-page a.s5-btn-secondary,.s5-page a.s5-btn-secondary:visited{color:#FFF9EF!important;-webkit-text-fill-color:#FFF9EF!important}
/* Menú móvil: la hamburguesa se convierte en X */
.s5-mobile-menu>summary span{transition:translate .35s var(--sm-out),rotate .35s var(--sm-out),opacity .2s}
.s5-mobile-menu[open]>summary span:nth-child(1){translate:0 6.5px;rotate:45deg}
.s5-mobile-menu[open]>summary span:nth-child(2){opacity:0}
.s5-mobile-menu[open]>summary span:nth-child(3){translate:0 -6.5px;rotate:-45deg}
/* Barra de progreso de lectura en el header */
.s5-header{position:sticky}
.s5-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;transform-origin:0 50%;transform:scaleX(var(--sm-p,0));background:linear-gradient(90deg,rgba(200,169,74,.2),var(--sm-gold) 60%,#F0D98A);pointer-events:none}

@media screen and (prefers-reduced-motion:no-preference){
  /* Transición suave entre páginas del sitio (Chrome/Edge/Safari recientes; el resto navega normal) */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:.32s var(--sm-soft) both sm-fade-out}
  ::view-transition-new(root){animation:.55s var(--sm-out) both sm-fade-in}
  .s5-header{view-transition-name:sm-header}
  html{interpolate-size:allow-keywords}

  /* ── Portada y primer bloque de cada página: entrada al cargar (solo CSS, no depende del JS) ── */
  .s540-hero .s5-kicker,main>section:first-child .s5-kicker{animation:sm-rise 1s var(--sm-out) .05s both}
  .s540-hero h1,main>section:first-child h1{animation:sm-rise-blur 1.35s var(--sm-out) .15s both}
  .s540-hero-copy>p,main>section:first-child h1~p,main>section:first-child .s550-category-lead{animation:sm-rise 1.1s var(--sm-out) .38s both}
  .s540-hero .s5-actions,main>section:first-child .s5-actions,main>section:first-child h1~.s5-btn,main>section:first-child .s550-category-note,main>section:first-child .s5-detail-meta,main>section:first-child .s5-book-note{animation:sm-rise 1.1s var(--sm-out) .52s both}
  .s540-hero-meta span{animation:sm-rise .9s var(--sm-out) both}
  .s540-hero-meta span:nth-child(1){animation-delay:.75s}.s540-hero-meta span:nth-child(2){animation-delay:.85s}.s540-hero-meta span:nth-child(3){animation-delay:.95s}
  .s540-hero-arch,main>section:first-child>.s5-shell>figure,main>section:first-child .s5-book-photo{animation:sm-unveil 1.7s var(--sm-out) .1s both}
  .s540-hero-arch img,main>section:first-child>.s5-shell>figure img,main>section:first-child .s5-book-photo img{animation:sm-settle 2.8s var(--sm-out) .1s both}
  main>section:first-child .s5-book-form,main>section:first-child .s5-contact-card{animation:sm-rise 1.1s var(--sm-out) .45s both}

  /* ── Entradas al hacer scroll (el JS marca los elementos con data-sm; sin JS todo se ve normal) ── */
  html.sm-on [data-sm]{transition:opacity 1.1s var(--sm-soft),translate 1.2s var(--sm-out),scale 1.2s var(--sm-out),clip-path 1.5s var(--sm-out);transition-delay:calc(var(--sm-i,0) * 95ms)}
  html.sm-on [data-sm="up"]:not(.sm-in){opacity:0;translate:0 34px}
  html.sm-on [data-sm="soft"]:not(.sm-in){opacity:0;scale:.94}
  html.sm-on [data-sm="veil"]:not(.sm-in){clip-path:inset(14% 0 0 0)}
  html.sm-on [data-sm="veil"] img{transition:scale 2.2s var(--sm-out)}
  html.sm-on [data-sm="veil"]:not(.sm-in) img{scale:1.16}
  /* títulos palabra por palabra */
  .sm-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .02em .16em;margin:-.14em -.02em -.16em}
  .sm-w>span{display:inline-block;transition:translate 1.15s var(--sm-out),opacity .9s var(--sm-soft);transition-delay:calc(var(--sm-k,0) * 55ms + 80ms)}
  html.sm-on h2[data-sm-split]:not(.sm-in) .sm-w>span{translate:0 105%;opacity:0}

  /* ── Parallax suave en las bandas de foto completa (el JS mueve --sm-y) ── */
  .s540-immersive>img,.s540-facts>img{scale:1.14;translate:0 var(--sm-y,0px);will-change:translate}

  /* ── Galería ovalada: respiración muy lenta, desfasada (escritorio) ── */
  @media (min-width:901px){
    .s540-oval-gallery figure{animation:sm-breathe 9s ease-in-out infinite}
    .s540-oval-gallery figure:nth-child(2){animation-delay:-2.2s}
    .s540-oval-gallery figure:nth-child(3){animation-delay:-4.5s}
    .s540-oval-gallery figure:nth-child(4){animation-delay:-6.7s}
  }

  /* ── Hover: fotos que se acercan despacio, botones con brillo, flechas que avanzan ── */
  .s540-oval-gallery img,.s540-experts-grid figure img,.s540-guides-grid img,.s5-card-image img,.s5-package-grid img,.s540-services-feature figure img,.s540-collage img,.s540-detail-grid figure img{transition:scale 1.6s var(--sm-out),filter 1.2s}
  .s540-oval-gallery figure:hover img,.s540-experts-grid a:hover figure img,.s540-guides-grid a:hover img,.s5-service-card:hover .s5-card-image img,.s5-package-grid article:hover img,.s540-services-feature:hover figure img,.s540-collage figure:hover img,.s540-detail-grid figure:hover img{scale:1.06}
  html.sm-on .s540-experts-grid a:hover [data-sm] img,html.sm-on .s540-services-feature:hover [data-sm].sm-in img,html.sm-on .s540-collage figure.sm-in:hover img,html.sm-on .s540-detail-grid figure.sm-in:hover img{scale:1.06}
  .s5-service-card,.s540-experience-grid article,.s5-package-grid article,.s5-pricing article{transition:translate .6s var(--sm-out),box-shadow .6s var(--sm-soft)}
  .s5-service-card:hover,.s5-package-grid article:hover,.s5-pricing article:hover{translate:0 -6px;box-shadow:0 30px 70px rgba(25,67,47,.13)}
  .s540-experience-grid article:hover{translate:0 -4px}
  .s5-btn{position:relative;overflow:hidden;isolation:isolate;transition:translate .45s var(--sm-out),box-shadow .45s var(--sm-soft),background-color .35s,color .35s}
  .s5-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,249,239,.38) 50%,transparent 70%);translate:-120% 0;transition:translate .9s var(--sm-out);pointer-events:none}
  .s5-btn:hover{translate:0 -2px;box-shadow:0 14px 34px rgba(15,81,50,.18)}
  .s5-btn:hover::after{translate:120% 0}
  .s540-link span,.s5-text-link{display:inline-block;transition:translate .45s var(--sm-out)}
  .s540-link:hover span{translate:3px -3px}

  /* ── Header: se compacta y toma sombra al bajar ── */
  .s5-header,.s5-header-inner,.s5-brand img{transition:min-height .5s var(--sm-out),box-shadow .5s,background-color .5s,height .5s var(--sm-out),width .5s var(--sm-out)}
  .s5-header.sm-scrolled{box-shadow:0 10px 40px rgba(30,63,48,.10)}
  @media (min-width:901px){.s5-header.sm-scrolled .s5-header-inner{min-height:60px}}

  /* ── Menús: aparecen con un deslizamiento corto ── */
  .s5-nav-group[open] .s5-mega,.s5-mobile-menu[open] .s5-mobile-panel{animation:sm-drop .42s var(--sm-out) both}
  .s5-mobile-menu[open] .s5-mobile-panel>a{animation:sm-rise .55s var(--sm-out) both}
  .s5-mobile-menu[open] .s5-mobile-panel>a:nth-child(n+2){animation-delay:.03s}.s5-mobile-menu[open] .s5-mobile-panel>a:nth-child(n+4){animation-delay:.07s}
  .s5-mobile-menu[open] .s5-mobile-panel>a:nth-child(n+6){animation-delay:.11s}.s5-mobile-menu[open] .s5-mobile-panel>a:nth-child(n+8){animation-delay:.15s}.s5-mobile-menu[open] .s5-mobile-panel>a:nth-child(n+10){animation-delay:.19s}

  /* ── Preguntas frecuentes: abren y cierran suave ── */
  .s5-faq-list details::details-content{block-size:0;overflow:clip;transition:block-size .55s var(--sm-out),content-visibility .55s allow-discrete}
  .s5-faq-list details[open]::details-content{block-size:auto}
  .s5-faq-list summary::after{transition:rotate .45s var(--sm-out)}

  /* ── Botón flotante de WhatsApp: entra tarde y respira con un anillo dorado ── */
  .s5-wa-float{animation:sm-rise .9s var(--sm-out) 1.4s both}
  .s5-wa-float span{position:relative}
  .s5-wa-float span::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(240,217,138,.85);opacity:0;animation:sm-ring 4.8s var(--sm-soft) 3s infinite}

  /* ── Cinta: más pausada y se detiene al pasar el mouse ── */
  .s540-marquee div{animation-duration:46s}
  .s540-marquee:hover div{animation-play-state:paused}

  @keyframes sm-rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
  @keyframes sm-rise-blur{from{opacity:0;translate:0 30px;filter:blur(8px)}to{opacity:1;translate:0 0;filter:blur(0)}}
  @keyframes sm-unveil{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes sm-settle{from{scale:1.18}to{scale:1}}
  @keyframes sm-breathe{0%,100%{translate:0 0}50%{translate:0 -10px}}
  @keyframes sm-drop{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
  @keyframes sm-ring{0%{opacity:.9;scale:1}55%,100%{opacity:0;scale:1.7}}
  @keyframes sm-fade-out{to{opacity:0}}
  @keyframes sm-fade-in{from{opacity:0;translate:0 12px}}
}
@media print{html.sm-on [data-sm]{opacity:1!important;translate:none!important;clip-path:none!important}}