/* enala.net — sistema visual */

/* ── tipografías ──────────────────────────────────────────── */

@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/schibsted-grotesk-latin.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:'Schibsted Grotesk';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/schibsted-grotesk-latin-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:'Geist Mono';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('../fonts/geist-mono-latin.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{
  /* ── superficie ─────────────────────────────────────────── */
  --blanco:    #FFFFFF;
  --hueso:     #FAF9F7;
  --hueso-2:   #F2F0EC;
  --linea:     #E2DFD9;
  --linea-viva:#C8C3BA;

  /* ── tinta: negro cálido, una sola familia de grises ────── */
  --tinta:       #1C1A19;   /* 17.34:1 sobre blanco */
  --texto:       #4F4B47;   /*  8.64:1 sobre blanco · 8.21 sobre hueso */
  --texto-tenue: #6E6862;   /*  5.50:1 sobre blanco · 5.23 sobre hueso */

  /* ── marca ──────────────────────────────────────────────── */
  --marca:   #FF3F32;   /* el rojo del logotipo. Formas y texto grande */
  --marca-2: #FFD9D5;   /* rebajado, para los gajos apagados */
  --accion:  #D42718;   /*  5.12:1 sobre blanco · 4.86 sobre hueso */
  --accion-h:#AE1D0F;   /*  7.04:1 */

  /* ── tipografía ─────────────────────────────────────────── */
  --fuente:  'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

  --t-xs:  .8125rem;
  --t-s:   .9375rem;
  --t-m:   1.0625rem;
  --t-l:   1.25rem;
  --t-xl:  1.625rem;
  --t-2xl: clamp(1.75rem, 3.2vw, 2.75rem);
  --t-3xl: clamp(2.25rem, 5.2vw, 4.25rem);
  --t-4xl: clamp(2.5rem, 4.15vw, 3.75rem);   /* el titular de portada, en dos líneas */

  /* ── ritmo de 4 ─────────────────────────────────────────── */
  --e1:.25rem; --e2:.5rem;  --e3:.75rem; --e4:1rem;  --e6:1.5rem;
  --e8:2rem;   --e12:3rem;  --e16:4rem;  --e20:5rem; --e24:6rem;

  --radio-s:3px;
  --radio-m:8px;

  --ancho:1320px;
  --medida:56ch;

  /* sombra tintada con el marrón de la tinta, nunca negro plano */
  --sombra:0 1px 2px rgba(28,26,25,.05), 0 14px 36px -16px rgba(28,26,25,.22);

  /* escala de z-index: sin números arbitrarios */
  --z-base:1; --z-nav:20; --z-menu:30; --z-salto:40;

  --curva:cubic-bezier(.2,.75,.25,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--blanco);
  color:var(--texto);
  font-family:var(--fuente);
  font-size:var(--t-m);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  color:var(--tinta);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
  margin:0;
}
p{margin:0; text-wrap:pretty}

/* ── el guion bajo del claim, cierre de titular ───────────── */

.tit .fin{white-space:nowrap}
.tit .fin::after{
  content:"";
  display:inline-block;
  width:.6em;
  height:.103em;
  margin-left:.072em;
  background:var(--marca);
  transform:translateY(.3em);
}
a{color:inherit}
address{font-style:normal}
img,svg{display:block; max-width:100%}
ul{margin:0; padding:0; list-style:none}

:focus-visible{
  outline:2px solid var(--accion);
  outline-offset:3px;
  border-radius:2px;
}

/* ── utilidades ───────────────────────────────────────────── */

.wrap{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,3.5rem);
}

.mono{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

.rotulo{
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--texto-tenue);
}

.medida{max-width:var(--medida)}

.saltar{
  position:absolute; left:var(--e4); top:-4rem;
  z-index:var(--z-salto);
  background:var(--tinta); color:#fff;
  padding:var(--e3) var(--e4);
  border-radius:var(--radio-s);
  font-size:var(--t-s); font-weight:500;
  text-decoration:none;
  transition:top .2s var(--curva);
}
.saltar:focus{top:var(--e4)}

/* ── el icono como sistema ────────────────────────────────── */

.bola{width:100%; height:auto; overflow:visible}
.gajo{fill:var(--marca); transform-box:fill-box; transform-origin:center}
.gajo--off{fill:var(--marca-2)}
.gajo--on{fill:var(--marca)}

/* ── logotipo ─────────────────────────────────────────────── */

.marca{display:block; flex:none}
.marca svg{width:100%; height:auto}
.marca--barra{width:9.5rem}
.marca--pie{width:8.5rem}
.marca .m-marca{fill:var(--marca)}
.marca .m-claim{fill:#666666}
a:hover .marca .m-marca{fill:var(--accion)}

/* ── barra ────────────────────────────────────────────────── */

.top{
  position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--curva);
}
.top[data-scroll]{border-bottom-color:var(--linea)}
.top .wrap{display:flex; align-items:center; gap:var(--e8); min-height:4.75rem}

.nav{
  margin-inline:auto;
  display:flex; align-items:center;
  gap:clamp(1.25rem,2.6vw,2.75rem);
  font-size:var(--t-s); font-weight:500;
}
.nav a{
  text-decoration:none; color:var(--tinta);
  padding:var(--e2) 0; position:relative;
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--marca);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--curva);
}
.nav a:hover::after{transform:scaleX(1)}
/* página en la que estás */
.nav a[aria-current="page"]{color:var(--accion)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.solo-movil{display:none}   /* solo aparece dentro del menú de móvil */

/* ── botones y enlaces ────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; gap:var(--e2);
  background:var(--tinta); color:#fff;
  font:500 var(--t-s)/1 var(--fuente);
  padding:.85rem 1.3rem;
  border:0; border-radius:var(--radio-s);
  text-decoration:none; cursor:pointer;
  transition:background .2s var(--curva), transform .12s var(--curva);
}
.btn:hover{background:var(--accion)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--g{font-size:var(--t-m); padding:1.05rem 1.7rem}
.btn--rojo{background:var(--accion)}
.btn--rojo:hover{background:var(--accion-h)}
/* mientras se envía el formulario: sin hover ni pulsación, que no invite a repetir */
.btn[disabled]{cursor:progress; opacity:.72; transform:none}
.btn--rojo[disabled]:hover{background:var(--accion)}

.enlace{
  color:var(--accion); text-decoration:none; font-weight:500;
  display:inline-flex; align-items:center; gap:var(--e2);
  border-bottom:1px solid rgba(212,39,24,.3);
  padding-bottom:1px;
  transition:border-color .2s var(--curva), gap .2s var(--curva), color .2s var(--curva);
}
.enlace:hover{border-bottom-color:var(--accion-h); gap:var(--e3); color:var(--accion-h)}
.enlace svg{flex:none; transform:translateY(.5px)}  /* ajuste óptico */

.menu-btn{display:none}

/* ── hero ─────────────────────────────────────────────────── */

.hero{
  padding-block:clamp(3rem,9vh,7rem) clamp(4rem,10vh,7.5rem);
  position:relative; overflow:hidden;
}
.hero-rej{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:center;
}
.hero h1{
  font-size:var(--t-4xl);
  letter-spacing:-.045em;
  line-height:.98;
  margin-block:var(--e6) var(--e8);
}
.hero h1 em{font-style:normal; color:var(--marca)}   /* 3.49:1 — solo texto grande */

.entradilla{
  font-size:var(--t-l); line-height:1.5;
  color:var(--tinta); max-width:44ch;
}

.acciones{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--e6); margin-top:var(--e8);
}

/* la bola sale del encuadre: materia gráfica, no un logotipo agrandado */
.hero-bola{
  position:relative;
  /* lo que hay entre la columna y el borde de la ventana: el margen del
     .wrap centrado más su relleno (el mismo clamp que en .wrap) */
  --canal:calc((100vw - min(100vw, var(--ancho))) / 2 + clamp(1.25rem,4vw,3.5rem));
  --bola:min(135%,46rem);   /* en proporción con el titular de dos líneas */
}
.hero-bola .bola{
  width:var(--bola);
  max-width:none;        /* si no, la regla general de img/svg la encoge */
  /* se coloca contra el borde de la ventana, no de la columna: así sobresale
     siempre un 8 %, también en pantallas anchas, donde la web se centra */
  margin-left:calc(100% + var(--canal) - .92 * var(--bola));
  margin-block:-6%;
}

/* ── páginas interiores ───────────────────────────────────── */

.hero--pagina h1{font-size:clamp(2.5rem,6vw,5.25rem); max-width:18ch}
.hero--pagina .entradilla{max-width:52ch}
.hero--pagina .bola{width:5.5rem; margin-bottom:var(--e8)}

/* ── los socios ───────────────────────────────────────────── */

.socios{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,3vw,2.5rem);
  max-width:36rem;
}
.socio img{
  width:100%; height:auto;
  aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radio-m);
  background:var(--hueso-2);
}
.socio h3{font-size:var(--t-l); margin-top:var(--e4); letter-spacing:-.02em}
.socio .rotulo{margin-top:var(--e1)}
.socio .enlace{margin-top:var(--e3); font-size:var(--t-s)}

/* ── compromisos ──────────────────────────────────────────── */

.compromisos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.5rem,5vw,4rem) clamp(2rem,6vw,5rem);
}
.compromiso{border-top:1px solid var(--linea); padding-top:var(--e6)}
.compromiso h3{font-size:var(--t-xl); max-width:20ch; letter-spacing:-.03em}
.compromiso p{margin-top:var(--e4); max-width:42ch}

/* ── cifras ───────────────────────────────────────────────── */

.tira{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  border-top:1px solid var(--linea);
  margin-top:clamp(2rem,6vh,4rem);
}
.tira > div{
  padding:var(--e8) var(--e8) var(--e8) 0;
  border-right:1px solid var(--linea);
}
/* a partir de la segunda, separación respecto al filete de la anterior */
.tira > div + div{padding-left:var(--e8)}
.tira > div:last-child{border-right:0; padding-right:0}
.tira b{
  display:block; font-size:var(--t-2xl); font-weight:500;
  color:var(--tinta); letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums;
  margin-bottom:var(--e3);
}
.tira span{
  display:block; font-size:var(--t-s);
  color:var(--texto-tenue); max-width:24ch;
}

/* ── secciones ────────────────────────────────────────────── */

.seccion{padding-block:clamp(4.5rem,11vh,8.5rem) clamp(5.5rem,13vh,10rem)}
.seccion--hueso{background:var(--hueso)}
/* el carrusel ya trae su propio aire: la sección no necesita tanto abajo */
.seccion--clientes{padding-bottom:clamp(3.5rem,8vh,6rem)}

.cabecera{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:end;
  margin-bottom:var(--e20);
}
.cabecera .rotulo{margin-bottom:var(--e6)}
.cabecera h2{font-size:var(--t-3xl); letter-spacing:-.04em; max-width:20ch}
.cabecera p{max-width:46ch}

/* ── composiciones de sección ─────────────────────────────── */
/* Cuatro maneras de abrir una sección, según su trabajo, para que la página
   no repita un único esquema:
   A · apilada     titular y, debajo, el párrafo; el contenido a todo el ancho
   B · declaración titular pequeño, una frase que manda y el texto en dos columnas
   C · lateral     titular fijo a un lado y texto largo al otro (.motivo)
   D · franja      la apilada con el titular en una línea, para lo que se mira */

.apilada{margin-bottom:var(--e16)}
.apilada h2{font-size:var(--t-3xl); letter-spacing:-.04em; max-width:22ch}
.apilada > p{margin-top:var(--e6); max-width:60ch; font-size:var(--t-l); line-height:1.55}
.apilada--franja{margin-bottom:var(--e12)}
.apilada--franja h2{max-width:none}
/* cuando la apilada es toda la sección, el texto va debajo del titular */
.apilada:last-child{margin-bottom:0}
.apilada > div{margin-top:var(--e8)}
.apilada > .legalm{max-width:64ch}
.apilada > div > p{max-width:60ch}
/* con entradilla: el primer párrafo, más grande, abre la lectura */
.apilada--entradilla > div > p:first-child{
  font-size:var(--t-xl); line-height:1.4; letter-spacing:-.015em;
  color:var(--tinta); max-width:38ch;
}

.declaracion h2{font-size:var(--t-xl); letter-spacing:-.025em; max-width:none}
.declaracion .frase{
  font-size:var(--t-3xl); line-height:1.06; letter-spacing:-.04em;
  max-width:20ch; margin-top:var(--e8);
}
.declaracion-cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--e8) clamp(2rem,5vw,5rem);
  max-width:64rem; margin-top:var(--e12);
}
.declaracion-cols p{max-width:46ch}

.lista{display:grid; gap:var(--e3); font-size:var(--t-s); margin-top:var(--e8)}
.lista li{padding-left:var(--e6); position:relative; color:var(--texto)}
.lista li::before{
  content:''; position:absolute; left:0; top:.66em;
  width:var(--e4); height:1px; background:var(--marca);
}

/* ── por qué nos llaman ───────────────────────────────────── */

.motivo{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
.motivo h2{font-size:var(--t-3xl); max-width:15ch}
.frase{
  font-size:var(--t-2xl); line-height:1.2;
  letter-spacing:-.03em; color:var(--tinta);
  font-weight:500; max-width:24ch;
  text-wrap:balance;
}
.frase + p{margin-top:var(--e8)}

/* ── capacidades ──────────────────────────────────────────── */

.cap{
  display:grid;
  grid-template-columns:minmax(0,9rem) minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
  padding-block:clamp(3rem,8vh,6rem);
  border-top:1px solid var(--linea);
}
.cap-marca{
  display:flex; align-items:flex-start; gap:var(--e4);
  position:sticky; top:7rem;
}
.cap-marca .bola{width:6.5rem; flex:none}
.cap h3{font-size:var(--t-2xl); margin-block:0; max-width:16ch}
.cap-txt > p{max-width:48ch}
.cap-tit{position:sticky; top:7rem}
.cap-pie{margin-top:var(--e8)}
/* dos enlaces seguidos van en línea, no apilados */
.enlaces{display:flex; flex-wrap:wrap; gap:var(--e4) var(--e12)}

/* ── casos ────────────────────────────────────────────────── */

.caso{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,5rem);
  padding-block:clamp(3rem,8vh,5.5rem);
  border-top:1px solid var(--linea);
  align-items:start;
}
.caso h2,
.caso h3{font-size:var(--t-2xl); margin-block:var(--e3) var(--e6); max-width:20ch}
.caso-txt > p{max-width:var(--medida)}
.caso-datos{display:grid; gap:var(--e6)}
/* en la portada, las hojas del caso encima de sus cifras, sin quedarse fijas */
.caso-lado .mesa{position:static; margin:0 0 var(--e12); max-width:24rem}
.caso-lado .caso-datos{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e6)}
.dato b{
  display:block; font-size:var(--t-l); font-weight:500;
  color:var(--tinta); letter-spacing:-.025em; line-height:1.15;
}
.dato span{
  display:block; font-size:var(--t-xs);
  color:var(--texto-tenue); margin-top:var(--e1);
}
.caso-pie{margin-top:var(--e8)}

/* dos listas al pie de un caso: lo que hay detrás y los otros casos */
.cierre-rej{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,6vw,5rem);
  margin-top:var(--e24);
  padding-top:var(--e12);
  border-top:1px solid var(--linea);
}
.cierre-rej .lista{margin-top:var(--e4)}

/* ── clientes ─────────────────────────────────────────────── */

.sectores{display:flex; flex-wrap:wrap; gap:var(--e2); margin-top:var(--e8)}
.etiqueta{
  font-family:var(--mono);
  font-size:var(--t-xs); color:var(--texto-tenue);
  border:1px solid var(--linea-viva);
  padding:.22rem .6rem; border-radius:var(--radio-s);
}

/* ── por dónde suelen empezar ─────────────────────────────── */

.entradas{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.5rem,5vw,4rem) clamp(2rem,6vw,5rem);
}
.entrada{border-top:1px solid var(--linea); padding-top:var(--e6)}
.entrada .cita{
  font-size:var(--t-xl); line-height:1.25;
  letter-spacing:-.03em; color:var(--tinta);
  max-width:24ch; text-wrap:balance;
}
.entrada .enlace{margin-top:var(--e6)}

/* ── carrusel de clientes ─────────────────────────────────── */

.carrusel{
  display:grid; gap:var(--e4);
  padding-block:var(--e4) var(--e2);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  overflow:hidden;
}
.pista{display:flex; gap:var(--e4); width:max-content; will-change:transform}
.pista--a{animation:rueda 58s linear infinite}
.pista--b{animation:rueda 58s linear infinite reverse}
.carrusel:hover .pista,
.carrusel:focus-within .pista{animation-play-state:paused}
@keyframes rueda{to{transform:translate3d(-50%,0,0)}}

.ficha{
  flex:none;
  display:grid; place-items:center;
  min-width:11.5rem; height:5.5rem;
  padding:var(--e3) var(--e6);
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--radio-m);
  font-size:var(--t-s); font-weight:500;
  color:var(--texto); text-align:center;
  transition:border-color .25s var(--curva), color .25s var(--curva), transform .25s var(--curva);
}
.ficha:hover{border-color:var(--linea-viva); color:var(--tinta); transform:translateY(-2px)}
.ficha img{
  /* el alto de cada logotipo lo calcula el generador según su proporción */
  width:auto; height:auto; max-height:var(--alto, 2.75rem); max-width:100%;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.66;
  transition:filter .3s var(--curva), opacity .3s var(--curva);
}
/* al pasar por encima, ese logotipo recupera su color */
.ficha:hover img{filter:none; opacity:1}
.seccion--hueso .ficha{background:var(--blanco)}

/* ── formulario ───────────────────────────────────────────── */

.form{display:grid; gap:var(--e6); max-width:34rem; margin-top:var(--e12)}
.campo{display:grid; gap:var(--e2)}
.campo label{font-size:var(--t-s); font-weight:500; color:var(--tinta)}
.campo input,.campo textarea{
  font:400 var(--t-m)/1.5 var(--fuente);
  color:var(--tinta);
  background:var(--blanco);
  border:1px solid var(--linea-viva);
  border-radius:var(--radio-s);
  padding:.8rem 1rem;
  transition:border-color .2s var(--curva), box-shadow .2s var(--curva);
}
.campo textarea{resize:vertical; min-height:7rem}
.campo input:hover,.campo textarea:hover{border-color:var(--texto-tenue)}
.campo input:focus,.campo textarea:focus{
  outline:0;
  border-color:var(--accion);
  box-shadow:0 0 0 3px rgba(212,39,24,.14);
}
/* error en línea, nunca una ventana del navegador */
.campo .error{
  font-size:var(--t-s); color:var(--accion);
  display:none;
}
.campo[data-error] .error{display:block}
.campo[data-error] input,.campo[data-error] textarea{border-color:var(--accion)}

.aviso{
  font-size:var(--t-s);
  padding:var(--e4) var(--e6);
  border-radius:var(--radio-s);
  border:1px solid var(--linea-viva);
  background:var(--hueso);
}
.aviso--ok{border-color:#2F7D4F; color:#1E5836}   /* 6.7:1 sobre hueso */
/* el aviso recibe el foco al volver del envío, para que un lector de pantalla
   lo anuncie. No es un elemento con el que se interactúe, así que el aro de
   foco solo confundiría: un recuadro rojo alrededor de un mensaje de acierto. */
.aviso:focus{outline:none}
.aviso--mal{border-color:var(--accion); color:var(--accion-h)}

/* ── páginas legales ──────────────────────────────────────── */

.legalm{max-width:68ch}
.legalm h2{
  font-size:var(--t-xl); letter-spacing:-.03em;
  margin-top:var(--e16); padding-top:var(--e6);
  border-top:1px solid var(--linea);
}
.legalm h2:first-child{margin-top:0; padding-top:0; border-top:0}
.legalm h3{font-size:var(--t-l); letter-spacing:-.02em; margin-top:var(--e8)}
.legalm p,
.legalm ul{margin-top:var(--e4)}
.legalm li{padding-left:var(--e6); position:relative; margin-top:var(--e2)}
.legalm li::before{
  content:''; position:absolute; left:0; top:.72em;
  width:var(--e4); height:1px; background:var(--marca);
}
.legalm code{
  font-family:var(--mono); font-size:.9em;
  background:var(--hueso-2); color:var(--tinta);
  padding:.12em .4em; border-radius:var(--radio-s);
}
.legalm .btn{margin-top:var(--e2)}
.legalm a{color:var(--accion)}
.legalm a:hover{color:var(--accion-h)}

/* la ficha de datos identificativos */
.datos{
  display:grid; grid-template-columns:auto 1fr;
  gap:var(--e3) var(--e8);
  max-width:56rem;
  margin-bottom:var(--e20);
  padding-bottom:var(--e12);
  border-bottom:1px solid var(--linea);
  font-size:var(--t-s);
}
.datos dt{
  font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-tenue); padding-top:.15rem;
}
.datos dd{margin:0; color:var(--tinta)}

.fecha{
  font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--texto-tenue);
  margin-top:var(--e8);
}

/* ── contacto ─────────────────────────────────────────────── */

.contacto{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
.contacto h2{font-size:var(--t-2xl); margin-bottom:var(--e8)}
.contacto .aviso{margin-bottom:var(--e8)}
.contacto .form{margin-top:0; max-width:none}

.vias{display:grid; gap:var(--e8)}
.via b{
  display:block;
  font-family:var(--mono); font-size:var(--t-xs); font-weight:400;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--texto-tenue);
  margin-bottom:var(--e2);
}
.via a{
  font-size:var(--t-l); color:var(--tinta);
  text-decoration:underline; text-decoration-color:var(--linea-viva);
  text-underline-offset:.22em; text-decoration-thickness:1px;
  transition:color .2s var(--curva), text-decoration-color .2s var(--curva);
}

.via a:hover{color:var(--accion); text-decoration-color:var(--accion)}

.consentimiento{
  display:grid; grid-template-columns:auto 1fr;
  gap:var(--e3); align-items:start;
  font-size:var(--t-s); color:var(--texto-tenue);
}
.consentimiento input{
  width:1.05rem; height:1.05rem; margin:.28rem 0 0;
  accent-color:var(--accion);
}
.consentimiento a{color:var(--accion)}

/* el señuelo para robots: invisible para quien lee, presente en el HTML */
.senuelo{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.oficinas{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,6vw,5rem);
}
.oficina{border-top:1px solid var(--linea); padding-top:var(--e6)}
.oficina h3{font-size:var(--t-xl); letter-spacing:-.03em}
/* El plano va detrás del texto y disuelto por los bordes. Puesto delante era
   un recorte pegado; detrás es lo que es, materia gráfica. */
.oficina{position:relative; isolation:isolate; min-height:17rem}
.plano{
  /* ocupa toda la ficha: el SVG es cuadrado y el recorte lo hace object-fit,
     que además centra el punto de la oficina */
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  z-index:0; pointer-events:none;
  /* El techo lo marca el contraste: al 55% un enlace encima de la trama queda
     en 4,72:1 y el punto rojo —que lleva 0,45 dentro del propio SVG— en 4,82.
     Por encima, cualquiera de los dos baja del mínimo legible. */
  opacity:.55;
  /* La máscara disuelve los cuatro bordes y deja el lado izquierdo más flojo,
     que es donde cae el texto: cumple el contraste igual, pero se lee mejor. */
  -webkit-mask-image:radial-gradient(88% 128% at 66% 50%, #000 30%, rgba(0,0,0,.5) 66%, transparent 100%);
  mask-image:radial-gradient(88% 128% at 66% 50%, #000 30%, rgba(0,0,0,.5) 66%, transparent 100%);
}
.oficina > :not(.plano){position:relative; z-index:1}
.oficina address{
  font-style:normal; line-height:1.7;
  margin-top:var(--e3); color:var(--texto);
}
/* el rojo de acción tiene 5,12:1 sobre blanco y la trama se lo come: aquí va
   el oscuro, que tiene margen de sobra */
.oficina .enlace{margin-top:var(--e4); font-size:var(--t-s); color:var(--accion-h)}

/* ── página de referencia de datos ────────────────────────── */

.wrap--texto > *{max-width:42rem}
.prosa{margin-top:var(--e8)}
.prosa > * + *{margin-top:var(--e6)}
.prosa p{max-width:40rem}
.prosa b{font-weight:600; color:var(--tinta)}
.prosa .lista{margin-top:var(--e6)}
.prosa .lista li{padding-left:var(--e6)}

/* ── clientes por sector ──────────────────────────────────── */

.visualmente-oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.sector + .sector{margin-top:var(--e20)}
.sector h3{
  font-size:var(--t-s); font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--texto-tenue);
  padding-bottom:var(--e4); margin-bottom:var(--e8);
  border-bottom:1px solid var(--linea);
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--e4);
}
/* el número dice de un vistazo dónde hay más peso */
.sector h3 span{
  color:var(--marca); font-variant-numeric:tabular-nums; letter-spacing:0;
}
.rejilla{
  display:grid; gap:var(--e4);
  grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));
  list-style:none;
}
.rejilla .ficha{min-width:0; width:100%}

/* ── trabajos ─────────────────────────────────────────────── */

/* el año manda la columna izquierda y ancla la lectura */
.trabajos{margin-top:var(--e16); border-top:1px solid var(--linea)}
.trabajo{
  display:grid; grid-template-columns:8rem minmax(0,1fr);
  gap:var(--e8);
  padding-block:var(--e8);
  border-bottom:1px solid var(--linea);
}
.trabajo-anio{
  font-size:var(--t-s); color:var(--texto-tenue);
  font-variant-numeric:tabular-nums; padding-top:.25em;
}
/* «hoy» es el dato que vende: va en rojo. Es texto pequeño, así que lleva
   --accion (5.12:1) y no --marca, que se queda en 3.49:1 */
.trabajo-anio b{color:var(--accion); font-weight:600}
.trabajo--vivo{border-left:2px solid var(--marca); padding-left:var(--e6);
  margin-left:calc(var(--e6) * -1)}
.trabajo-mas{margin-top:var(--e4)}
.trabajo h3{font-size:var(--t-l); letter-spacing:-.02em}
.trabajo-cliente{
  font-size:var(--t-s); color:var(--accion);
  margin-top:var(--e1); margin-bottom:var(--e3);
}
.trabajo p:not(.trabajo-cliente):not(.trabajo-mas){max-width:54ch}

/* ── capturas del producto en un caso ─────────────────────── */
/* Tres hojas apiladas bajo el titular, ladeadas como papeles sobre una mesa.
   Se quedan a la vista mientras se lee la columna de texto de al lado. */

.motivo > div:has(.mesa){align-self:stretch}
.mesa{
  position:sticky; top:7.5rem;
  margin:clamp(2.5rem,6vh,4rem) 0 0; max-width:25rem;
}
.mesa-hojas{position:relative; aspect-ratio:5/4}
.mesa-hojas img{
  position:absolute; width:68%; height:auto;
  border:1px solid var(--linea); border-radius:var(--radio-s);
  background:var(--blanco); box-shadow:var(--sombra);
}
.mesa-hojas img:nth-child(1){top:0;    left:4%;  transform:rotate(-4deg)}
.mesa-hojas img:nth-child(2){top:12%;  right:0;  transform:rotate(3deg)}
.mesa-hojas img:nth-child(3){bottom:0; left:14%; transform:rotate(-1deg)}
@media (max-width:1000px){
  .mesa{position:static; max-width:20rem; margin-top:var(--e8)}
}

/* ── 404 ──────────────────────────────────────────────────── */

.destinos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--e12);
  margin-top:var(--e12);
  max-width:56rem;
  border-top:1px solid var(--linea);
}
.destinos li{
  display:grid; gap:var(--e1);
  padding-block:var(--e6);
  border-bottom:1px solid var(--linea);
}
.destinos span{font-size:var(--t-s); color:var(--texto-tenue)}
.destinos .enlace{justify-self:start}

.hero--404 .nota{margin-top:var(--e12); max-width:46ch}

/* ── cierre ───────────────────────────────────────────────── */

.cierre{padding-block:clamp(5rem,13vh,9.5rem); border-top:1px solid var(--linea)}
/* la línea que quita el miedo justo debajo del botón */
.nota{
  margin-top:var(--e6);
  font-size:var(--t-s);
  color:var(--texto-tenue);
}
.cierre h2{font-size:var(--t-3xl); max-width:16ch; margin-block:var(--e6) var(--e8)}

/* ── pie ──────────────────────────────────────────────────── */

.pie{
  background:var(--hueso);
  border-top:1px solid var(--linea);
  padding-block:var(--e16) var(--e8);
  font-size:var(--t-s);
}
.pie-rej{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));
  gap:var(--e12);
  padding-bottom:var(--e12);
  border-bottom:1px solid var(--linea);
}
.pie h3{
  font-family:var(--mono);
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-tenue); font-weight:400;
  margin:0 0 var(--e4);
}
.pie ul{display:grid; gap:var(--e3)}
.pie a{text-decoration:none; color:var(--tinta); transition:color .2s var(--curva)}
.pie a:hover{color:var(--accion)}

/* ── sellos ───────────────────────────────────────────────── */

.sellos-bloque{
  padding-block:var(--e12);
  border-bottom:1px solid var(--linea);
}
.sellos-bloque h3{margin-bottom:var(--e8)}
.sellos{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:var(--e12);
}
.sellos img{height:auto}

.sello-pyme{
  display:grid; justify-items:center; gap:var(--e3);
  text-decoration:none; color:var(--tinta);
  text-align:center;
}
.sello-pyme:hover .sello-pyme-txt b{color:var(--accion)}
.sello-pyme-txt{display:grid; gap:1px; line-height:1.35}
.sello-pyme-txt b{
  font-family:var(--mono);
  font-size:.9375rem; font-weight:500; color:var(--tinta);
  font-variant-numeric:tabular-nums;
  transition:color .2s var(--curva);
}
.sello-pyme-txt .razon{font-size:var(--t-xs); font-weight:500; color:var(--texto)}
.sello-pyme-txt .mencion{font-size:.9375rem; font-weight:600; color:var(--tinta); letter-spacing:.01em}
.sello-pyme-txt .validez{font-size:.6875rem; color:var(--texto-tenue)}

.legal{
  display:flex; flex-wrap:wrap; gap:var(--e4) var(--e6);
  align-items:center;
  padding-top:var(--e8);
  font-size:var(--t-xs); color:var(--texto-tenue);
}
.legal a{text-decoration:none}
.legal .der{margin-left:auto}

/* ── aviso de cookies ─────────────────────────────────────── */

.cookies{
  position:fixed; inset:auto 0 0;
  z-index:var(--z-salto);
  background:var(--blanco);
  border-top:1px solid var(--linea-viva);
  box-shadow:0 -14px 36px -22px rgba(28,26,25,.28);
  padding:var(--e6) 0;
}
.cookies[hidden]{display:none}
.cookies-caja{
  width:100%; max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,3.5rem);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--e4) var(--e8);
}
.cookies-txt{
  flex:1 1 22rem;
  font-size:var(--t-s); color:var(--texto);
  max-width:64ch;
}
.cookies-txt a{color:var(--accion)}
.cookies-btns{display:flex; gap:var(--e3); margin-left:auto}
/* Los dos botones miden lo mismo y están al mismo nivel: rechazar cuesta un
   clic, igual que aceptar. Un botón de rechazo más pequeño o escondido en un
   segundo paso es justo lo que la Agencia considera consentimiento no válido. */
.cookies-btns .btn{min-width:8.5rem; justify-content:center}
.btn--linea{
  background:transparent;
  color:var(--tinta);
  border:1px solid var(--linea-viva);
}
.btn--linea:hover{background:var(--hueso-2); border-color:var(--texto-tenue)}

@media (max-width:620px){
  .cookies-btns{margin-left:0; width:100%}
  .cookies-btns .btn{flex:1}
}

/* ── movimiento ───────────────────────────────────────────── */

/* la bola se monta gajo a gajo: es el logotipo formándose */
@keyframes monta{
  from{opacity:0; transform:scale(.82) rotate(-7deg)}
  to  {opacity:1; transform:none}
}
.js .hero-bola .gajo{animation:monta .9s var(--curva) both}
.js .hero-bola .gajo--1{animation-delay:.15s}
.js .hero-bola .gajo--2{animation-delay:.30s}
.js .hero-bola .gajo--3{animation-delay:.45s}
.js .hero-bola .gajo--4{animation-delay:.60s}

@keyframes entra{
  from{opacity:0; transform:translate3d(0,24px,0)}
  to  {opacity:1; transform:none}
}
.js .ent{animation:entra .8s var(--curva) both; animation-delay:var(--retraso,0s)}

.js .rev{
  opacity:0; transform:translate3d(0,24px,0);
  transition:opacity .8s var(--curva), transform .8s var(--curva);
  transition-delay:var(--retraso,0s);
}
.js .rev.visto{opacity:1; transform:none}

.js .tit .fin::after{
  transform:translateY(.3em) scaleX(0);
  transform-origin:left center;
  transition:transform .42s var(--curva);
  transition-delay:calc(var(--retraso, 0s) + .5s);
}
.js .tit.visto .fin::after,
.js .tit.ent .fin::after{transform:translateY(.3em) scaleX(1)}

/* el gajo de cada capacidad se enciende al llegar */
.js .cap-marca .gajo--on{fill:var(--marca-2); transition:fill .7s var(--curva) .2s}
.js .cap-marca.visto .gajo--on{fill:var(--marca)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .rev,.js .ent,.js .hero-bola .gajo{opacity:1; transform:none; animation:none}
  /* el trazo aparece puesto: no se dibuja */
  .js .tit .fin::after{transform:translateY(.3em); transition:none}
  .pista{animation:none !important}
  .carrusel{overflow-x:auto}   /* si no hay movimiento, se puede arrastrar */
  .js .cap-marca .gajo--on{fill:var(--marca)}
}

/* ── adaptación ───────────────────────────────────────────── */

@media (max-width:1000px){
  .hero-rej,.motivo,.cap,.caso,.cabecera{grid-template-columns:1fr}
  .cap-tit{position:static}
  .cabecera{gap:var(--e6); align-items:start}
  .hero-bola{display:none}
  .cap-marca{position:static}
  .cap-marca .bola{width:4.5rem}
  .caso-datos{grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
  .pie-rej{grid-template-columns:1fr 1fr; gap:var(--e8)}
  .pie-rej > div:first-child{grid-column:1/-1}
}

@media (max-width:760px){
  .declaracion-cols{grid-template-columns:1fr}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)); gap:var(--e3)}
  .trabajo{grid-template-columns:1fr; gap:var(--e2)}
  .destinos{grid-template-columns:1fr; gap:0; margin-top:var(--e8)}
  .nav{display:none}
  .nav[data-abierto] .solo-movil{display:block}
  .nav[data-abierto]{
    display:grid; gap:var(--e4);
    position:absolute; inset:4.75rem 0 auto;
    background:var(--blanco);
    border-bottom:1px solid var(--linea);
    padding:var(--e6) clamp(1.25rem,4vw,3.5rem) var(--e8);
    z-index:var(--z-menu);
    font-size:var(--t-l);
  }
  .menu-btn{
    display:inline-flex; margin-left:auto;
    background:transparent;
    border:1px solid var(--linea-viva);
    color:var(--tinta);
    border-radius:var(--radio-s);
    padding:.6rem .9rem;
    font:500 var(--t-s)/1 var(--fuente);
    cursor:pointer;
  }
  .top .wrap > .btn{display:none}
  /* el contacto vive dentro del menú desplegado */
  .nav .solo-movil{color:var(--accion); font-weight:600}
  .tira{grid-template-columns:1fr}
  .tira > div{
    border-right:0;
    border-bottom:1px solid var(--linea);
    padding:var(--e6) 0;
  }
  .tira > div + div{padding-left:0}
  .tira > div:last-child{border-bottom:0; padding-bottom:0}
  .compromisos,
  .entradas,
  .contacto,
  .cierre-rej,
  .oficinas{grid-template-columns:1fr}
  .datos{grid-template-columns:1fr; gap:var(--e1) 0}
  .datos dd{margin-bottom:var(--e4)}
  /* en una columna la ficha es más ancha que alta: la máscara se desplaza más
     a la derecha para que la trama no compita con la dirección */
  .oficina{min-height:14rem}
  .plano{
    -webkit-mask-image:radial-gradient(75% 150% at 78% 50%, #000 24%, rgba(0,0,0,.45) 60%, transparent 100%);
    mask-image:radial-gradient(75% 150% at 78% 50%, #000 24%, rgba(0,0,0,.45) 60%, transparent 100%);
  }
  .sellos{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:var(--e6);
  }
  .sellos > img{width:min(9.5rem, 38%); flex:none}
  .sello-pyme{width:min(11rem, 50%); flex:none; gap:var(--e2)}
  .sello-pyme img:first-of-type{width:5.5rem}
  .sello-pyme img:last-of-type{width:100%}
  .sello-pyme-txt b{font-size:.8125rem}
  .sello-pyme-txt .mencion{font-size:.8125rem}
  .sello-pyme-txt .validez{font-size:.625rem}
  .legal .der{margin-left:0}
}

/* ── materia gráfica de las secciones ─────────────────────── */

/* el banco de formas no se ve: solo guarda los trazados */
.formas{position:absolute; width:0; height:0; overflow:hidden}

/* clip y no hidden: recorta el gajo igual, pero no rompe el sticky de dentro */
.deco{position:relative; overflow:hidden; overflow:clip; isolation:isolate}
.deco > .wrap{position:relative; z-index:1}

.deco-gajo{
  position:absolute;
  top:0;
  width:min(38vw, 27rem);
  aspect-ratio:var(--proporcion, 1);
  fill:var(--marca);
  opacity:.09;
  pointer-events:none;
  z-index:0;
}
/* sangrado por un borde u otro, alternando al bajar */
.deco--dcha .deco-gajo{right:0;  transform:translate(16%,-22%)}
.deco--izq  .deco-gajo{left:0;   transform:translate(-14%,-18%)}

/* sobre el hueso, el rojo pide algo más de cuerpo para no desaparecer */
.seccion--hueso .deco-gajo{opacity:.06}

/* el cierre es el final del recorrido: la forma sube y crece */
.cierre .deco-gajo{
  top:auto; bottom:0;
  width:min(40vw, 29rem);
  transform:translate(-16%,28%);
  opacity:.09;
}

.js .deco-gajo{
  opacity:0;
  transition:opacity 1.1s var(--curva);
}
.js .deco.visto-fondo .deco-gajo{opacity:.09}
.js .seccion--hueso.visto-fondo .deco-gajo{opacity:.06}
.js .cierre.visto-fondo .deco-gajo{opacity:.09}

@media (prefers-reduced-motion:reduce){
  .js .deco-gajo{opacity:.09; transition:none}
}

@media (max-width:760px){
  .deco-gajo{width:min(62vw,17rem); opacity:.07}
  .deco--dcha .deco-gajo{transform:translate(22%,-16%)}
  .deco--izq  .deco-gajo{transform:translate(-20%,-14%)}
}