/* =====================================================================
 * 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}
/* ⚠ SE LLAMA `.barra-demo` Y NO `.barra`, y el nombre no es cosmetico.

   `estilos.css` ya tiene un `.barra` —son las barras del grafico del panel de
   la home, con `flex:1` y degrade dorado— y le ganaba a esta: las reglas de
   aca no declaran ni `background` ni `flex`, asi que los dos se colaban. Las
   CUATRO barras de botones de esta pagina venian con un bloque dorado detras
   del rotulo, desde siempre, hasta que Braian dijo «quedó feo» el 17-09-2026.

   Es la misma trampa que hizo renombrar `.caso` a `.ficha`, y se arregla igual:
   con un nombre que no exista en el CSS global. GOTCHAS §4. Antes de nombrar
   una clase acá, grepeala en estilos.css. */
.caso-pg .demo .barra-demo{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
    margin-bottom:var(--sp-4)}
.caso-pg .demo .barra-demo .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}
/* ---------- la demo del comparador de repuestos ---------- */

/* Tres columnas: proveedor, precio de lista, precio puesto. La de lista NO
   desaparece en el paso 2 —ahi esta el contraste, que es todo el punto de la
   demo—; se apaga con `.k` y queda como referencia. */
.caso-pg .planilla .fila.r-3{ grid-template-columns:1fr auto auto; gap:var(--sp-4) }
.caso-pg .planilla .fila.r-3 .v{ min-width:5.5em; text-align:right }

/* Las dos marcas. Se ponen SIEMPRE, en los dos pasos: si el lector no vio que
   B era el mas barato, el vuelco no le dice nada. */
.caso-pg .r-gana,
.caso-pg .r-pierde{
  font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:2px var(--sp-2); border-radius:var(--r-pill);
  margin-inline-start:var(--sp-2); white-space:nowrap;
}
.caso-pg .r-gana  { color:var(--ok);  border:1px solid rgba(52,211,153,.42) }
.caso-pg .r-pierde{ color:var(--bad); border:1px solid rgba(248,113,113,.42) }

/* La cuenta que explica el precio: chica y apagada, porque es el respaldo del
   numero, no el numero. */
.caso-pg .r-cuenta{ color:var(--subtle); font-size:var(--fs-xs); white-space:nowrap }

/* Los que no la tienen. Apagados pero PRESENTES: que el renglon exista es el
   dato —significa «a este ya lo consultamos»— y es justo lo que antes obligaba
   a abrir su portal. Sin etiqueta de color: no es un error ni una alerta. */
.caso-pg .planilla .fila.r-sin{ opacity:.55 }
.caso-pg .r-nohay{
  font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--subtle);
  margin-inline-start:var(--sp-2); white-space:nowrap;
}

/* El epigrafe: que pieza se esta comparando. Va afuera de la tabla para que la
   tabla sea solo proveedores y precios. */
.caso-pg .r-pieza{
  font-size:var(--fs-sm); color:var(--muted);
  margin-bottom:var(--sp-3);
}
.caso-pg .r-pieza b{ color:var(--ink); font-variant-numeric:tabular-nums }

.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-demo{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}
/* --------------------------------------------------------------- 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 cifras del veredicto salen todas del
 * mismo color. (Antes esto tambien sostenia las barras y la aguja del caso
 * del coach, que se saco el 17-09-2026.)
 * ===================================================================== */

/* 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) }