/* Casos de éxito: el listado de /resultados/ y la página de cada caso en /casos/<slug>/ */

/* ---------- Piezas comunes ---------- */
.pastillas{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 var(--e-3);padding:0}
.pastillas li{font:600 .9375rem/1 var(--texto);padding:.6rem .95rem;border-radius:10px;background:var(--panel2);border:1px solid var(--linea);color:var(--gris)}
.cifra{display:grid;grid-template-columns:auto 1fr;gap:0 .55rem;align-items:center}
.cifra svg{width:16px;height:34px;color:var(--amarillo);stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cifra svg.baja{transform:rotate(180deg)}
.cifra b{font:800 clamp(2.4rem,3.7vw,3.5rem)/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.cifra span{grid-column:1/-1;margin-top:.5rem;color:var(--gris);font-size:1rem;line-height:1.4;max-width:24ch}

/* ---------- Listado ---------- */
.casos-lista{list-style:none;margin:0;padding:0}
.caso-fila{position:relative;display:grid;gap:var(--e-4);padding:var(--e-5) 0;border-top:1px solid var(--linea)}
.caso-fila:first-child{border-top:0;padding-top:0}
.caso-texto{display:flex;flex-direction:column;justify-content:center}
.caso-nombre{font:800 clamp(2.6rem,5.4vw,4.6rem)/.95 var(--display);letter-spacing:-.02em;margin:0 0 var(--e-3);max-width:none}
.caso-nombre small{display:block;font:600 1rem/1.3 var(--texto);letter-spacing:0;color:var(--gris);margin-top:.6rem}
.caso-frase{font-size:clamp(1.125rem,1.4vw,1.3125rem);line-height:1.5;margin:0 0 var(--e-4);max-width:38ch}
.caso-cifras{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-3);margin-bottom:var(--e-4)}
.caso-fila .btn{align-self:flex-start;position:relative;z-index:2}
.caso-fila>.cubre{position:absolute;inset:0;z-index:1}
.caso-fila:hover .mosaico img{transform:scale(1.04)}

.mosaico{display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:1fr 1fr;gap:.75rem;height:clamp(380px,46vw,560px)}
.mosaico>*{border-radius:20px;overflow:hidden;background:var(--panel2);position:relative;min-height:0}
.mosaico .alto{grid-row:1/3}
.mosaico img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.mosaico figcaption{position:absolute;left:.75rem;bottom:.75rem;font:700 .75rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--blanco);background:rgba(10,10,9,.72);padding:.45rem .6rem;border-radius:8px}

/* La tarjeta de dato: comparación en barras con cifras reales */
.ficha-dato{display:flex;flex-direction:column;justify-content:space-between;gap:.75rem;padding:clamp(1rem,2vw,1.4rem);background:var(--panel2);border:1px solid var(--linea)}
.ficha-dato p{margin:0;font:700 .8125rem/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.ficha-dato ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ficha-dato li{display:grid;grid-template-columns:1fr auto;gap:.3rem .6rem;align-items:baseline;font-size:.9375rem;color:var(--gris)}
.ficha-dato li b{font:800 clamp(1.4rem,2.2vw,1.9rem)/1 var(--display);color:var(--blanco)}
.ficha-dato li i{grid-column:1/-1;height:10px;border-radius:99px;background:linear-gradient(90deg,var(--gris-osc) var(--w),rgba(255,255,255,.06) var(--w))}
.ficha-dato li.bueno b{color:var(--amarillo)}
.ficha-dato li.bueno i{background:linear-gradient(90deg,var(--amarillo) var(--w),rgba(255,255,255,.06) var(--w))}

@media (min-width:960px){
  .caso-fila{grid-template-columns:5fr 7fr;gap:var(--e-6);align-items:center;padding:var(--e-6) 0}
  .caso-fila:nth-child(even){grid-template-columns:7fr 5fr}
  .caso-fila:nth-child(even) .mosaico{grid-column:1;grid-row:1}
  .caso-fila:nth-child(even) .caso-texto{grid-column:2;grid-row:1}
}
@media (max-width:639px){
  .mosaico{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .mosaico .alto{grid-row:auto;aspect-ratio:4/5}
  .mosaico .cuad{aspect-ratio:4/5}
  .mosaico .ficha-dato{grid-column:1/-1}
}

/* ---------- Página del caso ---------- */
.caso-cab .envoltura{display:grid;gap:var(--e-5)}
.caso-cab h1{font-size:clamp(2.4rem,4.4vw,4.1rem);max-width:20ch}
.caso-cab .quien{font:800 clamp(1.4rem,2vw,1.75rem)/1 var(--display);letter-spacing:.02em;margin:0 0 var(--e-2);color:var(--amarillo)}
.caso-cab .intro{max-width:46ch}
.cifras-pila{display:grid;gap:.75rem;align-content:center}
.cifras-pila .cifra{padding:1.25rem 1.4rem;border-radius:20px}
@media (min-width:960px){
  .caso-cab .envoltura{grid-template-columns:1.5fr 1fr;align-items:center}
}

.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;list-style:none;margin:0;padding:0}
.galeria li{border-radius:20px;overflow:hidden;background:var(--panel2);aspect-ratio:4/5;position:relative}
.galeria img{width:100%;height:100%;object-fit:cover;display:block}
.galeria figcaption{position:absolute;left:.75rem;bottom:.75rem;right:.75rem;font-size:.875rem;line-height:1.35;color:var(--blanco);background:rgba(10,10,9,.78);padding:.55rem .7rem;border-radius:10px}
@media (min-width:760px){.galeria{grid-template-columns:repeat(3,1fr)}}

.resumen-caso{display:grid;gap:var(--e-5)}
.resumen-caso h2{font-size:var(--t-h3);margin:0 0 var(--e-2);max-width:none}
.resumen-caso p{margin:0 0 var(--e-2);max-width:62ch}
.servicios{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.servicios li{font:600 .9375rem/1 var(--texto);padding:.6rem .9rem;border:2px solid var(--negro);border-radius:999px}
@media (min-width:960px){.resumen-caso{grid-template-columns:1.4fr 1fr;gap:var(--e-6)}}

.pilares{list-style:none;margin:var(--e-4) 0 0;padding:0;display:grid;gap:1px;background:var(--linea);border-radius:20px;overflow:hidden;counter-reset:pilar}
.pilares li{background:var(--panel);padding:clamp(1.25rem,3vw,2rem);counter-increment:pilar}
.pilares li::before{content:"0" counter(pilar);display:block;font:800 1rem/1 var(--display);color:var(--amarillo);letter-spacing:.1em;margin-bottom:.75rem}
.pilares h3{font-size:var(--t-h3);margin:0 0 .5rem}
.pilares p{margin:0;color:var(--gris);max-width:52ch}
@media (min-width:860px){.pilares{grid-template-columns:repeat(2,1fr)}}

.bloques-res{display:grid;gap:var(--e-4);margin-top:var(--e-4)}
.bloques-res h3{font-size:var(--t-h3);margin:0 0 var(--e-2)}
@media (min-width:860px){.bloques-res{grid-template-columns:1fr 1fr;gap:var(--e-5)}}

.fugas{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.fugas li{padding-left:1.4rem;position:relative;max-width:60ch}
.fugas li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:2px;background:currentColor}

.cita-cliente{margin:0}
.cita-cliente blockquote{font:800 clamp(2rem,4.6vw,3.75rem)/1.12 var(--display);letter-spacing:-.01em;margin:0 0 var(--e-3);max-width:24ch;text-wrap:balance}
.cita-cliente figcaption{font-size:1.0625rem}

.otros-casos{display:grid;gap:var(--e-3);list-style:none;margin:var(--e-4) 0 0;padding:0}
.otros-casos li{position:relative;border-radius:20px;padding:1.5rem;display:grid;gap:.6rem;transition:transform var(--dur),border-color var(--dur)}
.otros-casos li:hover{transform:translateY(-4px);border-color:rgba(255,196,0,.55)}
.otros-casos b{font:800 clamp(1.8rem,3vw,2.4rem)/1 var(--display)}
.otros-casos p{margin:0;color:var(--gris)}
@media (min-width:760px){.otros-casos{grid-template-columns:repeat(3,1fr)}}

/* Mosaico sin foto: la frase en amarillo y una cifra */
.ficha-frase{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;padding:clamp(1.25rem,2.5vw,1.75rem);background:var(--amarillo)!important;color:var(--negro)}
.ficha-frase p{margin:0;font:800 clamp(1.6rem,2.6vw,2.4rem)/1.08 var(--display);letter-spacing:-.01em;text-wrap:balance}
.ficha-frase span{font:700 .8125rem/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase}
.ficha-num{display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;padding:clamp(1rem,2vw,1.4rem);border:1px solid rgba(255,196,0,.3);background:linear-gradient(160deg,rgba(255,196,0,.16),var(--panel2) 60%)!important}
.ficha-num b{font:800 clamp(2.4rem,4vw,3.6rem)/1 var(--display);color:var(--amarillo)}
.ficha-num span{color:var(--gris);font-size:.9375rem;line-height:1.35}
.galeria:has(>li:nth-child(2):last-child){max-width:820px}
@media (min-width:760px){.galeria:has(>li:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}}