/* KAIORI · subpáginas (casos y legales) sobre el mundo oscuro */
@font-face{font-family:"Marcellus";src:url("fonts/Marcellus-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/CormorantGaramond-500i.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/Manrope-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/Manrope-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --volcanic:#0B0B0D;--ivory:#F5F0E8;--gold:#C8A86A;
  --iv-70:rgba(245,240,232,.88);--iv-55:rgba(245,240,232,.74);
  --iv-14:rgba(245,240,232,.14);--iv-08:rgba(245,240,232,.08);
  --glass:rgba(18,16,13,.55);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --serif:"Marcellus",Georgia,serif;
  --serif-i:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  background:var(--volcanic);color:var(--ivory);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
::selection{background:var(--gold);color:var(--volcanic)}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:.01em}

/* el mismo aire del hero: una brasa dorada al fondo y grano encima */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 76% 18%,rgba(200,168,106,.10) 0%,rgba(200,168,106,0) 62%),
    radial-gradient(ellipse 90% 70% at 12% 92%,rgba(200,168,106,.05) 0%,rgba(200,168,106,0) 60%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

.skip{position:absolute;left:-999px;top:0;background:var(--ivory);color:var(--volcanic);padding:.6rem 1rem;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.label{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--iv-55);border-left:2px solid var(--gold);padding-left:.85em;display:inline-block;
}

body>nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1.2rem,4vw,3.2rem);
  background:rgba(11,11,13,.6);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--iv-08);
}
.wordmark{font-family:var(--serif);font-size:1.2rem;letter-spacing:.42em;text-decoration:none;padding-left:.42em}
.back{
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:3px;transition:color .3s;
}
.back:hover{color:var(--gold)}

main{position:relative;z-index:2}
section{padding:0 clamp(1.2rem,5vw,4rem)}
.frame{max-width:1100px;margin:0 auto}
.narrow{max-width:760px;margin:0 auto}

/* ── Portada de caso ── */
.sub-hero{padding-top:clamp(7rem,17vh,11rem);padding-bottom:clamp(2.5rem,7vh,4.5rem)}
.sub-hero h1{font-size:clamp(2.6rem,7vw,5rem);margin:.32em 0 .28em}
.sub-hero .lede{
  font-family:var(--serif-i);font-style:italic;color:var(--iv-70);
  font-size:clamp(1.1rem,2vw,1.5rem);max-width:32ch;
}
.gold-link{
  text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px;
  font-size:13px;letter-spacing:.1em;transition:color .3s;
}
.gold-link:hover{color:var(--gold)}
.sub-meta{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,4vw,3.2rem);margin-top:clamp(1.6rem,4vh,2.4rem)}
.sub-meta div span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--iv-55);margin-bottom:.3em}
.sub-meta div b{font-family:var(--serif);font-weight:400;font-size:1.05rem}

/* ── Navegador de escritorio ── */
.device-browser{
  border:1px solid var(--iv-14);border-radius:12px;overflow:hidden;
  background:rgba(10,10,12,.75);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.device-browser .bar{
  display:flex;align-items:center;gap:7px;padding:.72rem .9rem;
  background:rgba(245,240,232,.05);border-bottom:1px solid var(--iv-08);
}
.device-browser .bar i{width:9px;height:9px;border-radius:50%;background:var(--iv-14);display:block}
.device-browser .bar i:first-child{background:rgba(200,168,106,.55)}
.device-browser video,.device-browser img{width:100%;display:block}

/* ── Qué se conservó / qué se rehízo ── */
.case-boxes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.8rem);margin-top:clamp(2.5rem,7vh,4.5rem)}
.glass{
  background:var(--glass);border:1px solid var(--iv-08);border-radius:10px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.case-box{padding:clamp(1.4rem,2.8vw,2.2rem);border-top:2px solid var(--gold)}
.case-box ul{list-style:none;margin-top:1rem;display:grid;gap:.7rem}
.case-box li{color:var(--iv-70);padding-left:1.1em;position:relative}
.case-box li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1px;background:var(--gold)}

/* ── Mockups ── */
.case-mocks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.8rem);margin-top:clamp(2.5rem,7vh,4.5rem)}
.case-mock{overflow:hidden;border-radius:10px}
.case-mock img{width:100%;transition:transform .8s var(--ease-out)}
.case-mock:hover img{transform:scale(1.02)}
.shot-cap{font-size:12px;color:var(--iv-55);margin-top:.7rem;letter-spacing:.03em}
figure{margin:0}
.phone{
  max-width:300px;margin:0 auto;border:1px solid var(--iv-14);border-radius:26px;
  overflow:hidden;background:rgba(10,10,12,.8);padding:8px;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.phone img{border-radius:18px}

/* ── Texto de caso ── */
.case-text{margin-top:clamp(2.5rem,7vh,4.5rem)}
.case-text h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:.5em}
.case-text p{color:var(--iv-70);max-width:62ch;margin-bottom:1em}
.case-text p strong{color:var(--ivory);font-weight:400}
.pull{
  font-family:var(--serif-i);font-style:italic;font-size:clamp(1.25rem,2.6vw,1.9rem);
  color:var(--ivory);border-left:2px solid var(--gold);padding-left:1.2rem;
  margin:clamp(2rem,5vh,3rem) 0;max-width:30ch;line-height:1.45;
}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem);margin-top:clamp(1.6rem,4vh,2.6rem)}
.fact{background:var(--glass);border:1px solid var(--iv-08);border-top:2px solid var(--gold);border-radius:10px;padding:clamp(1.2rem,2.4vw,1.8rem)}
.fact b{display:block;font-family:var(--serif);font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:400;color:var(--gold)}
.fact span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--iv-55)}

/* ── Siguiente caso y cierre ── */
.case-next{
  margin-top:clamp(3.5rem,10vh,7rem);border-top:1px solid var(--iv-08);
  padding-top:clamp(2.5rem,6vh,4rem);padding-bottom:clamp(3rem,8vh,5rem);
}
.case-next h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-top:.4em}
.case-next h2 a{text-decoration:none;border-bottom:1px solid rgba(200,168,106,.5);transition:color .4s,border-color .4s}
.case-next h2 a:hover{color:var(--gold);border-color:var(--gold)}
.cta-row{margin-top:clamp(1.6rem,4vh,2.4rem)}
.btn{
  display:inline-block;font-size:13px;font-weight:500;letter-spacing:.06em;text-decoration:none;
  border-radius:999px;padding:.78em 1.7em;background:var(--ivory);color:var(--volcanic);border:1px solid var(--ivory);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -14px rgba(200,168,106,.5)}

/* ── Legales ── */
.legal-main{padding-top:clamp(7rem,16vh,10rem);padding-bottom:clamp(4rem,10vh,7rem)}
.legal-main h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:.3em 0 .2em}
.legal-sec{margin-top:clamp(2rem,5vh,3rem)}
.legal-sec h2{font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--ivory);margin-bottom:.6em}
.legal-sec p{color:var(--iv-70);max-width:66ch;margin-bottom:.8em}
.legal-sec a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(200,168,106,.4)}

/* Pie: el logo en el centro, sin cortar la escena */
footer{
  position:relative;z-index:10;
  background:linear-gradient(180deg,rgba(5,5,8,0) 0%,rgba(5,5,8,.42) 52%,rgba(5,5,8,.78) 100%);
  padding:clamp(2.2rem,6vh,3.6rem) clamp(1.2rem,5vw,4rem) clamp(1.1rem,2.4vh,1.5rem);
}
.foot-inner{max-width:760px;margin:0 auto;display:grid;justify-items:center;gap:clamp(1rem,2.4vh,1.5rem)}
.foot-logo{
  width:min(250px,52vw);height:auto;opacity:.78;
  filter:drop-shadow(0 2px 14px rgba(5,5,8,.85));
  transition:opacity .7s var(--ease-out);
}
footer:hover .foot-logo{opacity:1}
.foot-row{
  display:flex;justify-content:center;align-items:center;
  gap:.5rem 1.5rem;flex-wrap:wrap;font-size:11.5px;color:var(--iv-55);
  text-align:center;text-shadow:0 1px 8px rgba(5,5,8,.9);
}
.foot-row nav{display:flex;gap:1.5rem;flex-wrap:wrap}
footer a{text-decoration:none;transition:color .3s}
footer a:hover{color:var(--gold)}

.reveal{opacity:0;transform:translateY(24px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}

@media (max-width:820px){
  .case-boxes,.case-mocks,.facts{grid-template-columns:1fr}
}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
}