/* ══════════════════════════════════════════════════════════
   REVERIE STUDIO — hoja de estilos base
   Compartida por todas las páginas. En WordPress esto será
   el style.css del tema, encolado una sola vez.
   ══════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-variable.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-italic-variable.woff2') format('woff2');
  font-weight:300 700; font-style:italic; font-display:swap;
}

:root{
  --bg:#0a0913;
  --bg-soft:#141127;
  --ink:#eeeae1;
  --ink-dim:rgba(238,234,225,.60);
  --ink-faint:rgba(238,234,225,.34);
  --lilac:#8d8fe3;
  --lilac-soft:#c3c4f2;
  --pink:#f3bfdb;
  --line:rgba(238,234,225,.13);
  --display:'Fraunces',Georgia,serif;
  --body:-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --pad:8vw;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:92px;}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--body); overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
::selection{background:var(--lilac); color:var(--bg);}
:focus-visible{outline:2px solid var(--lilac-soft); outline-offset:3px;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip{position:absolute;left:-9999px;top:0;background:var(--lilac);color:#0a0913;padding:10px 16px;z-index:9999;}
.skip:focus{left:8px;top:8px;}

.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--lilac-soft);}
.dim{color:var(--ink-dim);}

/* ══════════ CURSOR PERSONALIZADO ══════════
   Dos piezas: un punto que sigue exacto y el isotipo que
   va con retraso. Ambos en mezcla "difference", así invierten
   el color de lo que tienen debajo (idea de Nano).
   Solo se activa en dispositivos con puntero fino.        */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:9998;
  pointer-events:none; opacity:0;
  mix-blend-mode:difference;
  will-change:transform;
}
.cursor-dot{
  width:7px; height:7px; border-radius:50%;
  background:#fff; margin:-3.5px 0 0 -3.5px;
}
.cursor-ring{
  width:58px; height:52px; margin:-26px 0 0 -29px;
  transition:width .35s ease, height .35s ease, margin .35s ease;
}
.cursor-ring img{width:100%; height:100%;}
body.cursor-on{cursor:none;}
body.cursor-on a, body.cursor-on button{cursor:none;}
/* al pasar sobre algo clickeable el isotipo crece */
body.cursor-hot .cursor-ring{width:104px;height:94px;margin:-47px 0 0 -52px;}
@media (hover:none), (pointer:coarse){
  .cursor-dot,.cursor-ring{display:none!important;}
  body.cursor-on{cursor:auto;}
}

/* ══════════ NAV ══════════ */
.topnav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; justify-content:space-between; align-items:center;
  padding:20px var(--pad);
  background:linear-gradient(180deg,rgba(10,9,19,.88),rgba(10,9,19,0));
  transition:background .4s ease, padding .4s ease;
}
.topnav.solid{background:rgba(10,9,19,.93); backdrop-filter:blur(10px); padding:14px var(--pad);}
.topnav .logo img{height:28px; width:auto;}
.navlinks{display:flex; gap:30px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;}
.navlinks a{color:var(--ink-dim); transition:color .3s;}
.navlinks a:hover, .navlinks a[aria-current="page"]{color:var(--ink);}
.navtoggle{display:none;background:none;border:0;color:var(--ink);font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
@media(max-width:780px){
  .navlinks{
    position:fixed; inset:0; background:rgba(10,9,19,.98);
    flex-direction:column; justify-content:center; align-items:center; gap:26px;
    font-size:15px; letter-spacing:.2em;
    opacity:0; pointer-events:none; transition:opacity .35s ease;
  }
  .navlinks.open{opacity:1; pointer-events:auto;}
  .navtoggle{display:block; position:relative; z-index:1;}
}

/* ══════════ ESCENARIO POR CAPAS ══════════ */
.stage{position:relative; height:100svh; min-height:600px; overflow:hidden;}
.layer{
  position:absolute; inset:-10% -6%;
  width:112%; height:120%;
  will-change:transform;
}
.layer-inner{width:100%; height:100%; will-change:transform;}
.layer img{width:100%; height:100%; object-fit:cover;}
.l-sky{z-index:1}
.l-moon{z-index:2}
.l-water{z-index:3}
.stage-scrim{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,19,.62) 0%,rgba(10,9,19,.06) 42%,rgba(10,9,19,.94) 100%);
}
.stage-copy{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 var(--pad);
}
.scrollcue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:6;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
.scrollcue i{width:1px;height:36px;background:linear-gradient(var(--ink-faint),transparent);animation:cue 2s ease-in-out infinite;}
@keyframes cue{0%{opacity:0;transform:scaleY(.2);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}100%{opacity:0;transform-origin:bottom;transform:scaleY(.2)}}

/* Nubes decorativas que entran con el scroll.
   La máscara radial difumina los bordes: sin ella se ve
   el rectángulo de la foto recortado a cuchillo. */
.drift{
  position:absolute; pointer-events:none; z-index:0;
  opacity:0; will-change:transform,opacity;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, #000 0%, rgba(0,0,0,.7) 48%, transparent 78%);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, #000 0%, rgba(0,0,0,.7) 48%, transparent 78%);
}
.drift img{width:100%;height:auto;filter:saturate(1.15);}

/* ══════════ TIPOGRAFÍA DE PÁGINA ══════════ */
.h-xl{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(40px,8vw,116px);line-height:1;letter-spacing:-.015em;}
.h-lg{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(32px,5.4vw,70px);line-height:1.05;}
.h-md{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(26px,3.6vw,44px);line-height:1.15;}
.h-sm{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(21px,2.5vw,29px);line-height:1.25;}
.lede{font-size:clamp(16px,1.7vw,20px);line-height:1.65;color:var(--ink-dim);max-width:46ch;}
.body-p{font-size:16px;line-height:1.8;color:var(--ink-dim);}
.word{display:inline-block;will-change:transform,opacity;}

.section{padding:min(15vw,140px) var(--pad); position:relative;}
.section-tight{padding:min(10vw,90px) var(--pad); position:relative;}
.rule-h{height:1px;background:var(--line);border:0;}

/* revelado al hacer scroll */
.reveal{opacity:0; transform:translateY(28px);}

/* ══════════ PIE ══════════ */
.site-footer{padding:80px var(--pad) 40px; border-top:1px solid var(--line); position:relative; overflow:hidden;}
.site-footer .logo img{height:46px;width:auto;margin-bottom:34px;}
.foot-grid{display:flex;gap:70px;flex-wrap:wrap;font-size:13px;}
.foot-grid div{display:flex;flex-direction:column;gap:10px;}
.foot-grid a{color:var(--ink-dim);}
.foot-grid a:hover{color:var(--ink);}
.foot-note{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ══════════ ETIQUETA DE BOCETO ══════════ */
.draft-badge{
  position:fixed;z-index:190;bottom:18px;left:18px;
  background:rgba(10,9,19,.86);border:1px solid var(--line);backdrop-filter:blur(6px);
  padding:8px 14px;border-radius:100px;font-size:11px;color:var(--ink-dim);
  display:flex;align-items:center;gap:8px;
}
.draft-badge i{width:6px;height:6px;border-radius:50%;background:var(--pink);flex:none;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(max-width:520px){.draft-badge span{display:none;}}

/* ══════════ MOVIMIENTO REDUCIDO ══════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important; transition:none!important;}
  .reveal{opacity:1; transform:none;}
  .drift{opacity:.4;}
  .cursor-dot,.cursor-ring{display:none!important;}
  body.cursor-on{cursor:auto;}
}