/* ============================================================================
   Páginas interiores: las diez de solución y la de agencia. Hoja compartida: la home es un archivo único
   por decisión de despliegue, pero duplicar estos estilos diez veces sería
   ingobernable —un cambio en el pie obligaría a diez ediciones—.
   Los tokens replican los de index.html a propósito: si allí cambia la paleta,
   hay que tocar los dos sitios.
   ========================================================================== */

*{ box-sizing:border-box; margin:0; padding:0 }
html{ font-size:16px; -webkit-font-smoothing:antialiased; scroll-behavior:smooth }
body{ background:#fff; color:#111; font-family:'Space Grotesk',sans-serif; overflow-x:hidden }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }
img{ display:block }
:focus-visible{ outline:2px solid #b15f2c; outline-offset:2px }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* Misma retícula adaptativa que la home: casi todo en rem, y el tamaño de raíz
   escala con el viewport. Metiendo px se rompe la proporción en otras pantallas. */
@media (max-width:1920px){ html{ font-size:0.833333vw } }
@media (max-width:1440px){ html{ font-size:1.111111vw } }
@media (max-width:1024px){ html{ font-size:1.5625vw } }
@media (max-width:640px){  html{ font-size:4.444444vw } }

:root{ --line:#e6e5e2; --surface:#f1f0ee; --muted:#8d8d8d; --accent:#b15f2c }
.shell{ max-width:88rem; margin-inline:auto }
svg{ width:1em; height:1em; display:block }
.sr-only{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap }
.skip{ position:absolute; left:-9999px }
.skip:focus{ position:fixed; left:1rem; top:1rem; z-index:60; border-radius:.875rem; background:#0a0a0a; padding:.5rem 1rem; font-size:.875rem; color:#fff }

/* ============ CABECERA ============ */
header.top{ position:absolute; inset-inline:0; top:0; z-index:50 }
header.top .hin{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem }
header.top .brand svg{ font-size:3.375rem; color:#fff }
header.top nav{ display:none }
header.top nav ul{ display:flex; gap:2rem; font-size:.875rem; font-weight:500 }
header.top nav a{ color:rgba(255,255,255,.85) } header.top nav a:hover{ color:#fff }
.volver{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.3);
  border-radius:.875rem; padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.05em; color:rgba(255,255,255,.85); backdrop-filter:blur(6px) }
.volver:hover{ border-color:rgba(255,255,255,.7); color:#fff }
@media (min-width:640px){ header.top .hin{ padding:1.5rem 2rem } }
@media (min-width:1024px){ header.top nav{ display:flex } }

/* ============ PORTADA ============ */
.portada{ position:relative; isolation:isolate; overflow:hidden; border-radius:0 0 2rem 2rem;
  min-height:34rem; display:flex; align-items:flex-end; background:#0a0a0a }
.portada img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
/* Degradado oscuro de abajo arriba: el texto va en blanco sobre la foto y sin él
   la legibilidad dependería de cómo sea cada imagen. */
.portada::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.75) 32%, rgba(10,10,10,.35) 62%, rgba(10,10,10,.45) 100%) }
.portada .pin{ position:relative; z-index:2; width:100%; padding:9rem 1.25rem 3.5rem; color:#fff }
.portada .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem;
  font-weight:500; color:rgba(255,255,255,.75); margin-bottom:1rem }
.portada .eyebrow::before{ content:""; width:.375rem; height:.375rem; border-radius:9999px; background:rgba(255,255,255,.7) }
.portada h1{ max-width:20ch; font-size:2.5rem; font-weight:600; line-height:1.05; letter-spacing:-.02em }
.portada .claim{ margin-top:1.25rem; max-width:46ch; font-size:1.375rem; line-height:1.45; color:rgba(255,255,255,.85) }
@media (min-width:640px){ .portada .pin{ padding:10rem 2rem 4rem } .portada h1{ font-size:3.5rem } }
@media (min-width:1024px){ .portada{ min-height:40rem } .portada h1{ font-size:4.25rem } }

/* ============ RESUMEN ============ */
.resumen{ padding:4rem 1.25rem 0 }
.resumen p{ max-width:52ch; font-size:1.5rem; font-weight:500; line-height:1.4; letter-spacing:-.01em }
.resumen p + p{ margin-top:.75rem; font-weight:400; color:var(--muted) }
@media (min-width:640px){ .resumen{ padding:5rem 2rem 0 } .resumen p{ font-size:1.75rem } }

/* ============ BLOQUES ============ */
.bloque{ padding:3.5rem 1.25rem }
.bloque h2{ margin-bottom:1.5rem; font-size:1.5rem; font-weight:600; letter-spacing:-.01em }
.bloque .cuerpo p{ max-width:62ch; font-size:1.1875rem; line-height:1.7; color:rgba(17,17,17,.72) }
.bloque .cuerpo p + p{ margin-top:1rem }
@media (min-width:640px){ .bloque{ padding:4rem 2rem } .bloque h2{ font-size:1.75rem } }
@media (min-width:1024px){
  /* Título a la izquierda y contenido a la derecha: la medida de lectura se
     mantiene corta aunque la pantalla sea muy ancha. */
  .bloque .bin{ display:grid; grid-template-columns:18rem 1fr; gap:3rem; align-items:start }
  .bloque h2{ margin-bottom:0; position:sticky; top:2rem }
}

.lista{ display:grid; grid-template-columns:1fr; gap:.75rem }
.lista li{ display:flex; gap:.875rem; border-top:1px solid var(--line); padding-top:1rem;
  font-size:1.0625rem; line-height:1.6; color:rgba(17,17,17,.75) }
.lista li::before{ content:""; margin-top:.55em; width:.375rem; height:.375rem; border-radius:9999px;
  background:var(--accent); flex:none }
.lista li b{ font-weight:600; color:#111 }
@media (min-width:768px){ .lista{ grid-template-columns:1fr 1fr; column-gap:2.5rem } }

/* El panel llevaba sangría propia sobre la de la sección, así que su lista
   arrancaba 1,5rem más adentro que las demás y los dos bloques no cuadraban.
   Ahora se sale hasta el borde de la sección y su sangría es la de la página:
   el texto queda a plomo con el de "qué incluye" y el resto. */
.beneficios{ background:#0a0a0a; color:#fff; border-radius:2rem;
  margin-inline:-1.25rem; padding:3rem 1.25rem }
.beneficios h2{ color:#fff }
.beneficios .lista li{ border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.7) }
.beneficios .lista li b{ color:#fff }
@media (min-width:640px){ .beneficios{ margin-inline:-2rem; padding:4rem 2rem } }

/* ============ CIERRE ============ */
.cierre{ padding:1rem 1.25rem 5rem }
/* La llamada iba con una simple línea encima y se leía como un apartado más,
   cuando es el único sitio de la página donde se pide algo. En tarjeta, con
   fondo propio, deja de competir con el texto y se ve desde lejos. */
/* Las medidas son las de .beneficios, no otras: los dos son paneles y en la
   misma página se ven uno debajo del otro. El margen negativo cancela la
   sangría de la sección y el padding la devuelve por dentro, así que el panel
   llega al borde y su texto queda a plomo con el del resto de la página. */
.cierre .caja{ position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; gap:1.5rem;
  border-radius:2rem; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line);
  margin-inline:-1.25rem; padding:3rem 1.25rem }
/* Un resplandor en la esquina, del color de marca. Es lo único que la separa
   del resto de superficies claras de la página. */
.cierre .caja::before{ content:""; position:absolute; z-index:-1; inset:-40% 40% 40% -25%;
  background:radial-gradient(60% 60% at 30% 40%, rgba(177,95,44,.14), transparent 70%);
  pointer-events:none }
/* Sin max-width: con 18ch "¿Lo vemos aplicado a tu negocio?" partía en dos
   líneas aunque le sobrase sitio. A partir de 768 se fuerza a una sola. */
.cierre h2{ font-size:2rem; font-weight:600; letter-spacing:-.02em }
@media (min-width:768px){ .cierre h2{ white-space:nowrap } }
.pill{ display:inline-flex; align-items:center; gap:.75rem; border-radius:9999px; font-size:.875rem;
  font-weight:500; padding:.375rem .375rem .375rem 1.5rem; background:#0a0a0a; color:#fff; width:fit-content }
.pill .badge{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px;
  background:#fff; color:#0a0a0a; font-size:1rem; flex:none }
.pill.claro{ background:var(--surface); color:#111 } .pill.claro .badge{ background:#0a0a0a; color:#fff }
@media (min-width:640px){ .cierre{ padding-left:2rem; padding-right:2rem } .cierre h2{ font-size:2.5rem }
  .cierre .caja{ flex-direction:row; align-items:center; justify-content:space-between;
    gap:2rem; margin-inline:-2rem; padding:4rem 2rem } }

/* ============ OTRAS SOLUCIONES ============ */
.otras{ padding:0 1.25rem 5rem }
.otras h2{ margin-bottom:1.5rem; font-size:1.25rem; font-weight:600 }
.otras ul{ display:flex; flex-wrap:wrap; gap:.5rem }
.otras a{ display:inline-flex; border:1px solid var(--line); border-radius:9999px; padding:.5rem .9375rem;
  font-size:.875rem; font-weight:500; color:rgba(17,17,17,.8); transition:border-color .25s, color .25s }
.otras a:hover{ border-color:#111; color:#111 }
@media (min-width:640px){ .otras{ padding-left:2rem; padding-right:2rem } }

/* ============ PIE ============ */
footer{ border-radius:2rem 2rem 0 0; background:#0a0a0a; color:#fff }
footer .fin{ padding:3.5rem 1.25rem 2.5rem }
footer .bn{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600 }
footer .bn svg{ font-size:2.5rem }
footer p{ margin-top:1rem; max-width:30rem; font-size:1rem; color:rgba(255,255,255,.55) }
.flegal{ display:flex; flex-direction:column; gap:1rem; border-top:1px solid rgba(255,255,255,.1);
  margin-top:3rem; padding-top:2rem; font-size:.75rem; color:rgba(255,255,255,.45) }
.flegal .lks{ display:flex; flex-wrap:wrap; gap:.75rem 1.5rem }
.flegal > span{ flex:none }
.flegal a:hover{ color:#fff }
@media (min-width:640px){ footer .fin{ padding-left:2rem; padding-right:2rem }
  .flegal{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between } }

/* ============ AGENCIA ============ */
/* Bloques propios de agencia.html. Reaprovechan .bloque y .lista de arriba. */
.cifras{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:2rem; row-gap:2.5rem }
.cifras .num{ font-size:3rem; font-weight:600; letter-spacing:-.02em; line-height:1 }
.cifras .lbl{ margin-top:.625rem; font-size:.9375rem; color:rgba(255,255,255,.55) }
@media (min-width:768px){ .cifras{ grid-template-columns:repeat(4,1fr) } .cifras .num{ font-size:3.75rem } }

.tres{ display:grid; grid-template-columns:1fr; gap:1.25rem }
.tres li{ border-top:1px solid var(--line); padding-top:1.25rem }
.tres h3{ font-size:1.25rem; font-weight:600; letter-spacing:-.01em }
.tres p{ margin-top:.5rem; font-size:1.0625rem; line-height:1.6; color:rgba(17,17,17,.65) }
@media (min-width:768px){ .tres{ grid-template-columns:repeat(3,1fr); column-gap:2.5rem } }

.chips{ display:flex; flex-wrap:wrap; gap:.4375rem }
.chips li{ display:inline-flex; border-radius:9999px; padding:.5rem 1rem;
  background:var(--surface); font-size:1rem; font-weight:500; color:rgba(17,17,17,.85) }

/* Aviso de contenido sin validar. Es visible a propósito: no debe publicarse sin
   que alguien lo confirme, y un comentario en el código no lo impediría. */
/* Sin barra lateral. Estos bloques marcan contenido sin validar, así que siguen
   diferenciados del cuerpo por tamaño y color, pero ya no llevan filete. */
.porvalidar{ margin-top:1.25rem; padding:.625rem 0;
  font-size:.875rem; line-height:1.5; color:rgba(17,17,17,.55) }
.porvalidar b{ color:rgba(17,17,17,.8) }

/* ============ MENÚ DESPLEGABLE ============ */
/* Réplica del de index.html para que el menú sea el mismo en todas las páginas.
   El markup lo inyecta assets/nav.js, generado desde el mismo JSON que las
   páginas de solución. */
.menu-btn{ border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px); border-radius:.875rem; cursor:pointer; font:inherit;
  display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; font-size:.75rem;
  font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.9) }
.menu-btn:hover{ border-color:rgba(255,255,255,.7); color:#fff }
.menu-btn svg{ font-size:.875rem }
.menu-btn .mlabel{ display:none }
@media (min-width:640px){ .menu-btn .mlabel{ display:inline } }

#navmenu{ position:fixed; inset:0; z-index:115; display:flex; flex-direction:column;
  background:#0a0a0a; color:#fff; opacity:0; transition:opacity .5s cubic-bezier(.22,1,.36,1) }
#navmenu.in{ opacity:1 }
#navmenu[hidden]{ display:none }
/* Tres columnas, no space-between: con dos elementos el logo no puede centrarse. */
#navmenu .ntop{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:1.25rem }
#navmenu .nbrand{ grid-column:2; justify-self:center }
#navmenu .nbrand svg{ font-size:3.75rem; color:#fff }
#navmenu .close-btn{ grid-column:3; justify-self:end; display:inline-flex; align-items:center;
  gap:.5rem; border:1px solid rgba(255,255,255,.15); border-radius:.875rem; padding:.5rem 1rem;
  font:inherit; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  background:none; cursor:pointer; color:rgba(255,255,255,.7) }
#navmenu .close-btn:hover{ border-color:rgba(255,255,255,.4); color:#fff }
#navmenu .close-btn svg{ font-size:.875rem }
#navmenu nav{ flex:1; display:flex; flex-direction:column; justify-content:center; overflow-y:auto }
#navmenu nav > ul{ display:flex; flex-direction:column; gap:.25rem; padding:1.5rem 1.25rem }
#navmenu .nitem{ display:flex; align-items:center; gap:1rem; width:100%; padding-block:.5rem;
  text-align:left; font:inherit; font-size:2.25rem; font-weight:600; letter-spacing:-.02em;
  background:none; border:none; cursor:pointer; color:inherit }
#navmenu .ni{ font-size:1rem; font-weight:400; color:rgba(255,255,255,.3); transition:color .3s }
#navmenu .nl{ color:rgba(255,255,255,.7); transition:color .3s }
#navmenu .nitem:hover .ni{ color:#cf8047 } #navmenu .nitem:hover .nl{ color:#fff }
/* El plegado va con grid-template-rows de 0fr a 1fr, igual que el acordeón de
   "cómo trabajamos": no hace falta saber de antemano cuánto mide la lista, que
   además cambia de una a dos columnas según el ancho. */
#navmenu .nsubwrap{ display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1) }
#navmenu .nsubwrap > div{ overflow:hidden }
#navmenu .nsubwrap.open{ grid-template-rows:1fr }
#navmenu .nchev{ margin-left:auto; display:grid; place-items:center; font-size:1.25rem;
  color:rgba(255,255,255,.4);
  transition:transform .4s cubic-bezier(.22,1,.36,1), color .3s }
#navmenu .nitem[aria-expanded="true"] .nchev{ transform:rotate(180deg) }
#navmenu .nitem:hover .nchev{ color:#fff }
#navmenu .nchev svg{ width:1em; height:1em }
#navmenu .nsubs{ margin:.5rem 0 1.25rem; display:grid; grid-template-columns:1fr; gap:.125rem }
#navmenu .nsubs a{ display:block; padding:.3125rem 0 .3125rem 3.25rem; font-size:1rem;
  color:rgba(255,255,255,.55); transition:color .25s }
#navmenu .nsubs a:hover{ color:#fff }
@media (min-width:640px){
  #navmenu .ntop{ padding:1.5rem 2rem } #navmenu nav > ul{ padding-inline:2rem }
  #navmenu .nitem{ font-size:3.75rem }
  #navmenu .nsubs{ grid-template-columns:1fr 1fr; column-gap:2rem }
}

/* El epígrafe de la portada es un botón que devuelve a la lista de soluciones.
   Usa el formato de las píldoras del hero: cuerpo en caja redondeada y badge
   circular con la flecha, en lugar del botón de menú en versalitas. */
.portada .eyebtn{ display:inline-flex; align-items:center; gap:.75rem; margin-bottom:2rem;
  border-radius:9999px; padding:.375rem 1.5rem .375rem .375rem;
  background:rgba(16,26,46,.82); backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
  font-size:.875rem; font-weight:500; color:#fff;
  transition:box-shadow .3s, background-color .3s }
.portada .eyebtn:hover{ background:rgba(22,35,60,.9); box-shadow:0 0 0 1px rgba(255,255,255,.3) }
.portada .eyebtn .ebadge{ width:2.25rem; height:2.25rem; display:grid; place-items:center;
  border-radius:9999px; font-size:1rem; flex:none; color:#fff;
  background:linear-gradient(140deg, #5b90f0 0%, #2f6de0 45%, #143a86 100%) }
/* La flecha se desplaza un poco al pasar el ratón, como en las píldoras del hero. */
.portada .eyebtn .ebadge svg{ transition:transform .32s cubic-bezier(.22,1,.36,1) }
.portada .eyebtn:hover .ebadge svg{ transform:translateX(-3px) }

/* ============ BENEFICIOS EN TARJETAS ============
   Se quedaron en titulares sueltos al podar el texto. Como lista de topos se
   leían a medias; en tarjetas numeradas lo corto es una virtud. */
.tarjetas{ display:grid; grid-template-columns:1fr; gap:.75rem; margin:0; padding:0; list-style:none }
.tarjetas li{ display:flex; flex-direction:column; gap:.875rem; border-radius:1.25rem;
  padding:1.5rem 1.375rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:box-shadow .35s, transform .35s cubic-bezier(.22,1,.36,1) }
.tarjetas li:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); transform:translateY(-3px) }
.tarjetas .bnum{ font-size:.8125rem; font-weight:600; letter-spacing:.08em;
  color:rgba(255,255,255,.45) }
.tarjetas .btxt{ font-size:1.1875rem; font-weight:600; line-height:1.25;
  letter-spacing:-.01em; color:#fff }
@media (min-width:640px){
  .tarjetas{ grid-template-columns:1fr 1fr; gap:1rem }
  /* El texto arriba, pegado a su número. Con space-between la frase caía al
     fondo de la tarjeta y, como cada beneficio tiene un largo distinto, las
     tres de una fila quedaban desalineadas entre sí. */
  .tarjetas li{ padding:1.875rem 1.75rem; min-height:9.5rem; justify-content:flex-start }
  .tarjetas .btxt{ font-size:1.375rem } }
@media (min-width:1024px){ .tarjetas{ grid-template-columns:repeat(3,1fr) } }

/* ============ PÁGINAS DE CASO ============
   Reaprovechan .portada, .bloque, .lista, .beneficios y .cierre de las páginas
   de solución. Aquí solo va lo propio: el sector sobre el titular y la fila de
   fila de cifras que abre la página.
   Ojo con el nombre: `.cifras` ya está cogido más arriba por la rejilla de datos
   de agencia.html, que pone display:grid en su propio contenedor. Al reutilizarlo
   aquí, este <ul> pasaba a ser un item de esa rejilla y se medía a contenido: dos
   cajas estrechas en vez de dos mitades. */
.portada-caso::after{ background:linear-gradient(180deg, rgba(6,13,26,.35) 0%,
  rgba(6,13,26,.55) 55%, rgba(6,13,26,.88) 100%) }
.portada .csector{ display:block; margin-bottom:.75rem; font-size:.9375rem;
  font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:rgba(255,255,255,.75) }
.caso-cifras{ padding:2.5rem 1.25rem 0 }
.caso-cifras ul{ display:grid; grid-template-columns:1fr; gap:.875rem }
.caso-cifras li{ display:flex; flex-direction:column; gap:.375rem; border-radius:1.25rem;
  padding:1.5rem 1.375rem; box-shadow:inset 0 0 0 1px var(--line) }
.caso-cifras .cdato{ font-size:2.5rem; font-weight:600; line-height:1;
  letter-spacing:-.03em; color:#0a0a0a }
.caso-cifras .cque{ font-size:1rem; line-height:1.4; color:var(--muted) }
@media (min-width:640px){
  .caso-cifras{ padding:3.5rem 2rem 0 }
  .caso-cifras ul{ grid-template-columns:1fr 1fr; gap:1rem }
  .caso-cifras li{ padding:2rem 1.75rem }
  .caso-cifras .cdato{ font-size:3rem } }

/* ============ LO QUE HEMOS CONSEGUIDO ============
   Va justo debajo de los beneficios y dice otra cosa que ellos: los beneficios
   cuentan cómo cambia el trabajo, esto cuenta qué se consiguió, con la cifra de
   un caso real y enlace a él. La cifra manda en tamaño; el proyecto y el sector
   van debajo en pequeño, porque son la prueba de que el número tiene dueño.
   Solo aparece en las soluciones que tienen caso: hoy cuatro de doce. */
.prueba{ padding:3.5rem 1.25rem 0 }
.prueba h2{ margin-bottom:1.5rem; font-size:1.5rem; font-weight:600; letter-spacing:-.01em }
.prueba ul{ display:grid; grid-template-columns:1fr; gap:.875rem; margin:0; padding:0; list-style:none }
.prueba a{ display:flex; flex-direction:column; gap:.375rem; border-radius:1.25rem;
  padding:1.5rem 1.375rem; text-decoration:none; color:inherit;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .35s, transform .35s cubic-bezier(.22,1,.36,1) }
.prueba a:hover{ box-shadow:inset 0 0 0 1px rgba(17,17,17,.35); transform:translateY(-3px) }
.prueba .pdato{ font-size:2.5rem; font-weight:600; line-height:1; letter-spacing:-.03em; color:#0a0a0a }
.prueba .pque{ font-size:1rem; line-height:1.4; color:var(--muted) }
/* El nombre del caso, separado por un filete: es la fuente del dato, no el dato. */
.prueba .pcaso{ margin-top:.625rem; padding-top:.625rem; border-top:1px solid var(--line);
  font-size:.8125rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted) }
@media (min-width:640px){
  .prueba{ padding:4.5rem 2rem 0 }
  .prueba h2{ font-size:1.75rem }
  .prueba ul{ grid-template-columns:1fr 1fr; gap:1rem }
  .prueba a{ padding:2rem 1.75rem }
  .prueba .pdato{ font-size:3rem } }

/* ============ BLOQUE DEL PORTAL ============
   El mismo que cierra la home, al final de cada solución. Copiado de
   index.html, que lleva su CSS en línea: al tocarlo, los dos sitios.
   La banda no es un enlace sino el campo del portal; se escribe el reto aquí y
   el portal abre ya generando. */
#diagnostico .din{ padding:6rem 1.25rem 6.5rem }
/* Marca de la tecnología, encima del titular. Solo texto, sin píldora.
   El destello iba recortado sobre las propias letras y quedaba lavado. Ahora hay
   un trazo fijo debajo y, sobre él, un punto de luz con halo que lo recorre. Se
   ve el recorrido entero y no compite con el campo, que es lo que queremos que
   se use. `--linea` y `--punto` las usan las dos capas: el trayecto es la
   diferencia entre ambas, así que hay que cambiarlas juntas. */
#diagnostico{ --tinta:17,17,17; --brillo:17,17,17 }
.dkick{ --linea:18rem; --punto:4rem;
  position:relative; margin-bottom:1.5rem; padding-bottom:1.125rem; text-align:center;
  font-size:1.25rem; font-weight:500; letter-spacing:-.01em; color:rgba(var(--tinta),.6) }
.dkick b{ font-weight:700; color:rgb(var(--tinta)); text-wrap:balance }
.dkick::before, .dkick::after{ content:""; position:absolute; bottom:0; height:2px;
  border-radius:2px; pointer-events:none }
.dkick::before{ left:50%; transform:translateX(-50%); width:var(--linea);
  background:rgba(var(--tinta),.18) }
.dkick::after{ left:calc(50% - var(--linea) / 2); width:var(--punto);
  background:rgb(var(--brillo)); box-shadow:0 0 14px 2px rgba(var(--brillo),.5);
  animation:dkluz 2.9s cubic-bezier(.5,.05,.5,.95) infinite }
@keyframes dkluz{
  0%   { transform:translateX(0); opacity:0 }
  14%  { opacity:1 }
  86%  { opacity:1 }
  100% { transform:translateX(calc(var(--linea) - var(--punto))); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .dkick::after{ display:none } }
.dtitulo{ margin-bottom:1.5rem; text-align:center; font-size:2rem; font-weight:600;
  letter-spacing:-.02em; line-height:1.1 }
.banner{ position:relative; display:flex; align-items:center; justify-content:center;
  border-radius:1.5rem; background:transparent; color:inherit; padding:1.125rem 4rem;
  text-align:center; box-shadow:inset 0 0 0 1px rgba(17,17,17,.22);
  transition:box-shadow .3s, background-color .3s }
.banner:hover{ box-shadow:inset 0 0 0 1px rgba(17,17,17,.5); background:rgba(17,17,17,.03) }
.banner:focus-within{ box-shadow:inset 0 0 0 1px rgba(17,17,17,.6) }
.banner .reto{ width:100%; border:0; background:transparent; color:inherit;
  font:inherit; font-size:.9375rem; font-weight:600; text-align:center;
  outline:none; padding:0 }
.banner .reto::placeholder{ color:rgba(17,17,17,.42); font-weight:500 }
.banner .badge{ position:absolute; right:.875rem; top:50%; transform:translateY(-50%);
  width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:9999px;
  background:#0a0a0a; color:#fff; font-size:1rem; flex:none; border:0; cursor:pointer;
  transition:transform .3s cubic-bezier(.22,1,.36,1) }
.banner .badge:hover{ transform:translateY(-50%) scale(1.07) }
.dpie{ margin-top:1rem; text-align:center; font-size:.875rem; color:rgba(17,17,17,.5) }
@media (min-width:640px){
  #diagnostico .din{ padding:8rem 2rem 8.5rem }
  .dkick{ --linea:22rem; --punto:4.5rem; margin-bottom:2rem; padding-bottom:1.25rem; font-size:1.75rem }
  .dtitulo{ margin-bottom:1.75rem; font-size:2.75rem }
  .banner{ border-radius:9999px; padding:1.25rem 5rem }
  .banner .reto{ font-size:1.25rem }
  .banner .badge{ right:1rem }
  .dpie{ margin-top:1.25rem; font-size:.9375rem } }

/* ============ FRANJA DE MARCA DE PRODUCTO ============
   Solo en las soluciones que son producto con nombre propio (Toolbox). El logo
   viene en blanco, así que en claro se ennegrece y el tema oscuro lo devuelve. */
.marca{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.5rem 2rem; margin-top:3rem; padding:2rem 1.25rem; border-block:1px solid var(--line) }
.marca .mlogo{ height:3.25rem; width:auto; object-fit:contain; filter:brightness(0); opacity:.85 }
.marca .mweb{ display:inline-flex; align-items:center; gap:.5rem; font-size:1.0625rem;
  font-weight:500; color:var(--muted); text-decoration:none; transition:color .3s }
.marca .mweb svg{ width:1.125rem; height:1.125rem; transition:transform .32s cubic-bezier(.22,1,.36,1) }
.marca .mweb:hover{ color:#0a0a0a }
.marca .mweb:hover svg{ transform:translate(2px,-2px) }
@media (min-width:640px){ .marca{ margin-top:4rem; padding:2.5rem 2rem } .marca .mlogo{ height:4rem } }

/* ============ PIE COMPACTO ============
   Las interiores llevan `pie(compacto=True)`: sin la llamada grande —cada página
   ya cierra con la suya, repetirla dos veces seguidas no persuade, cansa— y sin
   la tira de partners, que es argumentario de portada. Se queda la navegación,
   que es lo que le sirve a quien ha entrado por una solución.

   Comparte clases con el pie de la home, así que aquí solo están las que usan
   las dos; lo que aligera va bajo `.pie-min`. La home lleva su CSS en línea, de
   modo que estas comunes siguen duplicadas: al tocarlas, los dos sitios. */
.fcols{ display:grid; grid-template-columns:1fr; gap:3rem; padding-block:4rem }
.fbrand .bn{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600 }
/* La home lo lleva a 4.5rem en un `style` dentro del SVG; aquí, un punto menos:
   grande para que se lea como firma, sin el tamaño de portada. */
.fbrand .bn svg{ font-size:4.25rem }
.fbrand p{ margin-top:1rem; max-width:24rem; font-size:1rem; color:rgba(255,255,255,.55) }
.fcol h3{ font-size:.875rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.4) }
.fcol ul{ margin-top:1.25rem; display:flex; flex-direction:column; gap:.875rem; font-size:1rem }
.alink{ display:inline-flex }
.alink > span{ display:inline-block; opacity:.65; will-change:transform }
.alink.legal > span{ opacity:.7 }

/* Lo que lo hace compacto: menos aire, menos cuerpo y sin remate superior. */
.pie-min .fcols{ gap:2.25rem; padding-block:0 2.5rem }
.pie-min .fbrand p{ max-width:22rem; font-size:.9375rem }
.pie-min .fcol h3{ font-size:.8125rem }
.pie-min .fcol ul{ margin-top:1rem; gap:.75rem; font-size:.9375rem }
.pie-min .fgrupo{ margin-top:0; padding-top:1.75rem }
.pie-min .fgrupo .plbl{ margin-bottom:1.25rem; font-size:.9375rem }
.pie-min .fgrupo img[data-m="toolbox"]{ height:2.25rem }
.pie-min .fgrupo img[data-m="coincide"]{ height:1.4375rem }

/* --- Marcas del grupo. Más discreto que partners: es identidad, no escaparate. --- */
.fgrupo{ border-top:1px solid rgba(255,255,255,.1); margin-top:2.5rem; padding-top:2rem }
.fgrupo .plbl{ margin-bottom:1.5rem; font-size:1rem; font-weight:600;
  letter-spacing:-.01em; color:rgba(255,255,255,.65) }
.fgrupo ul{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 3.5rem }
.fgrupo a{ display:block; text-decoration:none }
.fgrupo img{ width:auto; object-fit:contain; opacity:.55; transition:opacity .3s }
.fgrupo a:hover img{ opacity:1 }
/* Alturas por logo: la de Toolbox cuenta dos líneas, la de Coincide una. */
.fgrupo img[data-m="toolbox"]{ height:2.75rem }
.fgrupo img[data-m="coincide"]{ height:1.75rem }
/* --- Certificado. Mismo tratamiento discreto que las marcas del grupo: no es
   escaparate, es una acreditación. Icono lineal en vez de logo porque no hay
   logo de la norma que se pueda usar sin permiso de la certificadora. --- */
.fcert ul{ gap:1.25rem 2.5rem }
.fcert .cert{ display:flex; align-items:center; gap:.875rem; color:rgba(255,255,255,.55);
  text-decoration:none; transition:color .3s }
.fcert .cert:hover{ color:#fff }
.fcert .cert svg{ font-size:2rem; flex:none }
.fcert .cert b{ display:block; font-size:.875rem; font-weight:600; letter-spacing:-.01em }
.fcert .cert i{ display:block; margin-top:.125rem; font-style:normal; font-size:.75rem; opacity:.7 }
/* El pie compacto pone .fgrupo a margin-top:0, así que sin esto el bloque
   de Certificado pegaba su línea a los logos del grupo, sin aire. */
.fgrupo + .fgrupo, .pie-min .fgrupo + .fgrupo{ margin-top:2rem }

/* en el pie compacto todo va un punto más pequeño */
.pie-min .fcert .cert svg{ font-size:1.75rem }

@media (min-width:640px){ .flegal{ flex-direction:row } }
@media (min-width:768px){ .fcols{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .fcols{ grid-template-columns:repeat(4,1fr) } }

/* ============ PÁGINAS LEGALES ============
   Aviso legal, privacidad y cookies. Son documentos largos y se leen de otra
   forma que el resto del sitio: aquí no hay nada que vender, así que manda la
   legibilidad. Medida corta, interlínea alta y un índice fijo al lado, porque
   a estas páginas se entra buscando un apartado concreto.
   La portada va sin foto a propósito: ponerle una imagen de agencia a un texto
   legal lo disfraza de otra cosa. */
.portada-plana{ min-height:24rem; border-radius:0 0 2rem 2rem }
.portada-plana::after{ background:
  radial-gradient(120% 90% at 15% 0%, rgba(38,59,99,.55) 0%, rgba(10,10,10,0) 60%),
  linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.6) 70%, rgba(10,10,10,.5) 100%) }
.portada-plana .pin{ padding:8rem 1.25rem 3rem }
.portada-plana h1{ max-width:24ch }
.portada-plana .claim{ font-size:1rem; color:rgba(255,255,255,.65); letter-spacing:.01em }

.legalwrap{ display:grid; grid-template-columns:1fr; gap:2.5rem; padding:3rem 1.25rem 4rem }

/* Índice. En móvil es una lista normal arriba del texto; a partir de 1024 se
   queda pegado al scroll, que es donde de verdad sirve. */
.legal-idx summary{ list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:.75rem; padding:.75rem 0; border-bottom:1px solid var(--line);
  margin-bottom:.875rem }
.legal-idx summary::-webkit-details-marker{ display:none }
.legal-idx summary::after{ content:""; width:.5rem; height:.5rem; border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted); transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease }
.legal-idx details[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px) }
.legal-idx .idx-t{ font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; color:var(--muted) }
.legal-idx ol{ list-style:none; counter-reset:idx; display:grid; gap:.125rem }
.legal-idx li{ counter-increment:idx }
.legal-idx a{ display:flex; gap:.625rem; border-radius:.625rem; padding:.4375rem .625rem;
  font-size:.875rem; line-height:1.35; color:rgba(17,17,17,.6);
  transition:background .2s ease, color .2s ease }
.legal-idx a::before{ content:counter(idx,decimal-leading-zero); flex:none;
  font-size:.75rem; font-weight:600; color:var(--muted); padding-top:.1em }
.legal-idx a:hover{ background:var(--surface); color:#111 }

.legal-txt{ max-width:68ch }
.legal-txt .apartado{ padding-top:2.5rem }
.legal-txt .apartado + .apartado{ border-top:1px solid var(--line) }
.legal-txt h2{ margin-bottom:1rem; font-size:1.375rem; font-weight:600; letter-spacing:-.01em;
  scroll-margin-top:5rem }
.legal-txt h3{ margin:2rem 0 .875rem; font-size:.8125rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; color:var(--accent) }
.legal-txt p{ font-size:1rem; line-height:1.75; color:rgba(17,17,17,.72) }
.legal-txt p + p, .legal-txt .lista + p{ margin-top:.875rem }
.legal-txt .termino{ margin-top:1.5rem; font-weight:600; color:#111 }
.legal-txt .termino + p{ margin-top:.375rem }
.legal-txt .lista{ margin:1rem 0; grid-template-columns:1fr }
.legal-txt .lista li{ font-size:1rem; line-height:1.6; color:rgba(17,17,17,.72) }
.legal-txt a{ color:var(--accent); text-decoration:underline; text-underline-offset:.2em }
.legal-txt a:hover{ text-decoration-thickness:2px }

@media (min-width:640px){
  .portada-plana .pin{ padding:9rem 2rem 3.5rem }
  .legalwrap{ padding:3.5rem 2rem 5rem }
}
@media (min-width:1024px){
  .legalwrap{ grid-template-columns:17rem 1fr; gap:4rem; align-items:start }
  .legal-idx{ position:sticky; top:2.5rem }
  /* en pantalla ancha el índice no se pliega: cabe entero y el botón sobra */
  .legal-idx summary{ cursor:default; pointer-events:none; padding-top:0 }
  .legal-idx summary::after{ display:none }
  .legal-txt .apartado:first-child{ padding-top:0 }
}

/* ============ FORMULARIO DE CONTACTO ============
   El contacto era una ventana emergente y ahora es una página. Los campos
   heredan la medida de .bloque .bin, así que caen en la columna de contenido,
   a plomo con el texto del resto del sitio. */
.fcontacto{ display:flex; flex-direction:column; gap:1.125rem; max-width:34rem }
.fcontacto label{ display:flex; flex-direction:column; gap:.5rem }
.fcontacto .cap{ font-size:.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted) }
.fcontacto input[type=text], .fcontacto input[type=email], .fcontacto textarea{
  width:100%; border:1px solid var(--line); border-radius:.875rem;
  background:rgba(241,240,238,.5); padding:.875rem 1rem;
  font:inherit; font-size:1rem; color:#111; outline:none;
  transition:border-color .25s, background-color .25s }
.fcontacto textarea{ resize:vertical; min-height:8rem }
.fcontacto input:focus, .fcontacto textarea:focus{
  border-color:rgba(17,17,17,.4); background:#fff }
/* El consentimiento va en fila, no en columna: es una casilla con su frase. */
.fcontacto .fcheck{ flex-direction:row; align-items:flex-start; gap:.75rem;
  font-size:.9375rem; line-height:1.5; color:rgba(17,17,17,.72) }
.fcontacto .fcheck input{ margin-top:.2em; width:1.0625rem; height:1.0625rem; flex:none }
.fcontacto .fcheck a{ color:var(--accent); text-decoration:underline; text-underline-offset:.2em }
.fcontacto button[type=submit]{ align-self:flex-start; margin-top:.5rem; border:0; cursor:pointer }
/* Mientras el formulario no tenga destino, esto es lo que lo sustituye. */
.fpendiente{ max-width:34rem; margin-top:1.25rem; border-radius:1rem;
  box-shadow:inset 0 0 0 1px var(--line); padding:1rem 1.125rem;
  font-size:.9375rem; line-height:1.6; color:rgba(17,17,17,.72) }
.fpendiente a{ color:var(--accent); text-decoration:underline; text-underline-offset:.2em }

/* ============ EL TITULAR PARTIDO EN DOS ============
   Ocho páginas de solución llevan arriba el nombre de producto, que es con lo
   que la marca se reconoce, y debajo el H1 con las palabras por las que se
   quiere indexar. La jerarquía visual y la semántica van al revés a propósito.
   El H1 no se encoge hasta parecer letra pequeña: pesa menos que el nombre
   pero más que la bajada, que es lo que lo mantiene legible y honesto. */
.portada .display{ max-width:20ch; font-size:2.5rem; font-weight:600;
  line-height:1.05; letter-spacing:-.02em }
.portada h1.h1seo{ margin-top:.5rem; max-width:26ch; font-size:1.375rem;
  font-weight:500; line-height:1.25; letter-spacing:-.01em;
  color:rgba(255,255,255,.88) }
.portada .h1seo + .claim{ margin-top:1rem }
@media (min-width:640px){
  .portada .display{ font-size:3.5rem }
  .portada h1.h1seo{ margin-top:.75rem; font-size:1.75rem }
}

/* ============ CÓMO PARTEN LAS LÍNEAS ============
   El problema: frases que dejaban una palabra sola en el último renglón
   —«…asistidos por la / IA.»— y titulares que partían donde sobraba sitio.

   La regla, en dos niveles, y sin un solo <br> a mano:

   `balance` en lo que es titular o frase corta. El navegador prueba varios
   repartos y elige el que deja las líneas más parejas, así que no hay viudas.
   Solo funciona hasta unas seis líneas, que es justo lo que necesitamos.

   `pretty` en el texto corrido. No recoloca el párrafo entero —sería raro de
   leer—: solo evita que la última línea quede con una palabra suelta.

   Un <br> manual acierta a un ancho concreto y se equivoca en todos los demás.
   Para mandar de verdad sobre la medida está el max-width en `ch`, que ya
   llevan el titular, la bajada y el cuerpo. */
h1, h2, h3, .display, .claim, .eyebrow, .dkick, .dtitulo, .btxt,
.caso .cprj, .sec-nom, .talento-h2, .works-h2, .services-h2,
.stats-h2, .cli-h2, .fcta h2, .legal-txt h2, .legal-txt h3{ text-wrap:balance }

p, li, .lista li, .cuerpo p, .ccifra, .cque, .dpie, .fpendiente,
.sec-desc, .tlead, .legal-txt p{ text-wrap:pretty }

/* ============ BANNER DE COOKIES ============
   Abajo y estrecho, no a pantalla completa: la web se puede seguir leyendo
   mientras se decide, que es lo contrario de obligar a decidir para ver nada.
   Los dos botones miden lo mismo y pesan lo mismo a propósito: un «rechazar»
   en letra pequeña al lado de un «aceptar» grande no es una elección. */
.ck{ position:fixed; inset:auto 0 0 0; z-index:120; padding:1rem;
  display:flex; justify-content:center; pointer-events:none;
  transform:translateY(100%); opacity:0;
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .45s ease }
.ck.visible{ transform:none; opacity:1 }
.ck-in{ pointer-events:auto; display:flex; flex-direction:column; gap:1rem;
  width:100%; max-width:44rem; border-radius:1.5rem; background:#fff;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.35), 0 0 0 1px rgba(17,17,17,.08);
  padding:1.25rem 1.375rem }
.ck-txt{ font-size:.9375rem; line-height:1.55; color:rgba(17,17,17,.75); text-wrap:pretty }
.ck-mas{ color:#b15f2c; text-decoration:underline; text-underline-offset:.2em }
.ck-bot{ display:flex; gap:.625rem }
.ck-b{ flex:1; border:0; cursor:pointer; border-radius:9999px; padding:.75rem 1.25rem;
  font:inherit; font-size:.9375rem; font-weight:600;
  transition:background-color .25s, box-shadow .25s }
.ck-no{ background:#f1f0ee; color:#111; box-shadow:inset 0 0 0 1px rgba(17,17,17,.1) }
.ck-no:hover{ background:#e6e5e2 }
.ck-si{ background:#0a0a0a; color:#fff }
.ck-si:hover{ background:#262626 }
@media (min-width:640px){
  .ck{ padding:1.5rem }
  .ck-in{ flex-direction:row; align-items:center; gap:1.5rem; padding:1.25rem 1.5rem }
  .ck-bot{ flex:none }
  .ck-b{ flex:none; min-width:8.5rem }
}
@media (prefers-reduced-motion:reduce){ .ck{ transition:none } }
/* El botón de preferencias va en el pie, entre enlaces: se le quita todo lo de
   botón para que no desentone. */
.ckabrir{ border:0; background:none; padding:0; font:inherit; cursor:pointer; color:inherit }

/* Los dos enlaces de redes del pie llevan su icono delante. El resto de .alink
   no: en una columna de texto, un icono suelto por enlace sería ruido. */
.alink.rs{ align-items:center; gap:.5rem }
.alink.rs .rsico{ width:1.0625em; height:1.0625em; flex:none; opacity:.65;
  transition:opacity .3s }
.alink.rs:hover .rsico{ opacity:1 }