/* ══════════════════════════════════════════════════════════════════
   UNIVERSIDAD DOMINICAL · WorldBrain México
   Dirección de arte: "Claustro" — editorial académico impreso.

   Razón de la dirección: el público es un adulto de 30 a 50 años que
   trabaja, que ya fue tanteado por ofertas de titulación dudosas y que
   llega desconfiando. El diseño anterior empujaba en la dirección
   contraria (degradados, escasez, "el movimiento más innovador de
   México"). Aquí la seriedad institucional y la transparencia son el
   argumento visual: retícula de documento, serif de alto contraste,
   secciones numeradas y la letra pequeña puesta en grande.

   Oscuro cálido por defecto (biblioteca de noche); .light-mode pasa a
   papel, siguiendo el mecanismo del resto del sitio.
   ══════════════════════════════════════════════════════════════════ */

/* Propiedades animables: permiten interpolar gradientes y barridos */
@property --ud-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@property --ud-shine {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

/* ══════════════ TOKENS ══════════════ */
:root {
    /* Superficies: espresso cálido, no azul-negro */
    --ud-void: #100D0B;
    --ud-ink: #16120F;
    --ud-surface: #1E1916;
    --ud-raised: #272119;
    --ud-paper: #F7F2E8;

    /* Trazos */
    --ud-rule: rgba(247, 242, 232, 0.11);
    --ud-rule-mid: rgba(247, 242, 232, 0.2);
    --ud-rule-strong: rgba(247, 242, 232, 0.34);

    /* Texto */
    --ud-txt: #F4EFE6;
    --ud-txt-soft: #B7ABA0;
    --ud-txt-dim: #7E736A;

    /* Acentos: latón y granate. Nada de azul de plantilla. */
    --ud-brass: #C9A227;
    --ud-brass-soft: rgba(201, 162, 39, 0.13);
    --ud-brass-deep: #A8851A;
    --ud-claret: #A63A48;
    --ud-sage: #7C9A78;

    /* Tipografía */
    --ud-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
    --ud-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --ud-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

    /* Métrica de documento */
    --ud-max: 1180px;
    --ud-narrow: 720px;
    --ud-gutter: clamp(20px, 5vw, 48px);
    --ud-section: clamp(76px, 11vw, 148px);
    --ud-r: 3px;
    --ud-r-lg: 8px;

    --ud-shadow: 0 44px 90px -36px rgba(0, 0, 0, 0.8);
    --ud-shadow-sm: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
}

.light-mode {
    --ud-void: #F7F2E8;
    --ud-ink: #FDFAF4;
    --ud-surface: #FFFFFF;
    --ud-raised: #FFFFFF;
    --ud-paper: #16120F;

    --ud-rule: rgba(22, 18, 15, 0.12);
    --ud-rule-mid: rgba(22, 18, 15, 0.2);
    --ud-rule-strong: rgba(22, 18, 15, 0.38);

    --ud-txt: #16120F;
    --ud-txt-soft: #574C43;
    --ud-txt-dim: #8A7E73;

    --ud-brass: #8A6A0B;
    --ud-brass-soft: rgba(138, 106, 11, 0.1);
    --ud-brass-deep: #6B520A;
    --ud-claret: #8E2733;
    --ud-sage: #4B6B48;

    --ud-shadow: 0 40px 80px -40px rgba(22, 18, 15, 0.26);
    --ud-shadow-sm: 0 16px 34px -20px rgba(22, 18, 15, 0.2);
}

/* ══════════════ BASE ══════════════ */
main#main-content *,
main#main-content *::before,
main#main-content *::after {
    box-sizing: border-box;
}

body.ud-body {
    background: var(--ud-void);
    color: var(--ud-txt);
    font-family: var(--ud-body);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Grano de papel: quita el aspecto de degradado plano */
body.ud-body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E");
}

.ud-wrap {
    max-width: var(--ud-max);
    margin: 0 auto;
    padding: 0 var(--ud-gutter);
}

.ud-narrow {
    max-width: var(--ud-narrow);
    margin: 0 auto;
    padding: 0 var(--ud-gutter);
}

.ud-section {
    padding: var(--ud-section) 0;
    position: relative;
}

/* Secciones largas: el navegador se salta el layout fuera de pantalla */
.ud-defer {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

.ud-rule-top {
    border-top: 1px solid var(--ud-rule);
}

.ud-body h1,
.ud-body h2,
.ud-body h3 {
    font-family: var(--ud-display);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.ud-body p {
    text-wrap: pretty;
}

/* ── Numeración de sección: lenguaje de documento ── */
.ud-kicker {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    font-family: var(--ud-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ud-brass);
    margin-bottom: 1.4rem;
}

.ud-kicker::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ud-rule);
    transform: translateY(-3px);
}

.ud-num {
    font-variant-numeric: tabular-nums;
    color: var(--ud-txt-dim);
}

.ud-head {
    max-width: 44rem;
    margin-bottom: clamp(38px, 6vw, 74px);
}

.ud-head h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin: 0 0 1.1rem;
}

.ud-head p {
    font-size: 1.07rem;
    color: var(--ud-txt-soft);
    max-width: 40rem;
}

.ud-lead-serif {
    font-family: var(--ud-display);
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    line-height: 1.42;
    color: var(--ud-txt);
}

/* ══════════════ BOTONES ══════════════ */
.ud-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-family: var(--ud-body);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.005em;
    padding: 1.02rem 1.85rem;
    border: 1px solid transparent;
    border-radius: var(--ud-r);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.28s, color 0.28s, border-color 0.28s;
}

.ud-btn-primary {
    background: var(--ud-brass);
    color: #16120F;
}

/* Barrido de luz sobre latón: interpola --ud-shine */
.ud-btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(102deg,
            transparent calc(var(--ud-shine) - 16%),
            rgba(255, 255, 255, 0.6) var(--ud-shine),
            transparent calc(var(--ud-shine) + 16%));
    transition: --ud-shine 0.75s ease;
}

.ud-btn-primary:hover {
    background: var(--ud-brass-deep);
    transform: translateY(-2px);
}

.ud-btn-primary:hover::after {
    --ud-shine: 128%;
}

.ud-btn-ghost {
    background: transparent;
    color: var(--ud-txt);
    border-color: var(--ud-rule-strong);
}

.ud-btn-ghost:hover {
    border-color: var(--ud-brass);
    color: var(--ud-brass);
    transform: translateY(-2px);
}

.ud-btn-block {
    width: 100%;
}

.ud-btn:focus-visible,
.ud-chip:focus-visible,
.ud-opt:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--ud-brass);
    outline-offset: 3px;
}

/* ══════════════ REVELADO ══════════════ */
.ud-rise {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ud-rise.is-in {
    opacity: 1;
    transform: none;
}

/* Donde hay scroll-driven nativo se usa el motor del navegador:
   sincronizado al scroll real y sin JavaScript. */
@supports (animation-timeline: view()) {
    .ud-rise {
        opacity: 1;
        transform: none;
        animation: ud-rise both;
        animation-timeline: view();
        animation-range: entry 0% entry 44%;
    }

    @keyframes ud-rise {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
}

/* ══════════════ HERO ══════════════ */
.ud-hero {
    position: relative;
    padding: clamp(96px, 16vh, 180px) 0 clamp(56px, 8vw, 96px);
    overflow: hidden;
    border-bottom: 1px solid var(--ud-rule);
}

/* Capa 1 de parallax: halo de latón que gira lento */
.ud-hero-glow {
    position: absolute;
    top: -30%;
    left: 50%;
    width: min(1400px, 140vw);
    aspect-ratio: 1;
    translate: -50% 0;
    background: conic-gradient(from var(--ud-angle),
            rgba(201, 162, 39, 0.17),
            rgba(166, 58, 72, 0.11),
            rgba(124, 154, 120, 0.09),
            rgba(201, 162, 39, 0.17));
    filter: blur(130px);
    opacity: 0.8;
    animation: ud-spin 34s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes ud-spin {
    to {
        --ud-angle: 360deg;
    }
}

/* Capa 2: retícula de documento, se desvanece hacia los bordes */
.ud-hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--ud-rule) 1px, transparent 1px),
        linear-gradient(90deg, var(--ud-rule) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: radial-gradient(ellipse 72% 58% at 50% 38%, #000 38%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.ud-hero > .ud-wrap {
    position: relative;
    z-index: 1;
}

.ud-hero-grid {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: clamp(34px, 6vw, 78px);
    align-items: center;
}

.ud-hero h1 {
    font-size: clamp(2.4rem, 6.4vw, 4.6rem);
    margin: 1.2rem 0 1.5rem;
    letter-spacing: -0.028em;
}

.ud-hero h1 em {
    font-style: italic;
    color: var(--ud-brass);
}

/* Revelado por línea: clip-path escalonado, sin JS */
.ud-line {
    display: block;
    overflow: hidden;
}

.ud-line > span {
    display: block;
    animation: ud-line-in 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--i, 0) * 0.11s);
}

@keyframes ud-line-in {
    from {
        transform: translateY(105%) rotate(2deg);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.ud-hero-sub {
    font-size: 1.06rem;
    color: var(--ud-txt-soft);
    max-width: 33rem;
    margin-bottom: 2rem;
}

.ud-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 2rem;
}

/* Aviso de transparencia en el hero: la letra pequeña, en grande */
.ud-hero-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    max-width: 34rem;
    padding: 1.05rem 1.2rem;
    border: 1px solid var(--ud-rule-mid);
    border-left: 2px solid var(--ud-brass);
    border-radius: var(--ud-r);
    background: var(--ud-brass-soft);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ud-txt-soft);
}

.ud-hero-note i {
    color: var(--ud-brass);
    margin-top: 0.25rem;
}

.ud-hero-note a {
    color: var(--ud-brass);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Retrato con marco de placa ── */
.ud-portrait {
    position: relative;
    border: 1px solid var(--ud-rule-mid);
    border-radius: var(--ud-r-lg);
    overflow: hidden;
    box-shadow: var(--ud-shadow);
    background: var(--ud-surface);
}

.ud-portrait img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    filter: grayscale(0.32) contrast(1.06) sepia(0.12);
    transition: filter 0.6s ease, scale 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ud-portrait:hover img {
    filter: grayscale(0) contrast(1) sepia(0);
    scale: 1.03;
}

.ud-portrait figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.5rem 1.3rem 1.1rem;
    background: linear-gradient(to top, rgba(16, 13, 11, 0.94), transparent);
    font-family: var(--ud-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #F4EFE6;
}

/* Sello de años que rompe el marco */
.ud-seal {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    background: var(--ud-brass);
    color: #16120F;
    box-shadow: var(--ud-shadow-sm);
    z-index: 2;
}

.ud-seal b {
    font-family: var(--ud-display);
    font-size: 1.5rem;
    line-height: 1;
    display: block;
}

.ud-seal span {
    font-family: var(--ud-mono);
    font-size: 0.54rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-top: 0.15rem;
}

/* ── Barra de datos del hero ── */
.ud-hero-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: clamp(40px, 6vw, 68px);
    background: var(--ud-rule);
    border: 1px solid var(--ud-rule);
    border-radius: var(--ud-r-lg);
    overflow: hidden;
}

.ud-hero-bar > div {
    background: var(--ud-ink);
    padding: 1.5rem 1.6rem;
}

.ud-hero-bar strong {
    display: block;
    font-family: var(--ud-display);
    font-size: 1.12rem;
    margin-bottom: 0.28rem;
}

.ud-hero-bar span {
    font-family: var(--ud-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ud-txt-dim);
}

/* ══════════════ MARQUEE ══════════════ */
.ud-marquee {
    border-block: 1px solid var(--ud-rule);
    background: var(--ud-ink);
    overflow: hidden;
    padding: 1rem 0;
}

.ud-marquee-track {
    display: flex;
    gap: 3rem;
    white-space: nowrap;
    width: max-content;
    animation: ud-scroll 38s linear infinite;
    font-family: var(--ud-mono);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ud-txt-dim);
}

.ud-marquee-track span {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}

.ud-marquee-track b {
    color: var(--ud-brass);
    font-weight: 400;
}

@keyframes ud-scroll {
    to {
        transform: translateX(-50%);
    }
}

/* ══════════════ PARALLAX ══════════════ */
/* Traslación vertical ligada al scroll. Nativa donde exista
   animation-timeline: scroll(); si no, el JS pone --ud-shift. */
.ud-parallax {
    will-change: transform;
    transform: translate3d(0, var(--ud-shift, 0px), 0);
}

@supports (animation-timeline: scroll()) {
    .ud-parallax {
        animation: ud-drift linear both;
        animation-timeline: scroll(root block);
        transform: none;
    }

    @keyframes ud-drift {
        from {
            transform: translate3d(0, calc(var(--ud-depth, 40) * -1px), 0);
        }

        to {
            transform: translate3d(0, calc(var(--ud-depth, 40) * 1px), 0);
        }
    }
}

/* Banda con imagen fija de fondo: el parallax más legible */
.ud-band {
    position: relative;
    overflow: hidden;
    border-block: 1px solid var(--ud-rule);
    padding: clamp(80px, 12vw, 150px) 0;
}

.ud-band-media {
    position: absolute;
    inset: -18% 0;
    z-index: 0;
    pointer-events: none;
}

.ud-band-media img,
.ud-band-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.75) contrast(1.15) brightness(0.42) sepia(0.2);
}

.ud-band-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            var(--ud-void) 0%,
            rgba(16, 13, 11, 0.62) 42%,
            var(--ud-void) 100%);
}

.light-mode .ud-band-media img,
.light-mode .ud-band-media video {
    filter: grayscale(0.7) contrast(1.05) brightness(1.05) sepia(0.14);
}

.light-mode .ud-band-media::after {
    background: linear-gradient(180deg,
            var(--ud-void) 0%,
            rgba(247, 242, 232, 0.72) 42%,
            var(--ud-void) 100%);
}

.ud-band > .ud-wrap {
    position: relative;
    z-index: 1;
}

/* ══════════════ TARJETAS CON FOCO Y RELIEVE ══════════════ */
/* --mx/--my las escribe el JS con el puntero; si no hay JS el foco
   queda centrado y no pasa nada. */
.ud-card {
    position: relative;
    background: var(--ud-surface);
    border: 1px solid var(--ud-rule-mid);
    border-radius: var(--ud-r-lg);
    padding: clamp(26px, 3.4vw, 38px);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ud-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.45s ease;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
            var(--ud-brass-soft), transparent 62%);
    pointer-events: none;
}

.ud-card:hover::before {
    opacity: 1;
}

.ud-card:hover {
    border-color: var(--ud-rule-strong);
    box-shadow: var(--ud-shadow-sm);
}

.ud-card > * {
    position: relative;
    transform: translateZ(24px);
}

.ud-card-n {
    font-family: var(--ud-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    color: var(--ud-txt-dim);
    display: block;
    margin-bottom: 1.5rem;
}

.ud-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
}

.ud-card p {
    font-size: 0.96rem;
    color: var(--ud-txt-soft);
}

/* ══════════════ REJILLAS ══════════════ */
.ud-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.15rem;
}

.ud-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
}

.ud-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem;
}

/* ══════════════ PROCESO (línea que se dibuja) ══════════════ */
.ud-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    display: grid;
    gap: 0;
}

/* Riel que se llena conforme se hace scroll: scaleY ligado al scroll */
.ud-steps::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: var(--ud-rule);
}

.ud-steps::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(180deg, var(--ud-brass), var(--ud-claret));
    transform-origin: top;
    transform: scaleY(var(--ud-fill, 0));
}

@supports (animation-timeline: view()) {
    .ud-steps::after {
        transform: scaleY(0);
        animation: ud-fill linear both;
        animation-timeline: view();
        animation-range: entry 22% cover 62%;
    }

    @keyframes ud-fill {
        to {
            transform: scaleY(1);
        }
    }
}

.ud-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 1.6rem;
    padding: 1.7rem 0;
    position: relative;
}

.ud-step-dot {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--ud-rule-strong);
    background: var(--ud-void);
    font-family: var(--ud-mono);
    font-size: 0.86rem;
    color: var(--ud-txt-soft);
    position: relative;
    z-index: 1;
    transition: background 0.4s, color 0.4s, border-color 0.4s;
}

.ud-step.is-on .ud-step-dot {
    background: var(--ud-brass);
    border-color: var(--ud-brass);
    color: #16120F;
}

.ud-step h3 {
    font-size: 1.22rem;
    margin-bottom: 0.4rem;
}

.ud-step p {
    color: var(--ud-txt-soft);
    font-size: 0.97rem;
}

.ud-step-meta {
    display: inline-block;
    margin-top: 0.7rem;
    font-family: var(--ud-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ud-brass);
    border: 1px solid var(--ud-brass-soft);
    background: var(--ud-brass-soft);
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
}

/* ══════════════ SELECTOR DE RUTA (interactivo) ══════════════ */
.ud-tool-zone {
    background: var(--ud-ink);
    border-block: 1px solid var(--ud-rule);
}

.ud-tool {
    max-width: 760px;
    margin: 0 auto;
    background: var(--ud-surface);
    border: 1px solid var(--ud-rule-mid);
    border-radius: var(--ud-r-lg);
    box-shadow: var(--ud-shadow);
    overflow: hidden;
}

.ud-tool-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--ud-rule);
    background: var(--ud-ink);
    font-family: var(--ud-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ud-txt-dim);
}

.ud-tool-progress {
    height: 2px;
    background: var(--ud-rule);
    position: relative;
    overflow: hidden;
}

.ud-tool-progress i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: linear-gradient(90deg, var(--ud-brass), var(--ud-claret));
    transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ud-tool-stage {
    padding: clamp(28px, 5vw, 46px);
}

.ud-q {
    font-family: var(--ud-display);
    font-size: clamp(1.32rem, 3vw, 1.85rem);
    font-weight: 500;
    line-height: 1.22;
    margin-bottom: 1.7rem;
}

.ud-opts {
    display: grid;
    gap: 0.65rem;
}

.ud-opt {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    text-align: left;
    padding: 1.05rem 1.2rem;
    background: transparent;
    color: var(--ud-txt);
    border: 1px solid var(--ud-rule-mid);
    border-radius: var(--ud-r);
    font-family: var(--ud-body);
    font-size: 1rem;
    cursor: pointer;
    transition: border-color 0.22s, background 0.22s, transform 0.22s;
}

.ud-opt:hover {
    border-color: var(--ud-brass);
    background: var(--ud-brass-soft);
    transform: translateX(3px);
}

.ud-opt kbd {
    font-family: var(--ud-mono);
    font-size: 0.7rem;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ud-rule-strong);
    border-radius: 3px;
    color: var(--ud-txt-dim);
    flex-shrink: 0;
}

.ud-verdict {
    border: 1px solid var(--ud-rule-mid);
    border-left: 3px solid var(--ud-brass);
    border-radius: var(--ud-r);
    background: var(--ud-ink);
    padding: 1.5rem 1.6rem;
    margin-bottom: 1.5rem;
}

.ud-verdict h3 {
    font-size: 1.35rem;
    margin-bottom: 0.55rem;
}

.ud-verdict p {
    color: var(--ud-txt-soft);
    font-size: 0.98rem;
}

.ud-verdict-list {
    list-style: none;
    padding: 1.2rem 0 0;
    margin: 1.2rem 0 0;
    border-top: 1px dashed var(--ud-rule);
    display: grid;
    gap: 0.6rem;
}

.ud-verdict-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    font-size: 0.93rem;
    color: var(--ud-txt-soft);
}

.ud-verdict-list i {
    color: var(--ud-brass);
    margin-top: 0.28rem;
    font-size: 0.8rem;
}

.ud-tool-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ud-hidden {
    display: none !important;
}

/* ══════════════ DOCUMENTO DE VERIFICACIÓN ══════════════ */
/* La letra pequeña convertida en pieza central: es el argumento de
   confianza de toda la página. */
.ud-doc {
    border: 1px solid var(--ud-rule-mid);
    border-radius: var(--ud-r-lg);
    background: var(--ud-surface);
    overflow: hidden;
    box-shadow: var(--ud-shadow-sm);
}

.ud-doc-head {
    padding: 1.4rem 1.7rem;
    border-bottom: 1px solid var(--ud-rule);
    background: var(--ud-ink);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.ud-doc-head i {
    color: var(--ud-brass);
}

.ud-doc-head strong {
    font-family: var(--ud-mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ud-txt-soft);
}

.ud-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: ud-check;
}

/* Tres columnas: número colgado, término y glosa.
   IMPORTANTE: cada hijo lleva su grid-column explícita. El <li> tiene
   tres elementos de rejilla (el ::before del contador, el <strong> y
   el <span>) y con una plantilla de dos columnas la colocación
   automática mandaba la glosa a la segunda fila DENTRO de la columna
   del número, aplastándola a 42 px. Sin asignación explícita, añadir
   un hijo vuelve a romperlo. */
.ud-checklist li {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 15rem) minmax(0, 1fr);
    gap: 0.3rem 1.5rem;
    align-items: baseline;
    padding: 1.15rem 1.7rem;
    border-bottom: 1px solid var(--ud-rule);
    counter-increment: ud-check;
}

.ud-checklist li:last-child {
    border-bottom: 0;
}

.ud-checklist li::before {
    content: counter(ud-check, decimal-leading-zero);
    grid-column: 1;
    font-family: var(--ud-mono);
    font-size: 0.74rem;
    color: var(--ud-brass);
    /* Cifras tabulares: la columna de números queda alineada */
    font-variant-numeric: tabular-nums;
}

.ud-checklist strong {
    grid-column: 2;
    font-family: var(--ud-display);
    font-size: 1.08rem;
    font-weight: 500;
    /* Equilibra el corte de línea en títulos de dos palabras largas */
    text-wrap: balance;
}

.ud-checklist span {
    grid-column: 3;
    font-size: 0.92rem;
    color: var(--ud-txt-soft);
}

/* Tablet y móvil: el número sigue colgado y el texto se apila en una
   sola columna, con la glosa sangrada bajo su término. */
@media (max-width: 880px) {
    .ud-checklist li {
        grid-template-columns: 2.4rem minmax(0, 1fr);
        gap: 0.28rem 1rem;
    }

    .ud-checklist strong,
    .ud-checklist span {
        grid-column: 2;
    }
}

.ud-doc-foot {
    padding: 1.4rem 1.7rem;
    border-top: 1px solid var(--ud-rule-mid);
    background: var(--ud-brass-soft);
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--ud-txt-soft);
}

.ud-doc-foot strong {
    color: var(--ud-txt);
}

/* ══════════════ CARRERAS ══════════════ */
.ud-career {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

.ud-career-head h3 {
    font-size: 1.55rem;
}

.ud-career-head span {
    font-family: var(--ud-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ud-txt-dim);
    white-space: nowrap;
}

.ud-career ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.ud-career ul li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    font-size: 0.93rem;
    color: var(--ud-txt-soft);
}

.ud-career ul li::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ud-brass);
    transform: translateY(0.62em);
}

/* ══════════════ CIFRAS ══════════════ */
.ud-figures-title {
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    padding-top: var(--ud-section);
    padding-bottom: 2.4rem;
}

.ud-figures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--ud-rule);
    border-block: 1px solid var(--ud-rule);
}

.ud-figure {
    background: var(--ud-void);
    padding: clamp(32px, 5vw, 56px) clamp(20px, 3vw, 34px);
}

.ud-figure b {
    font-family: var(--ud-display);
    font-size: clamp(2.6rem, 6.5vw, 4.2rem);
    font-weight: 500;
    line-height: 1;
    display: block;
    color: var(--ud-brass);
    font-variant-numeric: tabular-nums;
}

.ud-figure strong {
    display: block;
    font-family: var(--ud-display);
    font-size: 1.08rem;
    font-weight: 500;
    margin: 0.9rem 0 0.4rem;
}

.ud-figure p {
    font-size: 0.9rem;
    color: var(--ud-txt-soft);
}

/* ══════════════ TESTIMONIOS ══════════════ */
.ud-quote {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    background: var(--ud-surface);
    border: 1px solid var(--ud-rule-mid);
    border-radius: var(--ud-r-lg);
    padding: clamp(26px, 3.4vw, 38px);
    transition: transform 0.35s, border-color 0.35s;
}

.ud-quote:hover {
    transform: translateY(-4px);
    border-color: var(--ud-rule-strong);
}

.ud-quote blockquote {
    margin: 0;
    font-family: var(--ud-display);
    font-size: 1.16rem;
    line-height: 1.5;
    color: var(--ud-txt);
}

.ud-quote figcaption {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: auto;
    padding-top: 1.2rem;
    border-top: 1px solid var(--ud-rule);
}

.ud-initials {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--ud-mono);
    font-size: 0.76rem;
    background: var(--ud-brass-soft);
    color: var(--ud-brass);
    border: 1px solid var(--ud-rule-mid);
    flex-shrink: 0;
}

.ud-quote figcaption strong {
    display: block;
    font-size: 0.94rem;
}

.ud-quote figcaption span {
    font-size: 0.82rem;
    color: var(--ud-txt-dim);
}

/* ══════════════ FAQ ══════════════ */
.ud-faq details {
    border-bottom: 1px solid var(--ud-rule);
}

.ud-faq details:first-child {
    border-top: 1px solid var(--ud-rule);
}

.ud-faq summary {
    padding: 1.5rem 0;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    list-style: none;
    font-family: var(--ud-display);
    font-size: 1.14rem;
    font-weight: 500;
}

.ud-faq summary::-webkit-details-marker {
    display: none;
}

.ud-faq summary::after {
    content: "+";
    margin-left: auto;
    font-family: var(--ud-mono);
    font-size: 1.2rem;
    color: var(--ud-brass);
    transition: transform 0.35s;
    flex-shrink: 0;
}

.ud-faq details[open] summary::after {
    transform: rotate(45deg);
}

.ud-faq details p {
    padding: 0 0 1.6rem;
    color: var(--ud-txt-soft);
    max-width: 52rem;
    font-size: 0.97rem;
}

/* ══════════════ INSCRIPCIÓN ══════════════ */
.ud-enroll-zone {
    background: var(--ud-ink);
    border-block: 1px solid var(--ud-rule);
}

.ud-enroll {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(30px, 5vw, 64px);
    align-items: start;
}

.ud-includes {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0;
    display: grid;
    gap: 0.85rem;
}

.ud-includes li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: start;
    font-size: 0.96rem;
    color: var(--ud-txt-soft);
}

.ud-includes i {
    color: var(--ud-brass);
    margin-top: 0.28rem;
}

.ud-legal {
    margin-top: 1.8rem;
    font-size: 0.82rem;
    color: var(--ud-txt-dim);
    line-height: 1.6;
}

.ud-form-card {
    background: var(--ud-surface);
    border: 1px solid var(--ud-rule-mid);
    border-radius: var(--ud-r-lg);
    box-shadow: var(--ud-shadow);
    padding: clamp(26px, 4vw, 40px);
}

.ud-form-card h3 {
    font-size: 1.28rem;
    margin-bottom: 1.6rem;
}

.ud-field {
    margin-bottom: 1.15rem;
}

.ud-field label {
    display: block;
    font-family: var(--ud-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ud-txt-dim);
    margin-bottom: 0.5rem;
}

.ud-field input,
.ud-field select {
    width: 100%;
    padding: 0.92rem 1.05rem;
    background: var(--ud-void);
    border: 1px solid var(--ud-rule-mid);
    border-radius: var(--ud-r);
    color: var(--ud-txt);
    font-family: var(--ud-body);
    font-size: 1rem;
    transition: border-color 0.22s;
}

.ud-field input:focus,
.ud-field select:focus {
    outline: none;
    border-color: var(--ud-brass);
}

.ud-field small {
    display: block;
    margin-top: 0.42rem;
    font-size: 0.78rem;
    color: var(--ud-txt-dim);
}

.ud-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    margin: 1.5rem 0;
    font-size: 0.83rem;
    color: var(--ud-txt-soft);
    line-height: 1.5;
}

.ud-check input {
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
    accent-color: var(--ud-brass);
    flex-shrink: 0;
}

.ud-check a {
    color: var(--ud-brass);
    text-decoration: underline;
}

.ud-alt-link {
    display: block;
    text-align: center;
    margin-top: 1.1rem;
    font-size: 0.88rem;
    color: var(--ud-txt-dim);
    text-decoration: underline;
}

.ud-alt-link:hover {
    color: var(--ud-brass);
}

.ud-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ud-step-head h3 {
    margin: 0;
}

.ud-back {
    background: transparent;
    border: 1px solid var(--ud-rule-mid);
    border-radius: var(--ud-r);
    color: var(--ud-txt-soft);
    font-family: var(--ud-mono);
    font-size: 0.72rem;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    transition: all 0.22s;
}

.ud-back:hover {
    border-color: var(--ud-brass);
    color: var(--ud-brass);
}

.ud-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.4rem;
}

.ud-slots .slots-placeholder {
    font-family: var(--ud-mono);
    font-size: 0.86rem;
    color: var(--ud-txt-dim);
}

.ud-slots .course-time-slot {
    font-family: var(--ud-mono);
    font-size: 0.84rem;
    padding: 0.62rem 0.95rem;
    background: var(--ud-void);
    color: var(--ud-txt);
    border: 1px solid var(--ud-rule-mid);
    border-radius: var(--ud-r);
    cursor: pointer;
    transition: all 0.2s;
}

.ud-slots .course-time-slot:hover:not(:disabled) {
    border-color: var(--ud-brass);
    color: var(--ud-brass);
}

.ud-slots .course-time-slot.selected {
    background: var(--ud-brass);
    border-color: var(--ud-brass);
    color: #16120F;
    font-weight: 700;
}

.ud-slots .course-time-slot:disabled,
.ud-slots .course-time-slot.booked {
    opacity: 0.34;
    cursor: not-allowed;
    text-decoration: line-through;
}

.ud-success {
    text-align: center;
}

.ud-success-mark {
    width: 62px;
    height: 62px;
    margin: 0 auto 1.3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    background: var(--ud-brass);
    color: #16120F;
}

/* ══════════════ CIERRE ══════════════ */
.ud-close {
    text-align: center;
    padding: var(--ud-section) 0;
    border-top: 1px solid var(--ud-rule);
}

.ud-close h2 {
    font-size: clamp(2.1rem, 5.6vw, 3.7rem);
    margin-bottom: 1.2rem;
}

.ud-close p {
    max-width: 36rem;
    margin: 0 auto 2.2rem;
    color: var(--ud-txt-soft);
    font-size: 1.05rem;
}

.ud-close-ctas {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ══════════════ FOOTER ══════════════ */
/* Propio: el compartido usa índigo y violeta sobre morado y arrastra
   métricas de otros cursos. No se carga footer-modern en esta página. */
.ud-footer {
    position: relative;
    background: var(--ud-ink);
    border-top: 1px solid var(--ud-rule-mid);
    padding-top: clamp(56px, 8vw, 96px);
    overflow: hidden;
}

.ud-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            var(--ud-brass) 24%,
            var(--ud-claret) 52%,
            var(--ud-sage) 76%,
            transparent);
    opacity: 0.6;
}

.ud-footer-mark {
    position: absolute;
    left: 50%;
    bottom: -0.3em;
    translate: -50% 0;
    font-family: var(--ud-display);
    font-weight: 500;
    font-size: clamp(5rem, 19vw, 17rem);
    line-height: 0.8;
    letter-spacing: -0.03em;
    white-space: nowrap;
    color: var(--ud-txt);
    opacity: 0.03;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.ud-footer > .ud-wrap {
    position: relative;
    z-index: 1;
}

.ud-spec {
    border: 1px solid var(--ud-rule-mid);
    border-radius: var(--ud-r-lg);
    background: var(--ud-void);
    overflow: hidden;
    margin-bottom: clamp(44px, 6vw, 72px);
}

.ud-spec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--ud-rule);
    background: var(--ud-surface);
}

.ud-spec-head strong {
    font-family: var(--ud-mono);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ud-txt-soft);
}

.ud-spec-head a {
    font-family: var(--ud-mono);
    font-size: 0.72rem;
    color: var(--ud-brass);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.ud-spec-head a:hover {
    border-bottom-color: var(--ud-brass);
}

.ud-spec-list {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ud-spec-row {
    display: grid;
    grid-template-columns: 8.4rem 1fr;
    gap: 1rem;
    align-items: baseline;
    padding: 1.05rem 1.5rem;
    border-bottom: 1px solid var(--ud-rule);
}

.ud-spec-row:nth-child(odd) {
    border-right: 1px solid var(--ud-rule);
}

.ud-spec-row:nth-last-child(-n+2) {
    border-bottom: 0;
}

.ud-spec-row dt {
    font-family: var(--ud-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ud-txt-dim);
}

.ud-spec-row dd {
    margin: 0;
    font-size: 0.93rem;
    color: var(--ud-txt);
}

.ud-spec-row dd b {
    color: var(--ud-brass);
    font-weight: 600;
}

.ud-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
    gap: clamp(28px, 4vw, 56px);
    padding-bottom: clamp(40px, 5vw, 64px);
}

.ud-footer-logo {
    font-family: var(--ud-display);
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    color: var(--ud-txt);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 0.9rem;
}

.ud-footer-logo span {
    color: var(--ud-brass);
}

.ud-footer-brand p {
    font-size: 0.9rem;
    color: var(--ud-txt-soft);
    max-width: 26rem;
    margin-bottom: 1.5rem;
}

.ud-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ud-socials a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ud-rule-mid);
    border-radius: var(--ud-r);
    color: var(--ud-txt-soft);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.22s;
}

.ud-socials a:hover {
    border-color: var(--ud-brass);
    color: var(--ud-brass);
    transform: translateY(-2px);
}

.ud-footer-col h3 {
    font-family: var(--ud-mono);
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ud-txt-dim);
    margin-bottom: 1.2rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--ud-rule);
}

.ud-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.ud-footer-col ul a {
    font-size: 0.9rem;
    color: var(--ud-txt-soft);
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
    display: inline-block;
}

.ud-footer-col ul a:hover {
    color: var(--ud-brass);
    padding-left: 4px;
}

.ud-footer-col ul a[aria-current="page"] {
    color: var(--ud-brass);
    font-weight: 600;
}

.ud-footer-col ul a[aria-current="page"]::before {
    content: "▸ ";
    opacity: 0.7;
}

.ud-contact {
    display: grid;
    gap: 0.85rem;
}

.ud-contact-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    font-size: 0.9rem;
    color: var(--ud-txt-soft);
}

.ud-contact-item i {
    color: var(--ud-brass);
    font-size: 0.85rem;
    margin-top: 0.28rem;
}

.ud-contact-item a {
    color: var(--ud-txt-soft);
    text-decoration: none;
    transition: color 0.2s;
}

.ud-contact-item a:hover {
    color: var(--ud-brass);
}

.ud-hours {
    margin-top: 1.3rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--ud-rule);
}

.ud-hours dl {
    margin: 0;
    display: grid;
    gap: 0.4rem;
}

.ud-hours div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--ud-mono);
    font-size: 0.73rem;
    color: var(--ud-txt-dim);
}

.ud-hours dd {
    margin: 0;
    color: var(--ud-txt-soft);
    font-variant-numeric: tabular-nums;
}

.ud-footer-legal {
    border-top: 1px solid var(--ud-rule);
    padding: 1.6rem 0 2rem;
    display: grid;
    gap: 0.9rem;
}

.ud-footer-legal p {
    font-size: 0.76rem;
    color: var(--ud-txt-dim);
    line-height: 1.58;
    margin: 0;
}

.ud-footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.3rem;
}

.ud-footer-legal-links a {
    font-family: var(--ud-mono);
    font-size: 0.71rem;
    color: var(--ud-txt-soft);
    text-decoration: none;
    transition: color 0.2s;
}

.ud-footer-legal-links a:hover {
    color: var(--ud-brass);
    text-decoration: underline;
}

/* ══════════════ WHATSAPP FLOTANTE ══════════════ */
.floating-whatsapp {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 95;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: #fff;
    background: #25D366;
    text-decoration: none;
    box-shadow: 0 12px 30px -8px rgba(37, 211, 102, 0.55);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.floating-whatsapp:hover {
    transform: scale(1.08);
}

.floating-whatsapp:focus-visible {
    outline: 2px solid var(--ud-brass);
    outline-offset: 3px;
}

/* ══════════════ BARRA STICKY MÓVIL ══════════════ */
.ud-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    background: rgba(22, 18, 15, 0.95);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--ud-rule-mid);
    transform: translateY(105%);
    transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.light-mode .ud-sticky {
    background: rgba(253, 250, 244, 0.95);
}

.ud-sticky[hidden] {
    display: none !important;
}

.ud-sticky.show {
    transform: none;
}

.ud-sticky strong {
    display: block;
    font-family: var(--ud-display);
    font-size: 0.96rem;
}

.ud-sticky span {
    font-family: var(--ud-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ud-txt-dim);
}

.ud-sticky .ud-btn {
    padding: 0.78rem 1.25rem;
    font-size: 0.87rem;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .floating-whatsapp {
        bottom: 84px;
    }
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 1080px) {
    .ud-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ud-footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ud-footer-brand,
    .ud-footer-contact {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .ud-hero-grid,
    .ud-enroll {
        grid-template-columns: 1fr;
    }

    .ud-grid-3,
    .ud-grid-2 {
        grid-template-columns: 1fr;
    }

    .ud-figures {
        grid-template-columns: 1fr;
    }

    .ud-hero-bar {
        grid-template-columns: 1fr;
    }

    .ud-hero-grid-bg {
        background-size: 56px 56px;
    }

    /* El relieve 3D se desactiva en táctil: no hay puntero que lo guíe */
    .ud-card {
        transform: none !important;
    }
}

@media (max-width: 640px) {
    .ud-grid-4 {
        grid-template-columns: 1fr;
    }

    .ud-spec-list {
        grid-template-columns: 1fr;
    }

    .ud-spec-row:nth-child(odd) {
        border-right: 0;
    }

    .ud-spec-row:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--ud-rule);
    }

    .ud-spec-row:last-child {
        border-bottom: 0;
    }

    .ud-spec-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .ud-footer-grid {
        grid-template-columns: 1fr;
    }

    .ud-footer-mark {
        font-size: 4.2rem;
    }

    .ud-checklist li {
        grid-template-columns: 2rem 1fr;
        padding: 1rem 1.2rem;
    }

    .ud-seal {
        width: 74px;
        height: 74px;
        top: -12px;
        right: -12px;
    }
}

/* ══════════════ MOVIMIENTO REDUCIDO ══════════════ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }

    .ud-line > span {
        transform: none;
        opacity: 1;
    }

    .ud-rise {
        opacity: 1;
        transform: none;
    }

    .ud-parallax {
        transform: none !important;
    }

    .ud-hero-glow,
    .ud-marquee-track {
        animation: none;
    }

    .ud-steps::after {
        transform: scaleY(1);
    }

    .ud-card {
        transform: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   CAPA EDITORIAL

   Por qué existe esta capa: la primera versión caía en el patrón que
   delata una página de plantilla — cada sección era encabezado
   centrado + rejilla de tarjetas idénticas, todo simétrico, con
   iconos de librería en círculos.

   Aquí se rompe eso a propósito:

   · retícula asimétrica con columna de márgenes (marginalia)
   · notas al margen numeradas, como en un texto académico
   · tabla de verdad donde el contenido es una comparación
   · tipografía con cifras antiguas, versalitas y capitular
   · folio y titulillo fijos, como en una página impresa
   · piezas dibujadas para este contenido y solo para este
   · colofón final: la firma de quien compone, no de quien programa
   ══════════════════════════════════════════════════════════════════ */

/* ── Rasgos tipográficos reales ─────────────────────────────── */
.ud-body {
    /* Ligaduras y kerning contextual activos en todo el documento */
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    hanging-punctuation: first last;
}

/* Cifras antiguas en el cuerpo: se integran con la minúscula en vez
   de sobresalir como en una hoja de cálculo. */
.ud-oldstyle {
    font-variant-numeric: oldstyle-nums proportional-nums;
}

/* Versalitas verdaderas si la fuente las trae; si no, degrada a
   mayúsculas con tracking, no a un `text-transform` a secas. */
.ud-sc {
    font-variant-caps: all-small-caps;
    letter-spacing: 0.06em;
}

@supports not (font-variant-caps: all-small-caps) {
    .ud-sc {
        text-transform: uppercase;
        font-size: 0.86em;
        letter-spacing: 0.1em;
    }
}

/* Capitular: solo en el primer párrafo de un cuerpo de texto. */
.ud-dropcap::first-letter {
    float: left;
    font-family: var(--ud-display);
    font-weight: 400;
    font-size: 4.1em;
    line-height: 0.82;
    padding: 0.06em 0.09em 0 0;
    color: var(--ud-brass);
}

/* La primera línea en versalitas: recurso de libro, no de web. */
.ud-dropcap::first-line {
    font-variant-caps: all-small-caps;
    letter-spacing: 0.045em;
}

/* ══════════════ FOLIO Y TITULILLO ══════════════ */
/* Titulillo vertical fijo en el canto, como el encabezado de página
   de un libro. Se oculta en pantallas estrechas: ahí estorba. */
.ud-folio {
    position: fixed;
    left: 14px;
    top: 50%;
    translate: 0 -50%;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 1rem;
    writing-mode: vertical-rl;
    font-family: var(--ud-mono);
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ud-txt-dim);
    pointer-events: none;
    mix-blend-mode: difference;
}

.ud-folio b {
    font-weight: 500;
    color: var(--ud-brass);
    font-variant-numeric: tabular-nums;
}

.ud-folio::after {
    content: "";
    width: 1px;
    height: 74px;
    background: var(--ud-rule-mid);
}

@media (max-width: 1340px) {
    .ud-folio {
        display: none;
    }
}

/* ══════════════ RETÍCULA ASIMÉTRICA CON MARGEN ══════════════ */
/* Dos columnas desiguales: texto y margen para notas. Es la
   estructura de un texto académico, no de una landing. */
.ud-spread {
    display: grid;
    grid-template-columns: minmax(0, 34rem) minmax(0, 15rem);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

/* Variante volcada a la derecha: rompe la simetría entre secciones
   consecutivas para que el ritmo no sea previsible. */
.ud-spread-flip {
    grid-template-columns: minmax(0, 15rem) minmax(0, 34rem);
}

.ud-spread-flip > .ud-margin {
    order: -1;
}

.ud-margin {
    position: relative;
    padding-top: 0.45rem;
}

/* ── Notas al margen ── */
.ud-note {
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--ud-txt-soft);
    padding-left: 1rem;
    border-left: 1px solid var(--ud-rule-mid);
    margin-bottom: 1.6rem;
}

.ud-note b {
    display: block;
    font-family: var(--ud-mono);
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ud-brass);
    margin-bottom: 0.4rem;
}

/* Llamada de nota en el cuerpo: superíndice, no un icono */
.ud-ref {
    font-family: var(--ud-mono);
    font-size: 0.62em;
    vertical-align: super;
    line-height: 0;
    color: var(--ud-brass);
    text-decoration: none;
    padding: 0 0.1em;
}

.ud-ref:hover,
.ud-ref:focus-visible {
    text-decoration: underline;
}

/* En estrecho el margen deja de ser columna y las notas pasan a
   quedar bajo el texto, con su sangría intacta. */
@media (max-width: 940px) {
    .ud-spread,
    .ud-spread-flip {
        grid-template-columns: 1fr;
    }

    .ud-spread-flip > .ud-margin {
        order: 0;
    }

    .ud-margin {
        padding-top: 0;
    }
}

/* Medida de lectura larga */
.ud-prose {
    max-width: 34rem;
}

.ud-prose p {
    font-size: 1.04rem;
    margin-bottom: 1.15rem;
    color: var(--ud-txt-soft);
}

.ud-prose p:first-of-type {
    color: var(--ud-txt);
}

.ud-prose strong {
    color: var(--ud-txt);
    font-weight: 600;
}

/* ══════════════ HERO ROTO ══════════════ */
/* El titular desborda su columna y pasa por delante del retrato.
   La imagen sangra hasta el canto derecho de la pantalla. */
.ud-hero-broken {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    gap: 0;
    align-items: end;
}

.ud-mega {
    position: relative;
    z-index: 2;
    font-size: clamp(2.9rem, 10.6vw, 8.8rem);
    line-height: 0.92;
    letter-spacing: -0.038em;
    margin: 1rem 0 0;
    /* Base segura. El desborde intencionado hacia la columna del
       retrato se aplica más abajo con una consulta de contenedor: con
       100vw la barra de scroll de escritorio provocaba scroll
       horizontal. */
    width: 100%;
}

.ud-mega em {
    font-style: italic;
    color: var(--ud-brass);
}

/* Sangrado óptico: la comilla y la mayúscula inicial se alinean con
   el resto del texto, no con su caja. */
.ud-optical {
    margin-left: -0.055em;
}

.ud-hero-figure {
    position: relative;
    z-index: 1;
    margin: 0;
    /* Sangra al canto derecho rompiendo el contenedor */
    margin-right: calc(var(--ud-gutter) * -1);
    align-self: start;
    padding-top: 2.4rem;
}

.ud-hero-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    /* Duotono cálido: no es una foto de stock a color plano */
    filter: grayscale(1) contrast(1.14) brightness(0.82) sepia(0.42) saturate(1.5);
    mix-blend-mode: luminosity;
}

.light-mode .ud-hero-figure img {
    filter: grayscale(1) contrast(1.05) brightness(1.06) sepia(0.3);
    mix-blend-mode: multiply;
}

.ud-hero-figure figcaption {
    margin-top: 0.8rem;
    font-family: var(--ud-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ud-txt-dim);
    max-width: 22ch;
}

@media (max-width: 940px) {
    .ud-hero-broken {
        grid-template-columns: 1fr;
    }

    .ud-mega {
        width: 100%;
    }

    .ud-hero-figure {
        margin-right: 0;
        padding-top: 2rem;
        max-width: 22rem;
    }
}

/* ══════════════ ÍNDICE ══════════════ */
/* Sumario de prospecto: filas con puntos de guía y folio, como el
   índice de un documento impreso. */
.ud-toc {
    border-top: 1px solid var(--ud-rule-mid);
}

.ud-toc a {
    display: grid;
    grid-template-columns: 2.6rem 1fr auto;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.92rem 0;
    border-bottom: 1px solid var(--ud-rule);
    text-decoration: none;
    color: var(--ud-txt-soft);
    transition: color 0.25s, padding-left 0.25s;
}

.ud-toc a:hover {
    color: var(--ud-brass);
    padding-left: 0.4rem;
}

.ud-toc-n {
    font-family: var(--ud-mono);
    font-size: 0.68rem;
    color: var(--ud-txt-dim);
}

.ud-toc-t {
    font-family: var(--ud-display);
    font-size: 1.06rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

/* Puntos de guía dibujados con un degradado repetido, no con
   caracteres: así no los lee el lector de pantalla. */
.ud-toc-t::after {
    content: "";
    position: absolute;
    bottom: 0.34em;
    left: calc(100% + 0.5rem);
    width: 60vw;
    height: 1px;
    background-image: radial-gradient(circle, var(--ud-rule-strong) 0.5px, transparent 0.5px);
    background-size: 5px 1px;
    background-repeat: repeat-x;
}

.ud-toc-f {
    font-family: var(--ud-mono);
    font-size: 0.7rem;
    color: var(--ud-txt-dim);
    font-variant-numeric: tabular-nums;
}

/* ══════════════ 52 DOMINGOS ══════════════ */
/* La premisa entera del programa es que solo dispone del domingo.
   Aquí el año se dibuja como 52 marcas: las gastadas y las que
   quedan. Es un dato verificable, no un disparador de urgencia. */
.ud-year-zone {
    border-block: 1px solid var(--ud-rule);
    background: var(--ud-ink);
    padding: clamp(60px, 9vw, 110px) 0;
}

.ud-year {
    display: grid;
    grid-template-columns: repeat(26, 1fr);
    gap: clamp(4px, 0.8vw, 9px);
    margin: 2.4rem 0 1.6rem;
}

.ud-sunday {
    aspect-ratio: 1;
    border: 1px solid var(--ud-rule-mid);
    border-radius: 1px;
    position: relative;
    transition: background 0.5s ease, border-color 0.5s ease, transform 0.35s ease;
    transition-delay: calc(var(--k, 0) * 6ms);
}

/* Domingo ya transcurrido: tachado con una diagonal, como en un
   calendario de pared. */
.ud-sunday.is-spent {
    border-color: var(--ud-rule);
    background:
        linear-gradient(to top right,
            transparent calc(50% - 0.5px),
            var(--ud-rule-strong) 50%,
            transparent calc(50% + 0.5px));
}

.ud-sunday.is-left {
    background: var(--ud-brass);
    border-color: var(--ud-brass);
}

.ud-sunday.is-next {
    background: var(--ud-claret);
    border-color: var(--ud-claret);
    transform: scale(1.5);
    z-index: 1;
}

.ud-year-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-family: var(--ud-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--ud-txt-dim);
}

.ud-year-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ud-key {
    width: 10px;
    height: 10px;
    border: 1px solid var(--ud-rule-mid);
    border-radius: 1px;
    flex-shrink: 0;
}

.ud-key-left {
    background: var(--ud-brass);
    border-color: var(--ud-brass);
}

.ud-key-next {
    background: var(--ud-claret);
    border-color: var(--ud-claret);
}

.ud-count-big {
    font-family: var(--ud-display);
    font-size: clamp(3.4rem, 12vw, 9rem);
    line-height: 0.86;
    letter-spacing: -0.045em;
    color: var(--ud-brass);
    font-variant-numeric: lining-nums tabular-nums;
    display: block;
}

@media (max-width: 720px) {
    .ud-year {
        grid-template-columns: repeat(13, 1fr);
    }
}

/* ══════════════ TABLA COMPARATIVA ══════════════ */
/* El contenido es una comparación de dos rutas: eso es una tabla.
   Dos tarjetas lado a lado serían la solución de plantilla. */
.ud-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ud-rule-mid);
    border-radius: var(--ud-r-lg);
}

.ud-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    min-width: 620px;
}

.ud-table caption {
    caption-side: top;
    text-align: left;
    padding: 1.25rem 1.6rem;
    background: var(--ud-surface);
    border-bottom: 1px solid var(--ud-rule-mid);
    font-family: var(--ud-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ud-txt-soft);
}

.ud-table th,
.ud-table td {
    padding: 1.05rem 1.6rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--ud-rule);
}

.ud-table thead th {
    font-family: var(--ud-display);
    font-size: 1.14rem;
    font-weight: 500;
    color: var(--ud-txt);
    border-bottom: 1px solid var(--ud-rule-strong);
    background: var(--ud-ink);
}

.ud-table thead th:first-child {
    font-family: var(--ud-mono);
    font-size: 0.66rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ud-txt-dim);
}

/* La primera columna es cabecera de fila: se marca como tal en el
   HTML con scope="row" y aquí se distingue tipográficamente. */
.ud-table tbody th {
    font-family: var(--ud-mono);
    font-size: 0.68rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--ud-txt-dim);
    width: 12rem;
    background: var(--ud-ink);
}

.ud-table td {
    color: var(--ud-txt-soft);
}

.ud-table tbody tr:last-child th,
.ud-table tbody tr:last-child td {
    border-bottom: 0;
}

.ud-table .ud-yes {
    color: var(--ud-brass);
}

.ud-table .ud-no {
    color: var(--ud-txt-dim);
}

/* ══════════════ DIAGRAMA DE RUTAS ══════════════ */
/* Dibujado para esta página. Los trazos se van pintando conforme se
   hace scroll usando stroke-dashoffset. */
.ud-diagram {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.ud-diagram .ud-path {
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: var(--len, 600);
    stroke-dashoffset: var(--len, 600);
}

@supports (animation-timeline: view()) {
    .ud-diagram .ud-path {
        animation: ud-draw linear both;
        animation-timeline: view();
        animation-range: entry 18% cover 48%;
    }

    @keyframes ud-draw {
        to {
            stroke-dashoffset: 0;
        }
    }
}

.ud-diagram .ud-path.is-drawn {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.ud-diagram text {
    font-family: var(--ud-mono);
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    fill: var(--ud-txt-dim);
}

.ud-diagram .ud-label-strong {
    font-family: var(--ud-display);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    fill: var(--ud-txt);
}

/* ══════════════ CITA A SANGRE ══════════════ */
/* Una sección que es solo una frase, sin tarjeta ni rejilla. Rompe
   el ritmo entre dos bloques densos. */
.ud-statement {
    padding: clamp(80px, 13vw, 170px) 0;
    border-block: 1px solid var(--ud-rule);
}

.ud-statement blockquote {
    margin: 0;
    font-family: var(--ud-display);
    font-weight: 300;
    font-size: clamp(1.75rem, 5.2vw, 4rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    max-width: 30ch;
}

.ud-statement blockquote em {
    font-style: italic;
    color: var(--ud-brass);
}

.ud-statement footer {
    margin-top: 2.2rem;
    font-family: var(--ud-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ud-txt-dim);
}

/* ══════════════ LISTA EDITORIAL ══════════════ */
/* Sustituye a la rejilla de tarjetas: filas con numeración colgada
   en el margen y regla fina, como un articulado. */
.ud-articles {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--ud-rule-mid);
}

.ud-articles > li {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(16px, 3vw, 44px);
    padding: clamp(22px, 3vw, 34px) 0;
    border-bottom: 1px solid var(--ud-rule);
    align-items: baseline;
    transition: background 0.4s ease;
}

.ud-articles > li:hover {
    background: linear-gradient(90deg, var(--ud-brass-soft), transparent 72%);
}

.ud-art-n {
    font-family: var(--ud-mono);
    font-size: 0.72rem;
    color: var(--ud-brass);
    font-variant-numeric: tabular-nums;
    padding-top: 0.3rem;
}

.ud-articles h3 {
    font-size: clamp(1.16rem, 2.3vw, 1.5rem);
    margin: 0;
}

.ud-articles p {
    font-size: 0.95rem;
    color: var(--ud-txt-soft);
    margin: 0;
}

@media (max-width: 780px) {
    .ud-articles > li {
        grid-template-columns: 2.4rem minmax(0, 1fr);
    }

    /* Todos los hijos que no son el número van a la columna 2.
       .ud-ticks se quedaba fuera y caía en la columna de 2.4rem de la
       segunda fila: las viñetas de cada carrera aparecían aplastadas. */
    .ud-articles > li > *:not(.ud-art-n) {
        grid-column: 2;
    }

    .ud-articles p,
    .ud-articles .ud-ticks {
        margin-top: 0.5rem;
    }
}

/* ══════════════ COLOFÓN ══════════════ */
/* La ficha de composición: tipografías, retícula y fecha de
   revisión. Es la firma de quien compone un impreso. */
.ud-colophon {
    border-top: 1px solid var(--ud-rule);
    padding: 2.2rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.6rem;
    font-family: var(--ud-mono);
    font-size: 0.68rem;
    line-height: 1.65;
    color: var(--ud-txt-dim);
}

.ud-colophon dt {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ud-brass);
    margin-bottom: 0.35rem;
}

.ud-colophon dd {
    margin: 0;
    color: var(--ud-txt-soft);
}

/* ══════════════ AJUSTES DE MOVIMIENTO ══════════════ */
@media (prefers-reduced-motion: reduce) {

    .ud-diagram .ud-path {
        stroke-dashoffset: 0 !important;
        animation: none !important;
    }

    .ud-sunday {
        transition-delay: 0s !important;
    }

    .ud-sunday.is-next {
        transform: none;
    }
}

/* ══════════════ MARCAS EN LUGAR DE ICONOS ══════════════
   Los iconos de catálogo dentro del contenido son el rasgo que más
   delata una plantilla. En el cuerpo del documento se usan marcas
   tipográficas y numeración; FontAwesome se reserva para la barra de
   navegación y las redes del pie, donde es convención. */

.ud-verdict-list .ud-verdict-lead {
    grid-template-columns: 1fr;
    font-family: var(--ud-display);
    font-size: 1.02rem;
    color: var(--ud-txt);
}

.ud-verdict-mark {
    font-family: var(--ud-mono);
    font-size: 0.66rem;
    color: var(--ud-brass);
    font-variant-numeric: tabular-nums;
    padding-top: 0.22rem;
}

/* Guion largo colgado, como en una lista de un impreso */
.ud-includes li::before,
.ud-ticks li::before {
    content: "—";
    color: var(--ud-brass);
    font-variant-numeric: tabular-nums;
}

.ud-ticks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.ud-ticks li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    font-size: 0.94rem;
    color: var(--ud-txt-soft);
}

/* Calderón como marca de sección en los encabezados de documento */
.ud-pilcrow {
    color: var(--ud-brass);
    font-family: var(--ud-display);
    padding-right: 0.35rem;
}

/* ══════════════════════════════════════════════════════════════════
   ADAPTACIÓN A DISPOSITIVOS

   Correcciones concretas de una auditoría. Cada bloque documenta el
   síntoma que evita, porque sin eso el siguiente que lea el archivo
   los borra por parecer redundantes.
   ══════════════════════════════════════════════════════════════════ */

/* ── Anclas y navbar fija ──────────────────────────────────────
   Todos los enlaces #ancla de la página aterrizaban con el encabezado
   escondido detrás de la barra de navegación fija. scroll-padding-top
   reserva ese espacio en el propio contenedor de scroll, así que
   funciona igual al pulsar un enlace, al recargar con hash y al
   navegar con el teclado. */
html:has(body.ud-body) {
    scroll-padding-top: clamp(84px, 12vh, 116px);
    /* iOS infla el texto al girar a horizontal si no se fija */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Respaldo para navegadores sin :has() */
@supports not selector(:has(*)) {
    html {
        scroll-padding-top: 100px;
    }
}

/* Cada destino de ancla reserva su propio margen: cubre el caso de
   navegadores que ignoran scroll-padding en anclas internas. */
.ud-body [id]:not(body) {
    scroll-margin-top: clamp(84px, 12vh, 116px);
}

/* ── overflow-x: clip en lugar de hidden ───────────────────────
   `hidden` convierte al body en contenedor de scroll y rompe
   position: sticky de los descendientes. `clip` recorta igual sin
   crear scrollport. */
body.ud-body {
    overflow-x: clip;
}

@supports not (overflow-x: clip) {
    body.ud-body {
        overflow-x: hidden;
    }
}

/* ── Desbordamiento lateral del titular ────────────────────────
   El titular desborda su columna a propósito, pero 100vw incluye el
   ancho de la barra de scroll en escritorio, así que la resta se
   quedaba corta y aparecía scroll horizontal. Se acota al ancho real
   del contenedor con una consulta de contenedor. */
.ud-hero-broken {
    container-type: inline-size;
}

@container (min-width: 0px) {
    .ud-mega {
        width: min(126%, 100cqw);
    }
}

/* Sin container queries el titular se queda en su columna: se
   renuncia al desborde antes que arriesgar scroll lateral. */

/* ── Estados táctiles ──────────────────────────────────────────
   En iOS el :hover se queda pegado después de tocar: la tarjeta
   mantiene el relieve y el foco hasta que se toca otra cosa. Los
   efectos de hover se limitan a punteros que de verdad pueden
   apuntar. */
@media (hover: none) {

    .ud-card:hover,
    .ud-quote:hover,
    .ud-portrait:hover img,
    .ud-articles > li:hover {
        transform: none;
        border-color: var(--ud-rule-mid);
        box-shadow: none;
        background: none;
        filter: none;
    }

    .ud-card:hover::before {
        opacity: 0;
    }

    .ud-btn-primary:hover,
    .ud-btn-ghost:hover {
        transform: none;
    }

    .ud-socials a:hover,
    .ud-footer-col ul a:hover,
    .ud-toc a:hover {
        transform: none;
        padding-left: 0;
    }
}

/* ── Objetivos táctiles ────────────────────────────────────────
   44 px es el mínimo con el que un dedo acierta sin ampliar. Se
   consigue con min-height y centrado, sin engordar el texto. */
@media (pointer: coarse) {

    .ud-back,
    .ud-btn,
    .ud-opt,
    .ud-socials a,
    .ud-footer-legal-links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ud-opt {
        justify-content: flex-start;
    }

    /* Los enlaces del índice y del pie se separan para que no se
       toquen entre ellos al pulsar. */
    .ud-toc a {
        padding-block: 1.05rem;
    }

    .ud-footer-col ul {
        gap: 0.95rem;
    }

    .ud-faq summary,
    .ud-tema-group > summary {
        min-height: 48px;
    }
}

/* Quita el retardo de 300 ms y el destello azul al tocar */
.ud-btn,
.ud-opt,
.ud-back,
.ud-toc a,
.ud-faq summary,
.ud-socials a,
.ud-sticky a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ── Área segura en dispositivos con notch ─────────────────────
   Sin esto la barra de conversión y el botón de WhatsApp quedan por
   debajo del indicador de inicio del iPhone. */
.ud-sticky {
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
    padding-left: max(1.1rem, env(safe-area-inset-left));
    padding-right: max(1.1rem, env(safe-area-inset-right));
}

.floating-whatsapp {
    bottom: max(20px, env(safe-area-inset-bottom));
    right: max(20px, env(safe-area-inset-right));
}

@media (max-width: 900px) {
    .floating-whatsapp {
        bottom: calc(84px + env(safe-area-inset-bottom));
    }

    /* La barra fija tapaba el final del pie. Se reserva su altura. */
    body.ud-body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }
}

/* ── Tabla desplazable ─────────────────────────────────────────
   El contenedor recibe tabindex y role en el HTML para que se pueda
   desplazar con el teclado; aquí se le da el indicio visual de que
   hay más contenido a la derecha y se evita que al llegar al final
   arrastre el scroll de la página. */
.ud-table-wrap {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* Sombra de borde que aparece solo si hay desplazamiento */
    background:
        linear-gradient(to right, var(--ud-surface) 30%, transparent),
        linear-gradient(to left, var(--ud-surface) 30%, transparent) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.35), transparent),
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.35), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
}

.ud-table-wrap:focus-visible {
    outline: 2px solid var(--ud-brass);
    outline-offset: 2px;
}

/* ── Tablet: el hueco entre 720 y 1080 ─────────────────────────
   Antes las composiciones a dos columnas se colapsaban a 940 y las
   rejillas a 1080, así que entre esas medidas quedaban columnas de
   texto demasiado estrechas para leer con comodidad. */
@media (min-width: 721px) and (max-width: 1024px) {

    /* La medida de lectura manda sobre la retícula */
    .ud-spread,
    .ud-spread-flip {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .ud-spread-flip > .ud-margin {
        order: 0;
    }

    /* Las notas al margen pasan a fila de dos columnas: aprovechan el
       ancho disponible sin estrechar el texto.
       Solo cuando el margen contiene ÚNICAMENTE notas. Varios márgenes
       llevan el antetítulo y el h2 de la sección, y ahí dos columnas
       mandaban el título al lado del antetítulo. Si :has() no está
       soportado no se aplica la rejilla y las notas se apilan, que es
       la degradación correcta. */
    .ud-margin:not(:has(h2)) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem;
    }

    .ud-margin:not(:has(h2)) .ud-note {
        margin-bottom: 0;
    }

    .ud-articles > li {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .ud-articles > li > *:not(.ud-art-n) {
        grid-column: 2;
    }

    .ud-articles p,
    .ud-articles .ud-ticks {
        margin-top: 0.6rem;
    }

    .ud-hero-figure {
        max-width: 26rem;
    }
}

/* ── Teléfono estrecho ─────────────────────────────────────────
   Por debajo de 400 px el titular y la capitular dejan de caber con
   holgura. */
@media (max-width: 400px) {
    .ud-mega {
        font-size: clamp(2.35rem, 12vw, 3rem);
        letter-spacing: -0.03em;
    }

    .ud-dropcap::first-letter {
        font-size: 3.2em;
    }

    .ud-count-big {
        font-size: 3rem;
    }

    .ud-statement blockquote {
        font-size: 1.6rem;
    }

    /* La rejilla del año en cuatro filas de 13 */
    .ud-year {
        gap: 3px;
    }

    .ud-seal {
        width: 62px;
        height: 62px;
    }

    .ud-seal b {
        font-size: 1.15rem;
    }
}

/* ── Horizontal en teléfono ────────────────────────────────────
   Con 400 px de alto, el relleno vertical del hero deja el titular
   fuera de pantalla. */
@media (max-height: 460px) and (orientation: landscape) {
    .ud-hero {
        padding-top: 76px;
        padding-bottom: 40px;
    }

    .ud-section {
        padding-block: 48px;
    }

    .ud-sticky {
        display: none;
    }
}

/* ── Impresión ─────────────────────────────────────────────────
   Un prospecto se imprime. Se quitan fondos, barras y decoración, y
   se revelan las URL de los enlaces. */
@media print {

    body.ud-body {
        background: #fff;
        color: #000;
        padding-bottom: 0;
    }

    .nav-pill,
    .nav-mobile-panel,
    .nav-mobile-overlay,
    .ud-sticky,
    .floating-whatsapp,
    .ud-folio,
    .ud-hero-glow,
    .ud-hero-grid-bg,
    .ud-footer-mark,
    .ud-tool,
    .ud-marquee {
        display: none !important;
    }

    .ud-section,
    .ud-statement,
    .ud-year-zone {
        padding-block: 18pt;
        break-inside: avoid;
    }

    .ud-doc,
    .ud-table-wrap,
    figure {
        break-inside: avoid;
    }

    .ud-faq details {
        /* En papel no hay clic: todo abierto */
        display: block;
    }

    .ud-faq details p {
        display: block !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 8pt;
        color: #555;
    }
}

/* ── Contraste forzado (modo alto contraste de Windows) ────────── */
@media (forced-colors: active) {

    .ud-card,
    .ud-doc,
    .ud-tool,
    .ud-form-card,
    .ud-table-wrap {
        border: 1px solid CanvasText;
    }

    .ud-sunday.is-left,
    .ud-sunday.is-next {
        background: Highlight;
    }

    .ud-btn-primary {
        border: 1px solid CanvasText;
    }
}

/* Indicio de deslizamiento en la tabla: solo se anuncia cuando la
   tabla de verdad no cabe. */
.ud-scroll-hint {
    display: none;
    font-family: var(--ud-body);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ud-txt-dim);
}

@media (max-width: 780px) {
    .ud-scroll-hint {
        display: inline;
    }
}