@charset "utf-8";
/* ==========================================================================
   ALLÓ 2026 — sistema visual

   Color principal: el papel cálido de la consultoría (#EBE6DD) con tinta
   Bold Midnight. Cuatro de las seis secciones van sobre ese papel; solo los
   resultados usan el midnight (una cifra necesita contraste para pesar) y el
   cierre usa el ember. Si se quiere el papel también ahí, es cambiar un token.

   Paleta del Brand Manual v1.0: Bold Midnight #172745 · Creative Ember
   #DA492A · Clear Frame #E6E6E6 · Warm Canvas #D4BA9F.
   ========================================================================== */

/* --- Tipografía ------------------------------------------------------------
   El manual solo autoriza Hector (exclusiva del logotipo, siempre el SVG
   oficial, nunca texto) y Neue Montreal para todo lo demás. Neue Montreal es
   de pago y ALLÓ no tiene licencia web: se sirve General Sans (Fontshare,
   libre comercial) declarada bajo el nombre "Neue Montreal", así que el día
   que haya licencia basta con cambiar el src.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Neue Montreal";
  src: url("/assets/fonts/general-sans-variable.woff2") format("woff2");
  font-weight: 200 700; font-style: normal; font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --paper: #ebe6dd;
  --paper-alt: #e3ddd1;
  --paper-card: #f3efe8;   /* tarjetas: un papel más claro que el fondo */
  --ink: #172745;
  --ink-muted: #55637a;
  --linea: rgba(23, 39, 69, .14);

  --ember: #da492a;
  --ember-cta: #d2431f;    /* relleno con texto blanco              4,6:1 */
  --ember-band: #b93b1d;   /* banda grande y estado hover           5,7:1 */
  --ember-deep: #b33a1f;   /* texto pequeño sobre papel             5,3:1 */
  --ember-bright: #f0765a; /* texto pequeño sobre midnight          5,3:1 */

  --frame: #e6e6e6;        /* texto principal sobre midnight       13,4:1 */
  --canvas: #d4ba9f;       /* voz editorial sobre midnight          7,8:1 */
  --linea-ink: rgba(230, 230, 230, .16);

  --display: "Neue Montreal", "General Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.5rem, 5vw, 4rem);
  --shell: 78rem;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
[hidden] { display: none !important; }

/* --- Fondo del hero -----------------------------------------------------------
   Dos capas, en este orden:
     1. la imagen difuminada del logotipo en relieve (240 px, ~1 kB), que es el
        fondo real y el que se ve si el vídeo no carga, no existe todavía o el
        visitante ha pedido menos movimiento;
     2. el brand film, si el archivo existe: el generador solo emite la
        etiqueta <video> cuando hay fichero, así que la página nunca pide un
        vídeo que no está.
   Encima va un velo de papel con degradado: opaco a la izquierda, donde se lee
   el titular en midnight, y translúcido a la derecha, que es donde el brief
   coloca toda la acción del metraje. El desenfoque se aplica aquí y no en el
   vídeo de origen, que se genera nítido a propósito.                        */
.fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--paper);
  pointer-events: none;
}
/* Capa 1: la imagen difuminada. Va atenuada porque es el suelo del fondo, no
   el protagonista; cuando hay vídeo queda tapada por él. */
.fondo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/marca/fondo-allo-difuminado.webp") center right / cover no-repeat;
  opacity: .62;
}
.fondo__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* scale compensa el borde blando que deja el desenfoque */
  transform: scale(1.06);
  filter: blur(7px) saturate(.88);
}
/* Capa 3: el velo de papel, que es lo que hace legible la tipografía encima.
   Tres degradados con un trabajo cada uno:
     · escrim superior — el menú va arriba a la derecha, justo donde el
       metraje se ve más; sin esto los enlaces en midnight pierden contraste;
     · escrim inferior — la franja de clientes cruza hasta el 87% del ancho,
       así que entra en la zona de acción del vídeo;
     · velo horizontal — opaco bajo el titular, translúcido a la derecha, que
       es donde el brief coloca las siluetas y el equipo.
   Queda una banda central-derecha donde la película se ve de verdad, que es
   exactamente la zona de acción principal del guion.                       */
.fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      var(--paper) 0%,
      rgba(235, 230, 221, .88) 9%,
      rgba(235, 230, 221, 0) 22%),
    linear-gradient(to top,
      var(--paper) 0%,
      rgba(235, 230, 221, .84) 17%,
      rgba(235, 230, 221, 0) 40%),
    linear-gradient(95deg,
      var(--paper) 0%,
      rgba(235, 230, 221, .93) 34%,
      rgba(235, 230, 221, .62) 62%,
      rgba(235, 230, 221, .44) 100%);
}
/* En vertical, «cover» recorta a los lados y se queda con el centro del
   fotograma — justo lo que el guion deja vacío a propósito. Se desplaza el
   encuadre hacia la zona de acción (58-80% del ancho). */
@media (max-width: 900px) {
  .fondo__video { object-position: 66% center; }
}

/* Menos movimiento: se queda la imagen fija, que ya es el mismo fondo. */
@media (prefers-reduced-motion: reduce) {
  .fondo__video { display: none; }
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-weight: 700; line-height: 1.08; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--ember-cta); outline-offset: 4px; border-radius: 2px; }
.on-ink :focus-visible { outline-color: var(--ember-bright); }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Registro de dato: versalitas y cifras tabulares, misma familia. */
/* Sin filete: los rótulos se sostienen solos con la versalita y el tracking. */
.eyebrow {
  color: var(--ember-deep);
  font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.on-ink .eyebrow { color: var(--ember-bright); }

/* --- Botón -------------------------------------------------------------------
   Pastilla con la flecha en su propio disco: el disco se desplaza al posarse
   encima, así el botón dice hacia dónde lleva antes de pulsarlo.           */
.btn {
  display: inline-flex; align-items: center; gap: .85rem;
  padding: .8rem .8rem .8rem 1.75rem;
  border: 0; border-radius: 999px;
  background: var(--ember-cta); color: #fff;
  font: inherit; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(23, 39, 69, .10), 0 12px 26px -14px rgba(210, 67, 31, .7);
  transition: background-color .2s ease, box-shadow .25s var(--ease), transform .2s var(--ease);
}
.btn:hover {
  background: var(--ember-band);
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(23, 39, 69, .12), 0 20px 36px -14px rgba(210, 67, 31, .8);
}
.btn__ico {
  width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: grid; place-items: center;
  transition: transform .3s var(--ease), background-color .2s ease;
}
.btn:hover .btn__ico { transform: translateX(4px); background: rgba(255, 255, 255, .3); }
.btn--claro { background: #fff; color: var(--ember-band); box-shadow: 0 1px 2px rgba(23, 39, 69, .14), 0 12px 26px -14px rgba(0, 0, 0, .5); }
.btn--claro:hover { background: #fff; }
.btn--claro .btn__ico { background: rgba(185, 59, 29, .14); }
.btn--claro:hover .btn__ico { background: rgba(185, 59, 29, .22); }

.enlace {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; text-decoration: none;
  color: var(--ember-deep);
  border-bottom: 2px solid currentColor; padding-bottom: .15rem;
}
.on-ink .enlace { color: var(--ember-bright); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__ico { transition: background-color .2s ease; }
  .btn:hover { transform: none; }
  .btn:hover .btn__ico { transform: none; }
}

/* --- Cabecera ----------------------------------------------------------------
   Fija durante toda la navegación. El estado por defecto es el compacto y con
   fondo, que es el legible sobre las fotos del portfolio: si el script no se
   ejecuta, la cabecera sigue leyéndose. `esta-arriba` solo la aligera cuando
   el visitante está en lo más alto de la página.                           */
.head__centinela { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.head {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: clamp(.7rem, 1.4vw, 1rem);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
  transition: padding-block .3s var(--ease), background-color .3s ease, border-color .3s ease;
}
.head.esta-arriba {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .head { transition: none; }
}
/* El anclaje tiene que dejar sitio a la cabecera fija. */
section[id] { scroll-margin-top: 5.5rem; }
.head__in { display: flex; align-items: center; gap: 1.5rem; }
.head__mark { display: inline-block; flex: none; }
.head__mark img { width: clamp(4.75rem, 8vw, 6.25rem); }
.head__nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1.1rem, 2.5vw, 2rem); }
.head__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.75rem); }
.head__link {
  font-size: .9375rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  padding-bottom: .25rem; border-bottom: 2px solid transparent;
  transition: border-color .18s ease;
}
.head__link:hover { border-color: var(--ember); }

/* El CTA de cabecera es el mismo botón en versión discreta: el protagonista
   sigue siendo el de la portada, que está a un palmo por debajo. */
.btn--head {
  padding: .45rem .45rem .45rem 1.1rem;
  font-size: .875rem;
  gap: .55rem;
  box-shadow: 0 1px 2px rgba(23, 39, 69, .10), 0 8px 18px -12px rgba(210, 67, 31, .6);
}
.btn--head .btn__ico { width: 1.75rem; height: 1.75rem; }
.btn--head .btn__ico svg { width: 16px; height: 16px; }

.btn__corta { display: none; }
.btn--head { white-space: nowrap; }

/* Con el botón dentro, la cabecera deja de caber de una tacada. */
@media (max-width: 880px) {
  .head__in { flex-wrap: wrap; row-gap: .9rem; }
  .head__nav { width: 100%; margin-left: 0; justify-content: space-between; }
}

/* En móvil los tres enlaces y el botón no caben juntos de forma legible: el
   botón sube a la fila del logotipo y los enlaces bajan a la suya. Apretados
   en una sola fila, el botón se estrujaba a 123 px y partía su texto en
   cuatro líneas, dejando una cabecera de 171 px que se comía el hero. */
@media (max-width: 560px) {
  .head__in { flex-wrap: nowrap; row-gap: 0; }
  .head__nav { width: auto; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; row-gap: .75rem; }
  .btn--head { order: 1; font-size: .8125rem; padding-left: .95rem; }
  .btn--head .btn__ico { width: 1.5rem; height: 1.5rem; }
  .head__links { order: 2; width: 100%; justify-content: space-between; gap: .9rem; }
  .head__link { font-size: .8125rem; }
  .btn__larga { display: none; }
  .btn__corta { display: inline; }
}

/* Entre 320 y 400 px, logo y CTA ocupan la primera fila y la navegación la
   segunda. Así ningún elemento fuerza un lienzo más ancho que el dispositivo. */
@media (max-width: 400px) {
  .head, .head.esta-arriba { padding-block: .7rem; }
  .head__in { position: relative; flex-wrap: wrap; row-gap: .7rem; }
  .head__mark img { width: 4.75rem; }
  .head__nav { width: 100%; margin-left: 0; flex-wrap: nowrap; gap: .65rem; }
  .head__links { order: 0; width: auto; flex: 1; gap: .45rem; justify-content: space-between; }
  .head__link { font-size: .75rem; }
  .head__idioma { flex: none; font-size: .75rem; }
  .btn--head {
    position: absolute; top: -.2rem; right: 0;
    font-size: .75rem; padding: .35rem .35rem .35rem .8rem; gap: .4rem;
  }
  .btn--head .btn__ico { width: 1.4rem; height: 1.4rem; }
}

/* --- Portada ------------------------------------------------------------------
   Alineada a la izquierda: centrada parecería un «próximamente», y esto es una
   afirmación.                                                              */
.portada {
  min-height: calc(100vh - 7rem);
  min-height: calc(100svh - 7rem);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(2rem, 5vh, 4rem) clamp(2rem, 4vh, 3rem);
}
/* El titular de la portada usa la misma composición de cartel que las
   cabeceras de sección —entrada en peso ligero y última palabra en el máximo—
   pero SIN moverse del sitio: sigue alineado a la izquierda y con su medida.
   Lo pidió así el usuario: el estilo sí, la posición no. */
.portada__frase {
  font-size: clamp(2.1rem, 5.4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  /* 22ch y no 17: el titular tiene que caer en DOS líneas exactas —«Marketing
     digital que genera» arriba y «resultados» abajo—, y a 17ch la primera no
     cabía y se partía en dos, dejando tres. La primera línea pide 887 px a 68
     px de cuerpo; 22ch dan 942. La medida está en ch, así que escala con el
     cuerpo y el corte se mantiene en todos los anchos donde manda el vw. */
  max-width: 22ch;
}
/* Sin versalitas: la portada va en caja normal y las cabeceras de sección en
   mayúsculas, así que el titular no puede heredar el tamaño relativo del
   remate sin más — a 1.08em sobre 68 px se desbordaba la medida. */
/* La negrita dentro del titular. Va por palabra y no por línea: en la portada
   la segunda línea es «que genera resultados» y solo la última palabra pesa. */
.portada__frase b, .cab__titular b { font-weight: 700; letter-spacing: -.045em; }
.portada__frase .cab__peso { font-size: 1em; letter-spacing: -.045em; }
.portada__desc {
  margin-top: clamp(1rem, 2vw, 1.375rem);
  color: var(--ink-muted);
  font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.portada__cta { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* Muro de clientes: se renderiza con el logotipo cuando exista autorización
   y archivo; mientras tanto, el nombre en tipografía, que es lo honesto. */
/* El muro se ancla al fondo de la portada. `margin-top: auto` estaba puesto
   aquí, sobre .muro, y no hacía nada: .muro no es hijo del flex de .portada
   sino que va dentro del segundo .shell, y un margen automático solo empuja
   contra su propio contenedor flex. El resultado era que la portada repartía
   su espacio sobrante con `justify-content: center` —119 px por arriba y 154
   por abajo— y dejaba un vacío entre el muro y la sección siguiente que no
   había pedido nadie. El margen se mueve al elemento que sí es hijo del flex. */
.portada > .shell + .shell { margin-top: auto; }
.muro { padding-top: clamp(2.5rem, 6vw, 4rem); }
.muro__h { color: var(--ink-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
/* El margen solo hace falta cuando hay rótulo encima. */
.muro__h + .muro__list { margin-top: 1.25rem; }
/* Rejilla y no flex: con flex hay que acertar el ancho de caja a mano para que
   quepan todos en una fila, y el día que entre un cliente más se descuadra
   sola —seis arriba y dos sueltas debajo—. Con auto-fit las columnas se
   reparten el ancho disponible a partes iguales, salgan ocho o salgan diez, y
   en móvil bajan a tres por fila sin tocar nada. */
.muro__list {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(4.75rem, 12vw, 8.5rem), 1fr));
  align-items: center; justify-items: center;
  gap: clamp(.8rem, 2vw, 1.15rem) clamp(.9rem, 2.4vw, 2rem);
}
/* Sin opacidad: al 62% los nombres caían a 3,9:1 y no pasaban AA. Un color
   con contraste conocido es más discreto y además legible. */
.muro__list li { font-size: clamp(.95rem, 1.5vw, 1.125rem); font-weight: 600; letter-spacing: -.01em; color: var(--ink-muted); }
/* La altura de los logotipos la fija el bloque «Muro de clientes con
   logotipo» del final, que la reparte según la proporción de cada uno. Aquí
   no se toca: `.muro__list img` gana en especificidad a `.muro__logo--alto` y
   dejaba los ocho a la misma altura. */

/* --- Qué hacemos -----------------------------------------------------------------
   Sin cajas, sin fotografía y sin panel: la sección se ordena solo con aire y
   con la marca de línea de cada servicio. Once nombres necesitan respirar más
   que decorarse; lo único que se dibuja es lo que ayuda a distinguirlos.

   Las áreas van numeradas porque aquí el orden informa: primero se decide y
   después se ejecuta.                                                       */
/* --- Qué hacemos: dos áreas, dos materiales ---------------------------------
   Antes era una lista con un icono de línea por servicio, todo al mismo peso
   sobre el mismo papel. Correcta y plana. Aquí las dos áreas dejan de ser dos
   apartados iguales y pasan a ser dos materiales: Estrategia sobre papel
   claro, Marketing de resultados sobre midnight, que es el color que el
   sistema ya reserva a los resultados. El salto de material dice lo mismo que
   la máxima —primero se decide, después se ejecuta— sin numerar 01 y 02.
   -------------------------------------------------------------------------- */
/* El hueco entre dos secciones NO es el relleno de una: es la suma del inferior
   de la de arriba y el superior de la de abajo. Con 6,5 rem por lado salían
   216 px entre la última tarjeta y el rótulo del portfolio, que es lo que se
   veía como un vacío. Aquí se reparte a la mitad por los dos lados y el mismo
   valor lo lleva .portfolio arriba, así que el hueco lo ponen las dos a
   partes iguales en vez de sumarse dos veces entero. */
.hacemos { padding-block: clamp(2.25rem, 4.5vw, 4rem); border-top: 1px solid var(--linea); }

/* Cabecera centrada, en composición de cartel. Antes iba alineada a la
   izquierda, en el mismo eje que el resto de la página; ahora el bloque se
   centra sobre sí mismo y los paneles de abajo siguen en su eje. El contraste
   entre un titular centrado y dos columnas alineadas es intencionado: separa
   la declaración de la lista.

   La referencia que pidió el usuario alterna una romana fina con una grotesca
   negra. Aquí no se puede: el manual autoriza una sola familia. El salto lo da
   el peso —y hay que darlo hacia abajo, porque los h2 ya salen a 700, que es
   el máximo del variable (200-700). Así que la entrada baja a 400 y la palabra
   de remate se queda en 700.                                                */
.cab { text-align: center; }
.cab__rotulo {
  margin-bottom: clamp(.75rem, 1.6vw, 1rem);
  color: var(--ember-deep);
  font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}

.cab__titular {
  font-size: clamp(2rem, 5.5vw, 4rem);
  text-transform: uppercase; line-height: 1.02;
  max-width: 20ch; margin-inline: auto;
}
/* Líneas de entrada: peso 400 y el tracking suelto del -.03em que traen los
   h2. Apretadas y en negrita competían con la palabra de remate en vez de
   prepararla. */
.cab__linea {
  display: block;
  font-weight: 400; letter-spacing: -.005em;
}
/* La palabra de remate. Un punto más grande que la entrada y con el tracking
   cerrado: es lo que en la referencia hace la grotesca negra, y lo que da el
   bloque compacto. */
.cab__peso {
  display: block;
  font-weight: 700; letter-spacing: -.045em;
  font-size: 1.08em;
}

/* Entradilla. Sustituye a la máxima, que iba en versalitas de .8rem repartida
   en tres pasos con filete ember: era un rótulo, y lo que hace falta aquí es
   una respuesta.

   Medida ancha —82ch— por petición del usuario: en tres líneas largas y no en
   cinco cortas. Es más de lo que se recomienda para leer de corrido, y en un
   párrafo centrado el ojo tiene que buscar el arranque de cada línea; se
   compensa con `text-wrap: balance`, que reparte las tres líneas a lo ancho en
   vez de dejar la última coja. Por debajo de 900 px la medida la marca el
   ancho de pantalla, así que el problema no se traslada al móvil.            */
.cab__texto {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-inline: auto;
  max-width: 82ch;
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink-muted);
  text-wrap: balance;
}
/* La palabra de remate de la frase. Sube al peso de énfasis del sistema y a la
   tinta plena: sobre el gris del párrafo, el salto de color hace tanto como el
   de peso, y sin él una negrita a 19 px casi no se ve. */
.cab__texto b { font-weight: 600; color: var(--ink); }

/* --- Rejilla de servicios: una tarjeta por servicio -------------------------
   Antes eran dos paneles con una lista dentro. El usuario pidió (3-sep-2026)
   la forma de una referencia impresa: tarjetas oscuras, número arriba, nombre
   grande, etiquetas en pastilla y un botón circular. Se adopta la forma con la
   paleta de ALLÓ —midnight en vez de negro, ember en el botón— y con una
   diferencia de fondo: las etiquetas no son palabras de relleno, son los
   clientes donde ese servicio se ha aplicado.

   El radio de estas tarjetas es 14 px y no los 2 px del resto del sistema. Es
   una excepción consciente: la esquina redonda es la mitad del carácter de la
   referencia, y a 2 px la rejilla vuelve a ser la de antes con otro color.
   -------------------------------------------------------------------------- */
.grupos { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

.grupo__cab { display: flex; flex-direction: column; align-items: center; text-align: center; }
.grupo__nombre {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  text-transform: uppercase; letter-spacing: -.02em; line-height: 1.15;
  padding-top: 1.1rem; position: relative;
}
/* El mismo filete corto que llevaban los paneles, ahora centrado sobre el
   nombre porque el grupo entero se lee centrado. */
.grupo__nombre::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2.5rem; height: 3px; background: var(--ember);
}
.grupo__texto {
  margin-top: .75rem; max-width: 46ch;
  font-size: .9375rem; line-height: 1.55; color: var(--ink-muted);
}

/* Cinco por línea, por petición del usuario, y los dos grupos tienen ahora
   exactamente cinco servicios: cada uno ocupa una fila entera y no queda
   ninguna tarjeta descolgada.

   Las columnas van por puntos de ruptura explícitos y no con `auto-fit`. Con
   auto-fit el número de columnas lo decide el ancho mínimo, y para que
   entraran cinco había que bajarlo tanto que en pantallas medianas salían
   cinco tarjetas estrujadas. Aquí el salto a cinco espera a los 1240 px, que
   es donde una tarjeta se queda en ~230 px y el nombre todavía cabe.        */
.tsvs {
  list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0;
  display: grid; gap: clamp(.6rem, 1.2vw, .9rem);
  grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .tsvs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .tsvs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .tsvs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* En /servicios/ la tarjeta lleva la descripción desarrollada, no el resumen
   de una línea: a cinco por fila el texto quedaba en una columna de 212 px y
   quince líneas. Tres por fila y el nombre a dos líneas reservadas, como en la
   portada. */
.tsvs--pagina { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px)  { .tsvs--pagina { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tsvs--pagina { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tsvs--pagina .tsv__nombre { font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.tsvs--pagina .tsv__resumen { font-size: .875rem; }

.tsv {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 16rem;
  padding: clamp(1rem, 1.4vw, 1.15rem);
  border-radius: 14px;
  background: var(--ink); color: var(--frame);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tsv__n {
  font-size: .75rem; font-weight: 600; letter-spacing: .12em;
  color: var(--canvas); font-variant-numeric: tabular-nums;
}
/* El nombre reserva SIEMPRE dos líneas, tenga una o dos.

   Sin esa reserva, «Marketing de resultados» —con nombres de hasta tres
   líneas— daba tarjetas de 322 px y «Consultoría» —todos de una línea— de 274.
   El subgrid alinea dentro de cada rejilla, pero son dos rejillas distintas y
   no se hablan entre ellas. Con dos líneas fijas los dos grupos miden igual.

   Y el cuerpo baja de 20,8 a 18 px porque con el anterior «Analítica y
   optimización continua» e «Identidad visual y producción creativa» no cabían
   en dos líneas a 212 px de tarjeta: la reserva se habría quedado corta y el
   descuadre volvería por la puerta de atrás.                                */
.tsv__nombre {
  margin-top: .9rem;
  font-size: clamp(1rem, 1.25vw, 1.125rem); font-weight: 500;
  letter-spacing: -.025em; line-height: 1.14;
  min-height: 2.28em;
}
.tsv__nombre a {
  color: inherit; text-decoration: none;
  transition: color .22s ease;
}
/* Enlace estirado: el ancla cubre la tarjeta entera, así que se puede pulsar
   en cualquier punto sin anidar un <a> dentro de otro ni repetir el enlace en
   el botón. Las etiquetas son texto, no enlaces, y por eso no estorban. */
.tsv__nombre a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tsv__resumen {
  margin-top: .6rem;
  font-size: .8125rem; line-height: 1.45; color: var(--canvas);
}

/* El botón circular va al pie de la tarjeta, empujado por el margen automático
   para que todas las tarjetas lo alineen abajo aunque tengan distinto texto.
   El «+» es decorativo (aria-hidden): quien navega con teclado o lector llega
   por el enlace del nombre, que ya cubre toda la tarjeta. */
.tsv__mas {
  margin-top: auto; align-self: flex-start;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ember); color: #fff;
  font-size: 1.5rem; line-height: 1;
  transition: transform .3s var(--ease), background-color .22s ease;
}

/* Alineación entre tarjetas de la misma fila.

   Los nombres ocupan una, dos o tres líneas —«Paid media» contra «Identidad
   visual y producción creativa»—, así que el resumen de cada tarjeta arrancaba
   a una altura distinta y la fila se leía descuadrada.

   Se arregla con subgrid: la tarjeta deja de repartir su propio alto y toma
   las cuatro filas de la rejilla madre, que se dimensionan con el contenido
   más alto de toda la fila. Así el número, el nombre, el resumen y el botón
   caen a la misma altura en las cinco tarjetas, sin números mágicos y sin
   depender del ancho: a tres columnas o a dos se recalcula solo.

   El flex de arriba se queda como base para el navegador que no tenga subgrid
   —Safari lo trae desde la 16 y Chrome desde la 117—: allí las tarjetas siguen
   bien formadas, solo que descuadradas como hasta ahora.                    */
@supports (grid-template-rows: subgrid) {
  .tsv {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    min-height: 0;
  }
  /* En rejilla el margen automático ya no empuja: la fila del botón es la
     última y se alinea contra su borde inferior. */
  .tsv__mas { margin-top: 0; align-self: end; }
}

.tsv:hover, .tsv:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(23, 39, 69, .75);
}
.tsv:hover .tsv__nombre a, .tsv:focus-within .tsv__nombre a { color: var(--ember-bright); }
.tsv:hover .tsv__mas, .tsv:focus-within .tsv__mas { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .tsv, .tsv__mas, .tsv__nombre a { transition: none; }
  .tsv:hover, .tsv:focus-within { transform: none; }
  .tsv:hover .tsv__mas { transform: none; }
}

/* --- Portfolio -----------------------------------------------------------------
   Antes era una lista de titulares sobre midnight. Ahora una tarjeta por caso
   con su fotografía: el trabajo se enseña, no se enumera. La sección va sobre
   el papel oscuro y las tarjetas sobre el claro, para que se despeguen sin
   necesidad de sombras.                                                     */
/* Mismo relleno arriba y abajo. El inferior estuvo un tiempo al doble, con el
   argumento de que debajo va «Trabaja con nosotros» sobre el mismo papel
   --paper-alt y sin cambio de color que marque el corte, así que el aire era
   lo único que separaba. En pantalla no se sostenía: sumado al relleno
   superior de la sección siguiente y al margen del botón daba 164 px, y lo que
   parecía era que la sección se había quedado sin terminar. */
.portfolio { background: var(--paper-alt); padding-block: clamp(2.25rem, 4.5vw, 4rem); }
/* --- Portfolio en franja (home) ---------------------------------------------
   Dos columnas: el texto a la izquierda y una fila de tarjetas altas a la
   derecha que se sale por el borde derecho y se arrastra. Es la referencia
   editorial que pidió el usuario (3-sep-2026), y encaja con lo que la sección
   hace en la home: enseñar que hay casos, no listarlos todos. El catálogo
   entero sigue en /portfolio/, con su rejilla y sus métricas.
   -------------------------------------------------------------------------- */
/* La franja va debajo de la cabecera y a todo el ancho: la cabecera se quedó
   centrada y arriba, como en «Qué hacemos». Estuvo un rato en columna a la
   izquierda —la composición de la referencia—, y el usuario la devolvió al
   centro.

/* El marco sangra hasta los DOS bordes de la ventana: la franja ocupa el ancho
   entero de la página, no solo el trozo que va del margen izquierdo del texto
   al borde derecho. Antes sangraba solo por la derecha y se leía como una fila
   descolgada hacia ese lado.

   El cálculo tiene dos casos y `min()` elige: cuando la ventana es más estrecha
   que el shell basta con anular el gutter; cuando es más ancha hay que retirar
   además la mitad del margen que el shell deja a cada lado. Sin el `min()`, la
   segunda fórmula sale POSITIVA por debajo de los 1248 px del shell y empuja la
   franja hacia fuera en vez de sangrarla — barra de scroll horizontal en todo
   el documento, y solo entre 1000 y 1248 px, que es la franja de anchos que no
   se mira nunca en un monitor grande. */
.tira__marco {
  min-width: 0;
  /* Aire entre el párrafo y la franja: la cabecera es texto centrado y las
     tarjetas empiezan pegadas al borde de la ventana, así que sin separación
     la primera tarjeta parecía colgar del final del párrafo. */
  margin-top: clamp(2rem, 4vw, 3.25rem);
  margin-inline: min(calc(-1 * var(--gutter)),
                     calc((var(--shell) - 100vw) / 2 - var(--gutter)));
}

.tira {
  list-style: none; margin: 0; padding: 0 0 .5rem;
  display: flex; gap: clamp(.75rem, 1.5vw, 1rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.tira__item { flex: 0 0 clamp(13rem, 20vw, 17rem); scroll-snap-align: start; }

/* Tarjeta alta: 2:3, como la referencia. La proporción la fija aspect-ratio y
   no una altura suelta, así todas miden igual salgan diez o salgan tres. */
.tcaso {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%; aspect-ratio: 2 / 3;
  border-radius: 10px; overflow: hidden;
  text-decoration: none;
  transition: transform .3s var(--ease);
}
.tcaso--clara { background: var(--paper-card); color: var(--ink); }
.tcaso--oscura { background: var(--ink); color: var(--frame); }

/* El número con barra va sobre el fondo de la tarjeta, no encima de la foto.
   Probado al revés —blanco en modo difference sobre la imagen— y descartado:
   estas fotos vienen de los PDF de marca con encuadres y luminancias muy
   distintas, así que el número era legible en unas tarjetas y se perdía en
   otras. Sobre el papel o el midnight de la tarjeta se lee siempre igual. */
.tcaso__n {
  flex: none; padding: .8rem .9rem .55rem;
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
.tcaso--oscura .tcaso__n { color: var(--canvas); }

.tcaso__foto { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.tcaso__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcaso__img--vacia { display: block; width: 100%; height: 100%; background: var(--paper-alt); }

/* El texto va al pie, sobre el fondo de la tarjeta y no sobre la foto: encima
   de una fotografía cualquiera el contraste depende del recorte, y aquí las
   fotos vienen de los PDF de marca con encuadres muy distintos. */
.tcaso__cuerpo {
  flex: none; padding: .85rem .9rem 1rem;
  display: flex; flex-direction: column; gap: .3rem;
}
/* Una línea y punto: el rótulo lleva la marca corta, que cabe, y la reserva de
   alto impide que un nombre más largo del previsto le robe altura a la foto. */
.tcaso__cliente {
  font-size: .625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ember-deep);
  min-height: 1.4em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
}
.tcaso--oscura .tcaso__cliente { color: var(--ember-bright); }
/* Tres líneas, ni más ni menos: recortadas por arriba y reservadas por abajo.
   Sin la reserva, un titular corto encoge el cuerpo y estira la foto, y como
   el alto de la tarjeta lo fija aspect-ratio, las fotos de la fila acababan
   con diez altos distintos. Con las tres líneas fijas, todas las fotos miden
   igual y la franja se lee como una sola pieza. */
.tcaso__titular {
  font-size: .875rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  min-height: 3.9em;
}

/* --- Las mismas tarjetas, en dos columnas y grandes (/portfolio/) -----------
   La página del catálogo usa el lenguaje de la franja de la home, no otro: la
   diferencia es el tamaño y que aquí caben la cifra con su periodo y su
   fuente, que en una tarjeta de 272 px no entraban.

   Sin `aspect-ratio`: a dos columnas la tarjeta mide ~610 px de ancho y la
   proporción 2:3 de la home la habría dejado en 915 px de alto, una tarjeta
   por pantalla. Aquí manda la foto —3:2, que es la proporción en la que se
   extrajeron de los PDF de marca— y el cuerpo crece con su texto.

   El subgrid alinea por parejas: la foto y el cuerpo de las dos tarjetas de
   una fila toman el alto de la más alta, así que ni las fotos ni los textos
   bailan. Hace falta porque solo 4 de los 10 casos publican cifra y sin esto
   la tarjeta con dato sería más alta que la de al lado.                     */
.casos-duo {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .casos-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.casos-duo .tira__item { display: contents; }
.casos-duo .tcaso {
  aspect-ratio: auto; height: auto;
  border-radius: 14px;
}
.casos-duo .tcaso__foto { flex: none; aspect-ratio: 3 / 2; }
.casos-duo .tcaso__n { padding: 1.1rem 1.25rem .7rem; font-size: .75rem; }
.casos-duo .tcaso__cuerpo { padding: 1.1rem 1.25rem 1.35rem; gap: .45rem; }
.casos-duo .tcaso__cliente { font-size: .6875rem; }
.casos-duo .tcaso__titular {
  font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.25;
  -webkit-line-clamp: 3; min-height: 3.75em;
}

/* La cifra, con su periodo y su fuente debajo. Es el mismo registro de dato
   que usa la tarjeta apaisada: cifra grande, etiqueta al lado y la
   procedencia en voz baja. Sin fuente y periodo no se imprime — lo impide
   metrica_publicable() antes de llegar aquí. */
.tcaso__dato { display: block; margin-top: .5rem; }
.tcaso__dato b {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -.03em;
  color: var(--ember-deep);
}
.tcaso--oscura .tcaso__dato b { color: var(--ember-bright); }
.tcaso__dato > span { font-size: .8125rem; font-weight: 600; }
.tcaso__dato em {
  display: block; margin-top: .15rem;
  font-style: normal; font-size: .6875rem; letter-spacing: .04em;
  color: var(--ink-muted);
}
.tcaso--oscura .tcaso__dato em { color: var(--canvas); }

@supports (grid-template-rows: subgrid) {
  @media (min-width: 760px) {
    .casos-duo { grid-auto-rows: auto; }
    .casos-duo .tcaso { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
  }
}

.tcaso:hover, .tcaso:focus-visible { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .tcaso { transition: none; }
  .tcaso:hover, .tcaso:focus-visible { transform: none; }
}

.portfolio__grid {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
}
.portfolio__foot { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

.caso {
  display: flex; flex-direction: column;
  background: var(--paper-card);
  border: 1px solid var(--linea);
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s ease;
}
.caso:hover, .caso:focus-visible { transform: translateY(-3px); border-color: var(--ember); }

.caso__marco { display: block; overflow: hidden; background: var(--paper-alt); }
.caso__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease); }
.caso:hover .caso__img { transform: scale(1.04); }
.caso__img--vacia { display: block; width: 100%; aspect-ratio: 4 / 3; }

.caso__cuerpo { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.1rem, 2.2vw, 1.5rem); flex: 1; }
.caso__meta {
  color: var(--ember-deep);
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.caso__titular { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; }

/* La cifra nunca va sola: periodo y fuente forman parte de la pieza, no son
   una nota al pie. Es lo que separa un resultado de un eslogan. */
.caso__dato { margin-top: .2rem; padding-top: .85rem; border-top: 1px solid var(--linea); }
.caso__dato b {
  display: block;
  font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.caso__dato span { display: block; margin-top: .3rem; font-size: .875rem; color: var(--ink-muted); line-height: 1.35; }
.caso__dato em { display: block; margin-top: .55rem; font-style: normal; font-size: .75rem; color: var(--ink-muted); line-height: 1.4; }

.caso__ver {
  margin-top: auto; padding-top: .9rem;
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--ember-deep); font-size: .875rem; font-weight: 600;
}
.caso__arrow { transition: transform .3s var(--ease); }
.caso:hover .caso__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .caso, .caso__img, .caso__arrow { transition: none; }
  .caso:hover { transform: none; }
  .caso:hover .caso__img { transform: none; }
}

/* --- Testimonios -------------------------------------------------------------------- */
.testi { background: var(--paper-alt); padding-block: clamp(3.5rem, 9vw, 7rem); }
.testi__titulo { margin-top: 1.5rem; font-size: clamp(1.7rem, 3.8vw, 2.9rem); max-width: 20ch; }
.testi__grid { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; }
.cita { background: var(--paper); border-top: 3px solid var(--ember); padding: clamp(1.5rem, 3vw, 2rem); }
.cita__texto { font-size: 1.0625rem; line-height: 1.5; }
.cita__quien { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linea); font-size: .875rem; color: var(--ink-muted); }
.cita__quien b { display: block; color: var(--ink); font-weight: 600; }

/* --- Cierre --------------------------------------------------------------------------- */
.cierre { background: var(--ember-band); color: #fff; padding-block: clamp(3.5rem, 8vw, 6rem); text-align: center; }
.cierre__titulo { font-size: clamp(2rem, 5vw, 3.5rem); text-transform: uppercase; letter-spacing: -.025em; max-width: 18ch; margin-inline: auto; }
/* Con cortes escritos a mano manda el autor, no la medida: la caja de 18ch
   volvería a partir las líneas por su cuenta. Cada trozo va en su propio
   bloque y sigue pudiendo replegarse en pantallas estrechas. */
.cierre__titulo--lineas { max-width: none; }
.cierre__titulo--lineas span { display: block; }
/* Medida ancha, como la entradilla de «Qué hacemos» y por la misma razón: a
   46ch la frase caía en tres líneas y la banda crecía a lo alto en vez de a lo
   ancho, teniendo el ancho libre al lado. `balance` reparte las líneas para que
   la última no quede descolgada, que centrada se nota mucho. */
.cierre__texto {
  margin: 1rem auto 0; max-width: 82ch; font-size: 1.125rem;
  text-wrap: balance;
}
.cierre__cta { margin-top: 2.25rem; }

/* --- Entrada ---------------------------------------------------------------------------
   Solo desplazamiento, nunca opacidad: una opacidad 0 que no se revierta deja
   texto invisible. Probado y descartado en este proyecto, no revertir.      */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: sube .75s var(--ease) both; }
  .entra--2 { animation-delay: .10s; }
  .entra--3 { animation-delay: .20s; }
  @keyframes sube { from { transform: translateY(18px); } to { transform: none; } }
}

/* --- Pie -----------------------------------------------------------------------
   Cierra la página en midnight, después de la banda ember: papel → ember →
   tinta. Sobre el midnight el texto va en Warm Canvas, que es el color del
   manual que da calidez sin perder contraste (7,8:1).                      */
.pie { background: var(--ink); color: var(--frame); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.pie__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  /* Puntos de ruptura explícitos en vez de auto-fit. Con auto-fit el pie
     desbordaba a 375 px: la pista fija de 15rem más la repetida de 10rem
     suman más que el ancho disponible, y `repeat(auto-fit, …)` genera
     siempre una pista como mínimo, así que no llegaba a colapsar. Empujaba
     el documento entero a 461 px de ancho. */
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .pie__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pie__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr 1.2fr; } }
.pie__marca img { width: clamp(6rem, 10vw, 7rem); }
.pie__claim { margin-top: 1.25rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.pie__desc { margin-top: .6rem; max-width: 30ch; color: var(--canvas); font-size: .9375rem; line-height: 1.5; }
.pie__social { margin-top: 1.25rem; display: flex; gap: 1.25rem; }
.pie__social a { color: var(--canvas); font-size: .875rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: .1rem; }
.pie__social a:hover { color: var(--ember-bright); border-bottom-color: currentColor; }

.pie__h {
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember-bright); margin: 0 0 1rem;
}
.pie__lista li { padding-block: .32rem; }
.pie__lista a { color: var(--canvas); font-size: .9375rem; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: .1rem; }
.pie__lista a:hover { color: var(--ember-bright); border-bottom-color: currentColor; }
.pie__lista--sedes li { padding-block: .5rem; }
.pie__sede { font-style: normal; color: var(--canvas); font-size: .875rem; line-height: 1.5; }
.pie__sede b { display: block; color: var(--frame); font-weight: 600; font-size: .9375rem; }
.pie__mercados { margin-top: 1rem; color: var(--canvas); font-size: .8125rem; }

.pie__legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea-ink);
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem;
  font-size: .8125rem; color: var(--canvas);
}
.pie__legales { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.pie__legales a { color: var(--canvas); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: .1rem; }
.pie__legales a:hover { color: var(--ember-bright); border-bottom-color: currentColor; }
.pie :focus-visible { outline-color: var(--ember-bright); }

/* --- Trabaja con nosotros --------------------------------------------------------
   Va justo antes del cierre: es una audiencia secundaria y no debe cortar el
   recorrido comercial. Sobre papel oscuro, para separarla de las rutas.    */
/* --- Trabaja con nosotros: banda, no sección ---------------------------------
   Ocupaba 1.378 px, el 18,7% de la home y más que «Qué hacemos», por seis
   campos de formulario que casi nadie rellena en una primera visita. Una
   página comercial no puede dedicar una pantalla y media a reclutar. Ahora es
   una banda de dos columnas con el formulario plegado en un <details>: a un
   clic para quien viene a eso, invisible para quien no.                     */
.trabaja { background: var(--paper-alt); padding-block: clamp(2.25rem, 4.5vw, 3.25rem); }
.trabaja__banda { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 900px) {
  .trabaja__banda { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; column-gap: clamp(2rem, 5vw, 4rem); }
  .trabaja__accion { justify-self: end; width: 100%; max-width: 26rem; }
}
.trabaja__titular {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  text-transform: uppercase; letter-spacing: -.02em; max-width: 20ch;
}

/* El resumen se comporta como un botón secundario: es una acción, y a la vez
   el título de lo que hay dentro. Sin marcador nativo, que en Safari y en
   Chrome se dibujan distinto. */
.trabaja__desplegable { border-top: 1px solid var(--linea); }
.trabaja__abrir {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; cursor: pointer; list-style: none;
  font-family: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); transition: color .2s ease;
}
.trabaja__abrir::-webkit-details-marker { display: none; }
.trabaja__abrir:hover { color: var(--ember-deep); }
.trabaja__abrir:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.trabaja__arrow {
  flex: none; color: var(--ember-deep);
  transform: rotate(90deg); transition: transform .25s var(--ease);
}
.trabaja__desplegable[open] .trabaja__arrow { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .trabaja__arrow { transition: none; } }
/* .trabaja__h sigue en uso: es el rótulo del formulario de candidatura. */
.trabaja__h { margin-bottom: 1.25rem; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-deep); }

/* Estilos del párrafo de entrada y de la lista de perfiles, retirados de la
   web el 30-ago-2026. El contenido está guardado en trabaja._retirado30ago2026
   dentro de home.json y el generador lo vuelve a pintar en cuanto esas claves
   regresen, así que estas reglas se quedan para que restaurarlo no obligue a
   rehacer los estilos. Si se decide que no vuelve, se borran estas ocho
   líneas y las claves del JSON de una vez. */
.trabaja__texto { margin-top: 1.25rem; max-width: 58ch; color: var(--ink-muted); font-size: clamp(1rem, .95rem + .35vw, 1.125rem); line-height: 1.55; }
.trabaja__perfiles { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.perfiles { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 640px) { .perfiles { grid-template-columns: repeat(2, 1fr); } }
.perfiles li { background: var(--paper-card); padding: clamp(1.1rem, 2.2vw, 1.5rem); }
.perfiles b { display: block; font-size: 1.0625rem; letter-spacing: -.015em; }
.perfiles span { display: block; margin-top: .5rem; color: var(--ink-muted); font-size: .9375rem; line-height: 1.5; }

.trabaja__vacantes { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--linea); }
.vacante { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding-block: 1.15rem; border-bottom: 1px solid var(--linea); text-decoration: none; transition: padding-inline .2s var(--ease), background-color .2s ease; }
.vacante:hover, .vacante:focus-visible { background: var(--paper-card); padding-inline: 1rem; }
.vacante__puesto { display: block; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.vacante__meta { display: block; grid-column: 1; margin-top: .3rem; color: var(--ink-muted); font-size: .875rem; }
.vacante__arrow { color: var(--ember-deep); transition: transform .3s var(--ease); }
.vacante:hover .vacante__arrow { transform: translateX(4px); }

.trabaja__como { margin-top: 1rem; max-width: 46ch; font-size: .9375rem; font-weight: 500; color: var(--ink-muted); line-height: 1.55; }
.trabaja__cta { margin-top: 1.5rem; }
.trabaja__donde { margin-top: .25rem; color: var(--ink-muted); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) { .vacante, .vacante__arrow { transition: none; } }

/* --- Blog ------------------------------------------------------------------------
   Hoy no se renderiza: el acceso al blog es el enlace del pie. El estilo se
   deja escrito para que encender `mostrarEnHome` en contenido/blog.json baste
   para tenerla en pantalla.                                                */
.blog { padding-block: clamp(3.5rem, 9vw, 7rem); border-top: 1px solid var(--linea); }
.blog__titular { font-size: clamp(1.7rem, 3.8vw, 2.9rem); text-transform: uppercase; letter-spacing: -.02em; max-width: 20ch; }
.blog__texto { margin-top: 1.25rem; max-width: 58ch; color: var(--ink-muted); font-size: clamp(1rem, .95rem + .35vw, 1.125rem); line-height: 1.55; }
.blog__grid { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 700px) { .blog__grid { grid-template-columns: repeat(3, 1fr); } }
.post { display: flex; flex-direction: column; gap: .6rem; background: var(--paper-card); padding: clamp(1.25rem, 2.5vw, 1.75rem); text-decoration: none; transition: background-color .2s ease; }
.post:hover, .post:focus-visible { background: var(--paper); }
.post__fecha { color: var(--ember-deep); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.post__titulo { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.post__entrada { color: var(--ink-muted); font-size: .9375rem; line-height: 1.5; }
.blog__foot { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* --- Página de consultoría --------------------------------------------------------
   Formulario conversacional, una pregunta por pantalla. Todo el estado por
   pasos depende de la clase `es-pasos`, que la pone el script: sin JavaScript
   el formulario se ve entero y se puede enviar igual.                     */
.consulta { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); }
.consulta__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 940px) { .consulta__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.consulta__titulo { margin-top: 1.25rem; font-size: clamp(1.9rem, 4.2vw, 3rem); text-transform: uppercase; letter-spacing: -.025em; }
.consulta__sub { margin-top: .875rem; font-size: 1.125rem; font-weight: 600; color: var(--ember-deep); }
.consulta__valor { margin-top: 1.25rem; max-width: 46ch; color: var(--ink-muted); line-height: 1.6; }
.consulta__micro { margin-top: 1.5rem; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.consulta__caja { background: var(--paper-card); border: 1px solid var(--linea); padding: clamp(1.5rem, 3.5vw, 2.5rem); }

.form__dry { margin-bottom: 1.5rem; padding: .8rem 1rem; background: var(--paper-alt); border-left: 3px solid var(--ember); font-size: .875rem; }
.paso__contador { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--ember-deep); font-variant-numeric: tabular-nums; }
.paso__contador span { color: var(--ink-muted); }
.paso__pregunta { margin-top: .6rem; font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.paso__ayuda { margin-top: .6rem; color: var(--ink-muted); font-size: .9375rem; line-height: 1.5; }
.paso { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.form:not(.es-pasos) .paso + .paso { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--linea); }

.campo { margin-top: 1.25rem; }
.campo__label { display: block; margin-bottom: .4rem; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.campo__control {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--linea); border-radius: 2px;
  padding: .8rem .9rem;
  transition: border-color .18s ease;
}
.campo__control:hover { border-color: var(--ink-muted); }
.campo__control:focus-visible { border-color: var(--ember-cta); }
.campo--opciones { display: grid; gap: .5rem; }
.opcion { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; background: var(--paper); border: 1px solid var(--linea); border-radius: 2px; cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.opcion:hover { border-color: var(--ember); }
.opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion__marca { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; border: 2px solid var(--ink-muted); border-radius: 50%; position: relative; transition: border-color .18s ease; }
.opcion__marca::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ember-cta); transform: scale(0); transition: transform .18s var(--ease); }
.opcion input:checked ~ .opcion__marca { border-color: var(--ember-cta); }
.opcion input:checked ~ .opcion__marca::after { transform: scale(1); }
.opcion:has(input:checked) { border-color: var(--ember-cta); background: var(--paper-alt); }
.opcion input:focus-visible ~ .opcion__marca { outline: 3px solid var(--ember-cta); outline-offset: 3px; }
.opcion__texto { line-height: 1.35; }

.form__cierre { margin-top: 1.75rem; }
.consent { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; font-size: .9375rem; line-height: 1.45; }
.consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent__marca { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; border: 2px solid var(--ink-muted); border-radius: 2px; position: relative; }
.consent__marca::after { content: ""; position: absolute; inset: 2px; background: var(--ember-cta); transform: scale(0); transition: transform .18s var(--ease); }
.consent input:checked ~ .consent__marca { border-color: var(--ember-cta); }
.consent input:checked ~ .consent__marca::after { transform: scale(1); }
.consent input:focus-visible ~ .consent__marca { outline: 3px solid var(--ember-cta); outline-offset: 3px; }

.form__barra { margin-top: 1.75rem; }
.form__progreso { height: 2px; background: var(--linea); overflow: hidden; }
.form__progreso span { display: block; height: 100%; width: 0; background: var(--ember-cta); transition: width .35s var(--ease); }
.form:not(.es-pasos) .form__progreso { display: none; }
.form__botones { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.btn-sec { font: inherit; font-weight: 600; font-size: .9375rem; color: var(--ink-muted); background: none; border: 0; padding: .7rem .25rem; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.btn-sec:hover { color: var(--ink); }
.form__botones .btn { margin-left: auto; }
.form:not(.es-pasos) .btn-sec, .form:not(.es-pasos) [data-accion="siguiente"] { display: none; }
.form__error:empty { display: none; }
.form__error { margin-top: 1rem; color: var(--ember-band); font-size: .9375rem; font-weight: 600; }

.gracias__titulo { margin-top: 1rem; font-size: clamp(1.5rem, 3vw, 2.1rem); text-transform: uppercase; letter-spacing: -.02em; }
.gracias__sub { margin-top: .875rem; font-size: 1.0625rem; }
.gracias__quien { margin-top: 1.25rem; color: var(--ink-muted); line-height: 1.6; }
.gracias__h { margin-top: 1.75rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-deep); }
.gracias__lista { margin-top: .875rem; }
.gracias__lista li { display: grid; grid-template-columns: 1.25rem 1fr; gap: .5rem; padding-block: .5rem; border-bottom: 1px solid var(--linea); color: var(--ink-muted); }
.gracias__lista li::before { content: "→"; color: var(--ember); font-weight: 600; }
.gracias__wa { margin-top: 1.5rem; font-size: .9375rem; }
.gracias__wa a { color: var(--ember-deep); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .form__progreso span, .opcion__marca::after, .consent__marca::after { transition: none; }
}

/* --- Páginas interiores ------------------------------------------------------------
   Todas comparten el bloque de entrada y heredan los componentes de la home,
   así que lo responsive ya viene resuelto de ahí.                          */
.entrada { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.entrada__titulo { margin-top: 1.25rem; font-size: clamp(1.9rem, 4.4vw, 3.1rem); text-transform: uppercase; letter-spacing: -.025em; max-width: 22ch; }
.entrada__texto { margin-top: 1.25rem; max-width: 58ch; color: var(--ink-muted); font-size: clamp(1rem, .95rem + .35vw, 1.125rem); line-height: 1.55; }

/* Servicios */
.areasPag { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem); }
.servicios { margin-top: clamp(1.75rem, 4vw, 2.5rem); display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 640px) { .servicios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .servicios { grid-template-columns: repeat(3, 1fr); } }
.servicios li { background: var(--paper-card); padding: clamp(1.1rem, 2.2vw, 1.6rem); }
.servicio__nombre { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.servicio__texto { margin-top: .6rem; color: var(--ink-muted); font-size: .9375rem; line-height: 1.5; }
.maximaPag { padding-block: 0 clamp(3rem, 7vw, 5rem); }

/* --- Nosotros -----------------------------------------------------------------------
   Fuera las rejillas de fichas: quedaba cuadriculado y podía ser la web de
   cualquiera. La pieza propia son las dos L del logotipo, que son las
   iniciales de los apellidos de los fundadores. Eso no se puede reutilizar en
   ninguna otra web, así que manda ella y el resto respira alrededor.      */
.nosotros__foto { margin: clamp(1rem, 3vw, 2rem) 0 0; }
.nosotros__foto img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 35%; }
@media (max-width: 700px) { .nosotros__foto img { aspect-ratio: 4 / 3; } }

.origen { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
/* El wordmark ya no cuelga nada de las letras: los apellidos de los socios
   salieron del texto visible cuando la página pasó a narrarse desde la
   agencia. Se queda como respiro tipográfico entre la fotografía del equipo
   y el manifiesto, en una sola tinta y sin destacar ninguna letra. */
.origen__nota { max-width: 56ch; margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; text-align: center; color: var(--ink-muted); line-height: 1.65; }

/* Por qué ALLÓ: lista editorial numerada, sin cajas. El número pesa, el
   título manda y la evidencia va en voz baja con su filete. */
/* --- Por qué ALLÓ: díptico, no lista ------------------------------------------
   Eran siete filas idénticas separadas por un filete: correcto y plano. Ahora
   cada razón es un díptico —el número y el titular a la izquierda, el
   argumento a la derecha— y el número, que antes era un adorno de 2,4 rem,
   pasa a ser el elemento gráfico que marca el ritmo de la sección.        */
.porque { padding-block: clamp(3rem, 7vw, 5rem) clamp(3.5rem, 8vw, 6rem); }
.porque__titulo { font-size: clamp(1.4rem, 3vw, 2.1rem); text-transform: uppercase; letter-spacing: -.02em; }
/* «Por qué ALLÓ»: de lista editorial a tarjetas numeradas, el mismo lenguaje
   que las tarjetas de servicio y las de «Qué demuestra este caso». Alternan
   papel y midnight como la franja del portfolio. */
.razones {
  margin-top: clamp(2rem, 4vw, 3rem); list-style: none; padding: 0;
  display: grid; gap: clamp(.75rem, 1.5vw, 1rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .razones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.razon {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: 14px; border-top: 0;
  background: var(--paper-card);
}
.razon--oscura { background: var(--ink); color: var(--frame); }
/* El número deja de ser una cifra gigante en ember y pasa al registro de las
   tarjetas: pequeño, con barra y en voz baja. La cifra grande funcionaba en
   una lista de siete filas a lo ancho; dentro de una tarjeta se comía el
   titular. */
.razon__n {
  display: block; margin-bottom: .7rem;
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em;
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.razon--oscura .razon__n { color: var(--canvas); }
.razon__titulo {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 600;
  letter-spacing: -.025em; line-height: 1.25;
}
.razon__que { margin-top: .6rem; font-size: .9375rem; line-height: 1.6; color: var(--ink-muted); }
.razon--oscura .razon__que { color: var(--canvas); }
.razon__evidencia {
  margin-top: .9rem; padding-left: .9rem; border-left: 2px solid var(--ember);
  color: var(--ink-muted); font-size: .8125rem; line-height: 1.55;
}
.razon--oscura .razon__evidencia { border-left-color: var(--ember-bright); color: var(--canvas); }


/* Blog vacío */
.blogPag { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem); }
.vacio { background: var(--paper-card); border: 1px solid var(--linea); border-top: 3px solid var(--ember); padding: clamp(1.75rem, 4vw, 3rem); max-width: 46rem; }
.vacio__titulo { font-size: clamp(1.25rem, 2.6vw, 1.75rem); text-transform: uppercase; letter-spacing: -.02em; }
.vacio__texto { margin-top: 1rem; max-width: 52ch; color: var(--ink-muted); line-height: 1.6; }
.vacio__cta { margin-top: 1.75rem; }

/* Contacto */
.contacto { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem); }
.contacto__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 760px) { .contacto__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .contacto__grid { grid-template-columns: 1fr 1fr 1.2fr; } }
.contacto__h { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-deep); }
.contacto__h + .contacto__lista { margin-top: .875rem; }
.contacto__h ~ .contacto__h { margin-top: 2rem; }
.contacto__lista li { padding-block: .35rem; }
.contacto__lista a { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: .1rem; }
.contacto__lista a:hover { border-bottom-color: var(--ember); }
.contacto__sedes { margin-top: .875rem; }
.contacto__sedes li { padding-block: .6rem; }
.sede { font-style: normal; color: var(--ink-muted); font-size: .9375rem; line-height: 1.55; }
.sede b { display: block; color: var(--ink); font-weight: 600; font-size: 1.0625rem; }
.contacto__destacado { background: var(--paper-card); border: 1px solid var(--linea); border-top: 3px solid var(--ember); padding: clamp(1.5rem, 3vw, 2rem); }
.contacto__dh { font-size: clamp(1.25rem, 2.6vw, 1.6rem); text-transform: uppercase; letter-spacing: -.02em; line-height: 1.25; }
.contacto__dtexto { margin-top: .875rem; margin-bottom: 1.5rem; color: var(--ink-muted); font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* --- Enlaces a la página de cada servicio ------------------------------------------ */
.serv__mas { padding-bottom: 1.15rem; }
.serv__mas a, .servicio__mas a { display: inline-flex; align-items: center; gap: .45rem; color: var(--ember-deep); font-size: .875rem; font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: .1rem; }
.serv__mas a:hover, .servicio__mas a:hover { border-bottom-color: currentColor; }
.servicio__nombre a { text-decoration: none; }
.servicio__nombre a:hover { color: var(--ember-deep); }
.servicio__mas { margin-top: .9rem; }

/* --- Página de un servicio ---------------------------------------------------------- */
.servPag { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.servPag .eyebrow a { color: inherit; }
/* La entrada del servicio usa el mismo bloque .cab que el resto del sitio, así
   que su titular y su párrafo ya vienen compuestos y centrados. Solo queda
   darle al párrafo el cuerpo de entradilla que tenía. */
.servPag__texto { font-size: clamp(1.0625rem, 1rem + .4vw, 1.3rem); }
.servPag .cab__rotulo a { color: inherit; }
.servPag__casos { background: var(--paper-alt); padding-block: clamp(3rem, 7vw, 5rem); }
/* Rótulo de la sección de casos, centrado como las demás cabeceras. */
.servPag__casos .shell { text-align: center; }
.servPag__h { font-size: clamp(1.4rem, 3vw, 2.1rem); text-transform: uppercase; letter-spacing: -.02em; }
.servPag__sub { margin-top: .75rem; margin-bottom: clamp(2rem, 4vw, 3rem); color: var(--ink-muted); }
/* Las tarjetas vuelven a alinearse a la izquierda dentro de la rejilla. */
.servPag__casos .casos-duo { text-align: left; }

/* --- Página de un caso -------------------------------------------------------------- */
/* Entrada del caso, con la misma cabecera centrada que el resto del sitio.
   El titular de un caso es una frase entera, no dos palabras, así que usa el
   componente pero con su propia medida: a los 4 rem de «QUÉ HACEMOS.» una
   frase de doce palabras ocuparía media pantalla. */
.casoPag__hero { padding-top: clamp(2rem, 5vw, 3.5rem); }
/* El encargo es que ningún titular pase de dos líneas. Medido: el peor —los
   100 caracteres de ARAG— solo necesita bajar de 40 a 39 px, así que lo que
   sobraba no era cuerpo sino CAJA: con `max-width: 24ch` el titular se
   encerraba en 604 px teniendo 1.120 disponibles y se partía en cuatro líneas
   por falta de sitio, no por tamaño.

   46ch llenan el ancho útil del contenedor a 2,4 rem, que es donde los diez
   titulares de caso caben en dos líneas. Es una medida larga para leer de
   corrido, pero esto es un titular de dos líneas, no un párrafo. */
.cab__titular--caso {
  margin-top: 1.25rem;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  /* Sin tope de medida, a propósito. Una `max-width` en ch encoge con el
     cuerpo, así que al bajar de 1440 px la caja se estrechaba MÁS deprisa que
     la letra y los titulares largos volvían a la tercera línea justo en las
     pantallas medianas. Aquí el ancho lo pone el contenedor y solo la letra
     encoge, que es lo que mantiene los caracteres por línea. */
  max-width: none;
}
.casoPag__hero .casoPag__logo { margin-inline: auto; }
.casoPag__foto { margin: clamp(2rem, 5vw, 3rem) 0 0; }
/* Esquina redondeada como las tarjetas: la fotografía a sangre con esquina
   viva era del diseño anterior y ahora desentona con todo lo demás. */
.casoPag__foto img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 14px;
}
.casoPag__cuerpo { padding-block: clamp(2.5rem, 6vw, 4rem); }
.bloque + .bloque { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--linea); }
.caso__h { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-deep); }
.caso__destacado { margin-top: 1rem; max-width: 44ch; font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.caso__parrafo { margin-top: 1rem; max-width: 62ch; color: var(--ink-muted); line-height: 1.65; }
.puntos { margin-top: 1.25rem; max-width: 62ch; }
.punto { display: grid; grid-template-columns: 1.25rem 1fr; gap: .5rem; padding-block: .55rem; border-bottom: 1px solid var(--linea); line-height: 1.5; }
.punto::before { content: "→"; color: var(--ember); font-weight: 600; }
/* Las fases eran una tabla: celdas pegadas con un filete de 1 px entre ellas.
   Ahora son tarjetas separadas, numeradas y alternando papel y midnight, que
   es el lenguaje de las tarjetas de servicio y de la franja del portfolio. */
.fases { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: clamp(.75rem, 1.5vw, 1rem); background: none; border: 0; }
@media (min-width: 700px) { .fases { grid-template-columns: repeat(2, 1fr); } }
.fase { background: var(--paper-card); padding: clamp(1.1rem, 2.2vw, 1.6rem); border-radius: 14px; }
.fase--oscura { background: var(--ink); color: var(--frame); }
.fase__n { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-bottom: .7rem; }
.fase--oscura .fase__n { color: var(--canvas); }
.fase--oscura .fase__que { color: var(--canvas); }
.fase__nombre { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.fase__que { margin-top: .6rem; color: var(--ink-muted); font-size: .9375rem; line-height: 1.5; }
.fase__canales { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.canal { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ember-deep); background: var(--paper-alt); padding: .25rem .55rem; }
.bloque--resultado { background: var(--paper-card); border: 1px solid var(--linea); border-top: 3px solid var(--ember); padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.metricas { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: clamp(.75rem, 1.5vw, 1rem); background: none; border: 0; }
@media (min-width: 640px) { .metricas { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.metrica { background: var(--paper); padding: clamp(1rem, 2vw, 1.4rem); border-radius: 14px; border: 1px solid var(--linea); }
.metrica b { display: block; font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ember-deep); }
.metrica span { display: block; margin-top: .4rem; font-size: .875rem; line-height: 1.35; }
.metrica em { display: block; margin-top: .55rem; font-style: normal; font-size: .75rem; color: var(--ink-muted); line-height: 1.4; }
.caso__fuente { margin-top: .8rem; font-size: .8125rem; color: var(--ink-muted); line-height: 1.55; max-width: 62ch; }
.caso__fuente b { color: var(--ink); font-weight: 600; }
.caso__detalle { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }
.caso__detalle img { width: 100%; max-width: 48rem; aspect-ratio: 4 / 3; object-fit: cover; }
.caso__servicios, .caso__aprendizaje { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--linea); }
.chips { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-block; padding: .45rem .95rem; background: var(--paper-card); border: 1px solid var(--linea); border-radius: 999px; font-size: .875rem; font-weight: 600; text-decoration: none; transition: border-color .18s ease; }
.chip:hover { border-color: var(--ember); color: var(--ember-deep); }
.casoPag > .shell:last-child { padding-bottom: clamp(3rem, 7vw, 5rem); }

/* --- Páginas legales ---------------------------------------------------------------- */
.legal { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem); }
.datos { margin: 0 0 clamp(2rem, 5vw, 3rem); background: var(--paper-card); border: 1px solid var(--linea); border-top: 3px solid var(--ember); padding: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 48rem; }
.dato { display: grid; grid-template-columns: 1fr; gap: .2rem; padding-block: .6rem; border-bottom: 1px solid var(--linea); }
@media (min-width: 620px) { .dato { grid-template-columns: 15rem 1fr; gap: 1rem; } }
.dato:last-child { border-bottom: 0; }
.dato dt { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.dato dd { margin: 0; font-size: .9375rem; line-height: 1.5; }
.legal__bloque + .legal__bloque { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.legal__h { font-size: clamp(1.1rem, 2.2vw, 1.4rem); text-transform: uppercase; letter-spacing: -.015em; }
.legal__texto { margin-top: .75rem; max-width: 68ch; color: var(--ink-muted); line-height: 1.7; }

/* --- Desplegable de Servicios en la cabecera ---------------------------------------
   <details> nativo: abre al clicar, responde al teclado y funciona sin
   JavaScript. El script solo añade cerrar con Escape o al clicar fuera.    */
.menu { position: relative; }
.menu__boton { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none; }
.menu__boton::-webkit-details-marker { display: none; }
.menu__chevron { transition: transform .25s var(--ease); }
.menu[open] .menu__boton { border-bottom-color: var(--ember); }
.menu[open] .menu__chevron { transform: rotate(180deg); }
.menu__panel {
  position: absolute; z-index: 60; top: calc(100% + .9rem); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(92vw, 34rem);
  background: var(--paper-card); border: 1px solid var(--linea);
  box-shadow: 0 24px 48px -28px rgba(23, 39, 69, .45);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
}
.menu__cols { display: grid; grid-template-columns: 1fr; gap: 1.25rem 2rem; }
@media (min-width: 560px) { .menu__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.menu__h { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-deep); margin-bottom: .6rem; }
.menu__lista li { padding-block: .28rem; }
.menu__lista a { font-size: .9375rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: .05rem; }
.menu__lista a:hover { color: var(--ember-deep); border-bottom-color: currentColor; }
.menu__todos {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--linea); width: 100%;
  color: var(--ember-deep); font-size: .875rem; font-weight: 600; text-decoration: none;
}
.menu__todos:hover { text-decoration: underline; text-underline-offset: 4px; }
/* En pantallas estrechas el panel se ancla al ancho de la ventana y no al
   botón, que estaría pegado al borde derecho. */
@media (max-width: 560px) {
  .menu { position: static; }
  .menu__panel { left: var(--gutter); right: var(--gutter); transform: none; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .menu__chevron { transition: none; } }

/* --- Cierre: el ember con la textura real del manual --------------------------------
   El plano liso quedaba plano. Se usa el degradado ember del brand manual
   —material real fotografiado, no un degradado inventado— con un velo del
   mismo ember encima: sin él, las zonas claras de la foto dejan el texto
   blanco en 2,4:1, que no pasa ni para texto grande.                       */
.cierre { position: relative; isolation: isolate; overflow: hidden; }
.cierre::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background: url("/assets/img/marca/gradiente-ember-960.webp") center / cover no-repeat;
}
.cierre::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, rgba(150, 44, 20, .82) 0%, rgba(185, 59, 29, .72) 55%, rgba(150, 44, 20, .84) 100%);
}
.cierre .shell { position: relative; z-index: 1; }

/* --- Formulario de candidatura ------------------------------------------------------ */
.trabaja__form { margin: 0 0 1.25rem; background: var(--paper-card); border: 1px solid var(--linea); border-top: 3px solid var(--ember); padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.trabaja__form .trabaja__h { margin-bottom: 0; }
.campos { display: grid; grid-template-columns: 1fr; gap: 0 1.25rem; }
@media (min-width: 620px) { .campos { grid-template-columns: repeat(2, 1fr); } }
/* El mensaje y el enlace piden todo el ancho: partirlos en dos columnas los
   dejaba ilegibles. */
.campos .campo:nth-last-child(-n+2) { grid-column: 1 / -1; }
.form--simple .consent { margin-top: 1.5rem; }
.form__envio { margin-top: 1.5rem; }
.form__envio .btn { border: 0; font: inherit; font-weight: 600; }
.gracias--simple { background: var(--paper-card); }
.gracias--simple .gracias__titulo { margin-top: 0; }
select.campo__control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }

/* --- Muro de clientes con logotipo -------------------------------------------------
   Los archivos de assets/img/logos/ ya vienen en una sola tinta midnight
   (los genera build/logos.py), así que aquí no hay ningún filtro de color: lo
   que se ve es el archivo. El filter: invert()+hue-rotate() que había antes
   era una aproximación y cada logotipo caía en un tono ligeramente distinto.

   Todos ocupan exactamente la misma caja y dentro se contienen. Igualar por
   altura a secas no sirve: a la altura a la que «SUTTON BARCELONA» —una línea
   muy larga— se lee bien, el lockup de tres líneas de Carlos Alcaraz Academy
   no se lee en absoluto. Con la caja fija, el ancho manda en los wordmarks y
   el alto en los apilados, y ninguno pesa más que otro.                    */
.muro__caja {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 7.5rem;
  height: clamp(2.4rem, 4vw, 3.25rem);
}
.muro__logo {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  opacity: .75;
  transition: opacity .22s ease;
}
.muro__caja:hover .muro__logo { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .muro__logo { transition: none; } }

/* --- Logotipo del cliente en la página de caso ------------------------------ */
.casoPag__logo {
  display: block; width: auto; max-width: 14rem; object-fit: contain;
  margin-bottom: 1.25rem;
}
.casoPag__logo--ancho { height: clamp(1.3rem, 2.2vw, 1.75rem); }
.casoPag__logo--medio { height: clamp(1.9rem, 3.2vw, 2.5rem); }
.casoPag__logo--alto  { height: clamp(2.8rem, 4.8vw, 3.9rem); }

/* --- Caso: bloques ampliados -------------------------------------------------
   Galería, gráfico, métricas secundarias, «qué demuestra» y FAQ. Todos salen
   de campos opcionales de casos.json: un caso sin ellos se publica igual.
   -------------------------------------------------------------------------- */

/* Galería a sangre, fuera del shell: la fotografía del proyecto es la prueba
   más rápida que tiene la página, y encajonarla en la columna de texto la
   convierte en ilustración. */
.galeria {
  display: grid; gap: clamp(.5rem, 1.2vw, 1rem);
  grid-template-columns: 1fr;
  margin-block: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 700px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
.galeria__f { margin: 0; overflow: hidden; border-radius: 2px; background: var(--paper-alt); }
.galeria__f img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galeria__f--alto img { aspect-ratio: 3 / 4; }
/* La panorámica ocupa las dos columnas: rompe el ritmo del mosaico y evita
   que seis fotos verticales seguidas se lean como una parrilla de catálogo. */
.galeria__f--ancho img { aspect-ratio: 16 / 9; }
@media (min-width: 700px) { .galeria__f--ancho { grid-column: 1 / -1; } }

/* Gráfico de barras en CSS. Sin librería y sin JS: son tres barras y una
   proporción, y cargar una dependencia de gráficos para esto sería absurdo. */
.grafico { margin: clamp(2rem, 4vw, 3rem) 0 0; padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--linea-ink); }
.grafico__t { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; }
.grafico__sub { margin-top: .4rem; font-size: .8125rem; line-height: 1.5; color: var(--canvas); max-width: 60ch; }
.grafico__barras { list-style: none; margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; padding: 0; display: grid; gap: clamp(.9rem, 1.8vw, 1.25rem); }
.barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .9rem; align-items: baseline; }
.barra__et { font-size: .875rem; color: var(--frame); }
.barra__v { font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ember-bright); }
.barra__pista { grid-column: 1 / -1; height: 6px; background: var(--linea-ink); border-radius: 3px; overflow: hidden; }
.barra__fill { display: block; height: 100%; background: var(--ember-bright); border-radius: 3px; }

.caso__h3 { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--canvas); margin-bottom: .75rem; }
.caso__secundarias { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--linea-ink); }
.caso__externas { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .8125rem; line-height: 1.55; color: var(--ink-muted); }
.caso__externas li { margin-bottom: .35rem; }

/* Qué demuestra: es la sección que convierte el caso en argumento comercial,
   así que va numerada —son cinco aprendizajes, no una lista suelta— y con más
   aire que el resto del cuerpo. */
.bloque--prueba { padding-top: clamp(2.5rem, 5vw, 4rem); }
.pruebas {
  list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0;
  display: grid; gap: clamp(.75rem, 1.5vw, 1rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .pruebas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 820px) { .pruebas { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); } }
.prueba {
  display: block; padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--paper-card); border-radius: 14px;
}
.prueba__n { display: block; margin-bottom: .7rem; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; color: var(--ember-deep); font-variant-numeric: tabular-nums; }
.prueba__t { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; }
.prueba__p { margin-top: .5rem; font-size: .9375rem; line-height: 1.6; color: var(--ink-muted); }

/* FAQ: sin acordeón. El texto debe estar en el DOM y a la vista, porque es lo
   que los motores generativos extraen y lo que el marcado FAQPage declara. */
.bloque--faq { padding-top: clamp(2.5rem, 5vw, 4rem); }
.faqs {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; gap: clamp(.75rem, 1.5vw, 1rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .faqs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faq { padding: clamp(1.1rem, 2.2vw, 1.5rem); border-radius: 14px; background: var(--paper-card); }

.faq__q { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; max-width: 46ch; }
.faq__a { margin-top: .6rem; font-size: .9375rem; line-height: 1.65; color: var(--ink-muted); max-width: 68ch; }

/* --- Nosotros: manifiesto y preguntas ----------------------------------------
   El manifiesto llevaba escrito en equipo.json desde el principio sin
   renderizarse. Va a dos columnas en pantalla ancha porque son tres párrafos
   de relato: en una sola columna de 68ch se leía como un muro.            */
.manifiesto { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--linea); }
.manifiesto__titulo {
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  text-transform: uppercase; letter-spacing: -.02em; max-width: 18ch;
}
.manifiesto__cuerpo { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; }
@media (min-width: 860px) {
  .manifiesto__cuerpo { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 5vw, 4rem); }
}
.manifiesto__p { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-muted); max-width: 56ch; }
.manifiesto__p:first-child { color: var(--ink); font-weight: 500; }

.preguntas { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--linea); }
.preguntas .faqs { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 900px) {
  .preguntas .faqs { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 5vw, 4rem); }
  /* Con dos columnas, el filete superior de la primera fila lo pone la rejilla
     entera: sin esto la segunda columna arranca con un filete suelto. */
  .preguntas .faq:nth-child(-n+2) { border-top: 1px solid var(--linea); }
  .preguntas .faq:last-child, .preguntas .faq:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--linea); }
}


/* --- Revelado y entrada ------------------------------------------------------
   Un solo mecanismo para toda la web: data-revelar en el marcado, .esta-oculto
   lo pone el script y esta transición lo devuelve. El estado por defecto es el
   visible, así que si el script no llega a ejecutarse no desaparece nada.  */
[data-revelar] { transition: opacity .65s var(--ease), transform .65s var(--ease); }
.esta-oculto { opacity: 0; transform: translateY(1.5rem); }

/* El titular de entrada no espera al scroll: ya se está mirando. Entra al
   cargar, frase a frase, con la cadencia de alguien que las dice en voz alta. */
.entrada__titulo--anim .entrada__linea {
  display: block;
  animation: subeLinea .8s var(--ease) both;
  animation-delay: calc(var(--n) * .11s + .1s);
}
@keyframes subeLinea {
  from { opacity: 0; transform: translateY(.7em); }
  to   { opacity: 1; transform: none; }
}

/* El wordmark es el único momento coreografiado de la página: las cuatro
   letras suben escalonadas y el interletraje se asienta al llegar. */
@keyframes asientaLetra {
  from { opacity: 0; transform: translateY(.35em); letter-spacing: .12em; }
  to   { opacity: 1; transform: none; letter-spacing: -.05em; }
}
/* Sin la animación de scroll, el bloque ya está a la vista al cargar: se
   dispara sola. Si el observador lo ocultó, se reinicia al destaparlo. */
.esta-oculto 
@media (prefers-reduced-motion: reduce) {
  [data-revelar], .esta-oculto { transition: none; opacity: 1; transform: none; }
  .entrada__titulo--anim .entrada__linea,   .razon:hover .razon__n { transform: none; }
}


/* --- Páginas de sede --------------------------------------------------------
   Una por ciudad. Ficha de datos a la izquierda —el NAP, que es lo que lee la
   búsqueda local— y el texto a la derecha; debajo, los servicios en pastilla.
   Mismo lenguaje que el resto: tarjeta de papel con radio de 14 px, rótulos en
   versalita ember y pastillas.
   -------------------------------------------------------------------------- */
.sede { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem); }
.sede__ficha { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
  .sede__ficha { grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr); align-items: start; }
}
.sede__datos {
  margin: 0; padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--ink); color: var(--frame); border-radius: 14px;
}
.sede__dato + .sede__dato { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--linea-ink); }
.sede__dato dt {
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember-bright);
}
.sede__dato dd { margin: .4rem 0 0; font-size: .9375rem; line-height: 1.5; }
.sede__dato a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linea-ink); }
.sede__dato a:hover { border-bottom-color: var(--ember-bright); }
.sede__p { font-size: clamp(1rem, .96rem + .25vw, 1.125rem); line-height: 1.65; color: var(--ink-muted); max-width: 62ch; }
.sede__p + .sede__p { margin-top: 1rem; }

.sede__areas { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 860px) { .sede__areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sede__areaH {
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember-deep);
}
.sede__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* El desplegable de sedes son tres nombres: el panel no necesita el ancho del
   de servicios, que reparte once en dos columnas. */
.menu--corto .menu__panel { min-width: 12rem; }


/* Botón de idioma. Discreto y con el mismo registro de versalita que los
   rótulos: es una utilidad, no un destino, y no puede competir con el botón de
   consultoría que va justo al lado. Lleva a la MISMA página en el otro idioma,
   así que también cambia según dónde estés. */
.head__idioma {
  align-self: center;
  padding: .35rem .6rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em;
  color: var(--ink-muted); text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.head__idioma:hover { border-color: var(--ember); color: var(--ember-deep); }


/* --- Ficha de caso con jerarquía propia ------------------------------------ */
/* Contexto del resultado, bajo la entradilla: dice de quién y de cuándo va la
   cifra antes de enseñarla. En voz baja, que es un pie y no un titular. */
.cab__contexto {
  margin-top: clamp(.75rem, 1.6vw, 1rem);
  font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ember-deep);
}
/* El periodo, junto a las cifras: «claro pero discreto», que es justo lo que
   separa un dato citable de un dato sin respaldo. */
.caso__periodo { margin-top: 1rem; font-size: .8125rem; color: var(--ink-muted); }

/* Fuentes rastreables. Enlaces normales con href, nunca botones ni listas
   pintadas por JavaScript: si una fuente no se puede seguir, no es una fuente. */
.caso__fuentes {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--paper-card); border-radius: 14px;
}
.caso__externas { margin: .75rem 0 0; padding-left: 1.1rem; }
.caso__externas li { font-size: .8125rem; line-height: 1.6; color: var(--ink-muted); }
.caso__externas a { color: var(--ember-deep); }

/* El cierre, cuando es el <footer> del artículo, mantiene la banda ember pero
   se separa del cuerpo en vez de pegarse al pie del documento. */
.cierre--caso { margin-top: clamp(2.5rem, 6vw, 4rem); }


/* Grupos dentro de una sección de caso: país y sus ciudades, marca y sus
   líneas… El nombre del grupo va destacado pero NO es un encabezado: meterlo
   como h3 añadiría niveles de jerarquía que la página no necesita. Mismas
   tarjetas de 14 px que el resto del sitio. */
.gruposCaso {
  list-style: none; margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; padding: 0;
  display: grid; gap: clamp(.75rem, 1.5vw, 1rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .gruposCaso { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .gruposCaso { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grupoCaso {
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--paper-card); border-radius: 14px;
}
.grupoCaso__t {
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember-deep);
}
.grupoCaso__items { list-style: none; margin: .8rem 0 0; padding: 0; }
.grupoCaso__items li {
  font-size: .9375rem; font-weight: 600; letter-spacing: -.01em;
  padding-block: .4rem;
}
.grupoCaso__items li + li { border-top: 1px solid var(--linea); }


/* Nota de medición al pie de una sección: cuerpo menor pero legible, que es
   justo lo que pide una acotación de alcance. Ni oculta ni con el peso de un
   párrafo del cuerpo. */
.caso__nota {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-top: 1rem; border-top: 1px solid var(--linea);
  font-size: .8125rem; line-height: 1.6; color: var(--ink-muted);
  max-width: 70ch;
}


/* Salida alternativa del formulario: aparece solo si el envío no ha podido
   completarse. No es decoración — es la diferencia entre perder un lead en
   silencio y que llegue por otra vía. El teléfono ya es público en el pie y en
   contacto, así que no expone nada nuevo; el correo de destino NO puede salir
   aquí y por eso no está. */
.form__salida {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--ink); color: var(--frame); border-radius: 14px;
}
.form__salidaT {
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember-bright);
}
.form__salidaB { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.form__salida .btn-sec { color: var(--canvas); }


/* Página de gracias. Registro sobrio: lo importante ya lo ha dicho el titular,
   aquí solo queda contar qué pasa a continuación. */
.graciasPag { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem); }
.graciasPag .shell { max-width: 46rem; }
.graciasPag__p {
  font-size: clamp(1rem, .96rem + .25vw, 1.125rem); line-height: 1.65; color: var(--ink-muted);
}
.graciasPag__p + .graciasPag__p { margin-top: 1rem; }
.graciasPag .caso__h { margin-top: clamp(2rem, 4vw, 2.75rem); }
.graciasPag__nota {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--paper-card); border-radius: 14px;
  font-size: .9375rem; line-height: 1.6; color: var(--ink-muted);
}
.graciasPag__cta { margin-top: clamp(2rem, 4vw, 2.75rem); }


/* --- Banner de consentimiento ----------------------------------------------
   Abajo, fijo, sobre midnight. No tapa la pantalla ni bloquea la lectura: un
   muro modal para pedir permiso de medición es desproporcionado y además
   empuja a aceptar por quitárselo de encima, que es justo lo que invalida un
   consentimiento. Aceptar y rechazar tienen el mismo peso de lectura.
   -------------------------------------------------------------------------- */
.cookies {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  background: var(--ink); color: var(--frame);
  border-top: 3px solid var(--ember);
  padding: clamp(1rem, 2vw, 1.35rem) var(--gutter);
}
.cookies__in {
  max-width: var(--shell); margin-inline: auto;
  display: grid; gap: 1rem; align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) { .cookies__in { grid-template-columns: minmax(0, 1fr) auto; } }
.cookies__p { font-size: .875rem; line-height: 1.55; color: var(--canvas); max-width: 68ch; }
.cookies__p a { color: var(--frame); }
.cookies__btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookies .btn-sec { color: var(--canvas); border-color: var(--linea-ink); }

/* --- Fotografía de cabecera de las páginas de ciudad ------------------------
   A todo el ancho, por encima del titular. Alto por viewport y no fijo para
   que en móvil no se coma la pantalla entera y en escritorio siga siendo una
   banda y no un hero de agencia genérica. */
.sedeFoto {
  margin: 0;
  width: 100%;
  height: clamp(13rem, 34vw, 24rem);
  overflow: hidden;
  background: var(--linea);
}
.sedeFoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}
/* El titular viene justo debajo: sin este ajuste la banda y el rótulo quedan
   pegados con el aire de una sección normal, que ahí sobra. */
.sedeFoto + .entrada--cartel { padding-block-start: clamp(1.75rem, 4vw, 3rem); }

/* Remate de las páginas de ciudad: la frase que cierra («Barcelona es nuestra
   base. Las marcas, nuestro territorio.»). No es un párrafo más, así que se
   compone con más cuerpo y con la barra ember que ya marca los énfasis. */
.sede__remate {
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  padding-inline-start: clamp(.9rem, 2vw, 1.25rem);
  border-inline-start: 3px solid var(--ember);
  max-width: 34ch;
  font-size: clamp(1.125rem, 1.9vw, 1.4375rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}

/* =============================================================================
   Blog: índice y artículo
   El artículo no es una plantilla de blog pegada al sitio: usa el mismo papel,
   la misma tinta, la misma familia y los mismos espaciados que el resto. Lo
   único propio es la columna de lectura, más estrecha que la rejilla general
   porque un texto largo a 78 rem no se lee.
   ========================================================================== */

.shell--lectura { max-width: 44rem; }

/* --- Índice: artículo destacado ------------------------------------------- */
.destacado {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
  background: var(--paper-card);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--ember);
  padding: clamp(1.25rem, 3vw, 2rem);
  text-decoration: none;
  transition: background-color .2s ease;
}
.destacado:hover, .destacado:focus-visible { background: var(--paper); }
@media (min-width: 60rem) { .destacado { grid-template-columns: 34rem minmax(0, 1fr); } }
.destacado__foto { width: 100%; height: auto; display: block; }
.destacado__texto { display: flex; flex-direction: column; gap: .75rem; }
.destacado__cat,
.post__cat {
  color: var(--ember-deep);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.destacado__titulo {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.12;
  text-wrap: balance;
}
.destacado__entrada { color: var(--ink-muted); line-height: 1.6; max-width: 54ch; }
.destacado__meta { color: var(--ink-muted); font-size: .8125rem; }

/* --- Artículo: fotografía de cabecera ------------------------------------- */
.postFoto {
  margin: 0;
  width: 100%;
  height: clamp(12rem, 30vw, 22rem);
  overflow: hidden;
  background: var(--linea);
}
.postFoto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Artículo: cabecera ---------------------------------------------------- */
.postCab { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2rem); }
.migas { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-muted);
  font-size: .8125rem;
}
.migas li + li::before { content: "/"; margin-inline-end: .5rem; opacity: .5; }
.migas a { color: inherit; text-decoration: none; }
.migas a:hover, .migas a:focus-visible { color: var(--ember-deep); text-decoration: underline; }

.postCab__cat {
  color: var(--ember-deep);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.postCab__titular {
  margin: .75rem 0 0;
  font-size: clamp(1.875rem, 5vw, 3.125rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
  text-wrap: balance;
}
.postCab__entrada {
  margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-muted);
}
.postMeta {
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  padding-block-start: 1rem;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  color: var(--ink-muted);
  font-size: .8125rem;
}

/* --- Artículo: cuerpo ------------------------------------------------------
   Medida de 68 caracteres, interlínea 1.7 y un salto de escala claro entre
   encabezados. Los encabezados nunca se eligen por tamaño: el H2 es H2 porque
   abre una sección, y si hace falta uno más pequeño se cambia el CSS. */
.postCuerpo { padding-block-end: clamp(2.5rem, 6vw, 4rem); }
.postCuerpo > .shell > * { max-width: 68ch; }
.postCuerpo p {
  margin: 0 0 1.25em;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.postCuerpo h2 {
  margin: clamp(2.25rem, 5vw, 3.25rem) 0 .75rem;
  font-size: clamp(1.375rem, 2.8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.2;
  text-wrap: balance;
}
.postCuerpo h3 {
  margin: clamp(1.75rem, 4vw, 2.25rem) 0 .5rem;
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
}
.postCuerpo h4 {
  margin: 1.5rem 0 .4rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.postCuerpo ul, .postCuerpo ol { margin: 0 0 1.25em; padding-inline-start: 1.35rem; }
.postCuerpo li { margin-bottom: .5em; font-size: 1.0625rem; line-height: 1.65; }
.postCuerpo a { color: var(--ember-deep); text-underline-offset: .18em; }
.postCuerpo a:hover, .postCuerpo a:focus-visible { text-decoration-thickness: 2px; }
.postCuerpo blockquote {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0;
  padding-inline-start: clamp(1rem, 2.5vw, 1.5rem);
  border-inline-start: 3px solid var(--ember);
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  line-height: 1.45;
  font-weight: 500;
}
.postCuerpo figure { margin: clamp(1.75rem, 4vw, 2.5rem) 0; }
.postCuerpo figure img { width: 100%; height: auto; display: block; }
.postCuerpo figcaption {
  margin-top: .6rem;
  color: var(--ink-muted);
  font-size: .8125rem;
  line-height: 1.5;
}
.postCuerpo hr {
  margin: clamp(2rem, 5vw, 3rem) 0;
  border: 0;
  border-top: 1px solid var(--linea);
}
/* Las tablas de un artículo se desbordan en móvil pase lo que pase: se
   desplazan dentro de su propia caja, nunca empujando el documento entero. */
.postCuerpo table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.postCuerpo table th, .postCuerpo table td {
  border: 1px solid var(--linea);
  padding: .6rem .75rem;
  text-align: start;
}

/* --- Artículo: servicio relacionado ---------------------------------------- */
.postServicio {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  padding-block-start: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--linea);
  max-width: 68ch;
}
.postServicio__rotulo {
  margin: 0 0 .6rem;
  color: var(--ink-muted);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.postServicio__enlace {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  text-decoration: none;
  padding: clamp(.9rem, 2vw, 1.15rem);
  background: var(--paper-card);
  border: 1px solid var(--linea);
  border-inline-start: 3px solid var(--ember);
  transition: background-color .2s ease;
}
.postServicio__enlace:hover, .postServicio__enlace:focus-visible { background: var(--paper); }
.postServicio__nombre { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.015em; }
.postServicio__texto { color: var(--ink-muted); font-size: .9375rem; line-height: 1.5; }

/* --- Artículo: bloque de conversión ---------------------------------------- */
.postCta { background: var(--ink); color: var(--frame); padding-block: clamp(2.5rem, 6vw, 4rem); }
.postCta__titular {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.5rem, 3.4vw, 2.375rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-wrap: balance;
}
.postCta__texto {
  margin: 1rem 0 0;
  max-width: 46ch;
  color: var(--canvas);
  line-height: 1.6;
}
.postCta__accion { margin: clamp(1.5rem, 3vw, 2rem) 0 0; }

/* --- Artículo: seguir leyendo ---------------------------------------------- */
.postOtros { padding-block: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--linea); }
.postOtros__titulo {
  font-size: clamp(1.125rem, 2.2vw, 1.4375rem);
  font-weight: 600;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.postOtros .blog__grid { margin-top: clamp(1.5rem, 3vw, 2rem); }

@media (min-width: 48rem) {
  .blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 68rem) {
  .blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tabla de encargados del tratamiento y tablas dentro de un artículo. Se
   desplazan dentro de su propia caja: una tabla ancha en un móvil, si no,
   empuja el documento entero y aparece scroll lateral en toda la página. */
.tablaScroll { overflow-x: auto; margin: clamp(1rem, 2.5vw, 1.5rem) 0; }
.tablaScroll table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: .9375rem; }
.tablaScroll th, .tablaScroll td {
  border: 1px solid var(--linea);
  padding: .6rem .75rem;
  text-align: start;
  vertical-align: top;
  line-height: 1.5;
}
.tablaScroll th { background: var(--paper-card); font-weight: 600; }