@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fuentes/jetbrains-mono-35c2a72b.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fuentes/fraunces-e75e106b.woff2) format('woff2')}

:root{
  /* medidos sobre el maestro 4K del logotipo */
  --navy:#243C90;        /* azul del wordmark */
  --navy-core:#0D206F;   /* nucleo saturado del monograma, H=228 */
  --navy-d:#152A6B;
  --brick:#9D3023;       /* acento real: rojo ladrillo, H=6.5 S=77% */
  --brick-l:#D96B54;     /* el mismo matiz aclarado, para texto sobre azul */
  --ink:#0A1440; --ink2:#081136; --bone:#F1EFEA; --dim:#8D9AC4; --soft:#B4BEDC;
  --terra:var(--brick); --terra-l:var(--brick-l);
  --on-navy:#E8927C; --on-navy-2:#BCC8E9; --rule:rgba(241,239,234,.16);
  --paper:#F1EFEA; --on-paper:#141922; --on-paper-soft:#4A5262;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* ══════ ESCALA EN PANTALLA ANCHA ══════
   Una sola palanca. Los cuerpos de texto de esta hoja van en rem y las columnas
   en ch, asi que la raiz los mueve todos a la vez y en proporcion. Por debajo de
   ~1270 px el clamp devuelve 16 px clavados: el movil no se entera. */
html{font-size:clamp(16px, 8px + 0.63vw, 20px)}
body{background:var(--ink); color:var(--bone);
  font-family:'JetBrains Mono',ui-monospace,monospace; overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--terra-l); outline-offset:3px}
img{display:block}
.mono{font-family:'JetBrains Mono',monospace; font-size:.63rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim)}
.pad{padding-left:clamp(20px,4vw,54px); padding-right:clamp(20px,4vw,54px)}

/* ══════ NAV ══════ */
nav{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; gap:24px;
  padding:12px clamp(20px,4vw,54px); background:var(--paper);
  border-bottom:1px solid #D6D3CC; transition:padding .35s ease, box-shadow .35s ease}
nav img{height:clamp(46px, 3.9vw, 62px); width:auto; flex:none;
  transition:height .35s cubic-bezier(.16,1,.3,1)}
nav.stuck img{height:clamp(40px, 3.2vw, 50px)}
nav .lk{margin-left:auto; display:flex; align-items:center; gap:clamp(12px,1.9vw,28px)}
nav a{color:var(--navy); text-decoration:none; font-family:'JetBrains Mono',monospace;
  font-size:.61rem; letter-spacing:.17em; text-transform:uppercase; transition:color .2s}
nav a:hover{color:var(--brick)}
nav .go{color:var(--paper); background:var(--navy); padding:12px 20px; border:1px solid var(--navy); transition:background .25s, border-color .25s}
nav .go:hover{background:var(--brick); border-color:var(--brick); color:var(--paper)}
nav .badge{font-size:.5rem; letter-spacing:.1em; color:var(--brick); margin-left:5px}
@media(max-width:1000px){nav .lk a:not(.go){display:none}}
/* ── la barra entera es de papel: el logotipo original no necesita placa ── */
nav .marca{display:flex; align-items:center; flex:none}
nav.stuck{box-shadow:0 8px 30px -22px rgba(10,20,64,.9)}


/* ══════ ENTRADA ══════ */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; overflow:hidden}
.band canvas.glsec{position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block}
/* ── el monograma en metal liquido ──────────────────────────────────────────
   La clase es 'monograma' y no 'mono': 'mono' ya existe en la maqueta como
   tipografia monoespaciada y una regla que la pise saca de flujo medio sitio.

   Va centrado en la mitad libre, no pegado al borde: la banda parte en dos, el
   texto ocupa una mitad y el monograma el centro de la otra.

   La proporcion es la de la textura (469x808) para que el logotipo llene el
   lienzo sin franjas vacias. El vaiven es de ida y vuelta, nunca vuelta entera:
   un logotipo plano que gira 360 grados se lee en espejo la mitad del tiempo.
── */
.band .monograma{position:absolute; z-index:2; top:50%; height:min(54%,360px);
  aspect-ratio:.5804; transform:translate(-50%,-50%); perspective:1500px;
  pointer-events:none}
.band.r .monograma{left:75%}
.band.l .monograma{left:25%}
.band .monograma canvas{width:100%; height:100%; display:block;
  animation:vaiven 13s ease-in-out infinite}
.band.l .monograma canvas{animation-direction:reverse}
@keyframes vaiven{0%,100%{transform:rotateY(-16deg)} 50%{transform:rotateY(16deg)}}
/* Entre 640 y 900 el texto se ensancha pero sigue en su mitad, asi que el
   monograma se queda en la suya: solo se achica. NUNCA se centra en toda la
   banda — quedaria encima del texto, que es justo lo que no debe pasar. */
@media(max-width:900px){
  .band .monograma{height:min(48%,290px)}
}
/* Por debajo de 640 el texto ocupa el ancho completo y ya no hay mitad libre.
   Ahi el monograma sube a su propia franja, ARRIBA del texto y en flujo normal,
   nunca detras: una marca de agua bajo el texto se probo y se rechazo. */
@media(max-width:640px){
  /* la columna va en .band, no en .inner: el monograma es HERMANO de .inner,
     no hijo suyo, asi que ordenarlo dentro de .inner no lo mueve de sitio */
  .band{flex-direction:column; justify-content:center}
  .band .monograma, .band.r .monograma, .band.l .monograma{
    position:relative; left:auto; top:auto; transform:none;
    height:220px; margin:0 auto 22px; order:-1}
}
@media(prefers-reduced-motion:reduce){.band .monograma canvas{animation:none}}
.band.r canvas.glsec ~ .veil{background:linear-gradient(97deg, rgba(10,20,64,.95) 0%,
  rgba(10,20,64,.86) 30%, rgba(10,20,64,.6) 46%, rgba(10,20,64,.15) 64%, rgba(10,20,64,0) 82%)}
.band.l canvas.glsec ~ .veil{background:linear-gradient(263deg, rgba(10,20,64,.95) 0%,
  rgba(10,20,64,.86) 30%, rgba(10,20,64,.6) 46%, rgba(10,20,64,.15) 64%, rgba(10,20,64,0) 82%)}
.hero #gl{position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block;
  opacity:0; animation:settle 1.8s ease .25s forwards}
.hero #gl-obj{position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block;
  opacity:0; animation:settle 2.4s ease .6s forwards; pointer-events:none}
@keyframes settle{to{opacity:1}}
.hero{background:
  radial-gradient(120% 90% at 78% 18%, #17265E 0%, rgba(23,38,94,0) 60%),
  radial-gradient(90% 70% at 12% 82%, #101C4C 0%, rgba(16,28,76,0) 65%), var(--ink)}
.hero .veil{background:linear-gradient(97deg, rgba(8,16,52,.95) 0%, rgba(8,16,52,.9) 26%,
  rgba(8,16,52,.72) 42%, rgba(8,16,52,.3) 60%, rgba(8,16,52,0) 80%)}
.hero .hint{position:absolute; right:clamp(20px,4vw,54px); bottom:100px; z-index:4;
  font-family:'JetBrains Mono',monospace; font-size:.55rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); opacity:0; animation:fade .8s ease 2.4s forwards}
@media(max-width:900px){.hero .hint{display:none}}
.veil{position:absolute; inset:0; z-index:1;
  background:linear-gradient(97deg, rgba(10,20,64,.95) 0%, rgba(10,20,64,.88) 26%,
    rgba(10,20,64,.78) 40%, rgba(10,20,64,.34) 55%, rgba(10,20,64,0) 72%)}
.vign{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 66% 45%, rgba(10,20,64,0) 40%, rgba(10,20,64,.6) 100%)}
.hero .inner{position:relative; z-index:5; flex:1; display:flex; align-items:center;
  padding-top:96px}
.copy{max-width:min(50ch,46vw)}
@media(max-width:900px){.copy{max-width:none}}
.eyeb{display:flex; align-items:center; gap:12px; margin-bottom:clamp(16px,2vw,26px);
  opacity:0; animation:fade .7s ease .9s forwards}
.eyeb i{display:block; width:clamp(22px,3.4vw,46px); height:1px; background:var(--terra-l); font-style:normal}
@keyframes fade{to{opacity:1}}
h1{font-family:'Fraunces',Georgia,serif; font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120;
  font-weight:500; font-size:clamp(2.1rem, 1.1rem + 3.4vw, 4.15rem); line-height:1.02;
  letter-spacing:-.033em; margin:0; color:var(--bone); max-width:16ch}
h1 .l{display:block; overflow:hidden}
h1 .l > i{display:block; font-style:normal; transform:translateY(103%);
  animation:rise 1.05s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rise{to{transform:none}}
h1 em{font-style:italic; color:var(--terra-l)}
.sub{margin:clamp(20px,2.6vw,32px) 0 0; max-width:42ch; font-size:.79rem; line-height:1.95;
  color:var(--soft); opacity:0; animation:fade .8s ease 1.5s forwards}
.cta{display:flex; margin-top:clamp(24px,3vw,38px); flex-wrap:wrap;
  opacity:0; animation:fade .8s ease 1.65s forwards}
.cta a{text-decoration:none; font-family:'JetBrains Mono',monospace; font-size:.63rem;
  letter-spacing:.19em; text-transform:uppercase; padding:16px 27px; border:1px solid var(--bone);
  color:var(--ink); background:var(--bone); position:relative; overflow:hidden; transition:color .3s}
.cta a + a{background:transparent; color:var(--bone); border-left:0}
.cta a span{position:relative; z-index:1}
.cta a::before{content:''; position:absolute; inset:0; background:var(--terra);
  transform:translateY(101%); transition:transform .36s cubic-bezier(.7,0,.25,1)}
.cta a:hover{color:var(--bone)}
.cta a:hover::before{transform:translateY(0)}
.hero .base{position:relative; z-index:5; display:flex; gap:clamp(16px,3vw,46px); flex-wrap:wrap;
  align-items:flex-end; padding-top:24px; padding-bottom:34px; border-top:1px solid var(--rule);
  margin:0 clamp(20px,4vw,54px); opacity:0; animation:fade .8s ease 1.85s forwards}
.hero .base b{display:block; font-family:'JetBrains Mono',monospace; font-size:.72rem;
  letter-spacing:.06em; color:var(--bone); font-weight:400; margin-top:6px; text-transform:none}
.hero .base .cue{margin-left:auto; display:flex; align-items:center; gap:10px}
.hero .base .cue i{display:block; width:1px; height:24px; background:var(--rule);
  position:relative; overflow:hidden; font-style:normal}
.hero .base .cue i::after{content:''; position:absolute; inset:0; background:var(--terra-l);
  animation:cue 2.1s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}

/* ══════ TIPOGRAFIA CON MOVIMIENTO ══════ */
/* cada palabra sube desde su propia mascara; el retardo lo pone el JS */
.pal{display:inline-block; overflow:hidden; vertical-align:bottom;
  padding:.02em .04em .10em 0; margin:0 -.04em -.10em 0}
.pal > i{display:inline-block; font-style:inherit; transform:translateY(112%);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1) var(--w,0s)}
.rv.in .pal > i, .hd.in .pal > i{transform:none}
@media(prefers-reduced-motion:reduce){ .pal > i{transform:none; transition:none} }

/* los titulos sobre azul se despegan del fondo */
h1, .band h2, .close h2, .dark.navy h2{text-shadow:0 20px 44px rgba(3,8,30,.55)}
.band h2 em, .close h2 em, .dark.navy h2 em{text-shadow:0 18px 38px rgba(60,10,4,.35)}

/* el antetitulo estrena raya */
.fol{position:relative; padding-left:0}
.fol::before{content:''; display:inline-block; width:0; height:1px; margin:0 12px 4px 0;
  background:var(--terra-l); vertical-align:middle;
  transition:width .9s cubic-bezier(.16,1,.3,1) .12s}
.rv.in .fol::before, .fol.in::before{width:clamp(22px,3.4vw,46px)}

/* el folio de cada seccion, como en un impreso */
.folio{position:absolute; top:clamp(18px,2.4vw,34px); right:clamp(20px,4vw,54px); z-index:6;
  font-family:'JetBrains Mono',monospace; font-size:.55rem; letter-spacing:.22em;
  color:var(--dim); opacity:0; transform:translateY(-6px);
  transition:opacity .8s ease .25s, transform .8s cubic-bezier(.16,1,.3,1) .25s}
.folio b{color:var(--terra-l); font-weight:400}
.seccion-vista .folio{opacity:.85; transform:none}
.dark.paper .folio{color:var(--on-paper-soft)}
@media(max-width:760px){.folio{display:none}}

/* ══════ REVELADO ══════ */
.rv{opacity:0; transform:translateY(20px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1) var(--d,0s), transform .85s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.rv.in{opacity:1; transform:none}

/* ══════ BANDA CON OBJETO ══════ */
.band{position:relative; min-height:88svh; display:flex; align-items:center; overflow:hidden}
.band .shot{position:absolute; inset:0; z-index:0}
.shot::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--navy); mix-blend-mode:overlay; opacity:.64}
.shot::before{content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:var(--navy-d); mix-blend-mode:soft-light; opacity:.55}
.band .shot img{width:100%; height:100%; object-fit:cover; will-change:transform}
.band .inner{position:relative; z-index:3; width:100%}
.band .txt{max-width:min(46ch,44vw)}
@media(max-width:900px){.band .txt{max-width:none} .band{min-height:auto; padding:64px 0}}
/* imagen a la derecha, texto a la izquierda */
.band.r .shot img{object-position:84% 50%}
.band.r .veil{background:linear-gradient(97deg, rgba(10,20,64,.97) 0%, rgba(10,20,64,.94) 30%,
  rgba(10,20,64,.86) 44%, rgba(10,20,64,.45) 60%, rgba(10,20,64,.05) 80%)}
/* imagen a la izquierda, texto a la derecha */
.band.l .shot img{object-position:16% 50%}
.band.l .veil{background:linear-gradient(263deg, rgba(10,20,64,.97) 0%, rgba(10,20,64,.94) 30%,
  rgba(10,20,64,.86) 44%, rgba(10,20,64,.45) 60%, rgba(10,20,64,.05) 80%)}
.band.l .inner{display:flex; justify-content:flex-end}
.fol{font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--terra-l); margin-bottom:16px}
h2{font-family:'Fraunces',serif; font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 90;
  font-weight:500; font-size:clamp(1.65rem, 1.05rem + 2.1vw, 3.05rem); line-height:1.02;
  letter-spacing:-.032em; margin:0; max-width:15ch; color:var(--bone)}
h2 em{font-style:italic; color:var(--terra-l)}
.band p{margin:22px 0 0; font-size:.78rem; line-height:1.95; color:var(--soft); max-width:44ch}
.mini{margin:26px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
/* la raya va colgada, no en una columna de rejilla: con rejilla, un <b> dentro
   del renglon cuenta como celda aparte y el texto se cae a la columna de 16px,
   partiendose palabra por palabra. Paso en «Método», que es la unica lista con
   negritas. */
.mini li{position:relative; padding-left:27px; font-size:.72rem;
  line-height:1.75; color:var(--soft)}
.mini li::before{content:'\2014'; position:absolute; left:0; top:0; color:var(--terra-l)}
.more{display:inline-block; margin-top:28px; text-decoration:none;
  font-family:'JetBrains Mono',monospace; font-size:.61rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--bone); border-bottom:1px solid var(--terra);
  padding-bottom:6px; transition:color .25s, border-color .25s}
.more:hover{color:var(--terra-l); border-color:var(--terra-l)}

/* ══════ SECCIÓN OSCURA ══════ */
.dark{padding:clamp(66px,8vw,120px) 0; background:var(--ink2); border-top:1px solid var(--rule)}
.dark.navy{background:var(--navy); border-top-color:rgba(237,234,228,.2)}
.dark.paper{background:var(--paper); color:var(--on-paper); border-top-color:#D6D3CC}
#radar{position:relative; overflow:hidden}
#radar > .pad{position:relative; z-index:1}
#gl-rad{position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block;
  opacity:.55; mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%)}
.dark.paper h2{color:var(--navy)}
.dark.paper .hd{border-bottom-color:#CFCBC3}
.dark.paper .hd p{color:var(--on-paper-soft)}
.dark.paper .nr{border-bottom-color:#DEDBD4}
.dark.paper .nr:hover{background:rgba(36,60,144,.07)}
.dark.paper .nr time{color:var(--terra)}
.dark.paper .nr p{color:var(--on-paper)}
.dark.paper .nr small{color:var(--on-paper-soft)}
.dark.paper .nr .src{color:var(--navy)}
.dark.paper .aviso{color:var(--on-paper-soft)}
.dark.navy .hd{border-bottom-color:rgba(237,234,228,.26)}
.dark.navy .hd p{color:var(--on-navy-2)}
.dark.navy .row{border-bottom-color:rgba(237,234,228,.18)}
.dark.navy .row:hover{background:rgba(237,234,228,.07)}
.dark.navy .row .n{color:var(--on-navy-2)}
.dark.navy .row p{color:var(--on-navy-2)}
.dark.navy .row .m{color:var(--on-navy-2)}
.dark.navy .row .m.pr{color:var(--on-navy)}
.hd{display:flex; gap:28px; flex-wrap:wrap; align-items:baseline;
  border-bottom:1px solid var(--rule); padding-bottom:24px}
.hd p{margin:0 0 0 auto; max-width:32ch; font-size:.74rem; line-height:1.9; color:var(--dim)}
@media(max-width:800px){.hd p{margin-left:0}}
.row{position:relative; display:grid; grid-template-columns:86px 1fr 116px; gap:22px;
  align-items:start; padding:26px 0; border-bottom:1px solid var(--rule);
  transition:padding-left .45s cubic-bezier(.16,1,.3,1), background .35s}
.row:hover{padding-left:18px; background:rgba(237,234,228,.04)}
/* la raya de la marca se dibuja de izquierda a derecha al pasar */
.row::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--terra); transform:scaleX(0); transform-origin:left;
  transition:transform .55s cubic-bezier(.16,1,.3,1)}
.row:hover::after{transform:scaleX(1)}
.row .n{font-family:'Fraunces',serif; font-variation-settings:'WONK' 1; font-weight:400;
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.5rem); line-height:.9; letter-spacing:-.02em;
  color:var(--dim); opacity:.5; transition:color .35s, opacity .35s, transform .45s cubic-bezier(.16,1,.3,1)}
.row:hover .n{color:var(--terra-l); opacity:1; transform:translateY(-2px)}
.row h3{font-family:'Fraunces',serif; font-variation-settings:'WONK' 1; font-weight:500;
  font-size:clamp(1.25rem,1rem + 1vw,1.95rem); letter-spacing:-.025em; margin:0 0 9px;
  line-height:1.1; transition:transform .45s cubic-bezier(.16,1,.3,1)}
.row:hover h3{transform:translateX(6px)}
.row p{margin:0; font-size:.72rem; line-height:1.9; color:var(--dim); max-width:58ch;
  transition:color .35s}
.row:hover p{color:var(--soft)}
.row .m{font-size:.55rem; letter-spacing:.17em; text-transform:uppercase; color:var(--dim);
  text-align:right; padding-top:6px}
.row .m.pr{color:var(--terra-l)}
}
@media(max-width:760px){
  .row{grid-template-columns:42px 1fr; gap:14px}
  .row .m{grid-column:2; text-align:left; margin-top:8px}
}
/* radar */
.nr{display:grid; grid-template-columns:104px 1fr 78px; gap:20px; align-items:baseline;
  padding:19px 0; border-bottom:1px solid var(--rule); transition:padding-left .35s ease, background .3s}
.nr:hover{padding-left:14px; background:rgba(237,234,228,.035)}
.nr time{font-size:.66rem; color:var(--terra-l)}
.nr p{margin:0; font-size:.78rem; line-height:1.65; color:var(--bone); max-width:70ch}
.nr small{display:block; font-size:.55rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); margin-top:6px}
.nr .src{font-size:.57rem; letter-spacing:.14em; color:var(--dim); text-align:right}
.aviso{margin-top:26px; font-size:.63rem; line-height:1.85; color:var(--dim); max-width:70ch}
a.nr{text-decoration:none; color:inherit}
a.nr:focus-visible{outline:1px solid var(--terra-l); outline-offset:4px}
/* la nota mas reciente manda: va grande y arriba */
.alta{display:block; text-decoration:none; color:inherit; position:relative;
  padding:30px 0 34px; border-bottom:1px solid #CFCBC3}
.alta .cab{display:flex; align-items:baseline; gap:18px}
.alta time{font-size:.62rem; letter-spacing:.14em; color:var(--brick)}
.alta .marca-ult{font-size:.55rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-paper-soft)}
.alta .src{margin-left:auto; font-size:.57rem; letter-spacing:.14em; color:var(--on-paper-soft);
  transition:transform .4s cubic-bezier(.16,1,.3,1)}
.alta:hover .src{transform:translateX(6px)}
.alta h3{font-family:'Fraunces',serif; font-variation-settings:'WONK' 1; font-weight:500;
  font-size:clamp(1.35rem,1rem + 1.5vw,2.3rem); line-height:1.11; letter-spacing:-.028em;
  margin:16px 0 12px; color:var(--navy); max-width:30ch;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.alta:hover h3{transform:translateX(5px)}
.alta small{font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-paper-soft)}
.alta::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--brick); transform:scaleX(0); transform-origin:left;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.alta:hover::after{transform:scaleX(1)}
.envivo{display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-paper-soft)}
.envivo i{width:6px; height:6px; border-radius:50%; background:var(--brick); font-style:normal;
  animation:latido 2.4s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:.25; transform:scale(.8)}50%{opacity:1; transform:scale(1)}}
.sello{margin-top:18px; font-size:.55rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim)}
.sello b{color:var(--soft); font-weight:400}
.fallo{padding:20px 0; border-bottom:1px solid var(--rule)}
.fallo p{margin:0; font-size:.78rem; line-height:1.65; color:var(--bone); max-width:62ch}
.fallo button{margin-top:14px; background:none; border:1px solid var(--rule); color:var(--soft);
  font-family:'JetBrains Mono',monospace; font-size:.57rem; letter-spacing:.14em;
  text-transform:uppercase; padding:9px 16px; cursor:pointer; transition:border-color .3s, color .3s}
.fallo button:hover{border-color:var(--terra-l); color:var(--bone)}
@media(max-width:760px){.nr{grid-template-columns:1fr; gap:6px} .nr .src{text-align:left}}

/* ══════ CIERRE ══════ */
.close{position:relative; min-height:86svh; display:flex; align-items:center; overflow:hidden;
  text-align:center; justify-content:center}
.close .shot{position:absolute; inset:0; z-index:0}
.close .shot img{width:100%; height:100%; object-fit:cover; object-position:60% 55%}
.close .veil{background:linear-gradient(180deg, rgba(10,20,64,.9) 0%, rgba(10,20,64,.72) 45%,
  rgba(10,20,64,.94) 100%)}

/* ── el formulario de contacto ─────────────────────────────────────────────
   Sobrio a proposito: campos de una linea, sin cajas ni sombras. Quien llega
   aqui ya decidio escribir; lo unico que importa es que no se atore. */
.formulario{max-width:620px; margin:34px auto 0; text-align:left}
.formulario .campos{display:grid; gap:16px 20px}
@media(min-width:620px){.formulario .campos{grid-template-columns:1fr 1fr}
  .formulario .ancho{grid-column:1 / -1}}
.formulario label{display:block; font-family:ui-monospace,'JetBrains Mono',monospace;
  font-size:.58rem; letter-spacing:.17em; text-transform:uppercase; color:var(--on-navy-2)}
.formulario label span{text-transform:none; letter-spacing:.04em; opacity:.6}
.formulario input, .formulario select, .formulario textarea{
  width:100%; margin-top:8px; padding:11px 0; background:transparent; color:var(--bone);
  border:0; border-bottom:1px solid rgba(241,239,234,.3); border-radius:0;
  font-family:ui-monospace,'JetBrains Mono',monospace; font-size:.8rem;
  letter-spacing:0; text-transform:none; transition:border-color .25s}
.formulario textarea{resize:vertical; line-height:1.7; min-height:96px}
.formulario select{appearance:none; cursor:pointer}
.formulario select option{background:var(--ink); color:var(--bone)}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus{
  outline:none; border-bottom-color:var(--brick-l)}
.formulario .acepta{display:flex; gap:11px; align-items:flex-start; margin:26px 0 0;
  text-transform:none; letter-spacing:.02em; font-size:.7rem; line-height:1.7;
  font-family:inherit; color:var(--on-navy-2); cursor:pointer}
.formulario .acepta input{width:auto; margin:3px 0 0; flex:0 0 auto}
.formulario .acepta span{flex:1 1 auto}
.formulario .acepta a{color:var(--bone)}
.formulario .envio{display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-top:26px}
.formulario button{font-family:ui-monospace,'JetBrains Mono',monospace; font-size:.62rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--ink); background:var(--bone);
  border:0; padding:15px 30px; cursor:pointer; transition:background .25s, transform .25s}
.formulario button:hover{background:#fff; transform:translateY(-1px)}
.formulario button[disabled]{opacity:.5; cursor:progress; transform:none}
.formulario .wa{font-size:.66rem; color:var(--on-navy-2)}
.formulario .respuesta{margin:20px 0 0; font-size:.74rem; line-height:1.8; min-height:1px}
.formulario .respuesta.bien{color:#9BE3B4}
.formulario .respuesta.mal{color:var(--brick-l)}
/* la trampa para robots: fuera de la vista pero no `display:none`, que algunos
   detectan. Una persona no la ve; un robot que rellena todo, si. */
.formulario .trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ── el aviso de cookies ───────────────────────────────────────────────────
   Abajo y a un lado, no a pantalla completa: no se secuestra la visita para
   pedir permiso. Las dos respuestas pesan lo mismo a la vista — un «aceptar»
   grande junto a un «rechazar» escondido no es una pregunta, es un empujon. */
/* ── la seccion del despacho ───────────────────────────────────────────────
   Las cifras primero y grandes; el texto despues. Al reves nadie llega a las
   cifras. */
.cifras{display:grid; gap:1px; background:#D6D3CC; margin-top:44px}
@media(min-width:760px){.cifras{grid-template-columns:repeat(3,1fr)}}
.cifras > div{background:var(--paper); padding:30px 28px}
.cifras b{display:block; font-family:'Fraunces',Georgia,serif; font-weight:400;
  font-size:clamp(2rem,1.4rem + 2vw,3.1rem); line-height:1; letter-spacing:-.03em;
  color:var(--navy); margin-bottom:12px}
.cifras span{display:block; font-family:ui-monospace,'JetBrains Mono',monospace;
  font-size:.58rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--brick); margin-bottom:10px}
.cifras p{margin:0; font-size:.73rem; line-height:1.85; color:var(--on-paper-soft)}

.galleta{position:fixed; left:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px);
  z-index:60; width:min(400px,calc(100vw - 28px)); background:var(--ink);
  border:1px solid rgba(241,239,234,.24); padding:22px 24px 20px;
  box-shadow:0 26px 60px rgba(3,8,30,.5);
  opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.galleta.in{opacity:1; transform:none}
.galleta p{margin:0 0 16px; font-size:.72rem; line-height:1.8; color:var(--soft)}
.galleta a{color:var(--bone)}
.galleta .bts{display:flex; gap:10px; flex-wrap:wrap}
.galleta button{flex:1 1 auto; font-family:ui-monospace,'JetBrains Mono',monospace;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; padding:12px 16px;
  border:1px solid rgba(241,239,234,.3); background:transparent; color:var(--bone);
  cursor:pointer; transition:background .25s, border-color .25s}
.galleta button:hover{background:rgba(241,239,234,.1); border-color:rgba(241,239,234,.6)}
.galleta button.si{background:var(--bone); color:var(--ink); border-color:var(--bone)}
.galleta button.si:hover{background:#fff}
@media(prefers-reduced-motion:reduce){.galleta{transition:none}}
/* el pie no tenia enlaces hasta ahora: sin esto, el del aviso de privacidad
   sale azul oscuro sobre azul oscuro y practicamente no se ve */
.como-enlace{background:none; border:0; padding:0; font:inherit; color:inherit;
  text-decoration:underline; cursor:pointer}
footer a{color:var(--soft); text-decoration:none; border-bottom:1px solid rgba(180,190,220,.4)}
footer a:hover{color:var(--bone); border-bottom-color:currentColor}
.close .inner{position:relative; z-index:3; max-width:60ch}
.close h2{max-width:none; margin:0 auto}
.close .cta{justify-content:center; opacity:1; animation:none}
.close .datos{display:flex; gap:clamp(18px,3vw,44px); justify-content:center; flex-wrap:wrap;
  margin-top:42px; padding-top:26px; border-top:1px solid var(--rule)}
.close .datos b{display:block; font-size:.72rem; letter-spacing:.06em; color:var(--bone);
  font-weight:400; margin-top:6px; text-transform:none}
footer{padding:30px 0 38px; border-top:1px solid var(--rule); display:flex; gap:18px;
  flex-wrap:wrap; justify-content:space-between}

.tag{position:fixed; left:50%; transform:translateX(-50%); bottom:12px; z-index:70;
  font-family:'JetBrains Mono',monospace; font-size:.52rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--dim); background:rgba(10,20,64,.9);
  padding:6px 13px; border:1px solid var(--rule); pointer-events:none; white-space:nowrap}
@media(max-width:700px){.tag{display:none}}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .hero .shot img{opacity:1; transform:none}
  .eyeb,.sub,.cta,.hero .base{opacity:1}
  h1 .l > i{transform:none}
  .rv{opacity:1; transform:none}
}

/* ══════ UNA SECCION, UNA PANTALLA ══════
   Solo en escritorio. Las secciones que ya son mas altas que la ventana no se
   enteran de esto: min-height no recorta, solo levanta las cortas. */
@media(min-width:1300px){
  .band{min-height:100svh}
  .close{min-height:100svh}
  .dark{min-height:100svh; display:flex; flex-direction:column; justify-content:center}
  .dark > .pad{width:100%}
}