/* Capa de acabado: movimiento y detalles. Todo lo que se mueve respeta el botón "Pausar animaciones"
   y la preferencia del sistema (prefers-reduced-motion). Sin JavaScript la página se ve completa. */
:root{--hh:104px}
@media(max-width:760px){:root{--hh:84px}}
html{scroll-padding-top:calc(var(--hh) + 6px);overflow-x:clip}

/* ── Barra de progreso de lectura ── */
.mp-progress{position:fixed;left:0;top:0;height:4px;width:100%;z-index:70;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--teal),var(--lavender),var(--pink),var(--lime));pointer-events:none}

/* ── Encabezado fijo con cristal esmerilado ── */
.header{position:sticky;top:0;z-index:60;height:var(--hh);border-bottom:0;transition:height .35s cubic-bezier(.2,.7,.25,1)}
.header::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);border-bottom:1px solid var(--line);transition:box-shadow .35s,background .35s}
.header.mp-scrolled{--hh:76px}
.header.mp-scrolled::before{box-shadow:0 10px 30px #2242770f;background:rgba(255,255,255,.92)}
.header .brand img{transition:width .35s,height .35s}
.header.mp-scrolled .brand img{width:150px;height:66px}
@media(max-width:760px){.header.mp-scrolled{--hh:68px}.header.mp-scrolled .brand img{width:128px;height:56px}}
:root:has(.header.mp-scrolled){--hh:76px}
@media(max-width:760px){:root:has(.header.mp-scrolled){--hh:68px}}

/* enlace activo según la sección */
.header nav>a:not(.button){position:relative;padding-block:6px}
.header nav>a:not(.button)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--teal),var(--lavender));transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.25,1)}
.header nav>a:not(.button):hover::after,.header nav>a[aria-current="true"]::after{transform:scaleX(1)}
.header nav>a[aria-current="true"]{color:var(--teal-dark)}

/* menú móvil: panel flotante con botón que se vuelve X */
.mobile-nav{position:fixed;left:0;right:0;top:var(--hh);z-index:55;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 22px 40px #22427718}
.menu-toggle span{transition:transform .3s cubic-bezier(.2,.7,.25,1),opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* ── Botones: brillo al pasar y latido en la llamada principal ── */
.button{position:relative;overflow:hidden;isolation:isolate;transition:background .2s,transform .25s cubic-bezier(.2,.7,.25,1),box-shadow .25s}
.button::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%)}
.button:hover{transform:translateY(-2px);box-shadow:0 12px 26px #22427724}
.button:hover::after{transform:translateX(120%);transition:transform .75s ease}
.button:active{transform:translateY(0) scale(.98)}

/* ── Detalles al pasar el cursor (siempre sutiles) ── */
.service-card{transition:border-color .3s}
.service-card:hover{border-top-color:var(--teal)}
.service-card .service-icon{transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.service-card:hover .service-icon{transform:scale(1.12) rotate(-8deg)}
.treat-list li{transition:transform .35s cubic-bezier(.2,.7,.25,1)}
.treat-list li:hover{transform:translateX(8px)}
.treat-dot{transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .35s}
.treat-list li:hover .treat-dot{transform:scale(1.5);box-shadow:0 0 0 6px #12afa820}
.treat-list h3{transition:color .25s}
.treat-list li:hover h3{color:var(--teal-dark)}
.journey-card{transition:box-shadow .3s,border-color .3s,transform .4s cubic-bezier(.2,.7,.25,1)}
.journey-card:hover{transform:translateY(-6px)}
.journey-scene img{transition:transform .6s cubic-bezier(.2,.7,.25,1)}
.journey-card:hover .journey-scene img{transform:scale(1.04)}
.special-tag{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.special-tag:hover{transform:translateY(-3px)}
.about-visual>img,.special-photo img{transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.about-visual:hover>img{transform:scale(1.02)}

/* ── Ondas suaves entre secciones ── */
.special,.visit-section{position:relative}
.special::before,.visit-section::after{content:"";position:absolute;left:0;right:0;height:56px;background:#fff;pointer-events:none;z-index:1}
.special::before{top:-1px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v16c-260 46-520 44-760 22C440 16 220 2 0 30z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v16c-260 46-520 44-760 22C440 16 220 2 0 30z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.visit-section::after{bottom:-1px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0 56V28C240 2 500 0 740 22s480 30 700 6V56z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0 56V28C240 2 500 0 740 22s480 30 700 6V56z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
@media(max-width:760px){.special::before,.visit-section::after{height:34px}}

/* ── Animaciones (solo con movimiento activado) ── */
@media(prefers-reduced-motion:no-preference){
  /* entrada del encabezado */
  [data-motion="on"] .header{animation:mp-drop .9s cubic-bezier(.2,.7,.25,1) backwards}
  @keyframes mp-drop{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
  [data-motion="on"] .mobile-nav:not([hidden]){animation:mp-menu .35s cubic-bezier(.2,.7,.25,1) both}
  [data-motion="on"] .mobile-nav:not([hidden]) a{animation:mp-menu-link .5s cubic-bezier(.2,.7,.25,1) both}
  [data-motion="on"] .mobile-nav:not([hidden]) a:nth-child(2){animation-delay:.06s}
  [data-motion="on"] .mobile-nav:not([hidden]) a:nth-child(3){animation-delay:.12s}
  [data-motion="on"] .mobile-nav:not([hidden]) a:nth-child(4){animation-delay:.18s}
  @keyframes mp-menu{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
  @keyframes mp-menu-link{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

  /* titular del inicio: palabra por palabra */
  .mp-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
  .mp-word>mp-i{display:inline-block}
  .mp-on .mp-word>mp-i{transform:translateY(112%) rotate(4deg);transition:transform .95s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--w,0)*95ms + .15s)}
  .mp-on .mp-go .mp-word>mp-i{transform:none}

  /* foto principal: se destapa y respira */
  .hero-photo{scale:1.05;translate:0 var(--py,0px);will-change:translate}
  [data-motion="on"] .hero-photo{transition:scale 1.8s cubic-bezier(.2,.7,.2,1)}
  .mp-on .hero-photo:not(.mp-in){scale:1.22}
  [data-motion="on"] .hello-tag,[data-motion="on"] .hero-ribbon{translate:calc(var(--mx,0)*14px) calc(var(--my,0)*10px);transition:translate .5s cubic-bezier(.2,.7,.25,1)}
  [data-motion="on"] .visual-orbit{translate:calc(var(--mx,0)*-10px) calc(var(--my,0)*-8px);transition:translate .6s cubic-bezier(.2,.7,.25,1)}

  /* franja azul: asteriscos que giran */
  [data-motion="on"] .values-strip b{animation:mp-spin 9s linear infinite;display:inline-block}
  [data-motion="on"] .values-strip b:nth-of-type(2){animation-direction:reverse;animation-duration:11s}
  @keyframes mp-spin{to{transform:rotate(360deg)}}

  /* revelado de bloques con escalonado */
  .mp-on .mp-item{opacity:0;transform:translateY(30px);transition:opacity .85s cubic-bezier(.2,.7,.25,1) calc(var(--i,0)*95ms),transform .85s cubic-bezier(.2,.7,.25,1) calc(var(--i,0)*95ms)}
  .mp-on .mp-item.in{opacity:1;transform:none}
  .mp-on .mp-pop{opacity:0;transform:scale(.4) rotate(-12deg);transition:opacity .4s calc(var(--i,0)*120ms),transform .8s cubic-bezier(.3,1.6,.5,1) calc(var(--i,0)*120ms)}
  .mp-on .mp-pop.in{opacity:1;transform:none}
  .mp-on .about-caption.mp-pop{transform:rotate(-12deg) scale(.7) translateY(20px)}
  .mp-on .about-caption.mp-pop.in{transform:rotate(-3deg)}

  /* fotos: se destapan con una cortina y se asientan */
  .mp-on .mp-img{clip-path:inset(0 0 100% 0);scale:1.18;transition:clip-path 1.2s cubic-bezier(.7,0,.2,1),scale 1.6s cubic-bezier(.2,.7,.2,1)}
  .mp-on .mp-img.in{clip-path:inset(0 0 0 0);scale:1}

  /* titulares: el resaltado se dibuja solo */
  h2>span{background-image:linear-gradient(transparent 64%,rgba(18,175,168,.2) 64%);background-repeat:no-repeat;background-position:0 100%;background-size:100% 100%}
  .mp-on h2>span{background-size:0% 100%;transition:background-size 1s cubic-bezier(.3,.1,.2,1) .35s}
  .mp-on h2.in>span{background-size:100% 100%}

  /* latido en el botón de WhatsApp del contacto */
  [data-motion="on"] .contact-button{animation:mp-ring 3.4s ease-out infinite 1.5s}
  @keyframes mp-ring{0%{box-shadow:0 0 0 0 rgba(157,209,74,.55)}55%,100%{box-shadow:0 0 0 18px rgba(157,209,74,0)}}
  /* el icono del menú y los números del recorrido */
  .journey-number{will-change:transform}
}
@media(prefers-reduced-motion:reduce){
  .mp-progress{transition:none}
  .header,.header::before,.header .brand img{transition:none!important}
}