/*
  Movimiento de la página. Se carga después de styles.css.
  Todo lo que se mueve va dentro de prefers-reduced-motion: no-preference,
  así que sin este bloque la página queda completa y estática.
*/

/* Sin movimiento: líneas entre pasos, foco y flechas */
.steps-grid > div {
  position: relative;
}
.steps-grid > div:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 48px;
  right: -32px;
  height: 2px;
  background: #000;
  transform-origin: left center;
}
@media (max-width: 760px) {
  /* En móvil los pasos son una línea de tiempo: la línea corre bajo el círculo
     y el texto queda a su derecha, sin cruzarse. */
  .steps-grid > div {
    padding-left: 56px;
  }
  .steps-grid .step-num {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }
  .steps-grid h3 {
    padding-top: 7px;
  }
  .steps-grid > div:not(:last-child)::before {
    top: 48px;
    bottom: -20px;
    left: 19px;
    right: auto;
    width: 2px;
    height: auto;
    transform-origin: center top;
  }
}
.btn-arrow {
  display: inline-block;
}
.btn-arrow--inline {
  margin-left: -15px;
}
#promo-title:focus {
  outline: none;
}
.promo-art svg {
  overflow: visible;
}
.hero h1 span {
  position: relative;
  display: inline-block;
}
.hero-sign {
  position: absolute;
  left: 0;
  bottom: -0.2em;
  width: 100%;
  height: auto;
  overflow: visible;
  pointer-events: none;
  z-index: -1;
}
.hero-sign path {
  fill: none;
  stroke: #ffcc08;
  stroke-width: 7;
  stroke-linecap: round;
}
.hero h1 {
  isolation: isolate;
}

@media (prefers-reduced-motion: no-preference) {
  /* ---------- Botones ---------- */
  .btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition:
      transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.3),
      box-shadow 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  }
  .btn::before {
    content: "";
    position: absolute;
    inset: -1px -24%;
    z-index: -1;
    background: #ffcc08;
    transform: translateX(-112%) skewX(-14deg);
    transition: transform 0.34s cubic-bezier(0.65, 0, 0.2, 1);
  }
  .btn.yellow::before,
  .actions .btn.secondary::before {
    background: #f0047f;
  }
  .btn-arrow {
    transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.4);
  }
  @media (hover: hover) {
    .btn:hover {
      transform: translate(-3px, -3px);
      box-shadow: 4px 4px 0 #000;
    }
    .btn:hover::before {
      transform: translateX(0) skewX(-14deg);
    }
    .btn:hover .btn-arrow {
      transform: translate(3px, -3px);
    }
    .promo-actions .btn:hover .btn-arrow {
      transform: translateX(6px);
    }
    .card {
      transition:
        transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2),
        box-shadow 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    }
    .card:hover {
      transform: translate(-4px, -4px);
      box-shadow: 8px 8px 0 #ffcc08;
    }
    .card.featured:hover {
      box-shadow: 8px 8px 0 #f0047f;
    }
    .close {
      transition:
        transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4),
        background 0.15s;
    }
    .close:hover {
      background: #ffcc08;
      transform: rotate(90deg);
    }
    .nav a {
      background: linear-gradient(#f0047f, #f0047f) left bottom / 0 2px
        no-repeat;
      padding-bottom: 3px;
      transition: background-size 0.25s ease;
    }
    .nav a:hover {
      background-size: 100% 2px;
    }
    .whatsapp-float:hover svg {
      animation: whatsapp-wiggle 0.5s ease;
    }
    summary {
      transition: color 0.15s;
    }
    summary:hover {
      color: #f0047f;
    }
  }
  .btn:active {
    transform: translate(1px, 1px);
    box-shadow: 0 0 0 #000;
    transition-duration: 0.06s;
  }

  /* ---------- Testimonios ---------- */
  .experience-card {
    transition:
      transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2),
      box-shadow 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  }
  .experience-topic {
    transition:
      transform 0.25s cubic-bezier(0.2, 1.3, 0.4, 1),
      background 0.2s;
  }
  .experience-name {
    position: relative;
  }
  .experience-name::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5C20 1 34 7 58 4S98 1 119 4' fill='none' stroke='%23f0047f' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
      center / 100% 100% no-repeat;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.4s cubic-bezier(0.5, 0, 0.3, 1);
  }
  @media (hover: hover) {
    .experience-card:hover {
      transform: translate(-4px, -4px);
      box-shadow: 8px 8px 0 #f0047f;
    }
    .experience-card:nth-child(even):hover {
      box-shadow: 8px 8px 0 #ffcc08;
    }
    .experience-card:hover .experience-topic {
      background: #f0047f;
      transform: rotate(-3deg) scale(1.06);
    }
    .experience-card:hover .experience-name::after {
      clip-path: inset(0);
    }
  }
  @media (hover: none) {
    .experience-card:active {
      transform: scale(0.98);
    }
  }

  /* ---------- Header compacto: baja al pasar el header original ---------- */
  @media screen {
    .site-header.is-stuck .header {
      animation: header-down 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
    }
  }

  /* ---------- Entrada de la portada ---------- */
  .hero > div:first-child > * {
    animation: rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  }
  .hero > div:first-child > :nth-child(2) {
    animation-delay: 0.08s;
  }
  .hero > div:first-child > :nth-child(3) {
    animation-delay: 0.2s;
  }
  .hero > div:first-child > :nth-child(4) {
    animation-delay: 0.3s;
  }
  .hero > div:first-child > :nth-child(5) {
    animation-delay: 0.38s;
  }
  .hero-sign path {
    stroke-dasharray: 1;
    animation: draw 0.8s cubic-bezier(0.6, 0, 0.3, 1) 0.45s backwards;
  }
  .human-scene {
    animation: scene-in 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1) 0.12s backwards;
  }

  /* ---------- Aparición al hacer scroll ----------
     animations.js marca cada parte con .reveal y le añade .in-view al entrar en
     pantalla. --reveal-i escalona las partes que entran a la vez. */
  @media screen {
    .anim .reveal:not(.in-view) {
      opacity: 0;
    }

    /* Títulos: barrido de izquierda a derecha */
    .section-head.in-view h2,
    .faq-layout > div.in-view h2,
    .steps.in-view .wrap > h2 {
      animation: sweep-right 0.75s cubic-bezier(0.65, 0, 0.2, 1) 0.1s backwards;
    }
    .section-head.in-view .eyebrow,
    .faq-layout > div.in-view .eyebrow,
    .steps.in-view .wrap > .eyebrow {
      animation: rise 0.45s ease backwards;
    }
    .section-head.in-view p {
      animation: rise 0.5s ease 0.45s backwards;
    }

    /* Franja de confianza */
    .trust span.in-view {
      animation: rise 0.45s ease calc(var(--reveal-i, 0) * 0.09s) backwards;
    }

    /* Valores: barrido y número que salta */
    .value-grid > article.in-view {
      animation: sweep-right 0.65s cubic-bezier(0.65, 0, 0.2, 1)
        calc(var(--reveal-i, 0) * 0.12s) backwards;
    }
    .value-grid > article.in-view .value-num {
      animation: step-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1)
        calc(var(--reveal-i, 0) * 0.12s + 0.3s) backwards;
    }

    /* Precios */
    .pricing .card.in-view {
      animation: card-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.1)
        calc(var(--reveal-i, 0) * 0.11s) backwards;
    }

    /* Testimonios: barrido escalonado */
    .experience-card.in-view {
      animation: sweep-right 0.6s cubic-bezier(0.65, 0, 0.2, 1)
        calc(var(--reveal-i, 0) * 0.1s) backwards;
    }

    /* Pasos: el amarillo cruza la pantalla y luego llegan los pasos en orden */
    .steps.in-view {
      animation: sweep-right 0.8s cubic-bezier(0.65, 0, 0.2, 1) backwards;
    }
    .steps.in-view .wrap > h2 {
      animation-delay: 0.3s;
    }
    .steps.in-view .wrap > .eyebrow {
      animation-delay: 0.25s;
    }
    .steps.in-view .steps-grid .step-num {
      animation: step-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1)
        calc(var(--i, 0) * 0.42s + 0.45s) backwards;
    }
    .steps.in-view .steps-grid h3,
    .steps.in-view .steps-grid p {
      animation: rise 0.45s ease calc(var(--i, 0) * 0.42s + 0.55s) backwards;
    }
    .steps.in-view .steps-grid > div:not(:last-child)::before {
      animation: grow-x 0.38s ease-in-out calc(var(--i, 0) * 0.42s + 0.75s)
        backwards;
    }
    .steps-grid > div:nth-child(2) {
      --i: 1;
    }
    .steps-grid > div:nth-child(3) {
      --i: 2;
    }

    /* Preguntas: una tras otra */
    details.in-view {
      animation: rise 0.4s ease calc(var(--reveal-i, 0) * 0.06s) backwards;
    }

    /* Bloque UpConta: barrido y botón que salta */
    .business.in-view {
      animation: sweep-right 0.7s cubic-bezier(0.65, 0, 0.2, 1) backwards;
    }
    .business.in-view .btn {
      animation: step-pop 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) 0.55s backwards;
    }

    /* Cierre: el magenta barre al revés y luego entra el mensaje */
    .closing.in-view {
      animation: sweep-left 0.75s cubic-bezier(0.65, 0, 0.2, 1) backwards;
    }
    .closing.in-view > :not(.btn) {
      animation: rise 0.5s ease 0.4s backwards;
    }
    .closing.in-view .btn {
      animation: step-pop 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) 0.6s backwards;
    }

    /* Respaldo y pie de página */
    .backing-entity.in-view {
      animation: rise 0.55s ease calc(var(--reveal-i, 0) * 0.14s) backwards;
    }
    footer.in-view {
      animation: fade 0.6s ease backwards;
    }
  }
  @media screen and (max-width: 760px) {
    .steps.in-view .steps-grid > div:not(:last-child)::before {
      animation-name: grow-y;
    }
  }

  /* ---------- Preguntas frecuentes ---------- */
  summary:after {
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  }
  details[open] summary:after {
    transform: rotate(180deg);
  }
  details[open] > :not(summary) {
    animation: rise 0.3s ease backwards;
  }

  /* ---------- WhatsApp: latido verde continuo (doble golpe y pausa) ---------- */
  .whatsapp-float svg {
    animation: whatsapp-beat 2s ease-in-out infinite;
  }
  .whatsapp-float::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 62px;
    height: 62px;
    margin-left: -31px;
    border-radius: 50%;
    background: #25d366;
    opacity: 0;
    z-index: -1;
    animation: whatsapp-ring 2s ease-out infinite;
  }
  @media (max-width: 760px) {
    .whatsapp-float::before {
      width: 56px;
      height: 56px;
      margin-left: -28px;
    }
  }

  /* ---------- Ventanas: entrada y salida ---------- */
  .promo-dialog,
  .dialog {
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      overlay 0.2s allow-discrete,
      display 0.2s allow-discrete;
  }
  .promo-dialog:not([open]),
  .dialog:not([open]) {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  .promo-dialog::backdrop,
  .dialog::backdrop {
    transition:
      opacity 0.2s ease,
      overlay 0.2s allow-discrete,
      display 0.2s allow-discrete;
  }
  .promo-dialog:not([open])::backdrop,
  .dialog:not([open])::backdrop {
    opacity: 0;
  }
  .dialog[open],
  .promo-dialog[open] {
    animation: dialog-pop 0.5s cubic-bezier(0.2, 1.25, 0.4, 1);
  }
  .dialog[open]::backdrop,
  .promo-dialog[open]::backdrop {
    animation: fade 0.3s ease;
  }

  /* ---------- Popup: la firma se dibuja y el sello la aprueba ---------- */
  .promo-content {
    overflow: clip;
    overflow-clip-margin: 12px;
  }
  .promo-dialog[open] .promo-offer-label {
    animation: label-in 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) 0.2s backwards;
  }
  .promo-dialog[open] .art-doc {
    transform-box: fill-box;
    transform-origin: center;
    animation:
      doc-drop 0.55s cubic-bezier(0.2, 1.1, 0.35, 1) 0.15s backwards,
      doc-jolt 0.3s ease-out 1.72s;
  }
  .promo-dialog[open] .art-line {
    transform-box: fill-box;
    transform-origin: left center;
    animation: grow-x 0.28s ease-out 0.55s backwards;
  }
  .promo-dialog[open] .art-line:nth-of-type(2) {
    animation-delay: 0.68s;
  }
  .promo-dialog[open] .art-line:nth-of-type(3) {
    animation-delay: 0.78s;
  }
  .promo-dialog[open] .art-signature {
    stroke-dasharray: 1;
    animation: draw 0.75s cubic-bezier(0.5, 0, 0.3, 1) 0.92s backwards;
  }
  .promo-dialog[open] .art-stamp {
    transform-box: fill-box;
    transform-origin: center;
    animation: stamp 0.26s cubic-bezier(0.5, 0, 0.9, 0.5) 1.5s backwards;
  }
  .promo-dialog[open] .art-check {
    stroke-dasharray: 1;
    animation: draw 0.26s ease-out 1.76s backwards;
  }
  .promo-dialog[open] .art-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: ring 0.6s ease-out 1.74s;
  }
  .promo-dialog[open] .promo-price {
    animation: rise 0.4s ease 0.3s backwards;
  }
  .promo-dialog[open] .promo-price strong {
    transform-origin: left center;
    animation: price-thump 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) 1.74s;
  }
  .promo-dialog[open] .promo-content > * {
    animation: slide-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.18s backwards;
  }
  .promo-dialog[open] .promo-content > :nth-child(2) {
    animation-delay: 0.25s;
  }
  .promo-dialog[open] .promo-content > :nth-child(3) {
    animation-delay: 0.33s;
  }
  .promo-dialog[open] .promo-content > :nth-child(4) {
    animation: none;
  }
  .promo-dialog[open] .promo-benefits li {
    animation: slide-in 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) 0.42s backwards;
  }
  .promo-dialog[open] .promo-benefits li:nth-child(2) {
    animation-delay: 0.52s;
  }
  .promo-dialog[open] .promo-benefits li:nth-child(3) {
    animation-delay: 0.62s;
  }
  .promo-dialog[open] .promo-content > :nth-child(n + 5) {
    animation-delay: 0.72s;
  }
  .promo-actions .btn::after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 0;
    width: 70px;
    z-index: -1;
    background: rgba(255, 255, 255, 0.55);
    transform: translateX(-120px) skewX(-18deg);
  }
  .promo-dialog[open] .promo-actions .btn::after {
    animation: shine 4.5s ease-in-out 2.1s infinite;
  }

  /* ---------- Fotogramas ---------- */
  @keyframes sweep-right {
    from {
      clip-path: inset(-8% 100% -8% 0);
    }
    to {
      clip-path: inset(-8% 0 -8% 0);
    }
  }
  @keyframes sweep-left {
    from {
      clip-path: inset(-8% 0 -8% 100%);
    }
    to {
      clip-path: inset(-8% 0 -8% 0);
    }
  }
  @keyframes header-down {
    from {
      transform: translateY(-100%);
    }
  }
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
  }
  @keyframes slide-in {
    from {
      opacity: 0;
      transform: translateX(18px);
    }
  }
  @keyframes fade {
    from {
      opacity: 0;
    }
  }
  @keyframes draw {
    from {
      stroke-dashoffset: 1;
      opacity: 0;
    }
    1% {
      opacity: 1;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes grow-x {
    from {
      transform: scaleX(0);
    }
  }
  @keyframes grow-y {
    from {
      transform: scaleY(0);
    }
  }
  @keyframes scene-in {
    from {
      opacity: 0;
      transform: translateY(20px) rotate(1.5deg) scale(0.97);
    }
  }
  @keyframes card-in {
    from {
      opacity: 0;
      transform: translateY(32px) rotate(-1.2deg);
    }
  }
  @keyframes step-pop {
    from {
      opacity: 0;
      transform: scale(0.3);
    }
  }
  @keyframes dialog-pop {
    from {
      opacity: 0;
      transform: translateY(26px) scale(0.92);
    }
  }
  @keyframes label-in {
    from {
      opacity: 0;
      transform: scale(0.6) rotate(-8deg);
    }
  }
  @keyframes doc-drop {
    from {
      opacity: 0;
      transform: translateY(-46px) rotate(9deg) scale(0.9);
    }
  }
  @keyframes doc-jolt {
    30% {
      transform: translateY(4px) rotate(-1deg);
    }
    65% {
      transform: translateY(-1px) rotate(0.4deg);
    }
  }
  @keyframes stamp {
    from {
      opacity: 0;
      transform: scale(2.3) rotate(-18deg);
    }
    60% {
      opacity: 1;
    }
  }
  @keyframes ring {
    from {
      opacity: 0.9;
      transform: scale(1);
    }
    to {
      opacity: 0;
      transform: scale(1.75);
    }
  }
  @keyframes price-thump {
    35% {
      transform: scale(1.1);
    }
  }
  @keyframes shine {
    0% {
      transform: translateX(-120px) skewX(-18deg);
    }
    28%,
    100% {
      transform: translateX(560px) skewX(-18deg);
    }
  }
  @keyframes whatsapp-beat {
    0%,
    40%,
    100% {
      transform: scale(1);
    }
    12% {
      transform: scale(1.09);
    }
    24% {
      transform: scale(1);
    }
    32% {
      transform: scale(1.05);
    }
  }
  @keyframes whatsapp-ring {
    0% {
      opacity: 0.5;
      transform: scale(1);
    }
    60%,
    100% {
      opacity: 0;
      transform: scale(1.6);
    }
  }
  @keyframes whatsapp-wiggle {
    25% {
      transform: rotate(-10deg) scale(1.08);
    }
    60% {
      transform: rotate(8deg) scale(1.08);
    }
  }
}