/* Páginas de CASO de cada cliente (v12/casos/<cliente>.html).
   Base: ../../v10/v10.css + paginas_pie.css + cierre.css + nav.css + interiores.css (las mismas que Servicios).
   Cada página pone los colores de su marca en .cx-hero (--cb fondo, --ci letra, --cc acento). */

/* ===== Cabecera con el color de la marca: titular, cliente y cifras ===== */
.cx-hero{background:var(--cb);color:var(--ci);padding:calc(var(--navh) + clamp(30px,4.6vw,80px)) 0 clamp(50px,6vw,100px)}
.cx-hero .label{color:inherit;opacity:.68}
.cx-crumbs{margin:0 var(--pad);padding:0 var(--cp)}
.cx-crumbs a:hover{text-decoration:underline}
.cx-top{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(28px,5vw,100px);align-items:end;margin:clamp(22px,2.6vw,40px) var(--pad) 0;padding:0 var(--cp)}
.cx-t{font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.9;font-size:clamp(40px,5.4vw,100px);overflow-wrap:break-word}
.cx-lead{font-size:clamp(17px,1.4vw,22px);line-height:1.35;opacity:.82;max-width:40ch;margin-top:clamp(18px,2vw,30px)}

/* Ficha del cliente */
.cx-who{display:flex;align-items:center;gap:14px;padding-bottom:18px}
.cx-av{width:64px;height:64px;flex:none;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--cb),0 0 0 4px var(--ci)}
.cx-av-txt{display:grid;place-items:center;background:var(--ci);color:var(--cb);font-weight:900;font-size:28px;letter-spacing:-.04em}
.cx-who b{display:block;font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(24px,2.2vw,36px);line-height:1}
.cx-who span{display:block;margin-top:6px}
.cx-meta div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid color-mix(in srgb,var(--ci) 22%,transparent)}
.cx-meta div:last-child{border-bottom:1px solid color-mix(in srgb,var(--ci) 22%,transparent)}
.cx-meta dd{font-size:16px;line-height:1.35;overflow-wrap:anywhere}
.cx-meta dd b{font-weight:900}
.cx-meta a{border-bottom:1px solid currentColor}

/* Cifras grandes */
.cx-kpis{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin:clamp(40px,5vw,80px) var(--pad) 0;border-top:1px solid color-mix(in srgb,var(--ci) 22%,transparent)}
.cx-kpi{padding:clamp(22px,2.4vw,36px) var(--cp) 0;min-width:0}
.cx-kpi+.cx-kpi{border-left:1px solid color-mix(in srgb,var(--ci) 22%,transparent)}
.cx-n{display:block;color:var(--cc);font-weight:900;letter-spacing:-.055em;line-height:.88;font-size:clamp(46px,5.4vw,104px);white-space:nowrap}
.cx-n small{font-size:.42em;letter-spacing:-.03em;margin-left:.18em}
.cx-kpi p{font-size:clamp(15px,1.15vw,18px);line-height:1.35;opacity:.85;margin-top:14px;max-width:30ch}

/* ===== Vídeos: se crean al acercarse (casos.js) ===== */
.cx-sec{padding-top:clamp(70px,8vw,130px)}
.cx-k{margin:0 var(--pad);padding:0 var(--cp) clamp(18px,2vw,30px)}
.cx-reels{display:flex;justify-content:center;gap:clamp(14px,2vw,32px);margin:0 var(--pad);padding:0 var(--cp)}
.cx-reel{flex:0 1 320px;min-width:0}
.cx-media{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px rgba(0,0,0,.45)}
.cx-media img,.cx-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cx-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px;margin-top:14px}
.cx-cap b{font-weight:900;letter-spacing:-.04em;font-size:clamp(20px,1.6vw,26px);line-height:1;white-space:nowrap}
.cx-cap a,.cx-cap span{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.cx-cap a:hover{color:var(--ink)}
.cx-reel:nth-child(2) .cx-media{transform:translateY(clamp(0px,3vw,48px))}
.cx-reel:nth-child(2) .cx-cap{transform:translateY(clamp(0px,3vw,48px))}

/* ===== Reto, qué hicimos y resultado ===== */
.cx-story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cx-story>div{padding:clamp(24px,2.6vw,40px) var(--cp) clamp(30px,3vw,48px);min-width:0}
.cx-story>div+div{border-left:1px solid var(--line)}
.cx-story h2{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.92;font-size:clamp(28px,2.6vw,46px);margin:12px 0 16px}
.cx-story p,.cx-story li{color:var(--ink-2);font-size:clamp(16px,1.2vw,19px);line-height:1.45}
.cx-story li{display:flex;gap:12px;align-items:baseline;padding:4px 0}
.cx-story li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--rojo);transform:translateY(-3px)}
.cx-story ul{margin-top:12px}

/* ===== Siguiente caso: una franja con el color de la siguiente marca ===== */
.cx-next{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(16px,2.4vw,40px);margin:clamp(60px,7vw,110px) var(--pad) 0;padding:clamp(26px,3vw,48px) var(--cp);background:var(--nb);color:var(--ni);border-radius:22px;transition:transform .5s var(--ease)}
.cx-next:hover{transform:translateY(-4px)}
.cx-next .label{color:inherit;opacity:.68;display:block;margin-bottom:8px}
.cx-next img{width:clamp(56px,6vw,88px);height:clamp(56px,6vw,88px);border-radius:50%;object-fit:cover}
.cx-next b{display:block;font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.9;font-size:clamp(34px,5vw,92px);overflow-wrap:break-word}
.cx-next .arrow{font-size:clamp(34px,4vw,64px);line-height:1}

/* El menú, encima de la cabecera de color, toma la letra de la marca (Rízia es clara) */
.nav.on-case.nav-arriba .nav-cta,.nav.on-case.nav-arriba .nav-cta *{color:var(--navink)}
.nav.on-case.nav-arriba .nav-cta{box-shadow:inset 0 0 0 1px currentColor}

/* ===== Móvil ===== */
@media (max-width:820px){
  .cx-hero{padding-top:calc(var(--navh) + 28px)}
  .cx-top{grid-template-columns:1fr;gap:30px;align-items:start}
  .cx-t{font-size:clamp(32px,9.4vw,52px)}
  .cx-meta div{grid-template-columns:104px minmax(0,1fr)}
  .cx-kpis{grid-template-columns:1fr}
  .cx-kpi{display:grid;grid-template-columns:minmax(0,1fr);padding:20px var(--cp) 22px}
  .cx-kpi+.cx-kpi{border-left:0;border-top:1px solid color-mix(in srgb,var(--ci) 22%,transparent)}
  .cx-n{font-size:clamp(40px,12vw,60px)}
  .cx-kpi p{margin-top:8px}
  .cx-reels{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0;padding:0 var(--pad) 8px;scrollbar-width:none}
  .cx-reels::-webkit-scrollbar{display:none}
  .cx-reels.solo{justify-content:center}
  .cx-reel{flex:0 0 66vw;scroll-snap-align:center}
  .cx-reel:nth-child(2) .cx-media,.cx-reel:nth-child(2) .cx-cap{transform:none}
  .cx-story{grid-template-columns:1fr}
  .cx-story>div+div{border-left:0;border-top:1px solid var(--line)}
  .cx-next{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .cx-next .arrow{display:none}
  .cx-next b{font-size:clamp(28px,8.6vw,44px)}
}
/* Botón "Volver" arriba del caso */
.cx-volver{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px calc(var(--pad) + var(--cp));padding:10px 18px;border:1px solid currentColor;border-radius:999px;font:500 13px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:inherit;text-decoration:none;background:transparent;opacity:.85;transition:opacity .2s}
.cx-volver:hover{opacity:1}
.cx-volver:focus-visible{outline:2px solid currentColor;outline-offset:3px}