/* Estilo compartido de los casos de estudio (mismo sistema que index.html) */
:root{
  --paper:#f2ecdf;
  --card:#fbf8f1;
  --ink:#111722;
  --muted:#5f5b52;
  --line:#d8cfbb;
  --red:#e3160b;
  --serif:'Newsreader',Georgia,serif;
  --heavy:'Outfit','Arial Black',sans-serif;
  --pad:clamp(16px,2.6vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.4;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:4px}
html[data-lang="en"] [lang="es"],html[data-lang="es"] [lang="en"]{display:none!important}
.wrap{max-width:1520px;margin:0 auto;padding-inline:var(--pad)}

/* Nav */
nav{position:sticky;top:0;z-index:50;background:var(--paper)}
nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:18px}
.logo{font-family:var(--heavy);font-size:22px;letter-spacing:-.03em;white-space:nowrap}
.logo span{color:var(--red)}
.nav-links{display:flex;align-items:center;gap:26px;font-size:16px}
.nav-links a:hover{color:var(--red)}
.lang-btn{font-family:var(--serif);font-size:14px;background:none;border:1px solid var(--ink);color:var(--ink);padding:3px 9px;cursor:pointer}
.lang-btn:hover{background:var(--ink);color:var(--paper)}

/* Hero */
.case-hero{padding-block:clamp(40px,7vw,100px) clamp(40px,5vw,72px)}
.case-meta{font-size:16px;color:var(--muted);margin-bottom:22px}
.case-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,80px);align-items:end}
h1{font-weight:400;font-size:clamp(52px,7.4vw,118px);line-height:.98;letter-spacing:-.035em}
.lead{font-size:clamp(20px,1.7vw,24px);line-height:1.32}
.status{display:inline-block;margin-top:22px;background:var(--ink);color:var(--paper);padding:5px 12px;font-size:15px}

/* Franja de cifras */
.band{background:var(--red);color:var(--paper)}
.band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-block:40px 46px}
.stat-n{font-size:clamp(36px,3.8vw,58px);line-height:1;letter-spacing:-.03em}
.stat-l{font-size:16px;line-height:1.25;margin-top:8px;max-width:14em}

/* Secciones */
section{padding-block:clamp(60px,7.5vw,112px)}
.sec-head{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;margin-bottom:44px}
h2{font-weight:400;font-size:clamp(36px,4vw,60px);line-height:1.02;letter-spacing:-.025em}
.sec-intro{font-size:19px;line-height:1.35;max-width:30em}
.dark{background:var(--ink);color:var(--paper)}
.dark .sec-intro{color:#cfc8b8}

/* Problemas: columnas con filete */
.issues{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:28px}
.issues.four{--cols:4}
.issue{border-top:1px solid var(--ink);padding-top:18px}
.issue h3{font-weight:400;font-size:26px;line-height:1.1;letter-spacing:-.015em;margin-bottom:10px}
.issue p{font-size:18px;line-height:1.38;color:var(--muted)}

/* Flujo (diagrama de bloques) */
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin-bottom:44px}
.flow li{list-style:none;display:flex;align-items:center;gap:8px}
.flow li span{background:var(--paper);color:var(--ink);padding:10px 14px;font-size:17px;line-height:1.2}
.flow li.hot span{background:var(--red);color:var(--paper)}
.flow li:not(:last-child)::after{content:"→";color:#cfc8b8;font-size:18px}
.flow-note{font-size:15px;color:#cfc8b8;margin:-30px 0 44px}

/* Módulos: tarjetas crema sobre marino */
.modules{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.module{background:var(--paper);color:var(--ink);padding:clamp(22px,2.4vw,34px)}
.module h3{font-weight:400;font-size:clamp(26px,2.2vw,34px);line-height:1.08;letter-spacing:-.02em;margin-bottom:14px}
.module p{font-size:18px;line-height:1.38}
.module ul{list-style:none;margin-top:14px;display:grid;gap:8px}
.module li{padding-left:22px;position:relative;font-size:17px;line-height:1.35;color:var(--muted)}
.module li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--red)}

/* Resultados */
.results{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,80px)}
.results-text p{font-size:clamp(20px,1.7vw,24px);line-height:1.35}
.results-text p+p{margin-top:18px}
.facts{border-top:1px solid var(--ink)}
.facts div{display:grid;grid-template-columns:8em 1fr;gap:16px;padding-block:14px;border-bottom:1px solid var(--line);font-size:17px}
.facts dt{color:var(--muted)}

/* Siguiente caso: bloques rojos clicables */
.next{background:var(--red);color:var(--paper);padding-block:clamp(40px,5vw,72px)}
.next .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.next a{display:block;border:1px solid var(--paper);padding:26px 28px;transition:background .15s,color .15s}
.next a:hover{background:var(--paper);color:var(--red)}
.next small{display:block;font-size:16px;margin-bottom:8px}
.next strong{display:block;font-weight:400;font-size:clamp(30px,3.4vw,52px);line-height:1.02;letter-spacing:-.025em}

footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:26px;font-size:15px;color:var(--muted)}
footer a{margin-left:20px}
footer a:hover{color:var(--red)}


/* Galería de capturas (celular) */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shots figure{margin:0}
.shots img{display:block;width:100%;height:auto;border:7px solid var(--ink);border-radius:26px;background:var(--ink)}
.shots figcaption{font-size:16px;line-height:1.3;margin-top:10px;color:var(--muted)}
.demo-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:36px}
.demo-btn{background:var(--red);color:var(--paper);padding:12px 20px;font-size:18px}
.demo-btn:hover{background:var(--ink)}
.demo-note{font-size:16px;color:var(--muted)}

/* Capturas de escritorio */
.app-shots{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px;align-items:start}
.app-shots figure{margin:0}
.app-shots .full{grid-column:1/-1}
.app-shots img{display:block;width:100%;height:auto}
/* Marco tipo ventana: mismo fondo que la app para que el recorte no se vea cortado */
.frame{background:#0c0d11;border:1px solid var(--ink);padding:0 clamp(10px,1.5vw,22px) clamp(10px,1.5vw,22px)}
.frame-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;margin-bottom:clamp(10px,1.5vw,22px);border-bottom:1px solid #22262f;font-size:14px;line-height:1.2;color:#9097a3}
.frame-bar b{font-weight:500;color:#ece7dd;display:flex;align-items:center;gap:9px}
.frame-bar b::before{content:"";width:8px;height:8px;background:var(--red)}
.app-shots figcaption{font-size:16px;line-height:1.3;margin-top:10px;color:var(--muted)}

/* Tabla de ejemplo: antes y después */
.sample{width:100%;border-collapse:collapse;font-size:16px;line-height:1.3}
.sample th{font-weight:400;text-align:left;color:var(--muted);font-size:15px;padding:0 12px 10px 0;border-bottom:1px solid var(--ink)}
.sample td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.sample td.raw{font-family:ui-monospace,Menlo,monospace;font-size:14px;color:var(--muted);max-width:26em}
.sample td.tag span{display:inline-block;background:var(--ink);color:var(--paper);padding:2px 8px;font-size:14px;white-space:nowrap}
.sample td.tag.alt span{background:var(--red)}
.sample-wrap{overflow-x:auto}
.sample-note{font-size:15px;color:var(--muted);margin-top:14px}

@media (max-width:1000px){
  .band .wrap{grid-template-columns:1fr 1fr}
  .issues,.issues.four{--cols:2}
  .shots{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  .nav-links .hide-m{display:none}
  .case-grid,.sec-head,.modules,.results,.next .wrap{grid-template-columns:1fr}
  .sec-head{gap:16px;margin-bottom:30px}
  .issues,.issues.four{--cols:1;gap:22px}
  .facts div{grid-template-columns:1fr;gap:2px}
  .sample{min-width:640px}
  .app-shots{grid-template-columns:1fr}
  footer a{margin:0 18px 0 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}