/* ───────────────────────────────────────────────────────────────────────────
   KOHR — Sistema de diseño
   Paleta de marca: navy profundo + verde menta + cream
   El territorio que responde.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    --font-display: "Fraunces", "Times New Roman", Georgia, serif;
    --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;

    /* ── Paleta de marca ──────────────────────────────────────────────────── */
    --navy: #061c2d;
    --navy-2: #0d2536;
    --navy-3: #142d40;
    --navy-deep: #03111c;

    --cream: #e6ebe7;
    --cream-soft: #dfe1dc;

    --mint: #75dd84;
    --mint-deep: #4ac369;
    --mint-glow: rgba(117, 221, 132, 0.22);

    /* ── Alias semánticos (el contenido del sitio usa estos) ─────────────── */
    --ink: var(--cream);
    --paper: var(--navy);
    --paper-warm: var(--navy-2);
    --paper-shade: var(--navy-3);
    --ember: var(--mint);
    --ember-deep: var(--mint-deep);

    /* ── Escala de opacidad (sobre navy oscuro = cream con alpha) ────────── */
    --ink-90: rgba(230, 235, 231, 0.92);
    --ink-80: rgba(230, 235, 231, 0.82);
    --ink-70: rgba(230, 235, 231, 0.66);
    --ink-50: rgba(230, 235, 231, 0.46);
    --ink-30: rgba(230, 235, 231, 0.26);
    --ink-15: rgba(230, 235, 231, 0.13);
    --ink-08: rgba(230, 235, 231, 0.07);

    /* ── Espacial ─────────────────────────────────────────────────────────── */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 5rem;
    --space-7: 8rem;
    --space-8: 12rem;

    --measure: 38rem;
    --shell: min(92vw, 1320px);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

/* Lenis hooks — required so its virtual scrolling and the document size agree */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Lenis takes over wheel smoothing on pointer devices. Touch + reduced-motion
       fall back to native scroll (see script.js initLenis). */
    scroll-behavior: auto;
    /* Permite que el navegador ajuste el eje opsz de Fraunces según el tamaño renderizado */
    font-optical-sizing: auto;
    /* Clip evita que bleed-outs (margin negativo) y SVGs decorativos
       reporten overflow al scrollWidth del documento. */
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.55;
    letter-spacing: 0.005em;
    color: var(--cream);
    background: var(--navy);
    background-image:
        radial-gradient(ellipse 90% 50% at 80% -10%, rgba(117, 221, 132, 0.10), transparent 70%),
        radial-gradient(ellipse 70% 45% at 10% 110%, rgba(117, 221, 132, 0.06), transparent 70%);
    overflow-x: clip;
    position: relative;
}

/* Sutil grano en pantalla — screen blend para iluminar levemente sobre navy */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.08;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 220px 220px;
}

::selection { background: var(--mint); color: var(--navy); }

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

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Screen-reader-only — visually hidden but announced */
.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;
}

/* ── Skip-link (a11y) ──────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-110%);
    background: var(--mint);
    color: var(--navy);
    padding: 0.85rem 1.2rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 200;
    border-radius: 0 0 4px 0;
    transition: transform 0.2s var(--ease-out);
}
.skip-link:focus {
    transform: translateY(0);
    outline: none;
}

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

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-variation-settings: "SOFT" 30;
    letter-spacing: -0.02em;
    line-height: 0.98;
    color: var(--cream);
}

h1 { font-size: clamp(3rem, 8vw, 8.5rem); }
h2 { font-size: clamp(1.9rem, 4vw, 4rem); line-height: 1.02; }
h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.1; }

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

/* em por defecto: italic + WONK suave, opsz lo maneja font-optical-sizing en html */
em { font-style: italic; font-variation-settings: "WONK" 1, "SOFT" 80; }

/* Italic de "acento" (display) — usado en headlines grandes */
.accent-italic,
h1 em, h2 em,
.intro-lead h2 em,
.hero h1 em,
.contact-headline em,
.conviction blockquote em,
.audience-coda em,
.practice-major h3 em,
.principle h3 em,
.service-title em,
.cap h3 em,
.phase-body h2 em,
.value-detail h2 em,
.page-hero h1 em,
.sereno-overview .heading em,
.methodology p em,
.place .country {
    font-variation-settings: "SOFT" 100, "WONK" 1;
}

strong { font-weight: 600; color: var(--cream); }

/* ── Background patterns (firma visual por sección) ────────────────────────
   Cada clase se aplica como background-image en una sección y rinde de forma
   sutil — composiciones cartográficas codificadas como data: URLs.
   Todas comparten paleta y mantienen contraste para texto cream encima. */

.bg-hex {
    position: relative;
}
.bg-hex::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpolygon points='30,2 56,17 56,46 30,61 4,46 4,17' fill='none' stroke='%23eaedea' stroke-opacity='0.07' stroke-width='0.7'/%3E%3C/svg%3E");
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 80% 50%, black, transparent 70%);
            mask-image: radial-gradient(ellipse 60% 50% at 80% 50%, black, transparent 70%);
    opacity: 0.9;
    z-index: 0;
}
.bg-hex > * { position: relative; z-index: 1; }

.bg-contours {
    position: relative;
}
.bg-contours::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23eaedea' stroke-opacity='0.08' stroke-width='0.7' vector-effect='non-scaling-stroke'%3E%3Cpath d='M 0 320 Q 200 290 400 305 T 800 280'/%3E%3Cpath d='M 0 280 Q 200 250 400 265 T 800 240'/%3E%3Cpath d='M 0 240 Q 200 210 400 225 T 800 200'/%3E%3Cpath d='M 0 200 Q 200 170 400 185 T 800 160'/%3E%3Cpath d='M 0 160 Q 200 130 400 145 T 800 120'/%3E%3Cpath d='M 0 360 Q 200 330 400 345 T 800 320'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: center bottom;
    opacity: 1;
    z-index: 0;
}
.bg-contours > * { position: relative; z-index: 1; }

.bg-paper-coords {
    position: relative;
}
.bg-paper-coords::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(230, 235, 231,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(230, 235, 231,0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 40%, transparent 100%);
            mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 40%, transparent 100%);
    z-index: 0;
}
.bg-paper-coords > * { position: relative; z-index: 1; }

.bg-mesh {
    position: relative;
}
.bg-mesh::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 50% 40% at 20% 30%, rgba(117, 221, 132, 0.08), transparent 60%),
        radial-gradient(ellipse 40% 60% at 85% 70%, rgba(117, 221, 132, 0.05), transparent 70%);
    z-index: 0;
}
.bg-mesh > * { position: relative; z-index: 1; }

.mono {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-70);
}

.label-line { display: inline-flex; align-items: center; gap: 0.75rem; }
.label-line::before {
    content: "";
    display: inline-block;
    width: 1.75rem;
    height: 1px;
    background: var(--ink-50);
}

.ember, .mint { color: var(--mint); }
.ink-50 { color: var(--ink-50); }
.ink-70 { color: var(--ink-70); }
.serif { font-family: var(--font-display); }

/* Contour decoration (sutil curvas de nivel en el hero) */
.contour-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.55; overflow: hidden; }
.contour-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.contour-layer path {
    fill: none;
    stroke: var(--ink-15);
    stroke-width: 0.7;
    vector-effect: non-scaling-stroke;
    /* "Territorial signal flow": dashed contours animated via stroke-dashoffset.
       Each path runs at a slightly different tempo so the field feels alive
       without being in lockstep. */
    stroke-dasharray: 3 7;
    animation: contourFlow 14s linear infinite;
    will-change: stroke-dashoffset;
}
.contour-layer path:nth-child(2) { stroke-dasharray: 4 9;  animation-duration: 17s; animation-delay: -3s; }
.contour-layer path:nth-child(3) { stroke-dasharray: 2 6;  animation-duration: 11s; animation-delay: -1s; }
.contour-layer path:nth-child(4) { stroke-dasharray: 5 8;  animation-duration: 19s; animation-delay: -5s; stroke: rgba(117, 221, 132, 0.18); }
.contour-layer path:nth-child(5) { stroke-dasharray: 3 11; animation-duration: 13s; animation-delay: -2s; }
.contour-layer path:nth-child(6) { stroke-dasharray: 6 9;  animation-duration: 16s; animation-delay: -7s; }
.contour-layer path:nth-child(7) { stroke-dasharray: 4 7;  animation-duration: 15s; animation-delay: -4s; stroke: rgba(117, 221, 132, 0.14); }
.contour-layer path:nth-child(8) { stroke-dasharray: 2 5;  animation-duration: 10s; animation-delay: -6s; }
.contour-layer path:nth-child(9)  { stroke-dasharray: 4 12; animation-duration: 21s; animation-delay: -8s; stroke: rgba(117, 221, 132, 0.10); }
.contour-layer path:nth-child(10) { stroke-dasharray: 5 10; animation-duration: 18s; animation-delay: -3s; }
.contour-layer path:nth-child(11) { stroke-dasharray: 3 8;  animation-duration: 12s; animation-delay: -5s; }
.contour-layer path:nth-child(12) { stroke-dasharray: 2 9;  animation-duration: 9s;  animation-delay: -1s; stroke: rgba(117, 221, 132, 0.12); }
@keyframes contourFlow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -100; }
}
@media (prefers-reduced-motion: reduce) {
    .contour-layer path {
        stroke-dasharray: none;
        animation: none;
    }
}

/* ── Hero particle system (canvas) ─────────────────────────────────────
   Encima del contour-layer SVG, debajo del contenido del hero. El JS lo
   inicializa solo si no hay prefers-reduced-motion. */
.hero-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
}

/* ── Wordmark (logo "Kohr" italic + barra menta) ──────────────────────────── */
.wordmark {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    padding: 0.2rem 0;
}
.wordmark img {
    height: 1.7rem;
    width: auto;
    display: block;
}

nav.top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
    transition: background 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out);
}
nav.top.scrolled {
    background: rgba(6, 28, 45, 0.78);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--ink-08);
}

.nav-right { display: flex; align-items: center; gap: 2.25rem; }

.nav-links {
    display: flex;
    gap: 1.75rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.nav-links a {
    color: var(--ink-70);
    position: relative;
    padding: 0.4rem 0;
    transition: color 0.25s var(--ease-out);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--cream); }
.nav-links a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--mint);
}

.nav-cta {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--mint);
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--mint);
    transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
    font-weight: 600;
}
.nav-cta:hover { background: var(--mint-deep); border-color: var(--mint-deep); transform: translateY(-2px); }

/* Language switcher in nav */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-50);
    padding: 0.35rem 0;
    transition: color 0.25s var(--ease-out);
}
.lang-toggle .current {
    color: var(--cream);
    font-weight: 600;
}
.lang-toggle .sep {
    color: var(--ink-30);
}
.lang-toggle .alt {
    color: var(--ink-50);
    transition: color 0.25s var(--ease-out);
}
.lang-toggle:hover .alt {
    color: var(--mint);
}

.menu-toggle { display: none; width: 36px; height: 36px; position: relative; z-index: 110; }
.menu-toggle span {
    position: absolute;
    left: 4px;
    right: 4px;
    height: 2px;
    background: var(--cream);
    transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease-out), top 0.3s var(--ease-out);
}
.menu-toggle span:nth-child(1) { top: 11px; }
.menu-toggle span:nth-child(2) { top: 18px; }
.menu-toggle span:nth-child(3) { top: 25px; }
.menu-toggle.active span:nth-child(1) { top: 18px; transform: rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { top: 18px; transform: rotate(-45deg); }
.menu-toggle.active span { background: var(--mint); }

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 105;
    background: var(--navy);
    background-image:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(117, 221, 132, 0.12), transparent 70%);
    transform: translateY(-100%);
    transition: transform 0.5s var(--ease-out);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5rem 1.75rem 2.5rem;
    overflow-y: auto;
}
.mobile-menu.active { transform: translateY(0); }
.mobile-menu-logo {
    align-self: flex-start;
    line-height: 0;
    margin-bottom: 1rem;
}
.mobile-menu-logo img { height: 2.6rem; width: auto; display: block; }
.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    text-align: right;
    margin: 2rem 0;
}
.mobile-menu-nav a {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 8vw, 3.4rem);
    font-weight: 400;
    font-variation-settings: "opsz" 144;
    letter-spacing: -0.02em;
    color: var(--cream);
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--ink-15);
    line-height: 1.05;
    transition: color 0.25s var(--ease-out);
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a:focus-visible { color: var(--mint); }
.mobile-menu-contact {
    text-align: right;
    color: rgba(230, 235, 231, 0.7);
    font-size: 0.82rem;
    line-height: 1.55;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    border-top: 1px solid var(--ink-15);
    padding-top: 1.5rem;
}
.mobile-menu-email {
    display: inline-block;
    color: var(--cream);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    text-decoration: none;
    transition: color 0.25s var(--ease-out);
}
.mobile-menu-email:hover { color: var(--mint); }
.mobile-menu-contact p { margin: 0.25rem 0; }

main { position: relative; z-index: 2; }

section { padding: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 5vw, 3rem); position: relative; }

.shell { max-width: var(--shell); margin: 0 auto; }

.plate {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin-bottom: var(--space-5);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--ink-15);
}
/* Mint line that draws across the section header when the .plate reveals.
   Sits on top of the static ink-15 border, so we get baseline + accent. */
.plate::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 0;
    background: var(--mint);
    box-shadow: 0 0 8px rgba(117, 221, 132, 0.45);
    transition: width 1.4s cubic-bezier(0.83, 0, 0.17, 1) 0.15s;
    pointer-events: none;
}
.plate.reveal.visible::after,
.plate.is-revealed::after { width: 100%; }
@media (prefers-reduced-motion: reduce) {
    .plate::after { transition: none; }
}
.plate-num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mint);
    font-weight: 500;
}
.plate-title {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream);
    font-weight: 500;
}

/* HERO */
.hero {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: clamp(6.5rem, 13vh, 10rem);
    padding-bottom: var(--space-5);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-4);
    position: relative;
    overflow: hidden;
}
.hero-coords {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.hero-headline { align-self: center; max-width: var(--shell); margin: 0 auto; width: 100%; }
.hero h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 50;
    font-size: clamp(3.4rem, 11.5vw, 12rem);
    line-height: 0.92;
    letter-spacing: -0.035em;
    color: var(--cream);
}
.hero h1 .line { display: block; }
.hero h1 em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    color: var(--mint);
}

.hero-meta {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-5);
    align-items: end;
    margin-top: var(--space-4);
}
.hero-lede {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.6vw, 1.45rem);
    font-weight: 300;
    font-variation-settings: "opsz" 14, "SOFT" 60;
    line-height: 1.4;
    color: var(--ink-80);
    max-width: 34rem;
}
.hero-lede strong { font-weight: 500; color: var(--cream); }
.hero-lede em { color: var(--mint); font-variation-settings: "opsz" 14, "SOFT" 100, "WONK" 1; }

.hero-ctas { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-self: end; align-self: end; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid var(--cream);
    background: transparent;
    color: var(--cream);
    transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.btn:hover { background: var(--cream); color: var(--navy); transform: translateY(-2px); }
.btn.primary { background: var(--cream); color: var(--navy); }
.btn.primary:hover { background: var(--mint); border-color: var(--mint); color: var(--navy); }
.btn.ember, .btn.mint {
    background: var(--mint);
    color: var(--navy);
    border-color: var(--mint);
    font-weight: 600;
}
.btn.ember:hover, .btn.mint:hover {
    background: var(--mint-deep);
    border-color: var(--mint-deep);
    color: var(--navy);
}
.btn .arrow { transition: transform 0.3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* QUIÉNES SOMOS */
.intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}
.intro-lead h2 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5.4vw, 5.2rem);
    line-height: 0.96;
    letter-spacing: -0.025em;
    font-variation-settings: "opsz" 144, "SOFT" 30;
}
.intro-lead h2 em {
    color: var(--mint);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.intro-body {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ink-80);
}
.intro-body strong { color: var(--cream); }
.intro-body p + p { margin-top: 1.5rem; }
.intro-body .pullout {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ink-15);
    font-family: var(--font-display);
    font-size: 1.45rem;
    line-height: 1.35;
    font-variation-settings: "opsz" 14, "SOFT" 80;
    color: var(--cream);
    font-style: italic;
}

/* CONVICCIÓN */
.conviction {
    background: var(--navy-2);
    margin: 0 calc(-1 * clamp(1.5rem, 5vw, 3rem));
    padding-left: clamp(1.5rem, 5vw, 3rem);
    padding-right: clamp(1.5rem, 5vw, 3rem);
    position: relative;
    border-top: 1px solid var(--ink-15);
    border-bottom: 1px solid var(--ink-15);
}
.conviction-inner { max-width: var(--shell); margin: 0 auto; position: relative; }
.conviction blockquote {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.6vw, 3.2rem);
    line-height: 1.18;
    letter-spacing: -0.018em;
    font-variation-settings: "opsz" 144, "SOFT" 60;
    color: var(--cream);
    max-width: 50rem;
    margin: var(--space-3) 0;
    padding-left: 2rem;
    border-left: 2px solid var(--mint);
}
.conviction blockquote em {
    color: var(--mint);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.conviction blockquote p + p { margin-top: 1.4rem; }

.conviction-flow {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ink-15);
    display: flex;
    justify-content: center;
}
.conviction-flow picture,
.conviction-flow img {
    display: block;
    width: 100%;
    max-width: 760px;
    height: auto;
    opacity: 0.95;
}
.conviction-flow picture img {
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 360; /* desktop horizontal */
}
@media (max-width: 640px) {
    .conviction-flow {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }
    .conviction-flow picture,
    .conviction-flow img {
        max-width: 320px;
    }
    .conviction-flow picture img {
        aspect-ratio: 360 / 820; /* mobile vertical — coincide con viewBox del SVG mobile */
    }
}

/* CAPACIDADES */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0;
    border-top: 1px solid var(--ink-15);
    border-left: 1px solid var(--ink-15);
}
.service {
    padding: var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--ink-15);
    border-right: 1px solid var(--ink-15);
    position: relative;
    background: transparent;
    transition: background 0.4s var(--ease-out);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 22rem;
}
.service:hover { background: var(--navy-2); }
.service:hover .service-num { color: var(--mint); }
.service::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--mint);
    transition: width 0.4s var(--ease-out);
}
.service:hover::before { width: 3px; }
.service-num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: var(--ink-50);
    font-weight: 500;
    transition: color 0.3s var(--ease-out);
}
.service-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0;
    transition: font-variation-settings 360ms cubic-bezier(0.22, 1, 0.36, 1);
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    color: var(--cream);
}
.service:hover .service-title {
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.service-title em {
    color: var(--mint);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.service-desc {
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ink-80);
    flex-grow: 1;
}
.service-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mint);
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ink-15);
}

/* CÓMO TRABAJAMOS — 4 phase cards compactas */
.phases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 0;
    border-top: 1px solid var(--ink-15);
    border-left: 1px solid var(--ink-15);
}
.phase-card {
    padding: var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--ink-15);
    border-right: 1px solid var(--ink-15);
    background: transparent;
    transition: background 0.4s var(--ease-out);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 15rem;
    position: relative;
}
.phase-card:hover { background: var(--navy-2); }
.phase-card__num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(2.6rem, 4.5vw, 3.8rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--mint);
    font-variation-settings: "SOFT" 60, "WONK" 1;
}
.phase-card h3 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    color: var(--cream);
    line-height: 1.05;
    font-variation-settings: "opsz" 144, "SOFT" 60;
}
.phase-card p {
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ink-80);
}
.phase-card p em {
    color: var(--mint);
    font-style: italic;
    font-variation-settings: "SOFT" 100, "WONK" 1;
}

/* ÁREAS DE PRÁCTICA — bloque destacado oscuro */
.practice-major {
    background: var(--navy-deep);
    color: var(--cream);
    padding: var(--space-5) clamp(1.75rem, 5vw, 4rem);
    margin: 0 calc(-1 * clamp(1.5rem, 5vw, 3rem)) var(--space-4);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--ink-15);
    border-bottom: 1px solid var(--ink-15);
}
.practice-major::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--mint);
    box-shadow: 0 0 32px rgba(117, 221, 132, 0.35);
}
.practice-major::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%237ce090' stroke-width='0.6' opacity='0.18'%3E%3Cpath d='M 0 420 Q 200 380 400 410 T 800 380 T 1200 350'/%3E%3Cpath d='M 0 460 Q 200 420 400 450 T 800 420 T 1200 390'/%3E%3Cpath d='M 0 500 Q 200 460 400 490 T 800 460 T 1200 430'/%3E%3Cpath d='M 0 540 Q 200 500 400 530 T 800 500 T 1200 470'/%3E%3Cpath d='M 0 380 Q 200 340 400 370 T 800 340 T 1200 310'/%3E%3Cpath d='M 0 340 Q 200 300 400 330 T 800 300 T 1200 270'/%3E%3Cpath d='M 0 300 Q 200 260 400 290 T 800 260 T 1200 230'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: center bottom;
    pointer-events: none;
}
.practice-major > * { position: relative; z-index: 1; }

.practice-major .plate { border-bottom-color: rgba(230, 235, 231, 0.2); }
.practice-major .plate-num { color: var(--mint); }
.practice-major .plate-title { color: var(--cream); }

.practice-major-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
    max-width: var(--shell);
    margin: 0 auto;
}
.practice-major h3 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.4vw, 4rem);
    line-height: 1;
    letter-spacing: -0.025em;
    font-variation-settings: "opsz" 144, "SOFT" 50;
    color: var(--cream);
}
.practice-major h3 em {
    color: var(--mint);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.practice-major .lede {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 1.2rem;
    font-variation-settings: "opsz" 14, "SOFT" 60;
    color: rgba(230, 235, 231, 0.78);
    margin: 1rem 0 1.5rem;
    line-height: 1.45;
}
.practice-major p {
    color: rgba(230, 235, 231, 0.82);
    line-height: 1.6;
}
.practice-major p + p { margin-top: 1.2rem; }

.atlas-card {
    border: 1px solid rgba(117, 221, 132, 0.25);
    padding: 1.75rem;
    background: rgba(117, 221, 132, 0.04);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    position: relative;
}
.atlas-card .atlas-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mint);
    font-weight: 500;
}
.atlas-card .atlas-name {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin-top: 0.4rem;
    margin-bottom: 0.6rem;
    color: var(--cream);
    letter-spacing: 0.02em;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    font-style: italic;
}
.atlas-card .atlas-name b { font-weight: 700; font-style: italic; }
.atlas-card p {
    color: rgba(230, 235, 231, 0.78);
    font-size: 0.96rem;
    line-height: 1.55;
    max-width: 100%;
}
.atlas-card .atlas-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mint);
    border-bottom: 1px solid var(--mint);
    padding-bottom: 0.2rem;
}
.atlas-card .atlas-link:hover { color: var(--cream); border-bottom-color: var(--cream); }

/* A QUIÉN SERVIMOS */
.audience-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.audience-list {
    list-style: none;
    border-top: 1px solid var(--ink-15);
}
.audience-list li {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1.5rem;
    align-items: start;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--ink-15);
    transition: padding-left 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.audience-list li:hover { padding-left: 0.5rem; background: var(--ink-08); }
.audience-list .num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--mint);
    padding-top: 0.6em;
}
.audience-list__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.audience-list .name {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-variation-settings: "opsz" 144, "SOFT" 60;
    color: var(--cream);
}
.audience-list .promise {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    font-weight: 300;
    line-height: 1.4;
    color: var(--ink-70);
    font-variation-settings: "SOFT" 70;
    max-width: 32rem;
}
.audience-coda {
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1.4;
    font-variation-settings: "opsz" 14, "SOFT" 80;
    color: var(--cream);
    font-style: italic;
    padding-top: 1rem;
}
.audience-coda em {
    color: var(--mint);
    font-variation-settings: "opsz" 14, "SOFT" 100, "WONK" 1;
}

/* PRINCIPIOS */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 0;
    border-top: 1px solid var(--ink-15);
    border-left: 1px solid var(--ink-15);
}
.principle {
    padding: var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--ink-15);
    border-right: 1px solid var(--ink-15);
    background: transparent;
    transition: background 0.4s var(--ease-out);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 16rem;
    position: relative;
    overflow: hidden;
}
.principle:hover { background: var(--navy-2); }
.principle:hover .principle-mark { color: var(--mint); transform: rotate(8deg); }
.principle-mark {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: 2.2rem;
    color: var(--ink-30);
    font-variation-settings: "opsz" 144, "WONK" 1;
    transition: color 0.3s var(--ease-out), transform 0.5s var(--ease-out);
    transform-origin: left center;
    line-height: 1;
}
.principle h3 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.1;
    font-variation-settings: "opsz" 144, "SOFT" 60;
    color: var(--cream);
}
.principle h3 em {
    color: var(--mint);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.principle p {
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ink-80);
}
.principle__practice {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--ink-15);
    font-size: 0.88rem !important;
    line-height: 1.55;
    color: var(--ink-70) !important;
}
.principle__practice strong {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mint);
    font-weight: 500;
    display: block;
    margin-bottom: 0.4rem;
}

/* DÓNDE ESTAMOS */
.location {
    background: var(--navy-2);
    margin: 0 calc(-1 * clamp(1.5rem, 5vw, 3rem));
    padding-left: clamp(1.5rem, 5vw, 3rem);
    padding-right: clamp(1.5rem, 5vw, 3rem);
    border-top: 1px solid var(--ink-15);
    border-bottom: 1px solid var(--ink-15);
    position: relative;
    overflow: hidden;
}
.location::before {
    content: "";
    position: absolute;
    right: -8%;
    top: 0;
    bottom: 0;
    width: 50%;
    background-image: url("/assets/illustrations/coastline-santa-marta.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;
    opacity: 0.5;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.location-inner { max-width: var(--shell); margin: 0 auto; position: relative; z-index: 1; }
.location-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: end;
}
.place {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 5.2rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    font-variation-settings: "opsz" 144, "SOFT" 40;
    color: var(--cream);
}
.place .city { display: block; }
.place .country {
    display: block;
    font-style: italic;
    color: var(--mint);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.coords-block {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.8;
    color: var(--ink-70);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.coords-block .row {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--ink-15);
}
.coords-block .row:first-child { border-top: 1px solid var(--ink-15); }
.coords-block .row .k { color: var(--ink-50); }
.coords-block .row .v { color: var(--cream); }
.location-body {
    margin-top: 2.5rem;
    max-width: 38rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-80);
}

/* CONTACTO */
.contact-section { text-align: left; position: relative; }
.contact-headline {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7vw, 6rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
    font-variation-settings: "opsz" 144, "SOFT" 40;
    margin-bottom: 2.5rem;
    max-width: 22ch;
    color: var(--cream);
}
.contact-headline em {
    color: var(--mint);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.contact-actions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ink-15);
}
.contact-email {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    line-height: 1;
    color: var(--cream);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-variation-settings: "opsz" 144, "SOFT" 50;
    transition: color 0.3s var(--ease-out);
}
.contact-email:hover { color: var(--mint); }
.contact-email .arrow { font-family: var(--font-mono); color: var(--mint); transition: transform 0.3s var(--ease-out); }
.contact-email:hover .arrow { transform: translateX(8px); }

/* FOOTER */
footer {
    background: var(--navy-deep);
    color: var(--cream);
    padding: var(--space-5) clamp(1.5rem, 5vw, 3rem) var(--space-3);
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--ink-15);
}
.footer-inner {
    max-width: var(--shell);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: end;
}
.footer-mark {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    position: relative;
}
.footer-mark img {
    height: clamp(2.4rem, 5vw, 3.8rem);
    width: auto;
    display: block;
    filter: drop-shadow(0 0 24px rgba(117, 221, 132, 0.25));
    /* "The logo is alive": gentle breath while in viewport. Slowed enough
       to be felt, not noticed — like a heartbeat in the periphery. */
    animation: footerBreath 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    transform-origin: left center;
    will-change: transform, filter;
}
@keyframes footerBreath {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 24px rgba(117, 221, 132, 0.22));
    }
    50% {
        transform: scale(1.012);
        filter: drop-shadow(0 0 32px rgba(117, 221, 132, 0.32));
    }
}
@media (prefers-reduced-motion: reduce) {
    .footer-mark img { animation: none; }
}
.footer-mark .tagline {
    display: block;
    font-style: italic;
    font-size: 0.35em;
    margin-top: 0.4rem;
    color: rgba(230, 235, 231, 0.7);
    letter-spacing: 0.02em;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-weight: 300;
}
.footer-stack { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-stack .tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.95rem;
    font-weight: 300;
    color: rgba(230, 235, 231, 0.7);
    letter-spacing: 0.01em;
    font-variation-settings: "SOFT" 100, "WONK" 1;
}
.footer-meta {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(230, 235, 231, 0.55);
    line-height: 1.8;
    text-align: right;
}
.footer-meta .mint { color: var(--mint); }
.footer-meta a {
    border-bottom: 1px solid rgba(230, 235, 231, 0.2);
    color: rgba(230, 235, 231, 0.7);
    transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.footer-meta a:hover { color: var(--mint); border-bottom-color: var(--mint); }

/* REVEAL ANIMATIONS */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Reveal cinematográfico: opacity + slide + leve filter blur fade. Curva
   cubic-bezier(0.22, 1, 0.36, 1) — "ease-out expo" tipo cinematográfica. */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(6px);
    transition:
        opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.0s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}
.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ── Letter-by-letter reveal (data-reveal="letters") ─────────────────────
   Words wrap as units (.word inline-block) so no mid-word breaks; chars
   inside animate independently with staggered delay. The .js guard means
   no-JS users see the text as-is (no split happens).

   The parent element also morphs Fraunces axes while the letters fade in:
   starts at SOFT 30 (Fraunces baseline) → ends at SOFT 70, WONK 0.35. The
   timing roughly matches the stagger total so the morph completes alongside
   the last letter — a layered "alive typography" effect. */
.js [data-reveal="letters"] {
    font-variation-settings: "opsz" var(--reveal-opsz, 144), "SOFT" 30, "WONK" 0;
    transition: font-variation-settings 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-reveal="letters"].is-revealed {
    font-variation-settings: "opsz" var(--reveal-opsz, 144), "SOFT" 70, "WONK" 0.35;
}
.js [data-reveal="letters"] .word {
    display: inline-block;
    white-space: nowrap; /* keep word atomic across lines */
}
.js [data-reveal="letters"] .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.6em) rotate(2deg);
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--char-i, 0) * 18ms);
    will-change: opacity, transform;
}
.js [data-reveal="letters"].is-revealed .char {
    opacity: 1;
    transform: translateY(0) rotate(0);
}

/* ── Mask reveal (data-reveal="mask") ────────────────────────────────────
   Clip-path wipe from left to right. The clip is applied to the child (not
   the observed element) because Chrome won't fire IntersectionObserver
   callbacks for elements whose visible content is fully clipped/hidden. */
.js [data-reveal="mask"] > * {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.95s cubic-bezier(0.83, 0, 0.17, 1);
    will-change: clip-path;
}
.js [data-reveal="mask"].is-revealed > * { clip-path: inset(0 0 0 0); }

/* ── Lift reveal (data-reveal="lift") ────────────────────────────────────
   Larger translateY + slower fade than .reveal, for hero-level blocks. */
[data-reveal="lift"] {
    opacity: 0;
    transform: translateY(64px);
    transition:
        opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal="lift"].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Scroll-driven highlights en §II Convicción ────────────────────────
   Las 3 palabras-clave del blockquote (datos / conocimiento / decisión)
   pasan de cream sutil a mint pleno conforme la sección avanza por el
   viewport. Usa scroll-timeline donde existe; fallback IntersectionObserver
   maneja la clase .triple-on. */
.conviction blockquote .kw {
    color: var(--ink-70);
    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    font-variation-settings: "SOFT" 50;
}
.conviction blockquote .kw.kw-on,
.conviction.triple-on blockquote .kw {
    color: var(--mint);
    font-variation-settings: "SOFT" 100, "WONK" 1;
}
.conviction blockquote .kw:nth-child(1) { transition-delay: 0s; }
.conviction blockquote .kw:nth-child(2) { transition-delay: 0.15s; }
.conviction blockquote .kw:nth-child(3) { transition-delay: 0.3s; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Hero entrance — el JS toma control con WAAPI cuando .js-hero está presente.
   Si JS está deshabilitado, este fallback CSS se aplica para no dejar contenido invisible. */
.no-js .hero .label-line { animation: fadeIn 1.2s var(--ease-out) 0.1s both; }
.no-js .hero h1 .line    { animation: fadeUp 1.2s var(--ease-out) both; }
.no-js .hero h1 .line:nth-child(1) { animation-delay: 0.25s; }
.no-js .hero h1 .line:nth-child(2) { animation-delay: 0.45s; }
.no-js .hero h1 .line:nth-child(3) { animation-delay: 0.65s; }
.no-js .hero-meta   { animation: fadeUp 1.2s var(--ease-out) 0.85s both; }
.no-js .hero-coords { animation: fadeIn 1.4s var(--ease-out) 0.05s both; }

/* ── Hero kinetic entrance (con JS activo) ─────────────────────────────
   El hero es la primera impresión — entra con stagger dramático,
   clip-path reveal por línea de H1, fade controlado para el resto. */
@keyframes heroLineReveal {
    from {
        opacity: 0;
        clip-path: inset(0 100% -10% 0);
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 -10% 0);
        transform: translateY(0);
    }
}
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.js .hero-coords    { opacity: 0; animation: fadeIn 1.4s var(--ease-out) 0.15s both; }
.js .hero h1 .line  { display: block; opacity: 0; animation: heroLineReveal 1.25s cubic-bezier(0.22, 1, 0.36, 1) both; }
.js .hero h1 .line:nth-child(1) { animation-delay: 0.40s; }
.js .hero h1 .line:nth-child(2) { animation-delay: 0.70s; }
.js .hero h1 .line:nth-child(3) { animation-delay: 1.00s; }
.js .hero-meta      { opacity: 0; animation: heroFadeUp 1.0s var(--ease-out) 1.15s both; }

/* ── Custom cursor (premium pointer device only) ───────────────────────
   Ring sutil que sigue al cursor con smoothing. Se expande sobre
   elementos interactivos. mix-blend para visibilidad en cualquier fondo.
   Solo en pointer:fine y sin prefers-reduced-motion. */
@media (pointer: fine) {
    .js .custom-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 26px;
        height: 26px;
        border: 1px solid var(--mint);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        opacity: 0;
        transform: translate(-50%, -50%);
        transition:
            width 0.22s var(--ease-out),
            height 0.22s var(--ease-out),
            opacity 0.2s var(--ease-out),
            border-color 0.2s,
            background 0.25s;
        mix-blend-mode: difference;
        will-change: transform, width, height;
    }
    .js .custom-cursor.is-active { opacity: 0.75; }
    .js .custom-cursor.is-link {
        width: 56px;
        height: 56px;
        background: rgba(117, 221, 132, 0.1);
        border-color: var(--mint);
    }
    .js .custom-cursor.is-hide { opacity: 0; }

    /* Cursor variants stacked on top of is-link.
       is-card  → larger ring with a tiny "see" cue
       is-btn   → solid mint dot (no ring)
       is-external → horizontally stretched ring, hints at "outgoing" */
    .js .custom-cursor.is-card {
        width: 86px;
        height: 86px;
        background: rgba(117, 221, 132, 0.18);
    }
    .js .custom-cursor.is-card::after {
        content: "see ↗";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--mint);
        mix-blend-mode: normal;
    }
    .js .custom-cursor.is-btn {
        width: 14px;
        height: 14px;
        background: var(--mint);
        border-color: transparent;
    }
    .js .custom-cursor.is-external {
        width: 64px;
        height: 26px;
        border-radius: 14px;
    }
    [lang="es"] .js .custom-cursor.is-card::after { content: "ver ↗"; }
}

/* ── Magnetic buttons ────────────────────────────────────────────────────
   --mag-x / --mag-y are written by microinteractions.js based on cursor
   proximity. The button translates a small fraction toward the cursor and
   eases back on leave. */
.btn.ember, .btn.mint, .nav-cta, .contact-email {
    transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.25s var(--ease-out),
                color 0.25s var(--ease-out),
                box-shadow 0.35s var(--ease-out);
    will-change: transform;
}

/* ── Card tilt ──────────────────────────────────────────────────────────
   --tilt-x / --tilt-y are set by microinteractions.js based on cursor
   position over the card. Subtle 3D feel without resorting to flashy. */
.case-card {
    transform: perspective(900px) rotateX(var(--tilt-x, 0)) rotateY(var(--tilt-y, 0));
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s var(--ease-out);
    transform-style: preserve-3d;
    will-change: transform;
}

/* ── Underline ink-flow on links ─────────────────────────────────────────
   Nav links and mailto get a left→right wipe underline instead of the
   default subtle one. The base ::after sits 1px below the text and the
   transform-origin animation does the work. */
.nav-link, .contact-email, a.mailto-link {
    position: relative;
}
.nav-link::after,
.contact-email::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--mint);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.contact-email:hover::after,
.contact-email:focus-visible::after {
    transform: scaleX(1);
}

/* Cuando JS toma control: ocultamos los elementos hasta que el script los anima.
   La clase .js la fija un inline script síncrono en el <head>, antes del primer paint. */
.js .hero .label-line,
.js .hero h1 .line,
.js .hero-meta,
.js .hero-coords {
    opacity: 0;
}
.js .hero h1 em {
    color: var(--cream);
    transition: color 0.4s var(--ease-out);
}
.js .hero h1 em.is-mint {
    color: var(--mint);
}

/* ── View Transitions API ───────────────────────────────────────────────── */
/* Cross-document opt-in. En navegadores soportados (Chrome 126+, Safari 18+),
   transiciones automáticas entre páginas del mismo origen. Resto: navegación normal. */
@view-transition {
    navigation: auto;
}

@supports (view-transition-name: none) {
    /* Persistent elements get their own VT name and won't crossfade */
    .wordmark {
        view-transition-name: kohr-wordmark;
    }
    footer .footer-mark {
        view-transition-name: kohr-footer-mark;
    }

    /* Default crossfade with a slight blur — feels like film stock */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 360ms;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
    ::view-transition-old(root) {
        animation-name: kohr-vt-out;
    }
    ::view-transition-new(root) {
        animation-name: kohr-vt-in;
    }
    @keyframes kohr-vt-out {
        0%   { opacity: 1; transform: translateY(0)  scale(1);    }
        100% { opacity: 0; transform: translateY(-8px) scale(0.995); }
    }
    @keyframes kohr-vt-in {
        0%   { opacity: 0; transform: translateY(12px) scale(1.005); }
        100% { opacity: 1; transform: translateY(0)    scale(1);     }
    }

    /* Wordmark slides over with a soft scale — feels anchored */
    ::view-transition-old(kohr-wordmark),
    ::view-transition-new(kohr-wordmark) {
        animation-duration: 420ms;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
}

/* ── Glow trails para CTAs mint ─────────────────────────────────────────── */
.btn.ember,
.btn.mint,
.nav-cta,
.contact-email {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.btn.ember::before,
.btn.mint::before,
.nav-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
    background: radial-gradient(
        circle 80px at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, 0.22),
        transparent 70%
    );
}
.btn.ember:hover::before,
.btn.mint:hover::before,
.nav-cta:hover::before { opacity: 1; }

.contact-email::before {
    content: "";
    position: absolute;
    left: var(--mx, 0%);
    top: var(--my, 50%);
    width: 120px;
    height: 120px;
    z-index: -1;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(117, 221, 132,0.18), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
}
.contact-email:hover::before { opacity: 1; }

/* ── Scroll-driven plate animations ─────────────────────────────────────── */
@supports (animation-timeline: view()) {
    .plate {
        animation: kohr-plate-build 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-timeline: view();
        animation-range: entry 0% cover 28%;
    }
    @keyframes kohr-plate-build {
        0%   { opacity: 0; transform: translateY(20px); border-bottom-color: transparent; }
        60%  { opacity: 1; transform: translateY(0);    border-bottom-color: transparent; }
        100% { opacity: 1; transform: translateY(0);    border-bottom-color: var(--ink-15); }
    }
    .plate-num {
        animation: kohr-plate-num-fade 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-timeline: view();
        animation-range: entry 5% cover 28%;
    }
    @keyframes kohr-plate-num-fade {
        0%   { opacity: 0; letter-spacing: 0.28em; }
        100% { opacity: 1; letter-spacing: 0.18em; }
    }
}

/* ── SERENO DEMO (mockup interactivo) ───────────────────────────────────── */
.sereno-demo {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: 100%;
    color: var(--cream);
    --sereno-bg: #06141f;
}
.sereno-demo--mini { gap: 0; }

.sereno-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0.2rem;
}
.sereno-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.55rem 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-70);
    background: transparent;
    border: 1px solid var(--ink-15);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.sereno-pill {
    transition:
        color 0.25s var(--ease-out),
        background-color 0.3s var(--ease-out),
        border-color 0.25s var(--ease-out),
        transform 0.2s var(--ease-out);
}
.sereno-pill:hover { color: var(--cream); border-color: var(--ink-30); }
.sereno-pill:active { transform: scale(0.96); }
.sereno-pill.is-active {
    color: var(--navy);
    background: var(--cream);
    border-color: var(--cream);
}
.sereno-pill.is-active .sereno-pill__dot {
    animation: serenoPillPulse 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes serenoPillPulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(117, 221, 132, 0.55); }
    50%  { transform: scale(1.4); box-shadow: 0 0 0 6px rgba(117, 221, 132, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(117, 221, 132, 0); }
}

/* ── Sereno demo skeleton (shimmer mientras JS hidrata) ─────────────────
   `[data-sereno-demo]:empty` aplica solo cuando el contenedor está vacío.
   En cuanto sereno-demo.js inyecta nodos, los selectores `:empty` fallan y
   el shimmer se va. */
.js [data-sereno-demo]:empty {
    display: block;
    min-height: clamp(420px, 60vh, 640px);
    background:
        linear-gradient(90deg,
            rgba(230, 235, 231, 0.02) 0%,
            rgba(117, 221, 132, 0.08) 50%,
            rgba(230, 235, 231, 0.02) 100%);
    background-size: 200% 100%;
    background-position: 200% 0;
    border: 1px solid var(--ink-15);
    border-radius: 14px;
    animation: serenoSkeletonShimmer 1.8s ease-in-out infinite;
}
@keyframes serenoSkeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .js [data-sereno-demo]:empty { animation: none; }
}
.sereno-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.sereno-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 8 / 5;
    background: var(--sereno-bg);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--ink-15);
    contain: layout style paint;
}

/* Pre-reserva espacio para el demo antes de que JS lo monte (evita CLS).
   :empty solo aplica si el contenedor no tiene hijos — cuando el JS
   inyecta el .sereno-demo dentro, deja de aplicar y la altura la define
   el contenido renderizado. */
[data-sereno-demo] { display: block; width: 100%; }
[data-sereno-demo="full"]:empty { min-height: 560px; }
[data-sereno-demo="mini"]:empty { min-height: 320px; }
.sereno-demo--mini .sereno-stage {
    aspect-ratio: 5 / 3;
    border-radius: 4px;
}

.sereno-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── View tabs (Mapa / Timeline / Dashboard) ──────────────────────────── */
.sereno-tabs {
    display: flex;
    gap: 0.4rem;
    margin: 0 0 1rem 0;
    border-bottom: 1px solid var(--ink-15);
}
.sereno-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--ink-50);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: color 0.25s var(--ease-out), border-color 0.3s var(--ease-out);
    margin-bottom: -1px;
}
.sereno-tab:hover { color: var(--ink-80); }
.sereno-tab.is-active {
    color: var(--mint);
    border-bottom-color: var(--mint);
}

/* ── Views container con transitions cinematográficas ─────────────────── */
.sereno-views {
    position: relative;
    isolation: isolate;
}
.sereno-view {
    /* Outgoing: fade + lift + slight blur + clip in from right */
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        clip-path 0.55s cubic-bezier(0.83, 0, 0.17, 1),
        visibility 0s linear 0.55s;
    filter: blur(4px);
    clip-path: inset(0 50% 0 50%);
}
.sereno-views[data-view-active="map"]       .sereno-view[data-view="map"],
.sereno-views[data-view-active="timeline"]  .sereno-view[data-view="timeline"],
.sereno-views[data-view-active="dashboard"] .sereno-view[data-view="dashboard"] {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
    .sereno-view { filter: none; clip-path: none; transition-duration: 0.15s; }
}
.sereno-views .sereno-view {
    opacity: 0;
    transform: scale(0.98);
    visibility: hidden;
    position: absolute;
    inset: 0;
}
/* La vista activa toma el flujo, las inactivas posición absoluta para que
   no consuman espacio fuera del active stage. */
.sereno-views[data-view-active="map"]       .sereno-view[data-view="map"],
.sereno-views[data-view-active="timeline"]  .sereno-view[data-view="timeline"],
.sereno-views[data-view-active="dashboard"] .sereno-view[data-view="dashboard"] {
    position: relative;
}

/* ── Timeline view ────────────────────────────────────────────────────── */
.sereno-timeline {
    position: relative;
    background: var(--sereno-bg);
    border: 1px solid var(--ink-15);
    border-radius: 6px;
    padding: 1.75rem 1.5rem 1.75rem 3.25rem;
    max-height: 560px;
    overflow-y: auto;
}
.sereno-timeline__axis {
    position: absolute;
    top: 1.75rem;
    bottom: 1.75rem;
    left: 2.9rem;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(117, 221, 132, 0.55) 6%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(117, 221, 132, 0.25) 94%,
        transparent 100%);
    pointer-events: none;
}
.sereno-timeline__list { list-style: none; margin: 0; padding: 0; }
.sereno-timeline__item {
    position: relative;
    padding: 0.8rem 0 0.95rem 1.8rem;
    transition: opacity 0.3s var(--ease-out);
}
.sereno-timeline__item + .sereno-timeline__item { border-top: 1px dashed var(--ink-08); }
.sereno-timeline__item.is-dim { opacity: 0.22; }
.sereno-timeline__dot {
    position: absolute;
    left: -0.66rem;
    top: 1.85rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow:
        0 0 0 3px var(--sereno-bg, var(--paper)),
        0 0 0 4px rgba(255, 255, 255, 0.04),
        0 0 12px currentColor;
}
.sereno-timeline__body {
    display: grid;
    gap: 0.25rem;
}
.sereno-timeline__cat {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.sereno-timeline__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--cream);
    line-height: 1.3;
    font-variation-settings: "SOFT" 30;
}
.sereno-timeline__meta {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-50);
    margin-top: 0.1rem;
}

/* ── Dashboard view ───────────────────────────────────────────────────── */
.sereno-dash {
    display: grid;
    grid-template-columns: 0.9fr 1.4fr 1fr;
    gap: 1rem;
    background: var(--sereno-bg);
    border: 1px solid var(--ink-15);
    border-radius: 6px;
    padding: 1.5rem;
    align-items: stretch;
}
.sereno-dash__card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.25rem 1.15rem;
    background: rgba(13, 37, 54, 0.55);
    border: 1px solid var(--ink-15);
    border-radius: 4px;
    min-height: 260px;
}
.sereno-dash__card--total {
    justify-content: flex-start;
    background: linear-gradient(155deg, rgba(117, 221, 132, 0.06) 0%, rgba(13, 37, 54, 0.55) 55%);
}
.sereno-dash__label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-50);
}
.sereno-dash__big-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0.4rem 0 0.2rem;
    flex-wrap: wrap;
}
.sereno-dash__big {
    font-family: var(--font-display);
    font-size: clamp(3.25rem, 5.5vw, 4.5rem);
    line-height: 0.95;
    color: var(--mint);
    font-variation-settings: "SOFT" 80, "WONK" 1;
    font-style: italic;
}
.sereno-dash__delta {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--mint);
    letter-spacing: 0.04em;
    padding: 0.18rem 0.4rem;
    border: 1px solid rgba(117, 221, 132, 0.4);
    border-radius: 2px;
    background: rgba(117, 221, 132, 0.08);
    white-space: nowrap;
}
.sereno-dash__sparkline {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 36px;
    margin-top: auto;
    padding-top: 0.5rem;
}
.sereno-dash__spark {
    flex: 1;
    background: linear-gradient(to top, var(--mint), rgba(117, 221, 132, 0.3));
    border-radius: 1px;
    min-height: 4px;
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.sereno-dash__sub {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-50);
    letter-spacing: 0.04em;
}
.sereno-dash__bars { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.3rem; }
.sereno-dash__bar-row {
    display: grid;
    grid-template-columns: 6.5rem 1fr 4.2rem;
    align-items: center;
    gap: 0.7rem;
}
.sereno-dash__bar-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--cream);
}
.sereno-dash__bar-track {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
}
.sereno-dash__bar-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    transform-origin: left;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 8px currentColor;
}
.sereno-dash__bar-val {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-70);
    white-space: nowrap;
    text-align: right;
}
.sereno-dash__rank {
    list-style: none;
    margin: 0.3rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sereno-dash__rank li {
    display: grid;
    grid-template-columns: 1.8rem 1fr auto;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--ink-08);
}
.sereno-dash__rank li:last-child { border-bottom: 0; }
.sereno-dash__rank-num {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--ink-50);
    letter-spacing: 0.08em;
}
.sereno-dash__rank-name {
    font-family: var(--font-display);
    font-size: 0.98rem;
    color: var(--cream);
    font-variation-settings: "SOFT" 30;
}
.sereno-dash__rank-val {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--mint);
    font-feature-settings: "tnum";
}

@media (max-width: 720px) {
    .sereno-dash { grid-template-columns: 1fr; }
    .sereno-dash__card { min-height: unset; }
}

/* ── Heat density layer ──────────────────────────────────────────────── */
.sereno-heat { pointer-events: none; mix-blend-mode: screen; opacity: 0.85; }
.sereno-heat__cell {
    transition: fill-opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.sereno-heat__cell.is-dim { fill-opacity: 0 !important; }

/* ── Ripple layer: red local al hover sobre un marker ────────────────── */
.sereno-ripple { pointer-events: none; }
.sereno-ripple__line {
    stroke-width: 1;
    stroke-opacity: 0.55;
    fill: none;
    animation: serenoRippleDraw 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes serenoRippleDraw {
    from { stroke-dashoffset: var(--line-len, 200); opacity: 0; }
    to   { stroke-dashoffset: 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .sereno-ripple__line {
        animation: none;
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
    }
}

/* ── Markers ─────────────────────────────────────────────────────────── */
.sereno-marker {
    cursor: pointer;
    outline: none;
}
.sereno-marker:focus-visible .sereno-marker__dot {
    stroke: #fff;
    stroke-width: 1.5;
}
.sereno-marker.is-dim { pointer-events: none; }
.sereno-marker__inner {
    transform-origin: center;
    transform-box: fill-box;
    transition: filter 0.3s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
    /* Sin animación cinemática: opacity simple */
    .sereno-marker.is-dim .sereno-marker__inner { opacity: 0.12; }
}

.sereno-marker__ring {
    transform-origin: center;
    transform-box: fill-box;
    animation: sereno-pulse 2.6s ease-in-out infinite;
    opacity: 0.7;
}
.sereno-marker:nth-child(3n)    .sereno-marker__ring { animation-delay: -0.4s; }
.sereno-marker:nth-child(3n+1)  .sereno-marker__ring { animation-delay: -1.2s; }
.sereno-marker:nth-child(5n)    .sereno-marker__ring { animation-delay: -2s; }

@keyframes sereno-pulse {
    0%   { transform: scale(0.6); opacity: 0.9; }
    80%  { transform: scale(2.0); opacity: 0; }
    100% { transform: scale(2.0); opacity: 0; }
}

.sereno-marker.is-active .sereno-marker__dot {
    r: 5;
    filter: drop-shadow(0 0 6px currentColor);
}
.sereno-marker.is-active .sereno-marker__ring {
    animation: sereno-pulse-strong 1.8s ease-out;
}
@keyframes sereno-pulse-strong {
    0%   { transform: scale(0.6); opacity: 1; stroke-width: 1.5; }
    100% { transform: scale(2.8); opacity: 0; stroke-width: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
    .sereno-marker__ring { animation: none; opacity: 0.45; transform: scale(1); }
    .sereno-marker.is-active .sereno-marker__ring { animation: none; }
}

/* ── Glass panel ─────────────────────────────────────────────────────── */
.sereno-glass {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.6rem 0.95rem;
    background: rgba(6, 28, 45, 0.55);
    border: 1px solid var(--ink-15);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
    border-radius: 4px;
    color: var(--cream);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 2;
}
.sereno-glass__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 8px rgba(117, 221, 132,0.7);
    animation: sereno-glass-pulse 2s ease-in-out infinite;
}
@keyframes sereno-glass-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}
.sereno-glass__count {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mint);
}
.sereno-glass__label {
    color: var(--ink-70);
}
.sereno-demo--mini .sereno-glass {
    bottom: 0.5rem;
    left: 0.5rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.66rem;
}

/* ── Tooltip ──────────────────────────────────────────────────────────── */
.sereno-tooltip {
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -100%);
    background: var(--navy-deep);
    color: var(--cream);
    border: 1px solid var(--ink-15);
    padding: 0.65rem 0.85rem;
    min-width: 200px;
    max-width: 280px;
    opacity: 0;
    transition: opacity 0.18s var(--ease-out);
    border-radius: 4px;
    z-index: 3;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.sereno-tooltip.is-visible {
    opacity: 1;
}
.sereno-tooltip__title {
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 0.3rem;
    color: var(--cream);
}
.sereno-tooltip__meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-70);
    line-height: 1.4;
}
.sereno-tooltip__cat {
    font-weight: 600;
}

/* ── Source note ──────────────────────────────────────────────────────── */
.sereno-note {
    color: var(--ink-50);
    font-size: 0.72rem;
}
.sereno-note a {
    color: var(--mint);
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.1em;
    transition: opacity 0.25s var(--ease-out);
}
.sereno-note a:hover { opacity: 0.7; }

/* Section wrappers */
.sereno-demo-section {
    padding: 0 clamp(1.5rem, 5vw, 3rem) clamp(2rem, 5vw, 4rem);
    max-width: var(--shell);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Screenshots gallery */
.sereno-shots-section {
    padding: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 5vw, 3rem);
    position: relative;
}
.shot {
    margin: 0;
    overflow: hidden;
    position: relative;
}
.shot__label {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--ink-15);
}
.shot__num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--mint);
    font-weight: 500;
}
.shot__name {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--cream);
    font-variation-settings: "SOFT" 60;
}
.shot picture, .shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--ink-15);
    background: var(--navy-deep);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
}
.shot figcaption {
    margin-top: 1.25rem;
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    font-weight: 300;
    color: var(--ink-80);
    line-height: 1.55;
    max-width: 50rem;
    font-variation-settings: "SOFT" 80;
}
.shot figcaption strong {
    font-weight: 500;
    color: var(--cream);
}

/* Featured shots (Gov + Contexto) get bigger play */
.shot--featured {
    margin-bottom: clamp(3rem, 6vw, 5rem);
}
.shot--featured + .shot--featured {
    border-top: 1px solid var(--ink-15);
    padding-top: clamp(3rem, 6vw, 5rem);
}

.shots-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: clamp(3rem, 6vw, 5rem);
    border-top: 1px solid var(--ink-15);
}
.shot--mobile picture, .shot--mobile img {
    max-height: 600px;
    object-fit: cover;
    object-position: top center;
}
@media (max-width: 800px) {
    .shots-grid { grid-template-columns: 1fr; }
    .shot--mobile picture, .shot--mobile img { max-height: 500px; }
}

/* Mini-demo inside practice-major (home) */
.practice-major-demo {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(230, 235, 231, 0.16);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: end;
}
.practice-major-demo__caption {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.practice-major-demo__caption p {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.45;
    color: rgba(230, 235, 231, 0.78);
    max-width: 28rem;
}
@media (max-width: 800px) {
    .practice-major-demo { grid-template-columns: 1fr; }
}

/* INTERIOR PAGES */
.page-hero {
    padding: clamp(8rem, 16vh, 12rem) clamp(1.5rem, 5vw, 3rem) var(--space-5);
    max-width: var(--shell);
    margin: 0 auto;
    position: relative;
}
.page-hero .breadcrumb {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 2rem;
}
.page-hero .breadcrumb a { color: var(--ink-50); border-bottom: 1px solid var(--ink-15); }
.page-hero .breadcrumb a:hover { color: var(--mint); }
.page-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 8vw, 7rem);
    line-height: 0.96;
    letter-spacing: -0.03em;
    font-variation-settings: "opsz" 144, "SOFT" 40;
    margin-bottom: 1.5rem;
    color: var(--cream);
}
.page-hero h1 em {
    color: var(--mint);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.page-hero .page-lede {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 300;
    line-height: 1.4;
    font-variation-settings: "opsz" 14, "SOFT" 70;
    max-width: 42rem;
    color: var(--ink-80);
}

.phase {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    padding: var(--space-5) 0;
    border-top: 1px solid var(--ink-15);
    align-items: start;
}
.phase:last-child { border-bottom: 1px solid var(--ink-15); }
.phase-meta { position: sticky; top: 8rem; }
.phase-num {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
    font-style: italic;
    color: var(--mint);
}
.phase-tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-top: 1rem;
}
.phase-body h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: 1.05;
    margin-bottom: 1.2rem;
    font-variation-settings: "opsz" 144, "SOFT" 50;
    color: var(--cream);
}
.phase-body h2 em {
    color: var(--mint);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.phase-body p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-80);
}
.phase-body p + p { margin-top: 1.1rem; }
.phase-body strong { color: var(--cream); }

.value-detail {
    padding: var(--space-5) 0;
    border-top: 1px solid var(--ink-15);
    display: grid;
    grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 5rem);
    align-items: start;
}
.value-detail:last-child { border-bottom: 1px solid var(--ink-15); }
.value-detail .v-mark {
    font-family: var(--font-display);
    font-size: clamp(5rem, 10vw, 9rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
    font-style: italic;
    color: var(--mint);
    position: sticky;
    top: 7rem;
}
.value-detail h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.8vw, 3rem);
    line-height: 1.04;
    margin-bottom: 0.6rem;
    font-variation-settings: "opsz" 144, "SOFT" 50;
    color: var(--cream);
}
.value-detail h2 em {
    color: var(--mint);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.value-detail .v-tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mint);
    margin-bottom: 1.2rem;
    display: block;
}
.value-detail p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-80);
    margin-bottom: 1.1rem;
}
.value-detail strong { color: var(--cream); }

@media (max-width: 880px) {
    .nav-links, .nav-cta { display: none; }
    .menu-toggle { display: block; }
    .hero-meta { grid-template-columns: 1fr; gap: var(--space-3); }
    .hero-ctas { justify-self: start; }
    .intro-grid { grid-template-columns: 1fr; gap: var(--space-3); }
    .practice-major-grid { grid-template-columns: 1fr; }
    .audience-grid { grid-template-columns: 1fr; }
    .location-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
    .footer-meta { text-align: left; }
    .phase { grid-template-columns: 1fr; }
    .phase-meta { position: static; }
    .value-detail { grid-template-columns: 1fr; }
    .value-detail .v-mark { position: static; font-size: 5rem; }
    .conviction blockquote { padding-left: 1.25rem; }

    /* ── Tap targets — Apple HIG mínimo 44×44 ──────────────────────────── */
    .wordmark {
        min-height: 44px;
        padding: 0.5rem 0;
    }
    .lang-toggle {
        min-height: 44px;
        padding: 0.7rem 0.5rem;
    }
    .menu-toggle {
        width: 44px;
        height: 44px;
    }
    .menu-toggle span:nth-child(1) { top: 16px; }
    .menu-toggle span:nth-child(2) { top: 22px; }
    .menu-toggle span:nth-child(3) { top: 28px; }
    .menu-toggle.active span:nth-child(1) { top: 22px; transform: rotate(45deg); }
    .menu-toggle.active span:nth-child(3) { top: 22px; transform: rotate(-45deg); }
    .atlas-link {
        min-height: 44px;
        padding: 0.6rem 0;
        align-items: center;
    }
    .breadcrumb a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0.4rem 0;
    }
    .sereno-pill {
        min-height: 44px;
        padding: 0.7rem 1rem;
    }
    .contact-email {
        min-height: 44px;
        padding: 0.6rem 0;
        align-items: center;
    }
    /* Footer + mono ghost links (legales, llms.txt, sitemap, "ver demo") */
    .footer-meta a,
    .sereno-note a,
    .mono.reveal > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0.4rem 0.2rem;
    }
    /* Bloque "Siguiente caso" — link grande al pie de cada case study */
    .case-next-inner a {
        min-height: 44px;
        padding: 0.6rem 0;
        align-items: center;
    }
    /* 404 — link de cambio de idioma */
    .lost__lang a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0.5rem 0.2rem;
    }
    /* Breadcrumb — asegurar ancho mínimo además del alto */
    .breadcrumb a {
        min-width: 44px;
        justify-content: center;
        padding-inline: 0.4rem;
    }
    /* Inline links editoriales dentro de párrafos de casos */
    .case-body p > a,
    .case-section__body a {
        padding: 0.3rem 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   CASE STUDIES — sistema editorial
   ───────────────────────────────────────────────────────────────────────── */

/* ── Hero asimétrico ─────────────────────────────────────────────────── */
.case-hero {
    padding: clamp(7rem, 14vh, 11rem) clamp(1.5rem, 5vw, 3rem) clamp(3rem, 6vw, 5rem);
    max-width: var(--shell);
    margin: 0 auto;
    position: relative;
}
.case-hero .breadcrumb {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 2rem;
}
.case-hero .breadcrumb a {
    color: var(--ink-50);
    border-bottom: 1px solid var(--ink-15);
}
.case-hero .breadcrumb a:hover { color: var(--mint); }

.case-hero__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 1rem 2rem;
    padding: 1.25rem 0;
    margin: 1.5rem 0;
    border-top: 1px solid var(--ink-15);
    border-bottom: 1px solid var(--ink-15);
}
.case-hero__meta dt {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 0.3rem;
}
.case-hero__meta dd {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--cream);
    font-weight: 400;
    line-height: 1.3;
}
.case-hero__meta dd em {
    color: var(--mint);
    font-style: italic;
    font-variation-settings: "SOFT" 100, "WONK" 1;
}

.case-hero__eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mint);
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--mint);
    border-radius: 2px;
    margin-bottom: 1.5rem;
}

.case-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7vw, 6.5rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    font-variation-settings: "SOFT" 40;
}
.case-hero h1 em {
    color: var(--mint);
    font-variation-settings: "SOFT" 100, "WONK" 1;
}
.case-hero__lede {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 300;
    line-height: 1.4;
    color: var(--ink-80);
    max-width: 50rem;
    font-variation-settings: "SOFT" 70;
}

/* ── Sections (editorial body) ────────────────────────────────────────── */
.case-section {
    padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 3rem);
    max-width: var(--shell);
    margin: 0 auto;
    position: relative;
}
.case-section + .case-section { padding-top: 0; }

.case-section__plate {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--ink-15);
}
.case-section__plate .num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mint);
    font-weight: 500;
}
.case-section__plate .label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream);
    font-weight: 500;
}

.case-section__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.case-section__heading {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.6vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variation-settings: "SOFT" 50;
}
.case-section__heading em {
    color: var(--mint);
    font-variation-settings: "SOFT" 100, "WONK" 1;
}
.case-section__body {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-80);
}
.case-section__body p + p { margin-top: 1.1rem; }
.case-section__body strong { color: var(--cream); font-weight: 500; }

/* ── Capabilities chip row ────────────────────────────────────────────── */
.case-caps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 2rem;
}
.case-cap-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--ink-15);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cream);
}
.case-cap-chip::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--mint);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(117, 221, 132,0.6);
}

/* ── Results — big numbers with count-up ─────────────────────────────── */
.case-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 0;
    border-top: 1px solid var(--ink-15);
    border-left: 1px solid var(--ink-15);
}
.case-result {
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
    border-bottom: 1px solid var(--ink-15);
    border-right: 1px solid var(--ink-15);
    background: transparent;
    transition: background 0.4s var(--ease-out);
}
.case-result:hover { background: var(--navy-2); }

.case-result__value {
    display: flex;
    align-items: baseline;
    gap: 0.3em;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--mint);
    font-variation-settings: "SOFT" 60;
    margin-bottom: 0.5rem;
}
.case-result__value .unit {
    font-size: 0.4em;
    color: var(--ink-70);
    font-variation-settings: "SOFT" 80;
    letter-spacing: -0.02em;
}
.case-result__label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-70);
    line-height: 1.4;
}

/* ── Pull-quote ─────────────────────────────────────────────────────── */
.case-quote {
    background: var(--navy-2);
    margin: 0 calc(-1 * clamp(1.5rem, 5vw, 3rem));
    padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 3rem);
    border-top: 1px solid var(--ink-15);
    border-bottom: 1px solid var(--ink-15);
}
.case-quote blockquote {
    max-width: var(--shell);
    margin: 0 auto;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.4vw, 2.8rem);
    line-height: 1.2;
    letter-spacing: -0.018em;
    color: var(--cream);
    padding-left: 1.5rem;
    border-left: 2px solid var(--mint);
    font-variation-settings: "SOFT" 60;
}
.case-quote blockquote em {
    color: var(--mint);
    font-variation-settings: "SOFT" 100, "WONK" 1;
}
.case-quote cite {
    display: block;
    max-width: var(--shell);
    margin: 1.5rem auto 0;
    padding-left: 1.5rem;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-50);
}
.case-quote cite::before { content: "— "; color: var(--mint); }

/* ── Stack ──────────────────────────────────────────────────────────── */
.case-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    margin-top: 1.5rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--ink-15);
    border-bottom: 1px solid var(--ink-15);
}
.case-stack__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--cream);
}
.case-stack__item::before {
    content: "";
    width: 4px; height: 4px;
    background: var(--mint);
    border-radius: 50%;
}

/* ── Flow diagram ───────────────────────────────────────────────────── */
.case-flow {
    margin-top: 1.5rem;
}
.case-flow img {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: block;
}

/* ── Next case (transition) ────────────────────────────────────────── */
.case-next {
    background: var(--navy-deep);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 3rem);
    border-top: 1px solid var(--ink-15);
    position: relative;
    overflow: hidden;
}
.case-next::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--mint);
    box-shadow: 0 0 24px rgba(117, 221, 132,0.4);
}
.case-next-inner {
    max-width: var(--shell);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 3rem);
    align-items: end;
}
.case-next .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mint);
    margin-bottom: 0.6rem;
    display: block;
}
.case-next a {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    line-height: 1.05;
    color: var(--cream);
    letter-spacing: -0.025em;
    font-variation-settings: "SOFT" 50;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    transition: color 0.3s var(--ease-out);
}
.case-next a:hover { color: var(--mint); }
.case-next a em {
    color: var(--mint);
    font-variation-settings: "SOFT" 100, "WONK" 1;
}
.case-next a .arrow {
    font-family: var(--font-mono);
    color: var(--mint);
    transition: transform 0.3s var(--ease-out);
    font-size: 0.5em;
}
.case-next a:hover .arrow { transform: translateX(8px); }

/* ── Card grid (en home — § Casos) ──────────────────────────────────── */
.cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
}
.case-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ink-15);
    padding: 0;
    background: transparent;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), transform 0.4s var(--ease-out);
    overflow: hidden;
}
.case-card:hover {
    border-color: var(--mint);
    background: var(--navy-2);
    transform: translateY(-4px);
}
.case-card__thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--navy-deep);
    overflow: hidden;
    border-bottom: 1px solid var(--ink-15);
    transition: border-color 0.3s var(--ease-out);
}
.case-card:hover .case-card__thumb { border-bottom-color: var(--mint); }
.case-card__thumb img,
.case-card__thumb svg {
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;
}
.case-card__body {
    padding: 1.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}
.case-card__meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-50);
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.case-card__meta .dot {
    width: 4px; height: 4px;
    background: var(--mint);
    border-radius: 50%;
}
.case-card__title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.15;
    color: var(--cream);
    font-variation-settings: "SOFT" 60, "WONK" 0;
    transition: font-variation-settings 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.case-card:hover .case-card__title,
.case-card:focus-visible .case-card__title {
    font-variation-settings: "SOFT" 100, "WONK" 1;
}
.case-card__title em {
    color: var(--mint);
    font-variation-settings: "SOFT" 100, "WONK" 1;
}
.case-card__metric {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--ink-15);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.case-card__metric-value {
    font-family: var(--font-display);
    font-size: 1.7rem;
    line-height: 1;
    color: var(--mint);
    font-variation-settings: "SOFT" 60;
    letter-spacing: -0.02em;
}
.case-card__metric-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-70);
}

/* Responsive */
@media (max-width: 800px) {
    .case-section__grid { grid-template-columns: 1fr; gap: var(--space-3); }
    .case-next-inner { grid-template-columns: 1fr; gap: 1rem; }
}

/* ── Territorio scrollytelling §V ─────────────────────────────────────── */
.territorio-scrolly {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    max-width: 1280px;
    margin: 4rem auto 5rem;
    padding: 0 var(--gutter, 1.5rem);
}
.territorio-stage {
    position: sticky;
    top: 8vh;
    height: 84vh;
    max-height: 720px;
    align-self: start;
}
.territorio-stage__inner {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid var(--ink-15);
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(155deg, rgba(13, 37, 54, 0.6) 0%, rgba(6, 20, 31, 0.85) 100%);
}
.territorio-stage__viz {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px;
    perspective-origin: 50% 75%;
}
.territorio-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── §II isometric stack ─────────────────────────────────────────────────
   Four iso-layers (catastral / ambiental / económica / sanitaria) stacked
   in 3D. Each is a <div> with its own <svg> showing the same coastline +
   hex grid + thematic payload. The stack rotates to a Mapbox-style angle
   (~56° on X, ~-32° on Z) so it reads as "GIS tiles seen in perspective". */
.iso-stack {
    position: relative;
    width: 86%;
    aspect-ratio: 8 / 5;
    transform-style: preserve-3d;
    transform: rotateX(56deg) rotateZ(-32deg);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.iso-layer {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition:
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.45s var(--ease-out);
    opacity: 0.22;
    will-change: transform, opacity;
}
.iso-layer__svg {
    width: 100%;
    height: 100%;
    display: block;
    border: 1px solid rgba(230, 235, 231, 0.06);
    background: linear-gradient(155deg, rgba(13, 37, 54, 0.7) 0%, rgba(6, 20, 31, 0.4) 100%);
}
/* Per-layer Z-translation creates the stacking depth */
.iso-layer[data-layer="catastral"]  { transform: translateZ(0); }
.iso-layer[data-layer="ambiental"]  { transform: translateZ(44px); }
.iso-layer[data-layer="economica"]  { transform: translateZ(88px); }
.iso-layer[data-layer="sanitaria"]  { transform: translateZ(132px); }

/* When a layer has been reached during scroll → fully visible */
.iso-layer.is-visible { opacity: 1; }

/* The currently-focused layer gets an extra Z lift + drop-shadow so it
   reads as elevated. The +24px stays additive to its base translate. */
.iso-layer[data-layer="catastral"].is-current { transform: translateZ(24px); }
.iso-layer[data-layer="ambiental"].is-current { transform: translateZ(68px); }
.iso-layer[data-layer="economica"].is-current { transform: translateZ(112px); }
.iso-layer[data-layer="sanitaria"].is-current { transform: translateZ(156px); }
.iso-layer.is-current {
    filter: drop-shadow(0 18px 36px rgba(6, 28, 45, 0.55));
}

/* Payload fade — the layer's thematic data only paints when its layer is
   visible. Backdrop (coastline + hex grid) is always there as ghost. */
.iso-layer .layer-payload {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.iso-layer.is-visible .layer-payload { opacity: 1; }

/* Mobile / reduced-motion: flatten the 3D perspective but keep the
   accumulating-layers behavior — as the user scrolls, each new layer
   stacks on top of the previous ones via natural DOM z-order. Same
   .is-visible logic the desktop version uses. */
@media (max-width: 880px), (prefers-reduced-motion: reduce) {
    .territorio-stage__viz { perspective: none; }
    .iso-stack {
        transform: none;
        width: 100%;
        height: 100%;
    }
    .iso-layer,
    .iso-layer[data-layer],
    .iso-layer[data-layer].is-current {
        transform: none;
        filter: none;
    }
    /* Hidden by default, fade in once is-visible is added. Later layers in
       the DOM sit on top — so sanitaria's heatmap composites over the
       previous layers, mimicking the desktop stack flattened to 2D. */
    .iso-layer { opacity: 0; }
    .iso-layer.is-visible { opacity: 1; }
    /* Only the current layer's payload pulses/shines; the others stay as
       quiet background. Use a subtle ring on the active layer's frame. */
    .iso-layer.is-current .iso-layer__svg {
        box-shadow: 0 0 0 1px rgba(117, 221, 132, 0.35) inset;
    }
}
.territorio-stage__hud {
    position: absolute;
    left: 1rem;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    z-index: 2;
    pointer-events: none;
}
.territorio-stage__eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-50);
}
.territorio-stage__label {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--mint);
    text-transform: uppercase;
    transition: color 0.4s var(--ease-out);
}

.territorio-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 38vh;
    padding-top: 22vh;
    padding-bottom: 35vh;
}
.territorio-step {
    position: relative;
    padding: 1.5rem 0;
    min-height: 38vh;
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.territorio-step__hint {
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ink-15);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--ink-50);
    max-width: 38ch;
}
.territorio-step__hint strong {
    color: var(--mint);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.66rem;
    display: block;
    margin-bottom: 0.3rem;
}
.territorio-step__num {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    color: var(--mint);
    margin-bottom: 0.9rem;
}
.territorio-step__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.1;
    color: var(--cream);
    margin: 0 0 1.2rem;
    font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 80;
    letter-spacing: -0.02em;
}
.territorio-step__title em {
    font-style: italic;
    color: var(--mint);
    font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 80;
}
.territorio-step__body {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-80);
    max-width: 38ch;
}

/* SVG layer states ──────────────────────────────────────────────────── */
.tt-layer {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.tt-layer.is-visible { opacity: 1; }

/* Catastral — parcelas con stagger draw-in */
.tt-parcel {
    opacity: 0;
    transform-origin: center;
    transform: scale(0.85);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.is-visible .tt-parcel {
    opacity: 1;
    transform: scale(1);
    transition-delay: calc(var(--i) * 24ms);
}
.iso-layer[data-layer="catastral"].is-current .tt-parcel {
    fill-opacity: 0.55;
    stroke-opacity: 0.85;
    stroke-width: 0.7;
}

/* Ambiental — vegetación + corredores */
.tt-veg {
    opacity: 0;
    transform-origin: center;
    transform: scale(0.7);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.is-visible .tt-veg {
    opacity: 1;
    transform: scale(1);
    transition-delay: calc(var(--i) * 120ms);
}
.tt-corridor {
    stroke-dasharray: 3 4;
    stroke-dashoffset: 200;
    opacity: 0;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s var(--ease-out);
}
.is-visible .tt-corridor {
    stroke-dashoffset: 0;
    opacity: 1;
    transition-delay: calc(0.3s + var(--i) * 0.2s);
}

/* Económica — nodos + links */
.tt-econ-dot,
.tt-econ-ring {
    opacity: 0;
    transform-origin: center;
    transform: scale(0);
    transition: opacity 0.5s var(--ease-out), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.is-visible .tt-econ-dot,
.is-visible .tt-econ-ring {
    opacity: 1;
    transform: scale(1);
    transition-delay: calc(var(--i) * 90ms);
}
.is-visible .tt-econ-ring { transition-delay: calc(var(--i) * 90ms + 100ms); }
.tt-econ-link {
    stroke-dasharray: 4 2;
    stroke-dashoffset: 200;
    opacity: 0;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s var(--ease-out);
}
.is-visible .tt-econ-link {
    stroke-dashoffset: 0;
    opacity: 1;
    transition-delay: calc(0.4s + var(--i) * 80ms);
}
.iso-layer[data-layer="economica"].is-current .tt-econ-ring {
    animation: tt-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes tt-pulse {
    0%, 100% { transform: scale(1); stroke-opacity: 0.3; }
    50% { transform: scale(1.18); stroke-opacity: 0.6; }
}

/* Sanitaria — heat */
.sereno-heat,
.iso-layer[data-layer="sanitaria"] .layer-payload { mix-blend-mode: screen; }
.tt-heat {
    opacity: 0;
    transform-origin: center;
    transform: scale(0.5);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.is-visible .tt-heat {
    opacity: 1;
    transform: scale(1);
    transition-delay: calc(var(--i) * 90ms);
}

/* Mobile responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .territorio-scrolly {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .territorio-stage {
        top: 60px;
        height: 50vh;
        max-height: 420px;
        margin-bottom: 2rem;
    }
    .territorio-steps {
        gap: 25vh;
        padding-top: 10vh;
        padding-bottom: 15vh;
    }
    .territorio-step__title { font-size: 1.8rem; }
    .territorio-step__body { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tt-layer,
    .tt-parcel,
    .tt-veg,
    .tt-corridor,
    .tt-econ-dot,
    .tt-econ-ring,
    .tt-econ-link,
    .tt-heat {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }
}

/* ── Cmd+K Command Palette ────────────────────────────────────────────── */
.cmdk-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 1rem 1rem;
}
.cmdk-overlay[hidden] { display: none; }
.cmdk-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 16, 24, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: background 0.25s var(--ease-out), backdrop-filter 0.25s var(--ease-out);
}
.cmdk-overlay.is-open .cmdk-backdrop {
    background: rgba(6, 16, 24, 0.65);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.cmdk-dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: linear-gradient(165deg, rgba(15, 30, 42, 0.92) 0%, rgba(10, 25, 36, 0.96) 100%);
    border: 1px solid var(--ink-25);
    border-radius: 12px;
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
    transition:
        opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.cmdk-overlay.is-open .cmdk-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.cmdk-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--ink-15);
}
.cmdk-search-icon {
    font-size: 1rem;
    color: var(--mint);
    line-height: 1;
}
.cmdk-input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--cream);
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.4;
    padding: 0;
    font-variation-settings: "SOFT" 30, "opsz" 24;
}
.cmdk-input::placeholder { color: var(--ink-50); }
.cmdk-hint {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: var(--ink-50);
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--ink-25);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.03);
}
.cmdk-list {
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    max-height: 50vh;
    overflow-y: auto;
}
.cmdk-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.7rem 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.cmdk-item.is-active {
    background: rgba(117, 221, 132, 0.10);
}
.cmdk-item__left {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}
.cmdk-item__kind {
    width: 1.4rem;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--ink-50);
    text-align: center;
}
.cmdk-item.is-active .cmdk-item__kind { color: var(--mint); }
.cmdk-item__label {
    font-family: var(--font-display);
    font-size: 0.98rem;
    color: var(--cream);
    font-variation-settings: "SOFT" 30, "opsz" 18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cmdk-item__kind-label {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-50);
    opacity: 0;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}
.cmdk-item.is-active .cmdk-item__kind-label { opacity: 0.8; color: var(--mint); }
.cmdk-empty {
    padding: 1.4rem 1rem;
    text-align: center;
    color: var(--ink-50);
    font-size: 0.85rem;
}
.cmdk-footer {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--ink-15);
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    color: var(--ink-50);
}
.cmdk-foot-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.cmdk-foot-item kbd {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--ink-25);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--cream);
    text-transform: none;
    letter-spacing: 0;
}
body.cmdk-active { overflow: hidden; }
.cmdk-list::-webkit-scrollbar { width: 6px; }
.cmdk-list::-webkit-scrollbar-thumb { background: var(--ink-15); border-radius: 3px; }

/* Optional hint pill que se muestra en footer del site */
.cmdk-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem 0.35rem 0.55rem;
    background: transparent;
    border: 1px solid var(--ink-25);
    border-radius: 4px;
    color: var(--ink-70);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.cmdk-trigger:hover { border-color: var(--mint); color: var(--mint); }
.cmdk-trigger kbd {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--ink-15);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 600px) {
    .cmdk-overlay { padding-top: 6vh; }
    .cmdk-dialog { max-width: 100%; border-radius: 8px; }
}

/* ── /proceso · Studio page ───────────────────────────────────────────── */
.proceso-hero { padding-bottom: 4rem; }
.proceso-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: 2rem;
}
.proceso-text p { font-size: 1.02rem; line-height: 1.7; color: var(--ink-80); margin-bottom: 1.2rem; }
.proceso-text p.lede {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    line-height: 1.4;
    color: var(--cream);
    margin-bottom: 1.5rem;
    font-variation-settings: "SOFT" 40, "opsz" 60;
}
.proceso-aside {
    padding: 1.5rem;
    background: rgba(13, 37, 54, 0.5);
    border: 1px solid var(--ink-15);
    border-radius: 6px;
    align-self: start;
}
.proceso-aside__title {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin: 0 0 1rem;
}
.proceso-aside__title em { color: var(--mint); font-style: italic; }
.proceso-aside__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.proceso-aside__list li {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-70);
    padding-left: 1rem;
    position: relative;
}
.proceso-aside__list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--mint);
}

/* Stack grid */
.stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.stack-card {
    padding: 1.5rem;
    background: rgba(13, 37, 54, 0.5);
    border: 1px solid var(--ink-15);
    border-radius: 6px;
    transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.stack-card:hover { border-color: rgba(117, 221, 132, 0.4); transform: translateY(-2px); }
.stack-card header { margin-bottom: 0.5rem; }
.stack-card__label {
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mint);
}
.stack-card h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--cream);
    margin: 0.4rem 0 0.9rem;
    font-variation-settings: "SOFT" 40, "opsz" 24;
}
.stack-card h3 em { font-style: italic; color: var(--mint); font-variation-settings: "SOFT" 80, "WONK" 1; }
.stack-card p { font-size: 0.92rem; line-height: 1.6; color: var(--ink-80); margin: 0; }
.stack-card code {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: 0.05rem 0.3rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    color: var(--mint);
}

/* Decisions list */
.decisions-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 2rem;
}
.decision {
    display: grid;
    grid-template-columns: 4rem 1fr;
    grid-template-areas:
        "num title"
        "num body";
    column-gap: 1.5rem;
    row-gap: 0.8rem;
    padding: 2rem 0;
    border-top: 1px solid var(--ink-15);
    align-items: start;
}
.decision:first-child { border-top: 0; padding-top: 0; }
.decision__num {
    grid-area: num;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--mint);
    padding-top: 0.6rem;
}
.decision__title {
    grid-area: title;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.25;
    color: var(--cream);
    margin: 0;
    font-variation-settings: "SOFT" 40, "opsz" 36;
    letter-spacing: -0.01em;
}
.decision__title em { font-style: italic; color: var(--mint); font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 36; }
.decision p {
    grid-area: body;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-80);
    margin: 0;
    max-width: 56ch;
}

/* Performance grid */
.perf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.perf-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1.2rem;
    background: rgba(13, 37, 54, 0.5);
    border: 1px solid var(--ink-15);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.perf-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 100%, rgba(117, 221, 132, 0.12) 0%, transparent 60%);
    pointer-events: none;
}
.perf-card__metric {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 5vw, 4rem);
    line-height: 1;
    color: var(--mint);
    font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 144;
    font-style: italic;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}
.perf-card__metric small { font-size: 0.55em; font-style: normal; opacity: 0.7; letter-spacing: 0.04em; }
.perf-card__label {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cream);
    position: relative; z-index: 1;
}
.perf-card__sub {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-50);
    margin-top: 0.3rem;
    letter-spacing: 0.06em;
    position: relative; z-index: 1;
}
.perf-note {
    margin-top: 1.5rem;
    font-size: 0.78rem;
    color: var(--ink-50);
}
.perf-note code {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: 0.1rem 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    color: var(--mint);
}

/* Credits grid */
.credits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.credits__role {
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin: 0 0 0.5rem;
}
.credits__name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--cream);
    margin: 0;
    font-variation-settings: "SOFT" 30, "opsz" 18;
}
.credits__org {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-70);
    margin: 0.2rem 0 0;
}

/* Inline kbd key (visible in §VI shortcut) */
.kbd-key {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--ink-25);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--cream);
    line-height: 1;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

@media (max-width: 800px) {
    .proceso-grid { grid-template-columns: 1fr; }
    .decision { grid-template-columns: 3rem 1fr; gap: 0.8rem; }
}

/* ── §III Lo que hacemos · service-method + method-strip ──────────────── */
.service-method {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--ink-15);
    font-size: 0.78rem;
    line-height: 1.55;
    letter-spacing: 0.02em;
    color: var(--ink-70);
}
.service-method em {
    font-style: italic;
    color: var(--mint);
    font-variation-settings: "SOFT" 80, "WONK" 1;
    letter-spacing: 0;
}
.method-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 3rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--ink-15);
    border-bottom: 1px solid var(--ink-15);
}
.method-strip__item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink-80);
    position: relative;
}
.method-strip__item + .method-strip__item {
    padding-left: 1rem;
    border-left: 1px solid var(--ink-08);
}
.method-strip__num {
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    color: var(--mint);
    text-transform: uppercase;
}
.method-strip__item strong {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--cream);
    font-variation-settings: "SOFT" 50;
    letter-spacing: -0.01em;
}
.method-strip__item span {
    color: var(--ink-70);
    font-size: 0.85rem;
}
@media (max-width: 800px) {
    .method-strip { grid-template-columns: 1fr 1fr; }
    .method-strip__item:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) {
    .method-strip { grid-template-columns: 1fr; }
    .method-strip__item { border-left: 0 !important; padding-left: 0 !important; padding-top: 0.8rem; padding-bottom: 0.8rem; border-top: 1px dashed var(--ink-08); }
    .method-strip__item:first-child { border-top: 0; padding-top: 0; }
}

/* ── §VI Contacto · meta tabular de ubicación ─────────────────────────── */
.contact-location {
    margin-top: 4rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--ink-15);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 3rem;
    align-items: start;
    max-width: 60rem;
}
.contact-location .coords-block { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-70); }
.contact-location .coords-block .row {
    display: grid;
    grid-template-columns: 9rem 1fr;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--ink-08);
}
.contact-location .coords-block .row .k {
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--ink-50);
}
.contact-location .coords-block .row .v { color: var(--cream); }
.contact-location__body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-80);
    margin: 0;
}
@media (max-width: 800px) {
    .contact-location { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── Cookie banner (concesión por defecto · Colombia Ley 1581) ────────── */
.cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 9998;
    max-width: 720px;
    margin: 0 auto;
    background: linear-gradient(165deg, rgba(15, 30, 42, 0.96) 0%, rgba(10, 25, 36, 0.98) 100%);
    border: 1px solid var(--ink-25);
    border-radius: 8px;
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); }
.cookie-banner__body {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 0.9rem 0.85rem 1.1rem;
}
.cookie-banner__text {
    flex: 1;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ink-80);
}
.cookie-banner__more {
    color: var(--mint);
    border-bottom: 1px solid currentColor;
    transition: color 0.2s ease;
}
.cookie-banner__more:hover { color: var(--cream); }
.cookie-banner__btn {
    background: var(--mint);
    color: var(--navy);
    border: 0;
    padding: 0.5rem 0.9rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}
.cookie-banner__btn:hover { background: #6bd07f; transform: translateY(-1px); }
.cookie-banner__close {
    background: transparent;
    border: 0;
    color: var(--ink-50);
    font-size: 1.3rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    transition: color 0.2s ease;
    flex-shrink: 0;
}
.cookie-banner__close:hover { color: var(--cream); }
@media (max-width: 560px) {
    .cookie-banner__body { flex-wrap: wrap; }
    .cookie-banner__text { flex: 1 1 100%; font-size: 0.74rem; }
    .cookie-banner__btn { font-size: 0.7rem; padding: 0.4rem 0.75rem; }
}