:root {
    --fondo: #0b0d12;
    --fondo2: #0e1118;
    --panel: #161a22;
    --panel2: #1d222d;
    --panel3: #11151c;
    --linea: #262c38;
    --linea-viva: #333a49;
    --tinta: #eef1f6;
    --tinta2: #aeb6c4;
    --tinta3: #7c8699;
    --rojo: #ed3037;
    --rojo-vivo: #ff3b43;
    --rojo-hondo: #b7121a;
    --verde: #1fa15a;
    --verde-vivo: #2fd071;
    --verde-fondo: #13301f;
    --ambar: #f5b301;

    --tope: clamp(1rem, 3.2vw, 2.2rem);
    --aire: clamp(3.4rem, 7vw, 6rem);
    --ancho: 1260px;
    --r: 4px;

    --titulo: "Bai Jamjuree", "Arial Narrow", system-ui, sans-serif;
    --texto: "Mada", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--texto);
    color: var(--tinta);
    background: var(--fondo);
    background-image:
        radial-gradient(90% 55% at 82% -6%, rgba(237, 48, 55, .16), transparent 60%),
        radial-gradient(70% 50% at 4% 1%, rgba(31, 161, 90, .08), transparent 58%),
        linear-gradient(180deg, var(--fondo2), var(--fondo) 30%);
    background-attachment: fixed;
    line-height: 1.6;
    overflow-x: clip;
    font-weight: 500;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }
.pixelada { image-rendering: pixelated; image-rendering: crisp-edges; }

.faja { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--tope); }
.seccion { padding: var(--aire) 0; position: relative; }

.rotulo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--titulo);
    font-weight: 600;
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tinta2);
}
.rotulo::before {
    content: "";
    width: 22px; height: 2px;
    background: var(--rojo);
    display: inline-block;
}
.rotulo--verde::before { background: var(--verde-vivo); }
.rotulo--ambar::before { background: var(--ambar); }

.titulo2 {
    font-family: var(--titulo);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.04;
    font-size: clamp(1.7rem, 4vw, 2.7rem);
    margin: .7rem 0 0;
    margin-left: -.02em;
}
.titulo2 em { font-style: normal; color: var(--rojo); }
.titulo2 .vd { color: var(--verde-vivo); }

.intro {
    color: var(--tinta2);
    max-width: 62ch;
    margin: 1rem 0 0;
    font-size: clamp(1rem, 1.4vw, 1.08rem);
}

.subt {
    font-family: var(--titulo);
    font-weight: 700;
    letter-spacing: .01em;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    margin: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--titulo);
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #fff;
    background: var(--rojo);
    border: 1px solid var(--rojo);
    border-radius: var(--r);
    padding: .64rem 1.15rem;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    transition: filter .15s, transform .05s;
    box-shadow: 0 0 0 0 rgba(237, 48, 55, .55), 0 10px 22px -12px rgba(237, 48, 55, .9);
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn--grande { font-size: 1.05rem; padding: .95rem 1.7rem; }
.btn--fantasma { background: transparent; color: var(--tinta); border-color: var(--linea-viva); box-shadow: none; }
.btn--fantasma:hover { border-color: var(--tinta2); background: var(--panel); }
.btn--sutil { background: var(--panel); border-color: var(--linea-viva); color: var(--tinta); box-shadow: none; }
.btn--sutil:hover { background: var(--panel2); }
.btn--verde { background: var(--verde); border-color: var(--verde); box-shadow: 0 10px 22px -12px rgba(31, 161, 90, .9); }
.btn .fl { transition: transform .15s; }
.btn:hover .fl { transform: translateX(3px); }

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.9rem; }

.titulo2, .subt, .disc__t, .mkt-t, .maq__t, .paso__t,
.met__n, .limite b, .canal__t, .disp__t, .titular { text-transform: none; }

.rev { opacity: 1; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }