/* ============================================================
   DIGA— somosdiga.com
   Sistema de diseño · CSS puro con custom properties
   ============================================================ */

/* ─── Text reveal: efecto Collins — palabras gris → negro al scroll ─── */
.trw {
  display: inline;
  transition: color 0.28s ease;
}

/* ─── Tipografías de marca ─────────────────────────────────────
   Titulares y textos ....... BDO Grotesk (400 / 500 / 600 / 700)
   Etiquetas ................ Arbeit Technik (300 Light / 400 Book)
   Sin Google Fonts. WOFF2 autoalojado en /fonts/.
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'BDO Grotesk';
  src: url('../fonts/BDOGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BDO Grotesk';
  src: url('../fonts/BDOGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BDO Grotesk';
  src: url('../fonts/BDOGrotesk-DemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BDO Grotesk';
  src: url('../fonts/BDOGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* BDO no tiene Black. El peso 800 heredado del sistema anterior resuelve a
   Bold en lugar de generar una negrita sintética. */
@font-face {
  font-family: 'BDO Grotesk';
  src: url('../fonts/BDOGrotesk-Bold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Arbeit Technik';
  src: url('../fonts/ArbeitTechnik-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Arbeit Technik';
  src: url('../fonts/ArbeitTechnik-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─── Custom Properties ─── */
:root {
  /* Colores — OKLCH, tintados hacia el hue del brand (290° púrpura de #17083A)
     Neutrales con presencia subconsciente de la marca, nunca colores puros */
  --color-bg:         oklch(98.5% 0.004 290);
  --color-dark:       oklch(17% 0.065 290);
  --color-accent:     oklch(97% 0.21 115);
  --color-ink:        oklch(12% 0.012 290);
  --color-secondary:  oklch(44% 0.014 290);
  --color-border:     oklch(90% 0.007 290);
  --color-surface:    oklch(97% 0.005 290);
  --color-dark-text:  oklch(85% 0.02 290 / 0.88);

  /* Tipografías — BDO Grotesk (titulares + textos) · Arbeit Technik (etiquetas) */
  --font-display: 'BDO Grotesk', system-ui, sans-serif;
  --font-sans:    'BDO Grotesk', system-ui, -apple-system, sans-serif;
  --font-label:   'Arbeit Technik', ui-monospace, 'Courier New', monospace;
  /* Alias heredado: --font-mono se mantiene para no romper reglas antiguas */
  --font-mono:    var(--font-label);

  /* Escala tipográfica — más contraste entre pasos */
  --text-h1:    clamp(2.75rem, 7.5vw, 8.5rem);
  --text-h2:    clamp(1.875rem, 3.75vw, 3.25rem);
  --text-h3:    clamp(1.25rem, 2.1vw, 1.625rem);
  --text-body:  1.125rem;
  --text-mono:  0.75rem;           /* 12px — etiquetas. NUNCA cambia */
  --text-ctrl:  0.6875rem;         /* 11px — botones, píldoras, filtros */
  /* ── Diner: paleta prestada de las referencias del cliente ── */
  --diner-azul:      #0A38D6;
  --diner-azul-osc:  #0827A0;
  --diner-amarillo:  var(--color-accent);   /* el amarillo de Diga—, el del botón "Hablemos" */
  --diner-crema:     #FFFDF5;

  --text-nav:   0.8125rem;         /* 13px — enlaces del menú y "Hablemos" */

  /* Espaciado secciones */
  --space-section:    clamp(100px, 12vw, 160px);
  --space-section-sm: clamp(60px, 8vw, 100px);

  /* Contenedor */
  --container:      1440px;
  --gutter:         clamp(1.5rem, 5vw, 5rem);
  --max-text:       640px;

  /* Transiciones — expo-out, precisa y orgánica */
  --ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --duration:       0.55s;
}

/* ─── Reset ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Todas las imágenes y vídeos con esquinas redondeadas por defecto */
img, video {
  border-radius: 8px;
  display: block;
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.78;
  color: var(--color-ink);
  background-color: var(--color-bg);
  overflow-x: hidden;
  font-kerning: normal;
}

/* Wrapper que contiene todo el contenido dentro de los márgenes */
body > header,
body > main,
body > footer {
  margin-inline: 20px;
  border-radius: 12px;
  /* overflow: hidden eliminado — rompe position:sticky en animaciones de scroll */
}

/* Bloques de color a sangre — anulan el margin del body > * */
.diner-damero,
.diner-cinta,
.tension,
.cierre,
.manifiesto,
.hero-interior--dark,
.footer {
  margin-inline: -20px;
  border-radius: 0;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}

/* ─── Skip to content ─── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--color-accent);
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.875rem;
  z-index: 9999;
  border-radius: 2px;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 1rem;
}

/* ─── Contenedor ─── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ─── Etiquetas (REGLA: siempre 14px, uppercase, tracking) ─── */
.label-mono {
  font-family: var(--font-label);
  font-size: var(--text-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  line-height: 1;
  color: var(--color-secondary);
}

.label-mono--accent {
  color: var(--color-accent);
}

.label-mono--light {
  color: rgba(255, 255, 255, 0.45);
}

/* ─── Tipografía base ─── */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  overflow-wrap: break-word;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  overflow-wrap: break-word;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p {
  max-width: var(--max-text);
  color: var(--color-secondary);
  font-variant-numeric: oldstyle-nums;
}

/* ── Link underline: texto secundario, sin pill, con subrayado ── */
.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
  text-decoration: none;
  border-bottom: 1px solid oklch(12% 0.012 290 / 0.25);
  padding-bottom: 2px;
  transition: color 0.2s, border-bottom-color 0.2s;
}
.link-underline:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

/* ═══════════════════════════════════════════════════════════
   SISTEMA DE BOTONES UNIFICADO
   Todos: monoespaciada, uppercase, pill (100px), borde 1.5px
   ═══════════════════════════════════════════════════════════ */

/* ── Flecha animada en botones ── */
.btn-arrow {
  display: inline-block;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transition: -webkit-transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.link-action:hover .btn-arrow,
.nav-cta:hover .btn-arrow,
.conv-submit:hover .btn-arrow,
.btn-primary:hover .btn-arrow,
.link-underline:hover .btn-arrow {
  -webkit-transform: translateX(5px);
  transform: translateX(5px);
}

/* ── Base compartida ── */
.link-action,
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 100px;
  border: 1.5px solid;
  padding: 0.625rem 1.25rem;
  transition:
    background 0.25s var(--ease),
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    opacity 0.25s;
}

/* ── Ghost: fondo transparente, borde tinta ── */
.link-action {
  background: transparent;
  color: var(--color-ink);
  border-color: oklch(12% 0.012 290 / 0.25);
}
.link-action:hover {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
  opacity: 1;
}

/* ── Ghost claro (sobre fondo oscuro) ── */
.link-action--light {
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.link-action--light:hover {
  background: #fff;
  color: #111;
  border-color: #fff;
  opacity: 1;
}

/* ── Acento ── */
.link-action--accent {
  color: var(--color-accent);
  border-color: oklch(97% 0.21 115 / 0.4);
  font-size: 0.6875rem;
}
.link-action--accent:hover {
  background: var(--color-accent);
  color: var(--color-ink);
  border-color: var(--color-accent);
  opacity: 1;
}

/* ── Filled accent (equivalente a btn-primary) ── */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-ink);
  border-color: var(--color-accent);
  padding: 0.75rem 1.75rem;
}
.btn-primary:hover {
  background: var(--color-ink);
  color: var(--color-accent);
  border-color: var(--color-ink);
}

/* ─── Animaciones editoriales de scroll ─── */

/* Base: fade suave para body text, cards, labels */
.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.72s var(--ease), transform 0.72s var(--ease);
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal tipo cortina para títulos principales — se eleva desde abajo */
h1.fade-up, .h1.fade-up,
h2.fade-up, .h2.fade-up {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 105% 0);
  transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
h1.fade-up.is-visible, .h1.fade-up.is-visible,
h2.fade-up.is-visible, .h2.fade-up.is-visible {
  clip-path: inset(0 0 -5% 0);
}

/* Stagger generoso — más teatral, más editorial */
.fade-up.delay-1 { transition-delay: 0.08s; }
.fade-up.delay-2 { transition-delay: 0.18s; }
.fade-up.delay-3 { transition-delay: 0.3s; }
.fade-up.delay-4 { transition-delay: 0.45s; }

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 6px;    /* pill más cerca de los bordes que el contenido */
  right: 6px;
  z-index: 100;
  padding-top: 0;
  transition: padding 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Estado inicial — barra completa, fondo transparente */
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding-inline: 0;
  border-radius: 0;
  background: transparent;
  border: 1px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Estado scrolled — pill flotante liquid glass */
.nav.scrolled {
  padding-top: 10px;
}
.nav.scrolled .nav__inner {
  height: 80px;  /* mismo alto — sin cambio de tamaño */
  padding-inline: 1.5rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 1px 1px rgba(0,0,0,0.04),
    0 4px 16px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
}

.nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s;
}
.nav__logo:hover { opacity: 0.7; }

.nav__logo-img {
  height: 38px;
  width: auto;
  display: block;
  border-radius: 0;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav__links a {
  font-family: var(--font-sans);
  font-size: var(--text-nav);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  text-decoration: none;
  transition: opacity 0.2s;
  position: relative;
}
.nav__links a:hover { opacity: 0.6; }

/* "Hablemos" en nav — misma tipografía, peso y cuerpo que el resto
   del menú; lo único que lo distingue es la píldora de color. */
.nav__links a.nav-cta {
  font-family: var(--font-sans);
  font-size: var(--text-nav);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.55rem 1.125rem;
  background: var(--color-accent);
  color: var(--color-ink);
  border: 1.5px solid var(--color-accent);
  border-radius: 100px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.nav__links a.nav-cta:hover {
  background: var(--color-ink);
  color: var(--color-accent);
  border-color: var(--color-ink);
  opacity: 1;
}
.nav.scrolled .nav__links a.nav-cta {
  border-radius: 100px;
}

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
  z-index: 110;
}
.nav__hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--color-ink);
  transition: transform 0.3s var(--ease), opacity 0.3s;
  transform-origin: center;
}

/* Estado abierto — X */
.menu-open .nav__hamburger span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.menu-open .nav__hamburger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.menu-open .nav__hamburger span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Overlay móvil */
.nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: var(--color-dark);
  z-index: 99;
  padding: 120px var(--gutter) 60px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.nav__overlay.is-open {
  opacity: 1;
}
.nav__overlay a {
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  text-decoration: none;
  line-height: 1.1;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: color 0.2s;
}
.nav__overlay a:first-child { border-top: 1px solid rgba(255,255,255,0.1); }
.nav__overlay a:hover { color: var(--color-accent); }

/* Nav en páginas oscuras */
.nav--inverted .nav__logo,
.nav--inverted .nav__links a {
  color: #fff;
}
.nav--inverted .nav__hamburger span {
  background-color: #fff;
}
.nav--inverted.scrolled .nav__logo,
.nav--inverted.scrolled .nav__links a {
  color: var(--color-ink);
}
.nav--inverted.scrolled .nav__hamburger span {
  background-color: var(--color-ink);
}

/* ============================================================
   HERO — HOME
   ============================================================ */
.hero {
  min-height: max(100svh, 640px); /* nunca menos de 640px aunque la ventana sea baja */
  display: flex;
  flex-direction: column;
  padding-top: 80px;
  padding-bottom: clamp(48px, 7vw, 96px);
  position: relative;
  overflow: hidden;
  z-index: 3;
}

/* El container crece para llenar el hero */
.hero > .container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* inner: dos columnas — texto a la izquierda, burger a la derecha */
.hero__inner {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: center;
  column-gap: clamp(2rem, 5vw, 5.5rem);
  padding-block: clamp(48px, 6vw, 80px);
}

/* Grupo principal: label + H1 + subtitle + CTA */
.hero__main {
  min-width: 0;
}

.hero__label {
  margin-bottom: 0.5rem;
}

.hero__title {
  /* Escala propia del hero: el H1 comparte fila con la burger, así que se
     dimensiona contra el ancho de SU columna, no contra el viewport entero.
     El salto de línea lo marca el <br> del HTML — nunca el navegador. */
  font-size: clamp(2.5rem, 7vw, 7.5rem);
  max-width: none;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  margin-bottom: 1.5rem;
}

.hero__subtitle {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-secondary);
  max-width: 560px;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* El badge separa del contenido principal */
.hero__badge {
  margin-top: clamp(2.5rem, 4vw, 4rem);
}

/* ─── Visual del hero: la burger cromada ────────────────────────
   Tres capas independientes para que las animaciones no colisionen:
   .hero__visual  → hueco de salida: reserva el espacio del grid
   .burger-vuelo  → lo que viaja; el JS le escribe posición y ancho
   .hero__burger  → la imagen, con su flotación en bucle
   ───────────────────────────────────────────────────────────── */
.hero__visual {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Compensa el peso óptico del H1: la burger sube un poco respecto al eje.
     Se hace con margin, no con transform: .fade-up ya usa el transform. */
  margin-top: -1.5rem;
  /* Reserva el alto aunque la burger salga del flujo al despegar */
  aspect-ratio: 968 / 743;
}

/* ─── La burger en vuelo ────────────────────────────────────────
   Hay UNA sola burger en toda la home. En reposo vive dentro del
   hueco del hero: así se ve bien sin JS y sin animación. Con
   scroll, el JS la saca del flujo —position: fixed— y la lleva
   interpolando entre el hueco del hero y el del bloque de
   contexto. Por el camino encoge (el hueco de destino es más
   pequeño) y gira. Al llegar se queda pegada al hueco de destino,
   así que sale de pantalla con el bloque, sin quedarse flotando.
   -------------------------------------------------------------- */
.burger-vuelo {
  width: 100%;
  animation: burger-entrada 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.25s;
}

@keyframes burger-entrada {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.burger-vuelo--volando {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;          /* sobre el bloque oscuro (2), bajo el nav (100) */
  pointer-events: none;
  will-change: transform, width;
}

.hero__visual picture {
  display: block;
}

.hero__burger {
  width: 100%;
  height: auto;
  border-radius: 0;           /* anula el radius global de img — es un recorte con alpha */
  /* Sombra de contacto: apoya el objeto sobre el fondo sin caja ni marco */
  filter: drop-shadow(0 34px 46px oklch(12% 0.012 290 / 0.16))
          drop-shadow(0 6px 12px oklch(12% 0.012 290 / 0.08));
  animation: burger-float 7.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes burger-float {
  0%,
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(0, -13px, 0) rotate(-0.7deg); }
}

/* Línea estructural inferior del hero — eliminada */


/* ─── Nav: el menú desktop deja de caber por debajo de 1024px ─── */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
  .nav__overlay { display: flex; }
}

/* ─── Hero: colapso a una columna ─── */
@media (max-width: 900px) {
  .hero {
    min-height: 0;
    padding-bottom: clamp(40px, 8vw, 72px);
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2.5rem, 7vw, 4rem);
  }
  .hero__title {
    font-size: clamp(2.5rem, 9vw, 4.5rem);
  }
  .hero__visual {
    margin-top: 0;
    max-width: 60%;
    margin-inline: auto;
  }
  .hero__burger {
    filter: drop-shadow(0 22px 32px oklch(12% 0.012 290 / 0.15));
  }
}

@media (max-width: 700px) {
  .hero__visual { max-width: 76%; }
}

@media (max-width: 480px) {
  .hero__visual { max-width: 92%; }
}

/* Sin movimiento para quien lo pide */
@media (prefers-reduced-motion: reduce) {
  .hero__burger {
    animation: none;
  }
}

/* ============================================================
   SECCIÓN TENSIÓN
   ============================================================ */
.tension {
  background-color: var(--color-dark);
  padding-block: var(--space-section);
  position: relative;
  overflow: hidden;
  z-index: 2; /* se desliza por encima del video sticky */
}

.tension > .container {
  position: relative;
}

/* Dos columnas: el texto deja de ocupar el bloque entero y la mitad
   derecha —que antes estaba vacía— la ocupa la burger al bajar. */
.tension__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.62fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.tension__texto {
  max-width: 54ch;
}

.tension__label {
  margin-bottom: 2rem;
}

.tension__quote {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.4vw, 2.75rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: 2rem;
}

/* Cada palabra arranca apagada y se enciende conforme el bloque
   cruza la pantalla. El estado inicial lo pone el JS: sin JS, el
   titular se ve entero desde el principio. */
.tension__quote .palabra {
  transition: color 0.45s ease, opacity 0.45s ease;
}

.tension__body {
  font-size: 1.0625rem;
  color: var(--color-dark-text);
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* El remate lleva un filete de acento: rompe el muro de texto y
   marca dónde está la idea que hay que llevarse. */
.tension__close {
  font-size: clamp(1rem, 1.8vw, 1.1875rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.45;
  padding-left: 1.125rem;
  border-left: 2px solid var(--color-accent);
}

/* ── Hueco de llegada de la burger ──────────────────────────────
   No contiene imagen: solo reserva el sitio y pinta el halo. La
   burger que aterriza aquí es la misma que sale del hero.
   ------------------------------------------------------------- */
.tension__visual {
  position: relative;
  aspect-ratio: 968 / 743;
}

/* Halo: evita que la burger flote sobre un plano negro plano */
.tension__visual::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: radial-gradient(
    circle at 50% 48%,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.05) 38%,
    transparent 68%
  );
  pointer-events: none;
}

@media (max-width: 900px) {
  .tension__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .tension__texto { max-width: none; }
  /* En móvil la burger se queda en el hero: no hay viaje ni hueco. */
  .tension__visual { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tension__quote .palabra { color: #fff !important; opacity: 1 !important; }
}

/* ============================================================
   SECCIÓN TRES AMBICIONES — cards estilo Collins
   ============================================================ */
.ambitions {
  padding-top: var(--space-section);
}

.ambitions__header {
  padding-bottom: clamp(32px, 4vw, 48px);
}

/* Lista de cards */
.ambitions__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Cada card ocupa todo el ancho disponible */
.ambitions__item {
  display: block;
  background: #f5f5f3;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition:
    background 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform   0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, background;
}

.ambitions__item:hover {
  background: #111110;
  transform: scale(1.012);
}

.ambitions__item-inner {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 0 3rem;
  align-items: center;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* Número */
.ambitions__number {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
  transition: color 0.45s ease;
}

.ambitions__item:hover .ambitions__number {
  color: rgba(255,255,255,0.4);
}

.ambitions__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ambitions__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-ink);
  transition: color 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.ambitions__item:hover .ambitions__title {
  color: #ffffff;
  transform: translateX(6px);
}

.ambitions__desc {
  font-size: 1rem;
  color: var(--color-secondary);
  line-height: 1.6;
  max-width: 44ch;
  transition: color 0.45s ease;
}

.ambitions__item:hover .ambitions__desc {
  color: rgba(255,255,255,0.55);
}

/* El inner es un <a> — reset de link */
a.ambitions__item-inner {
  text-decoration: none;
  color: inherit;
}

/* CTA Explorar — derecha de la card */
.ambitions__link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* CTA en cards ambitions — hereda base, solo ajusta padding y transición */
.ambitions__link .link-action {
  padding: 0.75rem 1.5rem;
  transition:
    background 0.45s ease,
    color 0.45s ease,
    border-color 0.45s ease,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ambitions__item:hover .ambitions__link .link-action {
  background: #ffffff;
  color: #111110;
  border-color: transparent;
  transform: scale(1.05);
}

/* ============================================================
   SECCIÓN PROYECTOS — HOME
   ============================================================ */
.projects-home {
  padding-block: var(--space-section);
  padding-inline: 32px;
}

.projects-home__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(40px, 5vw, 64px);
}

/* ── GRID EDITORIAL: 2 columnas, cards a ancho variable, alturas naturales ── */
.projects-home__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
  row-gap: clamp(3rem, 5vw, 5rem);
  align-items: start; /* cada card tiene su propia altura */
}

/* Card a ancho completo */
.project-card--wide {
  grid-column: 1 / -1;
}

/* Ratios distintos por posición — ritmo visual variado */
/* Las imágenes de tarjeta se generan todas a 3:2, así que la retícula
   no necesita ratios distintos por posición: el mosaico de antes —4/3,
   21/8, cuadrado— obligaba a recortar cada imagen de una forma y era
   justo lo que hacía que el listado se viera desigual. */

.project-card {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
  cursor: pointer;
  text-decoration: none;
}

.project-card:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

.project-card__visual {
  width: calc(100% - 2px); /* ligeramente más estrecho que el pill */
  margin-inline: auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
}

.project-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

/* Placeholder gradiente cuando no hay imagen real */
.project-card__placeholder {
  width: 100%;
  height: 100%;
  transition: transform 0.7s var(--ease);
}

.project-card:hover .project-card__image,
.project-card:hover .project-card__placeholder {
  transform: scale(1.04);
}

.project-card__info {
  padding: 1.25rem 0 0;   /* sin padding horizontal: texto alineado con la imagen */
  background: var(--color-bg);
}

.project-card__client {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

/* El sector de cada tarjeta es una etiqueta más: hereda cuerpo y
   tracking de la norma, no lleva medidas propias. */

.project-card__ambition {
  font-size: 0.9375rem;
  color: var(--color-secondary);
  line-height: 1.5;
  max-width: 36ch;
}

.projects-home__cta {
  margin-top: 3rem;
  display: flex;
  justify-content: flex-end;
}

/* Gradientes de proyecto (placeholder vibrante) */
.grad-schar {
  background: linear-gradient(135deg, #2DD4BF 0%, #3B82F6 45%, #8B5CF6 100%);
}
.grad-affinity {
  background: linear-gradient(135deg, #F97316 0%, #EC4899 55%, #8B5CF6 100%);
}
.grad-eci {
  background: linear-gradient(135deg, #10B981 0%, #3B82F6 100%);
}
.grad-roca {
  background: linear-gradient(135deg, #FCD34D 0%, #F97316 45%, #9A3412 100%);
}
.grad-mango {
  background: linear-gradient(135deg, #FDE68A 0%, #F43F5E 50%, #C026D3 100%);
}
.grad-caixa {
  background: linear-gradient(135deg, #22D3EE 0%, #0284C7 50%, #1E3A5F 100%);
}
.grad-mapfre {
  background: linear-gradient(135deg, #DC2626 0%, #9B1C1C 55%, #1C1917 100%);
}
.grad-decathlon {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 50%, #1E3A8A 100%);
}
.grad-nike {
  background: linear-gradient(135deg, #111827 0%, #374151 50%, #6B7280 100%);
}

/* ============================================================
   SECCIÓN EL SISTEMA — HOME
   ============================================================ */
.sistema-home {
  padding-block: var(--space-section);
  border-top: 1px solid var(--color-border);
}

.sistema-home__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem 6rem;
  align-items: center;
}

.sistema-home__text {}

.sistema-home__label { margin-bottom: 1.5rem; }

.sistema-home__title {
  margin-bottom: 1.25rem;
}

.sistema-home__desc {
  margin-bottom: 2rem;
}

.sistema-home__visual {
  overflow-x: auto;
}

/* SVG Sistema */
.sistema-svg {
  width: 100%;
  max-width: 560px;
  overflow: visible;
}

/* ============================================================
   SECCIÓN CIERRE / CTA — HOME
   ============================================================ */
.cierre {
  background-color: var(--color-dark);
  padding-block: var(--space-section);
  position: relative;
  overflow: hidden;
}

.cierre > .container {
  position: relative;
}

.cierre__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.cierre__header,
.cierre__conv-form {
  align-self: start;
}

.cierre__header {
  max-width: none;
  margin-bottom: 0;
}

.cierre__label { margin-bottom: 2rem; }

.cierre__title {
  color: #fff;
  margin-bottom: 1.5rem;
}

.cierre__body {
  color: var(--color-dark-text);
  margin-bottom: 0;
  font-size: 1.125rem;
}

.cierre__conv-form {
  padding-top: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background-color: var(--color-ink);
  padding-block: clamp(32px, 3.5vw, 48px);
  margin-top: 0;
  border-radius: 0 !important;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr;
  gap: 1.25rem 2.5rem;
  margin-bottom: clamp(18px, 2vw, 26px);
}

.footer__logo {
  display: block;
  margin-bottom: 0.625rem;
}

.footer__logo-img {
  height: 12px;
  width: auto;
  display: block;
  opacity: 0.9;
  border-radius: 0;
}

.footer__tagline {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: rgba(255,255,255,0.52);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 0.75rem;
}

.footer__address {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.45;
  max-width: none;
}

.footer__address a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.footer__address a:hover { color: var(--color-accent); }

.footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.52);
  margin-bottom: 0.625rem;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

/* El <li> heredaba el cuerpo y el interlineado del body (18px / 1.78),
   así que cada fila medía 32px aunque el enlace fuera de 13px. La
   medida tiene que ir en el <li>, no solo en el <a>. */
.footer__links li {
  font-size: 0.8125rem;
  line-height: 1.3;
}

.footer__links a {
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}
.footer__links a:hover { color: #fff; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__legal {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
}

.footer__legal a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.footer__legal a:hover { color: rgba(255,255,255,0.85); }

/* ============================================================
   HERO INTERIOR (páginas interiores)
   ============================================================ */
/* ── ID MORPH: A se desvanece, B sube desde abajo con word reveal ── */
.id-morph {
  height: 350vh;  /* más recorrido = ritmo más lento */
  position: relative;
}

.id-morph__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 80px;
  overflow: hidden;
}

.id-morph__stage {
  position: relative;
}

.id-morph__text--a,
.id-morph__text--b {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  width: 75%;
}

/* A — mismo tamaño que hero-interior__title */
.id-morph__text--a {
  font-size: clamp(2.25rem, 4.8vw, 5.25rem);
  line-height: 1.1;
  color: var(--color-ink);
  will-change: opacity;
}

/* B — más pequeño, sube desde abajo, todo gris de inicio */
.id-morph__text--b {
  font-size: clamp(1.375rem, 2.2vw, 2.5rem);
  line-height: 1.4;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(50px);
  will-change: opacity, transform;
  pointer-events: none;
}

/* Todas las palabras de B arrancan grises */
.id-morph__text--b .trw {
  color: oklch(70% 0 0);
}

.hero-interior {
  padding-top: clamp(110px, 14vw, 170px);
  padding-bottom: var(--space-section-sm);
}

.hero-interior--dark {
  background-color: var(--color-dark);
}

.hero-interior__label { margin-bottom: 0.5rem; }

.hero-interior__title {
  max-width: none;
  margin-bottom: 1.5rem;
  font-size: clamp(2.25rem, 4.8vw, 5.25rem);
}

.hero-interior--dark .hero-interior__title {
  color: #fff;
}

.hero-interior__subtitle {
  font-size: 1.25rem;
  color: var(--color-secondary);
  max-width: 560px;
  line-height: 1.6;
}

.hero-interior--dark .hero-interior__subtitle {
  color: var(--color-dark-text);
}

/* Sub-lede: derivado del subtitle al 85%, mismo tratamiento */
.hero-interior__sublede {
  font-size: 1.0625rem;
  color: var(--color-secondary);
  max-width: 560px;
  line-height: 1.65;
  margin-top: 1rem;
}

/* ============================================================
   SECCIÓN TEXTO LARGO (interior)
   ============================================================ */
.content-section {
  padding-block: var(--space-section);
}

.content-section--bordered {
  border-top: 1px solid var(--color-border);
}

.content-section__inner {
  max-width: var(--max-text);
}

.content-section__inner p {
  margin-bottom: 1.5rem;
  max-width: none;
}

.content-section__inner p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   SECCIÓN ESENCIA / MANIFIESTO (dark)
   ============================================================ */
.manifiesto {
  background-color: var(--color-dark);
  padding-block: var(--space-section);
}

.manifiesto__inner {
  max-width: 800px;
}

.manifiesto__label { margin-bottom: 1.75rem; }

.manifiesto__quote {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 2rem;
}

.manifiesto__body {
  color: var(--color-dark-text);
  font-size: 1.125rem;
  max-width: 560px;
  line-height: 1.7;
}

/* ============================================================
   SISTEMA — 4 FASES (página /inteligencia-de-diseno)
   ============================================================ */
.sistema-fases {
  padding-top: var(--space-section);
}

.sistema-fases__header {
  margin-bottom: clamp(48px, 6vw, 80px);
}

.sistema-fases__label { margin-bottom: 1.5rem; }

.sistema-fases__title { max-width: 18ch; }

/* SVG full-width dentro del container */
.sistema-fases__svg {
  margin-top: clamp(48px, 6vw, 80px);
  overflow-x: hidden;
}

.sistema-fases__svg .sistema-svg {
  width: 100%;
  max-width: none;
  height: auto;
}

/* ── Stacking Cards: sistema de fases con scroll ── */
.fases-stack {
  --fases-side: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  position: relative;
  height: 520vh;
  margin-top: clamp(64px, 8vw, 100px);
}

.fases-stack__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-border);
  overflow: hidden;
}

/* LEFT: columna ancla */
.fases-stack__anchor {
  display: flex;
  align-items: center;
  border-right: 1px solid var(--color-border);
  padding-left: var(--fases-side);
  padding-right: clamp(2rem, 3vw, 4rem);
}

/* El inner está centrado por flexbox del anchor */
.fases-anchor__inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Ticks de progresión */
.fases-anchor__progress { display: flex; gap: 6px; align-items: center; }

.fases-progress__tick {
  display: block; height: 2px; width: 20px;
  background: var(--color-border);
  transition: width 0.45s var(--ease), background 0.45s var(--ease);
}
.fases-progress__tick.is-active { width: 44px; background: var(--color-ink); }

/* Número de fase */
.fases-anchor__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-secondary);
  margin-bottom: -0.75rem;
  transition: opacity 0.18s ease;
}

/* Nombre de fase — protagonista del panel */
.fases-anchor__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6.5vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-ink);
  transition: opacity 0.18s ease, transform 0.28s var(--ease);
}

.fases-anchor__inner.is-transitioning .fases-anchor__name {
  opacity: 0; transform: translateY(-10px);
}
.fases-anchor__inner.is-transitioning .fases-anchor__num { opacity: 0; }

/* RIGHT: escenario de cards que se apilan */
.fases-stack__stage {
  position: relative;
  overflow: hidden;
}

.fase-card {
  position: absolute;
  left: clamp(2rem, 3vw, 4rem);
  right: var(--fases-side);
  top: 50%;
  padding: clamp(2rem, 3.5vw, 3.5rem);
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 1px 3px rgba(0,0,0,0.05),
    0 8px 32px rgba(0,0,0,0.07);
  will-change: transform;
  transform-origin: center center;
}

.fase__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
  margin-bottom: 1.25rem;
}

.fase__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--color-ink);
  margin-bottom: 1.25rem;
}

.fase__desc {
  font-size: 1rem;
  color: var(--color-secondary);
  line-height: 1.75;
  max-width: 52ch;
}


/* ============================================================
   LO QUE HACE DIFERENTE (3 puntos clave)
   ============================================================ */
.diferenciadores {
  padding-block: var(--space-section);
}

.diferenciadores__inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem 4rem;
  align-items: start;
}

.diferenciadores__header {
  padding-top: 0.3rem;
}

.diferenciadores__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.diferenciador {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
}

.diferenciador__num {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--color-secondary);
  letter-spacing: 0.08em;
}

.diferenciador__text {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: none;
}

/* ============================================================
   SERVICIOS — PILLAR PAGE
   ============================================================ */

/* Índice sticky */
.servicios-indice {
  position: sticky;
  top: 80px;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.servicios-indice__inner {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.servicios-indice__inner::-webkit-scrollbar { display: none; }

.servicios-indice__link {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.servicios-indice__link:hover { color: var(--color-ink); }

.servicios-indice__link.is-active {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

/* ── Sección individual de servicio ── */
.servicio {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-section);
}

/* Grid 2 columnas: aside (40%) | body (60%) */
.servicio__grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 0 clamp(3rem, 6vw, 7rem);
  align-items: start;
}

/* Columna izquierda — sticky mientras scrolls el contenido */
.servicio__aside {
  position: sticky;
  top: calc(80px + 49px + 2rem); /* nav + índice + breathing */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Número decorativo grande */
.servicio__num {
  font-family: var(--font-display);
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--color-border);
  margin-bottom: 0.25rem;
  user-select: none;
}

.servicio__title {
  font-size: clamp(1.625rem, 3vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-ink);
}

.servicio__lede {
  font-size: 1rem;
  color: var(--color-secondary);
  line-height: 1.65;
  max-width: 38ch;
}

/* Tesis: declaración, derivada del hero subtitle (1.25rem) pero ink y weight 500 */
.servicio__tesis {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 32ch;
}

/* Promesa: prosa operativa, secondary, peso normal */
.servicio__promesa {
  font-size: 1rem;
  color: var(--color-secondary);
  line-height: 1.7;
  max-width: 38ch;
}

.servicio__cta {
  padding-top: 0.5rem;
}

/* Columna derecha — narrativa + cómo + ficha */
.servicio__body {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
}

/* Narrativa */
.servicio__narrative p {
  font-size: 1.0625rem;
  color: var(--color-secondary);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  max-width: 62ch;
}

.servicio__narrative p:last-child { margin-bottom: 0; }

/* Callout reutiliza el patrón existente */
.servicio__narrative .callout {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-block: 2.5rem 2rem;
  padding-top: 1.25rem;
  max-width: none;
}

.servicio__narrative .callout::before {
  content: '';
  display: block;
  width: 2rem;
  height: 3px;
  background-color: var(--color-accent);
  margin-bottom: 1rem;
}

/* Label "Cómo lo hacemos" */
.servicio__como-label {
  margin-bottom: 1.5rem;
  display: block;
}

/* Grid 2×2 de items */
.servicio__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Cada item reutiliza la card .diferenciador */
.servicio__item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--color-surface, #f7f7f5);
  border-radius: 16px;
  border: 1px solid var(--color-border);
}

/* Ficha de engagement */
.servicio__ficha {
  padding-top: 0;
}

.servicio__ficha-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0;
}

.servicio__ficha-item {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--color-ink);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.servicio__ficha-campo {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.45);
}

.servicio__ficha-valor {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .servicio__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .servicio__aside {
    position: static;
  }

  .servicio__num {
    font-size: 4rem;
  }

  .servicio__items,
  .servicio__ficha-grid {
    grid-template-columns: 1fr;
  }
}

/* Lista de índice anterior (página índice original) */
.servicios-lista {
  padding-top: clamp(2rem, 3vw, 3rem);
  padding-bottom: var(--space-section);
}

/* Reutiliza .ambitions__item y .ambitions__content */

/* ============================================================
   PROYECTOS — GRID EDITORIAL
   ============================================================ */
.proyectos-grid-page {
  padding-block: var(--space-section);
}

/* ── Filtros de sector ── */
.proyectos-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(3rem, 5vw, 5rem);
}

.proyectos-filtro {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 0.5rem 1.125rem;
  border: 1.5px solid oklch(12% 0.012 290 / 0.2);
  border-radius: 100px;
  background: transparent;
  color: var(--color-secondary);
  cursor: pointer;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
}

.proyectos-filtro:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.proyectos-filtro.is-active {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

/* ── Grid editorial: igual que homepage ── */
.proyectos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
  row-gap: clamp(3rem, 5vw, 5rem);
  align-items: start;
}

/* Card a ancho completo */
.proyectos-grid .project-card--wide {
  grid-column: 1 / -1;
}

/* Ratios por clase — independiente del orden (necesario para filtros) */
/* Mismo criterio en el listado: un único formato, 3:2. */

/* Transición al filtrar */
.proyectos-grid .project-card {
  transition: opacity 0.25s ease;
}
.proyectos-grid .project-card.is-hidden {
  display: none;
}

/* ============================================================
   TEMPLATE CASO INDIVIDUAL
   ============================================================ */
.caso-hero {
  padding-top: 64px;
}

.caso-hero__visual {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 12px;
}

.caso-hero__visual img,
.caso-hero__visual div {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caso-hero__header {
  padding-block: clamp(40px, 6vw, 80px);
}

.caso-hero__sector {
  margin-bottom: 1rem;
}

.caso-hero__title {
  max-width: 16ch;
}

.caso-hero__client {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-top: 0.5rem;
}

.caso-hero__label {
  margin-bottom: 0.5rem;
}

/* Proyecto en desarrollo */
.proyecto-indev {
  padding-block: clamp(5rem, 10vw, 8rem);
}

.proyecto-indev__inner {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.proyecto-indev__label {
  color: var(--color-secondary);
}

.proyecto-indev__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.proyecto-indev__body {
  color: var(--color-secondary);
  line-height: 1.7;
  max-width: 52ch;
}

.caso-section {
  padding-block: clamp(3rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem 4rem;
}

.caso-section__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
  padding-top: 0.3rem;
}

.caso-section__body h2 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--color-ink);
  margin-bottom: 1.25rem;
  max-width: 24ch;
}

.caso-section__body h3 {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 1rem;
  letter-spacing: -0.015em;
}

.caso-section__body > p {
  max-width: 62ch;
  color: var(--color-secondary);
  line-height: 1.75;
}

.caso-section__body > p + p {
  margin-top: 1rem;
}

/* ── CASO: Bloques de media ── */
/*
  --caso-gap: espacio entre imágenes y margen lateral.
  margin-inline negativo escapa el container (gutter)
  y vuelve a dejar solo --caso-gap desde el borde del body > main.
*/
.caso-media {
  --caso-gap: clamp(0.5rem, 1vw, 1rem);
  margin-inline: calc(var(--caso-gap) - var(--gutter));
  margin-top: 0;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.caso-media--grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--caso-gap);
}

.caso-media--grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--caso-gap);
}

.caso-media--grid-3-2 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--caso-gap);
}

.caso-media--grid-2-3 {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--caso-gap);
}

.caso-media__img {
  border-radius: 8px;
  overflow: hidden;
  display: block;
  width: 100%;
}

/* Img dentro de un grid: necesita altura explícita */
.caso-media--grid-2 .caso-media__img,
.caso-media--grid-3 .caso-media__img,
.caso-media--grid-3-2 .caso-media__img,
.caso-media--grid-2-3 .caso-media__img {
  height: 100%;
  min-height: 200px;
  object-fit: cover;
}

/* Navegación entre proyectos */
.caso-nav {
  padding-block: var(--space-section-sm);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.caso-nav__item {
  text-decoration: none;
  transition: opacity 0.2s;
}
.caso-nav__item:hover { opacity: 0.6; }

.caso-nav__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
}

.caso-nav__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

/* ============================================================
   INSIGHTS
   ============================================================ */
.insights-page {
  padding-block: var(--space-section);
  border-top: 1px solid var(--color-border);
}

.insights-featured {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  padding-bottom: var(--space-section-sm);
  margin-bottom: var(--space-section-sm);
  border-bottom: 1px solid var(--color-border);
}

.insights-featured__label { margin-bottom: 1.5rem; }
.insights-featured__title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.25vw, 2.5rem);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.insights-featured__excerpt {
  color: var(--color-secondary);
  margin-bottom: 1.5rem;
  max-width: none;
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.insight-card {
  padding: 2rem;
  border-left: 1px solid var(--color-border);
  text-decoration: none;
  transition: background-color 0.2s;
}
.insight-card:first-child { border-left: none; }
.insight-card:hover { background-color: rgba(0,0,0,0.02); }

.insight-card__tag {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  background-color: var(--color-accent);
  display: inline-block;
  padding: 0.25em 0.6em;
  margin-bottom: 1rem;
}

.insight-card__date {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--color-secondary);
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

.insight-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.insight-card__excerpt {
  font-size: 0.875rem;
  color: var(--color-secondary);
  line-height: 1.6;
  max-width: none;
}

/* Pilares insights */
.insights-pilares {
  padding-block: var(--space-section);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.pilares-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  margin-top: 3rem;
}

.pilar__icon {
  width: 40px;
  height: 2px;
  background-color: var(--color-accent);
  margin-bottom: 1.5rem;
}

.pilar__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.pilar__desc {
  font-size: 0.9375rem;
  color: var(--color-secondary);
  line-height: 1.65;
  max-width: none;
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto-page {
  background-color: var(--color-dark);
  min-height: 100svh;
  padding-top: 64px;
}

.contacto-page__inner {
  padding-block: var(--space-section);
  display: flex;
  flex-direction: column;
}

.contacto-header {
  max-width: min(66%, 680px);
  margin-bottom: clamp(3rem, 5vw, 5rem);
}

.contacto-info__label { margin-bottom: 1.5rem; }

.contacto-info__title {
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  color: #fff;
  overflow-wrap: break-word;
}

.contacto-form-wrap {
  margin-bottom: clamp(4rem, 7vw, 7rem);
}

.contacto-info__body {
  color: var(--color-dark-text);
  font-size: 1.125rem;
  max-width: min(66%, 680px);
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.contacto-proceso {
  margin-top: 0;
}

.contacto-proceso__title {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.contacto-proceso__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.contacto-paso {
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.contacto-proceso__grid .contacto-paso:last-child { border-bottom: none; }

.contacto-paso__num {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--color-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.contacto-paso__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.25rem;
}

.contacto-paso__desc {
  font-size: 1rem;
  color: var(--color-dark-text);
  line-height: 1.7;
  max-width: none;
}

/* Formulario */
.contacto-form {}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.65);
  margin-bottom: 0.625rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: oklch(22% 0.055 290);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  padding: 0.9375rem 1.125rem;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
  resize: vertical;
  border-radius: 0;
  -webkit-appearance: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255,255,255,0.35);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-accent);
  background: oklch(24% 0.06 290);
}

.form-group textarea {
  min-height: 150px;
  line-height: 1.65;
}

.form-submit {
  width: 100%;
  padding: 1.125rem 2rem;
  background-color: var(--color-accent);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1.5px solid var(--color-accent);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  border-radius: 0;
}
.form-submit:hover {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}

/* Mensajes de error y ayuda en formulario */
.form-error {
  display: block;
  min-height: 1.2em;
  margin-top: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: rgba(255, 120, 100, 0.9);
  line-height: 1.4;
}

.form-hint {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.48);
  line-height: 1.5;
  font-style: italic;
}

.form-optional {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  font-weight: 400;
}

/* ============================================================
   FORMULARIO CONVERSACIONAL
   ============================================================ */

/* Estado del cuerpo del formulario */
.conv-form__body {
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.conv-form__body.is-hiding {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

/* Párrafo conversacional */
.conv-sentence {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  font-weight: 400;
  line-height: 2.5;
  color: var(--color-dark-text);
}

/* Inputs inline */
.conv-field-wrap { display: inline; }

.conv-input {
  display: inline;
  background: none;
  border: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.22);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0 0.12em 0.1em;
  width: 8ch; /* se sobreescribe por JS según data-min-ch */
  vertical-align: baseline;
  transition: border-color 0.2s ease, width 0.12s ease;
  border-radius: 0;
  -webkit-appearance: none;
  min-width: 4ch;
  max-width: 30ch; /* límite para que no rompan el layout */
}
.conv-input::placeholder {
  color: rgba(255, 255, 255, 0.18);
  font-weight: 400;
  letter-spacing: 0;
}
.conv-input:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}
.conv-input.has-error {
  border-bottom-color: rgba(255, 100, 100, 0.65);
}

/* Botón enviar + mensajes */
.conv-form__actions {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.conv-submit {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--color-accent);
  border: 1.5px solid rgba(237, 255, 76, 0.4);
  border-radius: 100px;
  background: transparent;
  padding: 0.625rem 1.5rem;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.conv-submit:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-ink);
}

.conv-form__error-msg {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: rgba(255, 120, 100, 0.9);
}

/* Estado de éxito */
.conv-form__success {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.conv-form__success.is-visible {
  opacity: 1;
  transform: none;
}

.conv-success__line {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 0.25em;
}
.conv-success__line:last-child { margin-bottom: 0; }
.conv-success__line--muted {
  font-weight: 400;
  color: var(--color-dark-text);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
}

.contacto-direct {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.contacto-direct a {
  font-size: 1.125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 0.2s;
}
.contacto-direct a:hover { color: var(--color-accent); }

.contacto-direct p {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.55);
  margin-top: 0.25rem;
  max-width: none;
}

/* ============================================================
   EQUIPO
   ============================================================ */
.equipo-page {
  padding-top: clamp(100px, 14vw, 160px);
  padding-bottom: var(--space-section);
}

.equipo-page .h1 {
  font-size: clamp(2.25rem, 4.8vw, 5.25rem);
}

.equipo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 3rem;
  margin-top: var(--space-section-sm);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-section-sm);
}

.miembro__foto {
  aspect-ratio: 3/4;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background-color: #F5F5F5;
}

.miembro__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%);
  transition: filter 0.4s;
}

.miembro:hover .miembro__foto img { filter: grayscale(0%); }

.miembro__foto-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-border);
}

.miembro__nombre {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.2rem;
}

.miembro__rol {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.miembro__frase {
  font-size: 0.875rem;
  color: var(--color-secondary);
  line-height: 1.6;
  max-width: 26ch;
}

/* ============================================================
   SUBPÁGINAS IA-CRITERIO, RAVEN (más textuales)
   ============================================================ */
.subpage-content {
  padding-block: var(--space-section);
}

.subpage-content__body {
  max-width: var(--max-text);
}

.subpage-content__body p {
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
  color: var(--color-secondary);
  max-width: none;
  line-height: 1.7;
}

.subpage-content__body p:last-child { margin-bottom: 0; }

.subpage-content__body .callout {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-block: 3rem 2.5rem;
  padding-top: 1.5rem;
  max-width: none;
}
.subpage-content__body .callout::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  background-color: var(--color-accent);
  margin-bottom: 1.25rem;
}

/* Nota de caducidad / aside */
.nota-caducidad {
  margin-top: 3rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.nota-caducidad p {
  font-size: 0.875rem;
  color: var(--color-secondary);
  line-height: 1.6;
  font-style: italic;
  max-width: none;
}

/* ============================================================
   PÁGINA ARTÍCULO INSIGHT
   ============================================================ */
.articulo-hero {
  padding-top: clamp(100px, 14vw, 160px);
  padding-bottom: var(--space-section-sm);
  border-bottom: 1px solid var(--color-border);
}

.articulo-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.articulo-body {
  padding-block: var(--space-section-sm);
  max-width: var(--max-text);
}

.articulo-body p {
  font-size: var(--text-body);
  color: var(--color-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: none;
}

.articulo-body h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.875rem);
  color: var(--color-ink);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.articulo-body blockquote {
  margin-block: 2.5rem;
  padding-block: 1.75rem;
  border-top: 2px solid var(--color-accent);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* ============================================================
   UTILIDADES
   ============================================================ */
.text-white    { color: #fff !important; }
.text-accent   { color: var(--color-accent) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.max-text      { max-width: var(--max-text); }
.sr-only       { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ============================================================
   RESPONSIVE — MOBILE FIRST
   ============================================================ */

/* ── 768px: tablet ── */
@media (max-width: 768px) {
  :root {
    --space-section: clamp(72px, 14vw, 100px);
  }

  /* Hero */
  .hero__title { max-width: 100%; }
  .hero__subtitle { font-size: 1.125rem; }
  .hero { padding-top: 64px; }

  /* Tensión */
  .tension__inner { max-width: 100%; }

  /* Ambitions */
  .ambitions__item-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .ambitions__link { justify-content: flex-start; }
  .ambitions__item:hover { transform: none; }

  /* Projects home — apilado en mobile */
  .projects-home__grid {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
    column-gap: 0;
  }
  .project-card--wide {
    grid-column: auto;
  }
  .projects-home__grid .project-card:nth-child(n) .project-card__visual {
    aspect-ratio: 3 / 2;
  }

  /* Sistema home */
  .sistema-home__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Contacto */
  .contacto-header,
  .contacto-info__body {
    max-width: 100%;
  }
  .contacto-proceso__grid {
    grid-template-columns: 1fr;
  }

  /* Cierre */
  .cierre__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .cierre__header {
    position: static;
  }

  /* Caso */
  .caso-section {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  /* Media: sin escape de container en mobile */
  .caso-media {
    margin-inline: 0;
  }
  .caso-media--grid-2,
  .caso-media--grid-3,
  .caso-media--grid-3-2,
  .caso-media--grid-2-3 {
    grid-template-columns: 1fr;
  }

  /* Equipo */
  .equipo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
  }

  /* Insights */
  .insights-featured {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .insights-grid {
    grid-template-columns: 1fr;
  }
  .insight-card { border-left: none; border-top: 1px solid var(--color-border); }
  .insight-card:first-child { border-top: none; }

  /* Pilares */
  .pilares-grid { grid-template-columns: 1fr; }

  /* Fases stacking → colapsa a flujo lineal en mobile */
  .fases-stack { height: auto; }
  .fases-stack__sticky {
    position: static;
    height: auto;
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .fases-stack__anchor { display: none; }
  .fases-stack__stage {
    position: static;
    overflow: visible;
    padding: var(--space-section) var(--fases-side);
  }
  .fase-card {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    margin-bottom: 1rem;
  }

  /* Diferenciadores */
  .diferenciadores__inner { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Proyectos grid page */
  .proyectos-grid {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }
  .proyectos-grid .project-card--wide {
    grid-column: auto;
  }
  .proyectos-grid .project-card--portrait .project-card__visual,
  .proyectos-grid .project-card--wide .project-card__visual {
    aspect-ratio: 3 / 2;
  }
  .proyectos-filtros {
    gap: 0.375rem;
  }

  /* Hero interior */
  .hero-interior__title { max-width: 100%; }
}

/* ── 480px: mobile pequeño ── */
@media (max-width: 480px) {
  .hero__subtitle { font-size: 1rem; }
  .tension__quote { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  .equipo-grid { grid-template-columns: 1fr; }
  .caso-nav { flex-direction: column; align-items: flex-start; }
}

/* ── 1024px: entre tablet y desktop ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .ambitions__item-inner {
    grid-template-columns: 60px 1fr auto;
    gap: 0 2rem;
  }
}

/* ── 1440px+: wide screens ── */
@media (min-width: 1440px) {
  :root {
    --gutter: 6rem;
  }
}

/* ============================================================
   SOMOS — Galería de oficina
   ============================================================ */
/* ============================================================
   SOMOS — Sección equipo (nombre + cargo, sin foto)
   ============================================================ */
.somos-equipo {
  padding-block: var(--space-section);
  border-top: 1px solid var(--color-border);
}

.somos-equipo__header {
  margin-bottom: var(--space-section-sm);
  max-width: 680px;
}

/* Grid reutiliza .equipo-grid pero sin la foto */
.somos-equipo .equipo-grid {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

/* Miembro sin foto: nombres más grandes, sin margen de frase */
.somos-equipo .miembro {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.somos-equipo .miembro__nombre {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
}

.somos-equipo .miembro__rol {
  margin-bottom: 0;
}

/* ============================================================
   SOMOS — Bloque Raven (pie dentro de la sección equipo)
   ============================================================ */
.somos-raven {
  margin-top: var(--space-section-sm);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-inline: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.somos-raven__logo-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.somos-raven__logotipo {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-ink);
  line-height: 1;
  text-decoration: none;
  display: block;
}

.somos-raven__logotipo img {
  height: clamp(2rem, 4vw, 3rem);
  width: auto;
  border-radius: 0;
}

.somos-raven__body-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.somos-raven__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.somos-raven__desc {
  font-size: 1.0625rem;
  color: var(--color-secondary);
  line-height: 1.7;
  max-width: 54ch;
  margin: 0;
}

/* ============================================================
   SOMOS — Grid de logos clientes
   ============================================================ */
/* Responsive nuevos componentes */
@media (max-width: 768px) {
  .somos-raven {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  }

@media (min-width: 769px) and (max-width: 1024px) {
  }

/* ============================================================
   FOCUS STATES — ACCESIBILIDAD
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .nav, .footer { display: none; }
  .hero { min-height: auto; }
}

/* ============================================================
   CONSENTIMIENTO DE COOKIES
   El markup lo inyecta /js/cookies.js. Aceptar y rechazar
   comparten estilo, tamaño y jerarquía: la AEPD exige que
   rechazar sea tan fácil como aceptar.
   ============================================================ */

.cc-banner {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 9998;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2rem);
  background-color: var(--color-dark);
  border-radius: 14px;
  box-shadow: 0 20px 60px oklch(12% 0.012 290 / 0.28);
  /* Entrada: parte abajo y oculto, .cc-banner--in lo sube */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.cc-banner--in     { opacity: 1; transform: translateY(0); }
.cc-banner--hidden { opacity: 0; transform: translateY(18px); pointer-events: none; visibility: hidden; }

.cc-banner__label {
  color: var(--color-accent);
  margin-bottom: 0.6rem;
}

.cc-banner__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-dark-text);
  max-width: 68ch;
}

.cc-banner__desc a,
.cc-panel__intro a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc-banner__desc a:hover,
.cc-panel__intro a:hover { color: var(--color-accent); }

.cc-banner__actions,
.cc-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* ── Botones: mismo peso para aceptar y rechazar ── */
.cc-btn {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  padding: 0.9375rem 1.375rem;
  border-radius: 100px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background-color: transparent;
  color: #fff;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.cc-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.cc-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* «Configurar» es secundario: es la única jerarquía que se rompe,
   y se rompe hacia abajo, nunca a favor de aceptar. */
.cc-btn--ghost {
  border-color: transparent;
  color: var(--color-dark-text);
  padding-inline: 0.875rem;
}
.cc-btn--ghost:hover {
  border-color: transparent;
  background-color: transparent;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Panel de preferencias ── */
.cc-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
  background-color: oklch(12% 0.012 290 / 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.cc-panel[hidden] { display: none; }

.cc-panel__box {
  width: 100%;
  max-width: 640px;
  max-height: min(86vh, 780px);
  overflow-y: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background-color: var(--color-dark);
  border-radius: 16px;
  box-shadow: 0 30px 80px oklch(12% 0.012 290 / 0.4);
}

.cc-panel__head .label-mono { color: var(--color-accent); margin-bottom: 0.75rem; }

.cc-panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 0.875rem;
}

.cc-panel__intro {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-dark-text);
  max-width: none;
}

.cc-cats {
  margin-block: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cc-cat {
  padding-block: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cc-cat__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.cc-cat__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.cc-cat__desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-dark-text);
  max-width: none;
}

/* ── Interruptor ── */
.cc-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  flex-shrink: 0;
}

.cc-switch__state {
  font-family: var(--font-label);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  order: -1;
}

.cc-cat__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cc-switch__track {
  position: relative;
  display: block;
  width: 46px;
  height: 26px;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.cc-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #fff;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}

.cc-cat__input:checked + .cc-switch__track {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.cc-cat__input:checked + .cc-switch__track::after {
  transform: translateX(20px);
  background-color: var(--color-dark);
}

.cc-cat__input:disabled + .cc-switch__track {
  opacity: 0.45;
  cursor: not-allowed;
}

.cc-cat__input:focus-visible + .cc-switch__track {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.cc-panel__actions { justify-content: flex-end; }

/* Bloquea el scroll del fondo mientras el panel está abierto */
body.cc-open { overflow: hidden; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .cc-banner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
  .cc-banner__actions { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .cc-banner {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 1.25rem;
  }
  .cc-banner__actions .cc-btn,
  .cc-panel__actions .cc-btn {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }
  .cc-btn--ghost { flex-basis: 100%; order: 3; }
  .cc-panel__actions { justify-content: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-banner { transition: none; }
}

/* ── Tabla de cookies (política de cookies) ── */
.tabla-cookies-wrap {
  overflow-x: auto;
  margin-block: 1.5rem 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.tabla-cookies {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tabla-cookies th,
.tabla-cookies td {
  padding: 0.9375rem 1.125rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.tabla-cookies tbody tr:last-child td { border-bottom: 0; }

.tabla-cookies th {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
  background-color: var(--color-surface);
  white-space: nowrap;
}

.tabla-cookies td {
  color: var(--color-secondary);
  line-height: 1.6;
}

.tabla-cookies code {
  font-family: var(--font-label);
  font-size: 0.875em;
  color: var(--color-ink);
  background-color: var(--color-surface);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  white-space: nowrap;
}

/* ── Consentimiento y antispam del formulario ── */

/* Honeypot: fuera de pantalla, invisible para lectores y para el ojo,
   pero rellenable por un bot que recorra el DOM. */
.conv-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.conv-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 2rem;
  max-width: 46rem;
}

.conv-consent__input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--color-ink);
  cursor: pointer;
}

.conv-consent__label {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-secondary);
  cursor: pointer;
}

.conv-consent__label a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.conv-consent__label a:hover { color: var(--color-ink); }

.conv-consent.has-error .conv-consent__label { color: oklch(58% 0.19 25); }
.conv-consent.has-error .conv-consent__input { outline: 2px solid oklch(58% 0.19 25); outline-offset: 2px; }

/* Sobre fondo oscuro (cierre de la home, página de contacto) */
.cierre .conv-consent__label,
.contacto-form-wrap .conv-consent__label {
  color: var(--color-dark-text);
}
.cierre .conv-consent__label a:hover,
.contacto-form-wrap .conv-consent__label a:hover { color: #fff; }
.cierre .conv-consent__input,
.contacto-form-wrap .conv-consent__input { accent-color: var(--color-accent); }

/* ============================================================
   LANDING BURGER
   ============================================================ */

/* El titular tiene tres líneas: baja un punto la escala del hero */
.burger-hero .hero__title {
  font-size: clamp(2.25rem, 5.4vw, 5.5rem);
  line-height: 1.02;
}

.burger-hero .hero__subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}

@media (max-width: 900px) {
  .burger-hero .hero__title { font-size: clamp(2.25rem, 8.5vw, 4rem); }
}

/* ─── El pedido ─── */
.pedido {
  padding-block: var(--space-section);
  background-color: var(--color-dark);
  color: #fff;
}

.pedido__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.pedido__title {
  color: #fff;
  margin-top: 0.75rem;
  max-width: 18ch;
}

.pedido__body {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-dark-text);
}

.pedido__body a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pedido__body a:hover { color: var(--color-accent); }

/* ─── Desplegables dentro de la frase conversacional ───
   Heredan de .conv-input: misma línea inferior, mismo cuerpo.
   Se anula la apariencia nativa y se dibuja la flecha con un SVG
   embebido para que no dependa del sistema operativo. */
.conv-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: auto;
  max-width: 100%;
  padding-right: 1.5em;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23EDFF4C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.1em center;
  background-size: 10px 6px;
}

/* Mientras no se ha elegido nada, se ve como un placeholder */
.conv-select:invalid,
.conv-select:has(option[value=""]:checked) {
  color: rgba(255, 255, 255, 0.45);
}

/* El desplegable nativo se pinta con los colores del sistema:
   forzamos fondo oscuro y texto claro en las opciones. */
.conv-select option {
  background-color: var(--color-dark);
  color: #fff;
}
.conv-select option[value=""] { color: rgba(255, 255, 255, 0.5); }

.pedido .conv-sentence { color: var(--color-dark-text); }

/* En móvil los desplegables siguen en línea dentro de la frase: forzarlos a
   ocupar el ancho completo partía la frase en trozos sueltos y dejaba el
   punto final huérfano en su propia línea. */

/* ============================================================
   PREGUNTAS FRECUENTES
   Encabezados en forma de pregunta y respuestas cortas y
   autónomas: es el formato que los motores generativos
   extraen y citan con más facilidad.
   ============================================================ */
.faq {
  padding-block: var(--space-section);
}

.faq__inner {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 2rem 4rem;
  align-items: start;
}

.faq__header { padding-top: 0.35rem; }

.faq__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-ink);
  margin-top: 0.75rem;
}

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-top: 1px solid var(--color-border);
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
}
.faq__item:last-child { border-bottom: 1px solid var(--color-border); }

.faq__q {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
}

.faq__a {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-secondary);
  max-width: 68ch;
}

.faq__a + .faq__a { margin-top: 0.75rem; }

/* Sobre fondo oscuro */
.faq--dark { background-color: var(--color-dark); }
.faq--dark .faq__title { color: #fff; }
.faq--dark .faq__q { color: #fff; }
.faq--dark .faq__a { color: var(--color-dark-text); }
.faq--dark .faq__item { border-color: rgba(255,255,255,0.14); }

@media (max-width: 860px) {
  .faq__inner { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* ============================================================
   PÁGINA DE CASO
   Estructura larga y escaneable: portada con el resultado en el
   titular, ficha de datos, secciones numeradas, galería del
   trabajo, cita de cierre y salto al siguiente caso.
   ============================================================ */

/* ─── Portada ─── */
.caso-portada {
  padding-top: clamp(110px, 15vw, 170px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

.caso-portada__label { margin-bottom: 0.75rem; }

.caso-portada__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.4vw, 4.75rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  max-width: 20ch;
  margin-bottom: 1.5rem;
}

.caso-portada__lead {
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  line-height: 1.6;
  color: var(--color-secondary);
  max-width: 60ch;
}

/* Ficha de datos: lo que un lector (y un crawler) busca de un vistazo */
.caso-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.caso-ficha__dato dt {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.caso-ficha__dato dd {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0;
}

/* ─── Secciones del caso ─── */
.caso-seccion {
  padding-block: clamp(48px, 7vw, 96px);
  border-top: 1px solid var(--color-border);
}

.caso-seccion__inner {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 2rem 4rem;
  align-items: start;
}

.caso-seccion__num {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
  padding-top: 0.5rem;
}

.caso-seccion__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  max-width: 22ch;
  margin-bottom: 1.5rem;
}

.caso-seccion__body p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-secondary);
  max-width: 68ch;
}
.caso-seccion__body p + p { margin-top: 1.125rem; }

.caso-seccion__lista {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0;
  list-style: none;
}

.caso-seccion__lista li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.5rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-ink);
}

.caso-seccion__lista li::before {
  content: counter(caso-item, decimal-leading-zero) " —";
  counter-increment: caso-item;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
  padding-top: 0.42rem;
}
.caso-seccion__lista { counter-reset: caso-item; }

/* ─── Imágenes ─── */
.caso-figura { margin: clamp(2rem, 4vw, 3rem) 0 0; }

.caso-figura img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 1px 3px oklch(12% 0.012 290 / 0.06), 0 12px 32px oklch(12% 0.012 290 / 0.07);
}

.caso-figura figcaption {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-secondary);
  margin-top: 0.875rem;
}

.caso-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: 2rem;
}
.caso-galeria .caso-figura { margin: 0; }

/* ─── Cierre ─── */
.caso-cierre {
  padding-block: clamp(64px, 9vw, 120px);
  background-color: var(--color-dark);
}

.caso-cierre__quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #fff;
  max-width: 24ch;
  margin: 0.75rem 0 1.5rem;
}

.caso-cierre__meta {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-dark-text);
}

/* ─── Siguiente caso ─── */
.caso-siguiente { border-top: 1px solid var(--color-border); }

.caso-siguiente__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  text-decoration: none;
  transition: opacity 0.25s var(--ease);
}
.caso-siguiente__link:hover { opacity: 0.62; }

.caso-siguiente__nombre {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}

@media (max-width: 860px) {
  .caso-seccion__inner { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .caso-seccion__num { padding-top: 0; }
}


/* ============================================================
   NORMALIZACIÓN DE ETIQUETAS Y CONTROLES
   ------------------------------------------------------------
   Va al final del archivo a propósito: así gana a cualquier
   regla anterior, incluidas las de las media queries.

   Dos familias, dos cuerpos, y ninguna excepción:

   · ETIQUETA  (--text-mono, 14px) — los rótulos que nombran algo:
     "01 — CONTEXTO", "QUÉ HACEMOS", el rol de una persona, el
     campo de una ficha, la cabecera de una tabla.
   · CONTROL   (--text-ctrl, 11px) — lo que se pulsa: botones,
     píldoras, filtros, enlaces de acción.

   Quedan fuera a propósito los textos que NO son etiquetas
   aunque compartan tipografía: mensajes de error, código en
   línea, viñetas y la línea legal del pie.
   ============================================================ */

/* ── Familia ETIQUETA ── */
.label-mono,
.ambitions__number,
.footer__tagline,
.footer__col-title,
.fases-anchor__num,
.fase__label,
.diferenciador__num,
.servicios-indice__link,
.servicio__ficha-campo,
.caso-section__label,
.caso-nav__label,
.insight-card__tag,
.insight-card__date,
.contacto-proceso__title,
.contacto-paso__num,
.form-group label,
.form-optional,
.miembro__rol,
.caso-ficha__dato dt,
.caso-seccion__num,
.caso-figura figcaption,
.caso-cierre__meta,
.tabla-cookies th {
  font-family: var(--font-label);
  font-size: var(--text-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

/* ── Familia CONTROL ── */
.link-underline,
.link-action,
.btn-primary,
.proyectos-filtro,
.conv-submit,
.cc-btn,
.cc-switch__state {
  font-family: var(--font-label);
  font-size: var(--text-ctrl);
  text-transform: uppercase;
  letter-spacing: 0.10em;
}


/* ============================================================
   IMÁGENES EN PÁGINAS INTERIORES
   ------------------------------------------------------------
   Las interiores eran muros de texto: 31 párrafos y 2 imágenes en
   Inteligencia de diseño, 53 y 2 en Qué hacemos. Estos bloques
   meten trabajo real dentro de la lectura, no en una galería al
   final que casi nadie baja a ver.
   ============================================================ */

/* ── Cabecera de /somos/ ── */
.somos-cabecera {
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
}
.somos-cabecera img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* ── Cifras ── */
.cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--color-border);
}

.cifra {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cifra__dato {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}

.cifra__pie {
  color: var(--color-secondary);
}

/* Las tarjetas de fase vuelven a una columna: con la imagen al lado
   el texto se quedaba en una columna demasiado estrecha. */

/* ── Imagen al abrir cada formato de trabajo ── */
.servicio__figura {
  margin: 0 0 clamp(2rem, 3.5vw, 3rem);
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}
.servicio__figura img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* ── Figura suelta en las subpáginas ── */
.pagina-figura {
  margin: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.pagina-figura img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

@media (max-width: 860px) {
  .cifras { grid-template-columns: 1fr; gap: 1.25rem; }
  .cifra { flex-direction: row; align-items: baseline; gap: 0.75rem; }
}


/* ============================================================
   LA BURGER, CLICABLE
   ------------------------------------------------------------
   El elemento que vuela lleva pointer-events:none para no comerse
   los clics de la página; el enlace lo reactiva solo sobre él.
   Al pasar por encima aparece un círculo azul por detrás — el azul
   del diner al que lleva el enlace.
   ============================================================ */
.burger-vuelo__enlace {
  position: relative;
  display: block;
  pointer-events: auto;
  cursor: pointer;
}

.burger-vuelo__circulo {
  position: absolute;
  /* Descentrado, en la esquina inferior derecha: no es un botón que
     grita "púlsame", es una pista escondida que se descubre. */
  top: 64%;
  left: 70%;
  width: 15%;
  aspect-ratio: 1;
  background: var(--diner-azul);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  z-index: 2;                  /* encima de la burger */
  pointer-events: none;
  display: grid;
  place-items: center;
}

/* Flecha dentro del círculo: dice a dónde lleva */
.burger-vuelo__circulo::after {
  content: "→";
  font-family: var(--font-sans);
  font-size: clamp(0.875rem, 1.6vw, 1.25rem);
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1;
}

.burger-vuelo__enlace:hover .burger-vuelo__circulo,
.burger-vuelo__enlace:focus-visible .burger-vuelo__circulo {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.burger-vuelo__enlace:focus-visible {
  outline: 3px solid var(--diner-azul);
  outline-offset: 12px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .burger-vuelo__circulo { transition: opacity 0.2s ease; transform: translate(-50%, -50%) scale(1); }
}


/* ============================================================
   LANDING /burger/ — DINER AMERICANO
   ------------------------------------------------------------
   Mismas tipografías que el resto de la web —BDO Grotesk y Arbeit
   Technik— y la misma burger cromada. Lo que cambia es el color y
   el damero: azul cobalto, blanco y amarillo, como las referencias.
   Todo cuelga de .diner para no contaminar el resto del sitio.
   ============================================================ */
.diner {
  background: var(--diner-azul);
  color: #fff;
}

.diner .nav,
.diner .nav.scrolled { background: transparent; }

/* ── Damero ──
   Con conic-gradient sale el tablero limpio; con linear-gradient a 45°
   salen triángulos y el damero queda en diagonal. */
.diner-damero {
  --casilla: 44px;
  height: calc(var(--casilla) * 2);
  background-image:
    conic-gradient(#fff 90deg, transparent 90deg 180deg, #fff 180deg 270deg, transparent 270deg);
  background-size: calc(var(--casilla) * 2) calc(var(--casilla) * 2);
}

/* ── Hero ── */
.diner-hero {
  /* El mínimo de arriba deja pasar el nav fijo (80px): con 48px el
     kicker se montaba sobre el logo en móvil. */
  padding-block: clamp(104px, 11vw, 150px) 0;
  text-align: center;
  position: relative;
  /* Sin recorte: la burger tiene que poder desbordar hacia abajo y
     pisar las secciones siguientes al hacer scroll. */
  overflow: visible;
}

.diner-hero__kicker {
  color: var(--diner-amarillo);
  margin-bottom: 1.25rem;
}

.diner-hero__title {
  font-family: var(--font-display);
  /* Titular gigante: casi a sangre en la pantalla. La palabra más
     larga —"comiendo"— manda el mínimo para que no desborde en móvil. */
  font-size: clamp(3.25rem, 13.5vw, 11rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.05em;
  /* Un solo color en el titular y sin versales: las mayúsculas se
     reservan para las etiquetas monoespaciadas. */
  color: var(--diner-amarillo);
  margin-bottom: 1.5rem;
}

.diner-hero__lead {
  font-size: clamp(1.0625rem, 2vw, 1.375rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
  max-width: 44ch;
  margin-inline: auto;
}

/* Envoltorio: es la capa que el JS mueve y gira con el scroll. Va con
   z-index alto y pointer-events:none para pisar el texto de abajo sin
   bloquear los clics. Queda por debajo del nav (100). */
.diner-hero__burger-wrap {
  position: relative;
  z-index: 40;
  width: min(560px, 78%);
  /* El margen inferior negativo recorta el hueco vacío que la burger
     deja al subir: acerca el damero sin mover la burger. */
  margin: clamp(1.5rem, 4vw, 3rem) auto clamp(-190px, -15vw, -100px);
  pointer-events: none;
  will-change: transform;
}

.diner-hero__burger {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.5));
  animation: burger-float 7.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .diner-hero__burger-wrap { transform: none !important; }
}

/* ── Tarjetas blancas ── */
.diner-seccion { padding-block: clamp(48px, 7vw, 92px); }

.diner-tarjeta {
  background: var(--diner-crema);
  color: var(--color-ink);
  border-radius: 20px;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  box-shadow: 0 18px 44px rgba(0,0,0,0.18);
}

.diner-tarjeta h2,
.diner-tarjeta .h2 { color: var(--color-ink); }

.diner-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.diner-punto__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--diner-azul);
  color: var(--diner-amarillo);
  font-family: var(--font-label);
  font-size: var(--text-mono);
  margin-bottom: 1rem;
}

.diner-punto__title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.diner-punto__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-secondary);
}

/* ── Cinta que corre ── */
.diner-cinta {
  background: var(--diner-amarillo);
  color: var(--color-ink);
  padding-block: 0.875rem;
  overflow: hidden;
  white-space: nowrap;
}

/* Dos mitades idénticas y sin hueco entre ellas: al desplazar
   exactamente el 50% el salto es invisible. Con `gap` entre mitades
   —como estaba— el bucle se nota y parece que se para. */
.diner-cinta__pista {
  display: flex;
  width: max-content;
  font-family: var(--font-label);
  font-size: var(--text-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  animation: diner-desfile 34s linear infinite;
  will-change: transform;
}

.diner-cinta__mitad {
  display: flex;
  flex-shrink: 0;
}

.diner-cinta__plato {
  padding-inline: 1.5rem;
  white-space: nowrap;
}

.diner-cinta__plato::after {
  content: "·";
  margin-left: 1.5rem;
  opacity: 0.5;
}

.diner-cinta:hover .diner-cinta__pista { animation-play-state: paused; }

@keyframes diner-desfile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Formulario sobre la tarjeta ── */
.diner .conv-sentence { color: var(--color-ink); }
.diner .conv-input {
  color: var(--color-ink);
  border-bottom-color: var(--diner-azul);
}
.diner .conv-input::placeholder { color: rgba(10,56,214,0.55); }
.diner .conv-submit {
  background: var(--diner-azul);
  color: #fff;
  border-color: var(--diner-azul);
}
.diner .conv-submit:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--diner-amarillo);
}

/* El pedido, a dos columnas: el titular a la izquierda y la comanda
   a la derecha, con el mismo cartel de borde grueso y sombra sólida
   que las fichas de "la casa recomienda". */
.diner .pedido__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.diner .pedido__header { padding-top: clamp(0.5rem, 2vw, 2rem); }

.diner .pedido__form.diner-ficha {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* Dentro de la ficha la frase se compone más apretada: la caja es
   más estrecha que antes y con el interlineado ancho se rompía. */
.diner .pedido__form .conv-sentence {
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
  line-height: 2.1;
}

.diner .pedido__form .conv-form__actions { margin-top: 1.75rem; }

@media (max-width: 900px) {
  .diner .pedido__inner { grid-template-columns: 1fr; }
}

/* El bloque de pedido venía con fondo oscuro del diseño anterior:
   dentro del diner va sobre el azul, y la tarjeta hace el contraste. */
.diner .pedido,
.diner .cierre {
  background: transparent;
  margin-inline: 0;
}

.diner .pedido__title,
.diner .pedido__body { color: #fff; }
.diner .pedido__body a { color: var(--diner-amarillo); }

.diner .footer { background: var(--diner-azul-osc); }

@media (prefers-reduced-motion: reduce) {
  .diner-cinta__pista { animation: none; }
  .diner-hero__burger { animation: none; }
}

/* El desplegable sin elegir usaba un gris pensado para fondo oscuro:
   sobre la tarjeta crema no se leía. */
/* En el diseño original el desplegable sin elegir iba en blanco al 45%
   porque vivía sobre fondo oscuro. Sobre la tarjeta crema hay que
   repetir los tres selectores —incluido :has()— o gana el original. */
.diner .conv-select,
.diner .conv-select:invalid,
.diner .conv-select:has(option[value=""]:checked),
.diner .conv-input {
  color: var(--diner-azul);
}
.diner .conv-select option {
  background-color: var(--diner-crema);
  color: var(--color-ink);
}
.diner .conv-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230A38D6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* El nav del diner no necesita tratamiento propio: usa .nav--inverted,
   la variante que el sistema ya tenía para fondos oscuros. Arriba va
   transparente con los enlaces en blanco; al hacer scroll aparece la
   píldora blanca y los enlaces se vuelven oscuros, igual que en el
   resto de la web. Forzarle un fondo propio era lo que dejaba el logo
   pegado al borde redondeado y la píldora sucia sobre el damero. */
.diner .nav.scrolled .nav__inner {
  background: rgba(255, 255, 255, 0.94);
}

.diner .nav--inverted .nav__logo-img { filter: brightness(0) invert(1); }
.diner .nav--inverted.scrolled .nav__logo-img { filter: none; }

/* "Hablemos" va sobre píldora amarilla: su texto se queda oscuro
   aunque el resto del menú pase a blanco. */
.diner .nav--inverted .nav__links a.nav-cta { color: var(--color-ink); }
.diner .conv-consent__label { color: var(--color-secondary); }
.diner .conv-consent__label a { color: var(--diner-azul); }

/* ── La carta: cabecera y fichas tipo pizarra de diner ───────── */
.diner-carta__cabecera {
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.diner-carta__titulo {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
}

.diner-ficha {
  background: var(--diner-crema);
  color: var(--color-ink);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  /* Borde grueso + desplazamiento sólido: el cartel de diner, sin
     sombras difusas que aquí quedarían blandas. */
  border: 3px solid var(--color-ink);
  box-shadow: 8px 8px 0 var(--color-ink);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.diner-ficha:hover {
  transform: translate(-4px, -4px);
  box-shadow: 14px 14px 0 var(--diner-amarillo);
}

.diner-ficha__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.875rem;
  margin-bottom: 1.125rem;
  border-bottom: 2px dashed rgba(0,0,0,0.22);
}

.diner-ficha__num {
  font-family: var(--font-label);
  font-size: var(--text-mono);
  color: var(--color-ink);
  background: var(--diner-amarillo);
  border: 2px solid var(--color-ink);
  border-radius: 100px;
  padding: 0.2rem 0.7rem;
  line-height: 1.4;
}

.diner-ficha__precio { color: var(--diner-azul); }

.diner-ficha__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.625rem;
}

.diner-ficha__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-secondary);
  margin-bottom: 1.25rem;
}

.diner-ficha__pie {
  color: var(--color-ink);
  padding-top: 0.875rem;
  border-top: 2px dashed rgba(0,0,0,0.22);
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .diner-ficha { transition: none; }
}