/* =============================================================
   tres reyes casino — hoja de estilos principal
   Escalas: TYPO-08 (tight industrial) · SPACE-03 (tight compressed)
   CONT-02 (compact modular) · BP-01 · GEO-07 (dashed editorial)
   Los nombres de las variables pertenecen a esta compilación.
   ============================================================= */

/* --- Tipografías autoalojadas (carpeta /letterset/) ---------- */
@font-face {
    font-display: swap;
    font-family: "Big Shoulders Display";
    font-style: normal;
    font-weight: 700;
    src: url("/letterset/big-shoulders-display-700.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Big Shoulders Display";
    font-style: normal;
    font-weight: 900;
    src: url("/letterset/big-shoulders-display-900.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Outfit";
    font-style: normal;
    font-weight: 500;
    src: url("/letterset/outfit-500.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Outfit";
    font-style: normal;
    font-weight: 700;
    src: url("/letterset/outfit-700.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Outfit";
    font-style: normal;
    font-weight: 900;
    src: url("/letterset/outfit-900.woff2") format("woff2");
}

/* --- Fichas de diseño ---------------------------------------- */
:root {
    /* color */
    --hr-anchor: #28b87b;
    --hr-flare: #bcb91d;
    --hr-press: #8f8a17;
    --hr-ground: #141412;
    --hr-layer: #1e1e1b;
    --hr-body: #ffffff;
    --hr-quiet: #c1c1c1;
    --hr-hairline: #33332c;
    --hr-line-strong: #4a4a40;
    --hr-gradient-light: #e7df6b;
    --hr-fade-bottom: #dfd82d;
    --hr-notice: #a51d1d;
    /* ritmo vertical (SPACE-03) */
    --hr-step-0: 2px;
    --hr-step-1: 6px;
    --hr-step-2: 10px;
    --hr-step-3: 14px;
    --hr-step-4: 20px;
    --hr-step-5: 28px;
    --hr-step-6: 48px;
    --hr-step-7: 72px;
    --hr-sec-y: 44px;
    /* geometría (GEO-07) */
    --r-step-0: 2px;
    --r-step-1: 4px;
    --r-step-2: 8px;
    --r-step-3: 12px;
    --r-step-4: 16px;
    --r-step-5: 20px;
    --r-step-6: 24px;
    --r-step-7: 32px;
    --hr-stadium: 9999px;
    --hr-round-full: 50%;
    --d-step-2: none;
    --d-step-3: none;
    --d-step-4: 0 8px 24px rgba(0, 0, 0, 0.34);
    --hr-fine: 1px;
    --b-medium: 2px;
    --b-thick: 3px;
    /* tipografía (TYPO-08) */
    --hr-lead: "Big Shoulders Display", "Arial Narrow", sans-serif;
    --hr-text: "Outfit", "Segoe UI", sans-serif;
    --hr-h1: clamp(32px, 4.6vw, 56px);
    --hr-head: clamp(24px, 3.1vw, 38px);
    --hr-display-3: clamp(20px, 2vw, 24px);
    --hr-h4: 18px;
    --hr-h5: 15px;
    --hr-xs-2: 13px;
    --hr-base: 16px;
    --hr-small: 13px;
    --hr-tiny: 11px;
    --hr-dense: 1.08;
    --hr-normal: 1.4;
    --hr-roomy: 1.6;
    --w-base: 500;
    --hr-medium: 700;
    --hr-thick: 900;
    --hr-narrow: -0.02em;
    --hr-even: 0.02em;
    --hr-spread: 0.1em;
    /* movimiento */
    --hr-short: 210ms;
    --hr-mid: 360ms;
    --hr-calm: 551ms;
    --hr-settle: cubic-bezier(0.34, 0.72, 0.38, 0.92);
    --x-even: cubic-bezier(0.4, 0.08, 0.5, 1);
    --hr-pop: cubic-bezier(0.39, 1.4, 0.69, 1);
    /* contenedores (CONT-02) */
    --hr-page: 1080px;
    --hr-prose: 1080px;
    --hr-slim: 670px;
    --hr-inset-desktop: 40px;
    --hr-padding-tablet: 24px;
    --hr-padding-mobile: 16px;
    --hr-edge: 40px;
    --hr-height-desktop: 42px;
    --h-short: 42px;
}

/* --- Ajustes por ancho (desktop-first, BP-01) ----------------- */
@media (max-width: 1080px) {
    :root {
        --hr-edge: 24px;
        --hr-sec-y: 38px;
    }
}

@media (max-width: 760px) {
    :root {
        --hr-edge: 16px;
        --hr-sec-y: 32px;
        --hr-h4: 16px;
        --hr-h5: 14px;
        --hr-xs-2: 12px;
        --hr-base: 15px;
        --hr-small: 12px;
        --hr-tiny: 10px;
    }
}

/* --- Base ----------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

html,
body {
    overflow-x: clip;
}

body {
    background: var(--hr-ground);
    color: var(--hr-body);
    display: flex;
    flex-direction: column;
    font-family: var(--hr-text);
    font-size: var(--hr-base);
    font-weight: var(--w-base);
    line-height: var(--hr-normal);
    margin: 0;
    min-height: 100vh;
}

.hoja {
    display: block;
    flex: 1 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    overflow-wrap: anywhere;
}

h1 {
    font-family: var(--hr-lead);
    font-size: var(--hr-h1);
    font-weight: var(--hr-thick);
    letter-spacing: var(--hr-narrow);
    line-height: var(--hr-dense);
    text-transform: uppercase;
}

h2 {
    font-family: var(--hr-lead);
    font-size: var(--hr-head);
    font-weight: var(--hr-medium);
    letter-spacing: var(--hr-narrow);
    line-height: var(--hr-dense);
    text-transform: uppercase;
}

h3 {
    font-family: var(--hr-lead);
    font-size: var(--hr-display-3);
    font-weight: var(--hr-medium);
    letter-spacing: var(--hr-even);
    line-height: 1.15;
}

h4 {
    font-family: var(--hr-lead);
    font-size: var(--hr-h4);
    font-weight: var(--hr-medium);
    letter-spacing: var(--hr-even);
}

p {
    margin: 0;
}

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

a {
    color: var(--hr-anchor);
    text-decoration: none;
}

strong {
    color: var(--hr-body);
    font-weight: var(--hr-medium);
}

em {
    font-style: italic;
}

table {
    border-collapse: collapse;
}

button,
input,
textarea {
    font: inherit;
}

/* --- Ancho único de todas las secciones ----------------------- */
.a07-shell,
.a26-shell,
.a73-shell,
.c05-shell,
.h50-shell,
.j09-shell,
.l52-shell,
.o80-shell,
.q47-shell,
.r64-shell,
.u36-shell,
.y74-shell {
    margin-inline: auto;
    max-width: calc(var(--hr-page) + 2 * var(--hr-inset-desktop));
    padding-inline: var(--hr-edge);
    width: 100%;
}

/* --- Enlace de salto ------------------------------------------ */
.skip-link {
    background: var(--hr-flare);
    border-radius: var(--r-step-2);
    color: var(--hr-ground);
    font-size: var(--hr-small);
    font-weight: var(--hr-medium);
    inset-inline-start: var(--hr-step-3);
    padding: var(--hr-step-2) var(--hr-step-4);
    position: absolute;
    top: var(--hr-step-3);
    z-index: 200;
}

.skip-link:not(:focus) {
    top: -200px !important;
}

/* --- Aparición de bloques (observer, rise 20px, umbral 0.05) -- */
[data-cue] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--hr-calm) var(--hr-settle), transform var(--hr-calm) var(--hr-settle);
}

[data-cue].is-live {
    opacity: 1;
    transform: translateY(0);
}

.sr-only {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    [data-cue] {
        opacity: 1;
        transform: none;
    }
}

/* =============================================================
   Cabecera — composición HEAD-UTIL
   franja fina de servicio + fila principal (altura 42, estática)
   ============================================================= */
.k50 {
    background: var(--hr-ground);
    border-bottom: var(--hr-fine) solid var(--hr-hairline);
    color: var(--hr-body);
    position: relative;
    transition: box-shadow var(--hr-mid) var(--hr-settle);
    z-index: 60;
}

.k50.is-lifted {
    box-shadow: var(--d-step-4);
}

.k50-utility {
    background: var(--hr-layer);
    border-bottom: var(--hr-fine) solid var(--hr-hairline);
    color: var(--hr-quiet);
}

.k50-utility-part {
    align-items: center;
    display: flex;
    gap: var(--hr-step-3);
    justify-content: space-between;
    margin-inline: auto;
    max-width: calc(var(--hr-page) + 2 * var(--hr-inset-desktop));
    min-height: 32px;
    padding-inline: var(--hr-step-3);
    width: 100%;
}

.k50-geo {
    align-items: center;
    color: var(--hr-body);
    display: inline-flex;
    font-size: var(--hr-tiny);
    font-weight: var(--hr-medium);
    gap: var(--hr-step-1);
    letter-spacing: var(--hr-spread);
    text-transform: uppercase;
}

/* bandera de México dibujada con degradado, sin archivo ni emoji */
.k50-flag {
    background: linear-gradient(90deg, #006847 0 33.34%, #f4f4f0 33.34% 66.67%, #ce1126 66.67% 100%);
    border-radius: var(--r-step-0);
    display: inline-block;
    height: 12px;
    width: 18px;
}

.k50-desk {
    color: var(--hr-quiet);
    font-size: var(--hr-tiny);
    letter-spacing: var(--hr-even);
}

.k50-strip {
    background: var(--hr-ground);
    color: var(--hr-body);
    min-height: 42px;
}

.k50-frame {
    align-items: center;
    display: flex;
    gap: var(--hr-step-3);
    margin-inline: auto;
    max-width: calc(var(--hr-page) + 2 * var(--hr-inset-desktop));
    min-height: 76px;
    padding-inline: var(--hr-step-3);
    position: relative;
    width: 100%;
}

/* marco redondo del logotipo (logoFrame: circle, logoSize: l) */
.k50-crest {
    align-items: center;
    background: #191916;
    border-radius: var(--hr-round-full);
    color: var(--hr-body);
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    order: 1;
    padding: var(--hr-step-1) var(--hr-step-4);
}

.k50-crest-media {
    flex-shrink: 0;
    height: 60px;
    width: auto;
}

.k50-links {
    flex: 0 1 auto;
    margin-inline-start: var(--hr-step-5);
    order: 2;
}

.k50-list {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--hr-step-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.k50-piece {
    align-items: center;
    display: flex;
    position: relative;
}

.k50-piece[hidden] {
    display: none;
}

.k50-piece-extra {
    position: relative;
}

.k50-link {
    color: var(--hr-quiet);
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: var(--hr-even);
    padding: 13px 8px;
    position: relative;
    transition: color var(--hr-short) var(--hr-settle), transform var(--hr-short) var(--hr-settle);
    white-space: nowrap;
}

.k50-link:hover {
    color: var(--hr-body);
    transform: translateY(-2px);
}

.k50-link[aria-current="page"] {
    color: var(--hr-body);
    text-decoration: underline;
    text-decoration-color: var(--hr-flare);
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
}

.k50-more-tap {
    background: transparent;
    border: 0;
    color: var(--hr-quiet);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: var(--hr-even);
    padding: 13px 8px;
    white-space: nowrap;
}

.k50-more-tap:hover {
    color: var(--hr-body);
}

.k50-more-menu {
    background: var(--hr-layer);
    border: var(--hr-fine) solid var(--hr-line-strong);
    border-radius: var(--r-step-3);
    box-shadow: var(--d-step-4);
    color: var(--hr-body);
    display: none;
    inset-block-start: 100%;
    inset-inline-end: 0;
    list-style: none;
    margin: 0;
    max-height: 68vh;
    min-width: 210px;
    overflow-y: auto;
    padding: var(--hr-step-2);
    position: absolute;
    z-index: 70;
}

.k50-more-menu.is-open {
    display: block;
}

.k50-more-menu:not(.is-open) .k50-link {
    pointer-events: none;
}

.k50-more-menu .k50-piece {
    display: block;
}

.k50-more-menu .k50-link {
    display: block;
    padding: 10px var(--hr-step-2);
    white-space: normal;
}

.k50-buttons {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: var(--hr-step-2);
    margin-inline-start: auto;
    order: 3;
}

.k50-act {
    flex-shrink: 0;
    white-space: nowrap;
}

.k50-quiet {
    align-items: center;
    background: var(--hr-layer);
    border: var(--hr-fine) solid var(--hr-line-strong);
    border-radius: var(--hr-stadium);
    color: var(--hr-body);
    display: inline-flex;
    font-family: var(--hr-lead);
    font-size: var(--hr-xs-2);
    font-weight: var(--hr-thick);
    letter-spacing: var(--hr-spread);
    min-height: 44px;
    padding: 0 var(--hr-step-4);
    text-transform: uppercase;
    white-space: nowrap;
}

.k50-quiet:hover {
    background: var(--hr-line-strong);
    color: var(--hr-body);
}

/* botón de menú — burgerStyle: text, burgerFrame: tint */
.k50-menu-tap {
    align-items: center;
    background: var(--hr-layer);
    border: 0;
    border-radius: var(--r-step-2);
    color: var(--hr-body);
    cursor: pointer;
    display: none;
    flex-shrink: 0;
    font-family: var(--hr-lead);
    font-size: var(--hr-xs-2);
    font-weight: var(--hr-thick);
    letter-spacing: var(--hr-spread);
    min-height: 44px;
    order: 4;
    padding: 0 var(--hr-step-3);
    text-transform: uppercase;
    white-space: nowrap;
}

.k50-menu-tap:hover {
    background: var(--hr-line-strong);
    color: var(--hr-body);
}

.k50-dock {
    background: var(--hr-layer);
    border-top: var(--hr-fine) solid var(--hr-hairline);
    color: var(--hr-body);
    display: none;
    max-height: 68vh;
    overflow-y: auto;
}

.k50-dock.is-open {
    display: block;
}

.k50-dock-links {
    display: block;
}

.k50-dock-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: var(--hr-step-2) var(--hr-step-3);
}

.k50-dock-piece {
    display: block;
}

.k50-dock-link {
    border-bottom: var(--hr-fine) solid var(--hr-hairline);
    color: var(--hr-body);
    display: block;
    font-size: var(--hr-h5);
    font-weight: var(--hr-medium);
    letter-spacing: var(--hr-even);
    padding: 13px var(--hr-step-1);
}

.k50-dock-link[aria-current="page"] {
    color: var(--hr-flare);
}

@media (max-width: 899px) {
    .k50-links {
        display: none;
    }

    .k50-menu-tap {
        display: inline-flex;
        margin-inline-start: 0;
        order: 3;
    }

    .k50-buttons {
        margin-inline-start: auto;
        order: 2;
    }

    .k50-frame {
        min-height: 68px;
    }

    .k50-crest-media {
        height: 52px;
    }
}

@media (max-width: 620px) {
    .k50-frame {
        flex-wrap: wrap;
        min-height: 0;
        padding-block: var(--hr-step-2);
    }

    .k50-crest {
        order: 1;
        padding: var(--hr-step-0) var(--hr-step-3);
    }

    .k50-crest-media {
        height: 44px;
    }

    .k50-menu-tap {
        margin-inline-start: auto;
        order: 2;
    }

    .k50-buttons {
        flex-basis: 100%;
        margin-inline-start: 0;
        order: 4;
    }

    .k50-buttons .k50-act,
    .k50-buttons .k50-quiet {
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .k50-desk {
        display: none;
    }
}

/* =============================================================
   Franja 18+ — RG-03: cinta al ancho del contenido
   ============================================================= */
.rg-wrap {
    background: var(--hr-ground);
    color: var(--hr-body);
    padding: var(--hr-step-3) var(--hr-edge);
}

.rg-band {
    background: var(--hr-notice);
    border-radius: var(--r-step-2);
    color: #ffffff;
    display: block;
    font-size: var(--hr-small);
    line-height: var(--hr-normal);
    margin-inline: auto;
    max-width: var(--hr-page);
    padding: var(--hr-step-2) var(--hr-step-4);
    text-align: center;
}

.rg-badge {
    background: #ffffff;
    border-radius: var(--r-step-1);
    color: var(--hr-notice);
    display: inline-flex;
    font-weight: var(--hr-thick);
    margin-inline-end: var(--hr-step-1);
    padding: 0 var(--hr-step-1);
}

.rg-link {
    background: var(--hr-notice);
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rg-say {
    color: #ffffff;
}

@media (max-width: 620px) {
    .rg-say {
        display: none;
    }
}

/* =============================================================
   Migas — BREAD-04: pasos numerados
   ============================================================= */
.v09 {
    display: block;
    padding-block: var(--hr-step-3);
}

.v09-frame {
    margin-inline: auto;
    max-width: calc(var(--hr-page) + 2 * var(--hr-inset-desktop));
    padding-inline: var(--hr-edge);
    width: 100%;
}

.v09-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.v09-piece {
    align-items: center;
    display: flex;
}

.v09-piece + .v09-piece::before {
    color: var(--hr-line-strong);
    content: "—";
    margin-inline: var(--hr-step-2);
}

.v09-step {
    color: var(--hr-flare);
    font-family: var(--hr-lead);
    font-size: var(--hr-xs-2);
    font-weight: var(--hr-thick);
    margin-inline-end: var(--hr-step-0);
}

.v09-link {
    color: var(--hr-quiet);
    font-size: var(--hr-small);
    letter-spacing: var(--hr-spread);
    text-transform: uppercase;
}

.v09-link:hover {
    color: var(--hr-body);
}

.v09-here {
    color: var(--hr-body);
    font-size: var(--hr-small);
    letter-spacing: var(--hr-spread);
    text-transform: uppercase;
}

/* =============================================================
   Pie — FOOT-02: dos filas, marca + navegación
   ============================================================= */
.g61 {
    background: var(--hr-ground);
    border-top: var(--hr-fine) solid var(--hr-hairline);
    color: var(--hr-quiet);
    padding-block: var(--hr-step-5);
}

.g61-frame {
    margin-inline: auto;
    max-width: calc(var(--hr-page) + 2 * var(--hr-inset-desktop));
    padding-inline: var(--hr-edge);
    width: 100%;
}

.g61-strip {
    display: block;
}

.g61-strip-top {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--hr-step-4);
    justify-content: space-between;
}

.g61-crest {
    display: inline-flex;
    flex-shrink: 0;
}

.g61-crest-media {
    height: 56px;
    width: auto;
}

.g61-links {
    display: block;
}

.g61-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hr-step-2) var(--hr-step-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.g61-piece {
    display: block;
}

.g61-link {
    color: var(--hr-quiet);
    font-size: var(--hr-small);
    letter-spacing: var(--hr-even);
    transition: color var(--hr-short) var(--hr-settle);
}

.g61-link:hover {
    color: var(--hr-body);
}

.g61-strip-bottom {
    align-items: center;
    border-top: var(--hr-fine) solid var(--hr-hairline);
    display: flex;
    flex-wrap: wrap;
    gap: var(--hr-step-2) var(--hr-step-4);
    justify-content: space-between;
    margin-block-start: var(--hr-step-4);
    padding-block-start: var(--hr-step-3);
}

.g61-note {
    color: var(--hr-quiet);
    font-size: var(--hr-tiny);
    letter-spacing: var(--hr-even);
}

.g61-legal {
    display: block;
}

.g61-legal-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.g61-legal-piece {
    align-items: center;
    display: flex;
}

.g61-legal-piece + .g61-legal-piece::before {
    color: var(--hr-line-strong);
    content: "·";
    margin-inline: var(--hr-step-2);
}

.g61-legal-link {
    color: var(--hr-quiet);
    font-size: var(--hr-tiny);
    letter-spacing: var(--hr-even);
}

.g61-legal-link:hover {
    color: var(--hr-body);
}

@media (max-width: 760px) {
    .g61-strip-top {
        flex-direction: column;
        text-align: center;
    }

    .g61-list {
        justify-content: center;
    }

    .g61-strip-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* =============================================================
   Cookies — COOK-09: losa anclada a la izquierda
   ============================================================= */
.d25 {
    background: var(--hr-ground);
    border-inline-start: var(--b-thick) solid var(--hr-flare);
    border-radius: 0 var(--r-step-2) var(--r-step-2) 0;
    box-shadow: var(--d-step-4);
    color: var(--hr-body);
    inset-block-end: var(--hr-step-4);
    inset-inline-end: auto;
    inset-inline-start: var(--hr-step-4);
    max-width: min(420px, calc(100vw - 2 * var(--hr-step-4)));
    opacity: 0;
    position: fixed;
    transition: opacity var(--hr-mid) var(--hr-settle), transform var(--hr-mid) var(--x-even);
    z-index: 90;
}

.d25.is-shown {
    opacity: 1;
}

.d25.is-gone {
    transform: translateX(-140vw);
}

.d25.is-off {
    display: none;
}

.d25-frame {
    display: flex;
    flex-direction: column;
    gap: var(--hr-step-2);
    padding: var(--hr-step-4);
}

.d25-notice {
    color: var(--hr-body);
    font-size: var(--hr-small);
    line-height: var(--hr-normal);
}

.d25-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hr-step-2);
    justify-content: flex-start;
}

.d25-grant {
    background: var(--hr-anchor);
    border: 0;
    border-radius: var(--r-step-2);
    color: var(--hr-ground);
    cursor: pointer;
    font-size: var(--hr-small);
    font-weight: var(--hr-medium);
    min-height: 40px;
    padding: 0 var(--hr-step-4);
}

.d25-grant:hover {
    background: var(--hr-gradient-light);
    color: var(--hr-ground);
}

.d25-reject {
    background: var(--hr-layer);
    border: var(--hr-fine) solid var(--hr-line-strong);
    border-radius: var(--r-step-2);
    color: var(--hr-body);
    cursor: pointer;
    font-size: var(--hr-small);
    font-weight: var(--hr-medium);
    min-height: 40px;
    padding: 0 var(--hr-step-4);
}

.d25-reject:hover {
    background: var(--hr-line-strong);
    color: var(--hr-body);
}

@media (max-width: 720px) {
    .d25 {
        inset-inline: var(--hr-step-2);
        max-width: none;
    }

    .d25-frame {
        gap: 8px;
        padding: 12px 14px;
    }

    .d25-notice {
        font-size: 13px;
        line-height: 1.35;
    }

    .d25-grant,
    .d25-reject {
        flex: 1 1 auto;
        font-size: 12px;
        min-height: 36px;
        padding: 0 14px;
    }
}

/* =============================================================
   Primer bloque — HERO-06: imagen inclinada, asimétrica
   ============================================================= */
.a07 {
    background: var(--hr-ground);
    color: var(--hr-body);
    overflow: hidden;
    position: relative;
}

.a07-shell {
    position: relative;
    z-index: 2;
}

.a07-stuff {
    padding-block: var(--hr-step-6);
    width: 48%;
}

.a07-eyebrow {
    color: var(--hr-flare);
    display: block;
    font-size: var(--hr-small);
    font-weight: var(--hr-thick);
    letter-spacing: var(--hr-spread);
    margin-block-end: var(--hr-step-2);
    text-transform: uppercase;
}

.a07-top {
    margin-block-end: var(--hr-step-3);
}

.a07-deck {
    color: var(--hr-quiet);
    font-size: var(--hr-h5);
    line-height: var(--hr-normal);
    max-width: var(--hr-slim);
}

.a07-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hr-step-2);
    margin-block-start: var(--hr-step-4);
}

.a07-fine {
    color: var(--hr-quiet);
    font-size: var(--hr-tiny);
    line-height: var(--hr-normal);
    margin-block-start: var(--hr-step-2);
    max-width: var(--hr-slim);
}

.a07-figure {
    block-size: 100%;
    inline-size: 50%;
    inset-block-start: 0;
    inset-inline-end: 0;
    margin: 0;
    position: absolute;
    transform: rotate(2deg);
    transition: transform var(--hr-calm) var(--hr-settle);
    z-index: 1;
}

.a07-figure:hover {
    transform: rotate(0deg) scale(1.02);
}

.a07-media {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
}

@media (max-width: 1380px) {
    .a07-stuff {
        width: 50%;
    }

    .a07-figure {
        inline-size: 48%;
    }
}

@media (max-width: 1040px) {
    .a07-figure {
        inline-size: 46%;
    }
}

@media (max-width: 760px) {
    .a07 {
        overflow: visible;
    }

    .a07-stuff {
        padding-block: var(--hr-step-5) var(--hr-step-4);
        width: 100%;
    }

    .a07-figure {
        block-size: auto;
        inline-size: 100%;
        inset-block-start: auto;
        margin-block-end: var(--hr-step-4);
        position: static;
        transform: none;
    }

    .a07-media {
        block-size: auto;
        max-height: 38vh;
    }
}

/* =============================================================
   Preguntas — FAQ-10: dos columnas con bloque fijo
   ============================================================= */
.a26 {
    background: var(--hr-ground);
    color: var(--hr-body);
    padding-block: var(--hr-sec-y);
}

.a26-shell {
    align-items: start;
    display: grid;
    gap: var(--hr-step-6);
    grid-template-columns: 38% minmax(0, 1fr);
}

.a26-side {
    align-self: start;
    padding-block: var(--hr-step-2);
    position: sticky;
    top: var(--hr-step-5);
}

.a26-head {
    margin-block-end: var(--hr-step-2);
}

.a26-para {
    color: var(--hr-quiet);
    font-size: var(--hr-small);
    line-height: var(--hr-normal);
}

.a26-list {
    display: flex;
    flex-direction: column;
    gap: var(--hr-step-4);
}

.a26-piece {
    border-bottom: var(--hr-fine) dashed var(--hr-hairline);
    padding-block-end: var(--hr-step-3);
}

.a26-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: var(--hr-step-3);
    justify-content: space-between;
    list-style: none;
    padding-block: var(--hr-step-1);
}

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

.a26-top {
    color: var(--hr-body);
}

.a26-mark {
    border-bottom: var(--b-medium) solid var(--hr-flare);
    border-inline-end: var(--b-medium) solid var(--hr-flare);
    flex-shrink: 0;
    height: 10px;
    transform: rotate(45deg);
    transition: transform var(--hr-mid) var(--x-even);
    width: 10px;
}

.a26-piece[open] .a26-mark {
    transform: rotate(-135deg);
}

.a26-stuff {
    color: var(--hr-quiet);
    font-size: var(--hr-base);
    line-height: var(--hr-roomy);
    padding-block-start: var(--hr-step-2);
}

@media (max-width: 900px) {
    .a26-shell {
        gap: var(--hr-step-4);
        grid-template-columns: minmax(0, 1fr);
    }

    .a26-side {
        position: static;
    }
}

/* =============================================================
   Texto corrido — PROSE-22: sangría de primera línea
   headScale large · headWeight normal · indentStep m · density tight
   ============================================================= */
.a73 {
    background: var(--hr-ground);
    color: var(--hr-body);
    padding-block: var(--hr-sec-y);
}

.a73-head {
    margin-block: var(--hr-step-5) var(--hr-step-2);
}

.a73-shell > .a73-head:first-child {
    margin-block-start: 0;
}

.a73-para {
    color: var(--hr-quiet);
    font-size: var(--hr-base);
    line-height: var(--hr-roomy);
    margin: 0;
}

.a73-para-run {
    text-indent: var(--hr-step-5);
}

.a73-para a {
    color: var(--hr-anchor);
    position: relative;
    text-decoration: none;
    transition: color var(--hr-short) var(--hr-settle);
}

.a73-para a::after {
    border-bottom: var(--b-medium) solid var(--hr-flare);
    content: "";
    inset-block-end: -2px;
    inset-inline: 0;
    position: absolute;
    transform: scaleX(0);
    transition: transform var(--hr-short) var(--hr-settle);
}

.a73-para a:hover {
    color: var(--hr-gradient-light);
}

.a73-para a:hover::after {
    transform: scaleX(1);
}

.a73-list {
    list-style: none;
    margin: var(--hr-step-3) 0;
    padding: 0;
}

.a73-piece {
    color: var(--hr-quiet);
    line-height: var(--hr-roomy);
    padding-inline-start: var(--hr-step-4);
    position: relative;
}

.a73-piece::before {
    color: var(--hr-flare);
    content: "▸";
    inset-inline-start: 0;
    position: absolute;
}

.a73-steps {
    counter-reset: paso;
    list-style: none;
    margin: var(--hr-step-3) 0;
    padding: 0;
}

.a73-step {
    color: var(--hr-quiet);
    counter-increment: paso;
    line-height: var(--hr-roomy);
    padding-inline-start: var(--hr-step-5);
    position: relative;
}

.a73-step::before {
    color: var(--hr-flare);
    content: counter(paso) ".";
    font-family: var(--hr-lead);
    font-weight: var(--hr-thick);
    inset-inline-start: 0;
    position: absolute;
}

.a73-prompt {
    align-items: center;
    background: var(--hr-layer);
    border: var(--hr-fine) dashed var(--hr-line-strong);
    border-radius: var(--r-step-3);
    color: var(--hr-body);
    display: flex;
    flex-wrap: wrap;
    gap: var(--hr-step-3);
    justify-content: space-between;
    margin-block: var(--hr-step-5);
    padding: var(--hr-step-4);
}

.a73-prompt-para {
    color: var(--hr-body);
    font-size: var(--hr-small);
    font-weight: var(--hr-medium);
}

.a73-figure {
    margin: var(--hr-step-4) 0;
}

.a73-figure-wide {
    margin-inline: auto;
    max-width: 820px;
}

.a73-figure-wide .a73-media {
    max-height: 56vh;
    aspect-ratio: 3 / 2;
    border-radius: var(--r-step-3);
    height: auto;
    inline-size: 100%;
    object-fit: cover;
}

.a73-figure-tall {
    margin-inline: auto;
    max-width: 420px;
}

.a73-figure-tall .a73-media {
    border-radius: var(--r-step-3);
    height: auto;
    inline-size: 100%;
}

/* =============================================================
   Llamada — CTA-09: antetítulo + h2 + texto corto
   ============================================================= */
.c05 {
    background: var(--hr-layer);
    color: var(--hr-body);
    padding-block: var(--hr-step-6);
}

.c05-eyebrow {
    color: var(--hr-flare);
    display: block;
    font-size: var(--hr-tiny);
    font-weight: var(--hr-thick);
    letter-spacing: var(--hr-spread);
    margin-block-end: var(--hr-step-1);
    text-transform: uppercase;
}

.c05-para {
    color: var(--hr-quiet);
    font-size: var(--hr-base);
    line-height: var(--hr-roomy);
    margin-block-start: var(--hr-step-3);
    max-width: var(--hr-slim);
}

.c05-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hr-step-2);
    margin-block-start: var(--hr-step-4);
}

.c05-fine {
    color: var(--hr-quiet);
    font-size: var(--hr-tiny);
    margin-block-start: var(--hr-step-2);
}

/* =============================================================
   Encabezado de página — PHEAD-01
   ============================================================= */
.h50 {
    background: var(--hr-ground);
    border-bottom: var(--hr-fine) solid var(--hr-hairline);
    color: var(--hr-body);
    padding-block: var(--hr-step-6) var(--hr-step-5);
}

.h50-shell {
    display: flex;
    flex-direction: column;
    gap: var(--hr-step-3);
}

.h50-eyebrow {
    color: var(--hr-flare);
    font-size: var(--hr-small);
    font-weight: var(--hr-thick);
    letter-spacing: var(--hr-spread);
    text-transform: uppercase;
}

.h50-top {
    max-width: 920px;
}

.h50-rule {
    border-top: var(--b-medium) solid var(--hr-flare);
    height: 0;
    width: 60px;
}

/* =============================================================
   Formulario — FORM-06: etiquetas flotantes
   ============================================================= */
.j09 {
    background: var(--hr-ground);
    color: var(--hr-body);
    padding-block: var(--hr-sec-y);
}

.j09-head {
    margin-block-end: var(--hr-step-4);
}

.j09-form {
    display: grid;
    gap: var(--hr-step-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.j09-control {
    position: relative;
}

.j09-control-wide {
    grid-column: 1 / -1;
}

.j09-input,
.j09-area {
    background: var(--hr-layer);
    border: 0;
    border-bottom: var(--b-medium) dashed var(--hr-line-strong);
    border-radius: var(--r-step-2) var(--r-step-2) 0 0;
    color: var(--hr-body);
    inline-size: 100%;
    padding: var(--hr-step-4) var(--hr-step-3) var(--hr-step-2);
}

.j09-input:focus,
.j09-area:focus {
    border-bottom-color: var(--hr-flare);
    outline: none;
}

.j09-tag {
    color: var(--hr-quiet);
    font-size: var(--hr-small);
    inset-inline-start: var(--hr-step-3);
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: font-size var(--hr-short) var(--hr-settle), top var(--hr-short) var(--hr-settle);
}

.j09-area + .j09-tag {
    top: var(--hr-step-4);
    transform: none;
}

.j09-input:focus + .j09-tag,
.j09-input:not(:placeholder-shown) + .j09-tag,
.j09-area:focus + .j09-tag,
.j09-area:not(:placeholder-shown) + .j09-tag {
    color: var(--hr-flare);
    font-size: var(--hr-tiny);
    top: var(--hr-step-1);
    transform: none;
}

.j09-send {
    background: var(--hr-flare);
    border: 0;
    border-radius: var(--hr-stadium);
    color: var(--hr-ground);
    cursor: pointer;
    font-family: var(--hr-lead);
    font-size: var(--hr-h5);
    font-weight: var(--hr-thick);
    grid-column: 1 / -1;
    justify-self: start;
    letter-spacing: var(--hr-spread);
    min-height: 46px;
    padding: 0 var(--hr-step-6);
    text-transform: uppercase;
}

.j09-send:hover {
    background: var(--hr-gradient-light);
    color: var(--hr-ground);
}

.j09-done {
    background: var(--hr-layer);
    border-radius: var(--r-step-3);
    color: var(--hr-body);
    margin-block-start: var(--hr-step-4);
    padding: var(--hr-step-4);
}

.j09-done[hidden] {
    display: none;
}

@media (max-width: 760px) {
    .j09-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .j09-control {
        flex: 0 0 auto;
    }
}

/* =============================================================
   Tabla — TABLE-05: compacta y densa
   ============================================================= */
.l52 {
    background: var(--hr-ground);
    color: var(--hr-body);
    padding-block: var(--hr-sec-y);
}

.l52-head {
    margin-block-end: var(--hr-step-4);
}

.l52-scroll {
    overflow-x: auto;
}

.l52-grid {
    inline-size: 100%;
}

.l52-strip {
    color: var(--hr-body);
}

.l52-column {
    background: var(--hr-layer);
    color: var(--hr-body);
    font-size: var(--hr-tiny);
    font-weight: var(--hr-thick);
    letter-spacing: var(--hr-spread);
    padding: var(--hr-step-2);
    text-align: start;
    text-transform: uppercase;
}

.l52-cell {
    border-bottom: var(--hr-fine) solid var(--hr-hairline);
    color: var(--hr-quiet);
    font-size: var(--hr-small);
    padding: var(--hr-step-1) var(--hr-step-2);
    text-align: start;
    vertical-align: top;
}

th.l52-cell {
    color: var(--hr-body);
    font-weight: var(--hr-medium);
    width: 26%;
}

@media (max-width: 640px) {
    .l52-cell,
    .l52-column {
        padding: var(--hr-step-1);
    }

    th.l52-cell {
        width: auto;
    }
}

/* =============================================================
   Tarjetas — GRID-05: destacada ancha + lista compacta
   ============================================================= */
.o80 {
    background: var(--hr-ground);
    color: var(--hr-body);
    padding-block: var(--hr-sec-y);
}

.o80-head {
    margin-block-end: var(--hr-step-4);
}

.o80-star {
    align-items: center;
    background: var(--hr-anchor);
    border-radius: var(--r-step-4);
    color: var(--hr-ground);
    display: grid;
    gap: var(--hr-step-3) var(--hr-step-5);
    grid-template-columns: minmax(0, 1fr) auto;
    margin-block-end: var(--hr-step-5);
    padding: var(--hr-step-5);
}

.o80-star-top {
    color: var(--hr-ground);
    font-family: var(--hr-lead);
    font-size: var(--hr-head);
    font-weight: var(--hr-thick);
    grid-column: 1;
    line-height: var(--hr-dense);
    text-transform: uppercase;
}

.o80-star-para {
    color: #10251c;
    font-size: var(--hr-h5);
    grid-column: 1;
    line-height: var(--hr-normal);
}

.o80-star-buttons {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
}

.o80-stack {
    align-items: start;
    display: grid;
    gap: var(--hr-step-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.o80-piece {
    border-top: var(--b-medium) solid var(--hr-flare);
    padding: var(--hr-step-3) var(--hr-step-3) var(--hr-step-4) 0;
}

.o80-mark {
    align-items: center;
    background: #241a10;
    border: var(--hr-fine) solid var(--hr-line-strong);
    border-radius: var(--hr-round-full);
    color: var(--hr-flare);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    margin-block-end: var(--hr-step-2);
    width: 38px;
}

.o80-mark svg {
    fill: currentColor;
    height: 21px;
    width: 21px;
}

.o80-top {
    color: var(--hr-body);
    font-size: var(--hr-h4);
    font-weight: var(--hr-thick);
    margin-block-end: var(--hr-step-1);
}

.o80-para {
    color: var(--hr-quiet);
    font-size: var(--hr-small);
    line-height: var(--hr-normal);
}

@media (max-width: 900px) {
    .o80-star {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--hr-step-4);
    }

    .o80-star-buttons {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }

    .o80-stack {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =============================================================
   Textos legales — LEGAL-05: lista de definiciones
   ============================================================= */
.q47 {
    background: var(--hr-ground);
    color: var(--hr-body);
    padding-block: var(--hr-sec-y);
}

.q47-intro {
    color: var(--hr-quiet);
    font-size: var(--hr-h5);
    line-height: var(--hr-roomy);
}

.q47-list {
    margin: var(--hr-step-5) 0 0;
}

.q47-term {
    color: var(--hr-body);
    font-family: var(--hr-lead);
    font-size: var(--hr-h4);
    font-weight: var(--hr-thick);
    margin-block: var(--hr-step-4) var(--hr-step-1);
    padding-block-start: var(--hr-step-2);
    position: relative;
}

.q47-term::before {
    border-top: var(--b-medium) solid var(--hr-flare);
    content: "";
    inset-block-start: 0;
    inset-inline-start: 0;
    position: absolute;
    width: 30px;
}

.q47-def {
    color: var(--hr-quiet);
    font-size: var(--hr-base);
    line-height: var(--hr-roomy);
    margin-block-end: var(--hr-step-3);
    margin-inline-start: 0;
}

.q47-para {
    color: var(--hr-quiet);
    margin-block-end: var(--hr-step-2);
}

.q47-contacts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.q47-note {
    border-top: var(--hr-fine) dashed var(--hr-hairline);
    color: var(--hr-quiet);
    font-size: var(--hr-small);
    line-height: var(--hr-roomy);
    margin-block-start: var(--hr-step-5);
    padding-block-start: var(--hr-step-3);
}

/* =============================================================
   Ficha de autora — AUTH-07: cita con retrato
   ============================================================= */
.r64 {
    background: var(--hr-ground);
    color: var(--hr-body);
    padding-block: var(--hr-sec-y);
}

.r64-box {
    background: var(--hr-layer);
    border-inline-start: var(--b-thick) solid var(--hr-flare);
    border-radius: var(--r-step-3);
    color: var(--hr-body);
    display: grid;
    gap: var(--hr-step-4);
    grid-template-columns: 100px minmax(0, 1fr);
    padding: var(--hr-step-5);
}

.r64-face {
    border-radius: var(--hr-round-full);
    height: 100px;
    object-fit: cover;
    object-position: center top;
    width: 100px;
}

.r64-quote {
    color: var(--hr-flare);
    display: block;
    font-family: var(--hr-lead);
    font-size: var(--hr-h1);
    line-height: var(--hr-dense);
}

.r64-para {
    color: var(--hr-body);
    font-size: var(--hr-h5);
    font-style: italic;
    line-height: var(--hr-normal);
    margin: 0;
}

.r64-duty {
    color: var(--hr-quiet);
    font-size: var(--hr-small);
    letter-spacing: var(--hr-spread);
    margin-block-start: var(--hr-step-3);
}

@media (max-width: 700px) {
    .r64-box {
        grid-template-columns: minmax(0, 1fr);
    }

    .r64-face {
        height: 84px;
        width: 84px;
    }
}

/* =============================================================
   Bloque 404 — ERR-03: sin dramatismo
   ============================================================= */
.u36 {
    background: var(--hr-ground);
    color: var(--hr-body);
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--hr-step-7);
}

.u36-shell {
    text-align: center;
}

.u36-head {
    font-size: var(--hr-head);
    margin-inline: auto;
    max-width: var(--hr-slim);
}

.u36-para {
    color: var(--hr-quiet);
    line-height: var(--hr-roomy);
    margin: var(--hr-step-3) auto 0;
    max-width: var(--hr-slim);
}

.u36-back {
    align-items: center;
    background: var(--hr-flare);
    border-radius: var(--hr-stadium);
    color: var(--hr-ground);
    display: inline-flex;
    font-family: var(--hr-lead);
    font-weight: var(--hr-thick);
    letter-spacing: var(--hr-spread);
    margin-block-start: var(--hr-step-4);
    min-height: 44px;
    padding: 0 var(--hr-step-6);
    text-transform: uppercase;
}

.u36-back:hover {
    background: var(--hr-gradient-light);
    color: var(--hr-ground);
}

/* =============================================================
   Firma de autora — BYLINE-02: tarjeta con borde
   ============================================================= */
.w34 {
    display: block;
    padding: var(--hr-step-4) var(--hr-edge) var(--hr-sec-y);
}

.w34-box {
    background: var(--hr-layer);
    border: var(--hr-fine) solid var(--hr-hairline);
    border-radius: var(--r-step-3);
    color: var(--hr-body);
    display: flex;
    gap: var(--hr-step-3);
    margin-inline: auto;
    max-width: var(--hr-slim);
    padding: var(--hr-step-4);
}

.w34-face {
    display: block;
    flex-shrink: 0;
}

.w34-media {
    border-radius: var(--hr-round-full);
    height: 64px;
    object-fit: cover;
    object-position: center top;
    width: 64px;
}

.w34-stuff {
    display: block;
}

.w34-tag {
    color: var(--hr-quiet);
    display: block;
    font-size: var(--hr-tiny);
    letter-spacing: var(--hr-spread);
    text-transform: uppercase;
}

.w34-head {
    margin-block: var(--hr-step-0) var(--hr-step-1);
}

.w34-link {
    color: var(--hr-body);
}

.w34-link:hover {
    color: var(--hr-flare);
}

.w34-duty {
    color: var(--hr-quiet);
    font-size: var(--hr-small);
}

.w34-para {
    color: var(--hr-quiet);
    font-size: var(--hr-small);
    line-height: var(--hr-normal);
    margin-block-start: var(--hr-step-2);
}

@media (max-width: 600px) {
    .w34-box {
        flex-direction: column;
    }
}

/* =============================================================
   Opiniones — REV-10: mínimo, subrayado
   ============================================================= */
.y74 {
    background: var(--hr-ground);
    color: var(--hr-body);
    padding-block: var(--hr-sec-y);
}

.y74-head {
    margin-block-end: var(--hr-step-4);
}

.y74-list {
    display: block;
}

.y74-piece {
    border-bottom: var(--hr-fine) dotted var(--hr-line-strong);
    padding-block: var(--hr-step-3);
}

.y74-meta {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--hr-step-2);
}

.y74-handle {
    color: var(--hr-body);
    font-size: var(--hr-base);
    font-weight: var(--hr-medium);
}

.y74-score {
    color: var(--hr-quiet);
    font-size: var(--hr-small);
    letter-spacing: var(--hr-even);
}

.y74-para {
    color: var(--hr-quiet);
    font-size: var(--hr-base);
    line-height: var(--hr-roomy);
    margin: var(--hr-step-1) 0 0;
}

/* =============================================================
   Botón de oferta — color, forma y animación de scripts/cta-style.mjs
   (fuchsia #C026D3, técnica "slide"; el nombre de clase se adapta
   al sitio y las curvas se toman de las fichas de esta compilación)
   ============================================================= */
.zonal-act {
    align-items: center;
    background: #C026D3;
    border: var(--hr-fine) solid var(--hr-line-strong);
    border-radius: var(--hr-stadium);
    color: #FFFFFF;
    display: inline-flex;
    font-size: var(--hr-xs-2);
    font-weight: var(--hr-thick);
    justify-content: center;
    letter-spacing: var(--hr-spread);
    min-height: 44px;
    padding: 0 var(--hr-step-4);
    text-decoration: none;
    text-transform: uppercase;
    transition: background var(--hr-short) var(--hr-settle), color var(--hr-short) var(--hr-settle);
}

.zonal-act.zonal-act {
    color: #FFFFFF;
    text-decoration: none;
}

.zonal-act:hover {
    animation: none;
    background: #A21CAF;
    color: #FFFFFF;
}

.zonal-act.zonal-act:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.zonal-act:hover::after {
    animation: none;
}

.zonal-act:active {
    background: #86198F;
    color: #FFFFFF;
}

.zonal-act:focus-visible {
    outline: 3px solid #141412;
    outline-offset: 3px;
}

@keyframes zonal-drift {
    0% {
        transform: translateX(0);
    }

    20.833% {
        transform: translateX(2px);
    }

    41.667%,
    100% {
        transform: translateX(0);
    }
}

.zonal-act {
    animation: zonal-drift calc(var(--hr-calm) * 3) var(--hr-settle) infinite;
}

@media (prefers-reduced-motion: reduce) {
    .zonal-act,
    .zonal-act::after {
        animation: none !important;
        transition: none !important;
    }
}

/* --- Piezas sueltas y variantes del botón de oferta ------------ */
.q47-piece {
    color: var(--hr-quiet);
    line-height: var(--hr-roomy);
    padding-inline-start: var(--hr-step-4);
    position: relative;
}

.q47-piece::before {
    color: var(--hr-flare);
    content: "▸";
    inset-inline-start: 0;
    position: absolute;
}

.r64-stuff {
    display: block;
}

.c05-head {
    color: var(--hr-body);
}

.zonal-act.a07-go {
    font-size: var(--hr-h5);
    min-height: 50px;
    padding: 0 var(--hr-step-6);
}

.zonal-act.c05-go {
    font-size: var(--hr-h5);
    min-height: 50px;
    padding: 0 var(--hr-step-6);
}

.zonal-act.o80-go {
    min-height: 48px;
    padding: 0 var(--hr-step-5);
}

.zonal-act.a73-go {
    min-height: 44px;
    padding: 0 var(--hr-step-5);
}

/* --- Врезки оффера внутри длинных блоков ---------------------- */
.a26-prompt,
.o80-prompt,
.y74-prompt {
    align-items: center;
    background: var(--hr-layer);
    border: var(--hr-fine) dashed var(--hr-line-strong);
    border-radius: var(--r-step-3);
    color: var(--hr-body);
    display: flex;
    flex-wrap: wrap;
    gap: var(--hr-step-3);
    justify-content: space-between;
    margin-block: var(--hr-step-2);
    padding: var(--hr-step-4);
}

.a26-prompt-para,
.o80-prompt-para,
.y74-prompt-para {
    color: var(--hr-body);
    font-size: var(--hr-small);
    font-weight: var(--hr-medium);
}

.o80-prompt {
    grid-column: 1 / -1;
}

.zonal-act.a26-go,
.zonal-act.y74-go {
    min-height: 44px;
    padding: 0 var(--hr-step-5);
}

@media (max-width: 516px) {
  .k50-links,
  .k50-list,
  .k50-link { display: none !important; }
  .k50-more-tap { display: block !important; }
}