/* =====================================================================
 * OmnIA · los casos (/casos)
 *
 * De donde sale: `fuentes/casos-omnia.html`,
 * que venía como un archivo suelto con todo adentro.
 *
 * ⚠ DOS COSAS QUE HUBO QUE CAMBIAR PARA QUE ANDE PUBLICADO
 *
 * 1. Esto estaba en un <style>. La CSP del sitio manda `style-src 'self'` sin
 *    unsafe-inline: un <style> NO se aplica y la página sale sin diseño, sin
 *    ningún error que lo explique. Por eso vive en un .css.
 *
 * 2. TODO está acotado bajo `.caso-pg`. El archivo original usaba nombres muy
 *    genericos —.num .cta .cierre .demo .nota .b .cab .dos — que ya existen en
 *    estilos.css. Cargados juntos sin acotar, se pisan, y eso se ve como un bug
 *    rarísimo en otra parte del sitio. Si agregás una regla acá, va acotada.
 *
 * Los tokens NO se redeclaran: salen de tokens.css. Las dos únicas variables
 * propias de esta página son las del papel del remito, y van abajo.
 * ===================================================================== */

/* El papel del remito escaneado: es el único lugar del sitio con fondo claro,
   porque un remito es papel. No se usa en ningún otro lado. */
:root{ --papel:#f2ede2; --tinta:#2b2620 }

.caso-pg{max-width:1240px; margin:0 auto; padding:var(--sp-7) var(--sp-5) var(--sp-8)}
.caso-pg .num{font-variant-numeric:tabular-nums}
.caso-pg .eyebrow{font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
    letter-spacing:.22em; text-transform:uppercase; color:var(--cyan)}
/* ------------------------------------------------------------ cabecera */
.caso-pg header{display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
    padding-bottom:var(--sp-6); border-bottom:1px solid var(--line)}
.caso-pg .iso{width:52px; height:52px; flex-shrink:0}
.caso-pg .marca{font-family:var(--tit); font-size:var(--fs-2xl); font-weight:800;
    letter-spacing:-.02em; line-height:1; color:var(--ink)}
.caso-pg .marca b{color:var(--gold); font-weight:800}
.caso-pg .marca small{display:block; font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
    letter-spacing:.22em; color:var(--cyan); margin-top:var(--sp-1)}
.caso-pg .intro{margin:var(--sp-7) 0 var(--sp-8)}
.caso-pg .intro h1{font-size:clamp(34px, 7vw, 64px); font-weight:800; max-width:22ch}
.caso-pg .intro h1 b{color:var(--gold); font-weight:800}
.caso-pg .intro p{font-size:var(--fs-xl); color:var(--muted); margin-top:var(--sp-4); max-width:60ch}
/* --------------------------------------------------------------- casos */
/* ⚠ «ficha» y no «caso»: estilos.css ya tiene un `.caso` —las tarjetas de la
   home— y esta pagina carga las dos hojas. Con el nombre viejo se colaban
   display:flex, flex-direction:column y border-radius de la otra hoja.
   Medido antes de renombrar: el <section> salía con display flex sin que
   nadie de acá se lo pidiera. */
.caso-pg .ficha{padding:var(--sp-8) 0; border-top:1px solid var(--line)}
.caso-pg .ficha:first-of-type{border-top:0}
.caso-pg .cab{display:grid; gap:var(--sp-3); margin-bottom:var(--sp-6); max-width:62ch}
.caso-pg .cab h2{font-size:clamp(26px, 4.2vw, 40px); font-weight:800}
.caso-pg .cab .quien{font-size:var(--fs-md); color:var(--subtle)}
.caso-pg .cab p{color:var(--muted)}
.caso-pg .cab p b{color:var(--ink); font-weight:600}
.caso-pg .dos{display:grid; gap:var(--sp-6); align-items:start}
@media(min-width:980px){
  .caso-pg .dos{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}
/* El antes: una lista sobria. No es una tarjeta, es una lista. */
.caso-pg .antes{display:grid; gap:var(--sp-4)}
.caso-pg .antes .t{font-family:var(--baj); font-size:var(--fs-sm); font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; color:var(--subtle)}
.caso-pg .antes li{list-style:none; padding-left:var(--sp-5); position:relative;
    color:var(--muted); font-size:var(--fs-md); margin-bottom:var(--sp-3)}
.caso-pg .antes li::before{content:''; position:absolute; left:0; top:9px; width:8px; height:1px;
    background:var(--subtle)}
.caso-pg .logro{border-left:3px solid var(--gold); padding:var(--sp-2) 0 var(--sp-2) var(--sp-4);
    margin-top:var(--sp-2)}
.caso-pg .logro .n{font-family:var(--tit); font-size:clamp(30px,5vw,42px); font-weight:800;
    color:var(--gold); line-height:1; font-variant-numeric:tabular-nums}
.caso-pg .logro .q{font-size:var(--fs-md); color:var(--muted); margin-top:var(--sp-2); max-width:36ch}
/* La demo: el centro de cada caso. */
.caso-pg .demo{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
    padding:var(--sp-5); position:relative; overflow:hidden}
.caso-pg .demo .barra{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
    margin-bottom:var(--sp-4)}
.caso-pg .demo .barra .rot{font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
    letter-spacing:.18em; text-transform:uppercase; color:var(--subtle); margin-right:auto}
.caso-pg .b{font-family:var(--cuerpo); font-weight:700; font-size:var(--fs-md); cursor:pointer;
    border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink);
    border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4); min-height:44px;
    transition:border-color var(--ease), background var(--ease), transform var(--ease)}
.caso-pg .b:hover{border-color:var(--muted)}
.caso-pg .b:active{transform:scale(.98)}
.caso-pg .b.on{background:var(--gold); border-color:var(--gold); color:#241703}
.caso-pg .b.oro{background:linear-gradient(135deg,var(--gold-1),var(--gold-2)); border-color:transparent;
    color:#241703}
.caso-pg .b:disabled{opacity:.45; cursor:not-allowed; transform:none}
.caso-pg :focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
/* ============ CASO 1 · el papel que se vuelve planilla ============ */
.caso-pg .escena{display:grid; gap:var(--sp-4); grid-template-columns:1fr}
@media(min-width:560px){
  .caso-pg .escena{grid-template-columns:150px 1fr; align-items:start}
}
.caso-pg .remito{background:var(--papel); color:var(--tinta); border-radius:4px; padding:12px 10px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:9px;
    line-height:1.45; transform:rotate(-1.4deg); box-shadow:0 14px 34px rgba(0,0,0,.5);
    transition:transform .4s ease, opacity .4s ease}
.caso-pg .remito.ido{transform:rotate(-6deg) translateX(-14px) scale(.96); opacity:.42}
.caso-pg .remito .h{font-weight:700; font-size:10px; border-bottom:1px solid rgba(0,0,0,.25);
    padding-bottom:5px; margin-bottom:6px; letter-spacing:.02em}
.caso-pg .remito .r{display:flex; justify-content:space-between; gap:6px}
.caso-pg .remito .r span:last-child{opacity:.75}
.caso-pg .remito .ln{margin-top:7px; padding-top:6px; border-top:1px dashed rgba(0,0,0,.25)}
.caso-pg .remito .mal{background:#ffe08a; padding:0 2px; border-radius:2px}
.caso-pg .planilla{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
    background:rgba(0,0,0,.22)}
.caso-pg .planilla .fila{display:grid; grid-template-columns:1fr auto; gap:var(--sp-3);
    padding:var(--sp-3) var(--sp-4); border-bottom:1px solid rgba(255,255,255,.055);
    font-size:var(--fs-sm); opacity:0; transform:translateY(6px);
    transition:opacity .28s ease, transform .28s ease}
.caso-pg .planilla .fila.hay{opacity:1; transform:none}
.caso-pg .planilla .fila:last-child{border-bottom:0}
.caso-pg .planilla .k{color:var(--subtle)}
.caso-pg .planilla .v{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums;
    text-align:right}
.caso-pg .planilla .fila.alerta{background:rgba(248,113,113,.10)}
.caso-pg .planilla .fila.alerta .v{color:var(--bad)}
.caso-pg .vacio{padding:var(--sp-6) var(--sp-4); text-align:center; color:var(--subtle);
    font-size:var(--fs-sm)}
.caso-pg .veredicto{margin-top:var(--sp-4); border-radius:var(--r-sm); padding:var(--sp-4);
    border:1px solid var(--line); background:var(--panel-2); display:none}
.caso-pg .veredicto.ver{display:block}
.caso-pg .veredicto.mal{border-color:rgba(248,113,113,.42); background:rgba(248,113,113,.08)}
.caso-pg .veredicto.bien{border-color:rgba(52,211,153,.42); background:rgba(52,211,153,.07)}
.caso-pg .veredicto .tt{font-family:var(--tit); font-weight:700; font-size:var(--fs-lg);
    margin-bottom:var(--sp-2)}
.caso-pg .veredicto .tt.rojo{color:var(--bad)}
.caso-pg .veredicto .tt.verde{color:var(--ok)}
.caso-pg .veredicto p{font-size:var(--fs-sm); color:var(--muted)}
.caso-pg .cifras{display:flex; gap:var(--sp-5); flex-wrap:wrap; margin-top:var(--sp-3);
    padding-top:var(--sp-3); border-top:1px solid var(--line)}
.caso-pg .cifras div{font-size:var(--fs-xs); color:var(--subtle); text-transform:uppercase;
    letter-spacing:.1em; font-family:var(--baj); font-weight:700}
.caso-pg .cifras b{display:block; font-family:var(--tit); font-size:var(--fs-xl); font-weight:800;
    letter-spacing:-.01em; margin-top:2px; font-variant-numeric:tabular-nums;
    text-transform:none; letter-spacing:normal; color:var(--ink)}
/* ============ CASO 2 · la tarjeta y el teléfono ============ */
.caso-pg .parabrisas{display:grid; gap:var(--sp-5); grid-template-columns:1fr; justify-items:center}
/* ⚠ Tres hijos (tarjeta · flecha · teléfono) necesitan TRES columnas. Con
     `1fr 1fr` la flecha ocupaba la segunda y el teléfono caía a la fila de
     abajo: quedaba todo apilado y la flecha apuntando al vacío. */
@media(min-width:620px){
  .caso-pg .parabrisas{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
                align-items:center; gap:var(--sp-4)}
  /* Con los dos a la vista, los botones no tienen nada que hacer: mostrarlos
       «los dos encendidos» es un estado que no significa nada. */
  .caso-pg #caso-lubricentro .demo .barra{display:none}
}
.caso-pg .tarjeta{width:100%; max-width:300px; aspect-ratio:5/3; border-radius:12px; padding:14px;
    background:linear-gradient(150deg,#151b2b,#0a0e18); border:1px solid rgba(230,207,139,.42);
    display:grid; grid-template-columns:1fr auto; gap:10px; align-content:space-between;
    box-shadow:0 18px 44px rgba(0,0,0,.5)}
.caso-pg .tarjeta .neg{font-family:var(--tit); font-weight:800; font-size:15px; color:var(--gold);
    line-height:1.1}
.caso-pg .tarjeta .sub{font-size:10px; color:var(--muted); margin-top:3px}
.caso-pg .tarjeta .pat{font-family:var(--tit); font-weight:800; font-size:20px; letter-spacing:.06em;
    color:var(--ink)}
.caso-pg .tarjeta .pie{grid-column:1/-1; font-size:9px; color:var(--subtle); line-height:1.4}
.caso-pg .qr{width:66px; height:66px; border-radius:6px; background:#fff; padding:5px; align-self:start}
.caso-pg .qr svg{display:block; width:100%; height:100%}
.caso-pg .tel{width:216px; border-radius:26px; border:8px solid #1b2233; background:var(--navy);
    padding:14px 12px 18px; box-shadow:0 22px 52px rgba(0,0,0,.55); position:relative}
.caso-pg .tel::before{content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%);
    width:56px; height:4px; border-radius:999px; background:#2a3348}
.caso-pg .tel .app{margin-top:10px}
.caso-pg .tel .tneg{font-family:var(--tit); font-weight:800; font-size:13px; color:var(--gold)}
.caso-pg .tel .tpat{font-family:var(--tit); font-weight:800; font-size:21px; margin:6px 0 2px}
.caso-pg .tel .tmod{font-size:11px; color:var(--muted)}
.caso-pg .tel .caja{margin-top:12px; border:1px solid var(--line); border-radius:10px; padding:10px}
.caso-pg .tel .caja .r{display:flex; justify-content:space-between; gap:8px; font-size:11px;
    padding:4px 0; border-bottom:1px solid rgba(255,255,255,.05)}
.caso-pg .tel .caja .r:last-child{border-bottom:0}
.caso-pg .tel .caja .r span:first-child{color:var(--subtle)}
.caso-pg .tel .caja .r span:last-child{font-weight:700; font-variant-numeric:tabular-nums}
.caso-pg .tel .prox{margin-top:10px; border-radius:10px; padding:10px;
    background:rgba(251,191,36,.10); border:1px solid rgba(251,191,36,.36)}
.caso-pg .tel .prox .q{font-size:9px; letter-spacing:.14em; text-transform:uppercase;
    font-family:var(--baj); font-weight:700; color:var(--warn)}
.caso-pg .tel .prox .v{font-family:var(--tit); font-weight:800; font-size:16px; margin-top:2px}
.caso-pg .flecha{font-size:var(--fs-2xl); color:var(--gold-2); text-align:center}
@media(max-width:619px){
  .caso-pg .flecha{transform:rotate(90deg)}
}
.caso-pg .llamar{margin-top:var(--sp-5); border-top:1px solid var(--line); padding-top:var(--sp-4)}
.caso-pg .llamar .t{font-family:var(--baj); font-size:var(--fs-xs); font-weight:700; letter-spacing:.18em;
    text-transform:uppercase; color:var(--subtle); margin-bottom:var(--sp-3)}
.caso-pg .llamar .f{display:flex; justify-content:space-between; gap:var(--sp-3); align-items:center;
    padding:var(--sp-3) 0; border-bottom:1px solid rgba(255,255,255,.055); font-size:var(--fs-sm)}
.caso-pg .llamar .f:last-child{border-bottom:0}
.caso-pg .llamar .f b{font-weight:600}
.caso-pg .llamar .f .d{color:var(--subtle); font-size:var(--fs-xs)}
.caso-pg .llamar .f .kmi{color:var(--warn); font-weight:700; font-variant-numeric:tabular-nums;
    white-space:nowrap}
/* ============ CASO 3 · el semáforo de carga ============ */
.caso-pg .dial{display:grid; gap:var(--sp-5)}
.caso-pg .gauge{position:relative; padding:var(--sp-5) 0 var(--sp-3)}
.caso-pg .pista{height:14px; border-radius:999px; overflow:hidden; display:flex}
.caso-pg .pista i{display:block; height:100%}
.caso-pg .pista .z1{background:rgba(251,191,36,.34); flex:0 0 26.7%}
.caso-pg .pista .z2{background:rgba(52,211,153,.40); flex:0 0 16.6%}
.caso-pg .pista .z3{background:rgba(251,191,36,.34); flex:0 0 6.7%}
.caso-pg .pista .z4{background:rgba(248,113,113,.38); flex:1}
.caso-pg .aguja{position:absolute; top:var(--sp-4); width:3px; height:30px; border-radius:2px;
    background:var(--ink); box-shadow:0 0 0 3px rgba(5,8,15,.85);
    transition:left .35s cubic-bezier(.2,.7,.3,1)}
.caso-pg .marcas{display:flex; justify-content:space-between; margin-top:var(--sp-3);
    font-family:var(--baj); font-size:var(--fs-xs); font-weight:700; color:var(--subtle);
    letter-spacing:.08em}
.caso-pg .lectura{display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap}
.caso-pg .lectura .r{font-family:var(--tit); font-size:clamp(40px,8vw,62px); font-weight:800;
    line-height:1; font-variant-numeric:tabular-nums; transition:color .3s ease}
.caso-pg .lectura .e{font-family:var(--baj); font-size:var(--fs-md); font-weight:700;
    letter-spacing:.16em; text-transform:uppercase}
.caso-pg .dicho{font-size:var(--fs-md); color:var(--muted); min-height:3.2em}
.caso-pg .dicho b{color:var(--ink); font-weight:600}
.caso-pg .sem-ctrl label{display:block; font-family:var(--baj); font-size:var(--fs-sm); font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:var(--subtle); margin-bottom:var(--sp-3)}
.caso-pg input[type=range]{width:100%; accent-color:var(--gold); height:32px}
.caso-pg .semanas{display:flex; gap:var(--sp-2); align-items:flex-end; height:64px; margin-top:var(--sp-4)}
.caso-pg .semanas .s{flex:1; background:rgba(255,255,255,.09); border-radius:4px 4px 0 0;
    transition:height .35s ease, background .35s ease; position:relative}
.caso-pg .semanas .s.hoy{background:linear-gradient(180deg,var(--gold-1),var(--gold-2))}
.caso-pg .semanas .s.hoy.rojo{background:linear-gradient(180deg,#fca5a5,#dc2626)}
/* ⚠ Esta regla era `.semanas .et`, y no matcheaba NUNCA: en el HTML `.et` es
   HERMANO de `.semanas`, no hijo. Por eso el archivo original tenía los
   estilos repetidos inline en el elemento —y esos la CSP los tira—. Se
   arregla el selector, que es donde estaba el problema. */
.caso-pg .et{display:flex; gap:var(--sp-2); margin-top:var(--sp-2);
    font-family:var(--baj); font-size:var(--fs-xs); font-weight:700; color:var(--subtle)}
.caso-pg .et span{flex:1; text-align:center}
/* --------------------------------------------------------------- notas */
.caso-pg .nota{border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5);
    color:var(--subtle); font-size:var(--fs-sm); margin-top:var(--sp-5)}
.caso-pg .nota b{color:var(--ink)}
.caso-pg .nota.ojo{border-color:rgba(251,191,36,.40); background:rgba(251,191,36,.06); color:var(--muted)}
.caso-pg .cierre{margin-top:var(--sp-8); padding-top:var(--sp-7); border-top:1px solid var(--line);
    display:grid; gap:var(--sp-5); justify-items:start}
.caso-pg .cierre h2{font-size:clamp(26px,4.5vw,38px); font-weight:800; max-width:20ch}
.caso-pg .cierre h2 b{color:var(--gold)}
.caso-pg .cta{display:inline-flex; align-items:center; gap:var(--sp-2); background:var(--wa);
    color:#04231a; font-weight:700; font-size:var(--fs-lg); text-decoration:none;
    padding:var(--sp-3) var(--sp-5); border-radius:var(--r-pill); min-height:48px;
    transition:filter var(--ease), transform var(--ease)}
.caso-pg .cta:hover{filter:brightness(1.07)}
.caso-pg .cta:active{transform:scale(.98)}
.caso-pg footer{margin-top:var(--sp-8); padding-top:var(--sp-5); border-top:1px solid var(--line);
    color:var(--subtle); font-size:var(--fs-sm)}
@media (prefers-reduced-motion: reduce){

}
@media(max-width:600px){
  .caso-pg{padding:var(--sp-5) var(--sp-4) var(--sp-7)}
  .caso-pg .demo{padding:var(--sp-4)}
  .caso-pg .cta{width:100%; justify-content:center}
}


/* =====================================================================
 * Lo que reemplaza a los `style="..."` del archivo original
 *
 * No es cosmetica: la CSP del sitio bloquea el atributo `style`, venga del
 * HTML o de un innerHTML. Sin esto las barras salen de alto cero, la aguja
 * pegada a la izquierda y las cifras del veredicto todas del mismo color.
 * ===================================================================== */

/* Los margenes sueltos que habia inline. Dos escalones, los de la grilla de 4.
   ⚠ Uno de los originales era `margin-top:10px`, fuera de la grilla: se
   ajusto a 12 (--sp-3). Son 2px y nadie los ve; un valor fuera de escala en
   cambio queda para siempre. */
.caso-pg .sep{ margin-block-start:var(--sp-4) }
.caso-pg .sep-chica{ margin-block-start:var(--sp-3) }

/* El span que marca lo que la lectura automatica entendio mal. */
.caso-pg .en-alerta{ color:var(--warn) }

/* Las cifras del veredicto: lo que correspondia y lo que falto. Antes iban con
   un style= adentro de un innerHTML, que la CSP tira igual que uno escrito a
   mano en el HTML. */
/* ⚠ Con `b.` y no solo la clase: `.caso-pg .cifras b` ya pinta de --ink y
   tiene MAS especificidad (0,2,1) que `.caso-pg .cifra-ok` (0,2,0), asi que
   las dos cifras salían del mismo color y el veredicto perdía todo el punto.
   Medido: las dos daban rgb(244,245,251). */
.caso-pg .cifras b.cifra-ok{ color:var(--gold) }
.caso-pg .cifras b.cifra-mal{ color:var(--bad) }

/* Las cuatro semanas del caso del coach: el alto de arranque de cada barra.
   Son DATO, no diseno, pero tienen que estar en el CSS porque el atributo
   style no se aplica. La cuarta la pisa el JS por CSSOM cuando moves el
   control, y eso si esta permitido. */
.caso-pg .semanas .s:nth-child(1){ height:58% }
.caso-pg .semanas .s:nth-child(2){ height:64% }
.caso-pg .semanas .s:nth-child(3){ height:55% }
.caso-pg .semanas .s:nth-child(4){ height:60% }

/* La aguja arranca en el medio de la zona verde; el JS la mueve despues. */
.caso-pg .aguja{ left:40% }