/* ============================================================
   PLEASEPOINT 2026 — HOJA BASE
   Sistema visual de new-reqs/01-bases-de-diseno.md

   Esto es lo que heredan todas las páginas 2026. Nada específico
   de una página entra aquí: lo de la home vive en home.css.

   Archivo plano escrito a mano, misma convención que public/2025.
   No pasa por Laravel Mix. Cero librerías de terceros.
   ============================================================ */

/* ------------------------------------------------------------
   1 · FUENTES — servidas en local, nunca desde Google
   ------------------------------------------------------------ */

/* Display. Un solo peso (400) con eje óptico variable: el mismo
   archivo compone bien a 1,5rem y a 7rem.
   Decisión pendiente 1 de 01-bases-de-diseno.md: cambiar a Fraunces
   es sustituir estos dos @font-face y el valor de --font-display. */
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/newsreader-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:"Newsreader";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/newsreader-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;
}

/* Texto e interfaz */
@font-face{
  font-family:"Instrument Sans";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("../fonts/instrument-sans-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:"Instrument Sans";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("../fonts/instrument-sans-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;
}

/* Datos y etiquetas */
@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;
}
@font-face{
  font-family:"Geist Mono";
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url("../fonts/geist-mono-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;
}

/* ------------------------------------------------------------
   2 · TOKENS — 01-bases-de-diseno.md §4.1, literales.
   Van en custom properties para poder usarlos desde los SVG en
   línea. Ningún color escrito a pelo en ninguna regla de abajo.
   ------------------------------------------------------------ */
:root{
  /* Superficies */
  --paper:#F3F0E9;
  --paper-raised:#FBF9F5;
  --paper-sunk:#EAE5DA;

  /* Tinta */
  --ink:#17181A;
  --ink-2:#4B4A46;
  /* El documento fija #86837B, pero medido da 3,33:1 sobre papel y
     3,01:1 sobre campo hundido: por debajo del AA que exige el propio
     §11.2, incluso para las etiquetas de 12 px. Se oscurece lo justo,
     conservando el matiz, hasta 5,03 / 5,44 / 4,56:1. Sigue siendo
     claramente más callado que --ink-2. */
  --ink-3:#696660;
  --line:#DAD4C6;

  /* Contrapunto oscuro */
  --panel:#17181A;
  --panel-raised:#232426;
  --panel-line:#33342F;
  --on-panel:#F3F0E9;
  --on-panel-2:#A9A6A0;

  /* Acento — decisión pendiente 2 de 01-bases-de-diseno.md.
     Cambiar al cian real del logotipo es cambiar estas dos líneas:
     --point:#009DFF; --point-ink:#0A5D8C; */
  --point:#2BB3DF;
  --point-ink:#0F5F79;

  /* Segunda tinta, solo para diagramas */
  --sand:#C7B79B;
  --sand-soft:#E4DBC9;

  /* Estados */
  --positive:#2F6F4F;
  --warning:#A9662A;
  --error:#A33529;

  /* Tipografía */
  --font-display:"Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:"Instrument Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-wght:400;
  --display-tracking:-0.02em;

  /* Retícula y ritmo */
  --maxw:1320px;
  --gutter:24px;
  --pad:max(48px, 5vw);
  --sec:128px;
  --header-h:72px;
}

/* ------------------------------------------------------------
   3 · BASE
   ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:1.0625rem;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--point); color:var(--paper); }

/* Foco visible propio. Nunca outline:none en ningún sitio. */
:focus-visible{
  outline:2px solid var(--point-ink);
  outline-offset:3px;
  border-radius:2px;
}
.panel :focus-visible,
footer.site :focus-visible{ outline-color:var(--point); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper);
  padding:12px 20px; border-radius:0 0 12px 0;
  font-size:.9375rem;
}
.skip:focus{ left:0; }

.vh{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ------------------------------------------------------------
   4 · TIPOGRAFÍA
   ------------------------------------------------------------ */
.display{
  font-family:var(--font-display);
  font-weight:var(--display-wght);
  letter-spacing:var(--display-tracking);
  margin:0;
}
.d-xl{ font-size:clamp(3.25rem, 7vw, 7rem);    line-height:0.98; }
.d-l { font-size:clamp(2.5rem, 5vw, 4.5rem);   line-height:1.02; }
.d-m { font-size:clamp(1.85rem, 3.2vw, 3rem);  line-height:1.08; }
.d-s { font-size:clamp(1.5rem, 2.2vw, 2rem);   line-height:1.14; }

.title{
  font-size:clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight:600; line-height:1.25; letter-spacing:-0.01em; margin:0;
}
.body-l{ font-size:1.25rem; line-height:1.55; }
.small { font-size:0.9375rem; line-height:1.5; }

/* Única excepción a "nada en mayúsculas": la etiqueta de 12 px. */
.label{
  font-family:var(--font-mono); font-size:0.75rem; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3);
  margin:0;
}
/* Los números van en mono, siempre. */
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

.measure{ max-width:62ch; }
.measure-tight{ max-width:40ch; }
.dim{ color:var(--ink-2); }
.dim-3{ color:var(--ink-3); }

/* ------------------------------------------------------------
   5 · RETÍCULA Y RITMO
   ------------------------------------------------------------ */
.wrap{
  width:100%; max-width:var(--maxw);
  margin-left:auto; margin-right:auto;
  padding-left:var(--pad); padding-right:var(--pad);
}
.bleed{ width:100%; padding-left:var(--pad); padding-right:var(--pad); }
main > section{ padding-top:var(--sec); padding-bottom:var(--sec); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ------------------------------------------------------------
   6 · COMPONENTES
   ------------------------------------------------------------ */

/* Enlace de avance — el elemento de navegación dominante del sitio */
.fwd{
  display:inline-flex; align-items:baseline; gap:.5em;
  color:var(--point-ink); font-weight:500;
  transition:color .2s ease;
}
.fwd .arw{ display:inline-block; transition:transform .25s cubic-bezier(.2,.7,.3,1); }
.fwd:hover .arw{ transform:translateX(4px); }
.fwd-lg{ font-size:clamp(1.15rem,1.6vw,1.5rem); font-weight:600; letter-spacing:-0.01em; }
.panel .fwd{ color:var(--point); }

/* Enlace a una página que todavía no existe: mismo sitio en la
   retícula, sin href y fuera del orden de tabulación. Nunca href="#". */
.fwd.is-pending,
.tile.is-pending,
.is-pending{ color:var(--ink-3); cursor:default; }
.is-pending .arw{ transform:none !important; }
.panel .is-pending{ color:var(--on-panel-2); }

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-sans); font-size:0.9375rem; font-weight:500;
  padding:.7em 1.35em; border-radius:999px; border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--panel-raised); }
.btn-secondary{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-secondary:hover{ border-color:var(--ink-3); }
.btn[disabled]{ opacity:.55; cursor:default; }

/* ---------- Cabecera de sección con salida ----------
   Titular a la izquierda y el botón que saca de la sección a la derecha.
   La usan la home —qué implantamos y proyectos— y la sección de lo que
   hemos construido de desarrollo a medida: las tres tienen una página
   entera detrás, y el botón arriba es lo que la anuncia antes de que
   nadie recorra la parrilla. Debajo de ella no lo veía nadie.

   Vive aquí y no en home.css desde que dejó de ser de una sola página:
   una clase compartida no puede existir dos veces. */
.head-row{ display:grid; grid-template-columns:1fr; gap:24px; margin-top:20px; }
@media (min-width:900px){
  .head-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:clamp(32px,5vw,80px); align-items:center;
  }
}
.head-row h2{ margin:0; text-wrap:balance; }
/* Botón y no enlace de texto: como enlace pequeño se perdía. */
.head-row-btn{ justify-self:start; white-space:nowrap; }
.panel .btn-primary{ background:var(--on-panel); color:var(--ink); }
.panel .btn-primary:hover{ background:var(--paper-raised); }
.panel .btn-secondary{ color:var(--on-panel); border-color:var(--panel-line); }
.panel .btn-secondary:hover{ border-color:var(--on-panel-2); }

/* Tarjeta — sin sombra: la elevación es superficie más hairline */
.card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:12px;
  padding:28px; display:flex; flex-direction:column; gap:12px;
}

/* Panel oscuro — el gesto reconocible del sistema */
.panel{
  background:var(--panel); color:var(--on-panel);
  border-radius:32px; padding:clamp(40px,6vw,88px);
}
.panel .dim{ color:var(--on-panel-2); }
.panel .label{ color:var(--on-panel-2); }
.panel .rule{ background:var(--panel-line); }

/* ---------- Cita / testimonio ----------
   La figura entera, no solo sus dos remates: la pintan la home y la
   página de formación, que es de la que habla la cita, y una clase
   compartida no puede existir dos veces. Vivía repartida entre esta
   hoja y home.css, con la regla del pie escrita en las dos.

   Se tiene que ver que es una cita antes de leerla: la comilla grande
   lo dice de un vistazo y la regla separa la voz de quien la firma.

   El testimonio es un párrafo entero de un cliente real y no se puede
   recortar. A display-m sería un muro: va a display-s con la medida
   ancha, que es como se lee un párrafo largo.

   El tope de 760 px es el de la home, donde la cita ocupa la caja. Donde
   comparte fila con otra cosa, la columna manda y el tope no llega a
   aplicar. */
.quote{ margin:0; max-width:760px; }
.quote-mark{
  display:block; margin-bottom:-.34em;
  font-family:var(--font-display); font-size:clamp(4rem,8vw,7rem);
  line-height:1; color:var(--point-ink); opacity:.28;
}
.quote blockquote{ margin:0; max-width:34ch; }
@media (min-width:760px){ .quote blockquote{ max-width:52ch; } }
.quote figcaption{ display:flex; align-items:center; gap:20px; margin-top:32px; }
.quote-rule{ flex:0 0 56px; height:1px; background:var(--ink-3); }
/* Sin margen propio: lo separa el gap de la figcaption. */
.quote cite{
  display:block; margin:0; font-style:normal;
  font-family:var(--font-mono); font-size:.8125rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}

/* Separador — franja de retícula ya propagada, generada en servidor.
   Va de borde a borde de la ventana: es el campo de fondo asomando entre
   dos secciones, no un bloque de contenido. Por eso no lleva .bleed y por
   eso el ancho es 100% a secas. */
.sep{ padding:0; }
.sep svg{ display:block; width:100%; height:38px; }

/* ------------------------------------------------------------
   7 · CABECERA
   ------------------------------------------------------------ */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:var(--header-h); display:flex; align-items:center;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease;
}
header.site.stuck{
  background:rgba(243,240,233,.82);          /* respaldo si no hay color-mix */
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  backdrop-filter:blur(12px) saturate(120%);
  border-bottom-color:var(--line);
}
.hd{
  display:flex; align-items:center; gap:24px; width:100%;
  max-width:var(--maxw); margin-left:auto; margin-right:auto;
  padding-left:var(--pad); padding-right:var(--pad);
}
.brand{ display:flex; align-items:center; color:var(--ink); flex:0 0 auto; }
/* El viewBox del logotipo va recortado al dibujo, así que esta altura es
   la de la tinta y no la de una caja con aire dentro. */
.brand svg{ height:30px; width:auto; display:block; }

nav.main{ display:flex; align-items:center; gap:24px; margin-left:auto; margin-right:auto; }
nav.main a,
nav.main button{
  font-family:var(--font-sans); font-size:0.9375rem; font-weight:400; color:var(--ink);
  background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:.35em; white-space:nowrap;
}
nav.main a:hover,
nav.main button:hover{ color:var(--point-ink); }

/* Estás aquí. Barra de acento bajo la entrada, que el color de reposo
   ya es tinta y no queda margen para distinguirla solo con el color. En
   un desplegable se encienden las dos: la de dentro y la de arriba, que
   si no el nivel superior queda apagado con la página abierta. */
nav.main a, nav.main button{ position:relative; }
nav.main > .nav-link.is-current,
nav.main > .navitem.is-current > button{ font-weight:500; }
nav.main > .nav-link.is-current::after,
nav.main > .navitem.is-current > button::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px;
  height:2px; background:var(--point);
}
.caret{ color:var(--ink-3); transition:transform .2s ease; flex:0 0 auto; }
nav.main button[aria-expanded="true"] .caret{ transform:rotate(180deg); }

/* El aire entre el botón y el desplegable va DENTRO del elemento, no
   fuera: si se deja como separación real, el puntero cruza tierra de
   nadie, salta mouseleave y el menú se cierra antes de llegar. Se ve
   igual y se puede clicar. */
.navitem{ position:relative; padding-top:14px; padding-bottom:14px; }
.submenu{
  position:absolute; top:100%; left:-16px; min-width:300px;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:12px;
  padding:10px; display:none; flex-direction:column;
}
.navitem.open .submenu{ display:flex; }

/* Ojo con la especificidad: estas reglas compiten con `nav.main a`, que
   es más específica y dejaría los enlaces sin padding, en una línea y
   con el área de clic reducida a la altura del texto. Por eso van
   ancladas a nav.main. */
nav.main .submenu a{
  display:block; padding:10px 12px; border-radius:8px;
  white-space:normal; line-height:1.35;
}
nav.main .submenu a:hover{ background:var(--paper-sunk); color:var(--ink); }
nav.main .submenu a.is-current{
  background:var(--paper-sunk); font-weight:500;
  box-shadow:inset 2px 0 0 var(--point);
}
nav.main .submenu .sd{
  display:block; font-size:.8125rem; color:var(--ink-3);
  margin-top:2px; line-height:1.4; white-space:normal;
}

.hd-end{ display:flex; align-items:center; gap:20px; flex:0 0 auto; }

/* Selector de idioma: dos enlaces, sin desplegable. El destino se
   construye con la ruta actual, así que sirve para cualquier página. */
.lang{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; }
.lang a{ color:var(--ink-3); text-transform:uppercase; }
.lang a:hover{ color:var(--ink); }
.lang a[aria-current="true"]{ color:var(--ink); }
.lang .divider{ color:var(--line); }

/* Menú móvil — el mockup solo oculta la navegación; aquí hay
   desplegable real, mismo sistema visual, sin librerías. */
.burger{
  display:none; width:40px; height:40px; padding:0; margin-left:auto;
  background:none; border:0; cursor:pointer; position:relative; flex:0 0 auto;
}
.burger span{
  position:absolute; left:9px; right:9px; height:1px; background:var(--ink);
  transition:transform .25s ease, opacity .2s ease;
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:23px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.mnav{
  display:none; position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:49;
  background:var(--paper); border-top:1px solid var(--line);
  overflow-y:auto; padding:24px var(--pad) 48px;
}
.mnav.open{ display:block; }
.mnav .grp{ border-top:1px solid var(--line); padding:20px 0; }
.mnav .grp:first-child{ border-top:0; }
.mnav .grp > .label{ margin-bottom:12px; }
.mnav a{ display:block; padding:9px 0; font-size:1.125rem; }
.mnav a .sd{ display:block; font-size:.875rem; color:var(--ink-3); line-height:1.4; }
/* Estás aquí, también en el menú de móvil: aquí no hay botón de
   desplegable que encender, así que la marca va entera en la entrada. */
.mnav a.is-current{
  font-weight:500;
  padding-left:14px; margin-left:-14px;
  box-shadow:inset 2px 0 0 var(--point);
}
.mnav .foot{ margin-top:24px; padding-top:24px; border-top:1px solid var(--line); display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
body.nav-open{ overflow:hidden; }

/* La navegación completa en español ocupa ~1.020 px entre logotipo,
   siete entradas, selector de idioma y CTA. Por debajo de eso no cabe
   sin que el CTA se salga del viewport, así que ahí entra el menú
   móvil. El español manda: si cabe en español, cabe en inglés. */
@media (max-width:1179px){
  nav.main{ display:none; }
  .burger{ display:block; }
  .hd-end .btn{ display:none; }
  .hd-end{ margin-left:auto; }
}
@media (min-width:1180px){
  .mnav{ display:none !important; }
}

/* ------------------------------------------------------------
   8 · PETICIÓN DE INFORMACIÓN EN LÍNEA
   Regla hairline arriba, una frase y los campos. Discreto, nunca
   en color. El asunto va precargado según el bloque de origen.
   ------------------------------------------------------------ */
.inline-ask{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); }
.inline-ask .intro{ margin:0 0 16px; font-size:.9375rem; color:var(--ink-3); }
.inline-ask .intro .subject{ font-family:var(--font-mono); color:var(--ink-2); }

.ask-fields{ display:flex; gap:10px; flex-wrap:wrap; }
.ask-field{ flex:1 1 180px; min-width:0; display:flex; flex-direction:column; }
.ask-field-wide{ flex:1 1 100%; }

.inline-ask input,
.inline-ask textarea{
  width:100%; font-family:var(--font-sans); font-size:.9375rem; line-height:1.5;
  padding:.7em 1em; border:1px solid var(--line); border-radius:999px;
  background:var(--paper-sunk); color:var(--ink);
  transition:border-color .2s ease;
}
.inline-ask textarea{ border-radius:16px; resize:vertical; min-height:88px; }
.inline-ask input::placeholder,
.inline-ask textarea::placeholder{ color:var(--ink-3); }
.inline-ask input:hover,
.inline-ask textarea:hover{ border-color:var(--ink-3); }
.inline-ask [aria-invalid="true"]{ border-color:var(--error); }

.ask-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:14px; }
.ask-err{ font-size:.8125rem; color:var(--error); margin:6px 0 0; }

/* La cláusula informativa. Callada y a la medida del texto: es
   información obligatoria, no argumento, y a tamaño de párrafo compite
   con el formulario que tiene encima.

   El enlace sí se subraya. Es el único enlace del sitio que lo hace, y
   aquí hace falta: en --ink-3 y a 13 px, el acento solo no basta para
   que se vea que hay algo pulsable. */
.ask-legal{
  margin:12px 0 0; max-width:62ch;
  font-size:.8125rem; line-height:1.5; color:var(--ink-3);
}
.ask-legal a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; }
.ask-legal a:hover{ color:var(--ink); }

.ask-status{ font-size:.9375rem; margin:12px 0 0; }
.ask-status:focus-visible{ outline-offset:4px; }
.ask-status.is-ok{ color:var(--positive); }
.ask-status.is-error{ color:var(--error); }
/* Los errores que no tienen hueco propio —subject, locale, page_url— se
   acumulan detrás del mensaje de estado. Van a la tinta del párrafo y no
   a la del error: el rojo ya lo pone la frase de delante. */
.ask-status-extra{ color:var(--ink-2); }

/* La salida del 419. Botón y no enlace: no navega a ningún sitio, rehace
   la página donde está. El secundario del sistema a tamaño pequeño. */
.ask-reload{
  display:inline-block; margin-left:10px;
  font-family:var(--font-sans); font-size:.8125rem; font-weight:500;
  color:var(--ink); background:transparent;
  border:1px solid var(--line); border-radius:999px;
  padding:.45em 1em; cursor:pointer;
  transition:border-color .2s ease;
}
.ask-reload:hover{ border-color:var(--ink-3); }

/* El honeypot no se enseña a nadie, tampoco a un lector de pantalla */
.ask-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Variante sobre panel oscuro */
.panel .inline-ask{ border-top-color:var(--panel-line); }
.panel .inline-ask .intro{ color:var(--on-panel-2); }
.panel .inline-ask .intro .subject{ color:var(--on-panel); }
.panel .inline-ask input,
.panel .inline-ask textarea{
  background:var(--panel-raised); border-color:var(--panel-line); color:var(--on-panel);
}
.panel .inline-ask input::placeholder,
.panel .inline-ask textarea::placeholder{ color:var(--on-panel-2); }
.panel .ask-status.is-ok{ color:var(--point); }
.panel .ask-status-extra{ color:var(--on-panel-2); }

/* La cláusula sobre panel: la tinta callada del panel, y el enlace a
   tinta plena para que se distinga del párrafo. Medido sobre --panel,
   --on-panel-2 da AA y --on-panel lo supera con holgura. */
.panel .ask-legal{ color:var(--on-panel-2); }
.panel .ask-legal a{ color:var(--on-panel); }
.panel .ask-legal a:hover{ color:var(--point); }

.panel .ask-reload{ color:var(--on-panel); border-color:var(--panel-line); }
.panel .ask-reload:hover{ border-color:var(--on-panel-2); }

/* Formulario completo: los mismos campos, los mismos name, el mismo
   honeypot y el mismo endpoint que el bloque en línea. Lo único que
   cambia es que va en una sola columna y con las etiquetas a la vista.

   Lo usan la página de contacto y el cierre de la home, así que vive
   aquí y no en la hoja de una página. */
.ask-full{ max-width:620px; margin-top:56px; }
.ask-full .ask-fields{ flex-direction:column; gap:18px; }
.ask-full .ask-field{ flex:1 1 auto; }

/* Con sitio de sobra, las etiquetas se ven. Un formulario de solo
   placeholders obliga a recordar qué iba en cada campo en cuanto
   empiezas a escribir. */
.ask-full .ask-field label.vh{
  position:static !important;
  width:auto; height:auto; margin:0 0 8px; padding:0;
  overflow:visible; clip:auto; white-space:normal;
  display:block; font-size:.8125rem; font-weight:500; color:var(--ink-2);
}
.ask-full input,
.ask-full textarea{ padding:15px 18px; font-size:1.0625rem; }
.ask-full textarea{ min-height:120px; }
.ask-full .ask-actions{ margin-top:24px; }
.ask-full .btn{ min-height:54px; padding:0 32px; }

/* El asunto: visible y no editable. Que se vea desde dónde llega la
   petición es honesto y evita que el visitante repita el contexto. */
.ask-full .intro{
  margin-bottom:28px; padding-bottom:16px; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.ask-full .intro .subject{
  display:block; margin-top:8px;
  font-family:var(--font-sans);
  font-size:1rem; letter-spacing:0; text-transform:none; color:var(--ink);
}

/* ------------------------------------------------------------
   9 · ACORDEÓN
   <details> nativo: con JavaScript desactivado las respuestas se
   siguen pudiendo abrir y el teclado funciona sin ayuda ninguna.
   ------------------------------------------------------------ */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  padding:26px 0; cursor:pointer; list-style:none;
  font-size:clamp(1.15rem,1.6vw,1.4rem); font-weight:600; letter-spacing:-0.01em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::marker{ content:""; }
.faq .sign{
  font-family:var(--font-mono); font-weight:400; font-size:1.1rem; color:var(--ink-3);
  flex:0 0 auto; transition:transform .25s ease;
}
.faq details[open] .sign{ transform:rotate(45deg); }
.faq .a{ padding:0 0 30px; max-width:64ch; color:var(--ink-2); }
.faq .a p{ margin:0; }

/* ------------------------------------------------------------
   10 · PIE — panel oscuro a sangre, único punto con muchos enlaces
   ------------------------------------------------------------ */
footer.site{ background:var(--panel); color:var(--on-panel); padding:88px 0 40px; }
.fcols{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:48px var(--gutter); }
footer.site h2{
  font-family:var(--font-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--on-panel-2); margin:0 0 18px;
}
footer.site ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
footer.site a{ font-size:.9375rem; color:var(--on-panel); opacity:.85; }
footer.site a:hover{ opacity:1; color:var(--point); }
footer.site .is-pending{ color:var(--on-panel-2); opacity:.7; }
footer.site .brand{ color:var(--on-panel); }
/* Con el viewBox recortado, 24 px pintaban 17 de tinta. Se ajusta para
   que el pie quede como estaba, un punto por debajo de la cabecera. */
footer.site .brand svg{ height:20px; }
footer.site .dim{ color:var(--on-panel-2); }
.fbottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px;
  margin-top:64px; padding-top:24px; border-top:1px solid var(--panel-line);
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; color:var(--on-panel-2);
}
.fbottom nav{ display:flex; flex-wrap:wrap; gap:16px; }
.fbottom button{
  font:inherit; letter-spacing:inherit; background:none; border:0; padding:0;
  color:var(--on-panel-2); cursor:pointer; text-decoration:underline;
}
.fbottom button:hover{ color:var(--point); }

/* ------------------------------------------------------------
   11 · BANNER DE COOKIES
   Sistema visual 2026, texto legal reutilizado de 2025 y la misma
   cookie pleasepoint_consent: quien ya aceptó no vuelve a verlo.
   ------------------------------------------------------------ */
.ck{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:80;
  display:none; background:var(--paper-raised); border:1px solid var(--line);
  border-radius:16px; padding:24px;
  max-width:640px; margin-left:auto;
}
.ck.show{ display:block; }
.ck p{ margin:0 0 18px; font-size:.9375rem; color:var(--ink-2); }
.ck p a{ color:var(--point-ink); text-decoration:underline; }
.ck-actions{ display:flex; flex-wrap:wrap; gap:10px; }

.ck-modal{ position:fixed; inset:0; z-index:90; display:none; }
.ck-modal.show{ display:block; }
.ck-modal .ovl{ position:absolute; inset:0; background:rgba(23,24,26,.45); }
.ck-modal .box{
  position:relative; margin:6vh auto; max-width:620px; max-height:88vh; overflow-y:auto;
  background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:32px;
}
.ck-modal h2{ font-family:var(--font-display); font-weight:var(--display-wght); font-size:1.75rem; margin:0 0 16px; letter-spacing:var(--display-tracking); }
.ck-modal .desc{ font-size:.9375rem; color:var(--ink-2); margin:0 0 24px; }
.ck-cat{ border-top:1px solid var(--line); padding:20px 0; display:flex; gap:24px; align-items:flex-start; justify-content:space-between; }
.ck-cat h3{ font-size:1rem; font-weight:600; margin:0 0 6px; }
.ck-cat p{ font-size:.875rem; color:var(--ink-2); margin:0; }
.ck-cat input{ flex:0 0 auto; width:18px; height:18px; accent-color:var(--point-ink); margin-top:4px; }
.ck-links{ display:flex; flex-wrap:wrap; gap:20px; margin:20px 0 28px; font-size:.875rem; }
.ck-links a{ color:var(--point-ink); text-decoration:underline; }
.ck-modal .ck-actions{ border-top:1px solid var(--line); padding-top:24px; }

/* ------------------------------------------------------------
   12 · PIEZAS COMPARTIDAS ENTRE PÁGINAS

   Nacieron en la home y ahora las usan también las páginas de
   decisor y la de contacto. Se han MOVIDO desde home.css, no
   copiado: una clase compartida no puede existir dos veces.

   Quién usa qué:
     .logos                Home S2 · A7
     .flowwrap · .svc-*    Home S5 · A6
     .chapters             Home S6 · A4 · A7
     .leftovers            Home S8 · A2 · A5 de dirección
     .faqgrid              Home S10 · A8
     .closing · .notes     Home S11 · A9 · página de contacto
     .cases · .cases .case  Home S7 · los cuatro bloques de /agency/projects
                           (acotadas: .case es tambien el catalogo)
     .arts · .art          El listado de recursos · los relacionados del
                           final de cada articulo
   ------------------------------------------------------------ */

/* Franja de clientes. El PNG es una silueta con alfa: brightness(0)
   lo lleva a tinta, sin caja y sin color. Los que aún no tenemos en
   marca plana van como wordmark tipográfico, con la misma altura
   óptica. */
/* Una sola fila, siempre. Nueve marcas de anchos muy distintos no caben
   en cualquier ventana, y partidas en dos filas la franja deja de ser
   una franja: la de abajo se lee como un segundo grupo, de menos. Así
   que no se parten nunca —se deslizan—, y a cambio caben más altas.

   La fila se sale del 'wrap' por los dos lados: que una marca quede
   cortada por el borde es lo único que dice que hay más. */
.logos{
  display:flex; flex-wrap:nowrap; align-items:center; gap:0 36px;
  margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1);
  padding-left:var(--pad); padding-right:var(--pad);
  overflow-x:auto; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.logos::-webkit-scrollbar{ display:none; }
.logos > *{ flex:0 0 auto; scroll-snap-align:center; }

/* Cada marca lleva su altura óptica en --h: sus proporciones no tienen
   nada que ver entre sí (Nescafé es cuadrado, Real Sociedad muy
   apaisado) y una altura común las descompensa.

   Escala de grises, no tinta plana: brightness(0) funciona con los
   wordmarks pero convierte en manchas los logotipos con dibujo dentro
   —Nescafé, Real Sociedad, Teleadhesivo—. En gris se leen todos y la
   franja sigue siendo de un solo color. */
.logos img{
  height:var(--h, 24px); width:auto; display:block;
  opacity:.85; filter:grayscale(1) contrast(1.1);
  transition:opacity .25s ease, filter .25s ease;
}

/* Los wordmarks, a tinta plana: el archivo es una silueta con alfa y
   brightness(0) la lleva al negro del sistema, venga clara u oscura. */
.logos img.is-flat{ opacity:.7; filter:brightness(0); }

.logos img:hover{ opacity:1; filter:grayscale(0) contrast(1); }

/* Franja de prueba. La usan la home y las páginas de decisor, así que
   vive aquí y no en la hoja de una página.

   Compacta y en dos tiempos: arriba la afirmación y la alianza con el
   mismo peso; debajo, quién ya confía. Nada de cajas. */
.proof{
  padding-top:56px !important; padding-bottom:56px !important;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.proof-top{
  display:grid; grid-template-columns:1fr; gap:32px;
  margin-bottom:44px;
}
@media (min-width:900px){
  .proof-top{ grid-template-columns:minmax(0,1fr) auto; gap:clamp(40px,6vw,88px); align-items:center; }
}

.proof-claim{ margin:0; max-width:22ch; }

.proof-aws-title{
  margin:0 0 16px;
  font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}

/* Los badges oficiales de AWS, a su altura real y sin caja. Son
   credenciales verificables: valen más tal cual que redibujadas. */
.proof-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:20px 24px; }

/* Variante compacta: fuera de la home la franja ya no presenta a nadie,
   solo recuerda. Misma información en menos alto.

   La afirmación no encoge hasta desaparecer: bajarla a 17 px la
   convertía en un pie de foto y era lo único que había que leer. Va en
   sans de 20 px, en tinta plena y con peso, que se lee de un vistazo
   sin ocupar el alto de la portada. Debajo, una regla la separa de las
   marcas: sin ella, afirmación y logotipos se leían como un bloque. */
/* Ni regla arriba ni regla dentro: lo que tiene encima es el hero de la
   propia página, y la franja no necesita cerrarse por los dos lados ni
   partirse por la mitad. Solo la cierra por abajo.

   Y va pegada al hero: es la prueba de lo que el hero acaba de afirmar,
   no una sección aparte. */
.proof--compact{
  padding-top:8px !important; padding-bottom:32px !important;
  border-top:0;
}
.proof--compact .proof-top{ margin-bottom:0; align-items:center; }
.proof--compact .proof-claim{
  font-family:var(--font-sans); font-size:1.25rem; line-height:1.4;
  font-weight:500; letter-spacing:-0.005em;
  max-width:32ch; color:var(--ink);
}
.proof--compact .proof-aws-title{ margin-bottom:12px; }
.proof--compact .proof-badges{ gap:16px 20px; }
.proof--compact .proof-badges img{ height:56px; }
.proof--compact .logos{ margin-top:28px; }
.proof-badges img{ display:block; height:76px; width:auto; }
@media (max-width:640px){ .proof-badges img{ height:60px; } }

/* Recorrido de los cinco servicios y su rejilla, siempre sobre panel */
/* Pegado al titular: la separación anterior dejaba el esquema
   flotando a media sección. */
.flowwrap{ margin-top:36px; overflow-x:auto; }
.flowwrap svg{ width:100%; max-width:940px; min-width:660px; }
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:28px 24px; margin-top:36px; }
.svc h3{ font-size:1.0625rem; font-weight:600; margin:0 0 8px; }
.svc p{ margin:0; font-size:.9375rem; color:var(--on-panel-2); }
.svc .keeps{ margin-top:14px; padding-top:14px; border-top:1px solid var(--panel-line); font-size:.875rem; color:var(--on-panel); }
.svc .keeps span{ color:var(--on-panel-2); }
.svc-link{ margin-top:32px; }
/* Cada ficha de la home lleva su propia puerta: la home es un
   distribuidor y una ficha sin destino no reparte a nadie. */
.svc-door{ margin:14px 0 0; }

/* ------------------------------------------------------------
   LA FICHA DE ENTREGABLE
   Nombre, en qué forma llega y quién lo usa después. Vive aquí y no en
   service.css porque la usan las tres páginas de servicio: las tres
   fases de la implantación, el "qué queda" de formación y el de
   desarrollo a medida.

   Sin tarjeta, sin sombra y sin icono: regla hairline arriba, como el
   resto del sistema. En móvil se apila sola.

   El cuerpo va a 1rem y no a .9375: es el bloque que más se lee de las
   tres páginas y estaba escrito al tamaño de un pie de foto.
   ------------------------------------------------------------ */
.deliverables{ display:grid; grid-template-columns:1fr; gap:0; margin-top:20px; }
@media (min-width:860px){
  .deliverables{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(24px,3vw,56px); }
  .deliverables--wide{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Apilada: dentro de una columna de fase, donde no cabe en horizontal. */
  .deliverables--stack{ grid-template-columns:1fr; }
}
.deliverable{ padding:18px 0 22px; border-top:1px solid var(--ink); min-width:0; }
.deliverable-name{
  margin:0 0 10px; font-size:1.0625rem; font-weight:600;
  line-height:1.35; color:var(--ink);
}
.deliverable-line{
  margin:0; padding-top:9px;
  font-size:1rem; line-height:1.5; color:var(--ink-2);
}
.deliverable-line + .deliverable-line{ margin-top:9px; border-top:1px solid var(--line); }
.deliverable-line span{
  display:block; margin-bottom:2px;
  font-family:var(--font-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}

/* ------------------------------------------------------------
   CUÁNDO SÍ Y CUÁNDO NO
   Dos columnas separadas por una regla vertical. La segunda es la que
   hace creíble a la primera. Lo usan las tres páginas de servicio.

   Las dos columnas van a la misma tinta. La de "no encaja" estaba en
   --ink-3, que es la tinta callada de las etiquetas: un bloque entero
   de prosa ahí se lee como una nota al pie, y no lo es.
   ------------------------------------------------------------ */
.fit{ display:grid; grid-template-columns:1fr 1px 1fr; gap:0; margin-top:40px; }
.fit .vr{ background:var(--line); }
.fit-col{ padding:0 clamp(24px,4vw,64px); min-width:0; }
.fit-yes{ padding-left:0; }
.fit-no{ padding-right:0; }
.fit ul{ list-style:none; margin:24px 0 0; padding:0; }
.fit li{
  padding:16px 0; border-top:1px solid var(--line);
  color:var(--ink-2); font-size:1rem; line-height:1.55;
}
/* El enlace de reparto va en su línea: es una salida, no una coletilla. */
.fit li .fwd{ display:block; width:fit-content; margin-top:10px; }
@media (max-width:1000px){
  .fit{ grid-template-columns:1fr; }
  .fit .vr{ display:none; }
  .fit-col{ padding:0; }
  .fit-no{ margin-top:48px; padding-top:48px; border-top:1px solid var(--line); }
}

/* ------------------------------------------------------------
   PASOS TELEGRÁFICOS
   Una línea por paso, separadas por reglas hairline. Sin numerar: no
   son un orden, son lo que hay dentro. Ninguna línea pasa de catorce
   palabras; si pasa, es que la línea está mal escrita, no el CSS.
   ------------------------------------------------------------ */
.tele{ list-style:none; margin:20px 0 0; padding:0; }
.tele li{
  padding:13px 0; border-top:1px solid var(--line);
  color:var(--ink-2); font-size:1rem; line-height:1.5;
}

/* ------------------------------------------------------------
   HOY → CON LA IA IMPLANTADA
   Lo usan las dos páginas de decisor y las fichas del catálogo, así que
   vive aquí y no en una hoja de página. Se movió de audience.css el día
   que el catálogo pasó a contar sus casos con esta misma anatomía.
   ------------------------------------------------------------ */
/* Ni una flecha ni una regla por fila. El emparejamiento lo hace la
   rejilla: cada paso es una fila y enseña sus dos versiones a la vez,
   con el número en medio haciendo de espina.

   El trabajo que desaparece va tachado en la columna de hoy. Tacharlo
   en la de después se leería como que ese paso no llega a ocurrir, que
   es justo lo contrario. */
.day{ margin-top:32px; }

.day-heads{ display:none; }
@media (min-width:820px){
  .day-heads{
    display:grid; grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
    margin-bottom:10px;
  }
  .day-heads .day-head:last-child{ grid-column:3; }
}
.day-head{
  margin:0; padding:0 24px 12px;
  font-family:var(--font-mono); font-weight:500; font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.day-head--after{ color:var(--point-ink); }

.day-steps{ list-style:none; margin:0; padding:0; }
.day-steps li{
  display:grid; grid-template-columns:1fr;
  gap:0;
  font-size:1rem; line-height:1.5;
}
@media (min-width:820px){
  .day-steps li{ grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr); align-items:stretch; }
}

/* Las celdas de hoy van sobre papel hundido y sin separación entre
   filas, así que las cinco forman una sola columna teñida: un bloque,
   no cinco cajas. */
.day-before,
.day-after{ display:block; padding:14px 24px; }
.day-before{ background:var(--paper-sunk); color:var(--ink-2); }
.day-steps li:first-child .day-before{ padding-top:20px; }
.day-steps li:last-child  .day-before{ padding-bottom:20px; }
.day-after{ color:var(--ink); }
@media (max-width:819px){
  .day-before{ padding-bottom:10px; }
  .day-after{ padding-top:6px; padding-bottom:22px; }
  .day-after::before{
    content:"→"; color:var(--point-ink); margin-right:.5em;
  }
}

/* La espina: un número por fila, centrado entre las dos versiones.
   Es lo que sustituye a las cinco flechas de la versión anterior. */
.day-num{
  display:none;
  font-family:var(--font-mono); font-size:.75rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
@media (min-width:820px){
  .day-num{ display:flex; align-items:center; justify-content:center; }
}

.day-before.is-gone{
  color:var(--ink-3);
  text-decoration:line-through;
  text-decoration-color:var(--point-ink); text-decoration-thickness:1px;
}

/* ---------- A3 · El resultado ----------
   Tres celdas: los pasos que caen —contados de la propia lista—, el
   tiempo del ejemplo y lo que sigue haciendo una persona. */
.day-result{
  display:grid; grid-template-columns:1fr; gap:28px;
  margin-top:40px; padding-top:28px;
  border-top:1px solid var(--ink);
}
@media (min-width:760px){
  .day-result{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,64px); }
}
.day-fig .label{ color:var(--ink-3); }
.day-fig-val{
  margin:14px 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:0;
  font-variant-numeric:tabular-nums;
}
.day-fig-val span{ color:var(--ink-3); }
.day-fig-val s{
  margin-right:.35em;
  text-decoration-thickness:1px; text-decoration-color:var(--ink-3);
  color:var(--ink-3); font-size:.75em;
}
/* Lo único en acento del bloque: la cifra de después. */
.day-fig-val em{ font-style:normal; color:var(--point-ink); }
.day-fig-note{
  margin:14px 0 0; font-size:1.125rem; line-height:1.4; color:var(--ink);
}

/* Capítulos a ancho completo, alineación alterna */
.chapters{ margin-top:56px; }
.chapter{
  display:grid; grid-template-columns:minmax(120px,1.6fr) minmax(0,5fr) minmax(0,3fr);
  gap:clamp(24px,4vw,64px); align-items:start;
  padding-top:52px; padding-bottom:52px; border-top:1px solid var(--line);
}
.chapter:nth-child(even){ grid-template-columns:minmax(0,3fr) minmax(120px,1.6fr) minmax(0,5fr); }
.chapter:nth-child(even) .num{ order:2; }
.chapter:nth-child(even) .txt{ order:3; }
.chapter:nth-child(even) .aside{ order:1; }
.num{
  font-family:var(--font-display); font-weight:var(--display-wght);
  font-size:clamp(3rem,5vw,4.75rem); line-height:.9; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.chapter .txt p{ margin:12px 0 0; color:var(--ink-2); }
.aside{ font-family:var(--font-mono); font-size:.8125rem; line-height:1.7; color:var(--ink-3); }
.aside b{ color:var(--ink-2); font-weight:500; }
.chapters-close{ margin-top:64px; }

/* Filas grandes separadas por reglas hairline */
.leftovers{ margin-top:56px; border-top:1px solid var(--line); }
.leftovers .row{
  padding:clamp(28px,4vw,48px) 0; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(16px,3vw,48px); align-items:baseline;
}
.leftovers .row p{ margin:0; color:var(--ink-2); font-size:.9375rem; }

/* Acordeón a dos columnas */
.faqgrid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(24px,4vw,80px); }
.faqgrid .faq{ margin-top:0; }

/* Hoy → con la IA implantada, versión telegráfica.
   La usan los once bloques del catálogo. Las páginas de decisor tenían
   una versión desarrollada de este mismo patrón; se retiró al rehacer
   A3 con dos listas emparejadas, que es otra cosa y vive en
   audience.css. */
.ba{ display:grid; gap:0; }
.ba .vr{ background:var(--line); }
.ba-col{ min-width:0; }

.ba-head{
  margin:0 0 8px; font-family:var(--font-mono); font-weight:500;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
}
.ba-after .ba-head{ color:var(--point-ink); }

.ba-steps{ list-style:none; margin:0; padding:0; counter-reset:ba; }
.ba-steps li{
  counter-increment:ba;
  position:relative;
  border-top:1px solid var(--line);
  color:var(--ink-2); line-height:1.55;
}
.ba-steps li::before{
  content:counter(ba,decimal-leading-zero);
  position:absolute; left:0;
  font-family:var(--font-mono); color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.ba-steps li.is-changed{ border-top-color:var(--ink); color:var(--ink); }

/* Telegráfica: once veces en la misma página.
   Aquí no se marca paso a paso: en un bloque de tres pasos cambian casi
   todos, y una marca que aparece once veces deja de marcar nada. El
   énfasis lo lleva la columna entera. */
.ba--brief{ grid-template-columns:1fr 1fr; gap:0 clamp(24px,4vw,56px); margin-top:28px; }
.ba--brief .ba-after .ba-steps li{ border-top-color:var(--ink); color:var(--ink); }
.ba--brief .ba-steps li{ padding:10px 0 10px 32px; font-size:.9375rem; }
.ba--brief .ba-steps li::before{ top:11px; font-size:.75rem; }

/* Cierre: frase grande, formulario y notas serenas.
   El titular va a 24ch y no a 12: todos los cierres del sitio son
   preguntas cortas, y a doce caracteres salían apiladas en columnas
   de dos palabras que ocupaban media pantalla sin decir más. Cada
   página lo tenía que ensanchar por su cuenta; ahora la medida
   correcta es la de aquí y no hay excepciones. */
.closing h2{ max-width:24ch; }
.closing .body-l{ margin-top:32px; }
.closing .inline-ask{ max-width:640px; }
/* Cuando el cierre no lleva formulario sino un botón a /contact —el
   listado de recursos y los artículos—, ocupa el mismo sitio que
   ocuparía el formulario y con el mismo aire por arriba. */
.closing-cta{ margin:36px 0 0; }
.notes{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:36px; }
.notes span{
  font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}

/* ---------- La tarjeta de caso ----------
   La parrilla .cases y la tarjeta .case, que comparten S7 de la home y
   los cuatro bloques de /agency/projects. El marcado es una sola pieza,
   2026/components/case-card, así que los estilos también.

   Dos columnas en escritorio, y ahí se quedan. Cuatro harían la portada
   demasiado pequeña para lo que tiene que enseñar, y el bloque de
   MyOutfits, que tiene tres tarjetas, quedaría descompensado.

   La versión anterior era una retícula de 12 columnas con
   desplazamientos verticales: dejaba huecos grandes sin explicación y
   las portadas quedaban de tamaños tan distintos que no se comparaban
   entre sí. */
.cases{
  display:grid; grid-template-columns:1fr;
  gap:clamp(40px,5vw,64px) var(--gutter);
  margin-top:56px;
}
@media (min-width:760px){ .cases{ grid-template-columns:1fr 1fr; } }

/* Todo lo que sigue va acotado a `.cases`, y no por gusto: `.case` y
   `.case-body` son tambien los nombres del bloque desplegable del
   catalogo, que vive en implement.css. Sueltas aqui, el velo oscuro y
   su `position:absolute` se le aplicaban al cuerpo del desplegable y la
   caja no crecia al abrirse. Estas reglas describen UNA tarjeta dentro
   de la parrilla; fuera de la parrilla no tienen nada que decir. */

/* El texto va dentro de la portada, sobre un velo oscuro: fuera
   ocupaba tanto alto como la propia imagen y la parrilla se estiraba
   sin necesidad. */
.cases .case{ display:block; color:inherit; }

.cases .cover{
  position:relative; display:block; width:100%; overflow:hidden;
  background:var(--panel); border:1px solid var(--line);
  aspect-ratio:4/3;
}
/* El recorte de portada lo comparten las dos tarjetas del sitio, la de
   caso y la de artículo. Lo que cambia entre ellas es la proporción de
   la caja, no cómo se recorta la foto dentro, así que esto se escribe
   una vez y no dos. */
.cases .cover img,
.art-cover img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.cases .case:hover .cover img{ transform:scale(1.04); }

.cases .case-body{
  position:absolute; left:0; right:0; bottom:0;
  display:block; padding:clamp(24px,3vw,32px);
  padding-top:clamp(40px,5vw,64px);
  color:var(--on-panel);
  /* El velo tiene que aguantar sobre cualquier foto, también sobre las
     zonas claras: si se aclara demasiado arriba, la etiqueta mono se
     pierde contra la imagen. */
  background:linear-gradient(to top,
    rgba(23,24,26,.96) 0%, rgba(23,24,26,.92) 40%,
    rgba(23,24,26,.72) 72%, rgba(23,24,26,0) 100%);
}

.cases .case-kind{
  display:block; margin-bottom:8px;
  font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--on-panel-2);
}
.cases .case .cli{ display:block; }
.cases .case .ph{
  display:block; margin-top:10px; max-width:40ch;
  color:var(--on-panel-2); font-size:.9375rem; line-height:1.5;
}
.cases .case-go{
  display:inline-flex; align-items:baseline; gap:.5em;
  margin-top:16px; font-size:.9375rem; font-weight:500; color:var(--point);
}
.cases .case-go .arw{ display:inline-block; transition:transform .25s cubic-bezier(.2,.7,.3,1); }
.cases .case:hover .case-go .arw{ transform:translateX(4px); }

/* SIN USO. El enlace del pie de la parrilla se retiró: la salida a la
   página de proyectos va ahora en botón junto al titular, que es donde
   se ve. Se deja anotado por si alguna página futura lo quiere. */
.cases-link{ margin-top:clamp(48px,6vw,72px); }

/* ---------- La tarjeta de artículo ----------
   La parrilla .arts y la tarjeta .art. Vive aquí, y no en resources.css,
   porque la usan dos páginas: el listado entero y los tres relacionados
   del final de cada artículo. Una tarjeta que se pinta en dos sitios no
   puede tener dos marcados ni dos hojas.

   Es hermana de .case, no la misma. La de caso mete el texto dentro de
   la portada, sobre un velo oscuro, y funciona porque son pocas y
   elegidas. Aquí son muchas y seguidas: sesenta y siete velos oscuros se
   leen como una alfombra y ninguna portada se distingue de la de al
   lado. Así que el texto va debajo, sobre papel, y lo único que compite
   por la atención es la foto.

   Tres columnas en escritorio, dos en tableta, una en móvil. Sin masonry
   y sin alturas variables: el título se corta a tres líneas y el resumen
   a dos, así que todas las tarjetas de una fila miden lo mismo y la
   parrilla se lee como una lista y no como un montón. */
.arts{
  display:grid; grid-template-columns:1fr;
  gap:clamp(36px,4vw,52px) var(--gutter);
  margin-top:48px;
}
@media (min-width:640px){ .arts{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .arts{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.art{ min-width:0; }
.art-link{ display:block; color:inherit; }

/* 16/10 y recorte por CSS. NO SE GENERA NINGÚN RECORTE NUEVO: las
   portadas son las que ya tiene cada artículo, con proporciones muy
   distintas entre sí, y mantener a mano un recorte por artículo es
   trabajo que no termina nunca. */
.art-cover{
  display:block; width:100%; overflow:hidden;
  background:var(--paper-sunk); border:1px solid var(--line);
  aspect-ratio:16/10;
}
.art-link:hover .art-cover img{ transform:scale(1.04); }

.art-kind{
  display:block; margin-top:16px;
  font-family:var(--font-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}

/* El título en display, a la medida de la tarjeta. Tres líneas y se
   corta: hay títulos de noventa caracteres y sin tope una sola tarjeta
   estiraba su fila entera. */
.art-title{
  display:-webkit-box; overflow:hidden;
  -webkit-line-clamp:3; -webkit-box-orient:vertical;
  margin-top:10px;
  font-family:var(--font-display); font-weight:var(--display-wght);
  letter-spacing:var(--display-tracking);
  font-size:1.375rem; line-height:1.2;
  transition:color .18s ease;
}
.art-link:hover .art-title{ color:var(--point-ink); }

.art-text{
  display:-webkit-box; overflow:hidden;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
  margin-top:10px; color:var(--ink-2);
  font-size:.9375rem; line-height:1.5;
}

.art-date{
  display:block; margin-top:14px;
  font-size:.75rem; letter-spacing:.08em; color:var(--ink-3);
}

/* ------------------------------------------------------------
   13 · RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:1000px){
  :root{ --sec:88px; }
  .fcols{ grid-template-columns:1fr 1fr; }

  .chapter,
  .chapter:nth-child(even){ grid-template-columns:1fr; gap:16px; }
  .chapter:nth-child(even) .num{ order:0; }
  .chapter:nth-child(even) .txt{ order:1; }
  .chapter:nth-child(even) .aside{ order:2; }
  .leftovers .row{ grid-template-columns:1fr; }
  .faqgrid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  :root{ --sec:72px; --pad:24px; }
  .fcols{ grid-template-columns:1fr; }
  .ck{ left:12px; right:12px; bottom:12px; padding:20px; }
  .ck-modal .box{ margin:4vh 12px; padding:24px; }
  .ask-field{ flex:1 1 100%; }
  .logos{ gap:14px 28px; }
}

/* ------------------------------------------------------------
   14 · MOVIMIENTO REDUCIDO — se respeta siempre
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}


/* ------------------------------------------------------------
   LA FORMA DE PÁGINA LARGA
   La comparten las tres páginas de servicio y la de plataforma, así
   que no puede vivir en service.css: la primera vez que se retocara
   allí, la plataforma se quedaría atrás. El prefijo svc- se conserva
   porque ya está publicado en ocho parciales; renombrarlo costaría
   más de lo que aclara.
   ------------------------------------------------------------ */

/* ---------- Entrada ----------
   El hero respira a lo ancho, no a lo alto. Con la medida estrecha el
   titular caía en cuatro o cinco líneas y el bloque entero se leía como
   una columna de periódico; a esta anchura son dos o tres. */
.svc-hero{ padding-top:clamp(140px,16vh,200px); padding-bottom:clamp(56px,7vh,88px); }
.svc-hero h1{ max-width:23ch; margin-top:20px; }
.svc-sub{ margin-top:28px; max-width:62ch; color:var(--ink-2); }

/* La regla: lo más afilado que tiene la oferta, así que se saca del
   párrafo y se pone contra una regla a tinta plena. */
.svc-rule{
  margin:40px 0 0; padding-left:clamp(20px,3vw,32px);
  border-left:2px solid var(--ink);
  max-width:46ch;
}
/* En formación y en desarrollo a medida la regla está en el hero. */
.hero-rule{ margin-top:40px; }

.svc-h2{ margin-top:20px; max-width:22ch; }

/* Una línea de contexto bajo un titular. Sustituye a los dos párrafos
   que abrían cada sección: si no cabe aquí, es que sobraba. */
.svc-lead{
  margin:24px 0 0; max-width:56ch;
  font-size:1.0625rem; line-height:1.6; color:var(--ink-2);
}

/* ---------- Costura con los paneles oscuros ----------
   Mismo criterio que en la home: el panel ya trae su aire dentro, así
   que la costura se reparte a medias entre las dos secciones vecinas. */
.svc-panel-sec{ padding-top:calc(var(--sec) / 2); padding-bottom:calc(var(--sec) / 2); }

/* La plataforma dentro del panel: una sola columna, igual que la S9 de
   la home. En dos, el esquema se queda pequeño. */
/* El esquema con tope de ancho: a ancho de panel se comía media
   pantalla para decir lo mismo, y esta es una sección secundaria. */
.svc-schema{ margin-top:24px; overflow-x:auto; }
.svc-schema svg{ width:100%; max-width:660px; min-width:560px; }
.svc-schema-text{ margin-top:16px; max-width:56ch; }
.svc-platform-link{ margin-top:20px; }

/* En móvil las medidas del hero y de los titulares estorban: la caja ya
   es estrecha y el tope solo añade líneas cortas. */
@media (max-width:640px){
  .svc-hero h1{ max-width:none; }
  .svc-h2{ max-width:none; }
}

/* ------------------------------------------------------------
   LA FILA DE PUERTAS
   Nació como "los otros dos servicios" de las páginas de servicio y la
   usa también la página de plataforma para repartir hacia todos. La
   anatomía de una puerta y el reparto por número de puertas están los
   dos aquí: son la misma fila en las dos páginas.
   ------------------------------------------------------------ */

/* Los otros servicios. Sustituye al anterior/siguiente de cuando las
   páginas iban en fila: con servicios que no se recorren en orden,
   "antes" y "después" no querían decir nada.

   Cuántas puertas hay lo dice el dato, no la hoja: la fila lleva una
   clase con su número —others--3 hoy, con cuatro servicios y la fila
   sin el propio— que escribe el Blade contando, y aquí está el reparto
   de ese número. Escrito al revés, dar de alta un servicio obligaba a
   repasar dos hojas buscando qué rejilla se había quedado corta. El
   quinto servicio pide su regla aquí: sin ella, la fila se queda en el
   reparto base de dos columnas. */
.others{
  display:grid; grid-template-columns:1fr; gap:0;
  margin-top:32px; border-top:1px solid var(--line);
}
@media (min-width:760px){
  .others{ grid-template-columns:1fr 1fr; }
  .other + .other{ border-left:1px solid var(--line); padding-left:clamp(24px,4vw,64px); }
  .other:first-child{ padding-right:clamp(24px,4vw,64px); }
}

/* Tres. En la banda intermedia van apiladas: tres en dos columnas
   dejan una suelta y se lee como un error de maquetación. */
@media (min-width:760px) and (max-width:939px){
  .others--3{ grid-template-columns:1fr; }
  .others--3 .other + .other{ border-left:0; padding-left:0; }
  .others--3 .other:first-child{ padding-right:0; }
}
@media (min-width:940px){
  .others--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .others--3 .other{ padding-left:clamp(20px,3vw,40px); padding-right:clamp(20px,3vw,40px); }
  .others--3 .other:first-child{ padding-left:0; }
  .others--3 .other:last-child{ padding-right:0; }
}
.other{
  display:block; padding:32px 0;
  border-bottom:1px solid var(--line);
  color:inherit;
  transition:color .2s ease;
}
.other:hover .display{ color:var(--point-ink); }
.other-desc{ display:block; margin-top:10px; color:var(--ink-2); font-size:1rem; line-height:1.55; }
.other .arw{ display:inline-block; margin-top:14px; color:var(--ink-3); }

/* La costura del bloque. Es cromo, no contenido: no pide la misma que
   una sección que hay que leer. Vive aquí y no en service.css desde que
   el bloque lo pinta también la página de la plataforma: escrito en una
   sola hoja, la de al lado se quedaba con el ritmo de sección entero y
   el mismo bloque medía distinto en cada página. */
#others{ padding-top:calc(var(--sec) / 2); padding-bottom:calc(var(--sec) / 2); }

/* Salida opcional debajo de la fila. Hoy solo la usa la página de la
   plataforma, para el sitio de producto. */
.others-link{ margin-top:32px; }

/* Y la de debajo de la parrilla de la prueba, que la usa la misma
   página para llevar a la red de partners. Enlace de texto y no botón:
   el botón de esa sección ya está arriba y lleva a proyectos, y dos
   botones en la misma sección son dos salidas compitiendo. */
.proof-cases-after{ margin-top:36px; }

.svc-full-link{ margin-top:28px; }


/* ------------------------------------------------------------
   404
   La única página de error del sitio, y la única que no es de
   nadie: la sirve todo el dominio, también las URLs de 2025.

   Reutiliza el hero de las páginas de servicio entero —.svc-hero,
   .svc-sub, .fwd— y lo único suyo es el aire de abajo, que el
   hero de servicio no lleva porque siempre tiene una sección
   detrás, y la fila de salidas.

   Las tres salidas en fila, y en columna cuando no caben. No son
   botones: son enlaces de avance, los mismos que reparten en todo
   el sitio, y aquí no hay ninguna acción principal que destacar
   sobre las otras dos.
   ------------------------------------------------------------ */
.e404{ padding-bottom:clamp(96px, 14vh, 160px); }

.e404-links{
  display:flex; flex-wrap:wrap; gap:16px clamp(28px, 4vw, 56px);
  margin-top:44px; padding-top:28px;
  border-top:1px solid var(--line);
}
@media (max-width:560px){
  .e404-links{ flex-direction:column; gap:14px; }
}