/* =============================================================================
   CONSULTING PLANESA — Stylesheet (v2 · WFS-inspired)
   Dark base. Acid-lime accent. Space Grotesk display + Archivo body.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   01 · DESIGN TOKENS
   ---------------------------------------------------------------------------*/
:root {
    /* Palette ----------------------------------------------------------------- */
    --ink: #0B0C0A;
    /* base dark — warm near-black */
    --surface: #141512;
    /* layered dark surface */
    --surface-2: #1A1B17;
    /* slightly lifted surface */
    --bone: #F1EFE7;
    /* warm off-white */
    --bone-2: #D7D5CC;
    /* subdued bone */
    --acid: #D4FF3F;
    /* electric lime accent */
    --acid-deep: #A8CC2F;
    /* acid for light-bg contrast */
    --acid-soft: rgba(212, 255, 63, 0.15);

    --muted: rgba(241, 239, 231, 0.62);
    --muted-strong: rgba(241, 239, 231, 0.82);
    --rule: rgba(241, 239, 231, 0.12);
    --rule-strong: rgba(241, 239, 231, 0.26);
    --rule-ink: rgba(11, 12, 10, 0.14);

    /* Contextual (reassigned per section) */
    --bg: var(--ink);
    --fg: var(--bone);
    --accent: var(--acid);

    /* Typography -------------------------------------------------------------- */
    --ff-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ff-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --ff-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Fluid scale */
    --fs-xs: 0.72rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: clamp(1.05rem, 0.95rem + 0.4vw, 1.22rem);
    --fs-lg: clamp(1.25rem, 1rem + 0.9vw, 1.7rem);
    --fs-xl: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
    --fs-2xl: clamp(2.3rem, 1.7rem + 2.8vw, 3.9rem);
    --fs-3xl: clamp(3.2rem, 2.2rem + 4.8vw, 6.5rem);
    --fs-4xl: clamp(2.4rem, 1.6rem + 3.8vw, 5rem);
    --fs-hero: clamp(4.5rem, 2rem + 14vw, 17rem);

    /* Layout */
    --page-pad-x: clamp(1.25rem, 1rem + 2vw, 3.25rem);
    --max-w: 1520px;
    --header-h: 72px;

    /* Motion */
    --ease: cubic-bezier(0.2, 0.7, 0.15, 1);
    --t-fast: 160ms;
    --t-med: 380ms;
    --t-slow: 700ms;
}


/* -----------------------------------------------------------------------------
   02 · RESET + BASE
   ---------------------------------------------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background: var(--ink);
}

body {
    margin: 0;
    font-family: var(--ff-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

img {
    border: 0;
}

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

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

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

p {
    margin: 0 0 1em;
}

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 0;
}

::selection {
    background: var(--acid);
    color: var(--ink);
}

:focus-visible {
    outline: 2px solid var(--acid);
    outline-offset: 3px;
    border-radius: 0;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--acid);
    color: var(--ink);
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transform: translateY(-200%);
    transition: transform var(--t-fast) var(--ease);
    z-index: 1000;
    border-radius: 0;
}

.skip-link:focus {
    transform: translateY(0);
}


/* -----------------------------------------------------------------------------
   03 · TYPOGRAPHY PRIMITIVES
   ---------------------------------------------------------------------------*/
.display-lg,
.display-xl {
    font-family: var(--ff-display);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.028em;
    margin: 0;
    text-wrap: balance;
}

.display-lg {
    font-size: var(--fs-3xl);
}

.display-xl {
    font-size: var(--fs-4xl);
}

/* <em> in display contexts → acid-green text, NOT italic (Space Grotesk has no italic) */
.display-xl em,
.display-lg em,
.hero__title em,
.firma__name em,
.oficio__head h2 em,
.contacto__head h2 em,
.nombres__head h2 em {
    font-style: normal;
    color: var(--acid);
}

/* Acid "swatch" — solid fill behind key words (WFS signature) ------------- */
.swatch {
    display: inline-block;
    background: var(--acid);
    color: var(--ink);
    padding: 0.02em 0.12em 0.04em;
    line-height: 0.94;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    font-style: normal;
}

/* Uppercase mono eyebrow --------------------------------------------------- */
.eyebrow {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    display: inline-block;
}

.eyebrow--sm {
    font-size: 0.65rem;
    letter-spacing: 0.22em;
}

.lede {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-xl);
    line-height: 1.22;
    letter-spacing: -0.018em;
}

/* Link-with-arrow, underline wipe ----------------------------------------- */
.link-arrow {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-bottom: 2px;
    background-image: linear-gradient(var(--acid), var(--acid));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px;
    transition: color var(--t-fast) var(--ease), background-size var(--t-med) var(--ease);
}

.link-arrow::after {
    content: "→";
    display: inline-block;
    transition: transform var(--t-med) var(--ease);
    font-family: var(--ff-mono);
    color: var(--acid);
}

.link-arrow:hover {
    color: var(--acid);
}

.link-arrow:hover::after {
    transform: translateX(4px);
}


/* -----------------------------------------------------------------------------
   04 · LAYOUT PRIMITIVES
   ---------------------------------------------------------------------------*/
main {
    display: block;
}

section {
    position: relative;
    padding: clamp(4rem, 3rem + 4vw, 8rem) var(--page-pad-x);
}

/* Oversized section header — mono label + hairline rule ------------------- */
.section-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 4.5rem);
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.section-num {
    color: var(--acid);
    letter-spacing: 0.14em;
}

.section-kicker {
    color: var(--bone);
}

.section-rule {
    flex: 1;
    height: 1px;
    background: var(--rule);
}

.section-head--light {
    color: rgba(11, 12, 10, 0.58);
}

.section-head--light .section-num {
    color: var(--acid-deep);
}

.section-head--light .section-kicker {
    color: var(--ink);
}

.section-head--light .section-rule {
    background: var(--rule-ink);
}

/* Section-level background scoping ---------------------------------------- */
.casa {
    --bg: var(--ink);
    --fg: var(--bone);
    background: var(--bg);
    color: var(--fg);
}

.firma {
    --bg: var(--surface);
    --fg: var(--bone);
    background: var(--bg);
    color: var(--fg);
}

.oficio {
    --bg: var(--bone);
    --fg: var(--ink);
    background: var(--bg);
    color: var(--fg);
}

.nombres {
    --bg: var(--ink);
    --fg: var(--bone);
    background: var(--bg);
    color: var(--fg);
}

.contacto {
    --bg: var(--ink);
    --fg: var(--bone);
    background: var(--bg);
    color: var(--fg);
}


/* -----------------------------------------------------------------------------
   05 · HEADER / NAV
   ---------------------------------------------------------------------------*/
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    padding: 0 var(--page-pad-x);
    background: transparent;
    transition: background var(--t-med) var(--ease),
        border-color var(--t-med) var(--ease),
        backdrop-filter var(--t-med) var(--ease);
    border-bottom: 1px solid transparent;
}

.site-header[data-scrolled="true"] {
    background: rgba(11, 12, 10, 0.88);
    border-bottom-color: var(--rule);
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
}

.site-header__inner {
    height: var(--header-h);
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Brand / wordmark -------------------------------------------------------- */
.brand {
    display: inline-block;
    color: var(--bone);
    transition: opacity var(--t-fast) var(--ease);
}

.brand:hover {
    opacity: 0.78;
}

.brand__mark {
    display: block;
    width: clamp(140px, 16vw, 168px);
    height: calc(var(--header-h) - 16px);
}

.brand__mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    /* Logo is black on transparent — invert for the dark header */
    filter: invert(1);
    transition: opacity var(--t-fast) var(--ease);
}

/* Nav --------------------------------------------------------------------- */
.nav {
    display: flex;
    align-items: center;
}

.nav__list {
    display: flex;
    gap: clamp(1rem, 0.4rem + 1.5vw, 2.4rem);
    font-family: var(--ff-mono);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
}

.nav__list a {
    position: relative;
    display: inline-block;
    padding: 0.5rem 0;
    color: var(--bone);
    transition: color var(--t-fast) var(--ease);
}

.nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0.2rem;
    height: 1.5px;
    background: var(--acid);
    transition: right var(--t-med) var(--ease);
}

.nav__list a:hover::after,
.nav__list a:focus-visible::after,
.nav__list a[data-active="true"]::after {
    right: 0;
}

.nav__list a[data-active="true"] {
    color: var(--acid);
}

/* Mobile toggle ----------------------------------------------------------- */
.nav__toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--rule);
    transition: border-color var(--t-fast) var(--ease);
}

.nav__toggle:hover {
    border-color: var(--acid);
}

.nav__toggle-bar {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--bone);
    transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar {
    background: var(--acid);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
    transform: translateY(3.75px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
    transform: translateY(-3.75px) rotate(-45deg);
}


/* -----------------------------------------------------------------------------
   06 · HERO
   ---------------------------------------------------------------------------*/
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--header-h) + clamp(2rem, 2rem + 2vw, 3.5rem));
    padding-bottom: 0;
    color: #ffffff;
    overflow: hidden;
    isolation: isolate;
    background: var(--ink);
    display: flex;
    flex-direction: column;
}

.hero .hero__cta--ghost {
    color: #ffffff;
    border-color: #ffffff;
}
.hero .hero__cta--ghost:hover {
    color: var(--ink);
    background: #ffffff;
}
.hero .hero__roster-label {
    color: #ffffff;
}
.hero .marquee--hero {
    color: #ffffff;
    opacity: 0.85;
}
.hero .marquee--hero .marquee__item {
    color: #ffffff;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.hero__media img,
.hero__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    transform: scale(1.06);
    will-change: transform;
    filter: grayscale(1) contrast(1.08) brightness(0.7);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1200px 600px at 80% 100%, rgba(212, 255, 63, 0.06), transparent 60%),
        linear-gradient(180deg, rgba(11, 12, 10, 0.6) 0%, rgba(11, 12, 10, 0.55) 40%, rgba(11, 12, 10, 0.92) 100%);
}

.hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--page-pad-x);
    flex: 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.hero__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--rule);
}

.hero__meta .eyebrow {
    color: var(--acid);
    letter-spacing: 0.22em;
}

.hero__meta .eyebrow--sm {
    color: var(--muted);
}

.hero__title {
    align-self: end;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-hero);
    line-height: 0.85;
    letter-spacing: -0.04em;
    margin: 0;
    text-wrap: balance;
}

.hero__title--single {
    font-size: clamp(2.6rem, 1.4rem + 5.8vw, 6rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    max-width: min(var(--max-w), 100%);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--page-pad-x);
    text-align: left;
    text-wrap: balance;
}

.hero__title-line {
    display: block;
}

.hero__title-line--accent .swatch {
    padding: 0.015em 0.08em 0.05em;
    margin-left: -0.02em;
}

.hero__lede {
    max-width: 44ch;
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-xl);
    line-height: 1.22;
    letter-spacing: -0.015em;
    color: rgb(241, 239, 231);
    text-wrap: balance;
}

.hero__footer {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    align-items: flex-end;
    justify-content: space-between;
    padding: 1.5rem 0 clamp(3.5rem, 3rem + 3vw, 5rem);
    border-top: 1px solid var(--rule);
    margin-top: clamp(1rem, 1rem + 2vw, 3rem);
}

.hero__footer--cta {
    justify-content: flex-start;
    gap: 1rem;
    max-width: var(--max-w);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 4rem;
    padding: 0 var(--page-pad-x);
    border-top: 0;
}

.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.8rem;
    font-family: var(--ff-mono);
    font-size: 0.82rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink);
    background: var(--acid);
    border: 1px solid var(--acid);
    transition: background var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
}

.hero__cta svg {
    transition: transform var(--t-med) var(--ease);
}

.hero__cta:hover {
    background: transparent;
    color: var(--acid);
}

.hero__cta:hover svg {
    transform: translateX(6px);
}

.hero__cta--ghost {
    color: var(--bone);
    background: transparent;
    border-color: var(--bone);
}

.hero__cta--ghost:hover {
    color: var(--ink);
    background: var(--bone);
}

.hero__cue {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--bone);
    transition: color var(--t-fast) var(--ease);
}

.hero__cue:hover {
    color: var(--acid);
}

.hero__cue svg {
    transition: transform var(--t-med) var(--ease);
}

.hero__cue:hover svg {
    transform: translateY(4px);
}

.hero__stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    margin: 0;
    text-align: right;
}

.hero__stats>div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rule);
    min-width: 80px;
}

.hero__stats dt {
    font-family: var(--ff-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.hero__stats dd {
    margin: 0;
    font-family: var(--ff-display);
    font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bone);
    line-height: 1;
}

.hero__stats>div:nth-child(1) dd {
    color: var(--acid);
}

/* Hero marquee at bottom */
.marquee--hero {
    position: relative;
    padding: 0.35rem 0;
    color: var(--bone-2);
    background: transparent;
    opacity: 0.55;
}

.marquee--hero .marquee__track {
    font-size: clamp(0.78rem, 0.65rem + 0.35vw, 0.95rem);
    font-family: var(--ff-mono);
    font-weight: 400;
    letter-spacing: 0.18em;
    gap: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
    animation-duration: 90s;
}

.hero__roster {
    max-width: var(--max-w);
    width: 100%;
    margin: clamp(0.5rem, 0.25rem + 0.5vw, 0.9rem) auto 0;
    padding: 0 var(--page-pad-x) clamp(1.5rem, 1rem + 1vw, 2.25rem);
    border-top: 1px solid var(--rule);
}

.hero__roster-label {
    margin: 0.55rem 0 0.3rem;
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bone);
    font-weight: 500;
}


/* -----------------------------------------------------------------------------
   07 · MARQUEE (generic)
   ---------------------------------------------------------------------------*/
.marquee {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
    display: inline-flex;
    align-items: center;
    gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.45rem);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    animation: marquee 60s linear infinite;
    will-change: transform;
}

.marquee__track--reverse {
    animation-direction: reverse;
    animation-duration: 75s;
}

.marquee__item {
    padding: 0 0.25rem;
    transition: color var(--t-fast) var(--ease);
}

.marquee__item:hover {
    color: var(--acid);
}

.marquee__sep {
    color: var(--acid);
    font-family: var(--ff-mono);
    font-weight: 500;
    opacity: 0.85;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* -----------------------------------------------------------------------------
   08 · LA CASA / SOBRE LA AGENCIA
   ---------------------------------------------------------------------------*/
.casa__grid {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.casa__intro {
    grid-column: 1 / -1;
}

.casa__body {
    grid-column: 2 / 8;
}

.casa__body p {
    font-size: var(--fs-md);
    line-height: 1.68;
    color: var(--fg);
}

.casa__body p.lede {
    color: var(--bone);
}

.casa__body strong {
    color: var(--acid);
    font-weight: 500;
}

.casa__body em {
    font-style: italic;
    color: inherit;
    opacity: 0.95;
}

.pullquote {
    margin: clamp(2rem, 1rem + 2vw, 3.5rem) 0;
    padding: 1.75rem 0 1.25rem;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.pullquote blockquote {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: var(--bone);
}

.pullquote blockquote em {
    font-style: normal;
    color: var(--acid);
}

.pullquote figcaption {
    margin-top: 1rem;
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.casa__figures {
    grid-column: 9 / -1;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border-left: 1px solid var(--rule);
    padding-left: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

.bignum {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bignum__val {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(3.5rem, 2rem + 6vw, 7.5rem);
    line-height: 0.86;
    letter-spacing: -0.045em;
    color: var(--bone);
}

.bignum__val sup {
    font-size: 0.45em;
    vertical-align: super;
    font-style: normal;
    color: var(--acid);
    letter-spacing: 0;
}

.bignum__lbl {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

/* First big number (33) — full acid */
.casa__figures .bignum:nth-child(1) .bignum__val {
    color: var(--acid);
}

.bignum--aeaf {
    gap: 0.9rem;
}

.bignum__logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: clamp(3.5rem, 2rem + 6vw, 7.5rem);
    object-fit: contain;
    object-position: left center;
}


/* -----------------------------------------------------------------------------
   09 · LA FIRMA / EQUIPO
   ---------------------------------------------------------------------------*/
.firma {
    background: var(--surface);
    position: relative;
}

.firma::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 95% 0%, rgba(212, 255, 63, 0.05), transparent 68%),
        radial-gradient(800px 500px at 0% 100%, rgba(212, 255, 63, 0.03), transparent 70%);
    pointer-events: none;
}

.firma>* {
    position: relative;
    z-index: 1;
}

.casa__firma {
    margin-top: clamp(4rem, 3rem + 3vw, 7rem);
    padding-top: clamp(3rem, 2rem + 2vw, 5rem);
    border-top: 1px solid var(--rule);
}

.firma__title {
    max-width: var(--max-w);
    margin: 0 auto clamp(3rem, 2rem + 3vw, 5rem);
    color: var(--bone);
}

.firma__member {
    max-width: var(--max-w);
    margin: 0 auto;
    padding-bottom: clamp(4rem, 3rem + 3vw, 7rem);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    align-items: start;
}

.firma__member+.firma__member {
    padding-top: clamp(2rem, 1rem + 2vw, 4rem);
    border-top: 1px solid var(--rule);
}

/* Pedro — dominant, portrait left */
.firma__member--pedro .firma__portrait {
    grid-column: 1 / 7;
}

.firma__member--pedro .firma__body {
    grid-column: 8 / 13;
    padding-top: 2rem;
}

/* Mauro — mirrored, slightly smaller */
.firma__member--mauro .firma__body {
    grid-column: 1 / 7;
}

.firma__member--mauro .firma__portrait {
    grid-column: 8 / 12;
    margin-top: 3rem;
}

.firma__portrait {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.firma__portrait img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: grayscale(1) contrast(1.18) brightness(0.96);
    transition: transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
}

.firma__portrait:hover img {
    transform: scale(1.02);
    filter: grayscale(1) contrast(1.25) brightness(1);
}

.firma__caption {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: 0.9rem;
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.firma__caption-num {
    color: var(--acid);
}

.firma__member--mauro .firma__portrait img {
    aspect-ratio: 3 / 4;
}

.firma__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.firma__role {
    color: var(--acid);
    letter-spacing: 0.2em;
}

.firma__name {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2.8rem, 2rem + 3.4vw, 5.8rem);
    line-height: 0.88;
    letter-spacing: -0.038em;
    margin: 0;
    color: var(--bone);
    text-transform: none;
}

.firma__name em {
    font-style: normal;
    color: var(--acid);
}

.firma__lede {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-lg);
    line-height: 1.28;
    letter-spacing: -0.01em;
    max-width: 34ch;
    color: var(--bone);
    margin: 0;
}

.firma__prose p {
    font-size: var(--fs-md);
    line-height: 1.68;
    color: var(--muted-strong);
    max-width: 50ch;
}

.firma__spec {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rule);
    max-width: 38ch;
}

.firma__spec li {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--fs-sm);
    color: var(--bone);
    transition: background var(--t-fast) var(--ease);
}

.firma__spec li:hover {
    background: var(--acid-soft);
}

.firma__spec li span {
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--acid);
    line-height: 1.5;
}

.firma__mail {
    align-self: flex-start;
    font-family: var(--ff-mono);
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
    font-weight: 500;
    word-break: break-word;
}


/* -----------------------------------------------------------------------------
   10 · OFICIO / SERVICIOS (LIGHT SECTION · inverted for reading rhythm)
   ---------------------------------------------------------------------------*/
.oficio {
    color: var(--ink);
    background: var(--bone);
    position: relative;
}

.oficio__head {
    max-width: var(--max-w);
    margin: 0 auto clamp(2.5rem, 2rem + 2vw, 4rem);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
    align-items: end;
}

.oficio__head h2 {
    grid-column: 1 / 9;
    color: var(--ink);
}

.oficio__head h2 em {
    color: var(--acid-deep);
}

.oficio__lede {
    grid-column: 9 / -1;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-lg);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
    opacity: 0.78;
    margin: 0;
}

/* Servicios como grid 3×2 de tarjetas: seis bloques a la vez en lugar de seis filas
   apiladas, reduciendo ~60 % la altura del bloque sin perder jerarquía. Las tarjetas
   comparten borde hairline (grid gap 1px sobre fondo rule-ink) y conservan el
   relleno ink del hover original, aquí deslizado desde abajo por tarjeta. */
.oficio__grid {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule-ink);
    border-block: 1px solid var(--rule-ink);
}

.oficio__card {
    position: relative;
    background: var(--bone);
    padding: clamp(1.4rem, 1rem + 1.1vw, 2rem);
    isolation: isolate;
    overflow: hidden;
    transition: background var(--t-med) var(--ease);
}

.oficio__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: translateY(101%);
    transition: transform var(--t-med) var(--ease);
    z-index: 0;
}

.oficio__card:hover::before,
.oficio__card:focus-within::before {
    transform: translateY(0);
}

.oficio__card > * {
    position: relative;
    z-index: 1;
    transition: color var(--t-med) var(--ease);
}

.oficio__num {
    display: block;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.35rem, 1rem + 0.8vw, 1.8rem);
    color: var(--acid-deep);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 0.9rem;
}

.oficio__card h3 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 0 0 0.55rem;
    color: var(--ink);
    text-wrap: balance;
}

.oficio__card p {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: rgba(11, 12, 10, 0.72);
    margin: 0;
}

.oficio__card:hover .oficio__num,
.oficio__card:focus-within .oficio__num {
    color: var(--acid);
}

.oficio__card:hover h3,
.oficio__card:focus-within h3 {
    color: var(--bone);
}

.oficio__card:hover p,
.oficio__card:focus-within p {
    color: var(--muted-strong);
}


/* -----------------------------------------------------------------------------
   11 · LOS NOMBRES / TRAYECTORIA
   ---------------------------------------------------------------------------*/
.nombres {
    background: var(--ink);
    color: var(--bone);
    position: relative;
    overflow: hidden;
}

.nombres::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 600px at 100% 0%, rgba(212, 255, 63, 0.06), transparent 58%),
        radial-gradient(800px 500px at 0% 100%, rgba(212, 255, 63, 0.04), transparent 70%);
    pointer-events: none;
}

.nombres>* {
    position: relative;
    z-index: 1;
}

.nombres__head {
    max-width: var(--max-w);
    margin: 0 auto clamp(2.5rem, 2rem + 2vw, 4rem);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
    align-items: end;
}

.nombres__head h2 {
    grid-column: 1 / 9;
}

.nombres__lede {
    grid-column: 9 / -1;
    font-size: var(--fs-md);
    line-height: 1.62;
    color: var(--muted);
    max-width: 48ch;
    margin: 0;
}

/* The dense typographic roll — wraps naturally */
.nombres__roll {
    max-width: var(--max-w);
    margin: 0 auto;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2rem, 1.2rem + 3.5vw, 5.25rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--bone);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    text-wrap: balance;
    text-transform: uppercase;
}

.nombres__roll>span {
    display: inline;
    padding: 0 0.05em;
    cursor: default;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.nombres__roll>span+span::before {
    content: " · ";
    color: var(--acid);
    font-family: var(--ff-display);
    font-weight: 400;
    margin: 0 0.08em 0 0;
    opacity: 0.9;
}

.nombres__roll>span em {
    font-style: normal;
    color: var(--acid);
}

.nombres__roll>span:hover {
    background: var(--acid);
    color: var(--ink);
}

.nombres__roll>span:hover em {
    color: var(--ink);
}

.marquee--nombres {
    margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
    padding: 1rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    opacity: 0.85;
}

.marquee--nombres .marquee__track {
    font-size: clamp(1.3rem, 1rem + 1.3vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}


/* -----------------------------------------------------------------------------
   12 · CORRESPONDENCIA / CONTACTO (DARK)
   ---------------------------------------------------------------------------*/
.contacto {
    background: var(--ink);
    color: var(--bone);
}

.contacto__grid {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    align-items: start;
}

.contacto__head {
    grid-column: 1 / 13;
    margin-bottom: clamp(2rem, 1rem + 2vw, 3.5rem);
}

.contacto__head h2 em {
    color: var(--acid);
}

.contacto__lede {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-lg);
    line-height: 1.3;
    letter-spacing: -0.01em;
    max-width: 42ch;
    margin-top: 1rem;
    color: var(--muted-strong);
}

.contacto__address {
    grid-column: 1 / 6;
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border-top: 1px solid var(--rule);
    padding-top: 1.5rem;
}

.contacto__addr {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-lg);
    line-height: 1.35;
    letter-spacing: -0.012em;
    margin: 0;
    color: var(--bone);
}

.contacto__mails {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

.contacto__mails li {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.contacto__mails .link-arrow {
    font-family: var(--ff-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
}

/* Contact form — underline-only, acid focus ------------------------------ */
.contact-form {
    grid-column: 7 / 13;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px solid var(--rule-strong);
    padding-top: 1.5rem;
}

.contact-form__row {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.5rem;
    row-gap: 0.4rem;
    align-items: baseline;
    padding: 0.9rem 1rem 0.75rem;
    background: rgba(241, 239, 231, 0.035);
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.contact-form__row:hover {
    background: rgba(241, 239, 231, 0.06);
    border-color: rgba(241, 239, 231, 0.38);
}

.contact-form__row label {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-strong);
    transition: color var(--t-fast) var(--ease);
}

.contact-form__num {
    color: var(--acid);
}

.contact-form input,
.contact-form textarea {
    font: inherit;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(1.2rem, 0.95rem + 0.8vw, 1.6rem);
    line-height: 1.35;
    letter-spacing: -0.012em;
    color: var(--bone);
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0.2rem 0 0.35rem;
    width: 100%;
    resize: vertical;
    caret-color: var(--acid);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--muted);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
}

.contact-form__row:focus-within {
    background: rgba(212, 255, 63, 0.05);
    border-color: var(--acid);
}

.contact-form__row:focus-within label {
    color: var(--bone);
}

.contact-form__row--msg {
    grid-template-columns: 1fr;
}

.contact-form__row--msg label {
    padding-bottom: 0.25rem;
}

.contact-form__error {
    grid-column: 1 / -1;
    min-height: 1.1em;
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #FF8B5C;
}

.contact-form__submit {
    align-self: flex-start;
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.5rem;
    background: var(--acid);
    color: var(--ink);
    font-family: var(--ff-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 0;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
    background: var(--bone);
    color: var(--ink);
}

.contact-form__submit svg {
    transition: transform var(--t-med) var(--ease);
}

.contact-form__submit:hover svg {
    transform: translateX(5px);
}

.contact-form[data-state="submitting"] .contact-form__submit {
    opacity: 0.55;
    pointer-events: none;
}

.contact-form[data-state="success"] .contact-form__submit {
    display: none;
}

.contact-form__status {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-md);
    line-height: 1.3;
    letter-spacing: -0.012em;
    color: var(--bone);
    margin: 0.5rem 0 0;
    min-height: 1.25em;
    opacity: 0;
    transition: opacity var(--t-med) var(--ease);
}

.contact-form[data-state="success"] .contact-form__status {
    opacity: 1;
}

.contact-form[data-state="success"] .contact-form__status em {
    color: var(--acid);
    font-style: normal;
}

.contact-form[data-state="error"] .contact-form__status {
    opacity: 1;
    color: #FF8B5C;
    font-size: var(--fs-md);
}


/* -----------------------------------------------------------------------------
   13 · FOOTER
   ---------------------------------------------------------------------------*/
.site-footer {
    background: var(--ink);
    color: var(--bone);
    padding: clamp(3rem, 2rem + 3vw, 5rem) var(--page-pad-x) clamp(1.5rem, 1rem + 1vw, 2rem);
    border-top: 1px solid var(--rule);
}

.site-footer__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(2rem, 1rem + 3vw, 5rem);
    align-items: start;
}

.site-footer__logo {
    display: block;
    width: clamp(220px, 28vw, 340px);
    height: clamp(72px, 9vw, 110px);
    margin: 0 0 1.5rem;
}

.site-footer__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    filter: invert(1);
}

.site-footer__tag {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: var(--muted);
    max-width: 50ch;
    margin: 0;
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.site-footer__nav .eyebrow {
    margin-bottom: 1rem;
    color: var(--acid);
}

.site-footer__nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.site-footer__nav a {
    font-family: var(--ff-sans);
    font-size: var(--fs-sm);
    color: var(--bone);
    opacity: 0.82;
    transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.site-footer__nav a:hover {
    color: var(--acid);
    opacity: 1;
}

.site-footer__rule {
    max-width: var(--max-w);
    margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 1.25rem;
    height: 1px;
    background: var(--rule);
}

.site-footer__meta {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: rgba(241, 239, 231, 0.48);
}

.site-footer__meta p {
    margin: 0;
}


/* -----------------------------------------------------------------------------
   14 · SCROLL REVEALS
   ---------------------------------------------------------------------------*/
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 900ms var(--ease), transform 900ms var(--ease);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* -----------------------------------------------------------------------------
   15 · RESPONSIVE
   Mobile-first progressive tightening:
     · 900px — tablet → mobile reflow (nav drawer, stacked grids)
     · 768px — primary mobile target (typography + tap targets)
     · 540px — phones (stack hero CTAs, single-column figures)
     · 380px — iPhone SE / narrow phones (compact paddings + type)
   ---------------------------------------------------------------------------*/
@media (max-width: 900px) {
    :root {
        --header-h: 64px;
    }

    /* Nav → drawer */
    .nav__toggle {
        display: flex;
    }

    .nav__list {
        position: fixed;
        inset: var(--header-h) 0 0 0;
        background: var(--ink);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        padding: 2rem var(--page-pad-x);
        overflow-y: auto;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--t-med) var(--ease),
            opacity var(--t-med) var(--ease),
            visibility var(--t-med) var(--ease);
    }

    .nav__list[data-open="true"] {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav__list li {
        width: 100%;
        border-bottom: 1px solid var(--rule);
    }

    .nav__list a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 1.15rem 0;
        font-size: var(--fs-md);
        letter-spacing: 0.14em;
    }

    .nav__list a::after {
        display: none;
    }

    /* Hero */
    .hero__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .hero__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        text-align: left;
        width: 100%;
    }

    /* Casa */
    .casa__body,
    .casa__figures {
        grid-column: 1 / -1;
        border-left: 0;
        padding-left: 0;
    }

    .casa__figures {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem 2rem;
        border-top: 1px solid var(--rule);
        padding-top: 1.5rem;
    }

    .bignum {
        min-width: 40%;
        flex: 1 1 40%;
    }

    /* Firma */
    .firma__member,
    .firma__member--mauro,
    .firma__member--pedro {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .firma__member--pedro .firma__portrait,
    .firma__member--pedro .firma__body,
    .firma__member--mauro .firma__portrait,
    .firma__member--mauro .firma__body {
        grid-column: auto;
        padding-top: 0;
        margin-top: 0;
    }

    .firma__member--mauro {
        flex-direction: column-reverse;
    }

    /* Oficio */
    .oficio__head {
        display: block;
    }

    .oficio__head h2 {
        margin-bottom: 1.5rem;
    }

    .oficio__lede {
        margin: 0;
    }

    .oficio__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Nombres */
    .nombres__head {
        display: block;
    }

    .nombres__head h2 {
        margin-bottom: 1.5rem;
    }

    /* Contacto */
    .contacto__address,
    .contact-form {
        grid-column: 1 / -1;
    }

    .contact-form {
        padding-top: 0.5rem;
    }

    /* Footer */
    .site-footer__inner {
        grid-template-columns: 1fr;
    }

    .site-footer__nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Primary mobile target — ≤768px */
@media (max-width: 768px) {
    section {
        padding-block: clamp(3rem, 2rem + 4vw, 5rem);
    }

    /* Keep the logo proportionate beside the 44px hamburger */
    .brand__mark {
        width: clamp(120px, 34vw, 160px);
    }

    /* Hero — tighten vertical rhythm and shrink headline */
    .hero {
        padding-top: calc(var(--header-h) + 1.5rem);
    }

    .hero__title--single {
        font-size: clamp(2.2rem, 1.2rem + 6vw, 4rem);
        line-height: 1.05;
    }

    .hero__footer--cta {
        margin-top: 1.5rem;
        margin-bottom: 2.5rem;
        gap: 0.75rem;
    }

    .hero__cta {
        padding: 1rem 1.4rem;
        min-height: 44px;
    }

    /* Firma — tighten large name + hide portrait aspect change */
    .firma__name {
        font-size: clamp(2.4rem, 1.6rem + 4vw, 4rem);
    }

    /* Nombres — keep the roll and marquee legible */
    .nombres__roll {
        font-size: clamp(1.75rem, 1rem + 4vw, 3rem);
        padding: 1.25rem 0;
    }

    .marquee--nombres .marquee__track {
        font-size: clamp(1.1rem, 0.9rem + 1.1vw, 1.7rem);
    }

    /* Contact form — stack label above input */
    .contact-form__row {
        grid-template-columns: 1fr;
        row-gap: 0.5rem;
        padding: 0.85rem 0.9rem 0.7rem;
    }

    .contact-form__row label {
        padding-bottom: 0.2rem;
    }

    /* Footer — give text links a real tap target */
    .site-footer__nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem 1.5rem;
    }

    .site-footer__nav a {
        display: inline-block;
        padding: 0.35rem 0;
        min-height: 32px;
    }
}

/* Compact phones — ≤540px */
@media (max-width: 540px) {
    :root {
        --page-pad-x: clamp(1rem, 0.75rem + 2vw, 1.5rem);
    }

    .hero__meta {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .hero__stats {
        grid-template-columns: 1fr 1fr;
        gap: 1rem 2rem;
    }

    /* Stack hero CTAs full-width */
    .hero__footer--cta {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__cta {
        justify-content: space-between;
        width: 100%;
    }

    /* Bignum → single column for breathing room */
    .casa__figures {
        flex-direction: column;
        gap: 2rem;
    }

    .bignum,
    .bignum--aeaf {
        min-width: 0;
        flex: 1 1 auto;
    }

    .bignum__val {
        font-size: clamp(3rem, 2rem + 6vw, 5rem);
    }

    .bignum__logo {
        height: clamp(3rem, 2.5rem + 4vw, 5rem);
    }

    /* Oficio — single column for narrow phones */
    .oficio__grid {
        grid-template-columns: 1fr;
    }

    .oficio__card {
        padding: 1.25rem 1rem;
    }

    .oficio__num {
        margin-bottom: 0.6rem;
    }

    /* Firma spec — tighter numeral column */
    .firma__spec li {
        grid-template-columns: 2.25rem 1fr;
    }

    /* Contact submit — full width for easy tap */
    .contact-form__submit {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    /* Footer meta — stack cleanly */
    .site-footer__meta {
        flex-direction: column;
        gap: 0.4rem;
    }

    .site-footer__nav {
        grid-template-columns: 1fr 1fr;
    }
}

/* iPhone SE & narrow phones — ≤380px */
@media (max-width: 380px) {
    :root {
        --page-pad-x: 1rem;
    }

    .brand__mark {
        width: clamp(108px, 30vw, 130px);
    }

    /* Hero — keep headline off the edges */
    .hero__title--single {
        font-size: clamp(2rem, 1rem + 5vw, 3rem);
    }

    .hero__cta {
        padding: 0.95rem 1.1rem;
        font-size: 0.75rem;
        letter-spacing: 0.18em;
        gap: 0.75rem;
    }

    .display-xl {
        font-size: clamp(2rem, 1.5rem + 2vw, 2.6rem);
    }

    .bignum__val {
        font-size: clamp(2.75rem, 2rem + 6vw, 4rem);
    }

    .nombres__roll {
        font-size: clamp(1.5rem, 1rem + 3vw, 2.25rem);
        letter-spacing: -0.025em;
    }

    .contact-form__row label {
        gap: 0.5rem;
    }

    /* Footer nav — single column for tightest widths */
    .site-footer__nav {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}


/* -----------------------------------------------------------------------------
   16 · REDUCED MOTION
   ---------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .marquee__track {
        animation: none !important;
        transform: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}


/* =============================================================================
   LEGAL PAGES
   Shared styles for aviso-legal.html, politica-privacidad.html,
   politica-cookies.html. Editorial long-form typography on the dark base.
   ============================================================================= */

.legal {
    background: var(--ink);
    color: var(--bone);
    padding: calc(var(--header-h) + clamp(3rem, 6vw, 6rem)) var(--page-pad-x) clamp(4rem, 8vw, 8rem);
    position: relative;
}

.legal::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top left, rgba(212, 255, 63, 0.035), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(212, 255, 63, 0.025), transparent 60%);
    pointer-events: none;
}

.legal__wrap {
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.legal__head {
    grid-column: 1 / -1;
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
    border-bottom: 1px solid var(--rule);
}

.legal__head .section-head {
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.legal__title {
    font-size: clamp(2.8rem, 2rem + 4vw, 5rem);
    margin: 0 0 1.5rem;
}

.legal__title em {
    color: var(--acid);
    font-style: italic;
}

.legal__updated {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    flex-wrap: wrap;
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--muted-strong);
    letter-spacing: 0.02em;
    margin: 0;
}

.legal__updated .eyebrow {
    color: var(--muted);
    margin: 0;
}

/* ---- Table of contents — sticky left rail on desktop ------------------------ */
.legal__toc {
    position: sticky;
    top: calc(var(--header-h) + 1.25rem);
    padding: 1.5rem 1.5rem 1.75rem;
    border: 1px solid var(--rule);
    background: var(--surface);
    align-self: start;
}

.legal__toc > .eyebrow {
    margin: 0 0 1rem;
    color: var(--muted);
}

.legal__toc ol {
    display: grid;
    gap: 0.55rem;
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: none;
}

.legal__toc li {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    line-height: 1.55;
}

.legal__toc a {
    color: var(--bone-2);
    display: inline-block;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.legal__toc a:hover,
.legal__toc a:focus-visible {
    color: var(--acid);
    border-bottom-color: var(--acid);
    outline: none;
}

/* ---- Long-form content column --------------------------------------------- */
.legal__content {
    max-width: 70ch;
    font-family: var(--ff-sans);
    font-size: var(--fs-md);
    line-height: 1.75;
    color: var(--bone-2);
}

.legal__content > section {
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--rule);
}

.legal__content > section:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.legal__content h2 {
    font-family: var(--ff-display);
    font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--bone);
    margin: 0 0 1.25rem;
    text-wrap: balance;
}

.legal__content h3 {
    font-family: var(--ff-display);
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--bone);
    margin: 1.75rem 0 0.75rem;
}

.legal__content p {
    margin: 0 0 1.15em;
    text-wrap: pretty;
}

.legal__content strong {
    color: var(--bone);
    font-weight: 600;
}

.legal__content em {
    font-style: italic;
    color: var(--bone);
}

.legal__content a {
    color: var(--acid);
    border-bottom: 1px solid rgba(212, 255, 63, 0.35);
    padding-bottom: 1px;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    word-break: break-word;
}

.legal__content a:hover,
.legal__content a:focus-visible {
    border-bottom-color: var(--acid);
    outline: none;
}

.legal__content ul,
.legal__content ol {
    margin: 0 0 1.25em;
    padding-left: 1.5em;
    display: grid;
    gap: 0.5em;
}

.legal__content ul {
    list-style: disc;
}

.legal__content ol {
    list-style: decimal;
}

.legal__content li::marker {
    color: var(--acid);
}

.legal__content li {
    padding-left: 0.15em;
}

.legal__content address {
    font-style: normal;
    font-family: var(--ff-mono);
    font-size: var(--fs-sm);
    line-height: 1.75;
    padding: 1.25rem 1.5rem;
    border-left: 2px solid var(--acid);
    background: var(--surface);
    margin: 1.5rem 0 1.75rem;
}

.legal__content address a {
    word-break: break-all;
}

.legal__content .placeholder {
    font-family: var(--ff-mono);
    font-size: 0.85em;
    color: var(--ink);
    background: var(--acid);
    padding: 0.05em 0.4em;
    letter-spacing: 0.02em;
    font-weight: 500;
    border-radius: 1px;
}

.legal__content p.placeholder {
    display: block;
    font-size: var(--fs-sm);
    padding: 0.9rem 1.1rem;
    margin: 1rem 0 1.25em;
    line-height: 1.6;
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 960px) {
    .legal__wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal__toc {
        position: static;
        order: 0;
    }

    .legal__content {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .legal__toc {
        padding: 1.15rem 1.15rem 1.25rem;
    }

    .legal__content address {
        padding: 1rem 1.1rem;
    }
}


/* -----------------------------------------------------------------------------
   17 · PRINT
   ---------------------------------------------------------------------------*/
@media print {
    :root {
        --bg: #fff;
        --fg: #000;
    }

    body {
        background: #fff;
        color: #000;
    }

    .site-header,
    .nav,
    .marquee,
    .hero__media,
    .hero__overlay,
    .hero__cue,
    .contact-form__submit,
    .site-footer__nav {
        display: none !important;
    }

    .hero {
        min-height: auto;
        padding: 1rem;
    }

    section {
        padding: 1.25rem 1rem;
        break-inside: avoid;
    }

    .casa,
    .firma,
    .nombres,
    .contacto,
    .oficio,
    .legal {
        background: #fff !important;
        color: #000 !important;
    }

    .legal::before {
        display: none !important;
    }

    .legal__toc {
        display: none !important;
    }

    .legal__wrap {
        display: block !important;
    }

    .legal__content,
    .legal__content h2,
    .legal__content h3,
    .legal__content strong,
    .legal__content em {
        color: #000 !important;
    }

    .legal__content address {
        background: #f5f5f0 !important;
        color: #000 !important;
        border-left-color: #000 !important;
    }

    .legal__content .placeholder {
        background: #ffff00 !important;
        color: #000 !important;
    }

    .display-xl,
    .display-lg,
    .hero__title,
    .nombres__roll {
        color: #000 !important;
    }

    .display-xl em,
    .display-lg em,
    .hero__title em,
    .nombres__roll em,
    .bignum__val,
    .swatch {
        color: #000 !important;
        background: #d4ff3f !important;
        padding: 0 0.1em;
    }

    a {
        color: #000 !important;
        text-decoration: underline;
    }

    .firma__portrait img {
        filter: grayscale(1);
    }
}