/* ============================================================
   Chaverri & Loitegui — Design System
   Source of truth for ALL color, size, spacing, and shape
   values. No hex, px, or rem literals anywhere else.
   grep-guard enforced by deploy.mjs.
   ============================================================ */


/* SECTION: General · Font faces */
/* ============================================================
   @font-face — Source Serif 4 (Tema A headlines)
   ============================================================ */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-normal-latin_ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-italic-latin_ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tuned Georgia fallback — metrics measured from woff2 + system font */
@font-face {
  font-family: 'Source Serif 4 Fallback';
  src: local('Georgia');
  size-adjust: 98.66%;
  ascent-override: 105.01%;
  descent-override: 33.95%;
  line-gap-override: 0%;
}


/* SECTION: General · Font faces — Inter */
/* ============================================================
   @font-face — Inter (Tema A body)
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-latin_ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tuned Arial fallback */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 105.27%;
  ascent-override: 92.02%;
  descent-override: 22.91%;
  line-gap-override: 0%;
}



/* SECTION: General · Design tokens — spacing and motion */
/* ============================================================
   LAYER 1 — Global primitives (identical in both themes)
   ============================================================ */

:root {
  /* --- Spacing scale (base 4px = 0.25rem) --- */
  --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-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Container widths --- */
  --w-content: 1280px;
  --w-narrow:  720px;
  /* Interior of the reading column = --w-content minus 2 × max(--gap) = 1280 − 2×32 = 1216 px */
  --w-reading: 1216px;

  /* --- Transition durations --- */
  --duration-fast: 150ms;
  --duration-base: 250ms;

  /* --- Easing curves --- */
  /* House curve: springy ease-out for hovers, reveals, accordion */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  /* Panel curve: fast-decelerate for off-canvas drawers (iOS-style) */
  --ease-panel:    cubic-bezier(0.32, 0.72, 0, 1);

  /* --- Focus ring --- */
  --focus-width:  3px;
  --focus-offset: 2px;
}

/* SECTION: General · ADJUSTABLE — component parameters */
/* ============================================================
   ADJUSTABLE — visual parameters calibrated by eye
   Each token lives ONLY here. Moving a token here means
   removing it from its previous section and checking no other
   selector re-declares it.
   ============================================================ */
:root {
  --w-showcase:      1920px;
  /* Max = tope × 0.015 (mismo factor que el vw); se recalcula si cambia el tope */
  --showcase-margin: clamp(1rem, 1.5vw, calc(var(--w-showcase) * 0.015));
  /* max 5rem = tope 1920px (fórmula: --w-showcase / 480 + 1rem; si cambia en V-2.4 recalcular).
     Coef. (10/3)vw: rampa de 2rem (480px) a 5rem (1920px).
     Columna real del titular: max-width: 22ch en .page-hero h1; ver tabla en ROADMAP V-2.1. */
  --text-disp: clamp(2rem, 3.3333vw + 1rem, 5rem);
  --area-row-fade:        0.25;   /* filas Áreas home — NOT nav panel */
  --text-area-row:          clamp(1.5rem, min(2vw + 1.1rem, var(--home-split-scale-h)), 2.5rem); /* home area name — min() elige el menor de anchura y altura */
  --text-areas-entidades-row: clamp(1.125rem, min(1.8vw + 0.85rem, var(--home-split-scale-h)), 2.25rem); /* entidades block rows — max 36px, fits 6 rows in --home-split-h */
  --perspjur-weight-decay:  6;   /* meses de decaimiento — rotación perspectiva jurídica */
  --perspjur-nota-gap:     var(--space-12); /* separación nota ↔ guías — valor fijo, no cede */
  --perspjur-nota-max-w:   38ch;            /* ancho máximo del excerpt — algo menor que la columna */
  /* Navigation panel (V-1.2) */
  --nav-panel-w:          clamp(28rem, 36vw, 40rem);
  --nav-veil-opacity:     0.50;
  --nav-panel-item-size:  clamp(1.75rem, 3.5svh + 0.25rem, 2.5rem);
  --nav-panel-item-min-h: 3rem;
  --nav-panel-item-max-h: 8rem;
  --nav-panel-slide-dur:  270ms;
  --nav-panel-close-dur:  170ms;
  --guide-docked-w:       220px;
  /* Fixed transparent header controls (V-1.5 final) */
  --nav-ctrl-bg-a:        0.85;
  --nav-cta-panel-size:   var(--text-xs);
  --nav-cta-panel-pad-y:  0.33em;
  --nav-lang-size:        var(--text-xs);
  --nav-lang-pad-v:       0.125rem;
  --nav-lang-pad-h:       var(--space-2);
  --nav-lang-hit-ext:     0.6875rem;
  --nav-toggle-hit-ext:   0.125rem;
  --panel-close-hit-ext:  0.1875rem;
  --btn-hit-ext:          0.4375rem; /* 7 px — touch target vertical extension for .btn at ≤767px */
  /* Hero section (V-2.11 / V-2.7) */
  --page-hero-amp-opacity:       0.08;
  --amp-trace-ease:              cubic-bezier(0.316, 0.358, 0.713, 0.848);
  --amp-trace-duration:          1800ms;
  --amp-opacity:                 0.35;   /* tono del trazo (durante la animación y al terminar) */
  --amp-rest-opacity:            0.15;   /* tono final tras el fundido lento y en movimiento reducido */
  --amp-fade-pause:              3s;     /* pausa tras el trazo antes de iniciar el fundido */
  --amp-fade-duration:           25s;    /* duración del fundido lento hasta el tono de reposo */
  --hero-filete-inset:     33.333%;   /* left offset of authorship filete — 1/3 of container */
  --hero-filete-sep:       var(--space-12); /* separation lead → filete */
  /* Hero de vídeo (V-2.3) */
  --hero-veil-opacity:     0.32;      /* velo uniforme vídeo; medido sobre hero-bg.mp4 peor fotograma t=0s (oct. 2026): 0.28→2.78:1✗ 0.32→3.13:1✅ */
  --hero-video-fade:       400ms;     /* fundido del vídeo al arrancar */
  --hero-title-size:       clamp(3rem, 6.6667vw + 2rem, 10rem); /* 48px@390 · 123px@1366 · 160px@1920 */
  --hero-title-max-w:      66.667%;   /* ancho máximo del h1; texto fluye dentro */
  --hero-word-duration:    1200ms;    /* duración del barrido por palabra */
  --hero-word-overlap:     0ms;        /* 0 = secuencial: cada palabra arranca al terminar la anterior */
  --hero-word-delay:       300ms;     /* retardo inicial antes de la primera palabra */
  --hero-word-ease:        cubic-bezier(0.15, 0, 1, 1); /* ease-in suave: hesitación mínima, sin frenada al final */
  /* Bloque 5 home — banda Despacho (V-2.17 Rev) */
  --home-despacho-h-min:      26rem;   /* ADJUSTABLE — mínimo (anchos estrechos de escritorio; no aplica en móvil) */
  --home-despacho-h-max:      72svh;   /* ADJUSTABLE — tope para pantallas bajas. A 1912×915: 659px (logo entra con 27px de margen). Orden de pérdida al bajar: aire sobre logo → borde sup. logo → nunca las butacas. Umbral crítico: <70svh a 1912×915 empieza a cortar el logo. NOTA: a anchos muy grandes con pantallas bajas (>2000px, <900px alt, inhabituales) el recorte puede ser agresivo: calcular con logo_px = 72svh_px - (vw×614/1727 - vw×0.07×614/1727) antes de tocar. Ajustar en vivo: document.documentElement.style.setProperty('--home-despacho-h-max', '68svh') */
  --home-despacho-frase-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.875rem); /* ADJUSTABLE — 42px@1366, 46px@1920; 2 líneas con "Su asunto pide sentarse frente a frente." */
  --home-despacho-text-pad:   var(--space-10); /* ADJUSTABLE — margen inferior del bloque frase+CTA */
  /* Bloques 3 y 4 home — pareja espejo (V-2.4b / V-2.4d) */
  --home-split-h:          clamp(38rem, 100svh, 56rem); /* altura compartida bloques 3 y 4 */
  /* Techo de fuente sensible a altura. Denominador: 7 filas×leading 1.6=11.2
     (5 de 1 línea + "Derecho Civil…" de 2 líneas — así en 1366 y 1920). Numerador:
     100svh menos 9 rem de padding acumulado (6 filas × 2×--space-3 = 1.5 rem/fila).
     Si 7.ª área: multiplicador→12.8, pad_total→10.5 rem. */
  --home-split-scale-h:    calc((100svh - 7.5rem) / 9.6);
  --areas-relevo-dur:      220ms; /* fundido del descriptor en el bloque 3 (Áreas) */
  --area-num-size:         2rem;   /* 32 px fijo — calibrado visualmente */
  --areas-summary-size:    var(--text-xl); /* ≈ 26 px @ escritorio — igual que --perspjur-lema */
  --home-split-text-max-w: 34ch;   /* ADJUSTABLE — medida compartida descriptor (bloque 3) y lema (bloque 4). Probar en vivo: document.documentElement.style.setProperty('--home-split-text-max-w', '36ch') */
  --home-split-cta-max-w:  28rem;  /* ancho máximo del botón CTA en bloques partidos — calibración visual */
  /* Hub de Áreas — bandas alternas (V-2.13) */
  --hub-area-title-size:  clamp(1.75rem, 2.5vw + 0.75rem, 3.5rem); /* nombre área en banda — ajustar en inspección */
  --hub-area-band-pad:    clamp(2.5rem, 4vw + 1rem, 4.5rem);       /* padding-block por banda */
  /* Hub de Casos — bandas alternas (V-2.14) */
  --result-title-size:    clamp(1.25rem, 1.5vw + 0.625rem, 2.25rem); /* titular de caso en banda — ajustar en inspección */
  --result-band-pad:      clamp(2.5rem, 4vw + 1rem, 4.5rem);         /* padding-block por banda */
  /* Bandas alternas y banda grafito (V-2.6) */
  --band-text-max:         45ch;   /* ancho máximo columna de texto en bandas laterales */
  --band-veil-opacity:     0.45;   /* velo sólido banda "Una relación de confianza."; medido sobre despacho-banda-3.webp (oct. 2026): 0.45→3.12:1✅ */
  --home-band-veil-opacity: 0.68;  /* pico del gradiente inferior banda home; medido sobre home-entrada.webp (oct. 2026): 0.60→2.92:1✗ 0.65→3.00:1✗ 0.68→3.04:1✅ */
  /* Banda de equipo home (V-2.5a/c) */
  --team-cascade-dur:      700ms;  /* duración de cada pulso (V-2.5c: era 400ms) */
  --team-cascade-delay:    250ms;  /* retardo entre personas (total: ~3,5 s en cinco) */
  --team-cascade-fire:     0.90;   /* umbral de disparo (ratio de intersección) */
  --team-cascade-arm:      0.15;   /* umbral de armado para el siguiente disparo */
  --team-title-top:        1.714vw;  /* = 4 % del alto de banda (21:9 full-bleed) */
  --team-title-size:       1.500vw;  /* = 3.5 % del alto de banda */
  --team-title-dur:        200ms;    /* fundido de entrada/salida del rótulo-título */
  --portrait-grid-max-h:   60svh;  /* tope de altura para retratos en rejilla móvil */
  /* Panel de ficha de equipo (V-2.10a, V-2.10d, V-2.10e) */
  --team-sheet-max-h:          78svh;                       /* ADJUSTABLE: altura máxima del panel */
  --team-sheet-portrait-w:     clamp(220px, 22vw, 380px);   /* ADJUSTABLE: ancho columna retrato */
  --sheet-portrait-ratio:      2/3;                          /* ADJUSTABLE: proporción retrato — real: 1201×1801 px */
  --portrait-panel-max-h:      45svh;                        /* ADJUSTABLE: altura máxima del retrato en el panel de autor */
  --portrait-sheet-max-h:      40svh;                        /* ADJUSTABLE: altura máxima del retrato en panel de equipo (móvil) */
  --portrait-franja-max-h:     40svh;                        /* ADJUSTABLE: altura máxima del retrato en la franja lateral */
  --franja-content-max-w:      420px;                        /* ADJUSTABLE: ancho máximo del contenido pegajoso de la franja */
  --sheet-arrow-rest-opacity:  0.40;                        /* ADJUSTABLE: flechas ← → en reposo */
  /* Velos de panel — separados para no tocar el menú ni el panel de autoría */
  --panel-veil-opacity:        0.45;                        /* velo base: área, autoría */
  --team-sheet-veil-opacity:   0.80;                        /* velo panel de equipo: evita foto sobre foto */
  /* Banda de retratos en despacho (V-2.16) */
  --team-portrait-cap-size:      var(--text-sm);
  --team-portrait-cap-role-size: var(--text-xs);
  --team-portrait-cap-pad:       var(--space-3);
  /* Hub de Perspectiva jurídica (V-2.12) */
  --guide-card-band-w:  3px;                                    /* banda izquierda roja en tarjetas de guía */
  --notes-band-pad:     clamp(2rem, 4vw + 1rem, 3.5rem);        /* padding vertical de la franja de notas */
  --notes-rotator-dur:  7000ms;                                 /* duración del ciclo del rotador (V-2.12b) */
  /* Cabecera fija (V-6.3c) */
  --bar-h:             6rem;
  --bar-logo-h:        3.25rem;
  --hero-logo-h-video: 6.5rem;
  --hero-logo-gap:     1.5rem;    /* aire mínimo entre pie del logo completo y «Conocer.» */
  --bar-bg:            var(--color-bg);
  --bar-border:        var(--color-rule);
}


/* SECTION: General · Design tokens — typography and color */
/* ============================================================
   LAYER 2 — Tema A · Institutional (default)
   ============================================================ */

:root,
[data-theme="A"] {
  /* --- Fonts --- */
  --font-headline: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif;
  --font-body:     'Inter', 'Inter Fallback', Arial, sans-serif;

  /* --- Typographic scale — fluid 360px → 1280px ---
       Formula: clamp(min, a·vw + b, max)
       Each clamp MUST contain a rem term (WCAG 1.4.4 zoom) */
  --text-xs:   clamp(0.75rem,   0.11vw + 0.73rem, 0.8125rem);
  --text-sm:   clamp(0.875rem,  0.11vw + 0.85rem, 0.9375rem);
  --text-base: clamp(1rem,      0.22vw + 0.95rem, 1.125rem);
  --text-lg:   clamp(1.125rem,  0.43vw + 1.03rem, 1.375rem);
  --text-xl:   clamp(1.25rem,   0.65vw + 1.10rem, 1.625rem);
  --text-2xl:  clamp(1.5rem,    1.09vw + 1.26rem, 2.125rem);
  --text-3xl:  clamp(2rem,      1.74vw + 1.61rem, 3rem);
  --text-4xl:  clamp(2.625rem,  2.39vw + 2.09rem, 4rem);

  /* --- Line heights --- */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* --- Letter spacing --- */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;

  /* --- Measure (line length in ch — depends on font, not viewport) --- */
  --measure: 70ch;

  /* --- Fluid spacing --- */
  --flow-space:    clamp(1.5rem,  1.74vw + 1.11rem, 2.5rem);
  --section-space: clamp(4rem,    6.96vw + 2.43rem, 8rem);
  --gap:           clamp(1rem,    1.74vw + 0.61rem, 2rem);

  /* --- Colors — Tema A --- */
  --color-bg:            #F4F4F1;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #E8E8E3;
  --color-ink:           #1A1D21;
  --color-ink-muted:     #565C63;
  --color-brand:         #1F2429;
  --color-brand-strong:  #12161A;
  --color-on-brand:      #FFFFFF;
  --color-accent:        #C10000;
  --color-accent-base:   #C10000;  /* red fill — never remapped by .on-dark */
  --color-accent-strong: #9A0000;  /* hover state for red-filled surfaces */
  --color-rule:          #DCDCD6;
  --color-border-strong: #82827C;
  --color-focus:         var(--color-accent);
  --color-danger:        #9C1419;
  --color-success:       #2C6A4A;

  --c-pending-bg:        #FBD9D7;   /* ~15 % brand-red tint over white */
  --c-pending-ink:       #1A1A1A;   /* explicit dark — not remapped by .on-dark */

  /* Dark-band tokens (used by .on-dark to remap) */
  --dark-bg:             #1F2328;
  --dark-bg-rgb:         31, 35, 40;  /* same color as --dark-bg; used for rgba() */
  --dark-ink:            #EDEDE8;
  --dark-ink-muted:      #A6ADB4;
  --dark-accent:         #C10000;
  --hero-amp-color:      #F55050;  /* excepción decorativa al rojo único — amp de fondo en heros oscuros (V-6.9b, decisión Javier) */
  --dark-rule:           #33393F;
  --dark-border-strong:  #727980;

  /* Garnet-band tokens (V-6.3b) */
  --garnet-bg:            var(--color-accent-base); /* = #C10000, rojo de marca */
  --garnet-ink:           #FFFFFF;
  --garnet-ink-muted:     var(--dark-ink);           /* = #EDEDE8 */
  --garnet-accent:        var(--garnet-ink);          /* = #FFFFFF */
  --garnet-rule:          rgba(255,255,255,0.30);
  --garnet-border-strong: rgba(255,255,255,0.65);
  --garnet-focus:         var(--garnet-ink);          /* = #FFFFFF */

  /* --- Shape — Tema A: sharp edges, rules, no shadow --- */
  --card-bg:      var(--color-surface);
  --card-radius:  0px;
  --card-shadow:  none;
  --card-border:  1px solid var(--color-rule);
  --rule-width:   2px;
  --btn-radius:   0px;
  --input-radius: 0px;

  /* --- Eyebrow / label style --- */
  --eyebrow-tracking: var(--tracking-widest);
  --eyebrow-size:     var(--text-xs);
  --eyebrow-weight:   600;

  /* --- Link underline --- */
  --link-underline-thickness: 1px;
  --link-underline-offset:    3px;

  /* --- Logo tokens (SVG inherits these) --- */
  --logo-ink:    var(--color-brand);
  --logo-accent: var(--color-accent);
}



/* SECTION: General · Design tokens — component tokens */
/* ============================================================
   LAYER 3 — Component tokens (override per component)
   ============================================================ */

:root {
  /* Navigation */
  --nav-item-size:   var(--text-sm);
  --nav-item-weight: 500;

  /* Buttons */
  --btn-padding-y:  0.75em;
  --btn-padding-x:  1.5em;
  --btn-size:       var(--text-sm);
  --btn-weight:     600;

  /* Header CTA */
  --header-cta-min-height: 2.75rem;  /* 44 px touch target */

  /* Tags / eyebrows */
  --tag-padding-y: 0.2em;
  --tag-padding-x: 0.6em;

  /* Cards */
  --card-gap: var(--space-6);

  /* Forms */
  --input-padding-y: 0.625em;
  --input-padding-x: 0.875em;
  --input-size:      var(--text-base);

  /* Section divider rule */
  --section-rule: var(--rule-width) solid var(--color-rule);

  /* V-4.3 — Mobile layer tokens */
  --mobile-margin:    1.5rem;  /* 24px — lateral margin ≤767px */
  --mobile-block-pad: 3.5rem;  /* 56px — vertical block padding ≤767px */
  /* Safe area — declarados en :root para cubrir también iPhone en horizontal (≥768px) */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
  /* V-4.4 — Barra compacta y ampersand móvil */
  --header-compact-h:       3.5rem;   /* 56px — barra VISIBLE (B1) */
  --page-hero-amp-mob-h:    12rem;    /* amp height móvil variante B (B4) */
  --page-hero-amp-mob-clip: 1.5rem;   /* amp recorte inferior/derecho (B4) */
}


/* SECTION: General · On-dark context */
/* ============================================================
   .on-dark — remaps color roles for dark bands
   Apply to the container element, not individual children.
   Works with both themes because each theme defines --dark-*.
   ============================================================ */

.on-dark {
  --color-bg:            var(--dark-bg);
  --color-ink:           var(--dark-ink);
  --color-ink-muted:     var(--dark-ink-muted);
  --color-accent:        var(--dark-accent);
  --color-rule:          var(--dark-rule);
  --color-border-strong: var(--dark-border-strong);
  --color-surface:       var(--dark-bg);
  --color-surface-alt:   var(--dark-rule);
  --color-brand:         var(--dark-ink);  /* headings go light on dark bands */
  --logo-ink:            var(--dark-ink);
  --logo-accent:         var(--dark-accent);
  --color-focus:         var(--dark-ink);
  background-color: var(--color-bg);
  color: var(--color-ink);
}

/* SECTION: General · On-garnet context */
/* ============================================================
   .on-garnet — contexto granate (V-6.3b)
   Misma arquitectura que .on-dark; reasigna alias semánticos.
   Posición: junto a .on-dark. Funciona porque los 5 modificadores
   de componente ya usan var(--color-bg) en lugar de var(--dark-bg)
   (migración previa de E-A1..E-A5).
   ============================================================ */
.on-garnet {
  --color-bg:            var(--garnet-bg);
  --color-ink:           var(--garnet-ink);
  --color-ink-muted:     var(--garnet-ink-muted);
  --color-accent:        var(--garnet-accent);
  --color-rule:          var(--garnet-rule);
  --color-border-strong: var(--garnet-border-strong);
  --color-surface:       var(--garnet-bg);
  --color-surface-alt:   var(--garnet-bg);
  --color-brand:         var(--garnet-ink);
  --logo-ink:            var(--garnet-ink);
  --logo-accent:         var(--garnet-ink);
  --color-focus:         var(--garnet-focus);
  --color-on-brand:      var(--garnet-bg);  /* sobre fill de acento → granate */
  background-color:      var(--color-bg);
  color:                 var(--color-ink);
}


/* SECTION: General · Mobile — safe-area margin */
/* ============================================================
   V-4.3 — Effective margin: single token consumed by ALL
   bleed/padding calculations (width: calc(100% + 2*…);
   margin-inline: calc(-1*…)). Override --showcase-margin here
   so the 14 active bleed selectors inherit automatically.
   ============================================================ */

@media (max-width: 767px) {
  :root {
    --showcase-margin:     max(var(--mobile-margin), var(--safe-left), var(--safe-right));
    --section-space:       var(--mobile-block-pad);
    --hero-logo-h-mob:         2.25rem;
    --bar-logo-h-mob:          1.625rem;
    --hero-logo-h-video-mob:   5.25rem;
    --home-row-title-size: clamp(1.25rem, min(1.09vw + 1.26rem, calc(var(--home-split-scale-h) * 1.875 / 2.5)), 1.875rem);
  }
}

@media (min-width: 768px) {
  :root {
    /* var(--safe-left/right) resuelven a env() desde :root; 0px en escritorio */
    --showcase-margin: max(
      clamp(1rem, 1.5vw, calc(var(--w-showcase) * 0.015)),
      var(--safe-left),
      var(--safe-right)
    );
  }
}


/* SECTION: General · Mobile — header bar states */
/* ============================================================
   V-4.4 — Capa móvil ≤ 767 px: barra de tres estados y heros
   Nada de aquí afecta a ≥ 768 px (condición de ámbito cableada).
   La guarda A3 verifica cero diferencias en escritorio.
   ============================================================ */

/* Teclado: evitar que el scroll tape el foco bajo la barra fija (aplica a todos los anchos) */
:root { scroll-padding-top: var(--header-h, 4.5rem); }

/* ── B1: transición — se toma de la regla DESTINO (CSS Transitions §6.4.1) ── */
@media (max-width: 767px) {
  /* OCULTA → delay en visibility: elemento desaparece al TERMINAR el deslizamiento */
  .site-header[data-bar-state="hidden"] {
    transform: translateY(-100%);   /* -100% basta: safe-top ya incluido en padding */
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }

  /* VISIBLE → sin delay: elemento aparece al EMPEZAR el deslizamiento */
  .site-header[data-bar-state="compact"] {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.25s ease, visibility 0s linear 0s;
    background-color: var(--dark-bg);
    padding-top: var(--safe-top);
    height: calc(var(--header-compact-h) + var(--safe-top));
  }

  [data-bar-state="compact"] .header-inner {
    padding-block: 0;
    height: var(--header-compact-h);
  }

  [data-bar-state="compact"] .bar-logo {
    display: block;
    margin-inline-end: auto;
  }

  [data-bar-state="compact"] .bar-logo .bar-logo__lgt {
    display: none;
  }

  [data-bar-state="compact"] .bar-logo .site-logo {
    height: var(--bar-logo-h-mob);
  }

  /* B2: logo del hero apartado del reloj/notch */
  .hero-logo {
    top: calc(var(--safe-top) + var(--space-4));
  }

  /* B3: holgura del hero — corrige bug de ≤640px que eliminaba var(--header-h) */
  .page-hero {
    padding-block: calc(var(--space-12) + var(--header-h, 4.5rem)) var(--space-8);
  }

  /* B4: ampersand SVG en hero móvil (variante B: 12rem, recortado dcha y abajo)
     Opacidad y color: idénticos a escritorio (var --page-hero-amp-opacity y estados de animación) */
  .page-hero-amp-svg {
    height:     var(--page-hero-amp-mob-h);
    max-height: none;
    right:      -8%;
    bottom:     calc(-1 * var(--page-hero-amp-mob-clip));
  }

  /* B4: clearance inferior — solo en heros con SVG amp (hubs, Despacho, legales) */
  /* clearance = visible height + gutter = (12rem − 1.5rem) + 1rem = 11.5rem */
  .page-hero:has(.page-hero-amp-svg) .page-hero-inner {
    padding-bottom: calc(
      var(--page-hero-amp-mob-h) - var(--page-hero-amp-mob-clip) + var(--space-4)
    );
  }

  /* B5: H1 del hero — excluye Despacho (--disp tiene su propio tratamiento) */
  /* especificidad 0,2,1 — supera el h1 desktop (0,1,1) */
  .page-hero:not(.page-hero--disp) h1 {
    font-size:   clamp(2rem, 1.5vw + 1.76rem, 2.25rem);
    line-height: var(--leading-tight);
  }

  /* Touch targets ≤767px (condición 9) */
  .nav-toggle {
    min-width:  2.75rem;
    min-height: 2.75rem;
  }

  .nav-panel-lang .lang-switch__active,
  .nav-panel-lang .lang-switch__inactive {
    display:        flex;
    align-items:    center;
    min-block-size: 2.75rem;
    padding-inline: 0.5rem;
  }
}

/* ── B1: movimiento reducido — sin transición ── */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header[data-bar-state="hidden"],
  .site-header[data-bar-state="compact"] {
    transition: none;
  }
}


/* SECTION: General · Reset */
/* ============================================================
   Reset
   ============================================================ */

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  font-size: 100%;
  scroll-behavior: smooth;
  /* scrollbar-gutter: stable prevents a ~15 px layout shift on Windows when overflow:hidden is added to open the nav panel. */
  scrollbar-gutter: stable;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
}


/* SECTION: General · Base — typography and color */
/* ============================================================
   Base — typography and color
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-headline);
  line-height: var(--leading-tight);
  color: var(--color-brand);
}

h1 { font-size: var(--text-4xl); font-weight: 700; letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-3xl); font-weight: 600; }
h3 { font-size: var(--text-2xl); font-weight: 600; }
h4 { font-size: var(--text-xl);  font-weight: 600; }

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

a {
  color: var(--color-accent);
  text-underline-offset: var(--link-underline-offset);
  text-decoration-thickness: var(--link-underline-thickness);
  transition: color var(--duration-fast) ease;
}

a:hover {
  color: var(--color-brand);
}

strong { font-weight: 700; }
em     { font-style: italic; }

/* Eyebrow / label class */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}


/* SECTION: General · Focus styles */
/* ============================================================
   Focus — always visible, never outline:none without substitute
   ============================================================ */

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}


/* SECTION: General · Layout utilities */
/* ============================================================
   Layout utilities
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--gap);
}

.container--narrow {
  max-width: var(--w-narrow);
}

.container--showcase {
  max-width: var(--w-showcase);
  padding-inline: var(--showcase-margin);
}

.page-main {
  max-width: var(--w-reading);
}

/* Vertical flow spacing */
.flow > * + * {
  margin-top: var(--flow-space);
}

/* Prose column */
.prose {
  max-width: var(--measure);
}

/* Grid helpers */
.grid {
  display: grid;
  gap: var(--gap);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }


/* SECTION: General · Horizontal rule */
/* ============================================================
   Horizontal rule
   ============================================================ */

hr {
  border: none;
  border-top: var(--rule-width) solid var(--color-rule);
  margin-block: var(--flow-space);
}


/* SECTION: Component · Buttons */
/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-body);
  font-size: var(--btn-size);
  font-weight: var(--btn-weight);
  border-radius: var(--btn-radius);
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: background-color var(--duration-fast) ease,
              color var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
}

.btn--primary {
  background-color: var(--color-accent-base);
  color: var(--color-on-brand);
  border-color: var(--color-accent-base);
}

.btn--primary:hover {
  background-color: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-on-brand);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--ghost:hover {
  background-color: var(--color-accent);
  color: var(--color-on-brand);
}

.on-dark .btn--ghost {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.on-dark .btn--ghost:hover {
  background-color: var(--color-ink);
  color: var(--color-bg);
}

.header-cta {
  min-height: var(--header-cta-min-height);
  flex-shrink: 0;
}


/* SECTION: Component · Skip link */
/* ============================================================
   Skip link
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 200;
  pointer-events: auto;
  background-color: var(--color-brand);
  color: var(--color-on-brand);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--btn-weight);
  border-radius: var(--btn-radius);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.skip-link:focus {
  top: var(--space-2);
}


/* SECTION: Component · Site header */
/* ============================================================
   Site header
   ============================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: transparent;
  /* The header is transparent and must not block clicks to the hero-logo beneath it.
     Only the interactive children (.skip-link, .lang-switch, .nav-toggle) restore auto. */
  /* pointer-events: none lets clicks reach the hero logo underneath: do not remove it.
     Any new interactive child of this header must set pointer-events: auto. */
  pointer-events: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap);
  padding-block: var(--space-4);
}

.site-logo {
  display: block;
  height: var(--space-10);
  width: auto;
}

/* ---- Hero logo (absolutely positioned inside hero section) ---- */
.hero-logo {
  position: absolute;
  top: var(--space-4);
  left: var(--showcase-margin);
  z-index: 2;
  display: block;
  line-height: 0;
  flex-shrink: 0;
}
a.hero-logo {
  transition: opacity var(--duration-base) var(--ease-out-soft);
}
a.hero-logo:hover { opacity: 0.75; }
a.hero-logo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: var(--space-1);
  border-radius: 2px;
}

@media (max-width: 767px) {
  a.hero-logo {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ---- Cabecera fija de escritorio (V-6.3c) ---- */
@media (min-width: 768px) {
  .site-header {
    height: var(--bar-h);
    background-color: var(--bar-bg);
    border-bottom: 1px solid var(--bar-border);
    pointer-events: auto;
    transition: background-color var(--duration-base) var(--ease-out-soft),
                border-bottom-color var(--duration-base) var(--ease-out-soft);
  }
  .header-inner { height: 100%; position: relative; }
  .site-header[data-hero-visible] {
    background-color: transparent;
    border-bottom-color: transparent;
    pointer-events: none;
  }
  .site-header[data-hero-visible] .bar-logo { visibility: hidden; }
  .bar-logo {
    position: absolute;
    left: var(--showcase-margin);
    top: calc((var(--bar-h) - var(--bar-logo-h)) / 2);
    pointer-events: auto;
  }
  .bar-logo .site-logo { height: var(--bar-logo-h); }
  .bar-logo .bar-logo__drk { display: none; }
  .page-hero {
    padding-block: calc(var(--space-16) + var(--bar-h)) var(--space-16);
  }
  .hero .hero-inner {
    padding-block-start: calc(var(--space-20) + var(--bar-h));
  }
  /* Scoped to body.page--band-footer — Iguala also uses .contact-split but has no building-photo band. */
  body.page--band-footer .contact-split { min-height: 100dvh; }
  .contact-split-inner {
    padding-block: calc(var(--space-20) + var(--bar-h)) var(--space-12);
  }
  .contact-split-light {
    padding-block: calc(var(--space-20) + var(--bar-h)) var(--space-12);
  }
  .profile-right { padding-block-start: var(--bar-h); }
  .nav-panel-header { min-height: var(--bar-h); }
  body.p-no-hero > main { padding-block-start: var(--bar-h); }
  :root { scroll-padding-top: var(--bar-h); }
  .page-hero .hero-logo,
  .contact-split-dark .hero-logo,
  .profile-left .hero-logo {
    top: calc((var(--bar-h) - var(--bar-logo-h)) / 2);
  }
  .page-hero .hero-logo .site-logo,
  .contact-split-dark .hero-logo .site-logo,
  .profile-left .hero-logo .site-logo { height: var(--bar-logo-h); }
  .hero--video .hero-logo .site-logo { height: var(--hero-logo-h-video); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
@media (max-width: 767px) {
  .bar-logo { display: none; }
  .hero-logo .site-logo { height: var(--hero-logo-h-mob); }
  .hero--video .hero-logo .site-logo { height: var(--hero-logo-h-video-mob); }
  .hero--video .hero-content {
    padding-block-start: calc(var(--safe-top) + var(--space-4) + var(--hero-logo-h-video-mob) + var(--hero-logo-gap));
  }
}


/* SECTION: Component · Site nav */
/* ============================================================
   Site nav — hamburguesa universal + panel lateral (V-1.2)
   Panel y velo son hijos directos de <body>, fuera de <header>.
   Z-index: cabecera 50 < velo 55 < panel 60.
   ============================================================ */

html:has(#site-nav.is-open) {
  overflow: hidden;
}

/* ---- Language switch ---- */
.lang-switch {
  position: relative;
  display: flex;
  align-items: center;
  pointer-events: auto;
  gap: var(--space-2);
  font-size: var(--nav-lang-size);
  font-weight: var(--nav-item-weight);
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(var(--dark-bg-rgb), var(--nav-ctrl-bg-a));
  border-radius: 100vw;
  padding: var(--nav-lang-pad-v) var(--nav-lang-pad-h);
}

/* Touch target container: visual only, no pointer interception */
.lang-switch::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--nav-lang-hit-ext)) 0;
  pointer-events: none;
}

.lang-switch__active {
  color: var(--color-ink);
  font-weight: 700;
}

.lang-switch__sep {
  color: var(--color-ink-muted);
  user-select: none;
}

.lang-switch__inactive {
  color: var(--color-ink-muted);
  cursor: default;
}

/* Touch target on the link: padding extends hit area, negative margin keeps flex layout */
a.lang-switch__inactive {
  padding-block: var(--nav-lang-hit-ext);
  margin-block: calc(-1 * var(--nav-lang-hit-ext));
}

/* ---- Toggle button (always visible at all widths) ---- */
.nav-toggle {
  position: relative;
  display: flex;
  pointer-events: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(var(--dark-bg-rgb), var(--nav-ctrl-bg-a));
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: inherit;
  padding: var(--space-1);
  flex-shrink: 0;
}

/* Extend touch target to 44 px without enlarging the visible circle */
.nav-toggle::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--nav-toggle-hit-ext));
}

.nav-toggle span {
  display: block;
  width: 1.375rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--duration-base) var(--ease-out-soft), opacity var(--duration-base) ease;
}

/* ---- Veil: covers full page including header (z-index 55 > header 50) ---- */
.nav-veil {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, var(--nav-veil-opacity));
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--nav-panel-close-dur) ease,
    visibility 0s var(--nav-panel-close-dur);
}

.nav-veil.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--nav-panel-slide-dur) ease,
    visibility 0s;
}

/* ---- Panel outer layer: fixed right side, overflow hidden (traps & deco) ---- */
#site-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--nav-panel-w);
  z-index: 60;
  overflow: hidden;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--nav-panel-close-dur) var(--ease-panel),
    visibility 0s var(--nav-panel-close-dur);
}

#site-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform var(--nav-panel-slide-dur) var(--ease-panel),
    visibility 0s;
}

@media (max-width: 767px) {
  #site-nav {
    width: 100%;
  }
}

/* ---- Panel inner scroll layer ---- */
.nav-panel-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

/* ---- Panel header strip: logo · Consulta · × ---- */
.nav-panel-header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: var(--header-h, 4.5rem);
  padding-inline: var(--showcase-margin);
  border-bottom: 1px solid var(--color-rule);
  gap: var(--space-4);
}

/* Logo in panel header (link or img depending on page) */
.nav-panel-logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.nav-cta {
  font-size: var(--nav-cta-panel-size);
  padding-block: var(--nav-cta-panel-pad-y);
  flex-shrink: 0;
}

/* ---- Close button (aligned with toggle position) ---- */
.nav-close {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  flex-shrink: 0;
  font-size: var(--text-xl);
  line-height: 1;
  padding: 0;
}

/* ---- Nav panel list ---- */
/* Do not add min-height: 0 — the auto minimum (6 × --nav-panel-item-min-h) forces overflow to scroll so .nav-panel-contact stays below the list. */
.nav-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.nav-panel-list li {
  flex: 1 1 0;
  min-height: var(--nav-panel-item-min-h);
  max-height: var(--nav-panel-item-max-h);
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--color-rule);
}

.nav-panel-list li:first-child {
  border-top: 1px solid var(--color-rule);
}

.nav-panel-list li a {
  display: flex;
  align-items: center;
  flex: 1;
  padding-inline: var(--showcase-margin);
  font-size: var(--nav-panel-item-size);
  font-family: var(--font-headline);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  position: relative;
  transition: color var(--duration-fast) ease;
}

.nav-panel-list li a:hover,
.nav-panel-list li a:focus-visible {
  color: var(--color-accent);
}

/* aria-current: small red left accent bar */
.nav-panel-list li a[aria-current] {
  color: var(--color-accent);
}

.nav-panel-list li a[aria-current]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--rule-width);
  background: var(--color-accent);
}

/* ---- Contact data ---- */
.nav-panel-contact {
  flex-shrink: 0;
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  padding: var(--space-6) var(--showcase-margin);
  border-top: 1px solid var(--color-rule);
}

.nav-panel-contact a {
  color: var(--color-ink-muted);
  text-decoration: none;
}

.nav-panel-contact a:hover {
  color: var(--color-ink);
}

/* ---- Decorative & (hidden on mobile) ---- */
#site-nav::before {
  content: '&';
  position: absolute;
  right: -5%;
  bottom: 5%;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(14rem, 28vw, 22rem);
  line-height: 0.7;
  color: var(--color-accent);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 767px) {
  #site-nav::before {
    display: none;
  }
}

/* ---- Item fade animation (brief, minimal stagger) ---- */
@keyframes nav-item-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#site-nav.is-open .nav-panel-list li {
  animation: nav-item-in 160ms ease both;
}

#site-nav.is-open .nav-panel-list li:nth-child(1) { animation-delay:  0ms; }
#site-nav.is-open .nav-panel-list li:nth-child(2) { animation-delay: 15ms; }
#site-nav.is-open .nav-panel-list li:nth-child(3) { animation-delay: 30ms; }
#site-nav.is-open .nav-panel-list li:nth-child(4) { animation-delay: 45ms; }
#site-nav.is-open .nav-panel-list li:nth-child(5) { animation-delay: 60ms; }
#site-nav.is-open .nav-panel-list li:nth-child(6) { animation-delay: 75ms; }
#site-nav.is-open .nav-panel-list li:nth-child(7) { animation-delay: 90ms; }
#site-nav.is-open .nav-panel-list li:nth-child(8) { animation-delay: 105ms; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  #site-nav,
  .nav-veil {
    transition: none;
  }
  #site-nav.is-open .nav-panel-list li {
    animation: none;
  }
}


/* SECTION: Component · Site footer */
/* ============================================================
   Site footer
   ============================================================ */

/* ============================================================
   Footer — dark band with logo, nav, CTA, legal bar
   ============================================================ */

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(var(--space-10), 0.87vw + 2.3rem, var(--space-12)) var(--space-4);
  margin-top: var(--space-12);
}

.footer-amp {
  position: absolute;
  left: -5%;
  bottom: -20%;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: min(52vw, 620px);
  line-height: 0.7;
  color: var(--color-accent);
  opacity: 0.06;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

.footer-inner {
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.9fr;
  align-items: start;
  gap: var(--space-8) var(--space-10);
  margin-bottom: var(--space-6);
}

.footer-logo {
  display: block;
  height: var(--space-10);
  width: auto;
  margin-bottom: var(--space-4);
}

.footer-tagline {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.footer-brand-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-4);
}

.footer-col .btn {
  width: 100%;
  justify-content: center;
}

.footer-address {
  font-style: normal;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-ink-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.footer-address a {
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

.footer-address a:hover { color: var(--color-ink); }

.footer-col-label {
  display: block;
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}

.footer-nav ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-6);
}

.footer-nav a {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

.footer-nav a:hover { color: var(--color-ink); }

.footer-cta-text {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
  flex-wrap: wrap;
}

.footer-copy {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer-legal-links a {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

.footer-legal-links a:hover { color: var(--color-ink); }

@media (max-width: 767px) {
  .footer-grid  { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-bar   { flex-direction: column; align-items: flex-start; }

  .footer-nav a,
  .footer-address a,
  .footer-legal-links a,
  .footer-maps-link { position: relative; }

  .footer-nav a::after,
  .footer-address a::after,
  .footer-legal-links a::after,
  .footer-maps-link::after {
    content: '';
    position: absolute;
    inset-block: calc((100% - 44px) / 2);
    inset-inline: 0;
  }
}


/* SECTION: Component · Lead paragraph */
/* ============================================================
   Lead paragraph
   ============================================================ */

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  max-width: var(--measure);
}


/* SECTION: Component · Content lists */
/* ============================================================
   Content lists (scoped to main to avoid nav/footer)
   ============================================================ */

main ul,
main ol {
  padding-left: var(--space-6);
  max-width: var(--measure);
}

main li + li {
  margin-top: var(--space-2);
}

/* Reading-column headings: capped to prose width so H2 doesn't
   span the full 1216 px column while paragraphs sit at ~655 px.
   text-wrap: balance distributes lines evenly, avoiding orphan last words. */
.page-main h2,
.page-main h3 {
  max-width: 44rem;
  text-wrap: balance;
}



/* SECTION: Component · Page main */
/* ============================================================
   Page main content area
   ============================================================ */

.page-main {
  padding-block: var(--space-10);
}


/* SECTION: Page · Home — hero */
/* ============================================================
   Hero — home page, full-bleed dark section
   ============================================================ */

/* ============================================================
   Hero de vídeo — home (V-2.3)
   ============================================================ */

/* Primitive token: --duration-slow is still used by footer and data-reveal */
:root {
  --duration-slow: 600ms;
}

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 100dvh;
  min-height: 100svh;
}

/* Poster as background + video container */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  background-image: url('/assets/video/hero-poster.webp');
  background-size: cover;
  background-position: center;
}

@media (max-width: 767px) {
  .hero-video-wrap {
    background-image: url('/assets/video/hero-poster-movil.webp');
  }
}

/* Video: starts invisible, fades in via .is-playing */
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--hero-video-fade) ease;
}

.hero-video.is-playing { opacity: 1; }

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

/* Dark veil overlay — uniforme; petición del cliente oct. 2026 (C3·A3): baja de 50 % al mínimo para 3:1 */
.hero-video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--hero-veil-opacity));
  pointer-events: none;
}

/* Content column, vertically centered */
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 100dvh;
  min-height: 100svh;
}

/* Reserve space above the completo logo; flex-centering within the remaining height.
   Padding is inside min-height (border-box) → hero stays at 100svh when content fits. */
.hero--video .hero-content {
  padding-block-start: calc(var(--space-4) + var(--hero-logo-h-video) + var(--hero-logo-gap));
}

/* H1: display-size flowing text, capped at 2/3 of container */
.hero-title {
  font-family: var(--font-headline);
  font-size: var(--hero-title-size);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-brand);
  max-width: var(--hero-title-max-w);
}

/* Each word on its own line; max-content preserves text-width so clip-path sweep is identical */
.hero-word {
  display: block;
  width: max-content;
  clip-path: inset(0 100% 0 0);
  animation: hero-word-reveal var(--hero-word-duration) var(--hero-word-ease) forwards;
}
.hero-word--1 { animation-delay: var(--hero-word-delay); }
.hero-word--2 { animation-delay: calc(var(--hero-word-delay) + var(--hero-word-duration) - var(--hero-word-overlap)); }
.hero-word--3 { animation-delay: calc(var(--hero-word-delay) + 2 * (var(--hero-word-duration) - var(--hero-word-overlap))); }

@keyframes hero-word-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-word { clip-path: none; animation: none; }
}

/* Logo sobre vídeo: CR 4,38:1 < 4,5 (logo claro, PENDIENTE). Logo oscuro: CR 5,53:1 ✅ (ver CLAUDE_WEB §12.5) */


/* SECTION: Component · Area rows */
/* ============================================================
   Areas — editorial rows
   ============================================================ */

.area-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding-block: var(--space-5);
  padding-inline: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-ink);
  cursor: pointer;
  transition: padding-inline var(--duration-base) ease,
              background-color var(--duration-base) ease;
}

.area-row:hover,
.area-row:focus-visible {
  background-color: var(--color-surface);
  padding-inline: var(--space-4);
  color: var(--color-ink);
}

.area-num {
  font-family: var(--font-headline);
  font-size: var(--text-base);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  align-self: baseline;
}

.area-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.area-name {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-brand);
  line-height: var(--leading-snug);
}

.area-desc {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  max-width: 52ch;
  line-height: var(--leading-normal);
}

.area-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-rule);
  color: var(--color-accent);
  font-size: var(--text-base);
  line-height: 1;
  align-self: center;
  flex-shrink: 0;
  text-decoration: none;
  transition:
    border-color var(--duration-base) var(--ease-out-soft),
    background-color var(--duration-base) var(--ease-out-soft),
    color var(--duration-base) var(--ease-out-soft);
}

/* Base hover: instant fill — accessible fallback + prefers-reduced-motion */
.area-row:hover .area-arrow,
.area-row:focus-visible .area-arrow,
.area-arrow:focus-visible {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-on-brand);
}

@media (prefers-reduced-motion: no-preference) {
  /* Dim non-hovered rows */
  .areas-list:has(.area-row:hover, .area-row:focus-visible) .area-row:not(:hover):not(:focus-visible) {
    opacity: var(--area-row-fade);
    transition: opacity var(--duration-base) ease;
  }

  /* Radial fill expanding from center */
  .area-arrow {
    background-image: radial-gradient(circle, var(--color-accent) 50%, transparent 50.5%);
    background-size: 0% 0%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    transition:
      background-size calc(var(--duration-base) * 3) var(--ease-out-soft),
      border-color var(--duration-base) ease,
      color var(--duration-base) ease;
  }

  .area-row:hover .area-arrow,
  .area-row:focus-visible .area-arrow,
  .area-arrow:focus-visible {
    background-size: 200% 200%;
    background-color: transparent;
  }
}

@media (max-width: 480px) {
  .area-row {
    grid-template-columns: auto 1fr;
  }
  .area-arrow {
    display: none;
  }
}


/* SECTION: Page · Hub de Áreas */
/* ============================================================
   Hub de Áreas — bandas alternas (V-2.13)
   Contraste rojo: #C10000 / #F4F4F1 = 5.83:1 AA ✓
                   #C10000 / #1F2328 = 2.46:1 (aceptado V-6.9)
   ============================================================ */

/* Container — sangra hasta los bordes del showcase */
.hub-areas-bands {
  width: calc(100% + 2 * var(--showcase-margin));
  margin-inline: calc(-1 * var(--showcase-margin));
  border-top: 1px solid var(--color-rule);
}

/* Banda individual */
.hub-areas-band {
  border-bottom: 1px solid var(--color-rule);
}

.hub-areas-band--dark {
  background-color: var(--color-bg);
}

/* Enlace que cubre la banda entera */
.hub-areas-band__link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding-block: var(--hub-area-band-pad);
  padding-inline: var(--showcase-margin);
  color: var(--color-ink);
  text-decoration: none;
}

/* Alt: nombre a la derecha */
.hub-areas-band--alt .hub-areas-band__name-side  { order: 2; }
.hub-areas-band--alt .hub-areas-band__content-side { order: 1; }

/* Columna nombre */
.hub-areas-band__name-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hub-areas-band__num {
  font-family: var(--font-headline);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
  transition: color var(--duration-base) ease;
}

.hub-areas-band__title {
  font-family: var(--font-headline);
  font-size: var(--hub-area-title-size);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.hub-areas-band__descriptor {
  font-size: var(--text-lg);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
}

/* Columna contenido */
.hub-areas-band__content-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hub-areas-band__summary {
  font-size: var(--text-lg);
  color: var(--color-ink);
  line-height: var(--leading-normal);
}

/* Rótulo de bloque cuando el área tiene múltiples listas (Civil) */
.hub-areas-band__services-rotulo {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-1);
  color: var(--color-ink-muted);
}
.hub-areas-band__services-rotulo + .hub-areas-band__services {
  margin-block-end: var(--space-4);
}

.hub-areas-band__services {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-6);
  width: 100%;
}

.hub-areas-band__services li {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
  margin-top: 0;
}

.hub-areas-band__content-side .area-arrow {
  align-self: flex-start;
  margin-block-start: auto;
}

/* ─── Gesto al pasar: misma mecánica que .areas-list / .area-row ─── */

/* Número → rojo (añadido a la especificación del hub) */
.hub-areas-band__link:hover .hub-areas-band__num,
.hub-areas-band__link:focus-visible .hub-areas-band__num {
  color: var(--color-accent);
}

/* Flecha → relleno rojo (fallback instantáneo) */
.hub-areas-band__link:hover .area-arrow,
.hub-areas-band__link:focus-visible .area-arrow {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-on-brand);
}

/* Contorno interior de foco — mismo patrón que .home-despacho-band */
.hub-areas-band__link:focus-visible {
  outline: var(--focus-outline, var(--focus-width) solid var(--color-focus));
  outline-offset: -4px;
}

@media (prefers-reduced-motion: no-preference) {
  /* Flecha → relleno radial animado */
  .hub-areas-band__link:hover .area-arrow,
  .hub-areas-band__link:focus-visible .area-arrow {
    background-size: 200% 200%;
    background-color: transparent;
  }
}

/* ─── Móvil ─── */
@media (max-width: 767px) {
  .hub-areas-band__link {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .hub-areas-band--alt .hub-areas-band__name-side,
  .hub-areas-band--alt .hub-areas-band__content-side {
    order: unset;
  }

  .hub-areas-band__services {
    grid-template-columns: 1fr;
  }
}

/* SECTION: Page · Colección de guías */
/* ============================================================
   Guides — "Stay Informed" grid
   ============================================================ */

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

@media (max-width: 1023px) {
  .guides-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.guide-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  border-left: var(--guide-card-band-w) solid var(--color-accent);
  padding-block: var(--card-gap);
  padding-inline: var(--card-gap);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-out-soft);
}

.guide-card:hover {
  transform: translateY(calc(var(--space-1) * -1));
}

.guide-kicker {
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-accent);
}

.guide-card h3,
.guide-card h2 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-brand);
}

.guide-card:hover h3,
.guide-card:hover h2 {
  color: var(--color-accent);
}

.guide-summary {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.guide-meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* Footer con autor y flecha en círculo — hub y páginas de área */
.guide-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: auto;
}

.guide-card__footer .guide-meta {
  margin-block-start: 0;
}

/* La flecha queda siempre a la derecha, haya o no autor */
.guide-card__footer .area-arrow {
  margin-inline-start: auto;
}

/* Hover/foco — misma animación que en .area-row */
.guide-card:hover .area-arrow,
.guide-card:focus-visible .area-arrow {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-on-brand);
}

@media (prefers-reduced-motion: no-preference) {
  .guide-card:hover .area-arrow,
  .guide-card:focus-visible .area-arrow {
    background-size: 200% 200%;
    background-color: transparent;
  }
}

/* SECTION: Page · Hub de Perspectiva jurídica */
/* ============================================================
   Hub de Perspectiva jurídica — Guías y Notas (V-2.12)
   ============================================================ */

.hub-section-heading {
  font-family: var(--font-headline);
  font-size: var(--text-disp);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-block-end: var(--space-8);
}

/* Guías ─── */

.hub-guides-section {
  padding-block: var(--section-space);
}

.hub-guides-lema {
  font-size: var(--text-md);
  color: var(--color-ink-muted);
  max-width: 56ch;
  margin-block-end: var(--space-8);
}

.guides-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-8);
}

.guides-filter-btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-rule);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  border-radius: 0;
  transition: background var(--duration-base) ease, color var(--duration-base) ease;
}

/* Activo: grafito con texto claro — contraste #EDEDE8/#1F2328 = 13,45:1 AAA */
.guides-filter-btn--active {
  background: var(--dark-bg);
  color: var(--dark-ink);
  border-color: var(--dark-bg);
}

.guides-filter-btn:hover {
  background: var(--color-accent);
  color: var(--color-on-brand);
  border-color: var(--color-accent);
}

/* Notas ─── */

.hub-notes-section {
  padding-block-start: 0;
}

.hub-notes-section > .hub-section-heading {
  color: var(--color-ink);
  margin-block-end: var(--space-6);
}

.notes-band {
  --color-bg:       var(--dark-bg);
  --color-ink:      var(--dark-ink);
  --color-ink-muted: var(--dark-ink-muted);
  --color-accent:   var(--dark-accent);
  --color-focus:    var(--dark-ink);
  background: var(--dark-bg);
  /* bleed to showcase edges — same pattern as .hub-areas-bands */
  width: calc(100% + 2 * var(--showcase-margin));
  margin-inline: calc(-1 * var(--showcase-margin));
  padding-block: var(--notes-band-pad);
  padding-inline: var(--showcase-margin);
}

.notes-band-items {
  /* Sin rotador (no-JS / reduced-motion): notas apiladas en flujo vertical normal */
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-block-end: var(--space-8);
}

/* Con rotador activo: superposición en celda única → altura estable */
.notes-band.has-rotator .notes-band-items {
  display: grid;
}

.notes-band.has-rotator .notes-item {
  grid-area: 1 / 1;
  align-items: stretch;
}

.notes-item {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--space-8);
  align-items: start;
  border-top: 1px solid color-mix(in srgb, var(--dark-ink) 18%, transparent);
  padding-block-start: var(--space-5);
}

.notes-item:first-child {
  border-top: none;
  padding-block-start: 0;
}

.notes-title-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.notes-item-link {
  font-family: var(--font-headline);
  font-size: var(--hub-area-title-size);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--dark-ink);
  text-decoration: none;
}

.notes-item-link:hover {
  color: var(--dark-accent);
}

/* Columna derecha: fecha → frase → firma anclada al pie */
.notes-excerpt-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.notes-item-date {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.notes-item-date-label {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--dark-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.notes-item-date-value {
  font-family: var(--font-headline);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--dark-ink);
}

.notes-item-excerpt {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--dark-ink-muted);
}

.notes-item-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: auto;
}

.notes-item-author-name {
  font-size: var(--text-sm);
  color: var(--dark-ink-muted);
}

/* Flecha de autor: mismo gesto que en el resto del sitio, activado desde el título */
.notes-item .area-arrow {
  flex-shrink: 0;
}

.notes-item:has(.notes-item-link:hover) .area-arrow,
.notes-item:has(.notes-item-link:focus-visible) .area-arrow {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-on-brand);
}

@media (prefers-reduced-motion: no-preference) {
  .notes-item:has(.notes-item-link:hover) .area-arrow,
  .notes-item:has(.notes-item-link:focus-visible) .area-arrow {
    background-size: 200% 200%;
    background-color: transparent;
  }
}

.notes-controls {
  /* Ocultos hasta que el JS del Paso B añada .has-rotator a .notes-band */
  display: none;
}

/* Rotador activo ─────────────────────────────────────────────── */

.notes-band.has-rotator .notes-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.notes-band.has-rotator .notes-item:not(.notes-item--active) {
  visibility: hidden;
  pointer-events: none;
}

/* Barra de progreso con animación de relleno */
.notes-band.has-rotator .notes-bar {
  position: relative;
  overflow: hidden;
}

.notes-band.has-rotator .notes-bar--active {
  background: color-mix(in srgb, var(--dark-ink) 30%, transparent);
}

.notes-band.has-rotator .notes-bar--active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dark-accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: notes-bar-fill var(--notes-rotator-dur) linear forwards;
}

@keyframes notes-bar-fill {
  to { transform: scaleX(1); }
}

/* Cero resultados / cargar más ──────────────────────────────── */

.guides-filter-empty {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin-block: var(--space-8);
  text-align: center;
}

.guides-load-more {
  display: block;
  margin-inline: auto;
  margin-block-start: var(--space-8);
}

.notes-bars {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.notes-bar {
  width: 2rem;
  height: 3px;
  background: color-mix(in srgb, var(--dark-ink) 30%, transparent);
  border: none;
  cursor: pointer;
  transition: background var(--duration-base) ease;
}

.notes-bar--active {
  background: var(--dark-accent);
  width: 3rem;
}

.notes-arrows {
  display: flex;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.notes-arrow {
  font-size: var(--text-lg);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--dark-ink) 30%, transparent);
  color: var(--dark-ink);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--duration-base) ease, color var(--duration-base) ease;
}

.notes-arrow:hover {
  border-color: var(--dark-ink);
  color: var(--dark-accent);
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .guides-grid {
    grid-template-columns: 1fr;
  }

  .guides-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block-end: var(--space-2);
    /* A2b: bleed to viewport edges; padding-inline restores the gutter inside the scroll area */
    width: calc(100% + 2 * var(--showcase-margin));
    margin-inline: calc(-1 * var(--showcase-margin));
    padding-inline: var(--showcase-margin);
  }

  .guides-filter::-webkit-scrollbar { display: none; }

  .guides-filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 44px;
  }

  .notes-item {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .notes-item-link {
    /* Contenido: 28px en el extremo inferior de la escala — legible y sin desbordarse */
    font-size: var(--text-2xl);
  }

  .notes-item-author {
    margin-block-start: var(--space-2);
  }

  .notes-controls {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .notes-arrows {
    margin-inline-start: 0;
  }

  .notes-bar {
    position: relative;
  }
  .notes-bar::after {
    content: '';
    position: absolute;
    inset-block: calc((100% - 44px) / 2);
    inset-inline: 0;
  }

  .notes-arrow {
    width: 44px;
    height: 44px;
  }
}

/* SECTION: Component · Panels — lateral panel de área */
/* ============================================================
   Panels — lateral (áreas) and bottom sheet (equipo / áreas mobile)
   ============================================================ */

/* Wrapper + veil ────────────────────────────────────────────── */

html:has(.panel-wrap.is-open) {
  overflow: hidden;
}

.panel-wrap {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}

.panel-wrap.is-open {
  pointer-events: auto;
}

.panel-veil {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 14, var(--panel-veil-opacity));
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms var(--ease-panel), visibility 350ms;
}

.panel-wrap.is-open .panel-veil {
  opacity: 1;
  visibility: visible;
}

/* Lateral panel (áreas, desktop) ───────────────────────────── */

.panel-aside {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 92vw);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: -24px 0 60px rgba(10, 12, 14, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 350ms var(--ease-panel), visibility 350ms;
  visibility: hidden;
}

.panel-wrap.is-open .panel-aside {
  transform: translateX(0);
  visibility: visible;
}

/* Mobile: lateral → bottom sheet */
@media (max-width: 767px) {
  .panel-aside {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 90svh;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    box-shadow: 0 -24px 70px rgba(10, 12, 14, 0.32);
    transform: translateY(100%);
  }
  .panel-wrap.is-open .panel-aside {
    transform: translateY(0);
  }
  .panel-aside .panel-drag {
    display: flex;
  }
}

/* SECTION: Component · Panels — bottom sheet */
/* Bottom sheet (equipo, always) ───────────────────────────── */

.panel-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: var(--team-sheet-max-h);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: 0 -24px 70px rgba(10, 12, 14, 0.32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 350ms var(--ease-panel), visibility 350ms;
  visibility: hidden;
}

.panel-wrap.is-open .panel-sheet {
  transform: translateY(0);
  visibility: visible;
}

.sheet-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  z-index: 2;
}

/* Drag handle ─────────────────────────────────────────────── */

.panel-drag {
  display: flex;
  justify-content: center;
  padding: var(--space-3) 0 var(--space-2);
  flex-shrink: 0;
  cursor: grab;
}

.panel-aside .panel-drag {
  display: none;
}

.panel-drag span {
  width: 2.75rem;
  height: 0.25rem;
  border-radius: 9999px;
  background: var(--color-ink-muted);
  opacity: 0.4;
}

/* Panel header ─────────────────────────────────────────────── */

.panel-head {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--section-rule);
  flex-shrink: 0;
}

.panel-head .eyebrow {
  margin: 0;
}

.amp-mark {
  color: var(--color-accent); /* adapts via .on-dark: remaps to --dark-accent = #C10000 */
}

.panel-close {
  background: transparent;
  border: 1px solid var(--color-rule);
  border-radius: var(--card-radius);
  width: 2.375rem;
  height: 2.375rem;
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: 1;
  flex-shrink: 0;
  transition: border-color var(--duration-base) ease;
}

.panel-close:hover {
  border-color: var(--color-ink);
}

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

/* Panel body ─────────────────────────────────────────────────  */

.panel-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Panel footer ───────────────────────────────────────────────  */

.panel-foot {
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-top: var(--section-rule);
  flex-shrink: 0;
}

/* Area panel content ─────────────────────────────────────────  */

.panel-area-title {
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  color: var(--color-brand);
}

.panel-area-desc {
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
}

.panel-area-guides {
  border-top: var(--section-rule);
  padding-top: var(--space-4);
}

.panel-area-guides h3 {
  font-size: var(--eyebrow-size);
  text-transform: var(--eyebrow-transform);
  letter-spacing: var(--eyebrow-tracking);
  font-weight: var(--eyebrow-weight);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

.panel-area-guides a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: var(--section-rule);
  font-weight: 500;
}

.panel-area-guides a:hover {
  color: var(--color-accent);
}

.panel-area-guides a span:last-child {
  color: var(--color-accent);
  flex-shrink: 0;
}

.panel-hint {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin-top: auto;
}

/* Author panel (right-side) — sheet-inner-grid inside panel-body, no extra padding */

.panel-body > .sheet-inner-grid {
  padding: 0;
}

/* SECTION: Component · Panels — team sheet content */
/* Team sheet content ─────────────────────────────────────────  */

.sheet-inner-grid {
  display: grid;
  grid-template-columns: var(--team-sheet-portrait-w) 1fr;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-6) var(--space-10);
}

/* ── Modo firma: retrato arriba a sangre, info debajo ──────────── */
/* Required on author-panel sheet: without it the base grid uses two columns and text fits in ~120px inside a ~520px container. */
.sheet-inner-grid--stacked {
  grid-template-columns: 1fr;
  padding: 0;
  gap: 0;
}
.sheet-inner-grid--stacked .sheet-tile {
  aspect-ratio: var(--sheet-portrait-ratio);
  border-radius: 0;
  width: 100%;
}
.sheet-inner-grid--stacked .sheet-info {
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-6);
  gap: var(--space-2);
}
.sheet-inner-grid--stacked .sheet-info-role {
  font-size: var(--text-sm);
}
.sheet-inner-grid--stacked .sheet-info-bio {
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}

.sheet-tile {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--card-radius);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 70% 12%, #2B3138 0, transparent 55%),
    linear-gradient(180deg, #20262c 0%, #14181c 100%);
  isolation: isolate;
  align-self: start;
}

.sheet-tile::before {
  content: '&';
  position: absolute;
  right: -8%;
  bottom: -14%;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 13rem;
  line-height: 0.7;
  color: var(--color-accent);
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}

.sheet-tile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  transition: transform 500ms var(--ease-out-soft);
}

.sheet-tile-initials {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--text-2xl);
  color: var(--dark-ink);
  opacity: 0.9;
  z-index: 1;
}

.sheet-info h2 {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  line-height: var(--leading-snug);
}

.sheet-info-role {
  color: var(--color-accent);
  font-weight: 600;
  margin-top: var(--space-1);
}

.sheet-info-bar {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-1);
}

.sheet-info-bio {
  margin-top: var(--space-5);
  line-height: var(--leading-relaxed);
  max-width: 60ch;
}

.sheet-info-sections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-6);
}

.sheet-info-areas h4,
.sheet-info-guides h4 {
  font-size: var(--eyebrow-size);
  text-transform: var(--eyebrow-transform);
  letter-spacing: var(--eyebrow-tracking);
  font-weight: var(--eyebrow-weight);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

.sheet-info-areas a,
.sheet-info-guides a {
  display: block;
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: var(--section-rule);
  font-weight: 500;
  max-width: 34ch;
}

.sheet-info-areas a:hover,
.sheet-info-guides a:hover {
  color: var(--color-accent);
}

.sheet-info-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-2);
}
.sheet-info-head h2 { flex: 1; min-width: 0; margin-block: 0; }
.sheet-nav { display: flex; gap: var(--space-2); flex-shrink: 0; align-self: center; }
.sheet-nav-btn {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--card-radius);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: border-color var(--duration-base) ease, color var(--duration-base) ease;
}
.sheet-nav-btn:hover:not(:disabled) { border-color: var(--color-ink); }
.sheet-nav-btn:disabled { color: var(--color-ink-muted); cursor: default; opacity: 0.5; }
.sheet-nav-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* V-2.10d — panel grafito, retrato a sangre, flechas laterales ─── */

#team-sheet-wrap .sheet-inner-grid {
  padding: 0;
  gap: 0;
}

#team-sheet-wrap .sheet-tile {
  aspect-ratio: unset;
  border-radius: 0;
  align-self: stretch;
}

#team-sheet-wrap .sheet-info {
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-6);
}

/* border-top: 1px is intentional (differs from .sheet-info-areas a which uses 2 px). Do not unify without a design review. */
.ts-profile-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  text-decoration: none;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule);
}

.ts-profile-link:hover {
  color: var(--color-accent);
}

.sheet-nav-lateral {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1.5px solid var(--dark-rule);
  background: rgba(var(--dark-bg-rgb), 0.85);
  color: var(--dark-ink);
  font-size: var(--text-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: var(--sheet-arrow-rest-opacity);
  transition: opacity var(--duration-base) ease;
  z-index: 2;
}

#sheet-prev { left: var(--space-4); }
#sheet-next { right: var(--space-4); }

.sheet-nav-lateral:hover:not(:disabled),
.sheet-nav-lateral:focus-visible {
  opacity: 1;
}

.sheet-nav-lateral:disabled {
  cursor: default;
  opacity: calc(var(--sheet-arrow-rest-opacity) * 0.5);
}

.sheet-nav-lateral:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .sheet-inner-grid {
    grid-template-columns: 1fr;
  }
  .sheet-tile {
    max-width: 180px;
  }
  .sheet-inner-grid--stacked .sheet-tile {
    max-width: unset;
  }
  .sheet-nav-lateral { display: none; }
  #team-sheet-wrap .sheet-tile {
    max-width: unset;
    aspect-ratio: 4/5;
    max-height: var(--portrait-sheet-max-h);
  }
  #team-sheet-wrap .sheet-scroll {
    padding-bottom: var(--safe-bottom);
  }
  .panel-head .panel-close {
    position: relative;
  }
  .panel-close::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--panel-close-hit-ext));
  }
}

/* V-2.10e — foto a sangre por arriba, velo 90 %, controles sobre retrato ─ */

/* Drag handle floats over the portrait (no longer takes space in flex flow).
   Close button z-index:2 > drag handle z-index:auto → close button stays clickable. */
#team-sheet-wrap .panel-drag {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* Gradient at top of portrait tile ensures drag handle pill and close button
   are legible over any portrait tone. Fades to transparent at 30% height.
   pointer-events:none so it does not block clicks to the photo below. */
#team-sheet-wrap .sheet-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.50) 0%, transparent 30%);
  z-index: 1;
  pointer-events: none;
}

/* Raise initials above gradient overlay within the tile stacking context */
#team-sheet-wrap .sheet-tile-initials {
  z-index: 2;
}

/* Close button: semi-transparent dark background legible on any portrait tone.
   Measured worst case (portrait top = white, 70 % dark overlay): 5.17:1 ≥ AA. */
#team-sheet-wrap .sheet-close {
  background: rgba(var(--dark-bg-rgb), 0.70);
  border-color: var(--dark-ink-muted);
}

/* Drag handle pill: slightly more opaque for legibility over portrait (decorative element). */
#team-sheet-wrap .panel-drag span {
  opacity: 0.65;
}

/* Team sheet veil at 90 % — prevents portrait-on-portrait effect with the
   team-band grid behind. Nav veil and author panel veil are unaffected. */
#team-sheet-wrap .panel-veil {
  background: rgba(10, 12, 14, var(--team-sheet-veil-opacity));
}

/* SECTION: Component · Team band */
/* Team band — /despacho/ portrait strip (V-2.16) ─────────────  */

.team-band {
  display: flex;
  gap: 0;
  margin-block-start: var(--space-8);
}

.team-card {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--color-ink);
}

.team-card.team-portrait {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: block;
  container-type: inline-size;
}

.team-card.team-portrait:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  z-index: 1;
}

.team-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 70% 12%, #2B3138 0, transparent 55%),
    linear-gradient(180deg, #20262c 0%, #14181c 100%);
  isolation: isolate;
}

.team-tile-initials {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--text-2xl);
  color: var(--dark-ink);
  opacity: 0.9;
  z-index: 1;
}

.team-tile-placeholder {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-ink-muted);
  z-index: 1;
}

/* Base photo: always in colour — petición del cliente oct. 2026 (C3·A1) */
.team-tile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

/* Signal: name underline on hover / focus (gris→color retirado — C3·A1) */
.team-card.team-portrait:hover .team-portrait-name,
.team-card.team-portrait:focus-visible .team-portrait-name {
  text-decoration: underline;
}

/* Hide initials when photo is present */
.team-tile:has(.team-tile-photo) .team-tile-initials {
  display: none;
}

.sheet-tile:has(.sheet-tile-photo:not([hidden])) .sheet-tile-initials {
  display: none;
}

/* Caption: name + role below the portrait photo */
.team-portrait-caption {
  display: block;
  padding: var(--space-2) var(--team-portrait-cap-pad);
}

/* 3.8cqw calibrated for "José Ignacio Loitegui Baciero" (longest name) — do not change without measuring that name. */
.team-portrait-name {
  display: block;
  font-family: var(--font-headline);
  font-size: max(var(--text-sm), 3.8cqw);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}

/* Role label in red — registered decision, do not change to neutral. */
.team-portrait-role {
  display: block;
  font-size: var(--team-portrait-cap-role-size);
  color: var(--color-accent);
  line-height: 1.2;
  margin-top: 0.2em;
}

@media (max-width: 767px) {
  .team-band { flex-direction: column; }
  .sheet-inner-grid {
    padding-inline: var(--space-4);
  }
}

/* Reduced motion ─────────────────────────────────────────────  */

@media (prefers-reduced-motion: reduce) {
  .panel-veil,
  .panel-aside,
  .panel-sheet,
  .team-tile,
  .sheet-tile-photo {
    transition: none;
  }
}


/* SECTION: Page · Equipo — perfil individual */
/* ============================================================
   Team member — ficha individual (/equipo/{slug}/)  V-2.10c
   Two columns: sticky portrait left, scrollable content right.
   ============================================================ */

.team-profile {
  display: grid;
  grid-template-columns: 50% 1fr;
  min-height: 100dvh;
}

/* position: sticky creates a containing block for position:absolute children */
.profile-left {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
}

/* Logo chl-logo-light.png (tinta gris #515151) sobre retrato (fondo claro).
   V-6.6: sustituye chl-logo-dark.png. Contraste medido en V-6.6.
   Para cambiar versión de logo: src en generateTeamMember() generate.mjs. */
.profile-left .hero-logo {
  z-index: 3;
}


.profile-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.profile-portrait--blank {
  background: var(--dark-bg);
}

.profile-right {
  padding-inline: var(--space-10);
  padding-block: var(--space-16) var(--space-12);
}

/* 1 · La entrada */
.profile-entry {
  padding-bottom: var(--space-10);
}

.profile-entry h1 {
  margin-bottom: var(--space-1);
}

.profile-cargo {
  color: var(--color-accent);
  margin: 0;
}

.profile-tagline {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  margin-top: var(--space-5);
  margin-bottom: 0;
}

/* 2 · Bio */
.profile-bio {
  padding-bottom: var(--space-10);
}

/* 3 · Bloque grafito — tokens compartidos con .band-grafito; layout propio */
.profile-dark-block {
  position: relative;
  overflow: hidden;
  background: var(--dark-bg);
  color: var(--dark-ink);
  padding: var(--space-10) var(--space-10);
  margin-inline: calc(-1 * var(--space-10));
  margin-bottom: var(--space-10);
}

.profile-dark-block h2 {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-ink-muted);
  margin-bottom: var(--space-2);
  margin-top: 0;
}

.profile-dark-block section {
  margin-bottom: var(--space-6);
}

.profile-dark-block section:last-of-type {
  margin-bottom: 0;
}

.profile-dark-block p {
  margin: 0;
  color: var(--dark-ink);
}

.profile-dark-block ul {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--dark-ink);
}

.profile-dark-block ul a {
  color: var(--dark-ink);
  text-decoration: none;
}

.profile-dark-block ul a:hover {
  color: var(--color-accent);
}

/* REMATES2 D1: subgrupos de áreas por público en la ficha de equipo */
.profile-dark-block .team-areas-group + .team-areas-group {
  margin-top: var(--space-3);
}
.profile-dark-block .team-areas-group h3 {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--dark-ink-muted);
  margin: 0 0 var(--space-1) 0;
  text-transform: none;
  letter-spacing: 0;
}

.profile-amp-watermark {
  position: absolute;
  right: -15%;
  bottom: -15%;
  width: 55%;
  opacity: 0.06;
  color: var(--dark-ink);
  pointer-events: none;
  display: block;
}

.profile-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  margin-top: var(--space-6);
}

.profile-contact a,
.profile-contact span {
  color: var(--dark-ink-muted);
  text-decoration: none;
}

.profile-contact a:hover {
  color: var(--dark-ink);
}

/* 4 · Lo que firma */
.profile-firma {
  padding-bottom: var(--space-8);
}

/* CTA + navegación circular */
.profile-cta {
  padding-bottom: var(--space-10);
}

.profile-nav-arrows {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
}

.profile-nav-prev,
.profile-nav-next {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  transition: color var(--duration-base) ease;
}

.profile-nav-prev:hover,
.profile-nav-next:hover {
  color: var(--color-accent);
}

.profile-nav-next {
  margin-left: auto;
}

@media (max-width: 767px) {
  .team-profile {
    display: block;
  }

  .profile-left {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .profile-portrait {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .profile-right {
    padding-inline: var(--showcase-margin);
    padding-block: var(--space-10);
  }

  .profile-dark-block {
    margin-inline: calc(-1 * var(--showcase-margin));
    padding-inline: var(--showcase-margin);
  }
}


/* SECTION: Page · Despacho (Quiénes somos) — intro */
/* ============================================================
   Despacho page — intro with amp mark
   ============================================================ */

.despacho-intro-item {
  padding-inline: 0;
  align-items: flex-start;
  margin-block-end: var(--space-8);
}

.despacho-intro-item .lead {
  margin: 0;
}


/* SECTION: Page · Despacho (Quiénes somos) — bandas */
/* ============================================================
   Bandas alternas — página /despacho/ (V-2.6, secuencia B2)
   .band base · .band--full · .band-grafito
   Dentro de showcaseWrap: imagen sangra con bleed calc(-1 * --showcase-margin).
   (.band--lateral y .band--reversed eliminados en V-4.3: clases nunca emitidas por el generador)
   ============================================================ */

/* Base — shared by lateral and full-bleed variants */
.band {
  display: grid;
  align-items: stretch;
  margin-block: 0;
}

/* ── Full-bleed sangre 21:9: imagen a sangre completa, texto encima con velo ── */
.band--full {
  position: relative;
  /* Sangre completa a ambos lados */
  width: calc(100% + 2 * var(--showcase-margin));
  margin-inline: calc(-1 * var(--showcase-margin));
  aspect-ratio: 1600 / 686; /* ~21:9 del activo */
  overflow: hidden;
  margin-block: 0;
}

.band--full .band-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.band--full .band-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo solo bajo el texto — degradado izquierda→transparente; petición del cliente oct. 2026 (C3·A3) */
.band--full::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    var(--band-veil-dir, to right),
    rgba(0, 0, 0, var(--band-veil-opacity)) 0%,
    rgba(0, 0, 0, var(--band-veil-opacity)) 30%,
    rgba(0, 0, 0, calc(var(--band-veil-opacity) * 0.5)) 50%,
    transparent 70%
  );
}

/* Titular al tercio derecho; velo espejo — V-6.7 (petición del cliente oct. 2026) */
.band--text-right {
  --band-veil-dir: to left;
}

.band--text-right::after {
  background: rgba(0, 0, 0, var(--band-veil-opacity));
}

.band--text-right .band-text {
  inset-inline-start: auto;
  inset-inline-end: var(--showcase-margin);
}

/* Foto de grupo: sin texto superpuesto, sin velo (imagen limpia). */
.band--no-veil::after {
  display: none;
}

.band--full .band-text {
  position: absolute;
  z-index: 2;
  inset-block: 0;
  inset-inline-start: var(--showcase-margin);
  max-width: var(--band-text-max);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  color: var(--dark-ink);
}

.band--full .band-text h2 {
  font-family: var(--font-headline);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--dark-ink);
  margin: 0;
}

/* ── Banda grafito: sección oscura fija, dos columnas (V-2.6) ── */
.band-grafito {
  /* Full-bleed dentro del showcaseWrap no aplica; la sección es hija de body directamente.
     Al no estar en showcaseWrap, usa width 100% y el background cubre todo el viewport. */
  background: var(--color-bg);
  color: var(--color-ink);
  padding-block: var(--section-space);
}

.band-grafito-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

/* Divisa — texto a tamaño display, columna izquierda */
.band-grafito-divisa {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.band-grafito-divisa-text {
  font-family: var(--font-headline);
  font-size: var(--text-disp);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: 0;
}

/* Credentials — tres ítems con ampersand rojo, columna derecha */
.band-grafito-creds {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.band-grafito-credentials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.band-grafito-credentials li {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
}

.band-grafito-credentials .amp-mark {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  color: var(--color-accent); /* remapped to --dark-accent via .on-dark */
  line-height: 1;
  margin-inline-end: var(--space-2);
}

/* ── Banda de retratos — a sangre (V-2.16) ── */
.team-section {
  background: var(--color-surface-alt);
  padding-block: var(--section-space);
  width: calc(100% + 2 * var(--showcase-margin));
  margin-inline: calc(-1 * var(--showcase-margin));
  overflow: hidden;
}

.team-section > h2 {
  padding-inline: var(--showcase-margin);
}

/* ── Móvil ≤ 767 px ── */
@media (max-width: 767px) {
  .band--full {
    overflow: visible;
  }

  .band--full .band-image {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: calc(100% * 5 / 4); /* 4:5 portrait ratio */
    overflow: hidden;
  }

  .band--full .band-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .band--no-veil .band-image {
    height: auto;
    padding-bottom: 0;
  }

  .band--no-veil .band-image img {
    position: static;
    height: auto;
    object-fit: unset;
  }

  .band--full::after {
    display: none;
  }

  .band--full .band-text {
    position: static;
    inset: unset;
    max-width: unset;
    display: block;
    padding: var(--mobile-block-pad) var(--showcase-margin);
    background: var(--color-bg);
    color: var(--color-ink);
  }

  .band-grafito-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}


/* SECTION: Component · Photo split */
/* ============================================================
   .photo-split — split 50/50 a sangre con foto out-of-flow (D73)
   Componente unificado para bandas con foto: Despacho (bandas 1 y 2)
   e Iguala (bloque 2). La foto llena su celda con position:absolute;
   el texto dicta la altura del bloque.
   La posición de la foto se inyecta via --img-pos.

   Modificadores:
     --photo-right: foto DOM-primero pero visualmente en columna derecha
     --photo-ratio: min-height desde la proporción 4:3 (Despacho)
     --text-centered: texto centrado verticalmente con padding simétrico (Despacho)

   CRITERIO DE EJE del texto:
   · Enfrente hay texto → eje izquierdo (por defecto).
   · Enfrente hay foto + el texto es bloque de lectura → centrado en su
     mitad (modificador --text-centered; Despacho).
   · Enfrente hay foto + el texto es rótulo/etiqueta (Iguala, retrato de
     área) → eje izquierdo igualmente: centrarlo haría saltar el rótulo.
   ============================================================ */
/* Two photo-split implementations exist: .photo-split and .area-split--portrait-photo (which depends on team panel JS). Do not merge. */

.photo-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: calc(100% + 2 * var(--showcase-margin));
  margin-inline: calc(-1 * var(--showcase-margin));
  overflow: clip;
}

.photo-split-photo {
  position: relative;
  overflow: clip;
}

.photo-split-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--img-pos, 50% center);
  display: block;
}

/* Photo-right: foto DOM-primero pero visualmente en columna derecha */
.photo-split--photo-right .photo-split-photo { order: 2; }
.photo-split--photo-right .photo-split-text  { order: 1; }

/* Height from photo ratio (Despacho): cap at 85svh so viewport-short screens
   clip the photo, not overflow the text */
.photo-split--photo-ratio {
  min-height: min(calc(50vw * 3 / 4), 85svh);
}

/* Text centered in column with symmetric padding (Despacho) */
.photo-split--text-centered .photo-split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  padding-block: var(--section-space);
  /* Centra el bloque en su mitad: padding igual a cada lado = (50 % de celda − ½ medida).
     min → showcase-margin garantiza que la celda nunca aplaste el texto. */
  padding-inline: max(var(--showcase-margin), calc(50% - var(--band-text-max) / 2));
}

/* Content styles for Despacho text column */
.split-band-text h2 {
  font-family: var(--font-headline);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: 0;
}

.split-band-text p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  margin: 0;
}

@media (max-width: 767px) {
  .photo-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .photo-split-photo {
    aspect-ratio: 4 / 3;
  }
  /* Foto DOM-primero = visualmente primera en móvil */
  .photo-split--photo-right .photo-split-photo { order: 0; }
  .photo-split--photo-right .photo-split-text  { order: 0; }
  .photo-split--text-centered .photo-split-text {
    padding-inline: var(--showcase-margin);
  }
}


/* SECTION: Component · Site footer — maps y building photo */
/* ============================================================
   Footer — Google Maps link + building photo hover
   ============================================================ */

.footer-address-group {
  display: flex;
  align-items: stretch;
}

.footer-building-thumb-wrap {
  width: 0;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--space-1);
  margin-inline-end: 0;
  transition:
    width var(--duration-slow) var(--ease-out-soft),
    margin-inline-end var(--duration-slow) ease;
}

.footer-building-thumb {
  display: block;
  width: 68px;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.footer-address-group:hover .footer-building-thumb-wrap,
.footer-address-group:focus-within .footer-building-thumb-wrap {
  width: 68px;
  margin-inline-end: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  .footer-building-thumb-wrap { transition: none; }
}

@media (hover: none) {
  .footer-building-thumb-wrap {
    width: 68px;
    margin-inline-end: var(--space-3);
    transition: none;
  }
}

.footer-maps-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--dark-ink-muted);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.footer-maps-link:hover {
  color: var(--dark-ink);
}

.footer-pin-icon {
  display: inline-block;
  vertical-align: -0.1em;
  flex-shrink: 0;
}


/* SECTION: Page · Área — FAQ y guías relacionadas */
/* ============================================================
   Area page — byline, FAQ, CTA, related guides
   ============================================================ */

/* FAQ accordion (C1) */

.faq-section {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: var(--section-rule);
}

.faq-accordion {
  margin-top: var(--space-6);
}

.faq-item {
  border-bottom: var(--section-rule);
  transition: background-color var(--duration-base) var(--ease-out-soft);
}

/* Subtle row highlight on expanded item — no red fill, just surface lift */
.faq-item:has(.faq-q[aria-expanded="true"]) {
  background-color: var(--color-surface);
}

.faq-q {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding-block: var(--space-5);
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-brand);
  text-align: left;
}

.faq-q:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: var(--space-1);
  border-radius: var(--card-radius);
}

.faq-q:hover {
  color: var(--color-accent);
}

.faq-amp {
  font-size: var(--text-2xl);
  line-height: 1;
  flex-shrink: 0;
}

.faq-q-text {
  flex: 1;
}

.faq-chevron {
  width: var(--space-6);
  height: var(--space-6);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  align-self: center;
  transition: transform var(--duration-base) var(--ease-out-soft);
}

.faq-chevron::before {
  content: '›';
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  line-height: 1;
}

.faq-q[aria-expanded="true"] .faq-chevron {
  transform: rotate(90deg);
}

.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms var(--ease-out-soft);
}

.faq-a-wrap > div {
  overflow: hidden;
}

.faq-q[aria-expanded="true"] + .faq-a-wrap {
  grid-template-rows: 1fr;
}

.faq-a-text {
  padding-inline-start: var(--space-8);
  padding-bottom: var(--space-5);
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
  max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
  .faq-a-wrap,
  .faq-chevron,
  .faq-item {
    transition: none;
  }
}

/* SECTION: Component · Page hero — interior */
/* ============================================================
   Page hero — interior pages (A1)
   ============================================================ */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--space-16) + var(--header-h, 4.5rem)) var(--space-16);
}

/* V-1.5 final — fixed header is out of flow; hero inner needs top clearance for controls */
.hero .hero-inner {
  padding-block-start: calc(var(--space-20) + var(--header-h, 4.5rem));
}

.page-hero-amp {
  position: absolute;
  right: -4%;
  bottom: -20%;
  z-index: 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: min(56vw, 800px);
  line-height: 0.7;
  color: var(--hero-amp-color);
  opacity: var(--page-hero-amp-opacity);
  user-select: none;
  pointer-events: none;
}

/* max-height keeps the SVG inside the hero — if it doesn't fit, shrink the SVG, not grow the hero. */
.page-hero-amp-svg {
  position: absolute;
  right: 2%;
  bottom: 0;
  z-index: 0;
  max-height: calc(100% - var(--space-4));
  width: auto;
  color: var(--hero-amp-color);
  opacity: var(--page-hero-amp-opacity);
  user-select: none;
  pointer-events: none;
}

.chl-amp-mask {
  mask-type: alpha;
}
/* First visit: hidden until IO fires the trace animation */
html.chl-amp-js:not(.chl-amp-seen) .page-hero-amp-svg:has(.chl-amp-fill) {
  opacity: 0;
}
/* Repeat visits and reduced-motion: rest tone from first pixel, no JS-driven flash */
html.chl-amp-seen .page-hero-amp-svg:has(.chl-amp-fill) {
  opacity: var(--amp-rest-opacity);
}

.page-hero-inner {
  position: relative;
  z-index: 1;
}

.page-hero .eyebrow {
  margin-bottom: var(--space-12);
}

/* SECTION: Component · Page eyebrow */
/* ============================================================
   Page eyebrow — breadcrumb migas inside page-hero slot
   ============================================================ */

.page-eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-12);
}

.page-eyebrow a {
  color: inherit;
  text-decoration: none;
}

.page-eyebrow a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-eyebrow__current {
  color: var(--color-ink);
}

/* Mobile: show only the immediate parent link with arrow.
   Decoratives (amp-mark, separators) disappear; all links except the last are
   visually clipped but remain in the accessibility tree. */
@media (max-width: 479px) {
  .page-eyebrow--collapsed [aria-hidden="true"] {
    display: none;
  }

  .page-eyebrow--collapsed .page-eyebrow__current,
  .page-eyebrow--collapsed a:not(:last-of-type) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .page-eyebrow--collapsed a:last-of-type::before {
    content: '← ';
  }
}

@media (max-width: 767px) {
  .page-eyebrow a {
    position: relative;
  }
  .page-eyebrow a::after {
    content: '';
    position: absolute;
    inset-block: calc((100% - 44px) / 2);
    inset-inline: 0;
  }
}

/* SECTION: Component · Page hero — tipografía y animaciones */
.page-hero h1 {
  max-width: 22ch;
  margin-bottom: var(--space-6);
}

.page-hero--disp h1 {
  font-size: var(--text-disp);
  max-width: none;
}

.page-hero--center .page-hero-inner {
  text-align: center;
}

.page-hero--center .lead {
  margin-inline: auto;
}

.page-hero .lead {
  max-width: 56ch;
  margin-bottom: 0;
}

/* A3 filete — contextual author / related link */
.hero-filete {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--duration-base) ease;
  min-block-size: 2.75rem;
  /* button reset when hero-filete is a <button> */
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.hero-filete::before {
  content: '';
  display: block;
  flex: 1;
  min-width: var(--space-8);
  height: 1px;
  background: var(--color-accent);
}

.hero-filete:hover {
  color: var(--color-accent);
}

.hero-filete .arrow {
  color: var(--color-accent);
  transition: transform var(--duration-base) var(--ease-out-soft);
}

.hero-filete:hover .arrow {
  transform: translateX(3px);
}

/* V-2.11 · Authorship filete footer line */
.hero-author-foot {
  margin-inline-start: var(--hero-filete-inset);
  margin-block-start: var(--hero-filete-sep);
}

@media (max-width: 639px) {
  .hero-author-foot {
    --hero-filete-inset: 0;
  }
}

/* A2 · Entry animation for page hero elements
   Three distinct motions: eyebrow fades only, H1 rises with spring, text fades+slides */

@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(var(--space-8)); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes hero-slide {
    from { opacity: 0; transform: translateY(var(--space-4)); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes member-photo-reveal {
    from { clip-path: inset(0 0 100% 0); opacity: 0; }
    to   { clip-path: inset(0 0 0% 0);   opacity: 1; }
  }

  /* Portrait — fade in on direct page load (VT handles animated entry from panel) */
  .profile-portrait {
    animation: hero-fade 600ms ease both 0ms;
  }

  /* Eyebrow — just fades (small text, no need for motion) */
  .page-hero .eyebrow {
    animation: hero-fade 600ms ease both 0ms;
  }

  /* H1 — the main event: rises with a springy ease */
  .page-hero-inner > h1,
  .page-hero-main  h1,
  .profile-entry   h1 {
    animation: hero-rise 750ms var(--ease-out-soft) both 180ms;
  }

  /* Lead / tagline — subtle slide after H1 settles */
  .page-hero-inner > .lead,
  .page-hero-main  .lead,
  .profile-tagline {
    animation: hero-slide 550ms ease both 400ms;
  }

  /* A3 filete — last to arrive */
  .hero-filete {
    animation: hero-fade 500ms ease both 580ms;
  }
}

/* SECTION: Component · Area rows — hub y home */
/* Areas hub — link rows (no panel, direct navigation) */

.area-row--link {
  display: flex;
  text-decoration: none;
  color: inherit;
}

.area-row--link .area-arrow {
  pointer-events: none;
}

/* Areas home — full-width typographic rows, direct link (V-2.4) */

.area-row--home {
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  text-decoration: none;
}

.area-row--home .area-name {
  font-size: var(--text-area-row);
}

.area-row--home .area-num {
  font-size: var(--area-num-size);
}


/* SECTION: Page · Home — bloque de áreas */
/* ============================================================
   Áreas home — bloque partido (V-2.4b)
   ============================================================ */

/* Visually hidden but present in the accessibility tree. Never use display:none
   where aria-describedby or other AT references require the element to exist. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Split container — bleed to viewport edges, same pattern as .perspjur-split */
.areas-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: calc(100% + 2 * var(--showcase-margin));
  margin-inline: calc(-1 * var(--showcase-margin));
  height: var(--home-split-h);
  overflow: clip; /* safety net: clip accidental overflow without scroll */
}

/* Left half — claro */
.areas-split-left {
  display: flex;
  flex-direction: column;
  padding-inline: var(--showcase-margin);
  border-right: 1px solid var(--color-rule);
}

/* Mobile heading link (hidden on desktop via min-width query below) */
.areas-split-mobile-label {
  display: none;
  font-family: var(--font-headline);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-decoration: none;
  padding-block: var(--space-5);
}

.areas-split-mobile-label:hover,
.areas-split-mobile-label:focus-visible {
  color: var(--color-accent);
}

/* Row list — fills available height; rows separated by filetes */
.areas-list-home {
  display: flex;
  flex-direction: column;
  flex: 1;
  border-top: 1px solid var(--color-rule);
}

/* Home rows stretch to fill list height equally */
.areas-list-home .area-row--home {
  flex: 1;
  align-items: center; /* num, name and arrow all centered vertically — measured diff 24-35px with baseline */
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-rule);
}

/* Override base hover (padding-shift + bg-color) — use translate instead */
.areas-list-home .area-row--home:hover,
.areas-list-home .area-row--home:focus-visible {
  background-color: transparent;
  padding-inline: var(--space-2);
  transform: translateX(var(--space-2));
}

@media (prefers-reduced-motion: no-preference) {
  .areas-list-home .area-row--home {
    transition: transform var(--duration-base) var(--ease-out-soft);
  }
  .area-row--home .area-num {
    transition: color var(--duration-base) ease;
  }
}

/* Active row — number turns red; visible even with prefers-reduced-motion */
.area-row--home:hover .area-num,
.area-row--home:focus-visible .area-num {
  color: var(--color-accent);
}

/* 25 % dimming on non-active rows.
   NOTE: dimmed text at 25 % opacity does not meet contrast requirements (intentional:
   transient de-emphasis state, not a resting state). Accepted per WCAG 1.4.11 exception for
   state-change decorative opacity. */
@media (prefers-reduced-motion: no-preference) {
  .areas-list-home:has(.area-row--home:is(:hover, :focus-visible)) .area-row--home:not(:is(:hover, :focus-visible)) {
    opacity: var(--area-row-fade);
    transition: opacity var(--duration-base) ease;
  }
}

/* Disable 25 % dimming in high-contrast mode (forced-colors) */
@media (forced-colors: active) {
  .areas-list-home:has(.area-row--home:is(:hover, :focus-visible)) .area-row--home:not(:is(:hover, :focus-visible)) {
    opacity: 1;
  }
}

/* In-row accessible descriptor — AT source for aria-describedby.
   Visually hidden on desktop; revealed on mobile as sub-text under the name.
   NEVER display:none: that removes the element from the AT. */
.area-row-desc-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Right half — on-dark grafito */
.areas-split-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-inline: var(--showcase-margin);
  padding-block: var(--section-space);
}

/* Relevo zone — flex:1 fills the space between label and CTA button.
   min-height:0 prevents flex child overflow; overflow:clip safety net. */
.areas-relevo {
  display: grid;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: clip;
}

/* Descriptor panel — grid so its 6 children share one cell.
   align-content:start: descriptor sits at the top of the relevo zone (mirrors lema position in block 4). */
.areas-relevo-descs {
  display: grid;
  align-content: start;
  max-width: var(--home-split-text-max-w);
}

/* Monumental label — first in DOM, always visible.
   <p> element (not a link); navigation to /areas/ is via .home-split-cta. */
.areas-split-label {
  font-family: var(--font-headline);
  font-size: var(--text-disp);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

/* Descriptors are aria-hidden="true" — purely visual; AT uses in-row aria-describedby copies */
.areas-relevo-desc {
  grid-area: 1 / 1; /* all six overlay in the same cell of .areas-relevo-descs */
  font-family: var(--font-headline);
  font-size: var(--areas-summary-size);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--areas-relevo-dur) ease,
              visibility 0s var(--areas-relevo-dur);
}

/* Ampersand above descriptor — displayed as its own line */
.areas-relevo-desc .amp-mark {
  display: block;
  margin-block-end: var(--space-1);
}

/* Rest phrase — visible when no row is active; fades out on activation.
   Same cell, font and size as .areas-relevo-desc. No ampersand. */
/* State change uses CSS :has() — all descriptors stay in DOM; screen reader accesses them via aria-describedby. Do not implement by JS. */
.areas-relevo-rest {
  grid-area: 1 / 1;
  font-family: var(--font-headline);
  font-size: var(--areas-summary-size);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  transition: opacity var(--areas-relevo-dur) ease;
}

/* Always-visible CTA button anchored at the bottom of the dark half */
.home-split-cta {
  flex-shrink: 0;
  max-width: var(--home-split-cta-max-w);
}

/* Mobile-only CTA in .areas-split-left — hidden on desktop, shown at ≤767px */
.areas-split-cta-mobile {
  display: none;
}

/* — Active-state rules via :has() — */

/* When the list is active, disable pointer events on the relevo zone
   so the zone is not pulsable while a descriptor is showing */
.areas-split:has(.areas-list-home:hover) .areas-relevo,
.areas-split:has(.areas-list-home:focus-within) .areas-relevo {
  pointer-events: none;
}

/* Show descriptor N for row N (nth-child order matches area order) */
.areas-split:has(.area-row--home:nth-child(1):is(:hover, :focus-visible)) .areas-relevo-desc:nth-child(1),
.areas-split:has(.area-row--home:nth-child(2):is(:hover, :focus-visible)) .areas-relevo-desc:nth-child(2),
.areas-split:has(.area-row--home:nth-child(3):is(:hover, :focus-visible)) .areas-relevo-desc:nth-child(3),
.areas-split:has(.area-row--home:nth-child(4):is(:hover, :focus-visible)) .areas-relevo-desc:nth-child(4),
.areas-split:has(.area-row--home:nth-child(5):is(:hover, :focus-visible)) .areas-relevo-desc:nth-child(5),
.areas-split:has(.area-row--home:nth-child(6):is(:hover, :focus-visible)) .areas-relevo-desc:nth-child(6) {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--areas-relevo-dur) ease;
}

/* Hide rest phrase while any row is active */
.areas-split:has(.area-row--home:is(:hover, :focus-visible)) .areas-relevo-rest {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--areas-relevo-dur) ease,
              visibility 0s var(--areas-relevo-dur);
}

/* Disable descriptor transition when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .areas-relevo-desc,
  .areas-relevo-rest {
    transition: none;
  }
}

/* — Mobile (≤767px): no split — */
@media (max-width: 767px) {
  .areas-split {
    grid-template-columns: 1fr;
    height: auto;
    width: 100%;
    margin-inline: 0;
  }

  /* D6.1: remove separator — there's only one column, no right neighbour */
  .areas-split-left {
    border-right: none;
    padding-block-end: var(--mobile-block-pad);
  }

  .areas-split--casos .area-row--home .area-name {
    font-size: var(--home-row-title-size);
  }

  .perspjur-piece-title {
    font-size: var(--home-row-title-size);
  }

  .areas-split-mobile-label {
    display: block;
    border-bottom: 1px solid var(--color-rule);
    /* D6.2: match the desktop heading token (--text-disp, same as .areas-split-label) */
    font-size: var(--text-disp);
  }

  /* D6.3: show mobile CTA below the area list */
  .areas-split-cta-mobile {
    display: inline-flex;
    margin-block-start: var(--space-6);
  }

  .areas-split-right {
    display: none; /* desktop label and decorative panel hidden on mobile */
  }

  /* Rows take natural height on mobile */
  .areas-list-home .area-row--home {
    flex: unset;
    padding-block: var(--space-4);
    align-items: start;
    grid-template-columns: 2.5rem 1fr auto;
    grid-template-rows: auto auto;
  }

  /* Accessible descriptor copy visible on mobile: below the area name */
  .area-row-desc-hidden {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    grid-column: 2;
    grid-row: 2;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    padding-block-start: var(--space-1);
  }
}

/* Dark half first in DOM = visually on the left (Entidades block).
   Border moves from right edge to left edge of the light half. */
@media (min-width: 768px) {
  .areas-split--dark-left .areas-split-left {
    border-right: none;
    border-left: 1px solid var(--color-rule);
  }
}


/* SECTION: Page · Hub de resultados (Casos) */
/* ── Results hub: identity notice in hero (V-2.14) ── */

/* Flex column so the identity line sits at the true foot of the inner hero */
.page-hero--results .page-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Identity notice: small + muted. On dark hero: --dark-ink-muted #A6ADB4 / #1F2328 ≈ 6.96:1 AA ✓ */
.page-hero-identity {
  margin-top: auto;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* ── Results hub: alternating bands (V-2.14) ── */
/* Contrast kicker (--color-accent adapts via .on-dark):
     #C10000 / #F4F4F1 = 5.83:1 AA ✓  (light band)
     #C10000 / #1F2328 = 2.46:1 (aceptado V-6.9)  (dark band, .on-dark remaps --color-accent)
   Outcome filete uses var(--color-accent) — same adaptation, same ratios. */

.result-bands {
  width: calc(100% + 2 * var(--showcase-margin));
  margin-inline: calc(-1 * var(--showcase-margin));
  border-top: 1px solid var(--color-rule);
}

/* Result bands are not links: no hover gesture and no pointer cursor. */
.result-band {
  border-bottom: 1px solid var(--color-rule);
}

.result-band--dark {
  background-color: var(--color-bg);
}

.result-band--draft {
  opacity: .65;
}

/* Inner grid — 2fr/3fr ≈ 40/60 */
.result-band__inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--gap);
  padding-block: var(--result-band-pad);
  padding-inline: var(--showcase-margin);
}

/* Alt: meta side moves to the right */
.result-band--alt .result-band__meta-side { order: 2; }
.result-band--alt .result-band__text-side  { order: 1; }

/* Meta side: kicker · title · year/org */
.result-band__meta-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.result-band__title {
  font-family: var(--font-headline);
  font-size: var(--result-title-size);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-brand);
}

.result-band__year-org {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
}

/* Text side: situation (context) → outcome (result) */
.result-band__text-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  justify-content: center;
}

.result-band__situation {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
}

/* outcome: full ink + left filete in --color-accent (adapts in .on-dark) */
.result-band__outcome {
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
  border-left: 2px solid var(--color-accent);
  padding-inline-start: var(--space-4);
}

/* No hover rules: bands are not links (V-2.14 criterion e) */

/* Mobile: single column, alternating background preserved, side alternation dropped */
@media (max-width: 767px) {
  .result-band__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .result-band--alt .result-band__meta-side,
  .result-band--alt .result-band__text-side {
    order: unset;
  }
}

/* Load-more button */
.results-load-more {
  display: block;
  margin: var(--space-8) auto 0;
}


.draft-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-accent-base);
  border: 1px solid var(--color-accent-base);
  border-radius: var(--btn-radius);
  padding: .1rem .45rem;
  margin-bottom: var(--space-2);
}

.pending-mark {
  background-color: var(--c-pending-bg);
  color: var(--c-pending-ink);
  padding: 0 0.125em;
  border-radius: 0.15em;
}


@media (max-width: 640px) {
  /* page-hero y page-hero-amp-svg retirados: cubiertos por la regla ≤767px de V-4.4 */
  .page-hero-amp {
    font-size: min(80vw, 400px);
    right: -8%;
    bottom: -8%;
    opacity: 0.05;
  }
}


/* SECTION: Page · Guía — layout y panel de autor */
/* Guide page — entradilla, date line, author panel, closing band ─ */

.guide-tldr {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  max-width: var(--measure);
}

.guide-updated-line {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  max-width: var(--measure);
}

/* Guide author panel — V-3.6b: three responsive states ─────────── */

/* ── <1024px: bottom sheet (same as V-3.6a, now scoped) ───────── */
@media (max-width: 1023px) {
  #guide-author-panel-wrap .panel-aside {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 90svh;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    box-shadow: 0 -24px 70px rgba(10, 12, 14, 0.32);
    transform: translateY(100%);
  }
  #guide-author-panel-wrap .panel-aside .panel-drag {
    display: flex;
  }
  #guide-author-panel-wrap.is-open .panel-aside {
    transform: translateY(0);
  }
}

#guide-author-panel-wrap .panel-foot {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Tab trigger: right-edge vertical button (1024–1559px) ──────── */
.guide-author-tab {
  display: none;
  position: fixed;
  top: 50%;
  right: 0;
  pointer-events: auto;
  translate: 0 -50%;
  z-index: auto;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-right: none;
  border-radius: var(--card-radius) 0 0 var(--card-radius);
  box-shadow: -4px 0 16px rgba(10, 12, 14, 0.12);
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: var(--text-xs);
  color: var(--color-ink);
  line-height: 1;
}
.guide-author-tab:hover,
.guide-author-tab:focus-visible {
  background: var(--color-ink);
  color: var(--color-surface);
  outline: none;
}
.guide-author-tab:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}
.guide-author-tab-arrow {
  font-size: 1em;
  rotate: 90deg;
}

@media (min-width: 1024px) and (max-width: 1499px) {
  /* Tab visible if and only if the reading body is in the viewport */
  #guide-author-panel-wrap.guide-reading-visible .guide-author-tab {
    display: flex;
  }
  /* Hide while the panel is open */
  #guide-author-panel-wrap.is-open .guide-author-tab {
    display: none;
  }
}

/* ── Panel oscuro: retrato a sangre (modo firma) ───────────────── */
/* Portrait adjustments are scoped here; widening the scope reaches team panels. */
#guide-author-panel-wrap .panel-aside .panel-body {
  padding: 0;
}
/* Portrait capped so name/role stay visible without scrolling */
#guide-author-panel-wrap .panel-aside .sheet-inner-grid--stacked .sheet-tile {
  max-height: var(--portrait-panel-max-h);
}
/* Anchor crop at top-of-head, not top-of-image (portraits have varying background above head) */
#guide-author-panel-wrap .sheet-inner-grid--stacked .sheet-tile-photo {
  object-position: center 10%;
}
/* Name in one line: --text-xl (26px) fits even the longest name (measured: 358px < 472px available) */
#guide-author-panel-wrap .sheet-inner-grid--stacked .sheet-info h2 {
  font-size: var(--text-xl);
}
/* Buttons clearly smaller than hero primary action; --text-sm + reduced padding → ~34px height */
#guide-author-panel-wrap .panel-foot .btn {
  font-size: var(--text-sm);
  padding: 0.5em 1.25em;
}

/* Mobile override: cap at 40svh (< 45svh desktop cap) — must appear AFTER the
   non-media-query rule above; same specificity [1,3,0], later rule wins. */
@media (max-width: 767px) {
  #guide-author-panel-wrap .panel-aside .sheet-inner-grid--stacked .sheet-tile {
    max-height: var(--portrait-sheet-max-h);
  }
}

/* Home indicator clearance — panel is bottom-sheet on mobile and tablet */
@media (max-width: 1023px) {
  #guide-author-panel-wrap .panel-foot {
    padding-bottom: calc(var(--space-6) + var(--safe-bottom));
  }
}

/* ── Franja estructural (≥1500px): superficie clara alternativa ── */
.guide-franja { display: none; }

/* ── Reading outer: replaces readingWrap, gains franja at ≥1500px */
.guide-reading-outer {
  width: 100%;
  max-width: var(--w-showcase);
  margin-inline: auto;
  padding-left: var(--showcase-margin);
  padding-right: var(--showcase-margin);
}

@media (min-width: 1500px) {
  .guide-reading-outer {
    padding-right: 0;
    display: grid;
    grid-template-columns: minmax(0, var(--w-reading)) 1fr;
    column-gap: var(--space-6);
  }
  .guide-franja {
    display: flex;
    flex-direction: column;
    background: var(--color-surface-alt);
  }
  .area-franja {
    background: none;
  }
  .guide-franja-inner {
    position: sticky;
    top: calc(var(--bar-h) + var(--space-8));
    padding: var(--space-5);
    max-width: var(--franja-content-max-w);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .guide-franja-photo {
    display: block;
    width: calc(100% + 2 * var(--space-5));
    margin-inline: calc(-1 * var(--space-5));
    aspect-ratio: var(--sheet-portrait-ratio);
    max-height: var(--portrait-franja-max-h);
    object-fit: cover;
    object-position: center top;
  }
  .guide-franja-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--color-ink);
    color: var(--color-surface);
    font-size: var(--text-lg);
    font-weight: 600;
    flex-shrink: 0;
  }
  .guide-franja-name {
    font-family: var(--font-headline);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--color-ink);
  }
  .guide-franja-role {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    line-height: var(--leading-tight);
  }
  .guide-franja-bar {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    line-height: var(--leading-relaxed);
  }
  .guide-franja-bio {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    line-height: var(--leading-relaxed);
  }
  .guide-franja-foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }
  .guide-franja-foot .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  /* Area ToC: cap height so a long list never overflows the viewport */
  .area-franja .guide-franja-inner {
    overflow-y: auto;
    max-height: calc(100svh - var(--bar-h) - var(--space-8));
  }
}

/* SECTION: Page · Área — tabla de contenidos lateral */
/* ── Area page ToC inside the lateral franja ─────────────────── */
.area-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.area-toc-link {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-decoration: none;
  padding-block: var(--space-2);
  padding-inline-start: var(--space-3);
  border-left: 2px solid transparent;
  line-height: var(--leading-tight);
  transition: color var(--duration-base) ease,
              border-color var(--duration-base) ease;
}
.area-toc-link:hover,
.area-toc-link:focus-visible {
  color: var(--color-ink);
  border-left-color: var(--color-accent);
  outline: none;
}
.area-toc-link:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}
.area-toc-link.is-active {
  color: var(--color-ink);
  font-weight: 600;
  border-left-color: var(--color-accent);
}

/* SECTION: Component · Bloque partido de área */
/* ── Bloque partido genérico — área y páginas que lo reutilicen ──
   Contract: dark half first in DOM (mobile: dark on top).
   .area-split            = dark left, light right
   .area-split--inverted  = dark right, light left (CSS order swap)   */
.area-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: calc(100% + 2 * var(--showcase-margin));
  margin-inline: calc(-1 * var(--showcase-margin));
  height: var(--home-split-h);
  overflow: clip;
}
.area-split-dark,
.area-split-light {
  padding-block: var(--section-space);
  padding-inline: var(--showcase-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  justify-content: center;
  min-width: 0;
}
.area-split-dark .btn {
  margin-block-start: auto;
}
.area-split-light {
  border-inline-start: 1px solid var(--color-rule);
  justify-content: flex-start;
}
/* Inverted: dark on right, light on left */
.area-split--inverted .area-split-dark { order: 2; }
.area-split--inverted .area-split-light {
  order: 1;
  border-inline-start: none;
  border-inline-end: 1px solid var(--color-rule);
}

/* Monumental label in dark half */
.area-split-label {
  font-family: var(--font-headline);
  font-size: var(--text-disp);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
/* Case title: large serif, sized for longer strings */
.area-split-case-title {
  font-family: var(--font-headline);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
/* Outcome/context text in light half */
.area-split-outcome {
  line-height: var(--leading-relaxed);
  max-width: var(--band-text-max);
}

/* Sibling attenuation on pieces in area split */
@media (prefers-reduced-motion: no-preference) {
  .area-split-light:has(.perspjur-piece:is(:hover, :focus-visible)) .perspjur-piece:not(:is(:hover, :focus-visible)) {
    opacity: var(--area-row-fade);
    transition: opacity var(--duration-base) ease;
  }
}
@media (forced-colors: active) {
  .area-split-light:has(.perspjur-piece:is(:hover, :focus-visible)) .perspjur-piece:not(:is(:hover, :focus-visible)) {
    opacity: 1;
  }
}

/* Below shared-height minimum: revert to natural height */
@media (max-height: 40rem) {
  .area-split { height: auto; }
}
/* Mobile: single column, dark always on top (DOM order preserved) */
@media (max-width: 767px) {
  .area-split {
    grid-template-columns: 1fr;
    height: auto;
  }
  .area-split--inverted .area-split-dark { order: 0; }
  .area-split--inverted .area-split-light { order: 0; }
  .area-split-light {
    border-inline: none;
    border-top: 1px solid var(--color-rule);
  }
}

/* SECTION: Page · Área — entradilla y servicios */
/* ── Bloque de área: entradilla + bloques de lista (D2) ───────────
   Orden DOM: tldr (standalone) → colaboracion (photo-split, opcional) → bloques_lista (area-split--content).
   Los bloques de lista reutilizan renderSplitBlock + .area-split--content.   */

/* Entradilla standalone — primer bloque bajo el hero */
.area-tldr {
  max-width: var(--w-showcase);
  margin-inline: auto;
  padding-inline: var(--showcase-margin);
  padding-block-start: var(--section-space);
  padding-block-end: var(--section-space);
}
.area-tldr p {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  margin: 0;
  max-width: clamp(70ch, 75vw, 85ch);
}

/* Frase de entrada del bloque de lista (intro) — misma escala que el destacado anterior */
.area-header-summary {
  position: relative;
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--color-ink);
  max-width: var(--home-split-text-max-w);
}
/* Lista de servicios: serif medium, thin rules between items, no bullets */
.area-header-services {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
}
.area-header-services li {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--color-ink);
  padding-block: var(--space-3);
}
/* No top padding on first item — aligns with summary text start */
.area-header-services li:first-child {
  padding-block-start: 0;
}
/* Rule between items (not before first, not after last) */
.area-header-services li + li {
  border-top: 1px solid var(--color-rule);
}

/* SECTION: Page · Área — perspectiva jurídica y caso */
/* ── Perspectiva jurídica + caso — bloque único partido ───────────
   .area-split--content: variante sin altura mínima fija.
   Caso título: lema size (--text-xl). Rótulo sin caso: --text-3xl.
   .area-caso-band: banda grafito a sangre cuando solo hay caso.       */

/* Quita la altura compartida y reduce el relleno vertical */
.area-split--content {
  height: auto;
}
.area-split--content .area-split-dark,
.area-split--content .area-split-light {
  padding-block: var(--section-space);
}

/* Alinear arriba la mitad grafito de un split partido: rótulo al ras de la primera línea del lado claro.
   Propósito genérico — no exclusivo del bloque de áreas. Se usa en área bloque 9 e Iguala bloque 3. */
.area-split--top .area-split-dark {
  justify-content: flex-start;
}

/* Titular del caso en el lado grafito: lema size */
.area-perspjur-caso-title {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

/* Rótulo "Perspectiva jurídica" cuando no hay caso: menor que en home */
.area-perspjur-dark-label {
  font-family: var(--font-headline);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

/* Banda grafito a sangre: solo caso, sin partir */
.area-caso-band {
  width: calc(100% + 2 * var(--showcase-margin));
  margin-inline: calc(-1 * var(--showcase-margin));
  padding-block: var(--section-space);
  padding-inline: var(--showcase-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background-color: var(--color-bg);
}
.area-caso-band .area-perspjur-caso-title {
  color: var(--color-ink);
}

/* SECTION: Page · Área — sección de equipo */
/* ── Bloque de equipo en página de área ──────────────────────────
   2-3 personas: reutiliza .team-section / .team-band de Despacho.
   1 persona:    partición 50/50 retrato (oscuro, izq.) | info (claro, der.). */

/* Eyebrow y tope de altura para 2-3 personas */
.area-team-section .eyebrow {
  padding-inline: var(--showcase-margin);
  margin-block-end: 0;
}
.area-team-section .team-band {
  margin-block-start: var(--space-6);
}
.area-team-section .team-tile {
  max-height: 75svh;
}

/* 1 persona: portrait llena el lado oscuro completo */
.area-split--portrait-photo .area-split-dark {
  padding: 0;
  display: block;
}
.area-split--portrait-photo .area-split-dark .team-card.team-portrait {
  display: block;
  width: 100%;
}
.area-split--portrait-photo .area-split-dark .team-tile {
  aspect-ratio: unset;
  height: 75svh;
  min-height: 20rem;
}
.area-split--portrait-photo .area-split-light {
  justify-content: center;
}
.portrait-photo-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.portrait-photo-name {
  font-family: var(--font-headline);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--color-ink);
  margin: 0;
}
.portrait-photo-role {
  font-size: var(--text-sm);
  color: var(--color-accent);
  margin: 0;
}

@media (max-width: 767px) {
  /* Portrait grid: cap height and guarantee full-width fill */
  .team-section .team-tile,
  .area-team-section .team-tile {
    height: var(--portrait-grid-max-h);
    aspect-ratio: unset;
  }

  /* Caption: align padding with mobile margin */
  .team-portrait-caption {
    padding-inline: var(--showcase-margin);
  }

  /* 1-person area: cancel double-bleed (area-split sits outside showcaseWrap) */
  .area-split--portrait-photo {
    width: 100%;
    margin-inline: 0;
  }

  /* 1-person area portrait: use shared token */
  .area-split--portrait-photo .area-split-dark .team-tile {
    height: clamp(18rem, var(--portrait-grid-max-h), 28rem);
    min-height: auto;
  }
}

/* SECTION: Component · Línea de áreas */
/* ── Línea de áreas — banda tipográfica con todos los nombres ────────
   Sustituye el bloque de "otras áreas" en páginas de área.
   Seis nombres en texto corrido; la actual en rojo, sin enlace.        */

.area-line-band {
  padding-block: var(--space-8);
  border-block-start: 1px solid var(--color-rule);
}

.area-line-eyebrow {
  margin-block-end: var(--space-4);
}

.area-line-names {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
}

.area-line-item {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-size: var(--text-area-row);
  line-height: var(--leading-snug);
  vertical-align: baseline;
}

.area-line-sep {
  font-family: var(--font-headline);
  font-size: var(--text-area-row);
  color: var(--color-ink-muted);
  padding-inline: 0.4em;
  user-select: none;
}

/* En el bloque de áreas del grupo (split --content): cada ítem ocupa
   todo el ancho de su columna y el nombre parte línea si no cabe.
   El separador, como flex item independiente, queda siempre al final. */
.area-split--content .area-line-item {
  display: flex;
  align-items: flex-end;
  white-space: normal;
}
.area-split--content .area-line-link,
.area-split--content .area-line-current {
  min-width: 0;
  overflow-wrap: anywhere;
}

.area-line-link {
  font-family: var(--font-headline);
  font-size: var(--text-area-row);
  font-weight: 400;
  color: var(--color-ink);
  text-decoration: none;
  line-height: var(--leading-snug);
}

.area-line-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.area-line-link:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

.area-line-current {
  font-family: var(--font-headline);
  font-size: var(--text-area-row);
  font-weight: 400;
  color: var(--color-accent);
  line-height: var(--leading-snug);
}

/* Gesto: otros ítems y separadores bajan al 25 % */
.area-line-names:has(.area-line-link:is(:hover, :focus-visible)) .area-line-item:not(:has(.area-line-link:is(:hover, :focus-visible))) {
  opacity: 0.25;
}

/* Transición suave solo si no hay preferencia de movimiento reducido */
@media (prefers-reduced-motion: no-preference) {
  .area-line-item {
    transition: opacity var(--duration-base) ease;
  }
}

/* Alto contraste: gesto desactivado */
@media (forced-colors: active) {
  .area-line-names:has(.area-line-link:is(:hover, :focus-visible)) .area-line-item:not(:has(.area-line-link:is(:hover, :focus-visible))) {
    opacity: 1;
  }
}

/* Móvil: un nombre por línea, sin barras */
@media (max-width: 767px) {
  .area-line-item {
    display: block;
    white-space: normal;
  }
  .area-line-sep {
    display: none;
  }
  .area-line-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* SECTION: Page · Guía — hero dos columnas */
/* ── Hero dos columnas: título + pie de autor alineados al baseline */
@media (min-width: 768px) {
  .hero-title-row {
    display: flex;
    align-items: last baseline;
    flex-wrap: wrap;
    gap: var(--space-5);
  }
  .hero-title-row .hero-author-foot {
    flex: 1;
    min-width: 6rem;
    margin-inline-start: 0;
    margin-block-start: 0;
  }
}

/* SECTION: Page · Guía — firma de autor */
/* ── Author signature (all widths, end of article body) ─────────── */
.guide-author-sig {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.guide-author-sig-name {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}
.guide-author-sig-name:hover,
.guide-author-sig-name:focus-visible {
  text-decoration: underline;
}
.guide-author-sig-role {
  color: var(--color-ink-muted);
}

.guide-closing-band {
  padding-block: var(--section-space);
}

.guide-closing-band-pieces {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

/* SECTION: Page · Contacto */
/* Contact page (V-2.X — bloque partido) ────────────────────────  */

/* Bloque partido: bleed to viewport edges; min-height lets the form push height freely */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: calc(100% + 2 * var(--showcase-margin));
  margin-inline: calc(-1 * var(--showcase-margin));
}

/* Left half — grafito (on-dark applied in markup); logo and ampersand are position: absolute */
.contact-split-dark {
  position: relative;
  overflow: hidden;
  display: flex;
}

/* Inner content column: clears fixed header, z-index above ampersand (0) */
.contact-split-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-inline: var(--showcase-margin);
  padding-block: calc(var(--space-20) + var(--header-h, 4.5rem)) var(--space-12);
  position: relative;
  z-index: 1;
}

/* H1: display size matching first-level heroes; --color-brand remaps to light via .on-dark */
.contact-split-dark h1 {
  font-size: var(--text-disp);
  max-width: none;
  margin-bottom: var(--space-4);
}

/* Entradilla: serif lema, anchored under the titular */
.contact-split-lead {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-ink);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3);
  max-width: none;
}

/* Right half — claro; same top clearance as dark inner */
.contact-split-light {
  display: flex;
  flex-direction: column;
  padding-inline: var(--space-10) var(--showcase-margin);
  padding-block: calc(var(--space-20) + var(--header-h, 4.5rem)) var(--space-12);
}

/* Phone — --text-3xl (subordinate to --text-disp H1; same serif family) */
.contact-split-phone {
  display: block;
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

.contact-split-phone:hover,
.contact-split-phone:focus-visible { color: var(--color-accent); }

/* Data block: phone + address + map, anchored to bottom via margin-top: auto */
.contact-split-data {
  margin-top: auto;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Address block — on-dark remaps --color-ink-muted to light muted */
.contact-address {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact-address a {
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

.contact-address a:hover,
.contact-address a:focus-visible { color: var(--color-accent); }

.contact-hours {
  margin-top: var(--space-2);
  color: var(--color-ink-muted);
}

.contact-map-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

.contact-map-link:hover,
.contact-map-link:focus-visible { color: var(--color-accent); }

.contact-pin-icon { flex-shrink: 0; }

/* Body text — base size explains the first-contact process */
.contact-split-body {
  font-size: var(--text-base);
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
}

.contact-split-body p { margin: 0; }

/* Doc-warning: no box, left accent filete only — consistent with borderless form aesthetic */
.contact-doc-warning {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  border-left: 3px solid var(--color-accent);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

/* Name + contact side by side at ≥768px; single column on mobile via media query */
.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-6);
}

/* Auto-grow textarea: supported Chromium 123+; rows="4" is the fallback */
.contact-form textarea {
  field-sizing: content;
  resize: vertical;
}
@supports (field-sizing: content) {
  .contact-form textarea { resize: none; }
}

/* Autofill: suppress browser yellow/blue background
   WebKit/Blink (Chrome, Edge, Safari): inset box-shadow erases the autofill tint.
   Standard (Firefox): color-scheme:light asks the engine to use its light-mode palette. */
.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover,
.contact-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg) inset;
  -webkit-text-fill-color: var(--color-ink);
  transition: background-color 5000s ease-in-out 0s;
}
.contact-form input {
  color-scheme: light;
}

/* Form fields — bottom border only, no box */
.contact-form .field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.contact-form label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  display: block;
  width: 100%;
  padding: var(--space-2) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-ink-muted); /* ~6:1 vs --color-bg; clearly visible */
  border-radius: 0;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-base);
  transition: border-color var(--duration-base) ease;
  -webkit-appearance: none;
  appearance: none;
}

/* Custom down-arrow for select (replaces native chrome) */
.contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23565C63' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: var(--space-6);
  cursor: pointer;
  font-size: var(--text-sm);
}

/* Focus: ink border 2px, no glow; red ONLY for :invalid (error state) */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-bottom-color: var(--color-ink);
  border-bottom-width: 2px;
}

/* Custom square checkboxes */
.contact-form .field-check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-4);
}

.contact-form .field-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  border: 2px solid var(--color-ink-muted);
  border-radius: 2px;
  background-color: transparent;
  flex-shrink: 0;
  margin-top: 0.15em;
  cursor: pointer;
  transition: background-color var(--duration-base) ease, border-color var(--duration-base) ease;
}

.contact-form .field-check input[type="checkbox"]:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75%;
}

.contact-form .field-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

.contact-form .field-check label {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  font-weight: 400;
  line-height: var(--leading-relaxed);
}

/* Contact outcome blocks (submitted / error).
   TT3 — ROADMAP: estos bloques NO llevan atributo hidden porque
   [hidden]{display:none!important} impediría que :target los mostrara.
   Sin JS: :target muestra el bloque apuntado; solo #contact-submitted oculta el formulario.
   Con JS: .contact-outcome--visible gestiona el éxito; el formulario se oculta con el atributo hidden. */
.contact-outcome { display: none; }
.contact-outcome:target { display: block; }
#contact-submitted:target ~ #contact-form { display: none; }
.contact-outcome--visible { display: block; }

/* Submitted confirmation block */
.contact-submitted {
  padding-block: var(--space-8);
}

.contact-submitted-heading {
  font-family: var(--font-headline);
  font-size: var(--text-2xl);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.contact-submitted-body {
  font-size: var(--text-base);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-8);
  line-height: var(--leading-relaxed);
}

.contact-submitted-back {
  display: inline-block;
}

/* Building photo band: natural proportions, greyscale, no veil, no text */
.contact-edificio-band {
  line-height: 0;
}

.contact-edificio-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Photo bleed to footer — only for pages ending in a full-bleed photo band
   (contact-edificio-band lacks .on-dark, so :has() would not catch it). */
.page--band-footer .site-footer { margin-top: 0; }

/* Mobile: single column; bleeds full width (A2a); inner pads to --showcase-margin */
@media (max-width: 767px) {
  .contact-split {
    grid-template-columns: 1fr;
  }

  .contact-split-inner {
    padding-inline: var(--showcase-margin);
    /* D9: bottom clearance = visible amp height + gutter = (12rem − 1.5rem) + 1rem */
    padding-block:
      calc(var(--space-12) + var(--header-h, 4.5rem))
      calc(var(--page-hero-amp-mob-h) - var(--page-hero-amp-mob-clip) + var(--space-4));
  }

  .contact-split-light {
    padding-inline: var(--showcase-margin);
    padding-block: var(--space-8) var(--space-10);
  }

  .field-pair {
    grid-template-columns: 1fr;
  }

  .contact-split-phone { min-height: 44px; display: flex; align-items: center; }
  .contact-address a   { min-height: 44px; display: flex; align-items: center; }
  .contact-map-link    { min-height: 44px; }
}

/* SECTION: Component · Q-indent */
/* ── q-indent — optical hanging of ¿ at large sizes (site-level) ─
   Any heading that opens with ¿ at display size hangs the glyph into the
   left margin so the text body aligns with the column edge.
   Applied explicitly where needed; not inherited automatically.          */
.q-indent {
  text-indent: -0.3em;
  padding-inline-start: 0.3em;
}

/* SECTION: Page · Iguala */
/* ── Iguala (/asesoria-juridica-permanente/) ─────────────────────  */

/* Block 1 — split screen clear column ──────────────────────────── */
/* Rótulo "¿Qué incluye?" — token ajustable para calibración visual */
:root { --iguala-split-rotulo-size: var(--text-2xl); }

.iguala-split-rotulo {
  font-family: var(--font-headline);
  font-size: var(--iguala-split-rotulo-size);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
}

.iguala-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.iguala-list li,
.sources-list li {
  font-size: var(--text-base);
  padding-inline-start: var(--space-5);
  position: relative;
}

.iguala-list li { line-height: var(--leading-relaxed); }

/* Shared dash bullet — modifying the marker on one list also changes the other. */
.iguala-list li::before,
.sources-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: calc(0.5lh - 1px);
  width: 0.5em;
  height: 2px;
  background: var(--color-brand);
}

.sources-list {
  list-style: none;
  padding: 0;
}

.iguala-split-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-muted);
  text-decoration: none;
  margin-top: auto;
  padding-top: var(--space-8);
  transition: color var(--duration-base) ease;
}

.iguala-split-link:hover,
.iguala-split-link:focus-visible { color: var(--color-brand); }

/* CTA at bottom of dark column */
.iguala-split-cta {
  margin-top: auto;
  padding-top: var(--space-8);
}

/* Block 2 — ¿Cómo empieza? (pasos izq + foto sala der) ─────────── */
/* Wrapper: uses .photo-split base class (grid, bleed, overflow handled there) */

.iguala-steps-col {
  padding-block: var(--section-space);
  padding-inline: var(--showcase-margin);
  display: flex;
  flex-direction: column;
}

/* Iguala-specific image overrides on top of .photo-split-photo base */
.iguala-steps-photo img {
  object-position: center 60%; /* custom crop — override .photo-split-photo img default */
}

.iguala-steps-rotulo {
  font-family: var(--font-headline);
  font-size: var(--text-disp);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-10);
}

.iguala-step-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: var(--band-text-max);
}

.iguala-step {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.iguala-step-num {
  font-size: var(--area-num-size);
  flex-shrink: 0;
  padding-top: 0.1em;
}

.iguala-step-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.iguala-step-titulo {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  margin: 0;
}

.iguala-step-texto {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  margin: 0;
}

/* Block 4 — FAQ heading override ("Lo que suelen preguntarnos") ──── */
.iguala-faq-section h2 {
  font-family: var(--font-headline);
  font-size: var(--text-disp);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* SECTION: Page · Legales */
/* Legal pages (aviso-legal, privacidad, cookies) ────────────────  */

.legal-page {
  max-width: 72ch;
}

.legal-updated {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-8);
  border-bottom: var(--section-rule);
}

.legal-page h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: var(--section-rule);
}

.legal-page h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-top: var(--space-5);
}

.legal-page ul,
.legal-page ol {
  padding-left: var(--space-5);
}

/* SECTION: Component · Anchor tiles */
/* E4 · Anchor tiles (Equipo / Contacto) ────────────────────────  */

.anchor-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: var(--space-16);
}

.anchor-tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-12) var(--space-8);
  background: var(--dark-bg);
  color: var(--dark-ink);
  min-height: 22rem;
  overflow: hidden;
  text-decoration: none;
  transition: background-color var(--duration-base) ease;
}

.anchor-tile:hover,
.anchor-tile:focus-visible {
  background-color: var(--color-brand-strong, #12161A);
}

.anchor-tile:focus-visible {
  outline: 3px solid var(--dark-ink);
  outline-offset: -3px;
}

.anchor-tile-amp {
  position: absolute;
  right: -6%;
  top: -15%;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: min(38vw, 480px);
  line-height: 0.7;
  color: var(--dark-accent);
  opacity: 0.07;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

.anchor-tile-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--dark-ink);
  margin-bottom: var(--space-2);
}

.anchor-tile-desc {
  position: relative;
  z-index: 1;
  font-size: var(--text-sm);
  color: var(--dark-ink-muted);
  margin-bottom: var(--space-5);
}

.anchor-tile-arrow {
  position: relative;
  z-index: 1;
  color: var(--dark-accent);
  font-size: var(--text-xl);
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-out-soft);
}

.anchor-tile:hover .anchor-tile-arrow,
.anchor-tile:focus-visible .anchor-tile-arrow {
  transform: translateX(var(--space-2));
}

@media (max-width: 640px) {
  .anchor-tiles {
    grid-template-columns: 1fr;
    gap: 2px;
    background: var(--color-accent-base);
  }

  .anchor-tile {
    min-height: 14rem;
    padding: var(--space-8) var(--space-6);
  }

  .anchor-tile-amp {
    font-size: min(65vw, 260px);
    right: -8%;
    top: -8%;
  }

  .anchor-tile-label {
    font-size: var(--text-2xl);
  }
}


/* SECTION: General · View transitions */
/* ============================================================
   D6 — View Transitions (cross-document, progressive enhancement)
   Browser crossfades on navigation; gracefully ignored by older browsers.
   prefers-reduced-motion: the at-rule is only registered when motion is OK.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* Fast exit, slightly longer entry with house curve */
  ::view-transition-old(root) {
    animation-duration: 180ms;
    animation-timing-function: ease-in;
  }

  ::view-transition-new(root) {
    animation-duration: 320ms;
    animation-timing-function: var(--ease-out-soft);
  }

  /* Team portrait VT — panel side (V-2.10a) + page side (V-2.10c).
     view-transition-name must be unique per frame: panel side is only active
     while the panel is open; page side only exists on /equipo/{slug}/ pages. */
  #team-sheet-wrap.is-open .sheet-tile-photo {
    view-transition-name: team-portrait;
  }

  .profile-portrait {
    view-transition-name: team-portrait;
  }
}

/* SECTION: Page · Home — perspectiva jurídica */
/* ============================================================
   Perspectiva jurídica — bloque partido home (V-2.4)
   ============================================================ */

.perspjur-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: calc(100% + 2 * var(--showcase-margin));
  margin-inline: calc(-1 * var(--showcase-margin));
  height: var(--home-split-h);
  overflow: clip; /* safety net: matches .areas-split */
}

.perspjur-left {
  padding-block: var(--section-space);
  padding-inline: var(--showcase-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.perspjur-left .btn {
  margin-block-start: auto;
}

.perspjur-heading {
  font-family: var(--font-headline);
  font-size: var(--text-disp);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.perspjur-lema {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  max-width: var(--home-split-text-max-w);
}

.perspjur-right {
  padding-block: var(--section-space);
  padding-inline: var(--showcase-margin);
  border-left: 1px solid var(--color-rule);
  display: grid;
  grid-template-rows: 1fr auto;
  row-gap: var(--perspjur-nota-gap); /* separación fija nota↔guías — no cede nunca */
  align-items: center;
}

.perspjur-piece {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-4); /* reduced from --space-5: titles are bigger, less air needed */
  padding-inline: var(--space-4); /* reserved always — prevents text reflow on hover */
  border-top: 1px solid var(--color-rule);
  text-decoration: none;
  color: inherit;
}

.perspjur-piece:last-child {
  border-bottom: 1px solid var(--color-rule);
}

/* EN: widen type column to fit two-line label ("NOTE / IN SPANISH") */
html[lang="en"] .perspjur-piece {
  grid-template-columns: 6rem 1fr auto;
}

@media (prefers-reduced-motion: no-preference) {
  .perspjur-piece {
    transition: transform var(--duration-base) var(--ease-out-soft);
  }
  .perspjur-piece-type {
    transition: color var(--duration-base) ease;
  }
  .perspjur-piece:hover,
  .perspjur-piece:focus-visible {
    transform: translateX(var(--space-2));
  }
}

.perspjur-piece-type {
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.perspjur-piece-title {
  font-family: var(--font-headline);
  /* Scale mechanism mirrors block 3: ratio 1.875/2.5 derived from independently calibrated
     starting sizes (52-char guide titles vs 35-char area names). */
  font-size: clamp(1.25rem, min(1.09vw + 1.26rem, calc(var(--home-split-scale-h) * 1.875 / 2.5)), 1.875rem);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-brand);
}

/* Active piece — type label turns red; visible even with prefers-reduced-motion */
.perspjur-piece:hover .perspjur-piece-type,
.perspjur-piece:focus-visible .perspjur-piece-type {
  color: var(--color-accent);
}

/* Nota jurídica — fila 1fr del grid padre; align-items: center en el padre la centra */

.perspjur-nota-link {
  display: block;
  max-width: var(--perspjur-nota-max-w);
  margin-inline: auto;
  text-decoration: none;
  color: var(--color-ink);
  font-family: var(--font-headline);
  font-size: var(--text-2xl); /* 34 px @ 1366px — pesa más que los títulos de guía (30 px) */
  font-weight: 700;
  line-height: var(--leading-snug);
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .perspjur-nota-link {
    transition: color var(--duration-base) ease;
  }
}

.perspjur-nota-link:hover,
.perspjur-nota-link:focus-visible {
  color: var(--color-accent);
}

.perspjur-nota-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: var(--space-2);
  border-radius: 2px;
}

/* 0.44em relative to the parent link's font-size — in the notes hub where the context differs, use .guide-kicker instead. */
.perspjur-nota-eyebrow {
  display: block;
  font-size: 0.44em; /* relativo al font-size de nota-link; escala con él */
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-accent); /* rojo fijo — no cambia al hover del enlace padre */
  margin-block-end: var(--space-1);
}

/* Guides container — natural height, anchored at bottom of the right half */
.perspjur-guides {
  display: flex;
  flex-direction: column;
}

/* Sibling attenuation — guide hovered fades sibling guides */
@media (prefers-reduced-motion: no-preference) {
  .perspjur-right:has(.perspjur-piece:is(:hover, :focus-visible)) .perspjur-piece:not(:is(:hover, :focus-visible)) {
    opacity: var(--area-row-fade);
    transition: opacity var(--duration-base) ease;
  }
}

@media (forced-colors: active) {
  .perspjur-right:has(.perspjur-piece:is(:hover, :focus-visible)) .perspjur-piece:not(:is(:hover, :focus-visible)) {
    opacity: 1;
  }
}

/* Below the shared-height minimum: both split blocks revert to natural height.
   Threshold 40rem: below this the fixed height would clip content; block 3 fine at 38rem,
   but mirror constraint requires a single threshold. */
@media (max-height: 40rem) {
  .areas-split,
  .perspjur-split {
    height: auto;
  }
}

/* Arrow hover for block 4 guide pieces — mirrors the .area-row rule in base component */
.perspjur-piece:hover .area-arrow,
.perspjur-piece:focus-visible .area-arrow {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-on-brand);
}

@media (prefers-reduced-motion: no-preference) {
  .perspjur-piece:hover .area-arrow,
  .perspjur-piece:focus-visible .area-arrow {
    background-size: 200% 200%;
    background-color: transparent;
  }
}

/* Override global 480px hide: arrows needed on mobile for discoverability */
@media (max-width: 480px) {
  .area-row--home .area-arrow,
  .perspjur-piece .area-arrow,
  .guide-card .area-arrow {
    display: inline-flex;
  }
}

@media (max-width: 767px) {
  .perspjur-split {
    grid-template-columns: 1fr;
    height: auto;
  }
  .perspjur-right {
    border-left: none;
    border-top: 1px solid var(--color-rule);
  }

  /* D5: label above title — 2-row grid; arrow spans both rows and centers vertically */
  .perspjur-piece {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: start;
  }
  .perspjur-piece-type  { grid-column: 1; grid-row: 1; }
  .perspjur-piece-title { grid-column: 1; grid-row: 2; }
  .perspjur-piece .area-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  /* D6.4: button follows content naturally in auto-height column */
  .perspjur-left .btn {
    align-self: flex-start;
    margin-block-start: 0;
  }

  /* D7: nota left-aligned on mobile */
  .perspjur-nota-link {
    text-align: left;
    margin-inline: 0;
  }

  /* §11.10: extend vertical touch target for all .btn at ≤767px */
  .btn::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--btn-hit-ext)) 0;
  }
}


/* SECTION: Page · Home — banda despacho y CTA */
/* ============================================================
   Home — CTA contacto (bloque 5, V-2.4)
   ============================================================ */

/* ── Home bloque 5 — Banda Despacho (V-2.17) ────────────────────────────── */
/* No .on-dark here — it remaps --color-rule to the dark-theme value, invisible on black. */

.home-despacho-band {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-surface);
}

.home-despacho-band img {
  display: block;
  width: 100%;
  height: auto;                        /* la proporción real de la foto (1600:667) determina la altura */
  min-height: var(--home-despacho-h-min);
  max-height: var(--home-despacho-h-max);
  object-fit: cover;
  object-position: 50% bottom;        /* 50%: arista alineada con divisor del split; bottom: tope recorta por arriba (aire→logo), butacas siempre visibles */
  filter: none;
}

/* Velo solo bajo el texto — degradado inferior; petición del cliente oct. 2026 (C3·A3) */
.home-despacho-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, var(--home-band-veil-opacity)) 0%,
    rgba(0, 0, 0, calc(var(--home-band-veil-opacity) * 0.5)) 30%,
    transparent 50%
  );
  pointer-events: none;
}

.home-despacho-band__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block-end: var(--home-despacho-text-pad);
  gap: var(--space-4);
}

.home-despacho-band__frase {
  font-family: var(--font-headline);
  font-size: var(--home-despacho-frase-size);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-surface);
  max-width: calc(50% - var(--space-8)); /* nunca cruza el centro — la mitad derecha no tiene velo */
  text-wrap: balance;                    /* evita línea corta suelta a anchos medios */
}

.home-despacho-band__cta {
  font-size: clamp(1.25rem, 1.09vw + 0.96rem, 1.5rem); /* 20px@390 · 24px@1366 — texto grande AA (C3·A3) */
  font-weight: var(--weight-medium);
  color: var(--color-surface);
  display: flex;
  align-items: center;
  gap: 0.4em;
}

/* Círculo de flecha — estado base sobre fondo oscuro (foto) */
@media (min-width: 768px) {
  .home-despacho-band .area-arrow {
    color: #fff;
    border-color: rgba(255,255,255,0.45);
  }
}

/* Hover / foco — relleno rojo (fallback instantáneo + prefers-reduced-motion) */
.home-despacho-band:hover .area-arrow,
.home-despacho-band:focus-visible .area-arrow {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-on-brand);
}

@media (prefers-reduced-motion: no-preference) {
  .home-despacho-band:hover .area-arrow,
  .home-despacho-band:focus-visible .area-arrow {
    background-size: 200% 200%;
    background-color: transparent;
  }
}

/* Foco de teclado — anillo interior para no perder visibilidad sobre la foto */
.home-despacho-band:focus-visible {
  outline: var(--focus-outline, 3px solid var(--color-focus, currentColor));
  outline-offset: -4px;
}

/* Móvil: recorte cuadrado a sangre, texto debajo sobre fondo claro */
@media (max-width: 767px) {
  .home-despacho-band {
    display: flex;
    flex-direction: column;
  }

  .home-despacho-band img {
    height: auto;
    min-height: 0;           /* anula el mínimo de escritorio: el cuadrado se determina por la anchura */
    max-height: none;
    aspect-ratio: 1 / 1;
    width: 100%;
  }

  .home-despacho-band::before {
    bottom: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    background: rgba(0,0,0,0.15); /* sutil — el texto está debajo, no encima */
  }

  .home-despacho-band__text {
    position: static;
    padding-block: var(--space-8);
    padding-block-end: var(--space-8); /* anula el token de escritorio */
    gap: var(--space-3);
    color: var(--color-ink); /* el fondo es claro — reset del blanco del wrapper */
  }

  .home-despacho-band__frase {
    max-width: none;
    color: var(--color-ink);
  }

  .home-despacho-band__cta {
    color: var(--color-ink);
  }
}

/* Aro visible en móvil — excepción a la regla de hide de 480px.
   Razón del hide original: colapso de grid-template-columns en .area-row.
   Aquí el CTA es flex — no hay colapso; cabe sin problemas a 320px. */
@media (max-width: 480px) {
  .home-despacho-band .area-arrow {
    display: inline-flex;
  }
}

/* ──────────────────────────────────────────────────────────────────────── */

.home-contact-cta {
  text-align: center;
  padding-block: var(--section-space);
  /* border-top eliminado en la home: la banda fotográfica (bloque 5) es el separador visual */
}
/* En el hub de grupo el CTA llega tras el container de bandas (sin banda fotográfica entre medias):
   filete fino para separar fondo claro → fondo claro. Solo aplica al hub (en la home el CTA
   es hijo del container, no su siguiente hermano). */
div.container + .home-contact-cta {
  border-top: var(--section-rule);
}

.home-contact-cta__title {
  font-family: var(--font-headline);
  font-size: var(--text-disp);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-block-end: var(--space-6);
}

.home-contact-cta__apoyo {
  font-size: var(--text-lg);
  color: var(--color-ink-muted);
  max-width: 52ch;
  margin-inline: auto;
  margin-block-end: var(--space-8);
  line-height: var(--leading-normal);
}


/* SECTION: General · Scroll reveal */
/* ============================================================
   D2 — Scroll reveal (staggered entry via IntersectionObserver)
   reveal.js adds .is-visible when element enters viewport.
   Only active when motion is OK; reduced-motion shows elements directly.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(var(--space-4));
    transition: opacity var(--duration-slow) ease,
                transform var(--duration-slow) var(--ease-out-soft);
  }

  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}