/* ==========================================================================
   ARRIETA — Capa de animaciones y transiciones
   Se aplica sobre arrieta.css. Todo se desactiva con prefers-reduced-motion.
   ========================================================================== */

:root {
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

html { scroll-behavior: smooth; }
/* deja aire bajo el nav fijo al saltar a anclas */
:target { scroll-margin-top: calc(var(--nav-h) + 20px); }
section[id], header[id] { scroll-margin-top: calc(var(--nav-h) + 10px); }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal--left  { transform: translateX(-46px); }
.reveal--right { transform: translateX(46px); }
.reveal--scale { transform: scale(.9); }
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible { transform: none; }

/* retardos de escalonado */
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }

/* ==========================================================================
   NAVBAR (fija + estado al hacer scroll)
   ========================================================================== */
.site-nav {
    transition: background .35s ease, box-shadow .35s ease, height .35s ease, backdrop-filter .35s ease;
}
.site-nav.is-scrolled {
    height: calc(var(--nav-h) - 12px);
    background: rgba(8, 5, 24, .9);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .38);
    backdrop-filter: blur(12px);
}
.nav-links a { position: relative; }
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: -6px;
    height: 2px;
    background: var(--c-yellow);
    transition: right .28s var(--ease-out);
}
.nav-links a:hover::after { right: 0; }
.btn-cta { transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(247, 197, 27, .4); filter: brightness(1.05); }
.btn-cta:active { transform: translateY(0); }

/* ==========================================================================
   HERO — entrada al cargar + decoraciones flotando
   ========================================================================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes popIn  { from { opacity: 0; transform: scale(.5) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes floaty      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes floatyFlip  { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-12px); } }
@keyframes drift       { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(12px, -12px); } }
@keyframes driftCurl4  { 0%, 100% { transform: rotate(166deg) translate(0, 0); } 50% { transform: rotate(166deg) translate(10px, -10px); } }
@keyframes driftCurl3  { 0%, 100% { transform: rotate(57deg) translate(0, 0); } 50% { transform: rotate(57deg) translate(-8px, 8px); } }
@keyframes driftRev    { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-12px, 10px); } }
@keyframes pulse       { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes glowPulse   { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.hero__mark     { animation: popIn .85s .1s both var(--ease-back); }
.hero__headline { animation: fadeUp .8s .35s both var(--ease-out); }
.hero__cta      { animation: fadeUp .8s .55s both var(--ease-out); }

/* Decoraciones del hero: entrada única (sin loop), solo opacidad
   para no pisar transform en comillas invertidas. */
@keyframes decorIn { from { opacity: 0; } to { opacity: 1; } }
.hero .decor--curl-l       { animation: decorIn 1s .15s both var(--ease-out); }
.hero .decor--curl-r       { animation: decorIn 1s .2s both var(--ease-out); }
.hero .decor--hexagon      { animation: decorIn .9s .35s both var(--ease-out); }
.hero .decor--periwinkle-a { animation: decorIn .9s .45s both var(--ease-out); }
.hero .decor--periwinkle-b { animation: decorIn .9s .5s both var(--ease-out); }
.hero .decor--quote        { animation: decorIn .9s .55s both var(--ease-out); }
.scroll-top                { transition: opacity .25s ease, visibility .25s ease, transform .2s ease; }
.scroll-top:hover          { transform: scale(1.12) rotate(6deg); }

/* ==========================================================================
   ¡HOLA! — decoraciones
   ========================================================================== */
.hola__people .hola__curl:not(.hola__curl--orange) { animation: driftCurl4 11s ease-in-out infinite; }
.hola__people .hola__curl--orange { animation: driftCurl3 9s ease-in-out infinite; }
.hola__people .hola__burst { animation: pulse 3.2s ease-in-out infinite; transform-origin: center; }

/* ==========================================================================
   SERVICIOS — hovers stickers (Marketing + Social Media)
   ========================================================================== */
.btn-portfolio { transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.btn-portfolio:hover .arrow { transform: translateX(4px); }
.btn-portfolio .arrow { transition: transform .2s ease; }

/* Marketing Digital: flecha crece, letras encogen */
.servicios__label--marketing {
    transition: transform .4s var(--ease-back);
    transform-origin: center center;
}
.servicios__icon--arrow {
    transition: transform .4s var(--ease-back);
    transform-origin: left bottom;
}
.servicios__sticker--marketing:hover .servicios__label--marketing,
.servicios__sticker--marketing:focus-within .servicios__label--marketing {
    transform: scale(.86);
}
.servicios__sticker--marketing:hover .servicios__icon--arrow,
.servicios__sticker--marketing:focus-within .servicios__icon--arrow {
    transform: scale(1.85);
}

/* Social Media: letras encogen; bird A sale ↑→ y B entra a su sitio (y al revés al salir) */
.servicios__curve--social {
    transition: transform .4s var(--ease-back);
    transform-origin: 50% 42%;
}
.servicios__icon--bird {
    transition:
        transform .55s var(--ease-back),
        opacity .4s ease;
}
/* A en la plaza; B esperando fuera, en la diagonal opuesta (abajo-izquierda) */
.servicios__icon--bird-a {
    transform: translateX(-50%);
    opacity: 1;
}
.servicios__icon--bird-b {
    transform: translateX(-50%) translate(-120%, 95%);
    opacity: 0;
}
.servicios__sticker--social:hover .servicios__curve--social,
.servicios__sticker--social:focus-within .servicios__curve--social {
    transform: scale(.86);
}
.servicios__sticker--social:hover .servicios__icon--bird-a,
.servicios__sticker--social:focus-within .servicios__icon--bird-a {
    transform: translateX(-50%) translate(120%, -95%);
    opacity: 0;
}
.servicios__sticker--social:hover .servicios__icon--bird-b,
.servicios__sticker--social:focus-within .servicios__icon--bird-b {
    transform: translateX(-50%);
    opacity: 1;
}

/* Diseño Gráfico: swirl antihorario, fondo rojo horario (misma magnitud → imagen 2) */
.servicios__sticker--diseno .servicios__shape,
.servicios__icon--swirl {
    transition: transform .55s var(--ease-back);
}
.servicios__sticker--diseno:hover .servicios__shape,
.servicios__sticker--diseno:focus-within .servicios__shape {
    transform: rotate(34deg);
}
.servicios__sticker--diseno:hover .servicios__icon--swirl,
.servicios__sticker--diseno:focus-within .servicios__icon--swirl {
    transform: translate(-50%, -50%) rotate(-34deg);
}

/* ==========================================================================
   ¿CÓMO LO HACEMOS? — hover del sticker (sin pelear con el translate del stage)
   ========================================================================== */
.step-card__art img { transition: transform .4s var(--ease-back); }
.step-card.is-active:hover .step-card__art img { transform: scale(1.08) rotate(-4deg); }
.step-card--creamos.is-active:hover .step-card__art img { transform: scale(1.08) rotate(-28deg); }
.step-card--ejecutamos.is-active:hover .step-card__art img { transform: scale(1.08) rotate(-26deg); }
.step-card--medimos.is-active:hover .step-card__art img { transform: scale(1.08) rotate(36deg); }
.step-card.is-active {
    box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .35);
}

/* ==========================================================================
   MARCAS — pausa marquee en hover + hover logos
   ========================================================================== */
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track img { transition: transform .25s ease, filter .25s ease; transform-origin: center center; }
.marquee__track img:hover { transform: scale(1.12); filter: brightness(1.12); }

/* ==========================================================================
   NÚMEROS — entrada + expand en hover (figuras vía CSS en arrieta.css)
   ========================================================================== */
.numeros__stage.reveal { opacity: 1; transform: none; }
.numeros__stage:not(.is-visible) .numeros__card {
    opacity: 0 !important;
}
.numeros__stage.is-visible .numeros__card:nth-child(1) { transition-delay: .05s; }
.numeros__stage.is-visible .numeros__card:nth-child(2) { transition-delay: .12s; }
.numeros__stage.is-visible .numeros__card:nth-child(3) { transition-delay: .19s; }
.numeros__stage.is-visible .numeros__card:nth-child(4) { transition-delay: .26s; }
.numeros__stage.is-visible .numeros__card:nth-child(5) { transition-delay: .33s; }
.numeros__stage.is-visible .numeros__card:nth-child(6) { transition-delay: .4s; }
.numeros__stage.is-visible.is-ready .numeros__card { transition-delay: 0s; }
.numeros__stage.is-visible.is-ready .numeros__fig { transition-delay: 0s; }

/* ==========================================================================
   CREEMOS JUNTOS — glow que late
   ========================================================================== */
.creemos { position: relative; }
.creemos::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(46% 42% at 50% 34%, rgba(151, 71, 255, .5), transparent 70%);
    animation: glowPulse 4.5s ease-in-out infinite;
    pointer-events: none;
}
.creemos > .container { position: relative; z-index: 1; }
.creemos__logo { animation: floaty 7s ease-in-out infinite; }

/* ==========================================================================
   BOTONES país — feedback de press
   ========================================================================== */
.country-btn:active { transform: translateY(0) scale(.98); }

/* ==========================================================================
   ACCESIBILIDAD — reduce motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .numeros__stage:not(.is-visible) .numeros__card { opacity: 1 !important; }
    .numeros__fig { opacity: 1 !important; transform: none !important; }
    .hero__intro { opacity: 0 !important; visibility: hidden !important; }
    .hero__smile { opacity: 1 !important; }
    .page-mesh__noise { display: none; }
}