/* =====================================================
   PÁGINA INICIO — estilos exclusivos de esta plantilla.
   Depende de global.css (tokens, botones, header, footer, evidence-frame,
   estados, process-steps, final-cta). Solo se enqueue en template-inicio.php.
   ===================================================== */


/* ---------- HERO FULL-BLEED ---------- */
.hero-full{position:relative;min-height:64vh;display:flex;align-items:flex-end;overflow:hidden;}
.hero-full-media{position:absolute;inset:0;border-radius:0;min-height:0;display:block !important;padding:0 !important;}
.hero-full-media img{width:100%;height:100%;object-fit:cover;}
.hero-full-media span{
  position:absolute;top:8px;right:10px;font-size:10px;letter-spacing:.02em;color:rgba(10,24,48,.55);
  background:rgba(255,255,255,.6);padding:.2rem .5rem;border-radius:var(--radius-sm);max-width:160px;line-height:1.3;text-align:right;
}
.hero-full-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,18,36,.86) 0%,rgba(8,18,36,.45) 55%,rgba(8,18,36,.15) 100%);}
.hero-full-content{position:relative;z-index:1;color:#fff;padding-block:var(--sp-5) var(--sp-4);}
.hero-full h1{font-size:clamp(1.9rem,5.2vw,3.25rem);max-width:18ch;font-weight:700;color:#fff;}
.hero-full-content p{font-size:var(--text-lg);color:#D8E0EC;max-width:52ch;}
.hero-full-ctas{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2);}
@media (min-width:640px){ .hero-full{min-height:74vh;} }


/* ---------- BARRA DE ESTADÍSTICAS ---------- */
.stat-bar{background:var(--navy-950);padding:var(--sp-4) 0;}
.stat-bar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);text-align:center;}
.stat-big strong{display:block;font-family:var(--font-mono);font-size:var(--text-2xl);color:var(--amber-500);font-weight:600;}
.stat-big span{font-size:var(--text-xs);color:#A9B7CA;text-transform:uppercase;letter-spacing:.04em;}
@media (min-width:640px){ .stat-bar-grid{grid-template-columns:repeat(4,1fr);} }

/* ---------- MÓDULOS DE CAMINO ---------- */
/* La proporción la define paginas.css (16:9, la real de las fotos). Acá se
   forzaba 4:3 y, al cargar después, ganaba: de ahí la foto comprimida. */

/* ---------- Selector de síntomas ---------- */

.symptom-result{margin:var(--sp-3) 0;padding:var(--sp-3);background:var(--amber-100);border-radius:var(--radius-lg);border:1px solid #F0D9A0;}
.symptom-result[hidden]{display:none;}
.symptom-result h4{color:var(--navy-950);font-size:var(--text-lg);margin-bottom:.4rem;}
.symptom-result p{color:var(--navy-800);margin-bottom:.6rem;}

.evidence-showcase{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--gray-200);}
.ev-columns{display:grid;grid-template-columns:1fr;gap:var(--sp-3);align-items:start;margin:var(--sp-2) 0;}
.ev-columns > *{min-width:0;}
@media (min-width:760px){ .ev-columns{grid-template-columns:1fr 1fr;} }

/* ---------- Calculadora de mantención ---------- */
.km-calculator{max-width:520px;margin-top:var(--sp-3);}
.km-calculator label{display:block;font-weight:600;margin-bottom:.75rem;}
.km-calculator input[type="range"]{width:100%;height:6px;border-radius:99px;background:var(--gray-200);appearance:none;margin-bottom:.75rem;}
.km-calculator input[type="range"]::-webkit-slider-thumb{appearance:none;width:24px;height:24px;border-radius:50%;background:var(--amber-500);border:3px solid var(--navy-950);cursor:pointer;}
.km-calculator input[type="range"]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--amber-500);border:3px solid var(--navy-950);cursor:pointer;}
.km-value{font-family:var(--font-mono);font-size:var(--text-xl);color:var(--navy-950);font-weight:600;margin-bottom:var(--sp-2);}
.km-result{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3);}
.km-result h4{font-size:var(--text-base);color:var(--navy-950);margin-bottom:.3rem;}
.km-result p{margin:0;font-size:var(--text-sm);}

/* ---------- SB LAB TEASER ---------- */
.sb-lab-teaser{padding:var(--sp-6) 0;background:var(--gray-50);}
.sb-lab-inner{display:flex;flex-direction:column;gap:var(--sp-3);}
.sb-lab-inner h2{font-size:clamp(1.4rem,3.4vw,2rem);color:var(--navy-950);}
@media (min-width:900px){ .sb-lab-inner{flex-direction:row-reverse;align-items:center;gap:var(--sp-5);} .sb-lab-inner > *{flex:1;} }


/* ---------- PRE-COMPRA ---------- */
.precompra-teaser{padding:var(--sp-5) 0;background:var(--navy-100);}
.precompra-inner{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start;}
.precompra-inner > *{min-width:0;}
.precompra-inner h2{font-size:clamp(1.3rem,3.2vw,1.75rem);color:var(--navy-950);}
@media (min-width:640px){ .precompra-inner{flex-direction:row;align-items:center;justify-content:space-between;} }

/* Precio de referencia dentro del calculador de mantención. */
.km-desde{font-family:var(--font-mono);font-size:var(--text-lg);color:var(--navy-950);margin:.2rem 0 .5rem;}
.km-desde strong{color:var(--amber-600);}
.km-nota{font-size:var(--text-sm);color:var(--ink-600);margin-top:var(--sp-2);max-width:56ch;}
.km-nota a{color:var(--navy-800);text-decoration:underline;}

/* El marco de evidencia de la portada lleva foto: se recorta, no se estira. */
.evidence-showcase .evidence-frame{aspect-ratio:4/3;overflow:hidden;position:relative;}
.evidence-showcase .evidence-frame img{width:100%;height:100%;object-fit:cover;display:block;}