/* ============================================================
   SKIN "fintech claro / premium" — capa sobre site.css
   Estructura moderna en ambos temas; paleta clara SOLO en claro.
   No toca el HTML ni la lógica. Reversible: quitar el <link>.
   ============================================================ */

/* Tokens de las franjas (hero / page-header):
   claras por defecto; oscuras cuando el tema es oscuro (explícito o auto+SO oscuro). */
:root{
  --sk-band-bg:#EEF3FA;
  --sk-band-ink:#0E1B2E;
  --sk-band-accent:#0B7A47;
  --sk-navy:#24456E;
  --sk-hair:#E4EBF3;
  --sk-sh-sm:0 1px 2px rgba(16,40,70,.06);
  --sk-sh:0 12px 32px rgba(16,40,70,.10);
  --sk-r:18px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sk-band-bg:linear-gradient(135deg,#1a1a2e 0,#2f4f76 100%);
    --sk-band-ink:#ffffff;
    --sk-band-accent:#90ee90;
  }
}
:root[data-theme="dark"]{
  --sk-band-bg:linear-gradient(135deg,#1a1a2e 0,#2f4f76 100%);
  --sk-band-ink:#ffffff;
  --sk-band-accent:#90ee90;
}

/* ---------- Estructura moderna (ambos temas) ---------- */
.section-title,.hero h1,.page-header h1{letter-spacing:-.02em;font-weight:700}
.tcc-stat .num{letter-spacing:-.02em}

/* Botones tipo pill + micro-interacción */
.btn-whatsapp,.btn-catalogo,.btn-form-link,.btn-whatsapp-lg{
  border-radius:999px!important;
  transition:transform .18s ease,box-shadow .18s ease}
.btn-whatsapp:hover,.btn-form-link:hover,.btn-whatsapp-lg:hover{transform:translateY(-2px)}

/* Tarjetas: radio grande + sombra suave + elevación al hover */
.step-card,.benefit-card,.requisito-item,.info-card,.card-auto,.filtros-card{
  border-radius:var(--sk-r)!important;
  box-shadow:var(--sk-sh-sm)!important;
  transition:transform .2s ease,box-shadow .2s ease!important}
.benefit-card:hover,.step-card:hover,.info-card:hover,.card-auto:hover{
  transform:translateY(-4px)!important;
  box-shadow:var(--sk-sh)!important}

/* Formularios: inputs redondeados + anillo de foco de marca */
.form-control,.form-select{border-radius:12px!important}
.form-control:focus,.form-select:focus{
  border-color:var(--sk-navy)!important;
  box-shadow:0 0 0 .2rem rgba(36,69,110,.15)!important}

/* Acordeón FAQ: tarjetas separadas y redondeadas */
.accordion-item{border-radius:14px!important;overflow:hidden;margin-bottom:10px}
.accordion-button{font-weight:600}

/* ---------- Franjas hero / page-header (claro vs oscuro por token) ---------- */
.hero,.page-header{background:var(--sk-band-bg)!important;color:var(--sk-band-ink)!important}
.hero h1,.hero p,.page-header h1,.page-header p{color:var(--sk-band-ink)!important}
.hero .btn-catalogo{color:var(--sk-band-ink)!important;border-color:var(--sk-band-ink)!important;background:transparent!important}
.hero [style*="90ee90"]{color:var(--sk-band-accent)!important}

@media (prefers-reduced-motion: reduce){
  .btn-whatsapp,.btn-catalogo,.btn-form-link,.btn-whatsapp-lg,
  .step-card,.benefit-card,.requisito-item,.info-card,.card-auto{transition:none!important}
}

/* ============ Mejoras modernas 2 (firma hero + catálogo + movimiento) ============ */

/* -- Firma de cuota en el hero (tarjeta inyectada por JS) -- */
.hero .col-lg-5{position:relative}
.tcc-hero-cuota{position:absolute;left:10px;bottom:-16px;background:#fff;border:1px solid var(--sk-hair);
  border-radius:18px;padding:13px 16px;box-shadow:var(--sk-sh);min-width:190px;text-align:left;z-index:3}
.tcc-hero-cuota .l{font-size:.66rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#5C6B7E}
.tcc-hero-cuota .a{display:flex;align-items:baseline;gap:5px;margin-top:2px}
.tcc-hero-cuota .a b{font-size:1.55rem;font-weight:700;color:var(--sk-navy);letter-spacing:-.02em}
.tcc-hero-cuota .a span{font-size:.8rem;color:#5C6B7E}
.tcc-hero-cuota .wk{display:flex;gap:4px;margin-top:10px}
.tcc-hero-cuota .wk i{flex:1;height:6px;border-radius:3px;background:#E4EBF3}
.tcc-hero-cuota .wk i.on{background:linear-gradient(90deg,#12B76A,#7BE0A8)}
.tcc-hero-cuota .n{font-size:.68rem;color:#0B7A47;font-weight:600;margin-top:7px}
@media(max-width:820px){.tcc-hero-cuota{left:auto;right:10px;bottom:-14px;min-width:170px}}

/* -- Catálogo: tarjetas modernas -- */
.card-auto{overflow:hidden}
.card-auto img{transition:transform .45s ease;will-change:transform}
.card-auto:hover img{transform:scale(1.06)}
.precio-semanal{display:inline-block;background:rgba(18,183,106,.12);color:#0B7A47!important;
  font-weight:700;padding:.28rem .7rem;border-radius:999px}
.precio-semanal small,.precio-semanal .text-muted{color:#0B7A47!important;opacity:.72;font-weight:600}
.btn-favorito{transition:transform .18s ease}
.btn-favorito:active{transform:scale(.85)}
.btn-favorito.activo{animation:tccHeart .32s ease}
@keyframes tccHeart{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* -- Movimiento: entrada del hero + transiciones entre páginas -- */
@keyframes tccUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero h1{animation:tccUp .55s cubic-bezier(.2,.7,.2,1) both}
.hero p{animation:tccUp .55s cubic-bezier(.2,.7,.2,1) .07s both}
.hero .d-flex{animation:tccUp .55s cubic-bezier(.2,.7,.2,1) .14s both}
@view-transition{navigation:auto}

@media (prefers-reduced-motion: reduce){
  .hero h1,.hero p,.hero .d-flex,.card-auto img,.btn-favorito{animation:none!important;transition:none!important}
}

/* Filtros: que las celdas no se estiren a la altura de la celda "Año" (2 selects),
   así la etiqueta flotante de "Combustible" no queda desalineada. */
.filtros-card .row.g-3{align-items:flex-start}