/* =====================================================================
   CB-ANIM — Sistema de animaciones compartido de CarBaratos
   Enlázalo en cualquier página con:
     <link rel="stylesheet" href="cb-anim.css">
     <script src="cb-anim.js"></script>
   Y añade la clase "cb-reveal" a las secciones que quieras que aparezcan
   al hacer scroll, y "cb-stagger" a las cuadrículas de tarjetas dentro
   de ellas para que aparezcan una a una en vez de todas de golpe.
   ===================================================================== */

/* Entrada suave para cabeceras/hero al cargar la página (opcional,
   añade la clase "cb-intro" al título/subtítulo/tarjeta principal) */
.cb-intro{opacity:0; animation:cbFadeUp .7s ease forwards;}
.cb-intro-2{opacity:0; animation:cbFadeUp .7s ease forwards; animation-delay:.15s;}
.cb-intro-3{opacity:0; animation:cbFadeUp .7s ease forwards; animation-delay:.3s;}
@keyframes cbFadeUp{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}

/* Aparición suave de secciones y tarjetas al hacer scroll */
.cb-reveal{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease;}
.cb-reveal.cb-show{opacity:1; transform:translateY(0);}
.cb-reveal.cb-show .cb-stagger > *{opacity:0; transform:translateY(16px); animation:cbFadeUp .55s ease forwards;}
.cb-reveal.cb-show .cb-stagger > *:nth-child(1){animation-delay:.05s;}
.cb-reveal.cb-show .cb-stagger > *:nth-child(2){animation-delay:.11s;}
.cb-reveal.cb-show .cb-stagger > *:nth-child(3){animation-delay:.17s;}
.cb-reveal.cb-show .cb-stagger > *:nth-child(4){animation-delay:.23s;}
.cb-reveal.cb-show .cb-stagger > *:nth-child(5){animation-delay:.29s;}
.cb-reveal.cb-show .cb-stagger > *:nth-child(6){animation-delay:.35s;}
.cb-reveal.cb-show .cb-stagger > *:nth-child(n+7){animation-delay:.4s;}

/* Botones y tarjetas con un poco más de vida al pulsarlos/pasar el ratón.
   Cubre las clases más comunes usadas en toda la web; si una página usa
   otro nombre de clase para sus tarjetas, añádelo aquí también. */
.btn-pill, .btn-cta, .btn-outline, .btn-plan, .btn-submit,
.cat-card, .svc-card, .life-card, .chip, .process-tab,
.listing-card, .car-card, .plan-card, .faq-item, .step-card,
.pg-card, .of-opt, .qz-opt{
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-pill:active, .btn-cta:active, .btn-outline:active, .btn-plan:active, .btn-submit:active{transform:scale(.96);}
.chip:active{transform:scale(.95);}

/* Contenido que cambia dinámicamente (pestañas, resultados de filtro):
   añade la clase "cb-fade" al contenedor para que cada vez que su
   contenido se reemplace por JS, aparezca con un fundido suave. */
.cb-fade{animation:cbFadeIn .3s ease;}
@keyframes cbFadeIn{from{opacity:0;} to{opacity:1;}}

/* Para listas que se repintan por JS constantemente (resultados de
   catálogo, listados de mensajes...): sus tarjetas se animan solas cada
   vez que aparecen, sin depender de hacer scroll ni de nada más. Basta
   con poner esta clase en el contenedor padre. */
.cb-stagger-always > *{opacity:0; transform:translateY(14px); animation:cbFadeUp .5s ease forwards;}
.cb-stagger-always > *:nth-child(1){animation-delay:.03s;}
.cb-stagger-always > *:nth-child(2){animation-delay:.07s;}
.cb-stagger-always > *:nth-child(3){animation-delay:.11s;}
.cb-stagger-always > *:nth-child(4){animation-delay:.15s;}
.cb-stagger-always > *:nth-child(5){animation-delay:.19s;}
.cb-stagger-always > *:nth-child(6){animation-delay:.23s;}
.cb-stagger-always > *:nth-child(n+7){animation-delay:.26s;}

@media (prefers-reduced-motion: reduce){
  .cb-intro, .cb-intro-2, .cb-intro-3, .cb-reveal, .cb-reveal .cb-stagger > *, .cb-fade, .cb-stagger-always > *{
    animation:none !important; transition:none !important; opacity:1 !important; transform:none !important;
  }
}