/* ============================================================
   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;animation:lb-entra .2s var(--e)}
.lightbox.cerrando{display:grid;animation:lb-sale .2s var(--e) forwards}
@keyframes lb-entra{from{opacity:0}to{opacity:1}}
@keyframes lb-sale{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.lightbox.on,.lightbox.cerrando{animation:none}}
.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)}

/* la reflexión: el cierre filosófico de cada caso */
.reflexion{text-align:center;padding:0 0 var(--s6)}
.reflexion .eyebrow{display:block;margin-bottom:var(--s3)}
.reflexion p{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,28px);line-height:1.4;max-width:24em;margin:0 auto}

/* impacto (opcional) */
.impacto{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:var(--s4) 0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-bottom:var(--s5)}
.impacto p{font-size:14.5px;line-height:1.5;color:var(--mut);padding-left:var(--s3);position:relative}
.impacto p::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:1.5px;background:var(--oro)}
@media (max-width:900px){.impacto{grid-template-columns:1fr}}

/* ---------- índice editorial de casos ---------- */
.apertura-casos{text-align:center;padding:var(--s6) 0 var(--s5)}
.apertura-casos h1{font-size:clamp(30px,4.4vw,56px);max-width:16em;margin:var(--s2) auto 0}
.apertura-casos .lead{margin:var(--s3) auto 0;max-width:26em}
.filtros{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;margin-top:var(--s4)}
.filtros button{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:var(--s2) var(--s3);border:1px solid var(--hair);border-radius:34px;transition:border-color .382s var(--e)}
.filtros button:hover{border-color:var(--oro)}
.filtros button.sel{border-color:var(--oro);color:var(--oro);box-shadow:inset 0 0 0 1px var(--oro)}
.etiqueta{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro);border:1px solid currentColor;border-radius:34px;padding:3px 10px}

/* caso de portada */
.portada-caso{display:block;position:relative;min-height:70svh;border-radius:10px;overflow:hidden;text-decoration:none;margin-bottom:var(--s6)}
.portada-caso picture,.portada-caso img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--e)}
@media (hover:hover) and (pointer:fine){.portada-caso:hover img{transform:scale(1.02)}}
.portada-caso .sobre{position:absolute;inset:auto 0 0 0;padding:var(--s6) var(--s4) var(--s4);background:linear-gradient(transparent,rgba(10,9,6,.7));color:#F2EDE3}
.portada-caso h2{font-size:clamp(28px,3.8vw,50px);max-width:18em}
.portada-caso .tesis{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.6vw,20px);color:rgba(242,237,227,.85);margin-top:var(--s2);max-width:30em}
.portada-caso .etiqueta{color:#E9CD8B;margin-bottom:var(--s2)}

/* spreads editoriales: 61.8 / 38.2 */
.spread{display:grid;grid-template-columns:61.8fr 38.2fr;gap:var(--s5);align-items:center;padding:var(--s5) 0;border-top:1px solid var(--hair)}
.spread.alt{grid-template-columns:38.2fr 61.8fr}
.spread.alt .lado-img{order:2}
.spread .lado-img{border-radius:8px;overflow:hidden;display:block}
.spread img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s var(--e)}
@media (hover:hover) and (pointer:fine){.spread .lado-img:hover img{transform:scale(1.02)}}
.spread h2{font-size:clamp(24px,2.8vw,36px);margin-top:var(--s2)}
.spread h2 a{text-decoration:none}
.spread h2 a:hover{color:var(--oro)}
.spread .tesis{font-family:var(--serif);font-style:italic;font-size:clamp(15.5px,1.4vw,18px);color:var(--mut);margin-top:var(--s2)}
.spread .meta{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);margin-top:var(--s3)}
.spread .ver{display:inline-block;margin-top:var(--s3);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--oro);text-decoration:none;border-bottom:1px solid var(--oro);padding-bottom:2px}
.spread[hidden]{display:none}
.portada-caso[hidden]{display:none}
@media (max-width:900px){.spread,.spread.alt{grid-template-columns:1fr}.spread.alt .lado-img{order:0}}

/* cierre comercial del índice */
.cierre-casos{text-align:center;border-top:1px solid var(--hair);padding:var(--s6) 0}
.cierre-casos p{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);max-width:18em;margin:0 auto}
.cierre-casos .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}

/* pie legal y redes: enlaces de texto, sobrios */
.pie .legal{font-size:12px;color:var(--mut)}
.pie .legal a{text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px}
.pie .legal a:hover{color:var(--oro);border-color:var(--oro)}
/* créditos profesionales: línea propia, hairline, sin jerarquía */
.pie .creditos{flex:0 0 100%;text-align:center;font-family:'Archivo Narrow',var(--sans);font-size:11px;letter-spacing:.02em;color:#7a7368;border-top:1px solid var(--hair);padding-top:var(--s2);margin-top:var(--s1)}
a:focus-visible,button:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:2px}