/* ============================================================
   618 STUDIO — base.css · Casos de estudio (régimen papel)
   Lenguaje editorial: aire, jerarquía serif, oro solo informativo.
   ============================================================ */
:root{
  --papel:#EEE5D0; --tinta:#201D15; --mut:rgba(32,29,21,.68); --oro:#8D6F26;
  --hair:rgba(32,29,21,.16);
  --serif:'Fraunces',Georgia,serif; --sans:'Archivo',system-ui,sans-serif;
  --e:cubic-bezier(.618,0,.382,1);
  --s1:8px;--s2:13px;--s3:21px;--s4:34px;--s5:55px;--s6:89px;--s7:144px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:16px;line-height:1.618;-webkit-font-smoothing:antialiased}
::selection{background:var(--oro);color:var(--papel)}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;letter-spacing:-.01em}
.wrap{width:min(1060px,calc(100% - 2*34px));margin:0 auto}
.wrap-lectura{width:min(720px,calc(100% - 2*34px));margin:0 auto}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.21em;text-transform:uppercase;color:var(--oro)}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--mut)}

/* cabecera de páginas interiores */
.cab{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) var(--s4)}
.cab img{height:34px}
.cab nav{display:flex;gap:var(--s4)}
.cab nav a{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--oro);padding-bottom:3px}

/* tarjetas de proyecto */
.cards-proy{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4)}
.card-proy{display:block;text-decoration:none;border:1px solid var(--hair);border-radius:8px;overflow:hidden;transition:border-color .382s var(--e),transform .382s var(--e)}
.card-proy:hover{border-color:var(--oro);transform:translateY(-3px)}
.card-proy img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card-proy .cuerpo{padding:var(--s3) var(--s4) var(--s4)}
.card-proy h3{font-size:clamp(20px,1.9vw,24px)}
.card-proy .meta{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);margin-top:4px}
.card-proy p{font-size:14.5px;line-height:1.55;color:var(--mut);margin-top:var(--s2)}
.card-proy .ver{display:inline-block;margin-top:var(--s3);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--oro)}

/* ---------- CASO DE ESTUDIO ---------- */
/* 1 · portada */
.hero-proy{position:relative;min-height:74svh;display:flex;align-items:flex-end;overflow:hidden;background:#14110B}
.hero-proy picture,.hero-proy img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-proy .titulo{position:relative;z-index:2;width:100%;padding:var(--s7) var(--s4) var(--s5);background:linear-gradient(transparent,rgba(10,9,6,.66));color:#F2EDE3}
.hero-proy .titulo .wrap{margin:0 auto}
.hero-proy h1{font-size:clamp(36px,5.2vw,68px);font-weight:400}
.hero-proy .titulo .eyebrow{color:#E9CD8B}
.hero-proy .lugar{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:rgba(242,237,227,.8);margin-top:var(--s2)}

/* 2 · introducción + ficha */
.datos-proy{display:flex;gap:var(--s2) var(--s4);flex-wrap:wrap;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding:var(--s4) 0;border-bottom:1px solid var(--hair)}
.datos-proy b{color:var(--tinta);font-weight:600}
.intro-proy{padding:var(--s5) 0 var(--s3)}
.intro-proy p{font-family:var(--serif);font-size:clamp(19px,2vw,25px);line-height:1.5}

/* bloques editoriales (reto, decisión) */
.bloque{padding:var(--s6) 0}
.bloque .eyebrow{display:block;margin-bottom:var(--s3)}
.bloque .grande{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);line-height:1.35;max-width:22em}
.bloque .lead{margin-top:var(--s3);max-width:36em}

/* diagnóstico */
.diag-lista{display:grid;gap:0;margin-top:var(--s4)}
.diag-lista>div{display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:var(--s3) var(--s4);padding:var(--s3) 0;border-top:1px solid var(--hair)}
.diag-lista b{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.5vw,20px)}
.diag-lista p{font-size:15px;line-height:1.55;color:var(--mut)}
@media (max-width:700px){.diag-lista>div{grid-template-columns:1fr;gap:4px}}

/* resultado: cita protagonista */
.resultado-proy{padding:var(--s6) 0;text-align:center}
.resultado-proy .eyebrow{display:block;margin-bottom:var(--s3)}
.resultado-proy p{font-family:var(--serif);font-size:clamp(26px,3.4vw,44px);line-height:1.25;max-width:18em;margin:0 auto}

/* 3 · comparador antes/después: el protagonista */
.seccion-comp{padding:var(--s5) 0}
.seccion-comp .pista{text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-top:var(--s2)}
.comparador{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;touch-action:pan-y;box-shadow:0 21px 55px -21px rgba(32,29,21,.4)}
.comparador picture,.comparador img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comparador .capa-antes{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.comparador .division{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--oro);pointer-events:none}
.comparador .division::after{content:'⟷';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--oro);color:#F5EFE1;font-size:17px}
.comparador input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.comparador .tag{position:absolute;bottom:var(--s2);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#F2EDE3;text-shadow:0 1px 8px rgba(0,0,0,.6);pointer-events:none}
.comparador .tag.a{left:var(--s3)}.comparador .tag.b{right:var(--s3)}

/* 8 · galería editorial: una imagen por vez, mucho aire */
.galeria-ed{padding:var(--s6) 0 var(--s5)}
.galeria-ed .marco{position:relative}
.galeria-ed figure{display:none;margin:0}
.galeria-ed figure.on{display:block}
.galeria-ed img{width:100%;max-height:78svh;object-fit:contain;border-radius:6px;cursor:zoom-in;background:rgba(32,29,21,.04)}
.galeria-ed figcaption{text-align:center;font-size:13px;color:var(--mut);margin-top:var(--s2)}
.galeria-ed .controles{display:flex;justify-content:center;align-items:center;gap:var(--s4);margin-top:var(--s3)}
.galeria-ed .controles button{font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:var(--s1) var(--s3);border:1px solid var(--hair);border-radius:34px;transition:border-color .382s var(--e)}
.galeria-ed .controles button:hover{border-color:var(--oro);color:var(--oro)}
.galeria-ed .contador{font-size:12px;letter-spacing:.16em;color:var(--mut)}

/* pantalla completa */
.lightbox{position:fixed;inset:0;z-index:90;display:none;place-items:center;background:rgba(12,10,7,.94);padding:var(--s4)}
.lightbox.on{display:grid}
.lightbox img{max-width:94vw;max-height:88svh;object-fit:contain}
.lightbox .cerrar{position:absolute;top:var(--s3);right:var(--s4);color:#F2EDE3;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);color:#F2EDE3;font-size:34px;padding:var(--s3);opacity:.75}
.lightbox .nav:hover{opacity:1}
.lightbox .prev{left:var(--s2)}.lightbox .next{right:var(--s2)}

/* CTA + navegación entre proyectos */
.cta-proy{text-align:center;border-top:1px solid var(--hair);padding:var(--s6) 0}
.cta-proy p{font-family:var(--serif);font-size:clamp(19px,2vw,25px);max-width:22em;margin:0 auto}
.cta-proy .btn{display:inline-block;margin-top:var(--s4);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--papel);background:var(--oro);padding:var(--s3) var(--s5);border-radius:2px;text-decoration:none;transition:transform .382s var(--e),box-shadow .382s var(--e)}
.cta-proy .btn:hover{transform:translateY(-2px);box-shadow:0 13px 34px -13px var(--oro)}
.nav-proy{display:flex;justify-content:space-between;gap:var(--s3);border-top:1px solid var(--hair);padding:var(--s4) 0 var(--s5)}
.nav-proy a{text-decoration:none;max-width:46%}
.nav-proy a.sig{text-align:right;margin-left:auto}
.nav-proy small{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.nav-proy span{font-family:var(--serif);font-size:clamp(17px,1.7vw,21px)}
.nav-proy a:hover span{color:var(--oro)}
.pie{padding:var(--s4);border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:13px;color:var(--mut)}
.pie a{text-decoration:none;border-bottom:1px solid var(--hair)}
.pie a:hover{color:var(--tinta);border-color:var(--oro)}