@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Inter:wght@300..700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* PALETA PRIMITIVA */
  --ink: #0A0A0F;
  --paper: #FAFAF6;
  --oro: #BE953E;
  --rojo: #E53935;
  --azul-digital: #3D9BE9;

  /* Tonal ink */
  --ink-900: #111116;
  --ink-800: #1C1C24;
  --ink-700: #2C2C38;
  --ink-600: #3E3E50;
  --ink-500: #5A5A72;
  --ink-400: #7A7A96;
  --ink-300: #9E9EB8;
  --ink-200: #C4C4D8;
  --ink-100: #E4E4EF;
  --ink-50: #F2F2F8;

  /* Tonal paper */
  --paper-800: #F0F0EB;
  --paper-600: #E8E8E2;
  --paper-400: #D8D8D0;

  /* Tonal oro */
  --oro-900: #6B4F18;
  --oro-700: #96721F;
  --oro-300: #D4B573;
  --oro-100: #EDD9A8;

  /* Tonal rojo */
  --rojo-700: #B92A2A;
  --rojo-300: #EF7070;
  --rojo-100: #FBBDBD;

  /* Tonal azul */
  --azul-700: #2B72B0;
  --azul-300: #79BDF0;
  --azul-100: #BDE0FA;

  /* SEMÁNTICOS DE COLOR — DARK (base del proyecto) */
  --color-brand-primary: var(--oro);
  --color-brand-secondary: var(--rojo);
  --color-brand-tertiary: var(--azul-digital);
  --color-action-primary: var(--rojo);
  --color-action-primary-hover: var(--rojo-700);
  --color-action-secondary: var(--oro);
  --color-action-secondary-hover: var(--oro-700);
  --color-bg-base: var(--ink);
  --color-bg-subtle: var(--ink-800);
  --color-bg-surface: var(--ink-700);
  --color-bg-elevated: var(--ink-600);
  --color-text-primary: var(--paper);
  --color-text-secondary: var(--ink-300);
  --color-text-muted: var(--ink-400);
  --color-text-brand: var(--oro);
  --color-text-action: var(--rojo);
  --color-border-default: var(--ink-700);
  --color-border-subtle: var(--ink-800);
  --color-border-brand: var(--oro-700);
  --color-bg-announcement: var(--oro-900);
  --color-text-announcement: var(--oro-100);

  /* TIPOGRAFÍA — FAMILIA */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Fraunces', 'Georgia', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-body: var(--font-serif);

  /* TIPOGRAFÍA — ESCALA FLUID */
  --font-size-display-xl: clamp(4rem, 8vw + 1rem, 9rem);
  --font-size-display-lg: clamp(3rem, 6vw + 0.75rem, 6.5rem);
  --font-size-display-md: clamp(2.25rem, 4vw + 0.5rem, 4.5rem);
  --font-size-display-sm: clamp(1.75rem, 2.5vw + 0.5rem, 3rem);
  --font-size-heading-xl: clamp(1.5rem, 2vw + 0.5rem, 2.5rem);
  --font-size-heading-lg: clamp(1.25rem, 1.5vw + 0.4rem, 2rem);
  --font-size-heading-md: clamp(1.125rem, 1vw + 0.35rem, 1.5rem);
  --font-size-heading-sm: clamp(1rem, 0.75vw + 0.3rem, 1.25rem);
  --font-size-body-xl: 1.25rem;
  --font-size-body-l: 1.125rem;
  --font-size-body-m: 1.0625rem;
  --font-size-body-s: 0.875rem;
  --font-size-body-xs: 0.75rem;
  --font-size-mono: 0.9375rem;

  /* TIPOGRAFÍA — PESOS */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* TIPOGRAFÍA — LINE HEIGHT */
  --line-height-none: 1;
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 1.75;
  --line-height-body: var(--line-height-relaxed);

  /* TIPOGRAFÍA — TRACKING */
  --tracking-tight: -0.04em;
  --tracking-snug: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.2em;

  /* ESCALA ESPACIADO */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;
  --space-l: var(--space-8);

  /* Grupos semánticos */
  --space-section-xs: var(--space-8);
  --space-section-sm: var(--space-12);
  --space-section-md: var(--space-20);
  --space-section-lg: var(--space-28);
  --space-section-xl: var(--space-40);
  --space-block-sm: var(--space-6);
  --space-block-md: var(--space-12);
  --space-block-lg: var(--space-16);
  --space-stack-sm: var(--space-4);
  --space-stack-md: var(--space-6);
  --space-stack-lg: var(--space-8);

  /* DEFAULTS SEMÁNTICOS — MODO EDITORIAL (1.13) */
  --space-section-default: var(--space-section-lg);
  --space-block-default: var(--space-block-lg);
  --space-stack-default: var(--space-stack-lg);
  --shadow-card-default: var(--shadow-e0);
  --radius-card-default: var(--radius-lg);
  --max-width-content: 65ch;

  /* LAYOUT */
  --space-container-x: clamp(1.25rem, 4vw, 3rem);
  --max-width-base: 1440px;
  --max-width-container: 1200px;
  --max-width-narrow: 48ch;

  /* RADIUS */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 9999px;
  --radius-card: var(--radius-lg);
  --radius-card-bento: var(--radius-2xl);
  --radius-button: var(--radius-sm);
  --radius-input: var(--radius-sm);
  --radius-badge: var(--radius-pill);
  --radius-search-input: var(--radius-pill);
  --radius-mockup: var(--radius-md);
  --radius-demo-frame: var(--radius-lg);

  /* SOMBRAS (ink-base — alto contraste) */
  --shadow-e0: none;
  --shadow-e1: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-e2: 0 4px 6px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
  --shadow-e3: 0 10px 15px rgba(0,0,0,.5), 0 4px 6px rgba(0,0,0,.3);
  --shadow-e4: 0 20px 25px rgba(0,0,0,.5), 0 10px 10px rgba(0,0,0,.3);
  --shadow-modal: var(--shadow-e4);
  --shadow-search-modal: var(--shadow-modal);
  --shadow-demo-frame: var(--shadow-e2);
  --shadow-mockup: var(--shadow-e3);

  /* Z-INDEX */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-announcement: 250;
  --z-overlay: 300;
  --z-modal: 400;
  --z-search-modal: var(--z-modal);
  --z-popup: var(--z-modal);
  --z-toast: 500;
  --z-tooltip: 600;
  --z-max: 9999;

  /* MOTION */
  --motion-duration-instant: 80ms;
  --motion-duration-fast: 150ms;
  --motion-duration-base: 250ms;
  --motion-duration-slow: 400ms;
  --motion-duration-slower: 600ms;
  --motion-ease-linear: linear;
  --motion-ease-in: cubic-bezier(.4,0,1,1);
  --motion-ease-out: cubic-bezier(0,0,.2,1);
  --motion-ease-standard: cubic-bezier(.4,0,.2,1);
  --motion-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --motion-ease-editorial: cubic-bezier(.16,1,.3,1);
  --marquee-duration: 45s;

  /* DIVISORES — 2.7 */
  --divider-color: var(--color-bg-subtle);
  --divider-color-accent: var(--color-brand-primary);
  --divider-height-sm: 40px;
  --divider-height-md: 80px;
  --divider-height-lg: 120px;
  --divider-transition-duration: var(--motion-duration-slower);
  --divider-transition-easing: var(--motion-ease-standard);

  /* CAROUSEL — 1.12 */
  --carousel-gap: var(--space-4);
  --carousel-snap-padding: var(--space-container-x);
  --carousel-control-size: 2.75rem;
  --carousel-transition-duration: var(--motion-duration-base);
  --carousel-transition-easing: var(--motion-ease-standard);

  /* MISC 1.12 */
  --bg-demo-loader: var(--color-bg-subtle);
  --bg-showcase: var(--color-bg-subtle);
}

/* MODO EDITORIAL — selector explícito para secciones mixtas (1.13) */
[data-mode="editorial"] {
  --font-body: var(--font-serif);
  --font-size-body-m: 1.0625rem;
  --line-height-body: var(--line-height-relaxed);
  --space-section-default: var(--space-section-lg);
  --space-block-default: var(--space-block-lg);
  --space-stack-default: var(--space-stack-lg);
  --shadow-card-default: var(--shadow-e0);
  --radius-card-default: var(--radius-lg);
  --max-width-content: 65ch;
}

/* MODO CORPORATE — para secciones de mayor densidad si aplica */
[data-mode="corporate"] {
  --font-body: var(--font-sans);
  --font-size-body-m: 1rem;
  --line-height-body: var(--line-height-normal);
  --space-section-default: var(--space-section-md);
  --space-block-default: var(--space-block-md);
  --space-stack-default: var(--space-stack-md);
  --shadow-card-default: var(--shadow-e1);
  --radius-card-default: var(--radius-card);
  --max-width-content: 72ch;
}

/* TEMA CLARO — secciones paper (alternancia rítmica del brief) */
[data-theme="light"] {
  --color-bg-base: var(--paper);
  --color-bg-subtle: var(--paper-800);
  --color-bg-surface: var(--paper-600);
  --color-bg-elevated: var(--paper-400);
  --color-text-primary: var(--ink);
  --color-text-secondary: var(--ink-600);
  --color-text-muted: var(--ink-500);
  --color-border-default: var(--paper-400);
  --color-border-subtle: var(--paper-600);
  --shadow-e1: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-e2: 0 4px 6px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-e3: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.04);
}

/* ACCESIBILIDAD — REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant: 0ms;
    --motion-duration-fast: 0ms;
    --motion-duration-base: 0ms;
    --motion-duration-slow: 0ms;
    --motion-duration-slower: 0ms;
    --marquee-duration: 9999s;
    --divider-transition-duration: 0ms;
    --carousel-transition-duration: 0ms;
  }
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
}

p { max-width: var(--max-width-content); }

/* Tratamiento fotográfico editorial (brief §photo_tone) */
.photo--editorial {
  filter: contrast(1.08) saturate(0.95) brightness(0.97);
}

/* CONTAINERS */
.container {
  width: 100%;
  max-width: var(--max-width-container);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
}

.container--narrow {
  width: 100%;
  max-width: var(--max-width-content);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
}

/* Accesibilidad helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}/* ============================================================
 * HACCE v2 — CSS de proyecto (layout + chrome + organisms home)
 * Se concatena DESPUÉS de los tokens base de shared_assets.
 * Plain CSS, mobile-first, BEM, tokens var(--*) del proyecto.
 * ============================================================ */

/* --- Micro-tipografía editorial global (dirección visual §1.4) --- */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; hyphens: auto; }

.type-mono {
  font-family: var(--font-mono);
  font-size: var(--font-size-body-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-brand);
}

/* Texto con gradiente de marca (Effortel-style), activado por JS al entrar */
[data-text-grad].is-grad {
  background: linear-gradient(96deg, var(--color-text-primary) 0%, var(--oro) 55%, var(--azul-digital) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
 * CLASES DE PÁGINA (hooks de <body>) — cobertura contrato
 * ============================================================ */
.page-home {}
.page-template-U-A {}
/* El header va fijo encima del hero; el hero ya reserva su propio alto */
.page-has-hero .site-header { color: var(--paper); }

/* ============================================================
 * LAYOUT — plantilla U.A y ritmo de secciones
 * ============================================================ */
.u-a { display: block; }

.u-a__section {
  padding-block: clamp(var(--space-16), 10vw, var(--space-40));
}
.u-a__section--full-bleed { width: 100%; }
.u-a__section--contained > * { /* organisms ya gestionan su container */ }

/* Tematización por fondo: paper => tema claro, ink => tema oscuro base */
[data-bg="paper"] {
  --color-bg-base: var(--paper);
  --color-bg-subtle: var(--paper-800);
  --color-bg-surface: var(--paper-600);
  --color-bg-elevated: var(--paper-400);
  --color-text-primary: var(--ink);
  --color-text-secondary: var(--ink-600);
  --color-text-muted: var(--ink-500);
  --color-border-default: var(--paper-400);
  --color-border-subtle: var(--paper-600);
  --shadow-e1: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-e2: 0 6px 16px rgba(10,10,15,.08);
  --shadow-e3: 0 18px 40px rgba(10,10,15,.10);
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
}
[data-bg="ink"] {
  background-color: var(--ink);
  color: var(--paper);
}

/* El hero ocupa su propia sección sin padding (full-bleed real) */
.u-a__section--full-bleed:has(.hero) { padding-block: 0; }

/* Contenedor reutilizable interno de organisms */
.section-inner {
  width: 100%;
  max-width: var(--max-width-container);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
}

/* Eyebrow estándar de sección */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-body-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-brand);
  margin-bottom: var(--space-6);
}

/* ============================================================
 * BOTONES (.btn) — usados por el chrome y CTAs
 * ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--motion-duration-base) var(--motion-ease-spring),
              background-color var(--motion-duration-fast) var(--motion-ease-standard),
              color var(--motion-duration-fast) var(--motion-ease-standard);
  will-change: transform;
}
.btn--sm { padding: var(--space-2) var(--space-5); font-size: var(--font-size-body-xs); }
.btn--primary {
  background-color: var(--color-action-primary);
  color: var(--paper);
}
.btn--primary:hover { background-color: var(--color-action-primary-hover); }
.btn--secondary {
  background-color: transparent;
  color: currentColor;
  border-color: var(--color-border-default);
}
.btn--secondary:hover { border-color: var(--color-text-brand); color: var(--color-text-brand); }

/* ============================================================
 * HEADER (site-header) — sticky, overlay sobre hero
 * ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-sticky);
  color: var(--paper);
  transition: background-color var(--motion-duration-base) var(--motion-ease-standard),
              box-shadow var(--motion-duration-base) var(--motion-ease-standard),
              color var(--motion-duration-base) var(--motion-ease-standard);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  max-width: var(--max-width-base);
  margin-inline: auto;
  padding: var(--space-4) var(--space-container-x);
}
.site-header__logo { flex: 0 0 auto; display: inline-flex; }
.site-header__logo img { height: 32px; width: auto; filter: brightness(0) invert(1); transition: filter var(--motion-duration-base); }

.site-header__nav { margin-inline: auto; }
.site-header__nav-list { display: flex; align-items: center; gap: var(--space-1); }
.site-header__nav-item { position: relative; display: flex; align-items: center; }
.site-header__nav-link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-body-s);
  letter-spacing: var(--tracking-wide);
  color: currentColor;
  opacity: .85;
  transition: opacity var(--motion-duration-fast);
}
.site-header__nav-link:hover { opacity: 1; }
.site-header__dropdown-toggle {
  background: none; border: 0; color: currentColor; cursor: pointer;
  display: inline-flex; align-items: center; padding: var(--space-2);
}
.site-header__nav-arrow { transition: transform var(--motion-duration-fast); }
.site-header__nav-item--has-dropdown[data-open="true"] .site-header__nav-arrow { transform: rotate(180deg); }

.site-header__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  padding: var(--space-3);
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-e3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard),
              transform var(--motion-duration-fast) var(--motion-ease-standard),
              visibility var(--motion-duration-fast);
}
.site-header__nav-item--has-dropdown:hover .site-header__dropdown,
.site-header__nav-item--has-dropdown[data-open="true"] .site-header__dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.site-header__dropdown-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--font-size-body-s);
  color: var(--ink-100);
  transition: background-color var(--motion-duration-fast), color var(--motion-duration-fast);
}
.site-header__dropdown-link:hover { background: var(--ink-700); color: var(--paper); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }

/* Estado scrolled: fondo sólido translúcido */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--ink-700);
}

/* Barra de progreso de scroll */
.scroll-progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--oro), var(--azul-digital));
  transition: width 80ms linear;
}

/* Hamburguesa (oculta en desktop) */
.site-header__menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: 0; cursor: pointer;
}
.site-header__menu-bar {
  display: block; height: 2px; width: 22px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--motion-duration-fast), opacity var(--motion-duration-fast);
}

/* ============================================================
 * NAV MÓVIL (drawer)
 * ============================================================ */
.nav-mobile {
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  visibility: hidden;
  pointer-events: none;
}
.nav-mobile.is-open { visibility: visible; pointer-events: auto; }
.nav-mobile__overlay {
  position: absolute; inset: 0;
  background: rgba(5,5,8,.6);
  opacity: 0;
  transition: opacity var(--motion-duration-base);
}
.nav-mobile.is-open .nav-mobile__overlay { opacity: 1; }
.nav-mobile__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(88vw, 380px);
  background: var(--ink-900);
  color: var(--paper);
  padding: var(--space-5) var(--space-6) var(--space-10);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--motion-duration-slow) var(--motion-ease-editorial);
  box-shadow: var(--shadow-e4);
}
.nav-mobile.is-open .nav-mobile__panel { transform: translateX(0); }
.nav-mobile__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-8); }
.nav-mobile__logo img { height: 26px; filter: brightness(0) invert(1); }
.nav-mobile__close { background: none; border: 0; color: var(--paper); cursor: pointer; padding: var(--space-2); }
.nav-mobile__list { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-mobile__row { display: flex; align-items: center; justify-content: space-between; }
.nav-mobile__link {
  display: block; padding: var(--space-3) 0;
  font-family: var(--font-display);
  font-size: var(--font-size-heading-md);
  color: var(--paper);
}
.nav-mobile__toggle { background: none; border: 0; color: var(--ink-300); cursor: pointer; padding: var(--space-3); }
.nav-mobile__item--has-children[data-open="true"] .nav-mobile__toggle svg { transform: rotate(180deg); }
.nav-mobile__toggle svg { transition: transform var(--motion-duration-fast); }
.nav-mobile__sub {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--motion-duration-base) var(--motion-ease-standard);
  padding-left: var(--space-3);
}
.nav-mobile__item--has-children[data-open="true"] .nav-mobile__sub { grid-template-rows: 1fr; }
.nav-mobile__sub > * { overflow: hidden; }
.nav-mobile__sub-link {
  display: block; padding: var(--space-2) 0;
  font-family: var(--font-sans); font-size: var(--font-size-body-m);
  color: var(--ink-200);
}
.nav-mobile__sub-link:hover { color: var(--oro); }
.nav-mobile__item--cta { margin-top: var(--space-6); }
.nav-mobile__cta { width: 100%; }

/* ============================================================
 * ORGANISM A.2.1 — HERO (full-bleed-image)
 * ============================================================ */
.hero { position: relative; isolation: isolate; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; top: -8%; left: 0; right: 0; height: 116%; z-index: -2; will-change: transform; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { /* overlay para legibilidad */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,15,.55) 0%, rgba(10,10,15,.35) 35%, rgba(10,10,15,.85) 100%);
}
.hero__content {
  max-width: var(--max-width-base);
  width: 100%;
  margin-inline: auto;
  padding: var(--space-32) var(--space-container-x) clamp(var(--space-16), 8vw, var(--space-28));
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-body-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--oro-300);
  margin-bottom: var(--space-6);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display-xl);
  line-height: .98;
  letter-spacing: var(--tracking-tight);
  color: var(--paper);
  max-width: 16ch;
  margin-bottom: var(--space-8);
}
.hero__subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-body-xl);
  line-height: var(--line-height-normal);
  color: var(--ink-100);
  max-width: 52ch;
  margin-bottom: var(--space-12);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero__cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--font-size-body-s);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-button);
  transition: transform var(--motion-duration-base) var(--motion-ease-spring),
              background-color var(--motion-duration-fast), color var(--motion-duration-fast);
}
.hero__cta--primary { background: var(--rojo); color: var(--paper); }
.hero__cta--primary:hover { background: var(--rojo-700); }
.hero__cta--secondary { border: 1px solid rgba(250,250,246,.35); color: var(--paper); }
.hero__cta--secondary:hover { border-color: var(--oro); color: var(--oro-300); }

/* ============================================================
 * ORGANISM A.2.2 — INTRO SECTION
 * ============================================================ */
.intro-section__container {
  max-width: 72ch;
  margin-inline: auto;
  padding-inline: var(--space-container-x);
  text-align: left;
}
.intro-section__kicker {
  font-family: var(--font-mono);
  font-size: var(--font-size-body-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-brand);
  margin-bottom: var(--space-6);
}
.intro-section__manifesto h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-display-sm);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-8);
}
.intro-section__manifesto p {
  font-size: var(--font-size-body-l);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  max-width: 65ch;
}

/* ============================================================
 * ORGANISM A.3.13 — BENTO GRID (servicios)
 * ============================================================ */
.bento-grid { max-width: var(--max-width-container); margin-inline: auto; padding-inline: var(--space-container-x); }
.bento-grid__header { margin-bottom: var(--space-12); }
.bento-grid__title {
  font-family: var(--font-display);
  font-size: var(--font-size-display-sm);
  letter-spacing: var(--tracking-snug);
}
.bento-grid__items {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
}
.bento-grid__item {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 6;
  padding: var(--space-8);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card-bento);
  min-height: 220px;
  overflow: hidden;
  transition: transform var(--motion-duration-base) var(--motion-ease-editorial),
              border-color var(--motion-duration-base);
}
.bento-grid__item:hover { transform: translateY(-4px); border-color: var(--color-border-brand); }
.bento-grid__item--featured { grid-column: span 6; }
.bento-grid__index {
  font-family: var(--font-mono);
  font-size: var(--font-size-body-s);
  color: var(--color-text-brand);
  margin-bottom: var(--space-4);
}
.bento-grid__label {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-md);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-3);
}
.bento-grid__text {
  font-size: var(--font-size-body-m);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}
.bento-grid__cta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-body-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-brand);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.bento-grid__cta::after { content: "→"; transition: transform var(--motion-duration-fast); }
.bento-grid__item:hover .bento-grid__cta::after { transform: translateX(4px); }

@media (min-width: 760px) {
  .bento-grid__item { grid-column: span 2; }
  .bento-grid__item--featured { grid-column: span 4; }
}

/* ============================================================
 * ORGANISM A.3.15 — CASE STUDIES GRID (proyectos)
 * ============================================================ */
.case-studies-grid { max-width: var(--max-width-container); margin-inline: auto; padding-inline: var(--space-container-x); }
.case-studies-grid__title {
  font-family: var(--font-display);
  font-size: var(--font-size-display-sm);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-12);
}
.case-studies-grid__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--space-6);
}
.case-studies-grid__card { border-radius: var(--radius-lg); overflow: hidden; }
.case-studies-grid__card-link { display: block; }
.case-studies-grid__media { display: block; position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-lg); background: var(--ink-800); }
.case-studies-grid__hero {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--motion-ease-out), filter var(--motion-duration-slow);
  filter: contrast(1.05) saturate(.96);
}
.case-studies-grid__card-link:hover .case-studies-grid__hero { transform: scale(1.05); }
.case-studies-grid__client {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-md);
  letter-spacing: var(--tracking-snug);
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}
.case-studies-grid__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.case-studies-grid__tag {
  font-family: var(--font-mono);
  font-size: var(--font-size-body-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  padding: 2px var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
}
.case-studies-grid__more {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-12);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--font-size-body-s);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-brand);
}
.case-studies-grid__more::after { content: "→"; transition: transform var(--motion-duration-fast); }
.case-studies-grid__more:hover::after { transform: translateX(4px); }

/* ============================================================
 * ORGANISM A.3.5 — LOGO WALL (clientes, modo texto)
 * ============================================================ */
.logo-wall { max-width: var(--max-width-container); margin-inline: auto; padding-inline: var(--space-container-x); text-align: center; }
.logo-wall__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-body-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  margin-bottom: var(--space-10);
}
.logo-wall__logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-8) var(--space-12);
}
.logo-wall__name {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-md);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text-secondary);
  opacity: .75;
  transition: opacity var(--motion-duration-base), color var(--motion-duration-base);
}
.logo-wall__item:hover .logo-wall__name { opacity: 1; color: var(--color-text-brand); }

/* ============================================================
 * ORGANISM A.3.2 — STATS SECTION
 * ============================================================ */
.stats-section { max-width: var(--max-width-container); margin-inline: auto; padding-inline: var(--space-container-x); }
.stats-section__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10) var(--space-6);
}
.stats-section__item { border-top: 1px solid var(--ink-700); padding-top: var(--space-6); }
.stats-section__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-size-display-md);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--paper);
}
.stats-section__value .stat-suffix { color: var(--oro); }
.stats-section__label {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-body-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-300);
}
@media (min-width: 760px) { .stats-section__items { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
 * ORGANISM A.3.4 — TESTIMONIALS
 * ============================================================ */
.testimonials-section { max-width: var(--max-width-container); margin-inline: auto; padding-inline: var(--space-container-x); }
.testimonials-section__title {
  font-family: var(--font-display);
  font-size: var(--font-size-display-sm);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-12);
}
.testimonials-section__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-6); }
.testimonials-section__item {
  padding: var(--space-8);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}
.testimonials-section__quote p {
  font-family: var(--font-serif);
  font-size: var(--font-size-body-l);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}
.testimonials-section--pending { text-align: center; }
.testimonials-section__pending-note {
  max-width: 48ch; margin-inline: auto; text-align: center;
  padding: var(--space-12);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-body-l);
}

/* ============================================================
 * ORGANISM A.3.7 — CTA BLOCK (pre-footer)
 * ============================================================ */
.cta-block { max-width: var(--max-width-content); margin-inline: auto; padding-inline: var(--space-container-x); text-align: center; }
.cta-block__title {
  font-family: var(--font-display);
  font-size: var(--font-size-display-md);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
}
.cta-block__subtitle {
  font-size: var(--font-size-body-l);
  color: var(--ink-200);
  margin-inline: auto;
  margin-bottom: var(--space-10);
  max-width: 52ch;
}
.cta-block__ctas { display: flex; justify-content: center; gap: var(--space-4); }

/* ============================================================
 * FOOTER (site-footer)
 * ============================================================ */
.site-footer { background: var(--ink-900); color: var(--ink-100); padding-top: var(--space-24); border-top: 1px solid var(--ink-700); }
.site-footer__inner {
  max-width: var(--max-width-container);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
  display: grid;
  gap: var(--space-16);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-16);
}
.site-footer__tagline { font-family: var(--font-display); font-size: var(--font-size-heading-md); color: var(--paper); margin: var(--space-5) 0 var(--space-6); max-width: 24ch; }
.site-footer__logo img { height: 28px; filter: brightness(0) invert(1); }
.site-footer__social { display: flex; gap: var(--space-3); }
.site-footer__social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: 1px solid var(--ink-700); color: var(--ink-200);
  transition: border-color var(--motion-duration-fast), color var(--motion-duration-fast), transform var(--motion-duration-fast);
}
.site-footer__social-link:hover { border-color: var(--oro); color: var(--oro); transform: translateY(-2px); }
.site-footer__nav-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-10); }
.site-footer__nav-heading {
  font-family: var(--font-mono);
  font-size: var(--font-size-body-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-400);
  margin-bottom: var(--space-5);
}
.site-footer__nav-list { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__nav-link, .site-footer__email, .site-footer__phone, .site-footer__location { color: var(--ink-200); font-size: var(--font-size-body-m); transition: color var(--motion-duration-fast); }
.site-footer__nav-link:hover, .site-footer__email:hover, .site-footer__phone:hover { color: var(--oro); }
.site-footer__address { font-style: normal; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__badge { margin-top: var(--space-6); }
.site-footer__badge img { height: 56px; width: auto; opacity: .85; }
.site-footer__bottom { border-top: 1px solid var(--ink-800); }
.site-footer__bottom-inner {
  max-width: var(--max-width-container); margin-inline: auto;
  padding: var(--space-6) var(--space-container-x);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: center; justify-content: space-between;
}
.site-footer__copy { font-family: var(--font-mono); font-size: var(--font-size-body-xs); color: var(--ink-400); }
.site-footer__legal-nav { display: flex; gap: var(--space-6); }
.site-footer__legal-link { font-family: var(--font-mono); font-size: var(--font-size-body-xs); color: var(--ink-400); }
.site-footer__legal-link:hover { color: var(--oro); }

@media (min-width: 760px) {
  .site-footer__inner { grid-template-columns: 1.2fr 2fr; }
  .site-footer__nav-columns { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
 * MICROINTERACCIONES
 * ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--motion-duration-slow) var(--motion-ease-editorial),
              transform var(--motion-duration-slow) var(--motion-ease-editorial);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

[data-image-reveal] { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--motion-ease-editorial); }
[data-image-reveal].is-revealed { clip-path: inset(0 0 0 0); }

[data-magnetic] { transition: transform var(--motion-duration-base) var(--motion-ease-spring); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-image-reveal] { opacity: 1; transform: none; clip-path: none; transition: none; }
  .case-studies-grid__hero, .bento-grid__item, .btn, .hero__cta { transition: none; }
}

/* ============================================================
 * RESPONSIVE — navegación
 * ============================================================ */
@media (max-width: 980px) {
  .site-header__nav { display: none; }
  .site-header__menu-toggle { display: inline-flex; }
}
@media (min-width: 981px) {
  .nav-mobile { display: none; }
}

/* ============================================================
 * COBERTURA DE VARIANTES Y CONTENEDORES (contrato §1 cobertura CSS)
 * El HTML manda: cada clase usada tiene aquí su selector.
 * ============================================================ */
.hero--full-bleed-image {}
.intro-section { display: block; }
.intro-section--default {}
.bento-grid--default {}
.case-studies-grid--default {}
.logo-wall--default {}
.stats-section--default {}
.cta-block--pre-footer {}
.cta-block__content { display: block; }
.site-header--sticky {}
.site-header__cta { white-space: nowrap; }
.site-header__dropdown-item {}
.nav-mobile__nav { display: block; }
.nav-mobile__item { display: block; }
.site-footer__brand { display: flex; flex-direction: column; }
.site-footer__nav-col { display: block; }
.site-footer__contact-col { display: block; }
.site-footer__social-item { display: block; }
.site-footer__social-icon { display: block; }

/* ============================================================
 * TANDA 2 — Capítulo 1 (servicios). Plantillas U.B / U.C
 * y organisms: breadcrumb-bar, features-section,
 * feature-alternated, faq-section + variantes de hero.
 * ============================================================ */

/* Wrappers de plantilla */
.u-b, .u-c { display: block; }
.u-b__section, .u-c__section { padding-block: clamp(var(--space-16), 10vw, var(--space-40)); }
.u-b__section--full-bleed, .u-c__section--full-bleed { width: 100%; }
.u-b__section--contained, .u-c__section--contained {}
.u-c__section--full-bleed:has(.hero) { padding-block: 0; }
/* La barra de breadcrumbs (page-header) baja bajo el header fijo */
.u-c__section--full-bleed:has(.breadcrumb-bar) { padding-top: var(--space-24); padding-bottom: 0; }
.page-template-U-B {}
.page-template-U-C {}

/* --- Variantes de hero para interiores --- */
.hero--text-only, .hero--split {
  min-height: 0;
  display: block;
  padding-block: clamp(var(--space-24), 14vw, var(--space-40));
}
.hero--text-only::after, .hero--split::after { content: none; }
.hero--text-only .hero__content, .hero--split .hero__content { padding-block: 0; }
.hero--text-only .hero__title { max-width: 18ch; }

/* hero split: texto + panel decorativo asimétrico (sin foto inventada) */
.hero--split .hero__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
.hero__media-mark {
  display: none;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 220px;
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(190,149,62,.28), transparent 60%),
    linear-gradient(135deg, var(--ink-800), var(--ink-900));
  border: 1px solid var(--ink-700);
}
.hero__media-mark span {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: .9;
  color: var(--oro-300);
  opacity: .9;
  letter-spacing: var(--tracking-tight);
}

/* hero split: el texto va en su propio contenedor (grid child) */
.hero__text { display: block; }
@media (min-width: 900px) {
  .hero--split .hero__content { grid-template-columns: 1.5fr 1fr; }
  .hero__media-mark { display: flex; }
}

/* --- A.2.3 breadcrumb-bar --- */
.breadcrumb-bar {
  max-width: var(--max-width-container);
  margin-inline: auto;
  padding: var(--space-6) var(--space-container-x) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.breadcrumb-bar__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.breadcrumb-bar__item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-body-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-300);
}
.breadcrumb-bar__item:not(:last-child)::after { content: "/"; color: var(--ink-500); margin-left: var(--space-2); }
.breadcrumb-bar__item a { color: var(--ink-300); transition: color var(--motion-duration-fast); }
.breadcrumb-bar__item a:hover { color: var(--oro); }
.breadcrumb-bar__item [aria-current="page"] { color: var(--paper); }

/* --- A.3.1 features-section (card-style / with-icon / with-illustration) --- */
.features-section { max-width: var(--max-width-container); margin-inline: auto; padding-inline: var(--space-container-x); }
.features-section--card-style {}
.features-section--with-icon {}
.features-section--with-illustration {}
.features-section__header { margin-bottom: var(--space-12); }
.features-section__title {
  font-family: var(--font-display);
  font-size: var(--font-size-display-sm);
  letter-spacing: var(--tracking-snug);
}
.features-section__subtitle { margin-top: var(--space-4); color: var(--color-text-secondary); max-width: 60ch; }
.features-section__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-5);
}
.features-section__item {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--space-8);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  transition: transform var(--motion-duration-base) var(--motion-ease-editorial), border-color var(--motion-duration-base);
}
.features-section__item:hover { transform: translateY(-4px); border-color: var(--color-border-brand); }
.features-section__item-link { display: flex; flex-direction: column; height: 100%; }
.features-section__index {
  font-family: var(--font-mono);
  font-size: var(--font-size-body-s);
  color: var(--color-text-brand);
  margin-bottom: var(--space-4);
}
.features-section__item-title {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-md);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-3);
}
.features-section__text { color: var(--color-text-secondary); font-size: var(--font-size-body-m); margin-bottom: var(--space-5); }
.features-section__arrow {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-body-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-brand);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.features-section__arrow::after { content: "→"; transition: transform var(--motion-duration-fast); }
.features-section__item:hover .features-section__arrow::after { transform: translateX(4px); }
.features-section__cta { margin-top: var(--space-10); }
.features-section__cta a {
  font-family: var(--font-mono); text-transform: uppercase; font-size: var(--font-size-body-s);
  letter-spacing: var(--tracking-wide); color: var(--color-text-brand);
}

/* --- A.3.12 feature-alternated --- */
.feature-alternated { max-width: var(--max-width-container); margin-inline: auto; padding-inline: var(--space-container-x); display: grid; gap: var(--space-16); }
.feature-alternated--default {}
.feature-alternated__item {
  display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center;
}
.feature-alternated__eyebrow {
  font-family: var(--font-mono); font-size: var(--font-size-body-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  color: var(--color-text-brand); margin-bottom: var(--space-4);
}
.feature-alternated__title {
  font-family: var(--font-display);
  font-size: var(--font-size-display-sm);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-5);
}
.feature-alternated__body { color: var(--color-text-secondary); font-size: var(--font-size-body-l); line-height: var(--line-height-relaxed); margin-bottom: var(--space-6); }
.feature-alternated__link {
  font-family: var(--font-mono); text-transform: uppercase; font-size: var(--font-size-body-s);
  letter-spacing: var(--tracking-wide); color: var(--color-text-brand);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.feature-alternated__link::after { content: "→"; transition: transform var(--motion-duration-fast); }
.feature-alternated__link:hover::after { transform: translateX(4px); }
.feature-alternated__media {
  min-height: 260px; border-radius: var(--radius-2xl);
  display: flex; align-items: flex-end; padding: var(--space-8);
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(61,155,233,.18), transparent 55%),
    linear-gradient(135deg, var(--paper-800), var(--paper-600));
  border: 1px solid var(--color-border-default);
}
.feature-alternated__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-xl); }
.feature-alternated__media-mark { font-family: var(--font-display); font-size: clamp(3rem,7vw,5rem); color: var(--ink-300); letter-spacing: var(--tracking-tight); }
@media (min-width: 860px) {
  .feature-alternated__item { grid-template-columns: 1.1fr 1fr; gap: var(--space-16); }
  .feature-alternated__item:nth-child(even) .feature-alternated__text { order: 2; }
  .feature-alternated__item:nth-child(even) .feature-alternated__media { order: 1; }
}

/* --- A.3.8 faq-section (acordeón) --- */
.faq-section { max-width: var(--max-width-content); margin-inline: auto; padding-inline: var(--space-container-x); }
.faq-section--default {}
.faq-section__header { margin-bottom: var(--space-10); }
.faq-section__title { font-family: var(--font-display); font-size: var(--font-size-display-sm); letter-spacing: var(--tracking-snug); }
.faq-section__items { display: flex; flex-direction: column; }
.faq-section__item { border-bottom: 1px solid var(--color-border-default); }
.faq-section__question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-6) 0; background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--color-text-primary);
  font-family: var(--font-display); font-size: var(--font-size-heading-sm);
}
.faq-section__question-text { flex: 1; }
.faq-section__question-icon {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--font-size-heading-md);
  color: var(--color-text-brand); transition: transform var(--motion-duration-base) var(--motion-ease-standard);
}
.faq-section__question[aria-expanded="true"] .faq-section__question-icon { transform: rotate(45deg); }
.faq-section__answer { padding: 0 0 var(--space-6); color: var(--color-text-secondary); font-size: var(--font-size-body-l); line-height: var(--line-height-relaxed); max-width: 65ch; }
.faq-section__answer[hidden] { display: none; }

/* Tarjeta de caso compacta (fichas de servicio: sin imagen) */
.case-studies-grid__card--compact {
  padding: var(--space-8);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  transition: transform var(--motion-duration-base) var(--motion-ease-editorial), border-color var(--motion-duration-base);
}
.case-studies-grid__card--compact:hover { transform: translateY(-4px); border-color: var(--color-border-brand); }
.case-studies-grid__card--compact .case-studies-grid__client { margin-top: 0; }
.case-studies-grid__card-cta {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5);
  font-family: var(--font-mono); font-size: var(--font-size-body-s);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-brand);
}
.case-studies-grid__card-cta::after { content: "→"; transition: transform var(--motion-duration-fast); }
.case-studies-grid__card--compact:hover .case-studies-grid__card-cta::after { transform: translateX(4px); }

/* Cobertura: variantes/hooks que faltaban (tanda 2) */
.breadcrumb-bar--default {}
.breadcrumb-bar__nav { display: block; }
.page-servicios, .page-servicios-web-y-plataformas, .page-servicios-ecommerce,
.page-servicios-ux-ui, .page-servicios-custom, .page-servicios-sistemas-y-mantenimiento {}

/* ============================================================
 * TANDA 3 — Capítulo 2 (proyectos): next-steps, stats-impact
 * y placeholders de contenido pendiente de cliente.
 * ============================================================ */

/* --- A.3.16 next-steps --- */
.next-steps { max-width: var(--max-width-container); margin-inline: auto; padding-inline: var(--space-container-x); }
.next-steps--default {}
.next-steps__title {
  font-family: var(--font-display); font-size: var(--font-size-display-sm);
  letter-spacing: var(--tracking-snug); margin-bottom: var(--space-10);
}
.next-steps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-5); }
.next-steps__item { display: block; }
.next-steps__link {
  display: flex; flex-direction: column; height: 100%;
  padding: var(--space-8);
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-lg);
  transition: transform var(--motion-duration-base) var(--motion-ease-editorial), border-color var(--motion-duration-base);
}
.next-steps__link:hover { transform: translateY(-4px); border-color: var(--oro); }
.next-steps__item-title {
  font-family: var(--font-display); font-size: var(--font-size-heading-md);
  letter-spacing: var(--tracking-snug); color: var(--paper); margin-bottom: var(--space-3);
}
.next-steps__summary { color: var(--ink-200); font-size: var(--font-size-body-m); margin-bottom: var(--space-5); }
.next-steps__cta {
  margin-top: auto; font-family: var(--font-mono); font-size: var(--font-size-body-s);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--oro-300);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.next-steps__cta::after { content: "→"; transition: transform var(--motion-duration-fast); }
.next-steps__link:hover .next-steps__cta::after { transform: translateX(4px); }

/* --- stats variante impact (valores grandes) --- */
.stats-section--impact .stats-section__value { font-size: var(--font-size-display-lg); }

/* --- Placeholder de contenido pendiente (prototipo, honesto) --- */
.content-placeholder {
  max-width: var(--max-width-content); margin-inline: auto; padding-inline: var(--space-container-x);
}
.content-placeholder__eyebrow {
  font-family: var(--font-mono); font-size: var(--font-size-body-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  color: var(--color-text-brand); margin-bottom: var(--space-5);
}
.content-placeholder__box {
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-8), 5vw, var(--space-16));
  display: flex; flex-direction: column; gap: var(--space-4);
  background: color-mix(in srgb, var(--color-bg-subtle) 60%, transparent);
}
.content-placeholder__label {
  font-family: var(--font-mono); font-size: var(--font-size-body-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.content-placeholder__label::before { content: "○"; color: var(--oro); }
.content-placeholder__title {
  font-family: var(--font-display); font-size: var(--font-size-display-sm);
  letter-spacing: var(--tracking-snug); color: var(--color-text-secondary);
}
.content-placeholder__hint { color: var(--color-text-muted); font-size: var(--font-size-body-m); max-width: 60ch; }
.content-placeholder--metrics .content-placeholder__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-4);
}
.content-placeholder__metric { border-top: 1px solid var(--color-border-default); padding-top: var(--space-4); }
.content-placeholder__metric-value { font-family: var(--font-display); font-size: var(--font-size-display-md); color: var(--color-text-muted); }
.content-placeholder__metric-label { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--font-size-body-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); }
@media (max-width: 640px) { .content-placeholder--metrics .content-placeholder__grid { grid-template-columns: 1fr; } }

/* Cobertura: hooks de página (tanda 3) */
.page-proyectos, .page-proyectos-club-venturio, .page-proyectos-estrella-galicia,
.page-proyectos-kaleido, .page-proyectos-exlabesa, .page-proyectos-tdi, .page-proyectos-stacbond {}

/* ============================================================
 * TANDA 4 — Capítulo 3 (nosotros). Plantillas U.I / U.F
 * y organisms: process-section, quote-block, cta--default,
 * features--with-image (equipo), hero--animated.
 * ============================================================ */

/* Wrappers de plantilla */
.u-i, .u-f { display: block; }
.u-i__section, .u-f__section { padding-block: clamp(var(--space-16), 10vw, var(--space-40)); }
.u-i__section--full-bleed, .u-f__section--full-bleed { width: 100%; }
.u-i__section--contained, .u-f__section--contained {}
.u-f__section--contained-narrow {}
.u-i__section--full-bleed:has(.breadcrumb-bar),
.u-f__section--full-bleed:has(.breadcrumb-bar) { padding-top: var(--space-24); padding-bottom: 0; }
.u-i__section--full-bleed:has(.hero), .u-f__section--full-bleed:has(.hero) { padding-block: 0; }
.page-template-U-I {}
.page-template-U-F {}
.page-nosotros, .page-nosotros-equipo, .page-nosotros-manifiesto {}

/* Columna de lectura estrecha (U.F manifiesto/artículo) */
.u-f__section--contained-narrow > * { max-width: 68ch; margin-inline: auto; }

/* hero--animated: declaración grande y centrada (manifiesto) */
.hero--animated { min-height: 0; display: block; padding-block: clamp(var(--space-28), 16vw, var(--space-40)); text-align: left; }
.hero--animated::after { content: none; }
.hero--animated .hero__content { padding-block: 0; }
.hero--animated .hero__title { font-size: var(--font-size-display-2xl, clamp(3.5rem, 11vw, 8rem)); max-width: 14ch; }
.hero--animated .hero__eyebrow { color: var(--rojo); }

/* --- A.3.3 process-section (steps) --- */
.process-section { max-width: var(--max-width-container); margin-inline: auto; padding-inline: var(--space-container-x); }
.process-section--default {}
.process-section__header { margin-bottom: var(--space-12); }
.process-section__title { font-family: var(--font-display); font-size: var(--font-size-display-sm); letter-spacing: var(--tracking-snug); }
.process-section__subtitle { margin-top: var(--space-4); color: var(--color-text-secondary); max-width: 60ch; }
.process-section__steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-8) var(--space-6); counter-reset: step;
}
.process-section__step { position: relative; padding-top: var(--space-6); border-top: 2px solid var(--color-border-default); }
.process-section__number {
  display: block; font-family: var(--font-mono); font-size: var(--font-size-heading-md);
  color: var(--color-text-brand); margin-bottom: var(--space-4);
}
.process-section__step-title { font-family: var(--font-display); font-size: var(--font-size-heading-sm); letter-spacing: var(--tracking-snug); margin-bottom: var(--space-3); }
.process-section__text { color: var(--color-text-secondary); font-size: var(--font-size-body-m); }

/* --- A.3.19 quote-block --- */
.quote-block { max-width: var(--max-width-content); margin-inline: auto; padding-inline: var(--space-container-x); text-align: center; }
.quote-block--default {}
.quote-block__text {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--font-size-display-sm); line-height: var(--line-height-snug);
  color: var(--color-text-primary); letter-spacing: var(--tracking-snug);
}
.quote-block__quote::before { content: "“"; display: block; font-family: var(--font-display); font-size: 4rem; line-height: .6; color: var(--oro); margin-bottom: var(--space-4); }
.quote-block__attribution { margin-top: var(--space-8); }
.quote-block__author { font-style: normal; display: inline-flex; flex-direction: column; gap: 2px; }
.quote-block__author-name { font-family: var(--font-mono); font-size: var(--font-size-body-s); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-brand); }
.quote-block__author-role, .quote-block__author-company { font-size: var(--font-size-body-s); color: var(--color-text-muted); }

/* --- cta-block variante default (no pre-footer) --- */
.cta-block--default { text-align: center; }
.cta-block--default .cta-block__title { font-size: var(--font-size-display-sm); }

/* --- features-section variante with-image (equipo) --- */
.features-section--with-image .features-section__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.features-section__media {
  aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-5);
  background: linear-gradient(135deg, var(--paper-800), var(--paper-600));
  display: flex; align-items: center; justify-content: center;
}
.features-section__media img { width: 100%; height: 100%; object-fit: cover; }
.features-section__media-placeholder { font-family: var(--font-display); font-size: var(--font-size-display-md); color: var(--ink-300); opacity: .5; }
.features-section__role { font-family: var(--font-mono); font-size: var(--font-size-body-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-brand); margin-bottom: var(--space-3); display: block; }
.features-section--with-image .features-section__item { background: transparent; border: 0; padding: 0; }
.features-section--with-image .features-section__item:hover { transform: none; }

/* ============================================================
 * TANDA 5 — Capítulo blog: featured-post, blog-grid, newsletter
 * ============================================================ */

/* --- A.3.18 featured-post --- */
.featured-post { max-width: var(--max-width-container); margin-inline: auto; padding-inline: var(--space-container-x); }
.featured-post--default {}
.featured-post__link {
  display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: stretch;
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); overflow: hidden;
  background: var(--color-bg-subtle);
  transition: border-color var(--motion-duration-base), transform var(--motion-duration-base) var(--motion-ease-editorial);
}
.featured-post__link:hover { border-color: var(--color-border-brand); transform: translateY(-4px); }
.featured-post__accent {
  min-height: 220px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(190,149,62,.25), transparent 55%),
    linear-gradient(135deg, var(--ink-800), var(--ink-900));
  display: flex; align-items: flex-end; padding: var(--space-8);
}
.featured-post__accent-mark { font-family: var(--font-display); font-size: clamp(2rem,4vw,3.5rem); color: var(--oro-300); letter-spacing: var(--tracking-tight); }
.featured-post__content { padding: var(--space-8) var(--space-8) var(--space-10); display: flex; flex-direction: column; }
.featured-post__category, .blog-grid__category {
  font-family: var(--font-mono); font-size: var(--font-size-body-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-brand); margin-bottom: var(--space-4);
}
.featured-post__title { font-family: var(--font-display); font-size: var(--font-size-display-sm); letter-spacing: var(--tracking-snug); line-height: var(--line-height-tight); margin-bottom: var(--space-4); }
.featured-post__summary { color: var(--color-text-secondary); font-size: var(--font-size-body-l); margin-bottom: var(--space-6); max-width: 60ch; }
.featured-post__meta { display: flex; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--font-size-body-xs); color: var(--color-text-muted); margin-top: auto; }
.featured-post__cta { margin-top: var(--space-6); font-family: var(--font-mono); font-size: var(--font-size-body-s); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-brand); }
.featured-post__cta::after { content: " →"; }
@media (min-width: 860px) { .featured-post__link { grid-template-columns: 1.1fr 1.4fr; } }

/* --- A.3.17 blog-grid --- */
.blog-grid { max-width: var(--max-width-container); margin-inline: auto; padding-inline: var(--space-container-x); }
.blog-grid--default {}
.blog-grid__header { margin-bottom: var(--space-10); }
.blog-grid__posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-6); }
.blog-grid__post { display: block; }
.blog-grid__post-link {
  display: flex; flex-direction: column; height: 100%;
  padding: var(--space-8); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  transition: border-color var(--motion-duration-base), transform var(--motion-duration-base) var(--motion-ease-editorial);
}
.blog-grid__post-link:hover { border-color: var(--color-border-brand); transform: translateY(-4px); }
.blog-grid__post-title { font-family: var(--font-display); font-size: var(--font-size-heading-md); letter-spacing: var(--tracking-snug); line-height: var(--line-height-tight); margin-bottom: var(--space-4); }
.blog-grid__summary { color: var(--color-text-secondary); font-size: var(--font-size-body-m); margin-bottom: var(--space-5); }
.blog-grid__meta { display: flex; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--font-size-body-xs); color: var(--color-text-muted); margin-top: auto; }

/* --- A.3.11 newsletter-block (inline) --- */
.newsletter-block {
  max-width: var(--max-width-content); margin-inline: auto; padding-inline: var(--space-container-x);
  display: grid; gap: var(--space-8); text-align: center;
}
.newsletter-block--inline {}
.newsletter-block__eyebrow { font-family: var(--font-mono); font-size: var(--font-size-body-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-text-brand); }
.newsletter-block__title { font-family: var(--font-display); font-size: var(--font-size-display-sm); letter-spacing: var(--tracking-snug); }
.newsletter-block__value { color: var(--color-text-secondary); font-size: var(--font-size-body-l); max-width: 52ch; margin-inline: auto; }
.newsletter-block__form[hidden] { display: none; }
.newsletter-block__form { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; max-width: 520px; margin-inline: auto; width: 100%; }
.newsletter-block__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.newsletter-block__input {
  flex: 1 1 240px; min-width: 0; padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-button);
  background: var(--color-bg-base); color: var(--color-text-primary);
  font-family: var(--font-sans); font-size: var(--font-size-body-m);
}
.newsletter-block__input:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.newsletter-block__submit {
  flex: 0 0 auto; padding: var(--space-4) var(--space-8);
  background: var(--color-action-primary); color: var(--paper); border: 0; border-radius: var(--radius-button);
  font-family: var(--font-mono); font-size: var(--font-size-body-s); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  cursor: pointer; transition: background-color var(--motion-duration-fast);
}
.newsletter-block__submit:hover { background: var(--color-action-primary-hover); }
.newsletter-block__privacy { font-size: var(--font-size-body-xs); color: var(--color-text-muted); }
.newsletter-block__privacy a { color: var(--color-text-muted); text-decoration: underline; }
.newsletter-block__success { color: var(--color-text-brand); font-family: var(--font-mono); font-size: var(--font-size-body-s); }
.newsletter-block__success[hidden] { display: none; }

/* Cobertura hooks de blog */
.page-blog, .page-blog-haccecall-juan-diaz-arnau-liderazgo-personas, .page-blog-google-cloud-fraud-defense-recaptcha,
.page-blog-primera-wordcamp-galicia-nueva-etapa, .page-blog-haccecall-ruben-blanco-movelco-movilidad-electrica,
.page-blog-fendetestas-herramienta-control-calidad, .page-blog-haccecall-xose-louzao-hijos-de-rivera,
.page-blog-google-consent-mode-v2-guia, .page-blog-por-que-webs-exigen-pago-sin-cookies {}

/* Cobertura: fechas en meta de blog */
.featured-post__date, .blog-grid__date { color: var(--color-text-muted); }

/* ============================================================
 * TANDA 6 — Capítulo labs: variante hero--centered + hooks
 * ============================================================ */
.hero--centered { min-height: 0; display: block; padding-block: clamp(var(--space-28), 15vw, var(--space-40)); text-align: center; }
.hero--centered::after { content: none; }
.hero--centered .hero__content { padding-block: 0; max-width: var(--max-width-content); }
.hero--centered .hero__title { max-width: 20ch; margin-inline: auto; }
.hero--centered .hero__subtitle { margin-inline: auto; }

.page-labs, .page-labs-sabot, .page-labs-nextwpress, .page-labs-fendetestas, .page-labs-haccecall {}

/* ============================================================
 * TANDA 7 (final) — contacto, legales y sistema.
 * Plantillas U.E / U.J / U.K + contact-section.
 * ============================================================ */
.u-e, .u-j, .u-k { display: block; }
.u-e__section, .u-j__section, .u-k__section { padding-block: clamp(var(--space-16), 10vw, var(--space-40)); }
.u-e__section--full-bleed, .u-j__section--full-bleed, .u-k__section--full-bleed { width: 100%; }
.u-e__section--contained, .u-k__section--contained {}
.u-j__section--contained-narrow > * { max-width: 72ch; margin-inline: auto; }
.u-e__section--full-bleed:has(.hero), .u-k__section--full-bleed:has(.hero) { padding-block: 0; }
.u-j__section--full-bleed:has(.breadcrumb-bar) { padding-top: var(--space-24); padding-bottom: 0; }
.page-template-U-E {}
.page-template-U-J {}
.page-template-U-K {}
.page-contacto, .page-contacto-gracias, .page-aviso-legal, .page-politica-privacidad,
.page-politica-cookies, .page-404, .page-500 {}

/* --- A.3.10 contact-section (split) --- */
.contact-section {
  max-width: var(--max-width-container); margin-inline: auto; padding-inline: var(--space-container-x);
  display: grid; grid-template-columns: 1fr; gap: var(--space-12);
}
.contact-section--split {}
.contact-section__intro { grid-column: 1 / -1; }
.contact-section__title { font-family: var(--font-display); font-size: var(--font-size-display-sm); letter-spacing: var(--tracking-snug); margin-bottom: var(--space-4); }
.contact-section__subtitle { color: var(--color-text-secondary); font-size: var(--font-size-body-l); max-width: 56ch; }
.contact-section__form { display: grid; gap: var(--space-5); }
.contact-section__field { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-section__label { font-family: var(--font-mono); font-size: var(--font-size-body-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-secondary); }
.contact-section__input, .contact-section__textarea {
  padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border-default); border-radius: var(--radius-md);
  background: var(--color-bg-base); color: var(--color-text-primary);
  font-family: var(--font-sans); font-size: var(--font-size-body-m); width: 100%;
}
.contact-section__textarea { min-height: 140px; resize: vertical; }
.contact-section__input:focus-visible, .contact-section__textarea:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.contact-section__submit {
  justify-self: start; padding: var(--space-4) var(--space-8); border: 0; border-radius: var(--radius-button);
  background: var(--color-action-primary); color: var(--paper); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--font-size-body-s); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  transition: background-color var(--motion-duration-fast);
}
.contact-section__submit:hover { background: var(--color-action-primary-hover); }
.contact-section__legal { font-size: var(--font-size-body-xs); color: var(--color-text-muted); max-width: 52ch; }
.contact-section__legal a { color: var(--color-text-muted); text-decoration: underline; }
.contact-section__info { display: flex; flex-direction: column; gap: var(--space-5); align-content: start; }
.contact-section__info-heading { font-family: var(--font-mono); font-size: var(--font-size-body-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-text-brand); }
.contact-section__info-item { font-size: var(--font-size-body-m); }
.contact-section__info-item a { color: var(--color-text-primary); transition: color var(--motion-duration-fast); }
.contact-section__info-item a:hover { color: var(--oro); }
.contact-section__address { font-style: normal; color: var(--color-text-secondary); }
@media (min-width: 860px) {
  .contact-section { grid-template-columns: 1.5fr 1fr; align-items: start; }
}

/* Cuerpo legal: placeholder honesto (texto no incluido en el state) */
.legal-body { max-width: 72ch; margin-inline: auto; padding-inline: var(--space-container-x); }