/* ============================================================
   REXEN — Web de agencia

   SISTEMA DE LUJO, monocromo y a dos zonas (24/08/2026)
   ------------------------------------------------------------
   Sale de medir siete referencias en el navegador —Pentagram, Work & Co,
   Area 17, Base Design, Exposure, Aesop y Rolls-Royce— y de quedarse con
   lo que TODAS hacen igual:

     1. Ningun peso gordo. Titulares entre 200 y 500, nunca una condensada
        negra. Anton se queda fuera de la web de agencia.
     2. Cuando el titular va en mayusculas, el tracking es POSITIVO y
        generoso (Rolls-Royce: peso 300 y +0,036 em). Lo contrario de la
        landing, que va condensada y con tracking negativo.
     3. Texto de lectura entre 16 y 20 px. Aqui, 18.
     4. Casi ningun color: el acento, cuando existe, aparece en menos del
        5 % de los elementos, y cuatro de las siete no tienen ninguno.
     5. El neutro nunca es blanco puro ni negro puro. Aesop usa hueso
        #FFFEF2; Pentagram y Area 17, #1A1A1A; Base Design, #121212.

   Las dos decisiones de Denis sobre ese estudio:
     · DOS ZONAS. Hero, servicios y lectura sobre hueso; resultados y
       cierre sobre ink. El salto de fondo es lo que separa las secciones,
       en vez de una linea de color. Ademas las capturas del muro son
       interfaces oscuras: sobre hueso se ven pegadas, sobre ink se
       integran.
     · MONOCROMO TOTAL. Cero acento. El unico color de toda la web es la
       X del logo, en #FF3B1F, para que la marca se siga reconociendo.

   Como esta montado
   ------------------------------------------------------------
   Los componentes NUNCA nombran un color: leen --fondo, --superficie,
   --texto, --texto-2, --texto-3 y --linea. El :root define la zona clara
   y .zona-ink vuelve a atar esas mismas variables a la oscura. Por eso
   una tarjeta, un boton o una franja funcionan igual en las dos sin
   escribirlos dos veces.

   REGLA QUE NO SE SALTA: no metas un color literal dentro de un
   componente. Funcionara en una zona y reventara en la otra. Las unicas
   excepciones, a proposito, son la X del logo y el visor de capturas,
   que es oscuro siempre porque las capturas lo son.

   El flujo
   ------------------------------------------------------------
   UN solo boton relleno por pantalla; todo lo demas son enlaces
   subrayados. Sin color, el enfasis se consigue por escasez: si hay un
   unico elemento solido en toda la pantalla, es imposible no verlo. El
   cierre va siempre en zona ink, asi que el salto de fondo hace de
   subrayado justo donde se decide.

   Tipografia
   ------------------------------------------------------------
   Inter variable (100-900) en un solo archivo autoalojado, que sustituye
   a los seis estaticos: 130 KB en vez de 390 KB, y ademas trae los pesos
   finos que antes no habia. JetBrains Mono se queda para etiquetas y
   datos: en una web sin color, el monoespaciado es lo que dice "esto es
   un dato" sin tener que pintarlo.
   ============================================================ */

/* Inter variable: un solo archivo cubre de 100 a 900. */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/inter-var-lat.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/inter-var-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-400-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/jetbrains-mono-700-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  /* --- zona base: CARBON CALIDO ---
     Oscuro pero no negro, y con algo de tierra dentro para que no sea el
     gris de un panel de administracion. Las superficies suben desde aqui:
     la tarjeta es MAS CLARA que el fondo, que es lo que la pone delante de
     la pagina en vez de recortada en ella. */
  --fondo:#1A1917;          /* carbon calido */
  --superficie:#232220;     /* tarjeta, un escalon por encima */
  --superficie-2:#2C2B28;   /* lo que va mas arriba del todo */
  --hundido:#111010;        /* pozos: donde se meten las capturas */
  --texto:#EFECE5;
  --texto-2:#ABA69D;
  --texto-3:#7E7871;
  --linea:#302E2B;
  --linea-fuerte:#474440;
  --rejilla:rgba(239,236,229,.028);
  --sombra:0 1px 3px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.42);
  --sombra-alta:0 3px 8px rgba(0,0,0,.55), 0 30px 68px rgba(0,0,0,.55);
  --sombra-dentro:inset 0 2px 14px rgba(0,0,0,.55);
  /* LETRAS QUE FLOTAN. Sobre oscuro no hay luz que reflejar, asi que el
     relieve sale de dos sombras proyectadas: una pegada, que despega la
     letra del fondo, y otra muy abierta, que hace de halo. */
  --sombra-texto:0 1px 2px rgba(0,0,0,.55), 0 6px 34px rgba(0,0,0,.75);

  /* verde de validacion. Es color SEMANTICO, no acento de marca: aparece
     solo donde hay algo comprobable —la frase destacada, las capturas sin
     retocar, las garantias por escrito, lo que encaja—. En cada zona lleva
     su tono para que el contraste aguante. */
  /* Dos verdes, dos trabajos:
       --accion  lima  -> ACTUAR. Solo botones rellenos.
       --valida  menta -> COMPROBADO. Solo marcas y texto.
     Si compartieran token, el boton competiria con los ✓ de las capturas. */
  --accion:#B4F04E;
  --accion-oscuro:#9FD93C;
  --valida:#5FC98B;
  --valida-suave:rgba(95,201,139,.20);
  --valida-linea:rgba(95,201,139,.5);

  /* --- rojo de marca: estructura y enfasis --- */
  --marca:#FF4A2E;          /* sobre oscuro aguanta la saturacion */
  --marca-suave:rgba(255,74,46,.15);
  --marca-linea:rgba(255,74,46,.45);
  --marca-logo:#FF3B1F;     /* la X del logo SI va en el rojo original */

  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --gutter:clamp(22px, 5vw, 84px);
  --maxw:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
  --header-h:82px;
}

/* --- zona oscura: se reatan las MISMAS variables --- */
/* --- zona profunda: casi negro. Aqui viven los resultados y los cierres,
       y el salto desde el carbon es lo que separa las secciones. --- */
.zona-ink{
  --fondo:#0A0A0B;
  --superficie:#131314;
  --superficie-2:#1B1B1D;
  --hundido:#040405;
  --texto:#EDEAE3;
  --texto-2:#9E9990;
  --texto-3:#6F6A63;
  --linea:#232326;
  --linea-fuerte:#38383E;
  --rejilla:rgba(237,234,227,.024);
  --accion:#C2FA5C;
  --accion-oscuro:#AEE84A;
  --valida:#6FD79A;
  --valida-suave:rgba(111,215,154,.22);
  --valida-linea:rgba(111,215,154,.55);
  --marca:#FF4A2E;
  --marca-suave:rgba(255,74,46,.16);
  --marca-linea:rgba(255,74,46,.45);
  --sombra:0 1px 3px rgba(0,0,0,.7), 0 12px 34px rgba(0,0,0,.6);
  --sombra-alta:0 3px 10px rgba(0,0,0,.75), 0 34px 76px rgba(0,0,0,.7);
  --sombra-dentro:inset 0 2px 16px rgba(0,0,0,.8);
  --sombra-texto:0 1px 3px rgba(0,0,0,.7), 0 8px 40px rgba(0,0,0,.9);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  background:#1A1917;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
}
body{
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--font-body);
  font-size:19px;
  font-weight:400;
  line-height:1.68;
  letter-spacing:-.003em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--texto);color:var(--fondo);}
img,video,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer;}
:focus-visible{outline:1.5px solid var(--texto);outline-offset:3px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1;}
.lectura{max-width:60ch;margin-left:auto;margin-right:auto;text-align:center;}

/* ============================================================
   TIPOGRAFIA
   El titular grande va en peso 200: a tamano grande, un peso fino se lee
   como caro y el mismo texto en negro condensado se lee como oferta.
   El enfasis dentro de un titular es PESO (500), nunca color.
   ============================================================ */
h1,h2,h3{text-wrap:balance;}
.h-xl,h2.h-sec,.cifra .n,.res-n,.sig-n{text-shadow:var(--sombra-texto);}

.h-xl{
  font-size:clamp(2.9rem,7vw,5.6rem);
  font-weight:200;
  line-height:1.02;
  letter-spacing:-.022em;    /* Work & Co usa -.02em en el titular */
  margin-left:auto;margin-right:auto;
}
/* EL ENFASIS TIENE SIGNIFICADO.
     <em>            lo bueno, lo que hacemos nosotros   -> VERDE
     <em class="mal"> lo que hacen los demas             -> ROJO
   De ahi sale el titular de la home:
     "Otras agencias te CUENTAN los resultados.
      Nosotros te ENSEÑAMOS la captura."
   Y por eso el rojo de la estructura (kickers, guiones, iconos) no
   contradice nada: ahi es identidad, no juicio. */
.h-xl em{font-style:normal;font-weight:500;color:var(--valida);}
.h-xl em.mal{color:var(--marca);}

h2.h-sec{
  font-size:clamp(2rem,4.3vw,3.3rem);
  font-weight:200;
  line-height:1.08;
  letter-spacing:-.018em;
  max-width:22ch;
  margin-left:auto;margin-right:auto;
}
h2.h-sec em{font-style:normal;font-weight:500;color:var(--valida);}
h2.h-sec em.mal{color:var(--marca);}

h3{font-size:1.18rem;font-weight:500;letter-spacing:-.011em;line-height:1.35;}

p{margin-bottom:1.1rem;}
p:last-child{margin-bottom:0;}
strong,b{font-weight:500;}

/* Frase destacada dentro de una parrafada.
   En monocromo no se puede subrayar con color, asi que se hace con una
   banda baja —como un subrayado a lapiz— mas medio punto de peso. Llama
   la atencion sin romper la pagina, y funciona en las dos zonas porque
   el tono sale de --texto. */
/* La banda va en verde de validacion y se DIBUJA al entrar en pantalla,
   de izquierda a derecha, como un subrayado a mano. Es la interaccion mas
   visible de la web y la que marca lo que hay que leer si solo se lee una
   frase por parrafo. */
mark{
  position:relative;color:inherit;font-weight:500;
  background:none;padding:0 .06em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
mark::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:.38em;z-index:-1;
  background:var(--valida-suave);
  transform:scaleX(1);transform-origin:left center;
  transition:transform .85s var(--ease);
}
/* OJO con el orden: el estado escondido va bajo .js (0,1,1) y el visible
   bajo `.js mark.vista` (0,2,1). Si se escriben con la misma
   especificidad, gana la ultima y la banda no se dibuja nunca. */
.js mark::before{transform:scaleX(0);}
.js mark.vista::before{transform:scaleX(1);}

.entradilla{
  font-size:1.14rem;color:var(--texto-2);
  max-width:56ch;margin-left:auto;margin-right:auto;
}

/* kicker: mayusculas, mono y tracking generoso. Lo que lo separa del
   cuerpo es el espaciado, no el tono. */
/* el kicker vuelve al rojo: es lo primero que se lee de cada seccion y lo
   que la marca como nuestra */
.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.7rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--marca);
  margin-bottom:1.1rem;
}
.eyebrow.apagado{color:var(--marca);opacity:.75;}

/* el guion, que antes era una barra roja, pasa a ser una regla fina */
/* el guion deja de ser una regla gris y vuelve a ser la barra roja del
   sistema de las laminas, aunque mas fina */
.guion{
  display:block;width:44px;height:3px;border-radius:2px;
  background:var(--marca);margin:0 auto 1.6rem;
}
.mono{font-family:var(--font-mono);}

/* ============================================================
   BOTONES — la escasez es el enfasis
   UN solo boton relleno por pantalla; el resto, enlaces subrayados.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  white-space:nowrap;          /* el de la cabecera partia en dos lineas */
  padding:1rem 1.7rem;
  font-size:.93rem;font-weight:500;letter-spacing:-.006em;
  border:1px solid transparent;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease);
}
/* el principal, en verde lima. Es el unico solido de la pantalla y el
   unico sitio donde aparece este tono, asi que no compite con nada. */
.btn-1{
  background:var(--accion);color:#0A0A0B;
  box-shadow:0 2px 14px rgba(180,240,78,.18);
}
.btn-1:hover{background:var(--accion-oscuro);transform:translateY(-1px);}
.btn-2{border-color:var(--linea-fuerte);color:var(--texto);}
.btn-2:hover{border-color:var(--texto);}
.btn-wa{border-color:var(--valida-linea);color:var(--valida);}
.btn-wa:hover{border-color:var(--valida);background:rgba(111,215,154,.08);}
.btn-sm{padding:.6rem 1rem;font-size:.82rem;letter-spacing:-.01em;}

/* enlace de seccion: el patron por defecto, para que los botones escaseen */
.enlace{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.94rem;font-weight:500;
  padding-bottom:.28rem;
  border-bottom:1px solid var(--linea-fuerte);
  transition:border-color .25s var(--ease);
}
.enlace{border-bottom-color:var(--valida-linea);}
.enlace:hover{border-bottom-color:var(--valida);color:var(--valida);}

/* ============================================================
   CABECERA
   ============================================================ */
.cab{position:sticky;top:0;z-index:100;background:var(--fondo);border-bottom:1px solid var(--linea);}
.cab-in{
  height:var(--header-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
}
.cab-logo{justify-self:start;}
/* las dos vias van SIEMPRE juntas, tambien arriba */
.cab-cta{justify-self:end;display:flex;align-items:center;gap:.5rem;}
.cab-wa{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  padding:.6rem .85rem;font-size:.82rem;font-weight:500;
  border:1px solid var(--linea-fuerte);color:var(--texto-2);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.cab-wa:hover{border-color:var(--valida);color:var(--valida);}
.cab-wa svg{width:15px;height:15px;flex:none;}
@media (max-width:1120px){.cab-wa span{display:none;}.cab-wa{padding:.6rem .7rem;}}
.logo{font-size:1.22rem;font-weight:500;letter-spacing:.26em;line-height:1;text-transform:uppercase;}
.logo em{font-style:normal;color:var(--marca-logo);}

.nav{display:flex;align-items:center;justify-content:center;gap:1.6rem;}
/* En Inter, como el resto. Iba en mono y se notaba: el monoespaciado esta
   aqui para etiquetas y datos, no para navegar. */
.nav a,.dd-t{
  font-family:var(--font-body);
  font-size:.95rem;font-weight:400;letter-spacing:-.006em;text-transform:none;
  color:var(--texto-2);transition:color .2s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"],.dd-t:hover,.dd-t.activo{color:var(--texto);}

.dd{position:relative;}
.dd-t{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem 0;}
.dd-t svg{width:8px;height:8px;transition:transform .25s var(--ease);}
.dd[data-abierto="1"] .dd-t svg{transform:rotate(180deg);}
.dd[data-abierto="1"] .dd-t{color:var(--texto);}
.dd-m{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);
  min-width:272px;background:var(--fondo);border:1px solid var(--linea);
  padding:.5rem;display:none;box-shadow:0 24px 60px rgba(0,0,0,.10);
}
.dd[data-abierto="1"] .dd-m{display:block;}
.dd-m a{
  display:block;padding:.65rem .8rem;
  font-family:var(--font-body);font-size:.89rem;font-weight:400;
  letter-spacing:-.004em;text-transform:none;color:var(--texto-2);
}
.dd-m a:hover{background:var(--superficie);color:var(--texto);}
.dd-m a span{display:block;font-size:.75rem;color:var(--texto-3);margin-top:.15rem;}
.dd-m .dd-todos{border-bottom:1px solid var(--linea);margin-bottom:.3rem;padding-bottom:.7rem;}

.cab-burger{display:none;justify-self:end;padding:.5rem;}
.cab-burger svg{width:22px;height:22px;}

@media (max-width:980px){
  .cab-in{grid-template-columns:1fr auto;}
  .cab-cta{display:none;}
  .cab-burger{display:block;}
  .nav{
    display:none;position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--fondo);border-bottom:1px solid var(--linea);
    padding:.5rem var(--gutter) 1.6rem;
    max-height:calc(100vh - var(--header-h));overflow-y:auto;
  }
  .nav[data-abierto="1"]{display:flex;}
  .nav > a,.dd-t{padding:1.1rem 0;border-bottom:1px solid var(--linea);width:100%;font-size:1.05rem;justify-content:flex-start;}
  .dd{width:100%;}
  .dd-m{position:static;transform:none;display:block;border:0;background:none;box-shadow:none;padding:.4rem 0 .8rem 1rem;}
  .dd-m a{padding:.5rem .4rem;}
}

/* ============================================================
   SECCIONES Y ZONAS
   Cada seccion pinta su propio fondo: con dos zonas, un lienzo fijo
   detras de toda la pagina ya no vale.
   ============================================================ */
section{position:relative;background:var(--fondo);color:var(--texto);}
.sec{padding:clamp(4rem,9.5vh,7.5rem) 0;overflow:hidden;}
.sec-borde{border-top:1px solid var(--linea);}
/* al saltar de zona la linea sobra: el cambio de fondo ya separa */
section:not(.zona-ink) + .zona-ink,
.zona-ink + section:not(.zona-ink){border-top:0;}

.sec-cab{margin-bottom:clamp(1.8rem,3.4vh,2.8rem);text-align:center;}
.sec-cab .entradilla{margin-top:1.1rem;}

/* rejilla tecnica, ahora por seccion y a la mitad de fuerza */
.sec::before,.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right, var(--rejilla) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, var(--rejilla) 0 1px, transparent 1px 72px);
}
/* vineta por seccion: oscurece los bordes y empuja la mirada al centro.
   Es profundidad de campo, no decoracion. */
/* Rescoldo de marca en el fondo: rojo arriba a la derecha, verde abajo a la
   izquierda, los dos a una opacidad que no toca la legibilidad de ninguna
   linea de texto. Es de aqui de donde sale el color de la pagina. */
.sec::after,.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46vw 40vw at 88% 4%, var(--marca-suave), transparent 62%),
    radial-gradient(40vw 36vw at 6% 96%, var(--valida-suave), transparent 60%),
    radial-gradient(120% 78% at 50% 42%, transparent 52%, rgba(0,0,0,.4) 100%);
}
.hero::after{
  background:
    radial-gradient(52vw 46vw at 84% -6%, var(--marca-suave), transparent 60%),
    radial-gradient(44vw 40vw at 4% 104%, var(--valida-suave), transparent 58%),
    radial-gradient(120% 80% at 50% 40%, transparent 54%, rgba(0,0,0,.38) 100%);
}
.zona-ink.sec::after,.cierre.zona-ink::after{
  background:
    radial-gradient(48vw 42vw at 88% 2%, var(--marca-suave), transparent 60%),
    radial-gradient(42vw 38vw at 6% 98%, var(--valida-suave), transparent 58%),
    radial-gradient(120% 78% at 50% 42%, transparent 48%, rgba(0,0,0,.5) 100%);
}
.cierre{position:relative;overflow:hidden;}
.cierre::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 78% at 50% 42%, transparent 48%, rgba(0,0,0,.5) 100%);
}

/* barra de progreso de lectura: dice cuanto queda sin ocupar sitio */
#progreso{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:var(--valida);transition:width .12s linear;
}

.sec-num{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
  color:var(--texto-3);
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding-bottom:.9rem;margin-bottom:2rem;border-bottom:1px solid var(--linea);
}
.sec-num i{font-style:normal;color:var(--marca);}
.sec-num b{font-weight:400;}
.sec-num span{text-transform:uppercase;letter-spacing:.16em;color:var(--texto-2);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;overflow:hidden;background:var(--fondo);
  padding:clamp(3.6rem,10vh,7rem) 0 clamp(2.6rem,6vh,4.4rem);
}
.hero .wrap{text-align:center;}
.hero-h1{max-width:20ch;}
.hero-sub{font-size:clamp(1.12rem,2.1vw,1.34rem);color:var(--texto-2);max-width:50ch;margin:1.8rem auto 0;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem;justify-content:center;align-items:center;}
.hero-micro{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--texto-3);margin-top:1.3rem;}

.cifras{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));
  gap:1.8rem 1.4rem;justify-items:center;text-align:center;
  margin-top:clamp(2.2rem,5vh,3.4rem);padding-top:2rem;border-top:1px solid var(--linea);
}
.cifra .n{
  font-size:clamp(2.5rem,5.2vw,3.7rem);font-weight:200;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.cifra .n em{font-style:normal;font-weight:200;color:var(--texto-3);}
.cifra .l{
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texto-3);margin-top:.7rem;line-height:1.6;
}

/* ============================================================
   TARJETAS
   Sin borde discontinuo: filo de un pixel y la superficie un punto por
   encima del fondo. En monocromo, la jerarquia es la superficie.
   ============================================================ */
/* La tarjeta esta DELANTE de la pagina: mas clara que el fondo y con
   sombra. Es el cambio que quita la sensacion de plano. */
.tarjeta{
  position:relative;background:var(--superficie);
  border:1px solid var(--linea);box-shadow:var(--sombra);
  transition:border-color .28s var(--ease), background .28s var(--ease),
             box-shadow .28s var(--ease), transform .28s var(--ease);
}
a.tarjeta:hover{
  border-color:var(--linea-fuerte);background:var(--superficie-2);
  box-shadow:var(--sombra-alta);transform:translateY(-2px);
}

.marcas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr));gap:14px;}
.marca{background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);padding:1.6rem 1.3rem;display:flex;flex-direction:column;gap:1rem;text-align:center;align-items:center;}
.marca-plato{height:74px;width:100%;display:flex;align-items:center;justify-content:center;}
.marca:hover .marca-plato img{filter:grayscale(1) brightness(2.3) contrast(1) opacity(1);transform:scale(1.04);}
.marca-n{font-size:.93rem;font-weight:500;letter-spacing:-.008em;}
.marca-s{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;color:var(--texto-3);margin-top:.35rem;line-height:1.7;text-transform:uppercase;}

.marcas-tira{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(45%,168px),1fr));gap:12px;}
.marcas-tira .plato{background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);height:124px;display:flex;align-items:center;justify-content:center;padding:1.5rem;}
/* Todos los logos ocupan la MISMA caja optica. Antes se pintaban a su tamano
   natural y el de La Cote Club, que es de 30x48 px, salia diminuto al lado
   de uno de 487x108: parecia un fallo de maquetacion. */
/* Los logos vienen de diez sitios distintos y se comportan distinto sobre
   oscuro. Medido con PIL sobre los archivos:
     data-tono="oscuro"  casi negros -> se invierten, si no desaparecen
     data-tono="opaco"   sin alfa    -> sin subida de brillo, o se queman
   El resto va con el tratamiento normal. */
.marcas-tira img,.marca-plato img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1) brightness(2.3) contrast(.65) opacity(.6);
  transition:filter .3s var(--ease), transform .3s var(--ease);
}
.marcas-tira img[data-tono="oscuro"],.marca-plato img[data-tono="oscuro"]{
  filter:invert(1) grayscale(1) contrast(.8) opacity(.62);
}
.marcas-tira img[data-tono="opaco"],.marca-plato img[data-tono="opaco"]{
  filter:grayscale(1) contrast(.85) opacity(.55);
}
.marcas-tira .plato img{min-width:62px;}
.marcas-tira .plato:hover img{filter:grayscale(1) brightness(2.3) contrast(1) opacity(1);transform:scale(1.05);}
.marcas-tira .plato:hover img[data-tono="oscuro"],.marca:hover .marca-plato img[data-tono="oscuro"]{filter:invert(1) grayscale(1) contrast(1) opacity(1);}
.marcas-tira .plato:hover img[data-tono="opaco"],.marca:hover .marca-plato img[data-tono="opaco"]{filter:grayscale(1) contrast(1) opacity(1);}

.servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));gap:16px;}
.svc{
  background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);padding:2.6rem 2rem 2.1rem;
  display:flex;flex-direction:column;gap:.7rem;text-align:center;align-items:center;
  transition:background .28s var(--ease);
}
a.svc:hover{background:var(--superficie-2);box-shadow:var(--sombra-alta);transform:translateY(-2px);}
.svc-n{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;color:var(--texto-3);}
.svc p{color:var(--texto-2);font-size:1rem;margin:0;max-width:34ch;}
.svc-v{
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);margin-top:auto;padding-top:1rem;transition:color .25s var(--ease);
}
a.svc:hover .svc-v{color:var(--valida);}


/* ---------- Iconos de servicio ----------
   De linea y con currentColor, para que hereden el tono de su zona. Un
   icono macizo al lado de un titular de peso 200 canta; uno de trazo fino,
   no. */
.svc-i{display:block;width:38px;height:38px;color:var(--marca);margin-bottom:.4rem;}
.svc-i svg{width:100%;height:100%;display:block;}
.svc:hover .svc-i{color:var(--texto);}
.hero-i{display:flex;justify-content:center;margin-bottom:1.4rem;}
.hero-i .svc-i{width:46px;height:46px;margin:0;}

/* ============================================================
   MURO DE RESULTADOS — vive en zona ink
   ============================================================ */
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem;justify-content:center;}
.filtro{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.55rem 1rem;border:1px solid var(--linea-fuerte);color:var(--texto-2);
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.filtro:hover{border-color:var(--texto);color:var(--texto);}
.filtro[aria-pressed="true"]{background:var(--valida);border-color:var(--valida);color:var(--fondo);}

/* EL MURO. Antes eran tres columnas de tarjetas pequenas y la captura
   —que es lo unico que ninguna otra agencia puede ensenar— salia del
   tamano de un sello. Ahora son dos columnas, la primera a lo ancho, y la
   captura manda en la tarjeta. */
.muro{display:grid;grid-template-columns:1fr;gap:18px;}
@media (min-width:900px){
  .muro{grid-template-columns:repeat(2,1fr);}
  /* a lo ancho: la destacada y las capturas que son tiras de panel */
  .muro .res:first-child,
  .muro .res[data-ancho="completo"]{grid-column:1 / -1;}
  /* en el adelanto de tres -home y paginas de servicio- van las TRES a lo
     ancho: son un escaparate, no un muro, y una a media columna al lado de
     dos grandes se ve como un descuido */
  .muro-adelanto{grid-template-columns:1fr;}
}
.res{
  background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);
  padding:2rem 1.8rem;display:flex;flex-direction:column;gap:.8rem;
  text-align:center;align-items:center;
}
.res[hidden]{display:none;}
.res-t{font-family:var(--font-mono);font-size:.61rem;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);}
.res-n{
  font-size:clamp(1.9rem,3.8vw,2.6rem);font-weight:200;line-height:1.06;
  letter-spacing:-.028em;font-variant-numeric:tabular-nums;
}
/* lo que VOLVIO va en verde: es la parte comprobada del dato */
.res-n em{font-style:normal;font-weight:200;color:var(--valida);}
.res-d{font-size:.89rem;color:var(--texto-2);max-width:32ch;}
/* la captura se HUNDE en la tarjeta: pozo con sombra interior. Es lo que
   hace que se lea como algo metido en la pagina y no pegado encima. */
.res-shot{margin-top:auto;padding-top:1.4rem;width:100%;cursor:zoom-in;}
.res-shot img{
  width:100%;height:auto;
  background:var(--hundido);border:1px solid var(--linea-fuerte);
  box-shadow:var(--sombra-dentro);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.res-shot img{transition:clip-path 1.1s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .5s var(--ease);}
.res-shot:hover img{box-shadow:var(--sombra-dentro), var(--sombra);transform:scale(1.012);}
/* la primera, a lo ancho: la captura a tamano completo */
.muro .res:first-child .res-shot img{border-width:1px;}
@media (min-width:900px){
  .muro .res:first-child .res-n{font-size:clamp(2.2rem,4.2vw,3.1rem);}
  .muro .res:first-child .res-shot{max-width:none;}
}
.res-shot figcaption{
  font-family:var(--font-mono);font-size:.59rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-3);padding-top:.6rem;display:flex;justify-content:space-between;gap:.5rem;
}
/* el pie de cada captura lleva su marca de verificado: es la fuente del dato */
.res-shot figcaption span:first-child{color:var(--valida);}
.res-shot figcaption span:first-child::before{content:"✓ ";}
.res-shot:hover img{border-color:var(--linea-fuerte);}

.muro-pie,.franja{
  border-top:1px solid var(--linea);margin-top:2.4rem;padding-top:1.1rem;
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;
  color:var(--texto-3);text-align:center;
}
.franja a{border-bottom:1px solid var(--valida-linea);color:var(--valida);}

/* visor: oscuro SIEMPRE, tambien cuando se abre desde una zona clara.
   Las capturas son interfaces oscuras y sobre hueso se ven recortadas. */
.visor{
  position:fixed;inset:0;z-index:400;border:0;padding:clamp(1rem,5vw,3rem);
  background:rgba(14,14,16,.97);
  display:none;align-items:center;justify-content:center;
  width:100%;height:100%;max-width:100vw;max-height:100vh;
}
.visor[open]{display:flex;}
.visor::backdrop{background:rgba(14,14,16,.92);}
.visor-caja{max-width:1400px;width:100%;}
.visor-caja img{width:100%;height:auto;border:1px solid #3C3C42;background:#17171A;}
.visor-pie{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;
  color:#A29D93;margin-top:1rem;
}
.visor-x{font-size:1.05rem;line-height:1;padding:.35rem .7rem;border:1px solid #3C3C42;color:#EDEAE3;}
.visor-x:hover{border-color:#EDEAE3;}

/* ============================================================
   PASOS, GARANTIAS, ENCAJE
   ============================================================ */
.pasos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));}
.paso{background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);padding:2.1rem 1.6rem;display:flex;flex-direction:column;gap:.65rem;text-align:center;align-items:center;}
.paso-n{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;color:var(--texto-3);}
.paso p{font-size:.98rem;color:var(--texto-2);margin:0;max-width:34ch;}

.garantias{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));}
.gar{background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);padding:2.1rem 1.6rem;text-align:center;}
.gar-s{font-size:1.45rem;font-weight:200;line-height:1;letter-spacing:-.02em;color:var(--valida);margin-bottom:1rem;}
.gar h3{margin-bottom:.5rem;}
.gar p{font-size:.96rem;color:var(--texto-2);margin:0;}

.publico{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));}
.pub{background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);padding:2.2rem 1.9rem;text-align:left;}
.pub h3{margin-bottom:1.2rem;text-align:center;}
.pub ul{list-style:none;display:flex;flex-direction:column;gap:.85rem;}
.pub li{padding-left:1.8rem;position:relative;font-size:1rem;color:var(--texto-2);}
.pub li::before{position:absolute;left:0;top:0;font-family:var(--font-mono);font-size:.8rem;color:var(--texto-3);}
.pub-si li::before{content:"+";color:var(--valida);font-weight:700;}
.pub-no li::before{content:"\2013";}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1px solid var(--linea);max-width:66ch;margin:0 auto;text-align:left;}
.faq details{border-bottom:1px solid var(--linea);}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:1.6rem 2.6rem 1.6rem 0;
  font-size:1.12rem;font-weight:400;letter-spacing:-.01em;
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:2px;top:2.05rem;width:11px;height:1px;background:var(--texto-2);}
.faq summary::before{
  content:"";position:absolute;right:7px;top:1.7rem;width:1px;height:11px;background:var(--texto-2);
  transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.faq details[open] summary::before{transform:scaleY(0);opacity:0;}
.faq summary:hover{color:var(--texto-2);}
.faq-r{padding:0 2.6rem 1.7rem 0;color:var(--texto-2);font-size:1.03rem;}
.faq-r b{color:var(--texto);font-weight:500;}
.faq-r a{border-bottom:1px solid var(--valida-linea);color:var(--valida);}

/* ============================================================
   CIERRE — el final del flujo, siempre en zona ink
   ============================================================ */
.cierre{text-align:center;padding:clamp(4.5rem,11vh,7.5rem) 0;background:var(--fondo);}
.cierre h2{max-width:19ch;margin:0 auto;}
.cierre .entradilla{margin:1.5rem auto 0;}
.cierre .hero-ctas{justify-content:center;margin-top:2.4rem;}

/* ============================================================
   PIE
   ============================================================ */
.pie{border-top:1px solid var(--linea);padding:clamp(3rem,6vh,4.5rem) 0 2.2rem;background:var(--fondo);}
.pie-cols{display:grid;gap:2.4rem 1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));margin-bottom:3rem;}
.pie h4{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:1.1rem;font-weight:400;
}
.pie ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;}
.pie ul a{font-size:.91rem;color:var(--texto-2);transition:color .2s var(--ease);}
.pie ul a:hover{color:var(--texto);}
.pie-bajo{
  border-top:1px solid var(--linea);padding-top:1.6rem;
  display:flex;flex-wrap:wrap;gap:.7rem 1.8rem;align-items:center;
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.1em;color:var(--texto-3);
}
.pie-bajo a:hover{color:var(--texto-2);}

/* ============================================================
   BARRA MOVIL — un solo boton, el principal
   ============================================================ */
.barra{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--fondo);border-top:1px solid var(--linea);
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  gap:1rem;align-items:center;
}
.barra .btn-1{flex:1;justify-content:center;}
.barra .barra-wa{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  padding:.85rem 1rem;font-size:.86rem;font-weight:500;
  border:1px solid var(--valida-linea);color:var(--valida);
}
.barra .barra-wa svg{width:16px;height:16px;flex:none;}
@media (max-width:760px){
  .barra{display:flex;}
  body{padding-bottom:86px;}
}

/* ============================================================
   PAGINAS DE SERVICIO
   ============================================================ */
.miga{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:1.6rem;text-align:center;
}
.miga a{color:var(--texto-3);}
.miga a:hover{color:var(--texto);}

.svc-hero-cifra{
  margin:2.4rem auto 0;padding:1.4rem 2rem;display:inline-block;text-align:center;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
}
.svc-hero-cifra .n{font-size:1.7rem;font-weight:200;line-height:1;letter-spacing:-.02em;}
.svc-hero-cifra .l{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);margin-top:.6rem;
}

.dos-col{display:grid;gap:clamp(2rem,4vw,3.4rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));align-items:start;text-align:center;}

.entregables{list-style:none;display:grid;gap:8px;max-width:58rem;margin:0 auto;}
.entregables li{background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);padding:1.4rem 1.7rem;font-size:1.02rem;display:flex;gap:1rem;align-items:baseline;text-align:left;}
.entregables li span:last-child{color:var(--texto-2);}

/* badge: sin relleno, solo filo */
.badges{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;}
.badge{
  font-family:var(--font-mono);font-size:.61rem;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--valida);border:1px solid var(--valida-linea);
  padding:.34rem .8rem;white-space:nowrap;
}
.badge.apagado{color:var(--texto-3);}

.siguiente{padding-top:0;}
.sig{display:grid;gap:.5rem;padding:2rem 1.8rem;text-align:center;justify-items:center;}
.sig-k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--texto-3);}
.sig-n{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:200;letter-spacing:-.02em;line-height:1.1;}
.sig-k{color:var(--marca);}
.sig-d{color:var(--texto-2);font-size:.92rem;max-width:52ch;}
.sig-v{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);margin-top:.6rem;}
a.sig:hover .sig-v{color:var(--valida);}

.vias{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:16px;margin-top:2.6rem;}
.via{background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);padding:2.2rem 1.8rem;display:flex;flex-direction:column;gap:.6rem;text-align:center;align-items:center;}
.via-k{font-family:var(--font-mono);font-size:.61rem;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);}
/* la via recomendada se invierte: es el unico solido de la pagina y por eso
   se ve sin necesidad de pintarla de un color. Misma logica que .btn-1. */
/* la via recomendada es un boton grande, asi que va en el mismo lima */
.via-destacada{background:var(--accion);color:#0A0A0B;border-color:var(--accion);}
.via-destacada .via-k,.via-destacada p,.via-destacada .svc-v{color:#0A0A0B;opacity:.74;}
.via-destacada h3{color:#0A0A0B;}
.via-destacada:hover{background:var(--accion-oscuro);opacity:1;}
.via-destacada:hover{opacity:.92;}
.via p{color:var(--texto-2);font-size:.92rem;margin:0;max-width:34ch;}
.via .svc-v{margin-top:auto;padding-top:.9rem;}

/* ============================================================
   PIEZAS DE EJEMPLO
   ============================================================ */
.piezas{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media (min-width:700px){.piezas{grid-template-columns:repeat(3,1fr);}}
/* seis en fila salian del tamano de un sello; tres filas de dos o dos de
   tres se ven de verdad */
@media (min-width:1100px){.piezas{grid-template-columns:repeat(3,1fr);}}
.piezas.pieza-grande{grid-template-columns:1fr;max-width:400px;margin:0 auto;}
.pieza{position:relative;overflow:hidden;padding:0;margin:0;background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);transition:box-shadow .28s var(--ease), transform .28s var(--ease);}
.pieza:hover{box-shadow:var(--sombra-alta);transform:translateY(-2px);}
/* TODAS las muestras ocupan la misma caja. La de estaticos es 4:5 y las
   otras 9:16, asi que se encuadra por el centro: pierde un poco arriba y
   abajo, pero la fila queda pareja, que es lo que se ve. */
.pieza-marco{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--superficie);}
.pieza[data-formato="4-5"] .pieza-marco img{object-position:center 42%;}
.pieza-marco img,.pieza-marco video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease);}
.pieza:hover .pieza-marco img{transform:scale(1.05);}
.pieza-play{
  position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(to top, rgba(14,14,16,.5), rgba(14,14,16,.02) 55%);
  transition:background .25s var(--ease);
}
.pieza-play:hover{background:linear-gradient(to top, rgba(14,14,16,.62), rgba(14,14,16,.1) 55%);}
.pieza-play i{
  width:46px;height:46px;border-radius:50%;background:rgba(242,239,231,.94);
  display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease);
}
.pieza-play:hover i{transform:scale(1.07);}
.pieza-play svg{width:15px;height:15px;fill:#0E0E10;margin-left:2px;}
.pieza figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:.8rem .85rem;pointer-events:none;text-align:left;color:#EDEAE3;
}
.pieza figcaption b{display:block;font-size:.88rem;font-weight:500;letter-spacing:-.008em;line-height:1.2;}
.pieza figcaption span{
  font-family:var(--font-mono);font-size:.55rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(237,234,227,.62);
}
.pieza[data-abierto="1"] .pieza-play,.pieza[data-abierto="1"] figcaption{display:none;}
.piezas-pie{
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.1em;
  color:var(--texto-3);margin-top:1.2rem;text-align:center;
}

/* ============================================================
   COMPARATIVA Y BARRAS
   ============================================================ */
.vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:16px;}
.vs-col{background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);padding:2.1rem 1.7rem;text-align:center;}
.vs-col h3{margin-bottom:1.2rem;}
.vs-col ul{list-style:none;display:flex;flex-direction:column;gap:.7rem;}
.vs-col li{font-size:.91rem;color:var(--texto-2);}
.vs-col .vs-total{
  margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--linea);
  font-size:1.4rem;font-weight:200;letter-spacing:-.02em;line-height:1;
}
.vs-col.buena .vs-total{color:var(--valida);}
.vs-col.mala{opacity:.6;}

.barras{display:flex;flex-direction:column;gap:1.3rem;max-width:34rem;margin:0 auto;text-align:left;}
.barra-l{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto-3);margin-bottom:.5rem;
}
.barra-l b{color:var(--texto);font-weight:400;font-size:.85rem;letter-spacing:.04em;}
.barra-p{height:2px;background:var(--linea);}
.barra-p i{display:block;height:100%;background:var(--valida);}
.barra-p.apagada i{background:var(--linea-fuerte);}

/* ============================================================
   NOTAS
   La respuesta corta es el pasaje que una IA extrae y cita: se marca con
   una regla gruesa arriba, no con un recuadro de color.
   ============================================================ */
.respuesta{
  position:relative;max-width:62ch;margin:0 auto;text-align:left;
  background:var(--superficie);border:1px solid var(--linea);
  border-top:2px solid var(--valida);
  box-shadow:var(--sombra-alta);
  padding:2rem 2.2rem 1.9rem;
}
@media (max-width:600px){.respuesta{padding:1.6rem 1.4rem;}}
.respuesta-k{
  display:block;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--texto-3);margin-bottom:1rem;
}
.respuesta p{font-size:1.24rem;line-height:1.58;margin:0;}
.respuesta b{font-weight:500;}

.nota-meta{
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);margin-top:1.8rem;
}
.notas{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));}
.nota{background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);padding:2.2rem 1.8rem;display:flex;flex-direction:column;gap:.7rem;text-align:center;align-items:center;}
.nota h3{font-size:1.05rem;line-height:1.3;font-weight:400;}
.nota p{color:var(--texto-2);font-size:.9rem;margin:0;}
.nota .svc-v{margin-top:auto;padding-top:.9rem;}


/* ---------- Indice y fuentes de una nota ----------
   Los dos vienen de mirar tuideamola.es: el indice sirve al humano que
   decide si sigue y al modelo que quiere saber que hay dentro; las fuentes
   importan para GEO mas de lo que parece, porque lo que cita fuentes se
   cita mas. */
.indice,.fuentes{
  max-width:60ch;margin:2.4rem auto 0;text-align:left;
  background:var(--superficie);border:1px solid var(--linea);
  box-shadow:var(--sombra);padding:1.4rem 1.6rem;
}
.indice-k{
  display:block;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--texto-3);margin-bottom:.9rem;
}
.indice ol,.fuentes ol{list-style:none;counter-reset:idx;display:flex;flex-direction:column;gap:.55rem;}
.indice li,.fuentes li{counter-increment:idx;display:flex;gap:.8rem;font-size:.94rem;}
.indice li::before,.fuentes li::before{
  content:counter(idx,decimal-leading-zero);
  font-family:var(--font-mono);font-size:.68rem;color:var(--texto-3);padding-top:.25em;flex:none;
}
.indice a{color:var(--texto-2);border-bottom:1px solid transparent;}
.indice a:hover{color:var(--texto);border-bottom-color:var(--valida-linea);}
.fuentes a{color:var(--valida);border-bottom:1px solid var(--valida-linea);word-break:break-word;}

/* ============================================================
   NUMERO FANTASMA
   ============================================================ */
.fantasma{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-weight:200;line-height:.8;letter-spacing:-.04em;
  color:var(--marca);opacity:.07;
  font-size:clamp(8rem,22vw,18rem);
  right:var(--gutter);bottom:-.12em;
}


/* ============================================================
   INTERACCIONES AL SCROLLEAR
   Cada tipo de elemento entra DE UNA MANERA DISTINTA. Si todo hace lo
   mismo, a la tercera seccion ya no llama la atencion a nadie.

     titular   -> las lineas suben desde detras de una mascara
     guion     -> la regla se dibuja de dentro hacia fuera
     mark      -> la banda verde se pinta de izquierda a derecha
     cifra     -> el numero cuenta hasta su valor (lo hace guion.js)
     captura   -> se revela de abajo arriba, como al levantar un papel
     tarjetas  -> suben escalonadas, no todas a la vez
     barra     -> crece desde cero

   Todo se apaga entero con prefers-reduced-motion, y sin JS no se esconde
   nada: el CSS solo actua si el <html> lleva .js.
   ============================================================ */

/* -- titular: mascara por linea -- */
.js .i-titular{overflow:hidden;}
.js .i-titular > span{
  display:block;
  transform:translateY(105%);
  transition:transform .95s var(--ease);
}
.js .i-titular.vista > span{transform:none;}

/* -- guion: la regla se dibuja -- */
.js .guion{transform:scaleX(0);transition:transform .7s var(--ease) .1s;}
.js .guion.vista{transform:scaleX(1);}

/* -- captura: se levanta el papel -- */
.js .res-shot img{
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.1s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.js .res-shot.vista img{clip-path:inset(0 0 0 0);}

/* -- piezas de muestra: el mismo levantado, mas rapido -- */
.js .pieza .pieza-marco{clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease);}
.js .pieza.vista .pieza-marco{clip-path:inset(0 0 0 0);}

/* -- barras de dato -- */
.js .barra-p i{transform:scaleX(0);transform-origin:left center;transition:transform 1s var(--ease);}
.js .barra-p.vista i{transform:scaleX(1);}

/* -- cifra: el numero no se mueve, cuenta (guion.js) -- */
.js .i-cifra{font-variant-numeric:tabular-nums;}

/* -- escalonado de las tarjetas dentro de una rejilla -- */
.js .rv[data-orden]{transition-delay:calc(var(--orden, 0) * 70ms);}

@media (prefers-reduced-motion:reduce){
  .js .i-titular > span,
  .js .guion,
  .js .barra-p i{transform:none!important;transition:none!important;}
  .js .res-shot img,
  .js .pieza .pieza-marco{clip-path:none!important;transition:none!important;}
  .js mark::before{transform:scaleX(1)!important;transition:none!important;}
}


/* ---------- La palabra en rojo, animada ----------
   El enfasis del titular no aparece de golpe: entra desde el color del
   texto y vira al rojo mientras la linea sube, con la barra dibujandose
   debajo. Es la unica animacion de color de la web, y por eso se nota. */
.js .h-xl em,.js h2.h-sec em{
  position:relative;color:var(--texto);
  transition:color .9s var(--ease) .25s;
}
.js .i-titular.vista em{color:var(--valida);}
.js .i-titular.vista em.mal{color:var(--marca);}
.js .h-xl em::after,.js h2.h-sec em::after{
  content:"";position:absolute;left:0;right:0;bottom:.02em;height:.06em;
  background:var(--valida);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .8s var(--ease) .45s;
}
.js .h-xl em.mal::after,.js h2.h-sec em.mal::after{background:var(--marca);}
.js .i-titular.vista em::after{transform:scaleX(1);}

@media (prefers-reduced-motion:reduce){
  .js .h-xl em,.js h2.h-sec em{color:var(--valida);transition:none;}
  .js .h-xl em.mal,.js h2.h-sec em.mal{color:var(--marca);}
  .js .h-xl em::after,.js h2.h-sec em::after{transform:scaleX(1);transition:none;}
}

/* ============================================================
   REVEAL
   Solo esconde si el <html> lleva .js, que la pone un script en linea de
   la cabecera. Sin JS, la pagina se ve entera desde el primer momento.
   ============================================================ */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.js .rv.on{opacity:1;transform:none;}
.rv-1{transition-delay:.08s;}
.rv-2{transition-delay:.16s;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .rv{opacity:1;transform:none;transition:none;}
  *{animation:none!important;}
  .btn:hover{transform:none;}
}