/* ============================================================
   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;
}
/* Archivo variable, para los titulares. Tiene eje de ANCHURA (62,5 a 125 %),
   que es lo que le da la presencia: a 112 % ocupa mas sin engordar el trazo.
   OFL, igual que Inter y JetBrains: se puede autoalojar sin pagar nada. */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62.5% 125%;
  font-display:swap;src:url(/assets/fonts/archivo-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:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62.5% 125%;
  font-display:swap;src:url(/assets/fonts/archivo-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: HUESO CALIDO ---
     El 27/09/2026 vuelve el claro, y esta vez si.
     La primera version fue clara, se paso a oscura el 02/09 y el motivo
     estaba escrito: «sobre hueso las capturas de Meta se veian pegadas al
     fondo». Ese motivo YA NO EXISTE, porque entre medias se monto la
     estructura de dos zonas: la seccion de resultados y el cierre son
     .zona-ink y siguen siendo oscuros pase lo que pase. Las capturas nunca
     tocan el hueso.
     Ni blanco puro ni negro puro, que es lo que hacen las siete referencias
     del estudio. Aesop usa #FFFEF2, inBeat #F7F5F2. Este es #F5F2ED.
     Las superficies suben hacia el BLANCO: la tarjeta es mas clara que el
     fondo, igual que antes era mas clara que el carbon. */
  --fondo:#F5F2ED;          /* hueso calido */
  --superficie:#FFFFFF;     /* tarjeta, un escalon por encima */
  --superficie-2:#FBF9F5;   /* lo que va mas arriba del todo */
  --hundido:#1A1917;        /* pozos: siguen OSCUROS, ahi van las capturas */
  --texto:#1B1A18;
  --texto-2:#575249;
  --texto-3:#767065;   /* las etiquetas mono: a #8A847A se quedaban en 3,3:1 */
  --linea:#E3DED5;
  --linea-fuerte:#C8C1B4;
  --rejilla:rgba(27,26,24,.05);
  --rejilla-fuerte:rgba(27,26,24,.09);
  /* Sobre claro la sombra es MUCHO mas suave: la misma sombra que despega una
     tarjeta sobre negro, sobre hueso la ensucia. */
  --sombra:0 1px 2px rgba(27,26,24,.06), 0 8px 24px rgba(27,26,24,.07);
  --sombra-alta:0 2px 6px rgba(27,26,24,.09), 0 24px 56px rgba(27,26,24,.12);
  --sombra-dentro:inset 0 2px 14px rgba(27,26,24,.10);
  /* Sobre claro NO hay halo: el relieve de letra que funcionaba sobre negro
     aqui se ve como una mancha. El contraste lo da el propio texto. */
  --sombra-texto:none;

  /* 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  verde -> COMPROBADO. Solo marcas y texto.
     Sobre hueso la menta clara no llegaba ni a 2:1, asi que --valida baja a
     un verde oscuro que da 5,4:1. La lima se queda, porque va de fondo con
     texto negro encima y ahi el contraste lo pone la letra. */
  --accion:#A8E63C;
  --accion-oscuro:#93D128;
  --valida:#237A4A;
  --valida-suave:rgba(35,122,74,.13);
  --valida-linea:rgba(35,122,74,.45);

  /* --- rojo de marca: estructura y enfasis --- */
  --marca:#C7371C;          /* sobre claro hay que bajar la saturacion */
  --marca-suave:rgba(199,55,28,.10);
  --marca-linea:rgba(199,55,28,.35);
  --marca-logo:#E23A1B;     /* la X del logo, un punto mas viva */

  --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{
  /* LA ZONA DE PRUEBA, ahora en claro.
     Historia corta: era casi negra (#0A0A0B). Sobre hueso entraba como una
     losa. Se subio a carbon calido y seguia siendo demasiado salto. Eric:
     «distinto color, pero no tanta diferencia».
     Asi que deja de ser oscura: es un HUESO MAS PROFUNDO. Un escalon de tono,
     no un cambio de mundo. Se sigue notando que entras en otra zona, que es
     para lo que existe, pero ya no da un portazo.
     El precio de esto: una captura de Meta es una interfaz clara, y sobre
     claro se pega al fondo. Por eso la tarjeta sube a blanco y la captura
     lleva marco de verdad; sin eso, esto no funcionaria. */
  --fondo:#E9E4D9;          /* hueso profundo */
  --superficie:#FFFFFF;     /* la tarjeta, que es lo que despega la captura */
  --superficie-2:#FAF8F3;
  --hundido:#D8D2C4;        /* el pozo, un punto por debajo del fondo */
  --texto:#1B1A18;
  --texto-2:#565046;
  --texto-3:#7B7568;
  --linea:#D3CCBD;
  --linea-fuerte:#B4AC9B;
  --rejilla:rgba(27,26,24,.055);
  --rejilla-fuerte:rgba(27,26,24,.095);
  --accion:#A8E63C;
  --accion-oscuro:#93D128;
  --valida:#1F7043;
  --valida-suave:rgba(31,112,67,.14);
  --valida-linea:rgba(31,112,67,.45);
  --marca:#BE3318;
  --marca-suave:rgba(190,51,24,.10);
  --marca-linea:rgba(190,51,24,.34);
  --sombra:0 1px 2px rgba(27,26,24,.07), 0 8px 24px rgba(27,26,24,.08);
  --sombra-alta:0 2px 6px rgba(27,26,24,.10), 0 24px 56px rgba(27,26,24,.13);
  --sombra-dentro:inset 0 2px 14px rgba(27,26,24,.10);
  --sombra-texto:none;
}
/* La captura necesita marco cuando el fondo es claro: es una interfaz blanca
   sobre una tarjeta blanca y sin borde no se sabe donde empieza. */
.zona-ink .res-shot img,.zona-ink .prueba-i img{border:1px solid var(--linea-fuerte);}
.zona-ink .prueba-i{background:var(--hundido);}



*{margin:0;padding:0;box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  background:var(--fondo);
  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);}

/* Los titulares van en ARCHIVO, no en Inter. Inter esta bien y no es Poppins
   -que es lo que usan las tres agencias españolas que miramos-, pero es la
   letra que usa medio internet. Archivo abre el eje de anchura al 112 % y a
   ese tamaño se lee con presencia sin engordar el trazo. El texto de lectura
   se queda en Inter: aqui solo cambia lo grande. */
.h-xl,h2.h-sec{
  font-family:'Archivo','Inter',system-ui,sans-serif;
  font-stretch:112%;
}
.h-xl{
  font-size:clamp(2.9rem,7vw,5.6rem);
  font-weight:300;           /* Archivo a 200 se afina de mas; 300 aguanta */
  line-height:1.04;
  letter-spacing:-.026em;
  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:300;
  line-height:1.1;
  letter-spacing:-.022em;
  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:.45rem;white-space:nowrap;
  padding:.62rem .95rem;font-size:.82rem;font-weight:500;
  background:var(--valida);border:1px solid var(--valida);color:#FFFFFF;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.cab-wa:hover{background:#1B6A3F;border-color:#1B6A3F;color:#FFFFFF;transform:translateY(-1px);}
.cab-wa svg{width:15px;height:15px;flex:none;}
@media (max-width:1120px){.cab-wa span{display:none;}.cab-wa{padding:.6rem .7rem;}}
/* EL LOGOTIPO. Fijado el 26/08/2026.
   Iba sin font-family y salia en Inter por herencia del body: funcionaba, pero
   por accidente. Ahora va escrito. El logo no puede depender de que nadie
   toque --font-body.
   Inter 500, caja alta, +.26em de tracking y la X en el rojo original.
   Esta misma regla se replica en la landing, en agendar y en las 70 demos. */
.logo{
  font-family:var(--font-body);
  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;}
/* El de Servicios lleva doce y va en cuatro columnas, una por grupo. Doce
   enlaces en fila no se leen: la cabecera del grupo hace de indice. */
.dd[data-destino="/agencia/servicios/"][data-abierto="1"] .dd-m{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.2rem 1rem;min-width:min(58rem,88vw);padding:1rem;align-items:start;
}
.dd-m .dd-todos{grid-column:1 / -1;}
.dd-gt{
  display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--valida);
  padding:.5rem .6rem .35rem;border-bottom:1px solid var(--linea);margin-bottom:.2rem;
}
@media (max-width:980px){
  /* en movil el panel va desplegado dentro del menu: una columna y ya */
  .dd[data-destino="/agencia/servicios/"][data-abierto="1"] .dd-m,
  .dd[data-destino="/agencia/servicios/"] .dd-m{
    display:block;min-width:0;padding:.5rem;
  }
  .dd-gt{margin-top:.6rem;}
}
/* PUENTE sobre el hueco de 18px que hay entre el boton y el panel. Sin el,
   al bajar el raton se cruza una franja que no pertenece a .dd: salta
   mouseleave y el panel desaparece antes de poder pulsarlo. Al ser hijo de
   .dd-m cuenta como estar dentro de .dd, y no se ve porque no pinta nada. */
.dd-m::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;}
.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;}

/* Con el menu movil desplegado la barra sobra: ocupa el fondo de la pantalla
   por delante de los enlaces. El atributo lo pone guion.js al abrir. */
html[data-menu="1"] .barra{display:none;}

.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;
  }
  /* Por encima de la barra fija de CTA, que va a z-index 120. Sin esto la
     barra se pinta sobre el menu abierto y se traga el toque del enlace que
     caiga debajo -medido: "Metodo" a 375x812-. */
  .nav{z-index:130;}
  .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;}
  /* Aqui el panel va dentro del menu, no colgando: no hay hueco que puentear
     y, al ser .dd-m estatico, el puente se colocaria respecto a .dd como una
     franja invisible por encima capaz de comerse un toque. Fuera. */
  .dd-m::before{display:none;}
  .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(2.8rem,6vh,4.6rem) 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.4rem,2.6vh,2.1rem);text-align:center;}
.sec-cab .entradilla{margin-top:1.1rem;}

/* Rejilla tecnica. El modulo pasa de 72 a 96 px: a 72 se apelotonaba y de
   lejos parecia una textura sucia; a 96 se lee como trama dibujada. */
.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 96px),
    repeating-linear-gradient(to bottom, var(--rejilla) 0 1px, transparent 1px 96px);
}
/* El heroe llevaba la rejilla al doble de fuerza y desvaneciendose hacia
   abajo. Sobre oscuro ese desvanecido no se notaba; sobre hueso SI, y se lee
   como un degradado gris entre el heroe y la primera seccion, que es
   exactamente lo que no se quiere ver.
   Ahora la rejilla es la MISMA en toda la pagina: misma fuerza y sin mascara.
   Sin escalon de intensidad no hace falta desvanecer nada, y el empalme entre
   secciones desaparece del todo. */
/* vineta por seccion: oscurece los bordes y empuja la mirada al centro.
   Es profundidad de campo, no decoracion. */
/* SIN rescoldo de color. Habia dos manchas, roja arriba a la derecha y verde
   abajo a la izquierda, y hacian dos cosas malas: apagaban la rejilla, que de
   lejos se leia como suciedad en vez de como trama, y repartian el color de
   marca por el fondo, donde no dice nada.
   El rojo y el verde se quedan donde SI significan algo: la X del logo, los
   kickers, y el <em> de los titulares.

   Y DESDE EL PASO A HUESO, tampoco hay viñeta. Sobre oscuro era profundidad
   de campo: oscurecia los bordes y empujaba la mirada al centro. Sobre claro
   es una mancha gris en el borde de cada seccion, y como cada seccion lleva
   la suya, la pagina entera se ve rayada en bandas horizontales.
   Las reglas se quedan vacias en vez de borrarse para que se vea que la
   decision es deliberada y no un olvido. */
.sec::after,.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:none;
}
.hero::after{
  background:none;
}
.zona-ink.sec::after,.cierre.zona-ink::after{
  background:none;
}
.cierre{position:relative;overflow:hidden;}
.cierre::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:none;
}

/* 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:.75rem;margin-bottom:1.3rem;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(2rem,4.5vh,3.2rem) 0 clamp(2.2rem,5vh,3.6rem);
}
.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{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{
  /* OJO: sobre hueso el plato va OSCURO, no claro. La mayoria de los logos
     son blancos o de color vivo y sobre hueso desaparecerian. Los de tinta
     oscura son la excepcion y llevan su plato claro, mas abajo. */
  background:#22211F;border:1px solid var(--linea);box-shadow:var(--sombra);
  margin:0;padding:0;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.marcas-tira .plato:hover{border-color:var(--linea-fuerte);transform:translateY(-2px);}
/* el logo manda en su caja y el nombre va debajo, fuera de ella, para que el
   fondo claro de los logos de tinta oscura no se coma tambien el nombre */
.marcas-tira .plato > img{
  height:104px;width:100%;max-width:100%;max-height:none;min-width:0;
  object-fit:contain;padding:1.5rem 1.6rem;box-sizing:border-box;flex:none;
}
.marcas-tira .plato figcaption{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--texto-2);
  padding:.7rem .8rem .8rem;text-align:center;border-top:1px solid var(--linea);
  background:var(--superficie);
}
/* 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. */
/* EN COLOR. Antes iban en grayscale(1) y opacity(.6), y ademas seguian en
   blanco y negro AL PASAR EL RATON: no habia forma de verlos en color en
   ninguna parte de la web. Un logo apagado no dice «marca seria», dice «no es
   cliente de verdad», que es lo contrario de lo que hace esta seccion.

   El problema que resolvia el filtro era real: un logo de tinta oscura sobre
   fondo oscuro no se ve. Pero eso se arregla cambiando el PLATO, no matando
   el logo. Tinta oscura -> plato claro, y el logo en sus colores. */
.marcas-tira img,.marca-plato img{
  width:auto;height:auto;object-fit:contain;
  transition:transform .3s var(--ease);
}
/* TAMAÑO OPTICO. Sin esto cada logo sale del tamaño que quiera su archivo:
   un cuadrado llena el plato entero y una marca apaisada se queda diminuta al
   lado. Se limitan las DOS medidas, y la altura mas que la anchura, que es lo
   que iguala un cuadrado con una firma larga. */

.marca-plato img{max-width:82%;max-height:52px;}
.marcas-tira .plato:hover img,.marca:hover .marca-plato img{transform:scale(1.04);}
/* tinta oscura -> la CAJA DEL LOGO se aclara, no la ficha entera */
.marcas-tira .plato:has(img[data-tono="oscuro"]){background:#EFECE5;}
/* «blanco»: blanco puro, para los logos con circulo negro que se pegan al
   hueso y necesitan mas separacion del borde */
.marcas-tira .plato:has(img[data-tono="blanco"]){background:#FFFFFF;}
.marcas-tira .plato:has(img[data-tono="blanco"]) > img{padding:1.7rem 1.9rem;}
.marca-plato:has(img[data-tono="oscuro"]){background:#EFECE5;}
/* sin :has(), se invierte el logo oscuro, que es lo que se hacia antes */
@supports not selector(:has(*)){
  .marcas-tira img[data-tono="oscuro"],.marca-plato img[data-tono="oscuro"]{filter:invert(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:1.05rem;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;
}
/* El numero grande es lo que VOLVIO. La segunda linea es la inversion o el
   periodo, y va apagada: es el contexto, no el dato. Antes iba en verde
   porque ahi vivia el retorno; al invertir el orden, el verde ahi mentia. */
/* La segunda linea SIEMPRE en su renglon. Con el <br> a secas se quedaba
   pegada al euro y salia «287.375 €en 6 meses». */
.res-n em{display:block;font-style:normal;font-weight:300;color:var(--texto-3);
  font-size:.5em;letter-spacing:0;line-height:1.25;margin-top:.4rem;}
.res-d{font-size:.95rem;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{
  /* NUNCA por encima de su tamaño real. Las capturas del panel son de 760 px
     y se estaban estirando a 1.350: el texto quedaba borroso y no se leia el
     numero, que es lo unico que esta seccion tiene que demostrar. */
  width:100%;max-width:min(100%, var(--nat, 100%));height:auto;margin:0 auto;display:block;
  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;}
/* Una pieza en 9:16 a 1400 px de ancho no cabria en ninguna pantalla: aqui
   manda el alto, y el ancho sale del propio video. */
.visor-video{
  position:relative;margin:0 auto;width:-moz-fit-content;width:fit-content;
  max-width:100%;background:#0E0E10;border:1px solid #3C3C42;line-height:0;
}
.visor-video video{display:block;max-height:74vh;max-width:100%;height:auto;}
.visor-video .pz-ctrl{position:absolute;left:0;right:0;bottom:0;}
.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:1.05rem;color:var(--texto-2);margin:0;max-width:34ch;}

.garantias{
  display:grid;gap:16px;
  /* Cinco tarjetas: a cuatro por fila la quinta se queda huerfana. Con este
     minimo caben 3+2 en pantalla ancha y 2+2+1 en tableta, que se lee como
     una reja y no como un sobrante. */
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr));
}
@media (min-width:1080px){.garantias{grid-template-columns:repeat(3,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:1.06rem;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;
  background:var(--valida);border:1px solid var(--valida);color:#FFFFFF;
}
.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:1rem;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 — el muro de creativos

   Aqui SI hay colores literales, y es la segunda excepcion escrita a la
   regla de arriba, junto al visor: los controles van encima del video, y
   un video es oscuro en las dos zonas. Atarlos a --texto los dejaria
   invisibles sobre la mitad de los planos.
   ============================================================ */
.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);cursor:zoom-in;}
.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[data-formato="4-5"]:hover .pieza-marco img{transform:scale(1.05);}

/* El video va ENCIMA del poster y aparece cuando tiene fotograma. Asi no
   hay parpadeo a negro mientras el archivo llega. */
.pieza-v{
  position:absolute;inset:0;z-index:2;
  opacity:0;transition:opacity .4s var(--ease);
}
.pieza[data-abierto="1"] .pieza-v{opacity:1;}

.pieza-play{
  position:absolute;inset:0;z-index:4;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[data-abierto="1"] .pieza-play{display:none;}

.pieza figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:2.2rem .85rem .8rem;pointer-events:none;text-align:left;color:#EDEAE3;
  background:linear-gradient(to top, rgba(8,8,10,.86), rgba(8,8,10,.42) 55%, transparent);
  text-shadow:0 1px 10px rgba(10,10,12,.8);
}
/* con reproductor debajo, el nombre del formato sube por encima de la barra
   y el velo enlaza con el de los controles: se lee como un solo oscurecido */
.pieza[data-video] figcaption{bottom:3.55rem;padding:1.9rem .85rem .4rem;}
.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);
}
.piezas-pie{
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.1em;
  color:var(--texto-3);margin-top:1.2rem;text-align:center;
}
.filtros-piezas{margin-bottom:1.6rem;}

/* ---- Controles ----------------------------------------------------
   Los nativos no caben: en una tarjeta de 168 px la barra de Chrome tapa
   media pieza y en iOS ni siquiera es la misma. Estos reflowean solos —la
   linea de tiempo se va arriba— asi que el mismo marcado sirve para la
   tarjeta pequena y para el visor a pantalla completa. */
.pz-ctrl{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;
  padding:.45rem .5rem .5rem;
  background:linear-gradient(to top, rgba(8,8,10,.93), rgba(8,8,10,.82));
  cursor:default;
}
.pz-b{
  flex:none;width:26px;height:26px;padding:0;border:0;background:none;
  display:inline-flex;align-items:center;justify-content:center;
  color:#F2EFE7;cursor:pointer;border-radius:50%;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.pz-b:hover{background:rgba(242,239,231,.16);}
.pz-b:active{transform:scale(.92);}
.pz-b svg{width:16px;height:16px;fill:currentColor;pointer-events:none;}
.pz-b:focus-visible{outline:2px solid var(--valida);outline-offset:1px;}

/* las dos barras comparten pintura: --p lo mueve el JS */
.pz-ctrl input[type=range]{
  -webkit-appearance:none;appearance:none;height:14px;margin:0;padding:0;
  background:none;cursor:pointer;
}
.pz-ctrl input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;
  background:linear-gradient(to right, #F2EFE7 var(--p,0%), rgba(242,239,231,.28) var(--p,0%));
}
.pz-ctrl input[type=range]::-moz-range-track{
  height:3px;border-radius:2px;background:rgba(242,239,231,.28);
}
.pz-ctrl input[type=range]::-moz-range-progress{height:3px;border-radius:2px;background:#F2EFE7;}
.pz-ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%;
  background:#F2EFE7;border:0;margin-top:-4px;
  box-shadow:0 1px 4px rgba(8,8,10,.7);
}
.pz-ctrl input[type=range]::-moz-range-thumb{
  width:11px;height:11px;border-radius:50%;background:#F2EFE7;border:0;
  box-shadow:0 1px 4px rgba(8,8,10,.7);
}
.pz-ctrl input[type=range]:focus-visible{outline:2px solid var(--valida);outline-offset:2px;}
/* la linea de tiempo, siempre en su propia fila y a todo lo ancho */
.pz-t{flex:1 0 100%;order:-1;}
.pz-v{flex:1 1 40px;min-width:34px;max-width:88px;}
.pz-reloj{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;
  color:rgba(242,239,231,.72);margin-left:.15rem;white-space:nowrap;
}
.pz-full{margin-left:auto;}
.pz-ctrl-grande .pz-full{margin-left:0;}

/* a pantalla completa hay sitio: todo mas grande y con reloj */
.pz-ctrl-grande{padding:.7rem .8rem .8rem;gap:.45rem;}
.pz-ctrl-grande .pz-b{width:34px;height:34px;}
.pz-ctrl-grande .pz-b svg{width:19px;height:19px;}
.pz-ctrl-grande .pz-v{flex:0 1 110px;max-width:110px;margin-left:auto;}

/* Con el dedo, 26 px es poco. No caben tres botones de 44 en una tarjeta de
   168 px, asi que se sube el icono a 32 y se le da altura de sobra a las dos
   barras: la pista sigue siendo de 3 px, pero la zona que responde es de 22. */
@media (hover:none){
  .pz-ctrl{padding:.5rem .5rem .6rem;gap:.35rem;}
  .pz-b{width:32px;height:32px;}
  .pz-b svg{width:18px;height:18px;}
  .pz-ctrl input[type=range]{height:22px;}
  .pz-ctrl input[type=range]::-webkit-slider-thumb{margin-top:-4.5px;}
  .pieza[data-video] figcaption{bottom:4rem;}
}

/* ============================================================
   FORMULARIO DE AUDITORIA

   Cualifica antes de la llamada. No manda nada a ningun sitio: guion.js monta
   el texto y el boton abre WhatsApp. Cuatro campos y para: cada campo de mas
   es gente que no lo rellena.
   ============================================================ */
.aud{
  max-width:40rem;margin:2.2rem auto 0;text-align:left;
  background:var(--superficie);border:1px solid var(--linea);
  box-shadow:var(--sombra);padding:1.6rem 1.5rem;
}
.aud-campos{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1.4rem;}
@media (min-width:620px){
  .aud-campos{grid-template-columns:repeat(2,1fr);}
  .aud-ancho{grid-column:1 / -1;}
}
.aud-c{display:flex;flex-direction:column;gap:.4rem;}
.aud-c > span{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--texto-3);
}
.aud-c input,.aud-c select{
  width:100%;font-family:inherit;font-size:.95rem;color:var(--texto);
  background:var(--hundido);border:1px solid var(--linea-fuerte);
  padding:.72rem .8rem;border-radius:0;appearance:none;-webkit-appearance:none;
  transition:border-color .2s var(--ease);
}
/* la flecha del desplegable, dibujada: la nativa no se puede teñir */
.aud-c select{
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%, calc(100% - 12px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:2.2rem;
}
.aud-c input::placeholder{color:var(--texto-3);}
.aud-c input:focus,.aud-c select:focus{outline:none;border-color:var(--valida);}
.aud-c input:focus-visible,.aud-c select:focus-visible{outline:2px solid var(--valida);outline-offset:1px;}
.aud-enviar{width:100%;justify-content:center;}
.aud-nota{
  font-size:.8rem;line-height:1.55;color:var(--texto-3);margin:1rem 0 0;text-align:center;
}
.aud-nota a{color:var(--valida);border-bottom:1px solid var(--valida-linea);}

/* ============================================================
   LA PRUEBA EN EL HEROE

   De las doce agencias que medimos en agosto de 2026 (Dubai, Miami,
   Barcelona y Madrid) ninguna pone la captura al lado de la cifra: todas
   sueltan el porcentaje y siguen. Es lo unico que esta web tiene y ellas no,
   y estaba tres pantallas mas abajo. Aqui sube a la primera.
   ============================================================ */
.prueba{
  display:grid;grid-template-columns:1fr;gap:1.1rem;align-items:center;
  max-width:52rem;margin:2.2rem auto 0;text-align:left;
  background:var(--superficie);border:1px solid var(--linea);
  box-shadow:var(--sombra);padding:1.25rem 1.35rem;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
@media (min-width:760px){.prueba{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:1.6rem;}}
.prueba:hover{border-color:var(--linea-fuerte);box-shadow:var(--sombra-alta);transform:translateY(-2px);}
.prueba-k{
  display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--texto-3);margin-bottom:.5rem;
}
.prueba-c{
  display:block;font-size:clamp(1.7rem,4.4vw,2.5rem);font-weight:300;line-height:1;
  letter-spacing:-.03em;color:var(--texto);margin-bottom:.55rem;
}
.prueba-c em{
  display:block;margin-top:.3rem;font-style:normal;font-size:.42em;font-weight:400;
  color:var(--texto-3);letter-spacing:0;line-height:1.2;
}
.prueba-p{display:block;font-size:.86rem;line-height:1.5;color:var(--texto-2);}
/* la captura se mete en el pozo, como en el muro de resultados */
.prueba-i{display:block;background:var(--hundido);border:1px solid var(--linea);padding:.5rem;}
.prueba-i img{display:block;width:100%;height:auto;}
.prueba-f{
  display:block;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--texto-3);margin-top:.5rem;
}

/* ============================================================
   LOS CUATRO GRUPOS

   Doce tarjetas seguidas eran un muro. Anatomia de Social Shepherd e inBeat:
   numero, nombre corto, UNA linea, y dentro los servicios como enlaces. El
   argumento de cada servicio vive en su pagina, no aqui.
   ============================================================ */
.grupo{
  display:grid;grid-template-columns:1fr;gap:1.2rem;
  padding:1.9rem 0;border-top:1px solid var(--linea);text-align:left;
}
.grupo:first-of-type{border-top:0;padding-top:.4rem;}
@media (min-width:900px){.grupo{grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:2.6rem;}}
.grupo-n{
  display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;
  color:var(--texto-3);margin-bottom:.7rem;
}
.grupo-c h3{
  font-family:'Archivo','Inter',system-ui,sans-serif;font-stretch:112%;
  font-size:clamp(1.2rem,2.6vw,1.6rem);font-weight:300;line-height:1.18;
  letter-spacing:-.02em;margin:0 0 .6rem;
}
.grupo-c p{font-size:.92rem;line-height:1.55;color:var(--texto-2);margin:0;max-width:34ch;}
/* Cada servicio con su propio borde y no una rejilla con fondo: en los
   grupos de tres, el hueco de la rejilla se veia como una celda vacia. */
.grupo-s{display:grid;grid-template-columns:1fr;gap:10px;align-content:start;}
@media (min-width:620px){.grupo-s{grid-template-columns:repeat(2,1fr);}}
.gsvc{
  display:flex;align-items:center;gap:.85rem;padding:1.05rem 1.1rem;
  background:var(--superficie);border:1px solid var(--linea);
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.gsvc:hover{border-color:var(--linea-fuerte);}
.gsvc:hover{background:var(--superficie-2);}
.gsvc .svc-i{width:26px;height:26px;margin:0;flex:none;}
.gsvc-t{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1;}
.gsvc-t b{font-size:.96rem;font-weight:500;color:var(--texto);letter-spacing:-.008em;}
.gsvc-t span{font-size:.8rem;line-height:1.4;color:var(--texto-3);}
.gsvc-v{flex:none;color:var(--texto-3);transition:transform .2s var(--ease),color .2s var(--ease);}
.gsvc:hover .gsvc-v{color:var(--valida);transform:translateX(3px);}

/* ============================================================
   LA BANDA DEL AGENTE

   Va debajo de la rejilla de servicios de la home y tiene que leerse como
   OTRA cosa, no como una tarjeta mas: es lo unico del catalogo que no tiene
   ninguna de las doce agencias medidas. De ahi el borde en menta y el fondo
   un escalon por encima.
   ============================================================ */
.agente{
  display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:center;
  margin-top:1.6rem;padding:1.8rem 1.7rem;text-align:left;
  background:var(--superficie-2);border:1px solid var(--valida-linea);
  box-shadow:var(--sombra);
}
@media (min-width:860px){.agente{grid-template-columns:minmax(0,1fr) auto;gap:2.4rem;padding:2.1rem 2rem;}}
.agente-k{
  display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--valida);margin-bottom:.7rem;
}
.agente h3{
  font-family:'Archivo','Inter',system-ui,sans-serif;font-stretch:112%;
  font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:300;line-height:1.24;
  letter-spacing:-.018em;margin:0 0 .7rem;max-width:34ch;
}
.agente h3 em{font-style:normal;font-weight:500;color:var(--valida);}
.agente p{font-size:.94rem;line-height:1.6;color:var(--texto-2);margin:0;max-width:52ch;}
.agente-a{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;flex:none;}
@media (min-width:860px){.agente-a{align-items:flex-end;}}

/* ============================================================
   MUESTRAS DEL SERVICIO

   La galeria de ejemplos, en la linea de lo que hace que un gig de Fiverr se
   entienda sin leerlo. Miniatura ligera en la rejilla; la pieza entera se pide
   solo al ampliar, igual que en el muro de resultados.
   ============================================================ */
.muestras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:16px;}
.mues{
  margin:0;padding:0;background:var(--hundido);
  border:1px solid var(--linea);box-shadow:var(--sombra);cursor:zoom-in;overflow:hidden;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.mues:hover{border-color:var(--linea-fuerte);box-shadow:var(--sombra-alta);transform:translateY(-2px);}
.mues img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top center;display:block;}
.mues figcaption{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-3);padding:.7rem .8rem;display:flex;justify-content:space-between;gap:.6rem;
  background:var(--superficie);
}
.mues figcaption span:first-child{color:var(--texto-2);text-transform:none;letter-spacing:0;
  font-family:var(--font-cuerpo,inherit);font-size:.8rem;}

/* ============================================================
   SE COMBINA CON

   Tres servicios de al lado, cada uno con LA RAZON de por que pega. Es lo que
   inBeat titula «Services connected to» y lo que contesta a «cual me falta»
   dentro de la propia pagina.
   ============================================================ */
.combina{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:820px){.combina{grid-template-columns:repeat(3,1fr);}}
.comb{
  display:flex;flex-direction:column;gap:.1rem;text-align:left;
  background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);
  padding:1.6rem 1.4rem;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.comb:hover{border-color:var(--linea-fuerte);box-shadow:var(--sombra-alta);transform:translateY(-2px);}
.comb .svc-i{width:30px;height:30px;margin-bottom:.8rem;}
.comb b{font-size:1.05rem;font-weight:500;color:var(--texto);letter-spacing:-.01em;margin-bottom:.5rem;}
.comb p{font-size:.99rem;line-height:1.55;color:var(--texto-2);margin:0 0 1.1rem;}
.comb .svc-v{margin-top:auto;}

/* ============================================================
   FRENTE A LO DE SIEMPRE

   La columna de la izquierda describe la practica habitual del sector, nunca
   a un competidor con nombre. Va apagada pero legible: taparla a medias
   convierte la comparativa en un truco.
   ============================================================ */
.contra{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:760px){.contra{grid-template-columns:repeat(2,1fr);}}
.contra-col{
  background:var(--superficie);border:1px solid var(--linea);
  box-shadow:var(--sombra);padding:1.7rem 1.5rem;text-align:left;
}
.contra-col h3{
  font-family:var(--font-mono);font-size:.66rem;font-weight:400;letter-spacing:.15em;
  text-transform:uppercase;color:var(--texto-3);margin-bottom:1.2rem;
  padding-bottom:.8rem;border-bottom:1px solid var(--linea);
}
.contra-col ul{list-style:none;display:flex;flex-direction:column;gap:.85rem;margin:0;padding:0;}
.contra-col li{
  position:relative;padding-left:1.5rem;font-size:1rem;line-height:1.5;color:var(--texto-2);
}
.contra-col li::before{
  position:absolute;left:0;top:.02em;font-size:.95em;line-height:1.5;
}
.contra-no li::before{content:"\00d7";color:var(--texto-3);}
.contra-si{border-color:var(--valida-linea);}
.contra-si h3{color:var(--valida);border-bottom-color:var(--valida-linea);}
.contra-si li{color:var(--texto);}
.contra-si li::before{content:"\2713";color:var(--valida);}

/* ============================================================
   EL EQUIPO

   Vacio mientras no haya personas de verdad: ver EQUIPO en el generador.
   ============================================================ */
.equipo{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:16px;margin-top:.6rem;
}
.pers{
  background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);
  padding:1.1rem;text-align:left;display:flex;flex-direction:column;gap:.15rem;
}
.pers img{
  width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;
  margin-bottom:.9rem;background:var(--hundido);filter:grayscale(1);
  transition:filter .3s var(--ease);
}
a.pers:hover img{filter:grayscale(0);}
.pers b{font-size:.98rem;font-weight:500;color:var(--texto);letter-spacing:-.008em;}
.pers > span{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--valida);margin-bottom:.5rem;
}
.pers p{font-size:.86rem;line-height:1.5;color:var(--texto-2);margin:0;}

/* cabecera de un bloque dentro de una seccion: separa dos cosas distintas
   -las piezas y como se hacen- sin abrir seccion nueva ni romper la
   numeracion de 01 a 07 */
.sub-cab{text-align:center;margin:clamp(2.4rem,5vh,3.6rem) 0 clamp(1.2rem,2.4vh,1.8rem);}
.h-sub{
  font-family:'Archivo','Inter',system-ui,sans-serif;font-stretch:112%;
  font-size:clamp(1.25rem,2.4vw,1.65rem);font-weight:300;letter-spacing:-.018em;
  color:var(--texto-2);
}

/* ============================================================
   LA CIFRA CON SU MES

   Un «+150 clientes» suelto es lo que pone todo el mundo y no se puede
   comprobar. Con el mes al lado pasa a ser un dato. Misma regla que la de no
   publicar un numero sin su captura.
   ============================================================ */
.fechada{
  display:flex;flex-wrap:wrap;gap:2.4rem 3.4rem;justify-content:center;
  margin-bottom:2.6rem;padding-bottom:2.2rem;border-bottom:1px solid var(--linea);
}
.fechada-b{display:flex;align-items:baseline;gap:.85rem;}
.fechada-n{
  font-family:'Archivo','Inter',system-ui,sans-serif;font-stretch:112%;
  font-size:clamp(2.6rem,6vw,3.9rem);font-weight:300;line-height:.9;
  letter-spacing:-.03em;color:var(--texto);white-space:nowrap;
}
.fechada-n i{font-style:normal;font-weight:200;color:var(--valida);}
.fechada-l{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--texto-3);line-height:1.7;
}
@media (max-width:520px){.fechada{gap:1.6rem 2rem;}}

/* ============================================================
   RESEÑAS DE GOOGLE

   El bloque solo existe si hay reseñas reales: el generador no lo pinta con
   la lista vacia. Ver RESENAS en genera-web-agencia.py.
   ============================================================ */
.resenas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:16px;margin-top:2.4rem;
}
.resena{
  background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);
  padding:1.6rem 1.4rem;margin:0;text-align:left;
}
.est{display:flex;gap:.15rem;margin-bottom:.9rem;}
.est i{font-style:normal;font-size:.9rem;line-height:1;color:var(--valida);}
.est i.off{color:var(--linea-fuerte);}
.resena blockquote{
  margin:0 0 1.1rem;font-size:.95rem;line-height:1.6;color:var(--texto);
}
.resena blockquote::before{content:"\201c";}
.resena blockquote::after{content:"\201d";}
.resena figcaption{display:flex;flex-direction:column;gap:.2rem;}
.resena figcaption b{font-size:.86rem;font-weight:500;color:var(--texto);}
.resena figcaption span{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--texto-3);
}

/* ============================================================
   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;}
}