/* ===================================================================
   CrediAyudarte — Capa de movimiento y profundidad
   Se carga DESPUÉS de styles.css y solo añade: no reemplaza nada.
   Para desactivarla por completo, quita el <link> de motion.css.

   Reglas que se respetan en todo el archivo:
   · Solo se animan transform, opacity y filter (no provocan reflow).
   · Nada se mueve antes de que el usuario haga scroll hacia ello.
   · prefers-reduced-motion apaga TODO el movimiento (final del archivo).
   =================================================================== */

:root{
  /* Curvas de animación con carácter */
  --ease-out-soft: cubic-bezier(.16,1,.3,1);
  --ease-spring:   cubic-bezier(.34,1.4,.5,1);
  --ease-glide:    cubic-bezier(.4,0,.2,1);

  /* Tintes de marca para las auroras (mismos verdes/amarillo del sistema) */
  --aurora-verde:    rgba(124,180,29,.26);
  --aurora-lima:     rgba(154,203,44,.20);
  --aurora-amarillo: rgba(249,194,5,.18);

  /* Lo escribe el JS: 0 → 1 según el avance del scroll */
  --scroll-progreso: 0;
}

/* ===================================================================
   1. GRANO — textura muy sutil que le quita el plano al blanco
   =================================================================== */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================================================================
   2. BARRA DE PROGRESO DE LECTURA — en el borde inferior del header
   =================================================================== */
.header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:linear-gradient(90deg,var(--verde-marca),#9ACB2C 55%,var(--amarillo));
  transform:scaleX(var(--scroll-progreso));
  transform-origin:0 50%;
  border-radius:0 3px 3px 0;
  will-change:transform;
}

/* ===================================================================
   3. HEADER QUE SE COMPACTA AL BAJAR
   =================================================================== */
.header{transition:box-shadow .3s var(--ease), background .3s var(--ease)}
.header__inner{transition:min-height .35s var(--ease-glide), padding .35s var(--ease-glide)}
.header__logo img{transition:transform .35s var(--ease-glide), height .35s var(--ease-glide)}

.header.is-stuck{background:rgba(255,255,255,.93); backdrop-filter:saturate(180%) blur(18px)}
.header.is-stuck .header__inner{min-height:58px; padding:.3rem 0}
.header.is-stuck .header__logo img{height:38px}

/* Subrayado del menú: se conserva el de styles.css, pero crece con
   transform (más suave que animar el width) y en la dirección del cursor */
.nav a::after{
  width:100%;
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .35s var(--ease-out-soft);
}
.nav a:hover::after,
.nav a:focus-visible::after{width:100%; transform:scaleX(1); transform-origin:0 50%}

/* ===================================================================
   4. AURORA DEL HERO — capa de color que respira detrás del titular
   =================================================================== */
.hero::before,
.page-hero::before,
.form-wrap::before{
  content:"";
  position:absolute; inset:-25% -10% auto -10%; height:130%;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 44% at 18% 28%, var(--aurora-verde), transparent 62%),
    radial-gradient(32% 38% at 82% 18%, var(--aurora-lima), transparent 60%),
    radial-gradient(40% 40% at 62% 82%, var(--aurora-amarillo), transparent 62%);
  filter:blur(48px);
  opacity:.9;
  animation:auroraDeriva 26s ease-in-out infinite alternate;
}
@keyframes auroraDeriva{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(-3%,2%,0) scale(1.09)}
  100%{transform:translate3d(3%,-2%,0) scale(1.03)}
}

/* Los círculos de marca del hero, con un pulso de luz propio */
.brand-circle{transition:opacity .6s var(--ease)}
.hero .brand-circle{animation-duration:11s}

/* ===================================================================
   5. ENTRADA DEL HERO — escalonada, una sola vez, al cargar
   =================================================================== */
.hero__copy > *,
.page-hero__inner > *,
.pitch-info > *{
  animation:entradaHero .62s var(--ease-out-soft) both;
}
.hero__copy > :nth-child(1), .page-hero__inner > :nth-child(1), .pitch-info > :nth-child(1){animation-delay:.03s}
.hero__copy > :nth-child(2), .page-hero__inner > :nth-child(2), .pitch-info > :nth-child(2){animation-delay:.08s}
.hero__copy > :nth-child(3), .page-hero__inner > :nth-child(3), .pitch-info > :nth-child(3){animation-delay:.13s}
.hero__copy > :nth-child(4), .page-hero__inner > :nth-child(4), .pitch-info > :nth-child(4){animation-delay:.18s}
.hero__copy > :nth-child(5), .page-hero__inner > :nth-child(5), .pitch-info > :nth-child(5){animation-delay:.23s}
.hero__copy > :nth-child(6), .pitch-info > :nth-child(6){animation-delay:.28s}
@keyframes entradaHero{
  from{opacity:0; transform:translateY(22px)}
  to  {opacity:1; transform:none}
}

/* ===================================================================
   6. TITULARES QUE ENTRAN PALABRA POR PALABRA
   El JS envuelve cada palabra en <span class="pal">.
   =================================================================== */
.pal{
  display:inline-block;
  opacity:0;
  transform:translateY(.5em) rotate(1.5deg);
  transition:opacity .5s var(--ease-out-soft), transform .55s var(--ease-out-soft);
  transition-delay:var(--pal-retardo,0ms);
  will-change:transform,opacity;
}
.pal-lista{opacity:0; transition:opacity .7s var(--ease); transition-delay:var(--pal-retardo,0ms)}
.titulo-anim.is-visible .pal,
.titulo-anim.is-visible .pal-lista{opacity:1; transform:none}
.titulo-anim.is-visible .pal{will-change:auto}

/* El resaltador amarillo se "pinta" al aparecer */
mark.mk-yellow{background-repeat:no-repeat}
.motion-viva mark.mk-yellow{
  background-size:0% 100%;
  transition:background-size .85s var(--ease-out-soft) .35s;
}
.motion-viva .titulo-anim.is-visible mark.mk-yellow{background-size:100% 100%}

/* El verde de los titulares entra con un barrido de luz */
.hl-green{
  background:linear-gradient(90deg,var(--verde-brillante),#8CC22B 45%,var(--verde-brillante));
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.titulo-anim.is-visible .hl-green{animation:barridoLuz 2.6s var(--ease-glide) .5s}
@keyframes barridoLuz{
  0%{background-position:120% 0}
  100%{background-position:-60% 0}
}

/* ===================================================================
   7. REVELADO AL SCROLL — más suave, con desenfoque
   =================================================================== */
.reveal{
  transition:opacity .8s var(--ease-out-soft), transform .8s var(--ease-out-soft), filter .8s var(--ease-out-soft);
  transition-delay:var(--rev-retardo,0ms);
  filter:blur(6px);
}
.reveal.is-visible{filter:blur(0)}
.reveal--zoom{transform:scale(.94) translateY(18px)}

/* ===================================================================
   8. TARJETAS — luz que sigue al cursor + inclinación 3D
   El JS escribe --mx/--my (posición del cursor dentro de la tarjeta).
   =================================================================== */
.who-card, .svc-card, .step, .q-card, .perfil-card{
  position:relative;
}
.who-card::before, .svc-card::before, .step::before, .perfil-card::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(124,180,29,.13), transparent 65%);
  opacity:0; transition:opacity .35s var(--ease);
  pointer-events:none; z-index:0;
}
.who-card > *, .svc-card > *, .perfil-card > *,
.step > :not(.step__num){position:relative; z-index:1}

@media (hover:hover) and (pointer:fine){
  .who-card:hover::before, .svc-card:hover::before, .step:hover::before, .perfil-card:hover::before{opacity:1}
  .tarjeta-3d{
    transition:transform .35s var(--ease-out-soft), box-shadow .35s var(--ease);
    will-change:transform;
  }
  .tarjeta-3d.is-tilting{
    transform:perspective(900px)
              rotateX(calc(var(--tilt-y,0) * 1deg))
              rotateY(calc(var(--tilt-x,0) * 1deg))
              translateY(-8px);
    box-shadow:var(--shadow-lift);
  }
}

/* Acento amarillo que se dibuja sobre el borde verde al aparecer.
   Va metido 24px por lado: es el tramo recto que deja el radio de 24px. */
.svc-card::after{
  content:""; position:absolute; top:-4px; left:24px; right:24px; height:4px;
  background:var(--amarillo);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .7s var(--ease-out-soft) .15s;
}
.svc-card.is-visible::after{transform:scaleX(1)}
.svc-card:hover .svc-card__ico{transform:translateY(-4px) rotate(-6deg) scale(1.06)}
.svc-card__ico{transition:transform .4s var(--ease-spring), box-shadow .4s var(--ease)}

/* ===================================================================
   9. PROCESO — hilo que se dibuja uniendo los 4 pasos
   =================================================================== */
.steps{position:relative}
.steps::before{
  content:"";
  position:absolute; top:0; left:6%; right:6%; height:3px;
  background:linear-gradient(90deg,var(--amarillo),var(--verde-marca));
  border-radius:3px; opacity:.35;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1.4s var(--ease-out-soft) .2s;
  z-index:0;
}
.steps.is-drawn::before{transform:scaleX(1)}
.step__num{transition:transform .4s var(--ease-spring), box-shadow .4s var(--ease)}
.step.is-visible .step__num{animation:saltoNum .7s var(--ease-spring) both}
@keyframes saltoNum{
  0%{transform:scale(.3) rotate(-18deg); opacity:0}
  60%{transform:scale(1.12) rotate(4deg); opacity:1}
  100%{transform:none; opacity:1}
}

/* ===================================================================
   10. CIFRAS QUE CUENTAN — el JS anima el número
   =================================================================== */
.hero__mini strong, .testimonios__stats strong{
  font-variant-numeric:tabular-nums;
  display:inline-block;
}

/* ===================================================================
   11. TIRA DE CONFIANZA — desfile continuo en móvil
   =================================================================== */
.trust-strip{position:relative}
.trust-strip::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
  transform:translateX(-100%);
  animation:brilloTira 6s var(--ease-glide) infinite;
}
@keyframes brilloTira{
  0%,55%{transform:translateX(-100%)}
  100%  {transform:translateX(100%)}
}
.trust-strip.es-desfile{overflow:hidden}
.trust-strip.es-desfile .trust-strip__inner{
  flex-wrap:nowrap; justify-content:flex-start;
  width:max-content;
  animation:desfile 26s linear infinite;
}
.trust-strip.es-desfile .trust-strip__inner span{white-space:nowrap}
.trust-strip.es-desfile:hover .trust-strip__inner{animation-play-state:paused}
@keyframes desfile{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

/* ===================================================================
   12. PREGUNTAS — acordeón que se despliega con suavidad
   =================================================================== */
:root{interpolate-size:allow-keywords}
@supports selector(::details-content){
  .faq__item::details-content{
    block-size:0; overflow:hidden;
    transition:block-size .42s var(--ease-out-soft), content-visibility .42s allow-discrete;
    content-visibility:hidden;
  }
  .faq__item[open]::details-content{block-size:auto; content-visibility:visible}
  .faq__body{animation:none}
}
.faq__item{transition:box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease)}
.faq__item summary{transition:color .25s var(--ease), background .25s var(--ease)}
.faq__item summary:hover{color:var(--verde-texto); background:rgba(124,180,29,.05)}
.faq__item summary::after{transition:transform .35s var(--ease-spring), color .25s var(--ease)}
.faq__item[open]{transform:translateX(2px)}
.faq__item[open] summary::after{transform:rotate(135deg)}

/* ===================================================================
   13. BOTONES — brillo, empuje y latido en la llamada principal
   =================================================================== */
.btn{transition:transform .25s var(--ease-spring), box-shadow .3s var(--ease), background .25s var(--ease)}
.btn:hover{transform:translateY(-4px)}
.btn:active{transform:translateY(-1px) scale(.98)}
.btn .ico{transition:transform .3s var(--ease-spring)}
.btn:hover .ico{transform:translateX(3px)}
.btn-block:hover .ico{transform:translateX(0) scale(1.1)}

.btn-primary.btn-lg{animation:latidoCta 3.6s var(--ease-glide) infinite}
.btn-primary.btn-lg:hover{animation-play-state:paused}
@keyframes latidoCta{
  0%,100%{box-shadow:0 16px 30px -14px rgba(124,180,29,.95), 0 0 0 0 rgba(124,180,29,.30)}
  55%    {box-shadow:0 20px 38px -14px rgba(124,180,29,1),   0 0 0 14px rgba(124,180,29,0)}
}

/* ===================================================================
   14. WHATSAPP FLOTANTE — entra, saluda cada cierto tiempo, y explica
   =================================================================== */
.wa-float{
  animation:entradaWa .7s var(--ease-spring) 1.1s both;
  transition:transform .3s var(--ease-spring), box-shadow .3s var(--ease);
}
@keyframes entradaWa{
  from{opacity:0; transform:scale(.4) translateY(28px)}
  to  {opacity:1; transform:none}
}
.wa-float .ico{transition:transform .3s var(--ease-spring)}
.wa-float:hover{transform:scale(1.09) rotate(-6deg)}
.wa-float.saluda{animation:saludoWa 1.1s var(--ease-glide)}
@keyframes saludoWa{
  0%,100%{transform:none}
  15%{transform:rotate(-13deg) scale(1.06)}
  30%{transform:rotate(11deg) scale(1.06)}
  45%{transform:rotate(-9deg) scale(1.04)}
  60%{transform:rotate(6deg)}
  75%{transform:rotate(-3deg)}
}
.wa-float::before{
  content:"Escríbenos por WhatsApp";
  position:absolute; right:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(8px);
  background:var(--tinta); color:#fff;
  font-family:var(--f-head); font-weight:600; font-size:.8rem;
  padding:.5rem .85rem; border-radius:10px; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease-out-soft);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.5);
}
@media (hover:hover) and (pointer:fine){
  .wa-float:hover::before{opacity:1; transform:translateY(-50%) translateX(0)}
}

/* ===================================================================
   15. IMÁGENES Y GALERÍA — acercamiento contenido
   =================================================================== */
.hero__card{transition:transform .5s var(--ease-out-soft), box-shadow .4s var(--ease)}
.collage figure{transition:transform .5s var(--ease-out-soft), box-shadow .5s var(--ease)}
.collage:hover .tc1{transform:translateY(-10px) rotate(-1.5deg)}
.collage:hover .tc2{transform:translateY(-16px) rotate(1.5deg)}
.collage:hover .tc3{transform:translateY(-6px) rotate(-1deg)}
.collage .tc-badge{transition:transform .4s var(--ease-spring)}
.collage:hover .tc-badge{transform:scale(1.06) translateY(-4px)}

.masonry__item img, .masonry__item video,
.tstrip__item img, .proof__item img{transition:transform .6s var(--ease-out-soft)}
.masonry__item:hover img, .masonry__item:hover video,
.tstrip__item:hover img, .proof__item:hover img{transform:scale(1.06)}
.play-badge span{transition:transform .35s var(--ease-spring), background .3s var(--ease)}
.masonry__item:hover .play-badge span,
.tstrip__item:hover .play-badge span{transform:scale(1.14)}

/* ===================================================================
   16. ETIQUETAS DE SECCIÓN — punto que late
   =================================================================== */
.tag{position:relative; overflow:hidden}
.tag::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);
  transform:translateX(-100%);
}
.section__head.is-visible .tag::before{animation:brilloTag 1.6s var(--ease-glide) .3s}
@keyframes brilloTag{to{transform:translateX(100%)}}

/* ===================================================================
   17. FRANJA DE LLAMADA — profundidad y burbuja que respira
   =================================================================== */
.cta-band::after{
  content:""; position:absolute; z-index:0;
  width:420px; height:420px; border-radius:50%;
  right:-120px; top:-160px;
  background:radial-gradient(circle,rgba(255,255,255,.20),transparent 65%);
  animation:drift 14s ease-in-out infinite;
}
.cta-band__inner{position:relative; z-index:2}
.cta-band__chat{transition:transform .4s var(--ease-spring)}
.cta-band:hover .cta-band__chat{transform:scale(1.08) rotate(-6deg)}

/* ===================================================================
   18. ACCESIBILIDAD — foco visible y consistente
   =================================================================== */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--verde-marca);
  outline-offset:3px;
  border-radius:6px;
}
.btn:focus-visible{outline-offset:4px}

/* ===================================================================
   19. RENDIMIENTO — no pintar lo que está muy lejos del viewport
   =================================================================== */
.section.fb, .section.codigo, #ubicacion, #facebook{
  content-visibility:auto;
  contain-intrinsic-size:auto 700px;
}

/* ===================================================================
   20. INTERRUPTOR GENERAL — si el sistema pide menos movimiento,
       se apaga todo y la página queda estática y legible.
   =================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .pal,.pal-lista{opacity:1 !important; transform:none !important}
  mark.mk-yellow{background-size:100% 100% !important}
  .reveal{filter:none !important}
  .steps::before{transform:scaleX(1) !important}
  .svc-card::after{transform:scaleX(1) !important}
  .header::after{transform:scaleX(0) !important}
  body::after{display:none}
  .hero::before,.page-hero::before,.form-wrap::before{animation:none}
  .hl-green{
    -webkit-text-fill-color:currentColor;
    background:none;
    color:var(--verde-brillante);
  }
}