/* La Mercedes · vida de la página (PC y teléfono). Solo se mueve si el visitante no pidió "reducir movimiento".
   Todo usa transform y opacity (no recalcula el diseño), así es fluido también en teléfonos sencillos. */
@media (prefers-reduced-motion: no-preference) {

  /* ---------- Entrada del inicio: aparece por partes ---------- */
  .hero-copy>.eyebrow,.hero h1,.hero-copy>.hero-sub,.pt-buscar,.pt-botones-m,.pt-vivo-m,.hero-copy>.textlink{animation:vSube .9s cubic-bezier(.2,.7,.2,1) both}
  .hero h1{animation-delay:.1s}
  .hero-copy>.hero-sub{animation-delay:.22s}
  .pt-buscar{animation-delay:.34s}
  .pt-botones-m{animation-delay:.46s}
  .pt-vivo-m,.hero-copy>.textlink{animation-delay:.58s}
  .pt-vivo:not([hidden]){animation:vDesdeDer 1s .6s cubic-bezier(.2,.7,.2,1) both}
  .hero-bottom{animation:vAparece 1.2s .8s both}
  /* "ya existe." con un brillo que la recorre de vez en cuando */
  .hero h1 em{background:linear-gradient(100deg,#27bfe6 30%,#c4f4ff 48%,#27bfe6 66%);background-size:260% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:vBrillo 7s 1.6s ease-in-out infinite}
  /* El barco flota y, en computadora, baja más lento que la página */
  .hero-ship-svg{animation:vFlota 7s ease-in-out infinite;transform-origin:50% 85%;translate:0 var(--pt-par,0px)}
  /* Barrido de luz en el botón principal del buscador, cada tanto */
  .pt-campo .button,.pt-botones-m .primary,.pt-viaje-cta .button{position:relative;overflow:hidden}
  .pt-campo .button::after,.pt-botones-m .primary::after,.pt-viaje-cta .button::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(110deg,transparent 35%,#ffffff59 50%,transparent 65%);transform:translateX(-130%);animation:vBarrido 6s 2.5s ease-in-out infinite}

  /* ---------- Lo que aparece al bajar ---------- */
  /* Todo entra deslizándose de DERECHA a IZQUIERDA (como un slide). Las tarjetas recorren más camino y con un leve giro. */
  html.vida main{overflow-x:clip} /* lo que viene desde la derecha no crea barra horizontal */
  html.vida .rv{opacity:0;transition:opacity .9s cubic-bezier(.16,.84,.3,1),transform 1.05s cubic-bezier(.16,.84,.3,1);transition-delay:calc(var(--i,0) * 120ms)}
  html.vida .rv.sube{transform:translateX(90px)}
  html.vida .rv.izq{transform:translateX(120px)}
  html.vida .rv.lado{transform:translateX(160px) rotate(2deg)}
  html.vida .rv.on{opacity:1;transform:none}
  /* Teléfono: el carrusel completo entra desde la derecha (sus tarjetas solo aparecen, para no confundir en cuál se queda) */
  @media (max-width:740px){
    html.vida .pt-carrusel{transition:transform 1.05s cubic-bezier(.16,.84,.3,1)}
    html.vida .pt-carrusel:has(> .rv:not(.on)){transform:translateX(70%)}
  }
  /* El ícono de cada paso "salta" al aparecer su tarjeta */
  html.vida .rv.on .pt-paso-ico{animation:vSalto .7s calc(var(--i,0) * 110ms + .25s) both}

  /* ---------- Tarjetas: se levantan al pasar el mouse (computadora) ---------- */
  @media (hover:hover) and (min-width:741px){
    .pt-momentos li,.subs-plans .subs-plan,.contact-card,.pt-ruta .pt-carros li,.gh-list li{transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .35s}
    .pt-momentos li:hover,.subs-plans .subs-plan:hover,.contact-card:hover{transform:translateY(-6px);filter:drop-shadow(0 14px 22px #0000002b)}
    .pt-ruta .pt-carros li:hover,.gh-list li:hover{transform:translateX(4px)}
  }

  /* ---------- El reloj hace "tic" ---------- */
  .pt-reloj b.tic{animation:vTic .45s cubic-bezier(.2,.7,.2,1)}

  /* ---------- Teléfono: la tarjeta del centro al frente, las de los lados más atrás ---------- */
  @media (max-width:740px){
    .pt-carrusel>*{transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .4s}
    html.vida .pt-carrusel>*:not(.act):not(.rv){transform:scale(.94);opacity:.72}
    html.vida .pt-carrusel.asoma>*{animation:vAsoma 1.2s cubic-bezier(.45,0,.25,1)}
    /* Dentro del carrusel la tarjeta aparece con un fundido (moverla confunde en qué tarjeta se queda el carrusel) */
    html.vida .pt-carrusel>.rv.lado{transform:none}
  }

  /* ---------- Detalles ---------- */
  .faq details[open]>p{animation:vSube .45s cubic-bezier(.2,.7,.2,1)}
  .pt-resultado .pt-mini li{animation:vSube .5s cubic-bezier(.2,.7,.2,1) both}
  .pt-resultado .pt-mini li:nth-child(2){animation-delay:.08s}
  .pt-resultado .pt-mini li:nth-child(3){animation-delay:.16s}
}

@keyframes vSube{from{opacity:0;transform:translateY(22px)}}
@keyframes vDesdeDer{from{opacity:0;transform:translateX(40px)}}
@keyframes vAparece{from{opacity:0}}
@keyframes vBrillo{0%,62%{background-position:100% 0}82%,100%{background-position:0 0}}
@keyframes vFlota{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-.7deg)}}
@keyframes vBarrido{0%,72%{transform:translateX(-130%)}92%,100%{transform:translateX(130%)}}
@keyframes vSalto{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
@keyframes vTic{from{transform:translateY(-8px);opacity:.25}}
@keyframes vAsoma{45%{translate:-38px 0}}