/* ==========================================================================
   RIVO — rivo1.fr
   Thème repris de rivo-casino.fr : vert profond, ambre et braise, polices
   RivoDisplay / RivoText. Page unique, longue, entièrement auto-hébergée.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. POLICES DE MARQUE
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'RivoDisplay';
    src: url('/media/type/display.woff2') format('woff2');
    font-weight: 400 800;
    font-display: swap;
}
@font-face {
    font-family: 'RivoText';
    src: url('/media/type/body.woff2') format('woff2');
    font-weight: 300 700;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
    --ink: #04140f;
    --ink-2: #071d17;
    --ink-3: #0b271f;
    --ink-4: #103227;
    --ink-5: #164031;

    --edge: #1c4a38;
    --edge-2: #2a6a4e;

    --amber: #ffb400;
    --amber-lt: #ffd36b;
    --amber-dk: #b57a12;

    --moss: #00c94a;
    --moss-lt: #5bc46f;
    --moss-dk: #0f5127;

    --ember: #ff7a34;
    --ember-dk: #bf3c07;

    --parchment: #fff6ef;
    --copy: #e7f2ea;
    --copy-soft: #aac4b6;
    --copy-mute: #6f9082;

    --wash-amber: linear-gradient(128deg, #ffe08a 0%, #ffb400 52%, #ee8a1a 100%);
    --wash-moss: linear-gradient(146deg, #3ccc66 0%, #0f5127 100%);
    --wash-deep: linear-gradient(180deg, #0b271f 0%, #04140f 100%);

    --face-display: 'RivoDisplay', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --face-text: 'RivoText', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --rail: 272px;
    --mast: 62px;
    --wrap: 1220px;

    --r-lg: 18px;
    --r-md: 13px;
    --r-sm: 9px;
    --pill: 999px;

    --lift: 0 20px 44px -20px rgba(0, 0, 0, .78);
    --lift-amber: 0 12px 32px -12px rgba(255, 180, 0, .44);

    --t-fast: 140ms ease;
    --t: 240ms ease;
}

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

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--mast) + 18px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--face-text);
    font-size: 1rem;
    line-height: 1.68;
    color: var(--copy);
    background: var(--ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--amber); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--amber-lt); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a, button, input, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { font-family: var(--face-display); font-weight: 700; line-height: 1.16; }

.rc-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.rc-skip {
    position: absolute; left: 8px; top: -60px; z-index: 300;
    padding: 10px 18px; border-radius: var(--r-sm);
    background: var(--amber); color: #2c2107; font-weight: 700;
    transition: top var(--t-fast);
}
.rc-skip:focus { top: 8px; color: #2c2107; }

.rc-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.rc-wrap--text { max-width: 940px; }

/* Ornement en losange ambre */
.rc-orn { display: flex; align-items: center; gap: 10px; margin: 18px 0; }
.rc-orn::before, .rc-orn::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 180, 0, .38), transparent);
}
.rc-orn i {
    width: 8px; height: 8px; flex: 0 0 auto; background: var(--amber);
    transform: rotate(45deg); box-shadow: 0 0 10px rgba(255, 180, 0, .6);
}

/* --------------------------------------------------------------------------
   4. STRUCTURE : rail + mât
   -------------------------------------------------------------------------- */
.rc-shell { display: flex; min-height: 100vh; }

.rc-rail {
    position: fixed; inset: 0 auto 0 0; z-index: 220;
    width: var(--rail);
    display: flex; flex-direction: column;
    padding: 18px 14px 16px;
    background: var(--wash-deep);
    border-right: 1px solid var(--edge);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); transition: transform var(--t);
}
.rc-rail.is-open { transform: translateX(0); }
.rc-rail__crest { display: block; width: 168px; margin: 0 auto 16px; }
.rc-rail__shut {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; display: grid; place-items: center;
    border-radius: 50%; background: rgba(0, 0, 0, .38); color: var(--copy-soft);
}
.rc-rail__shut svg { width: 17px; height: 17px; }

.rc-rail__promo {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: var(--r-md);
    border: 1px solid var(--edge-2);
    background: linear-gradient(160deg, var(--ink-4) 0%, var(--ink-3) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 180, 0, .16);
}
.rc-rail__promo:hover { border-color: var(--amber); }
.rc-rail__promo img { width: 46px; height: 46px; flex: 0 0 auto; }
.rc-rail__promo b {
    display: block; font-family: var(--face-display); font-size: 1.06rem;
    color: var(--amber); line-height: 1.15;
}
.rc-rail__promo span { display: block; font-size: .76rem; color: var(--copy-soft); }

.rc-rail__menu { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.rc-rail__item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 13px; border-radius: var(--pill);
    color: var(--copy-soft); font-weight: 600; font-size: .94rem;
    border: 1px solid transparent;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.rc-rail__item svg { width: 21px; height: 21px; flex: 0 0 auto; color: var(--ic, var(--amber)); }
.rc-rail__item:hover { background: rgba(255, 255, 255, .05); color: var(--copy); }
.rc-rail__item[aria-current] {
    color: var(--parchment); border-color: var(--amber-dk);
    background: linear-gradient(90deg, rgba(255, 180, 0, .18) 0%, rgba(255, 180, 0, .03) 100%);
}
.rc-rail__foot { margin-top: auto; padding-top: 16px; font-size: .74rem; color: var(--copy-mute); text-align: center; }

.rc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.rc-mast {
    position: sticky; top: 0; z-index: 200;
    height: var(--mast); display: flex; align-items: center; gap: 12px;
    padding: 0 16px;
    background: rgba(4, 20, 15, .93); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--edge);
}
.rc-mast__toggle {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: 0 9px; border-radius: var(--r-sm); border: 1px solid var(--edge-2);
}
.rc-mast__toggle i { display: block; height: 2px; background: var(--amber); border-radius: 2px; }
.rc-mast__crest { width: 108px; flex: 0 0 auto; }
.rc-mast__acts { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.rc-scrim {
    position: fixed; inset: 0; z-index: 215; background: rgba(0, 0, 0, .62);
    opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t);
}
.rc-scrim.is-open { opacity: 1; visibility: visible; }
body.rc-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   5. BOUTONS
   -------------------------------------------------------------------------- */
.rc-cue {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 19px; border-radius: var(--pill);
    font-family: var(--face-display); font-size: .88rem; font-weight: 700;
    letter-spacing: .02em; white-space: nowrap; border: 1px solid transparent;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.rc-cue svg { width: 16px; height: 16px; }
.rc-cue:hover { transform: translateY(-1px); }
.rc-cue--join {
    background: var(--wash-amber); color: #2c2107;
    box-shadow: var(--lift-amber), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.rc-cue--join:hover { color: #2c2107; box-shadow: 0 16px 40px -12px rgba(255, 180, 0, .6); }
.rc-cue--ghost {
    background: rgba(255, 255, 255, .06); border-color: var(--edge-2); color: var(--copy);
}
.rc-cue--ghost:hover { border-color: var(--amber); color: var(--amber-lt); }
.rc-cue--wide { padding: 15px 34px; font-size: 1.02rem; }
.rc-cue--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.rc-hero { position: relative; isolation: isolate; overflow: hidden; }
.rc-hero__bg { position: absolute; inset: 0; z-index: -2; }
.rc-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.rc-hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(4, 20, 15, .72) 0%, rgba(4, 20, 15, .5) 45%, var(--ink) 100%),
        radial-gradient(700px 420px at 30% 40%, rgba(4, 20, 15, .68), transparent 70%);
}
.rc-hero__in { padding: 46px 0 40px; text-align: center; }
.rc-hero__scroll {
    display: inline-block; margin-bottom: 10px;
    font-family: var(--face-display); font-size: .82rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--amber);
}
.rc-hero__brand {
    font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: .98; letter-spacing: -.01em;
    color: var(--parchment);
    text-shadow: 0 6px 26px rgba(0, 0, 0, .7);
}
.rc-hero__deal { margin-top: 12px; }
.rc-hero__pct {
    display: block; font-family: var(--face-display); font-weight: 800;
    font-size: clamp(3.4rem, 12vw, 7rem); line-height: .92; letter-spacing: -.02em;
    background: var(--wash-amber);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--amber);
    filter: drop-shadow(0 5px 14px rgba(0, 0, 0, .6));
}
.rc-hero__upto { display: block; }
.rc-hero__upto i {
    display: block; font-style: normal; font-size: .9rem; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase; color: var(--copy-soft);
}
.rc-hero__cap {
    display: block; font-family: var(--face-display); font-weight: 800;
    font-size: clamp(1.8rem, 5.6vw, 3rem); line-height: 1.1;
    background: var(--wash-amber);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--amber);
}
.rc-hero__sub { margin: 16px auto 22px; max-width: 48ch; color: var(--copy-soft); }
.rc-hero__acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* Les logos des émetteurs sont dessinés pour un fond clair : on leur donne
   une pastille pâle, sinon ils disparaissent dans l'illustration du hero. */
/* height inclut le padding (box-sizing:border-box) : 32 − 10 = 22 px de logo,
   soit exactement le rendu de rivo-casino.fr. */
.rc-hero__pay {
    display: flex; flex-wrap: wrap; gap: 9px;
    align-items: center; justify-content: center; margin-top: 20px;
}
.rc-hero__pay img {
    height: 32px; width: auto; padding: 5px 8px; border-radius: 6px;
    background: #f5f5f7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.rc-hero__legal { margin-top: 14px; font-size: .77rem; color: var(--copy-mute); }

/* --------------------------------------------------------------------------
   7. BANDEAU DE CHIFFRES
   -------------------------------------------------------------------------- */
.rc-strip {
    display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr);
    margin: 22px 0 6px; background: var(--edge);
    border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden;
}
.rc-strip__cell { padding: 15px 12px; text-align: center; background: var(--ink-3); }
.rc-strip__val { font-family: var(--face-display); font-size: 1.2rem; font-weight: 800; color: var(--amber); }
.rc-strip__key { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--copy-mute); }

/* --------------------------------------------------------------------------
   8. TITRES DE SECTION
   -------------------------------------------------------------------------- */
.rc-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.rc-heading__ic { width: 28px; height: 28px; flex: 0 0 auto; color: var(--amber); }
.rc-heading h2 { font-size: clamp(1.3rem, 2.8vw, 1.8rem); }
.rc-heading__rule {
    flex: 1; min-width: 16px; height: 1px;
    background: linear-gradient(90deg, rgba(255, 180, 0, .38), transparent);
}
.rc-heading__more { flex: 0 0 auto; font-size: .8rem; font-weight: 700; font-family: var(--face-display); }

.rc-band { padding: 30px 0; }

/* --------------------------------------------------------------------------
   9. TUILES DE JEUX
   -------------------------------------------------------------------------- */
.rc-rail-x {
    display: grid; grid-auto-flow: column; grid-auto-columns: 152px; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
    scrollbar-width: thin;
}
.rc-rail-x > * { scroll-snap-align: start; }
.rc-rail-x::-webkit-scrollbar { height: 6px; }
.rc-rail-x::-webkit-scrollbar-thumb { background: var(--edge-2); border-radius: 99px; }

.rc-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); }

.rc-tile {
    display: block; overflow: hidden; border-radius: var(--r-md);
    border: 1px solid var(--edge); background: var(--ink-3);
    transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.rc-tile:hover {
    transform: translateY(-4px); border-color: var(--tint, var(--amber));
    box-shadow: var(--lift);
}
.rc-tile__art { position: relative; overflow: hidden; background: var(--ink-4); }
.rc-tile__art img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.rc-tile:hover .rc-tile__art img { transform: scale(1.06); }
.rc-tile--slot .rc-tile__art { aspect-ratio: 300 / 380; }
.rc-tile--table .rc-tile__art { aspect-ratio: 1 / 1; }
.rc-tile--sport .rc-tile__art { aspect-ratio: 200 / 269; }
.rc-tile__flag {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    padding: 3px 9px; border-radius: var(--pill);
    background: var(--tint, var(--amber-dk)); color: var(--parchment);
    font-family: var(--face-display); font-size: .68rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
}
.rc-tile__body { display: block; padding: 9px 11px 11px; border-top: 1px solid rgba(28, 74, 56, .8); }
.rc-tile__name {
    display: block; font-family: var(--face-display); font-size: .86rem; font-weight: 700;
    color: var(--copy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-tile__studio { display: block; font-size: .73rem; color: var(--copy-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------------------------
   10. PALIERS DE BONUS
   -------------------------------------------------------------------------- */
.rc-tiers { display: grid; gap: 12px; grid-template-columns: 1fr; }
.rc-tier {
    padding: 16px 18px; border-radius: var(--r-md);
    border: 1px solid var(--edge); background: linear-gradient(180deg, var(--ink-4) 0%, var(--ink-3) 100%);
}
.rc-tier__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rc-tier__no { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--copy-mute); }
.rc-tier__wager {
    padding: 3px 10px; border-radius: var(--pill);
    background: rgba(255, 180, 0, .14); border: 1px solid rgba(255, 180, 0, .38);
    font-size: .72rem; font-weight: 700; color: var(--amber);
}
.rc-tier__val {
    margin: 6px 0 3px; font-family: var(--face-display); font-size: 1.4rem; font-weight: 800; line-height: 1.15;
    background: var(--wash-amber);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--amber);
}
.rc-tier__note { font-size: .88rem; color: var(--copy-soft); }

/* --------------------------------------------------------------------------
   11. TEXTE
   -------------------------------------------------------------------------- */
.rc-essay { font-size: 1.03rem; line-height: 1.8; color: var(--copy-soft); }
.rc-essay > * + * { margin-top: 1.05em; }
.rc-essay h2 {
    margin-top: 2em; margin-bottom: .55em; font-size: clamp(1.35rem, 3vw, 1.85rem);
    color: var(--parchment); padding-bottom: .38em;
    border-bottom: 1px solid rgba(255, 180, 0, .26);
    scroll-margin-top: calc(var(--mast) + 18px);
}
.rc-essay h3 { margin-top: 1.6em; margin-bottom: .45em; font-size: clamp(1.06rem, 2.2vw, 1.24rem); color: var(--amber); }
.rc-essay > :first-child { margin-top: 0; }
.rc-essay strong { color: var(--parchment); font-weight: 600; }
.rc-essay a { text-decoration: underline; text-underline-offset: 3px; }
.rc-essay ul, .rc-essay ol { padding-left: 1.35em; }
.rc-essay li + li { margin-top: .45em; }
.rc-essay li::marker { color: var(--amber); }
.rc-lede { font-size: 1.12rem; color: var(--copy); }

/* Réponse courte, reprise volontiers en extrait */
.rc-cut {
    padding: 16px 18px; border-radius: var(--r-md);
    border: 1px solid var(--edge-2); border-left: 3px solid var(--amber);
    background: var(--ink-3);
}
.rc-cut b {
    display: block; margin-bottom: 5px; font-family: var(--face-display);
    font-size: .73rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber);
}
.rc-cut p { color: var(--copy); font-size: 1.01rem; }

.rc-notice {
    display: flex; gap: 13px; padding: 15px 17px;
    border: 1px solid rgba(255, 180, 0, .32); border-radius: var(--r-md);
    background: rgba(255, 180, 0, .07); font-size: .95rem; color: var(--copy-soft);
}
.rc-notice svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; color: var(--amber); }
.rc-notice strong { color: var(--parchment); }
.rc-notice--warn { border-color: rgba(255, 122, 52, .42); background: rgba(255, 122, 52, .09); }
.rc-notice--warn svg { color: var(--ember); }

/* --------------------------------------------------------------------------
   12. TABLEAUX
   -------------------------------------------------------------------------- */
.rc-table { overflow-x: auto; max-width: 100%; border: 1px solid var(--edge); border-radius: var(--r-md); }
.rc-table table { width: 100%; border-collapse: collapse; min-width: 430px; font-size: .93rem; background: var(--ink-3); }
.rc-table th, .rc-table td { padding: 12px 16px; text-align: left; }
.rc-table thead th {
    background: var(--ink-4); color: var(--amber); white-space: nowrap;
    font-family: var(--face-display); font-size: .77rem; letter-spacing: .05em; text-transform: uppercase;
}
.rc-table tbody tr + tr { border-top: 1px solid rgba(28, 74, 56, .7); }
.rc-table tbody td { color: var(--copy-soft); }
.rc-table tbody td strong { color: var(--copy); }
.rc-table tbody tr:hover { background: rgba(255, 255, 255, .03); }

/* --------------------------------------------------------------------------
   13. AVANTAGES / INCONVÉNIENTS
   -------------------------------------------------------------------------- */
.rc-scales { display: grid; gap: 14px; grid-template-columns: 1fr; }
.rc-scale { padding: 18px 20px; border-radius: var(--r-md); border: 1px solid var(--edge); background: var(--ink-3); }
.rc-scale h3 { margin: 0 0 10px; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; }
.rc-scale svg { width: 20px; height: 20px; }
.rc-scale--pro h3 { color: var(--moss-lt); }
.rc-scale--con h3 { color: var(--ember); }
.rc-scale ul { list-style: none; padding: 0; }
.rc-scale li { position: relative; padding-left: 22px; font-size: .94rem; color: var(--copy-soft); }
.rc-scale li + li { margin-top: 9px; }
.rc-scale li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.rc-scale--pro li::before { content: '+'; color: var(--moss-lt); }
.rc-scale--con li::before { content: '−'; color: var(--ember); }

/* --------------------------------------------------------------------------
   14. ÉTAPES
   -------------------------------------------------------------------------- */
.rc-steps { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 12px; padding: 0; }
.rc-steps li {
    counter-increment: s; position: relative; padding: 15px 18px 15px 62px;
    border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--ink-3); color: var(--copy-soft);
}
.rc-steps li::before {
    content: counter(s); position: absolute; left: 16px; top: 15px;
    width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
    background: var(--wash-amber); color: #2c2107;
    font-family: var(--face-display); font-weight: 800; font-size: .92rem;
}
.rc-steps strong { display: block; color: var(--parchment); margin-bottom: 2px; }

/* --------------------------------------------------------------------------
   15. FOURNISSEURS
   -------------------------------------------------------------------------- */
.rc-studios { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-studio {
    padding: 7px 14px; border-radius: var(--pill);
    background: rgba(255, 255, 255, .05); border: 1px solid var(--edge);
    font-size: .83rem; color: var(--copy-soft);
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.rc-ask { display: flex; flex-direction: column; gap: 10px; }
.rc-ask__item { border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--ink-3); overflow: hidden; }
.rc-ask__q {
    display: flex; align-items: center; gap: 13px; width: 100%;
    padding: 15px 17px; text-align: left;
    font-family: var(--face-display); font-size: 1rem; font-weight: 700; color: var(--copy);
}
.rc-ask__q:hover { background: rgba(255, 255, 255, .03); }
.rc-ask__chev { width: 18px; height: 18px; margin-left: auto; flex: 0 0 auto; color: var(--amber); transition: transform var(--t-fast); }
.rc-ask__item.is-open .rc-ask__chev { transform: rotate(180deg); }
.rc-ask__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t); }
.rc-ask__item.is-open .rc-ask__a { grid-template-rows: 1fr; }
.rc-ask__a > div { overflow: hidden; }
.rc-ask__a p { padding: 0 17px 15px; font-size: .95rem; color: var(--copy-soft); }

/* --------------------------------------------------------------------------
   17. APPEL FINAL
   -------------------------------------------------------------------------- */
.rc-relay {
    margin-top: 34px; padding: 30px 24px; text-align: center;
    border: 1px solid var(--edge-2); border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--ink-4) 0%, var(--ink-3) 100%);
    box-shadow: var(--lift);
}
.rc-relay h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.rc-relay p { margin: 10px auto 18px; max-width: 54ch; color: var(--copy-soft); }

/* --------------------------------------------------------------------------
   18. PIED DE PAGE
   -------------------------------------------------------------------------- */
.rc-base {
    margin-top: 44px; padding: 38px 0 92px;
    background: var(--ink-2); border-top: 1px solid var(--edge);
    content-visibility: auto; contain-intrinsic-size: auto 520px;
}
.rc-base__grid { display: grid; gap: 26px; grid-template-columns: 1fr; }
.rc-base__crest { width: 150px; margin-bottom: 12px; }
.rc-base__about { font-size: .88rem; color: var(--copy-mute); max-width: 46ch; }
.rc-base h2 {
    margin-bottom: 11px; font-size: .8rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--amber);
}
.rc-base ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rc-base ul a { color: var(--copy-soft); font-size: .88rem; }
.rc-base ul a:hover { color: var(--amber); }
.rc-base__foot {
    margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--edge);
    font-size: .8rem; color: var(--copy-mute);
}
.rc-base__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.rc-age {
    display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
    border-radius: 50%; border: 2px solid var(--ember);
    color: var(--ember); font-family: var(--face-display); font-weight: 800; font-size: .83rem;
}
.rc-base__copy { margin-top: 12px; color: var(--copy-mute); }

/* --------------------------------------------------------------------------
   19. CTA COLLANT MOBILE
   -------------------------------------------------------------------------- */
.rc-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(4, 20, 15, .95); backdrop-filter: blur(12px);
    border-top: 1px solid var(--edge);
}

/* --------------------------------------------------------------------------
   20. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (min-width: 620px) {
    .rc-strip { grid-template-columns: repeat(4, 1fr); }
    .rc-tiers { grid-template-columns: repeat(2, 1fr); }
    .rc-scales { grid-template-columns: repeat(2, 1fr); }
    .rc-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
    .rc-base__grid { grid-template-columns: repeat(2, 1fr); }
    .rc-hero__in { padding: 66px 0 52px; }
}

@media (min-width: 1024px) {
    .rc-rail { transform: none; }
    .rc-scrim, .rc-mast__toggle, .rc-mast__crest, .rc-rail__shut { display: none; }
    .rc-main { margin-left: var(--rail); }
    .rc-mast, .rc-wrap { padding-left: 24px; padding-right: 24px; }
    .rc-tiers { grid-template-columns: repeat(4, 1fr); }
    .rc-base__grid { grid-template-columns: 1.5fr 1fr 1fr; }
    .rc-dock { display: none; }
    .rc-base { padding-bottom: 40px; }
    .rc-hero__in { padding: 86px 0 66px; }
}

@media (max-width: 1023px) {
    .rc-mast__acts .rc-cue--ghost { display: none; }
}

@media print {
    .rc-rail, .rc-mast, .rc-dock, .rc-scrim, .rc-relay { display: none !important; }
    .rc-main { margin-left: 0; }
    body { background: #fff; color: #000; }
}