/* =========================================================
   TOKENS · un único :root (V1 visual: antes había tres bloques
   :root en cascada; se fusionan aquí con los valores finales).
   Identidad intacta: navy + oro, Fraunces + Inter.
   ========================================================= */
:root {
  --bg: #05080f;
  --bg-deep: #030509;
  --bg-soft: #0a1322;
  --surface-1: #0b1629;
  --surface-2: #152740;
  --card: var(--surface-1);
  --card-soft: var(--surface-2);
  --panel: var(--surface-1);
  --panel-strong: var(--surface-2);
  --cream: #f3efe6;
  --text: #f5f1e8;
  --muted: #aab5c4;
  --faint: #7d8899;
  --gold: #e3b93e;
  --gold-light: #f6da85;
  --gold-deep: #9c7420;
  --gold-soft: rgba(227, 185, 62, .12);
  --line: rgba(227, 185, 62, .16);
  --line-strong: rgba(227, 185, 62, .28);
  --line-soft: rgba(255, 255, 255, .08);
  --green: #8bdbac;
  --danger: #ff9292;
  --ink: #161108;
  /* escala de radios: 12 inputs/chips/logos · 16 cards · 24 modal/sheet · pill botones */
  --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --r-xs: var(--r-sm); --r-xl: var(--r-lg);
  --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg);
  --container: 1180px;
  /* escala tipográfica mobile-first */
  --type-display: clamp(2.5rem, 5vw, 4rem);
  --type-h2: clamp(1.75rem, 3vw, 2.5rem);
  --type-h3: 1.25rem;
  --type-body-lg: clamp(1rem, 1.2vw, 1.1rem);
  --type-body: .95rem;
  --type-small: .8125rem;
  --type-label: .6875rem;
  --shadow: 0 22px 55px rgba(0, 0, 0, .30);
  --shadow-gold: 0 10px 24px rgba(227, 185, 62, .25);
  --focus-ring: 3px solid rgba(246, 218, 133, .55);
  --sec-y: 40px;
  --control-h: 52px;
  --t-fast: .16s ease;
  --t-base: .22s cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--gold) var(--bg); scrollbar-width: thin; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(800px 500px at 84% -12%, rgba(74, 109, 163, .22), transparent 68%),
    radial-gradient(700px 500px at 10% 20%, rgba(216, 174, 77, .08), transparent 68%),
    linear-gradient(180deg, #07111f 0%, var(--bg) 60%, #03060b 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.cf-account-open { overflow: hidden; }
body, button, a { -webkit-tap-highlight-color: transparent; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
::selection { color: var(--ink); background: var(--gold-light); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-light), var(--gold)); border: 2px solid var(--bg); border-radius: 99px; }
:focus { outline: none; }
:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 72px;
  padding: 10px max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left));
  background: #050a12;
  border-bottom: 1px solid rgba(218, 185, 105, .12);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .16);
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 50%; background: linear-gradient(145deg, #172944, #09111d); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.brand-mark img { width: 37px; height: 37px; object-fit: contain; border-radius: 50%; }
.brand-copy { display: grid; gap: 1px; }
.brand-name { color: var(--text); font-family: Fraunces, Georgia, serif; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.brand-caption { color: var(--faint); font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: 6px; margin-left: 18px; }
.site-nav a { padding: 9px 12px; border-radius: 10px; color: var(--muted); font-size: 12px; font-weight: 600; transition: color .18s ease, background .18s ease; }
.site-nav a:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, filter .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { cursor: wait; opacity: .56; transform: none; }
.btn-gold { color: var(--ink); background: linear-gradient(135deg, #f4d27c 0%, var(--gold) 100%); border-color: rgba(255, 225, 144, .56); box-shadow: 0 12px 28px rgba(216, 174, 77, .16); }
.btn-gold:hover { filter: brightness(1.07); }
.btn-quiet { color: var(--text); background: #16263a; border-color: rgba(169, 190, 216, .15); }
.btn-quiet:hover { background: #1c324b; border-color: rgba(218, 185, 105, .36); }
.btn-outline { color: var(--gold-light); background: transparent; border-color: var(--line-strong); }
.btn-outline:hover { background: var(--gold-soft); border-color: var(--gold-light); }
.btn-header { min-height: 40px; padding: 0 13px; border-radius: 11px; font-size: 11px; }
.btn-header-create { color: var(--gold-light); background: rgba(216, 174, 77, .07); border-color: var(--line-strong); }
.btn-header-create:hover { background: rgba(216, 174, 77, .15); }
.cf-icon { display: block; width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.cf-icon-sm { width: 16px; height: 16px; }
.btn .cf-icon { margin-right: -2px; }
.cf-account-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.js-crear-usuario.is-identified { max-width: 220px; }
.js-crear-usuario.is-identified::before { width: 7px; height: 7px; flex: 0 0 7px; content: ''; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(139, 219, 172, .1); }

.section { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
.hero { display: grid; grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr); align-items: center; gap: clamp(30px, 5vw, 68px); min-height: auto; padding-top: clamp(36px, 5vw, 60px); padding-bottom: clamp(38px, 5vw, 60px); }
.hero-copy { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 15px; color: var(--gold-light); font-size: 10px; font-weight: 800; letter-spacing: .19em; line-height: 1.2; }
.eyebrow-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(216, 174, 77, .1); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
.hero h1 { max-width: 620px; margin-bottom: 16px; color: var(--text); font-family: Fraunces, Georgia, serif; font-size: var(--type-display); font-weight: 600; letter-spacing: -.055em; line-height: .98; }
h1 em, h2 em { color: var(--gold-light); font-style: normal; }
.hero-text { max-width: 450px; margin-bottom: 0; color: var(--muted); font-size: var(--type-body-lg); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.btn-hero { min-width: 150px; min-height: 52px; padding: 0 17px; }
.hero-trust { display: flex; align-items: center; gap: 15px; margin-top: 25px; }
.trust-item { display: flex; align-items: center; gap: 9px; }
.trust-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--gold-light); background: var(--gold-soft); }
.trust-item strong, .trust-item small { display: block; }
.trust-item strong { color: var(--text); font-size: var(--type-body); }
.trust-item small { margin-top: 1px; color: var(--faint); font-size: var(--type-label); letter-spacing: .05em; text-transform: uppercase; }
.trust-divider { width: 1px; height: 27px; background: var(--line); }

.hero-media-wrap { min-width: 0; padding: clamp(18px, 2.5vw, 28px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(17, 35, 58, .92), rgba(9, 17, 29, .96)); box-shadow: var(--shadow); }
.hero-media-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.hero-media-top .eyebrow { margin-bottom: 8px; font-size: 9px; }
.hero-media-top h2 { max-width: 350px; margin: 0; color: var(--text); font-family: Fraunces, Georgia, serif; font-size: var(--type-h2); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.video-subtitle { margin: 8px 0 18px; color: var(--muted); font-size: var(--type-small); }
.video-card { position: relative; overflow: hidden; margin: 0; border: 1px solid rgba(218, 185, 105, .24); border-radius: 18px; background: #03060b; box-shadow: 0 14px 32px rgba(0, 0, 0, .25); }
.hero-video { width: 100%; min-height: 280px; aspect-ratio: 16 / 10; object-fit: cover; background: #03060b; }
.video-cover { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 13px; width: 100%; border: 0; color: var(--text); background: linear-gradient(145deg, rgba(7, 17, 31, .76), rgba(7, 10, 17, .38)); transition: opacity .2s ease; }
.video-cover.is-hidden { pointer-events: none; opacity: 0; }
.video-cover:hover { background: linear-gradient(145deg, rgba(7, 17, 31, .66), rgba(7, 10, 17, .26)); }
.video-play { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid rgba(255, 230, 161, .7); border-radius: 50%; color: var(--ink); background: var(--gold-light); box-shadow: 0 0 0 10px rgba(216, 174, 77, .1), 0 15px 35px rgba(0, 0, 0, .28); }
.video-play svg { margin-left: 3px; }
.video-cover-text { font-size: var(--type-body); font-weight: 700; }
.media-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; color: var(--faint); font-size: var(--type-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.media-footer span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--green); }
.media-footer i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(139, 219, 172, .1); }

.providers-section { padding-top: 32px; padding-bottom: 34px; }
.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 26px; }
.section-heading h2 { max-width: 580px; margin: 0; color: var(--text); font-family: Fraunces, Georgia, serif; font-size: var(--type-h2); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; }
.section-lead { max-width: 330px; margin: 0 0 4px; color: var(--muted); font-size: var(--type-body); line-height: 1.65; }
.payment-section { padding-bottom: 30px; }
.payment-panel { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 26px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(500px 220px at 100% 0%, rgba(216, 174, 77, .13), transparent 75%), #0b1626; }
.payment-copy h2 { margin: 0 0 7px; color: var(--text); font-family: Fraunces, Georgia, serif; font-size: var(--type-h2); font-weight: 600; letter-spacing: -.045em; line-height: 1.03; }
.payment-copy p:last-child { max-width: 310px; margin: 0; color: var(--muted); font-size: var(--type-small); }
.payment-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.payment-logo { display: grid; place-items: center; min-height: 70px; padding: 12px; border: 1px solid rgba(218, 185, 105, .14); border-radius: 13px; background: rgba(3, 8, 15, .48); transition: transform .18s ease, border-color .18s ease; }
.payment-logo:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.payment-logo img { width: 100%; height: 41px; object-fit: contain; }

.provider-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.provider-card { display: grid; place-items: center; min-height: 68px; padding: 11px 14px; border: 1px solid rgba(218, 185, 105, .13); border-radius: 14px; background: rgba(12, 24, 40, .56); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.provider-card:hover { transform: translateY(-3px); border-color: var(--line-strong); background: rgba(19, 37, 60, .75); }
.provider-card img { width: 100%; max-width: 125px; max-height: 43px; object-fit: contain; }

.support-section { padding-bottom: 34px; }
.support-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(330px, 1.15fr); align-items: center; gap: 30px; padding: clamp(24px, 3.5vw, 36px); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(22, 39, 63, .95), rgba(9, 17, 29, .95)); box-shadow: var(--shadow); }
.support-copy h2 { margin: 0 0 9px; color: var(--text); font-family: Fraunces, Georgia, serif; font-size: var(--type-h2); font-weight: 600; letter-spacing: -.05em; line-height: .98; }
.support-copy > p:last-child { margin: 0; color: var(--muted); font-size: var(--type-body); }
.support-actions { display: grid; gap: 10px; }
.support-button { display: grid; grid-template-columns: 44px 1fr 18px; align-items: center; gap: 11px; min-height: 64px; padding: 9px 13px; border: 1px solid rgba(218, 185, 105, .18); border-radius: var(--radius-md); background: rgba(3, 9, 17, .44); transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.support-button:hover { transform: translateX(4px); border-color: var(--line-strong); background: rgba(3, 9, 17, .7); }
.support-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(255, 255, 255, .05); }
.support-icon-brand img { width: 27px; height: 27px; object-fit: contain; }
.support-whatsapp .support-icon { border-color: rgba(37, 211, 102, .25); background: rgba(37, 211, 102, .1); }
.support-telegram .support-icon { border-color: rgba(42, 171, 238, .25); background: rgba(42, 171, 238, .1); }
.support-button strong, .support-button small { display: block; }
.support-button strong { color: var(--text); font-size: var(--type-body); }
.support-button small { margin-top: 2px; color: var(--faint); font-size: var(--type-small); }
.support-arrow { width: 18px; height: 18px; color: var(--gold-light); }
.site-footer { display: flex; justify-content: space-between; gap: 18px; width: min(var(--container), calc(100% - 40px)); margin: 0 auto; padding: 22px 0 max(28px, env(safe-area-inset-bottom)); color: var(--faint); border-top: 1px solid rgba(218, 185, 105, .1); font-size: var(--type-label); line-height: 1.5; }
.site-footer span:last-child { text-align: right; }

/* Autenticación y perfil: mismo lenguaje visual que el resto del landing. */
.cf-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow-y: auto; padding: 20px; background: rgba(1, 4, 9, .82); backdrop-filter: blur(12px); }
.cf-modal[hidden], .cf-welcome-widget[hidden], .cf-auth-launcher[hidden] { display: none !important; }
.cf-modal-card { position: relative; width: min(100%, 450px); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 30px 26px 22px; border: 1px solid var(--line-strong); border-radius: 24px; background: linear-gradient(145deg, #102139, #091321); box-shadow: 0 30px 90px rgba(0, 0, 0, .56); }
.cf-modal-card h2 { margin: 4px 0 9px; color: var(--text); font-family: Fraunces, Georgia, serif; font-size: clamp(29px, 6vw, 38px); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.cf-modal-close { position: absolute; top: 17px; right: 17px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); background: rgba(255, 255, 255, .04); }
.cf-modal-close:hover { color: var(--text); background: rgba(255, 255, 255, .09); }
.cf-auth-switch { display: flex; gap: 4px; padding: 4px; margin: 20px 0; border: 1px solid var(--line); border-radius: 13px; background: rgba(2, 7, 14, .62); }
.cf-auth-switch button { flex: 1; min-height: 40px; padding: 7px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; }
.cf-auth-switch button[aria-pressed="true"] { color: var(--gold-light); background: #192d48; }
.cf-modal-card label { display: block; margin-top: 15px; color: var(--muted); font-size: 11px; font-weight: 700; }
.cf-modal-card input { width: 100%; margin-top: 6px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: rgba(2, 8, 16, .68); }
.cf-modal-card input:focus { border-color: var(--gold-light); box-shadow: 0 0 0 3px rgba(216, 174, 77, .14); }
.cf-modal-card .btn { width: 100%; margin-top: 17px; }
.cf-modal-text, .cf-account-note { color: var(--muted); font-size: 12px; line-height: 1.6; }
.cf-modal-error { min-height: 1.35em; margin: 9px 0 0; color: var(--danger); font-size: 11px; }
.cf-password-field { position: relative; display: flex; align-items: center; }
.cf-password-field input { padding-right: 75px; }
.cf-password-toggle { position: absolute; right: 7px; min-height: 30px; padding: 4px 7px; border: 0; border-radius: 7px; color: var(--gold-light); background: var(--gold-soft); font-size: 10px; }
.cf-field-hint { min-height: 1.35em; margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.cf-field-hint.is-valid { color: var(--green); }
.cf-field-hint.is-invalid { color: var(--danger); }
.cf-modal-card input.is-invalid { border-color: var(--danger); }
.cf-modal-card input.is-valid { border-color: var(--green); }
.cf-account-summary { display: flex; align-items: center; gap: 13px; margin: 21px 0; }
.cf-account-avatar { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold-light); background: var(--gold-soft); }
.cf-account-avatar img { width: 30px; height: 30px; object-fit: contain; }
.cf-account-avatar .cf-avatar-image { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cf-account-summary strong { display: block; overflow-wrap: anywhere; color: var(--text); }
.cf-account-badge { display: block; margin-top: 3px; color: var(--green); font-size: 11px; }
.cf-ticket { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(2, 8, 16, .46); }
.cf-ticket span, .cf-ticket strong { display: block; }
.cf-ticket span { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.cf-ticket strong { margin-top: 4px; overflow-wrap: anywhere; color: var(--gold-light); font-size: 16px; }
.cf-modal-card #cf-copy-user, .cf-modal-card #cf-ir-chat { margin-top: 10px; }
.cf-account-note { margin: 17px 0; }
.cf-account-logout { display: block; width: 100%; padding: 13px 4px 2px; border: 0; border-top: 1px solid var(--line); color: var(--muted); background: transparent; font-size: 11px; }
.cf-account-logout:hover { color: var(--text); }
.cf-auth-launcher { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border: 1px solid var(--line-strong); border-radius: 17px; color: var(--text); background: #102037; box-shadow: 0 15px 38px rgba(0, 0, 0, .42); text-align: left; }
.cf-auth-launcher-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: var(--ink); background: linear-gradient(145deg, #ffe29e, var(--gold)); }
.cf-auth-launcher-icon .cf-icon { width: 22px; height: 22px; }
.cf-auth-launcher-text { display: grid; gap: 2px; line-height: 1.2; }
.cf-auth-launcher-text strong { color: var(--gold-light); font-size: 12px; }
.cf-auth-launcher-text small { color: var(--muted); font-size: 10px; }
.cf-welcome-widget { position: fixed; right: 22px; bottom: 96px; z-index: 950; width: min(370px, calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 22px; background: #f5f0e7; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.cf-welcome-header { display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 11px 14px; color: var(--text); background: linear-gradient(135deg, #0c192b, #1a304b); }
.cf-welcome-brand { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold-light); background: var(--gold-soft); }
.cf-welcome-brand img { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; }
.cf-welcome-header > span:nth-child(2) { display: grid; gap: 3px; }
.cf-welcome-header strong { font-size: 13px; }
.cf-welcome-header small { color: #bfccdc; font-size: 9px; letter-spacing: .1em; }
#cf-welcome-close { display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; border: 0; border-radius: var(--radius-sm); color: var(--text); background: transparent; }
#cf-welcome-close:hover { background: rgba(255, 255, 255, .08); }
.cf-welcome-body { display: grid; justify-items: center; min-height: 340px; padding: 37px 25px 27px; color: #19202b; text-align: center; }
.cf-welcome-user { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; color: var(--gold-light); background: #14243a; font-size: 32px; }
.cf-welcome-body h2 { margin: 18px 0 8px; color: #17202d; font-family: Fraunces, Georgia, serif; font-size: 27px; }
.cf-welcome-body p { max-width: 285px; margin: 0; color: #697483; font-size: 13px; line-height: 1.55; }
.cf-welcome-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; margin-top: 28px; }
.cf-welcome-actions .btn { min-width: 0; min-height: 47px; padding: 0 9px; font-size: 11px; }

@media (max-width: 1000px) {
  .site-nav { margin-left: 4px; }
  .hero { grid-template-columns: minmax(0, .88fr) minmax(360px, 1.12fr); gap: 32px; }
  .provider-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
  .site-header { gap: 12px; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
  .brand-caption, .site-nav { display: none; }
  .brand-mark { width: 40px; height: 40px; border-radius: 50%; }
  .brand-mark img { width: 34px; height: 34px; border-radius: 50%; }
  .brand-name { font-size: 17px; }
  .header-actions { gap: 6px; }
  .btn-header { min-height: 40px; padding: 0 10px; font-size: 10px; }
  .section { width: min(100% - 28px, var(--container)); }
  .hero { display: block; min-height: auto; padding-top: 48px; }
  .hero-copy { max-width: 620px; margin-bottom: 24px; }
  .hero h1 { font-size: var(--type-display); }
  .hero-media-wrap { max-width: 650px; margin: 0 auto; }
  .section-heading-row { display: block; }
  .section-lead { margin-top: 14px; }
  .payment-panel, .support-panel { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .site-header { padding-left: 12px; padding-right: 12px; }
  .brand-name { font-size: 16px; }
  .header-actions .js-fichas { max-width: 124px; overflow: hidden; padding: 0 9px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .header-actions .js-crear-usuario { max-width: 108px; overflow: hidden; padding: 0 9px; }
  .section { width: calc(100% - 24px); }
  .hero { padding-top: 30px; padding-bottom: 38px; }
  .hero h1 { max-width: 360px; margin-bottom: 13px; font-size: clamp(39px, 12vw, 52px); }
  .hero-text { font-size: 13px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
  .btn-hero { min-width: 0; min-height: 49px; padding: 0 9px; font-size: 11px; }
  .hero-trust { gap: 12px; margin-top: 26px; }
  .trust-item { gap: 7px; }
  .trust-item strong { font-size: 11px; }
  .trust-item small { font-size: 8px; }
  .hero-media-wrap { padding: 16px; border-radius: 21px; }
  .hero-media-top h2 { font-size: var(--type-h2); }
  .hero-video { min-height: 205px; }
  .providers-section { padding-top: 38px; padding-bottom: 38px; }
  .section-heading h2 { font-size: var(--type-h2); }
  .payment-panel, .support-panel { gap: 25px; padding: 22px 17px; border-radius: 22px; }
  .payment-copy h2, .support-copy h2 { font-size: var(--type-h2); }
  .payment-logos { grid-template-columns: repeat(2, 1fr); }
  .provider-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .provider-card { min-height: 75px; padding: 10px; }
  .support-button { min-height: 64px; padding: 9px 12px; }
  .site-footer { display: grid; width: calc(100% - 24px); gap: 7px; padding-top: 18px; font-size: 9px; }
  .site-footer span:last-child { text-align: left; }
  .cf-modal { padding: 10px; }
  .cf-modal-card { max-height: calc(100dvh - 20px); padding: 27px 17px 18px; border-radius: 20px; }
  .cf-auth-launcher { right: 14px; bottom: 15px; width: 54px; height: 54px; padding: 5px; border-radius: 16px; }
  .cf-auth-launcher-icon { width: 44px; height: 44px; }
  .cf-auth-launcher-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cf-welcome-widget { right: 12px; bottom: 79px; width: calc(100vw - 24px); }
  .cf-welcome-body { min-height: 300px; padding: 28px 17px 22px; }
}
@media (max-width: 360px) {
  .brand-name { font-size: 15px; }
  .header-actions .js-fichas { max-width: 101px; }
  .header-actions .js-crear-usuario { max-width: 92px; }
  .header-actions .js-fichas, .header-actions .js-crear-usuario { padding: 0 7px; font-size: 9px; }
  .hero-actions { grid-template-columns: 1fr; }
  .btn-hero { width: 100%; }
  .hero-trust { flex-wrap: wrap; }
  .trust-divider { display: none; }
  .hero-media-top h2 { font-size: var(--type-h2); }
  .payment-copy h2, .support-copy h2 { font-size: var(--type-h2); }
  .cf-modal-card h2 { font-size: 31px; }
}

/* Bloque 2: enlace de salto para teclado/lectores de pantalla (tomado del rediseño). */
.skip-link{position:absolute;left:12px;top:-100px;z-index:1000;padding:10px 14px;border-radius:10px;background:#f0ce82;color:#1b1406;font-weight:700;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px}

/* =========================================================
   BLOQUE 2 · Lenguaje visual del rediseño portado al DOM real
   (capa aditiva; la estructura y el JS de producción no cambian).
   Tokens: dorado más cálido, tarjetas navy planas, radios unificados,
   controles de 48 px, ritmo vertical --sec-y.
   ========================================================= */
/* (tokens del Bloque 2 fusionados en el :root único del inicio) */
body {
  background:
    radial-gradient(760px 480px at 84% -12%, rgba(60, 92, 150, .18), transparent 68%),
    radial-gradient(640px 460px at 8% 18%, rgba(227, 185, 62, .07), transparent 68%),
    linear-gradient(180deg, #06101c 0%, var(--bg) 58%, var(--bg-deep) 100%);
}

/* ---- header / marca ---- */
.site-header { min-height: 74px; background: rgba(5, 8, 15, .96); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.site-header .btn-header { box-shadow: 0 2px 5px rgba(0, 0, 0, .20); }
.site-header .btn-header:hover { box-shadow: 0 3px 7px rgba(0, 0, 0, .22); }
.brand-mark { width: 48px; height: 48px; border-color: rgba(227, 185, 62, .45); background: var(--bg-deep); box-shadow: 0 0 0 3px rgba(227, 185, 62, .06); transition: border-color .25s ease, box-shadow .25s ease; }
.brand:hover .brand-mark { border-color: var(--gold-light); box-shadow: 0 0 0 4px rgba(227, 185, 62, .12); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-name { font-size: clamp(15px, 2vw, 18px); letter-spacing: .01em; white-space: nowrap; }

/* ---- botones ---- */
.btn { min-height: var(--control-h); padding: 0 20px; border-radius: var(--r-sm); letter-spacing: .01em; transition: transform var(--t-fast), filter var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: linear-gradient(180deg, var(--gold-light), var(--gold)); border-color: transparent; box-shadow: 0 12px 26px rgba(0, 0, 0, .28), var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, .32); }
.btn-gold:hover { filter: brightness(1.03); box-shadow: 0 16px 32px rgba(0, 0, 0, .32), 0 14px 32px rgba(227, 185, 62, .32), inset 0 1px 0 rgba(255, 255, 255, .38); }
.btn-gold:active { transform: translateY(0); filter: brightness(.98); }
.btn-header { min-height: 44px; padding: 0 15px; border-radius: 11px; font-size: 12px; }
.btn-header-create { background: rgba(227, 185, 62, .07); }
.btn-header-create:hover { background: rgba(227, 185, 62, .12); }
.btn-hero { position: relative; overflow: hidden; isolation: isolate; min-height: 56px; padding: 0 24px; border-radius: 14px; font-size: 14px; }
.btn-hero.btn-gold::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
.btn-hero.btn-gold:hover::after { left: 130%; }
.btn-quiet { background: var(--card-soft); border-color: rgba(255, 255, 255, .09); }
.btn-quiet:hover { border-color: var(--line-strong); }

/* ---- tipografía / secciones ---- */
.hero h1 { font-weight: 500; letter-spacing: -.02em; line-height: 1.04; }
h1 em, h2 em { background: linear-gradient(110deg, var(--gold-light) 15%, var(--gold) 50%, var(--gold-light) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { color: var(--gold-light); letter-spacing: .18em; }
.eyebrow-dot { background: var(--gold); box-shadow: 0 0 0 5px rgba(227, 185, 62, .1); }
.section { width: min(var(--container), calc(100% - 28px)); }
.payment-section { padding-top: 0; padding-bottom: var(--sec-y); }
.providers-section { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.support-section { padding-bottom: var(--sec-y); }

/* ---- hero: indicadores como tarjetas (DOM .hero-trust/.trust-item intacto) ---- */
.hero-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(100%, 430px); margin-top: 24px; }
.trust-divider { display: none; }
.trust-item {
  flex-direction: column; justify-content: center; gap: 8px; min-height: 84px; padding: 12px 6px; text-align: center;
  border: 1px solid rgba(246, 218, 133, .28); border-radius: 13px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 65%), var(--card);
}
.trust-item:nth-child(3) { border-color: rgba(246, 218, 133, .42); background: var(--card-soft); }
.trust-icon { width: 34px; height: 34px; border-radius: 10px; border-color: rgba(246, 218, 133, .22); background: rgba(227, 185, 62, .09); }
.trust-item strong { font-size: clamp(15px, 1.6vw, 18px); font-weight: 800; line-height: 1; }
.trust-item small { margin-top: 3px; color: var(--gold-light); font-size: clamp(8px, .85vw, 9.5px); font-weight: 800; letter-spacing: .08em; line-height: 1.1; }

/* ---- hero: bloque de video ---- */
.hero-media-wrap { border-radius: var(--r-xl); border-color: var(--line); background: linear-gradient(145deg, rgba(16, 30, 61, .92), rgba(10, 20, 40, .96)); }
.video-card { border-radius: clamp(15px, 1.7vw, 21px); border-color: rgba(255, 255, 255, .13); background: var(--bg-deep); box-shadow: var(--shadow); }
.video-card::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035); }
.video-cover { background: linear-gradient(180deg, rgba(3, 5, 9, .25), rgba(3, 5, 9, .73)); }
.video-cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(227, 185, 62, .12), transparent 43%); pointer-events: none; }
.video-cover:hover { background: linear-gradient(180deg, rgba(3, 5, 9, .18), rgba(3, 5, 9, .66)); }
.video-play { position: relative; z-index: 2; transition: transform var(--t-base); }
.video-cover:hover .video-play { transform: scale(1.05); }
.video-cover-text { position: relative; z-index: 2; color: rgba(255, 255, 255, .95); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* ---- medios de pago ---- */
.payment-panel { border-radius: var(--r-xl); background: radial-gradient(500px 220px at 100% 0%, rgba(227, 185, 62, .12), transparent 60%), var(--card); }
.payment-logo { min-height: 72px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; background: var(--card-soft); transition: transform var(--t-fast), border-color var(--t-fast); }
.payment-logo:hover { transform: translateY(-2px); border-color: rgba(227, 185, 62, .35); }
.payment-logo img { width: auto; height: auto; max-width: 88%; max-height: 44px; }
.payment-logo img[src*="mercado-pago"] { max-width: 160px; max-height: 40px; }
.payment-logo img[src*="galicia"] { max-width: 150px; max-height: 39px; }
.payment-logo img[src*="banco-uala"] { max-width: 150px; max-height: 40px; }
.payment-logo img[src*="banco-nacion"] { max-width: 90px; max-height: 48px; }

/* ---- proveedores ---- */
.provider-card {
  min-height: 80px; padding: 10px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 13px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 65%), var(--card);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.provider-card:hover { transform: translateY(-2px); border-color: rgba(227, 185, 62, .35); background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 65%), var(--card-soft); box-shadow: 0 10px 22px rgba(0, 0, 0, .22); }
.provider-card img { width: auto; height: auto; max-width: 88%; max-height: 54px; }

/* ---- soporte ---- */
.support-panel { border-radius: var(--r-xl); border-color: rgba(227, 185, 62, .20); background: radial-gradient(620px 220px at 8% 0%, rgba(227, 185, 62, .10), transparent 60%), linear-gradient(135deg, rgba(16, 30, 61, .95), rgba(10, 20, 40, .98)); }
.support-button { border-radius: var(--r-md); border-color: var(--line); background: rgba(3, 5, 9, .44); transition: transform var(--t-fast), filter var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.support-button:hover { transform: translateY(-1px); filter: brightness(1.03); border-color: var(--line-strong); background: rgba(3, 5, 9, .62); }

/* ---- footer ---- */
.site-footer { width: min(var(--container), calc(100% - 28px)); padding: 24px 0 max(32px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(227, 185, 62, .14); color: var(--muted); font-size: 11px; }

/* ---- modal de cuenta (DOM real: cf-modal / cf-modal-card) ---- */
.cf-modal-card { border-radius: var(--r-lg); background: var(--card); box-shadow: 0 24px 64px rgba(0, 0, 0, .5); }
.cf-modal-card input { border-radius: var(--r-xs); background: rgba(3, 5, 9, .68); min-height: var(--control-h); }
.cf-modal-card input:focus { border-color: var(--gold-light); box-shadow: 0 0 0 3px rgba(227, 185, 62, .16); }

/* ---- widget: alinear sus tokens propios al dorado del rediseño (widget.css real intacto) ---- */
#cf-widget-root, .cf-welcome-widget, .cf-auth-launcher {
  --cf-gold: #e3b93e; --cf-gold-bright: #f6da85;
  --cf-panel: var(--card); --cf-panel-alt: var(--card-soft);
  --cf-line: rgba(227, 185, 62, .18); --cf-line-strong: rgba(227, 185, 62, .38);
}

/* ---- responsive de la capa (los breakpoints funcionales del real siguen vigentes) ---- */
@media (max-width: 900px) {
  :root { --sec-y: 32px; }
  .brand-mark { width: 44px; height: 44px; }
  .brand-name { font-size: 15px; }
  .btn-header { min-height: 42px; padding: 0 12px; font-size: 11px; }
  .provider-card { min-height: 76px; }
}
@media (max-width: 520px) {
  .hero-trust { gap: 6px; margin-top: 22px; width: 100%; }
  .trust-item { min-height: 76px; padding: 10px 4px; gap: 6px; }
  .trust-icon { width: 30px; height: 30px; }
  .trust-item strong { font-size: 14px; }
  .trust-item small { font-size: 8px; }
  .btn-hero { min-height: 50px; padding: 0 12px; font-size: 12px; }
  .payment-logo { min-height: 66px; }
  .provider-card { min-height: 70px; }
  .provider-card img { max-height: 44px; }
}
@media (max-width: 360px) {
  .hero-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-item strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-hero.btn-gold::after, .provider-card, .payment-logo, .support-button, .video-play { transition: none; }
}

/* ---- copy restaurado en el hero (landing-before-etapa2b): tagline + frase original ---- */
.hero-tagline { margin: -4px 0 14px; color: var(--gold-light); font-family: Fraunces, Georgia, serif; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; text-wrap: balance; }
.hero-text-secondary { margin-top: 10px; color: var(--faint); font-size: var(--type-body); }
.hero-media-top h2 { max-width: 420px; }
.video-subtitle { max-width: 440px; }
@media (max-width: 520px) { .hero-tagline { font-size: 1.02rem; margin-bottom: 12px; } .hero-text-secondary { font-size: .8rem; } }


/* =========================================================
   V1 VISUAL · "premium comercial" (mobile first)
   Capa final de la cascada. DOM, textos y JS intactos.
   Sistema único de botones · escala tipográfica · header ·
   hero con asset propio · modal como bottom sheet · superficies
   en tres niveles · video · chips claros para logos · footer.
   ========================================================= */

/* ---- 1. Sistema único de botones ------------------------------------ */
.btn {
  gap: 8px;
  min-height: var(--control-h);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .cf-icon { margin-right: 0; }

/* primario: oro sólido, texto ink */
.btn-gold {
  color: var(--ink);
  background: var(--gold);
  border-color: transparent;
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-gold:hover { filter: none; background: var(--gold-light); box-shadow: 0 12px 28px rgba(227, 185, 62, .32), inset 0 1px 0 rgba(255, 255, 255, .34); }
.btn-gold:active { filter: none; background: var(--gold); }
.btn-hero.btn-gold::after { display: none; }

/* secundario: fill tonal, sin borde oro */
.btn-quiet, .btn-outline, .btn-header-create {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--line-soft);
  box-shadow: none;
}
.btn-quiet:hover, .btn-outline:hover, .btn-header-create:hover {
  color: var(--text);
  background: #1c3252;
  border-color: rgba(246, 218, 133, .35);
}

/* deshabilitado: superficie secundaria + texto muted (nunca opacidad sobre oro) */
.btn:disabled, .btn-gold:disabled, .btn-quiet:disabled, .btn-outline:disabled {
  cursor: default;
  opacity: 1;
  transform: none;
  color: var(--faint);
  background: var(--surface-2);
  border-color: var(--line-soft);
  box-shadow: none;
  filter: none;
}
.btn:disabled:hover { transform: none; }

/* tamaños */
.btn-header { min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); font-size: 13px; }
.btn-hero { min-width: 0; min-height: 54px; padding: 0 22px; border-radius: var(--r-pill); font-size: 15px; }

/* Jerarquía única en el header: "Crear usuario" primario, "Hablar con cajero" secundario.
   Con sesión abierta (.is-identified) la relación se invierte: la cuenta pasa a tonal y el chat a oro. */
.site-header .btn-header-create { color: var(--ink); background: var(--gold); border-color: transparent; box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, .28); }
.site-header .btn-header-create:hover { background: var(--gold-light); }
.site-header .js-fichas.btn-gold { color: var(--text); background: var(--surface-2); border-color: var(--line-soft); box-shadow: none; }
.site-header .js-fichas.btn-gold:hover { background: #1c3252; border-color: rgba(246, 218, 133, .35); }
.site-header .js-crear-usuario.is-identified { color: var(--text); background: var(--surface-2); border-color: var(--line-soft); box-shadow: none; }
.site-header .js-crear-usuario.is-identified ~ .js-fichas.btn-gold { color: var(--ink); background: var(--gold); border-color: transparent; box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, .28); }
.site-header .btn-header { box-shadow: none; }

/* ---- 2. Tipografía ---------------------------------------------------- */
body { font-size: 16px; }
.eyebrow { margin-bottom: 14px; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.eyebrow-dot { width: 8px; height: 8px; flex-basis: 8px; }
.hero h1 { margin-bottom: 14px; font-weight: 500; letter-spacing: -.025em; line-height: 1.02; }
.hero-tagline { margin: 0 0 12px; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.hero-text { max-width: 480px; font-size: var(--type-body-lg); line-height: 1.6; }
.hero-text-secondary { margin-top: 0; color: var(--faint); font-size: var(--type-small); line-height: 1.55; }
.section-lead, .support-copy > p:last-child, .payment-copy p:last-child { font-size: var(--type-body); }
.video-subtitle { margin: 6px 0 16px; font-size: var(--type-body); }
.support-button strong { font-size: 1rem; }
.support-button small { font-size: var(--type-small); }
.site-footer { font-size: 12px; }

/* ---- 3. Header mobile --------------------------------------------------- */
.site-header { gap: 16px; min-height: 72px; padding-top: 8px; padding-bottom: 8px; }
.brand { gap: 10px; }
.brand-mark { width: 40px; height: 40px; border: 1px solid rgba(227, 185, 62, .35); background: var(--bg-deep); box-shadow: none; }
.brand:hover .brand-mark { border-color: var(--gold-light); box-shadow: none; }
.brand-name { font-size: 17px; letter-spacing: 0; }
.header-actions { gap: 8px; }

/* ---- 4. Hero: tarjeta con asset propio, chips inline, orden visual ------ */
.hero { grid-template-columns: minmax(0, 1fr) minmax(400px, 1fr); align-items: stretch; }
.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(26px, 4vw, 44px) clamp(20px, 3.2vw, 40px);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-lg);
  background: url("assets/hero-bg.svg") right center / cover no-repeat, var(--surface-1);
  box-shadow: var(--shadow);
}
.hero-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 22, 41, .55) 0%, rgba(11, 22, 41, .25) 55%, rgba(11, 22, 41, 0) 100%);
}
.hero-copy > * { position: relative; }
.hero-copy .eyebrow { order: 1; }
.hero-copy h1 { order: 2; }
.hero-copy .hero-tagline { order: 3; }
.hero-copy .hero-text { order: 4; }
.hero-copy .hero-actions { order: 5; width: 100%; margin-top: 24px; }
.hero-copy .hero-trust { order: 6; }
.hero-copy .hero-text-secondary { order: 7; margin-top: 18px; }
.hero-actions .btn-hero { flex: 1 1 200px; }

/* indicadores como chips */
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 20px; }
.trust-item {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 5px 14px 5px 5px;
  text-align: left;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06);
}
.trust-item:nth-child(3) { border-color: var(--line-soft); background: rgba(255, 255, 255, .06); }
.trust-icon { width: 32px; height: 32px; border-radius: 50%; border: 0; color: var(--gold-light); background: var(--gold-soft); }
.trust-item > span:last-child { display: flex; align-items: baseline; gap: 6px; }
.trust-item strong { font-size: 14px; font-weight: 800; line-height: 1; }
.trust-item small { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1; text-transform: uppercase; }

/* ---- 5. Superficies: fin del card-in-card ------------------------------ */
/* video: bloque sobre el fondo, sólo la tarjeta de video es tarjeta */
.hero-media-wrap { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.hero-media-top .eyebrow { font-size: 11px; }
.video-card { border-radius: var(--r-md); border-color: var(--line-soft); box-shadow: var(--shadow); }
.media-footer { display: none; }

/* medios de pago: panel plano de nivel 1, sin borde */
.payment-panel { border: 0; border-radius: var(--r-lg); background: var(--surface-1); }
.payment-logos { gap: 10px; }
.payment-logo { min-height: 64px; padding: 10px 14px; border: 0; border-radius: var(--r-sm); background: var(--cream); }
.payment-logo:hover { transform: translateY(-2px); border: 0; }
.payment-logo img { max-width: 78%; max-height: 40px; }

/* proveedores: sección sobre el fondo, chips claros */
.provider-card { min-height: 64px; padding: 10px 14px; border: 0; border-radius: var(--r-sm); background: var(--cream); box-shadow: none; }
.provider-card:hover { transform: translateY(-2px); background: #fbf8f1; box-shadow: 0 8px 18px rgba(0, 0, 0, .22); }
.provider-card img { max-width: 72%; max-height: 40px; }

/* soporte: único panel elevado (borde oro permitido); filas tonales sin borde oro */
.support-panel { border-color: var(--line-strong); }
.support-button { min-height: 64px; padding: 10px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface-2); }
.support-button:hover { border-color: rgba(246, 218, 133, .35); background: #1c3252; }
.support-icon { border: 0; border-radius: var(--r-sm); }

/* footer */
.site-footer { gap: 14px; align-items: center; }

/* ---- 6. Video: un solo sistema de control ------------------------------ */
.hero-video { background: #03060b url("assets/video-poster.jpg") center / cover no-repeat; }
.video-cover { gap: 12px; background: linear-gradient(180deg, rgba(3, 5, 9, .18) 0%, rgba(3, 5, 9, .62) 100%); }
.video-cover:hover { background: linear-gradient(180deg, rgba(3, 5, 9, .12) 0%, rgba(3, 5, 9, .58) 100%); }
.video-cover::before { display: none; }
.video-play { width: 64px; height: 64px; border: 0; background: var(--gold); box-shadow: 0 0 0 8px rgba(227, 185, 62, .16), 0 14px 32px rgba(0, 0, 0, .35); }
.video-cover-text { font-size: 12px; letter-spacing: .1em; }
/* controles nativos ocultos mientras la portada está visible (Chromium/WebKit) */
.video-card:has(.video-cover:not(.is-hidden)) .hero-video::-webkit-media-controls { display: none !important; }
.video-card:has(.video-cover:not(.is-hidden)) .hero-video::-webkit-media-controls-enclosure { display: none !important; }

/* ---- 7. Modal de cuenta: sheet en mobile, card centrada en desktop ------ */
.cf-modal { padding: 20px; background: rgba(3, 7, 14, .82); backdrop-filter: blur(10px); }
.cf-modal-card {
  width: min(100%, 440px);
  padding: 30px 28px 26px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .56);
  text-align: center;
}
.cf-modal-emblem { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; overflow: hidden; border: 1px solid rgba(227, 185, 62, .35); border-radius: 50%; background: var(--bg-deep); }
.cf-modal-emblem img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cf-modal-card > .eyebrow { justify-content: center; margin-bottom: 8px; }
.cf-modal-card h2 { margin: 0 0 6px; font-size: clamp(28px, 6vw, 32px); letter-spacing: -.03em; line-height: 1.05; }
.cf-modal-close { top: 14px; right: 14px; width: 40px; height: 40px; border-color: var(--line-soft); border-radius: var(--r-sm); }
.cf-modal-text { max-width: 340px; margin: 0 auto 4px; font-size: 14px; line-height: 1.55; text-align: center; }
.cf-auth-switch { gap: 4px; padding: 4px; margin: 18px 0 6px; border: 1px solid var(--line-soft); border-radius: var(--r-pill); background: rgba(3, 7, 14, .6); }
.cf-auth-switch button { min-height: 44px; padding: 8px; border-radius: var(--r-pill); color: var(--muted); font-size: 14px; font-weight: 700; transition: background var(--t-fast), color var(--t-fast); }
.cf-auth-switch button[aria-pressed="true"] { color: var(--ink); background: var(--gold); }
.cf-modal-card form { text-align: left; }
.cf-modal-card label { margin-top: 16px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cf-modal-card input {
  min-height: 52px;
  margin-top: 6px;
  padding: 12px 14px 12px 46px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  color: var(--text);
  background-color: var(--bg-deep);
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 20px 20px;
  font-size: 16px;
}
.cf-modal-card input::placeholder { color: var(--faint); }
.cf-modal-card input:focus { border-color: var(--gold-light); box-shadow: 0 0 0 3px rgba(227, 185, 62, .22); }
/* iconos leading (usuario / candado) sin tocar el DOM */
.cf-modal-card input[autocomplete="username"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b96a8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.3' r='3.3'/%3E%3Cpath d='M5 19.5c1.2-3.4 4-5 7-5s5.8 1.6 7 5'/%3E%3C/svg%3E"); }
.cf-modal-card input[autocomplete="new-password"], .cf-modal-card input[autocomplete="current-password"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b96a8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='9' rx='2.2'/%3E%3Cpath d='M8 10.5V7.8a4 4 0 0 1 8 0v2.7'/%3E%3C/svg%3E"); }
.cf-password-field { margin-top: 6px; }
.cf-password-field input { margin-top: 0; padding-right: 54px; }
/* botón de ver contraseña: icono ojo (el texto sigue en el DOM para lectores de pantalla) */
.cf-password-toggle {
  top: 50%;
  right: 6px;
  width: 40px;
  min-height: 40px;
  height: 40px;
  padding: 0;
  transform: translateY(-50%);
  border-radius: var(--r-sm);
  color: transparent;
  font-size: 0;
  background: rgba(255, 255, 255, .05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab5c4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.5 6.5-9.5 6.5S2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
.cf-password-toggle[aria-label^="Ocultar"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6da85' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6.3A10 10 0 0 1 12 6.2c6 0 9.5 5.8 9.5 5.8a16 16 0 0 1-3.2 3.9M6.8 7.6C4.2 9.4 2.5 12 2.5 12s3.5 6.5 9.5 6.5c1.5 0 2.9-.4 4.1-1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E"); }
.cf-password-toggle:hover { background-color: rgba(255, 255, 255, .1); }
.cf-field-hint { margin-top: 8px; font-size: 13px; }
.cf-modal-error { margin-top: 8px; font-size: 13px; }
.cf-modal-card .btn { width: 100%; min-height: 56px; margin-top: 18px; font-size: 16px; }
.cf-modal-card #cf-copy-user, .cf-modal-card #cf-ir-chat { margin-top: 10px; }
.cf-account-summary { justify-content: center; text-align: left; }
.cf-ticket { border-color: var(--line-soft); border-radius: var(--r-sm); background: var(--bg-deep); text-align: left; }
.cf-ticket span { font-size: 11px; }
.cf-ticket strong { font-size: 18px; }
.cf-account-note { margin: 16px auto; }
.cf-account-logout { padding-top: 14px; font-size: 13px; }

/* ---- 8. Responsive ----------------------------------------------------- */
@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr); gap: 28px; }
}
@media (max-width: 780px) {
  .site-header { gap: 12px; min-height: 68px; }
  .brand-name { font-size: 16px; }
  .btn-header { min-height: 44px; padding: 0 15px; font-size: 13px; }
  .hero { padding-top: 22px; padding-bottom: 32px; }
  .hero-copy { max-width: none; margin-bottom: 22px; }
  .hero-media-wrap { max-width: none; }
}
@media (max-width: 600px) {
  .cf-modal { padding: 0; place-items: end center; }
  .cf-modal-card {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--line-strong);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .cf-modal-card::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .18); }
  .cf-modal-close { top: 12px; right: 12px; }
  .cf-modal-card .btn { position: sticky; bottom: 0; }
}
@media (max-width: 520px) {
  .site-header { gap: 10px; padding-left: 14px; padding-right: 14px; }
  /* en 390 px el emblema (que ya dice "Club Fortuna") representa la marca; el nombre vuelve desde 521 px */
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .brand-mark { width: 44px; height: 44px; }
  .header-actions { gap: 6px; }
  .header-actions .js-fichas, .header-actions .js-crear-usuario { max-width: none; overflow: visible; padding: 0 14px; font-size: 13px; text-overflow: clip; }
  .hero { padding-top: 16px; padding-bottom: 30px; }
  .hero-copy { padding: 26px 20px 24px; border-radius: 20px; background-position: right -40px top; background-size: auto 115%; }
  .hero h1 { max-width: none; margin-bottom: 12px; font-size: clamp(40px, 11.5vw, 48px); }
  .hero-tagline { font-size: 1.05rem; }
  .hero-text { font-size: 15px; }
  .hero-text-secondary { font-size: 13px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
  .hero-actions .btn-hero { flex: initial; min-height: 52px; padding: 0 10px; font-size: 14px; }
  .hero-trust { gap: 6px; margin-top: 18px; }
  .trust-item { min-height: 38px; padding: 4px 12px 4px 4px; gap: 7px; }
  .trust-icon { width: 30px; height: 30px; }
  .trust-item strong { font-size: 13px; }
  .trust-item small { font-size: 10px; }
  .hero-media-wrap { padding: 0; border-radius: 0; }
  .hero-video { min-height: 200px; }
  .payment-panel, .support-panel { gap: 20px; padding: 22px 18px; border-radius: 20px; }
  .payment-logo { min-height: 60px; }
  .provider-grid { gap: 8px; }
  .provider-card { min-height: 60px; }
  .provider-card img { max-height: 36px; }
  .support-button { min-height: 62px; }
  /* espacio para que la píldora flotante no tape los legales */
  .site-footer { gap: 8px; padding-bottom: calc(84px + env(safe-area-inset-bottom)); font-size: 12px; }
  .cf-modal-card h2 { font-size: 28px; }
}
@media (max-width: 360px) {
  .header-actions .js-fichas, .header-actions .js-crear-usuario { padding: 0 11px; font-size: 12px; }
  .hero-actions { grid-template-columns: 1fr; }
  .hero h1 { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-gold, .cf-auth-switch button { transition: none; }
}

/* =========================================================
   POLISH FINAL · hero protagonista, video vertical 9:16,
   jerarquía del bloque de fichas, ajustes de acabado.
   ========================================================= */
/* ---- hero: "Club Fortuna" protagonista ---- */
.hero h1 { max-width: none; margin-bottom: 10px; font-size: clamp(3rem, 6.2vw, 4.75rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.hero-tagline { margin: 0 0 4px; font-size: clamp(1.15rem, 1.7vw, 1.35rem); }
.hero-copy .hero-actions { margin-top: 26px; }
.hero-copy .hero-text-secondary { margin-top: 16px; }

/* ---- bloque del video: jerarquía 1 · 2 · 3 ---- */
.hero-media-wrap { display: flex; flex-direction: column; }
.hero-media-top { margin-bottom: 0; }
.hero-media-top h2 { max-width: 520px; font-size: clamp(1.75rem, 3.1vw, 2.5rem); }
.video-lead { margin: 10px 0 0; color: var(--gold-light); font-family: Fraunces, Georgia, serif; font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance; }
.video-subtitle { max-width: 480px; margin: 8px 0 18px; color: var(--muted); font-size: var(--type-small); line-height: 1.5; }

/* ---- video vertical: relación intrínseca 9:16, sin recorte ---- */
.video-card { width: min(100%, calc(72dvh * 9 / 16), 420px); margin: 0 auto; }
.hero-video { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 9 / 16; object-fit: contain; background: #03060b; }
.video-cover { background: linear-gradient(180deg, rgba(3, 5, 9, .10) 0%, rgba(3, 5, 9, .55) 100%); }

/* ---- acabado ---- */
.hero-actions .btn-hero { min-height: 54px; }
.support-copy > p:last-child { margin-top: 4px; }
.section-heading-row { margin-bottom: 22px; }

@media (max-width: 780px) {
  .hero-media-wrap { align-items: stretch; }
  .hero-media-top h2 { max-width: none; }
}
@media (max-width: 520px) {
  .hero h1 { font-size: clamp(3rem, 13.5vw, 3.6rem); margin-bottom: 8px; }
  .hero-tagline { font-size: 1.15rem; }
  .hero-copy { padding: 26px 20px 22px; }
  .hero-media-top h2 { font-size: clamp(1.75rem, 8vw, 2rem); }
  .video-lead { font-size: 1.1rem; }
  .video-subtitle { margin-bottom: 16px; }
  .video-card { width: min(100%, calc(70dvh * 9 / 16)); }
}
/* CTAs del hero equilibrados también con sesión abierta (el botón de cuenta tenía max-width 220) */
.hero-actions .btn-hero { max-width: 300px; }
.hero-actions .js-crear-usuario.is-identified { max-width: 300px; }
@media (max-width: 520px) { .hero-actions .btn-hero, .hero-actions .js-crear-usuario.is-identified { max-width: none; } }

/* =========================================================
   POLISH V2 · acabado del hero y de su fondo.
   Capa ADITIVA y última de la cascada: no se edita ninguna regla
   anterior. Sin cambios de DOM, de textos ni de JS.
   widget.css NO se toca (authfix intacto).
   Principio: el fondo acompaña al H1, nunca compite con él.
   ========================================================= */

/* ---- 1 · Fondo de página: profundidad, misma paleta -------------------- */
/* Antes: dos radiales muy tenues sobre un degradado de tres paradas. El medio
   de la página quedaba plano y el pie se apagaba de golpe. Ahora hay techo
   (luz fría alta), brasa dorada contenida a la izquierda y un rebote frío
   bajo el pliegue, con una vertical de cuatro paradas. Ningún tono nuevo. */
body {
  background:
    radial-gradient(1100px 620px at 88% -16%, rgba(74, 112, 178, .20), transparent 70%),
    radial-gradient(820px 560px at 0% 24%, rgba(227, 185, 62, .075), transparent 66%),
    radial-gradient(900px 620px at 52% 104%, rgba(36, 63, 105, .16), transparent 72%),
    linear-gradient(180deg, #071223 0%, #05101d 32%, var(--bg) 64%, var(--bg-deep) 100%);
}

/* ---- 2 · Hero: la tarjeta pasa de superficie plana a volumen ----------- */
/* El ornamento (assets/hero-bg.svg) se conserva tal cual: lo que cambia es
   la LUZ alrededor. Se le añade un halo cálido para que parezca iluminado y
   no pegado, y dos capas de contraste local para que el texto siempre caiga
   sobre superficie controlada. La posición del ornamento se parametriza para
   poder apartarlo del contenido en pantallas estrechas sin repetir la lista. */
.hero-copy {
  --orn-pos: right center;
  --orn-size: cover;
  border: 1px solid rgba(246, 218, 133, .13);
  background:
    /* a · viñeta de esquinas: cierra la tarjeta sin ensuciar el centro */
    radial-gradient(136% 116% at 50% 46%, transparent 56%, rgba(2, 6, 13, .46) 100%),
    /* b · contraste local bajo el copy (izquierda) */
    radial-gradient(120% 130% at 2% 52%, rgba(6, 13, 26, .93) 0%, rgba(6, 13, 26, .60) 34%, transparent 70%),
    /* c · desvanecido horizontal, más largo que el anterior */
    linear-gradient(90deg, rgba(7, 15, 28, .80) 0%, rgba(7, 15, 28, .40) 48%, rgba(7, 15, 28, .04) 84%),
    /* d · halo dorado: enciende el ornamento en vez de dejarlo plano */
    radial-gradient(62% 70% at 92% 10%, rgba(227, 185, 62, .13), transparent 58%),
    /* e · ornamento de identidad, intacto */
    url("assets/hero-bg.svg") var(--orn-pos) / var(--orn-size) no-repeat,
    /* f · base navy con volumen (antes: color plano) */
    linear-gradient(158deg, #13253f 0%, #0c1a30 46%, #08131f 100%);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* El pseudo que antes repetía el desvanecido horizontal pasa a ser el ZÓCALO:
   es la capa que garantiza que pills y línea legal nunca se lean sobre el
   anillo dorado. Sigue en z-index:-1, así que no toca los eventos. */
.hero-copy::before {
  background: linear-gradient(0deg, rgba(5, 11, 22, .90) 0%, rgba(5, 11, 22, .46) 20%, rgba(5, 11, 22, 0) 46%);
}

/* ---- 3 · Ritmo vertical y jerarquía del hero --------------------------- */
.hero-copy .eyebrow { margin-bottom: 16px; letter-spacing: .16em; }
.eyebrow-dot { box-shadow: 0 0 0 4px rgba(227, 185, 62, .12), 0 0 14px 2px rgba(227, 185, 62, .40); }
/* sombra mínima: legibilidad sobre el ornamento, no efecto */
.hero h1 { margin-bottom: 12px; text-shadow: 0 2px 20px rgba(2, 6, 13, .55); }
.hero-tagline { text-shadow: 0 1px 14px rgba(2, 6, 13, .50); }
.hero-copy .hero-actions { margin-top: 30px; }
.hero-copy .hero-trust { margin-top: 22px; }
/* la línea de cierre estaba en --faint sobre el ornamento: sube a --muted y
   se acota su medida para que no corra por debajo de la decoración */
.hero-copy .hero-text-secondary { max-width: 46ch; margin-top: 18px; color: var(--muted); }

/* ---- 4 · CTA: el dorado deja de ser amarillo plano --------------------- */
/* Cuatro paradas + filo interior claro arriba y filo oscuro abajo = canto
   acuñado. La sombra cálida es moderada y sólo bajo el botón. */
.hero-actions .btn-gold,
.site-header .btn-header-create {
  background: linear-gradient(180deg, #f9e4a8 0%, var(--gold-light) 34%, var(--gold) 78%, #d6a92f 100%);
  border: 1px solid rgba(255, 236, 178, .50);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(120, 84, 14, .28),
    0 10px 26px rgba(0, 0, 0, .34),
    0 6px 20px rgba(227, 185, 62, .20);
}
.hero-actions .btn-gold:hover,
.site-header .btn-header-create:hover {
  filter: none;
  background: linear-gradient(180deg, #fceec1 0%, #f9e3a6 34%, var(--gold-light) 78%, var(--gold) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -1px 0 rgba(120, 84, 14, .24),
    0 14px 32px rgba(0, 0, 0, .38),
    0 10px 28px rgba(227, 185, 62, .28);
}
/* respuesta táctil real: el botón se hunde, no sólo cambia de brillo */
.hero-actions .btn-gold:active,
.site-header .btn-header-create:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(120, 84, 14, .34), 0 4px 12px rgba(0, 0, 0, .30);
}
/* anillo de foco dorado separado 4 px: alto contraste contra la tarjeta navy
   sin fundirse con el propio botón */
.hero-actions .btn-gold:focus-visible,
.site-header .btn-header-create:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 4px;
}

/* Los CTA compartían columna con las pills pero tenían un tope de 300 px: cuando
   la tarjeta es estrecha (layout a dos columnas entre ~780 y ~1150 px) los botones
   acababan en un borde y las pills en otro. Se deja que flex reparta: siguen siendo
   iguales entre sí (era el motivo del tope) y ahora comparten borde con las pills. */
.hero-actions .btn-hero,
.hero-actions .js-crear-usuario.is-identified { max-width: none; }

/* secundario: sigue siendo secundario, pero ya no se pierde sobre la tarjeta */
.hero-actions .btn-quiet {
  background: linear-gradient(180deg, rgba(32, 54, 85, .88), rgba(19, 34, 56, .92));
  border-color: rgba(246, 218, 133, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 20px rgba(0, 0, 0, .26);
}
.hero-actions .btn-quiet:hover {
  background: linear-gradient(180deg, rgba(39, 64, 99, .92), rgba(24, 42, 68, .94));
  border-color: rgba(246, 218, 133, .40);
}
.hero-actions .btn-quiet:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .34); }

/* ---- 5 · Pills: un sistema, no tres piezas sueltas --------------------- */
/* Dos cambios de fondo: (1) dejan de ser translúcidas, así el ornamento ya no
   se transparenta a través del chip; (2) reparten el ancho sobrante, de modo
   que la fila queda enrasada en vez de escalonada. */
.hero-copy .hero-trust { gap: 8px; }
.hero-copy .trust-item {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 44px;
  padding: 5px 16px 5px 5px;
  border-color: rgba(246, 218, 133, .18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .015)),
    rgba(9, 18, 32, .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 16px rgba(0, 0, 0, .20);
}
.hero-copy .trust-icon {
  width: 34px; height: 34px;
  background: linear-gradient(180deg, rgba(246, 218, 133, .20), rgba(227, 185, 62, .09));
  box-shadow: inset 0 0 0 1px rgba(246, 218, 133, .24);
}
.hero-copy .trust-item strong { font-size: 14px; letter-spacing: -.005em; }
.hero-copy .trust-item small { color: var(--muted); font-size: 10.5px; letter-spacing: .07em; }

/* ---- 6 · Columna del video: deja de flotar sobre navy plano ------------ */
.hero-media-wrap { background: radial-gradient(86% 64% at 50% 44%, rgba(46, 78, 128, .15), transparent 78%); }
.video-card { box-shadow: 0 34px 70px rgba(0, 0, 0, .46), inset 0 0 0 1px rgba(255, 255, 255, .05); }

/* ---- 7 · Acabados menores --------------------------------------------- */
/* en desktop la píldora flotante del widget se apoyaba sobre los legales */
.site-footer { padding-bottom: max(76px, env(safe-area-inset-bottom)); }

/* ---- 8 · Responsive ---------------------------------------------------- */
@media (max-width: 780px) {
  /* el ornamento sube y se retira: el contenido ocupa casi todo el ancho */
  .hero-copy { --orn-pos: right -30px top -10px; --orn-size: auto 118%; }
  .hero-copy .hero-text-secondary { max-width: none; }
}
@media (max-width: 520px) {
  .hero-copy { --orn-pos: right -52px top -18px; --orn-size: auto 124%; padding: 28px 20px 24px; }
  /* zócalo más alto: en vertical las pills ocupan el tercio inferior */
  .hero-copy::before { background: linear-gradient(0deg, rgba(5, 11, 22, .93) 0%, rgba(5, 11, 22, .58) 26%, rgba(5, 11, 22, 0) 56%); }
  .hero-copy .hero-actions { margin-top: 24px; }
  .hero-copy .hero-trust { margin-top: 18px; gap: 7px; }
  .hero-copy .trust-item { min-height: 42px; padding: 4px 14px 4px 4px; }
  .hero-copy .trust-item small { font-size: 10px; }
  .hero-copy .hero-text-secondary { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-actions .btn-gold, .hero-actions .btn-quiet { transition: none; }
}

/* =========================================================
   POLISH V3 · pill de jugador, pills informativas, CTA flotante
   y acabado de secciones.
   Capa ADITIVA y ÚLTIMA de la cascada: no se edita ninguna regla
   anterior (misma disciplina que POLISH V2). Sin cambios de JS,
   de lógica ni de textos. widget.css NO se toca: el CTA flotante
   se refina desde aquí con especificidad de id, porque widget.css
   carga DESPUÉS y ganaría los empates (authfix intacto).
   ========================================================= */

/* ---- 1 · Pill de jugador: sustituye al indicador verde -------------- */
/* El punto verde era el único signo de "sesión abierta". Se retira y su
   sitio lo ocupa un avatar de jugador: mismo lenguaje dorado que el resto
   de la página y lectura inmediata de "esta es tu cuenta". */
.js-crear-usuario.is-identified::before { content: none; }

/* El icono sólo existe con sesión abierta: sin ella el botón sigue siendo
   el CTA "Crear usuario" intacto (ni texto ni comportamiento cambian). */
.cf-user-ico { display: none; }
.js-crear-usuario.is-identified .cf-user-ico {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  color: var(--gold-light);
  background: linear-gradient(180deg, rgba(246, 218, 133, .26), rgba(227, 185, 62, .09));
  box-shadow: inset 0 0 0 1px rgba(246, 218, 133, .34), 0 2px 6px rgba(0, 0, 0, .26);
}
.js-crear-usuario.is-identified .cf-user-ico .cf-icon { width: 17px; height: 17px; stroke-width: 1.9; }
/* placeholder puramente visual por si el nombre no estuviera disponible */
.js-crear-usuario.is-identified .cf-account-label:empty::after { content: "Jugador"; }

/* Header: pastilla tonal con filo dorado. No compite con el CTA de oro
   (la inversión de jerarquía ya existente sigue vigente). */
.site-header .js-crear-usuario.is-identified {
  gap: 9px;
  /* min-width:0 + max-width:none: la pastilla toma el ancho que de verdad
     queda en la fila (flex la encoge antes que al CTA, que es nowrap) en vez
     de recortarse contra un tope fijo. La elipsis queda sólo como último
     recurso para alias muy largos; el nombre completo sigue en title/aria. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 220px;
  padding: 0 15px 0 6px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(34, 57, 90, .96), rgba(18, 32, 53, .98));
  border-color: rgba(246, 218, 133, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px rgba(0, 0, 0, .28);
  font-weight: 700;
}
.site-header .js-crear-usuario.is-identified:hover {
  background: linear-gradient(180deg, rgba(43, 70, 109, .97), rgba(23, 40, 65, .98));
  border-color: rgba(246, 218, 133, .44);
}
/* Para que el flex pueda encoger la pastilla, su contenedor también debe
   poder bajar de su ancho de contenido. Sin esto, un alias largo empujaba
   "Hablar con cajero" fuera de la pantalla. El CTA nunca se encoge. */
.header-actions { min-width: 0; }
.site-header .js-fichas { flex: 0 0 auto; }

/* Hero: misma pastilla a escala del CTA; "Hablar con cajero" pasa a oro,
   igual que ya hacía el header con sesión abierta. */
.hero-actions .js-crear-usuario.is-identified {
  gap: 11px;
  padding: 0 22px 0 7px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(34, 57, 90, .96), rgba(18, 32, 53, .98));
  border: 1px solid rgba(246, 218, 133, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 20px rgba(0, 0, 0, .28);
}
.hero-actions .js-crear-usuario.is-identified:hover {
  background: linear-gradient(180deg, rgba(43, 70, 109, .97), rgba(23, 40, 65, .98));
  border-color: rgba(246, 218, 133, .44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 12px 26px rgba(0, 0, 0, .32);
}
.hero-actions .js-crear-usuario.is-identified .cf-user-ico { width: 38px; height: 38px; flex-basis: 38px; }
.hero-actions .js-crear-usuario.is-identified .cf-user-ico .cf-icon { width: 21px; height: 21px; }
.hero-actions .js-crear-usuario.is-identified .cf-icon-sm { color: var(--gold-light); }
.hero-actions .js-crear-usuario.is-identified ~ .js-fichas.btn-quiet {
  color: var(--ink);
  background: linear-gradient(180deg, #f9e4a8 0%, var(--gold-light) 34%, var(--gold) 78%, #d6a92f 100%);
  border-color: rgba(255, 236, 178, .50);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(120, 84, 14, .28),
    0 10px 26px rgba(0, 0, 0, .34),
    0 6px 20px rgba(227, 185, 62, .20);
}
.hero-actions .js-crear-usuario.is-identified ~ .js-fichas.btn-quiet:hover {
  background: linear-gradient(180deg, #fceec1 0%, #f9e3a6 34%, var(--gold-light) 78%, var(--gold) 100%);
  border-color: rgba(255, 236, 178, .62);
}

/* ---- 2 · Hero: respiración y jerarquía ------------------------------- */
/* El contenido llegaba muy justo a los cantos de la tarjeta y el conjunto
   se leía apretado. Se abre el padding, se separan los tres escalones
   (eyebrow · título+tagline · acciones) y se refuerza el filo superior. */
.hero { padding-top: clamp(22px, 3.6vw, 52px); padding-bottom: clamp(32px, 4.6vw, 60px); }
.hero-copy {
  padding: clamp(30px, 4.2vw, 48px) clamp(24px, 3.4vw, 44px);
  border-color: rgba(246, 218, 133, .15);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 0 0 1px rgba(246, 218, 133, .05);
}
.hero-copy .eyebrow { margin-bottom: 17px; color: var(--gold-light); font-size: 10.5px; font-weight: 800; letter-spacing: .17em; }
.hero h1 { letter-spacing: -.035em; text-shadow: 0 2px 22px rgba(2, 6, 13, .60); }
.hero-copy .hero-tagline { margin-bottom: 2px; text-shadow: 0 1px 16px rgba(2, 6, 13, .55); }
.hero-copy .hero-actions { margin-top: 28px; }
.hero-copy .hero-trust { margin-top: 20px; }
.hero-copy .hero-text-secondary { margin-top: 18px; color: var(--muted); font-size: var(--type-small); line-height: 1.6; }

/* ---- 3 · Pills informativas: un solo sistema ------------------------- */
/* Las tres (24/7 · personalizada · +18) comparten alto, filo, superficie y
   tamaño de icono. El separador heredado del layout antiguo se retira:
   en formato chip sólo añade ruido. */
.hero-copy .trust-divider { display: none; }
.hero-copy .hero-trust { gap: 9px; }
.hero-copy .trust-item {
  /* base 0: cuando dos comparten fila salen del mismo ancho en vez de
     medir cada una lo que ocupa su texto (era el escalonado de antes) */
  flex: 1 1 0;
  gap: 10px;
  justify-content: flex-start;
  min-height: 48px;
  padding: 5px 18px 5px 5px;
  border-color: rgba(246, 218, 133, .20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .012)),
    rgba(8, 17, 30, .90);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 18px rgba(0, 0, 0, .24);
}
.hero-copy .trust-icon {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  color: var(--gold-light);
  background: linear-gradient(180deg, rgba(246, 218, 133, .24), rgba(227, 185, 62, .07));
  box-shadow: inset 0 0 0 1px rgba(246, 218, 133, .30), 0 2px 8px rgba(0, 0, 0, .22);
}
.hero-copy .trust-icon .cf-icon { width: 20px; height: 20px; stroke-width: 1.7; }
.hero-copy .trust-item > span:last-child { gap: 7px; }
.hero-copy .trust-item strong { color: var(--text); font-size: 14.5px; font-weight: 800; letter-spacing: -.005em; }
.hero-copy .trust-item small { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .085em; }

/* ---- 4 · CTA flotante "Hablar con cajero" ---------------------------- */
/* Mismo oro acuñado que el CTA del hero, para que la página tenga un solo
   dorado. Sólo superficie y proporción: posición, z-index y pointer-events
   quedan como los dejó el authfix. */
#cf-widget-root #cf-widget-bubble.cf-bubble {
  gap: 11px;
  height: 58px;
  padding: 5px 11px 5px 5px;
  background: linear-gradient(180deg, #f9e4a8 0%, var(--gold-light) 32%, var(--gold) 76%, #d6a92f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(120, 84, 14, .26),
    0 14px 32px rgba(0, 0, 0, .44),
    0 6px 20px rgba(227, 185, 62, .20);
}
#cf-widget-root #cf-widget-bubble.cf-bubble:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #fceec1 0%, #f9e3a6 32%, var(--gold-light) 76%, var(--gold) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -1px 0 rgba(120, 84, 14, .22),
    0 18px 38px rgba(0, 0, 0, .48),
    0 10px 26px rgba(227, 185, 62, .28);
}
#cf-widget-root #cf-widget-bubble.cf-bubble:active { transform: translateY(1px); }
#cf-widget-root #cf-widget-bubble .cf-bubble-icon {
  width: 48px; height: 48px; flex-basis: 48px;
  color: var(--gold-light);
  background: linear-gradient(180deg, #16294480, #0a1424);
  box-shadow: inset 0 0 0 1px rgba(246, 218, 133, .26);
}
#cf-widget-root #cf-widget-bubble .cf-bubble-icon .cf-icon { width: 23px; height: 23px; }
#cf-widget-root #cf-widget-bubble .cf-bubble-label { font-size: 15px; font-weight: 800; letter-spacing: .005em; }
#cf-widget-root #cf-widget-bubble .cf-bubble-chevron { width: 20px; flex-basis: 20px; opacity: .70; }
#cf-widget-root #cf-widget-bubble .cf-bubble-chevron .cf-icon { width: 17px; height: 17px; }

/* ---- 5 · Medios de pago --------------------------------------------- */
/* El panel era una superficie plana; recupera el matiz dorado del inicio y
   una hairline. Los logos se normalizan ópticamente: cada marca tiene una
   proporción muy distinta y con un único max-height unas pesaban el doble
   que otras. */
.payment-section { padding-bottom: clamp(26px, 3.4vw, 40px); }
.payment-panel {
  gap: clamp(22px, 3vw, 34px);
  padding: clamp(24px, 3.2vw, 34px);
  border: 1px solid rgba(246, 218, 133, .12);
  background:
    radial-gradient(620px 260px at 100% -12%, rgba(227, 185, 62, .10), transparent 72%),
    linear-gradient(168deg, #101f36 0%, #0a1526 62%, #081222 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 44px rgba(0, 0, 0, .30);
}
.payment-copy h2 { margin-bottom: 9px; letter-spacing: -.04em; }
.payment-copy p:last-child { max-width: 34ch; color: var(--muted); line-height: 1.6; }
.payment-logos { gap: 11px; }
.payment-logo {
  min-height: 74px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--cream);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(0, 0, 0, .05);
}
.payment-logo:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(0, 0, 0, .05); }
.payment-logo img { width: auto; max-width: 86%; max-height: 30px; }
.payment-logo:nth-child(1) img { max-height: 34px; }  /* Mercado Pago · 3,00:1 (marca + dos líneas) */
.payment-logo:nth-child(2) img { max-height: 20px; }  /* Banco Nación · 5,25:1 */
.payment-logo:nth-child(3) img { max-height: 34px; }  /* Galicia · 1,71:1 */
.payment-logo:nth-child(4) img { max-height: 30px; }  /* Ualá · 1,90:1 */

/* ---- 6 · Proveedores ------------------------------------------------- */
.providers-section { padding-top: clamp(26px, 3.6vw, 44px); padding-bottom: clamp(28px, 3.6vw, 46px); }
.section-heading-row { margin-bottom: 24px; }
.section-heading h2 { letter-spacing: -.04em; }
.section-lead { color: var(--muted); line-height: 1.6; }
.provider-grid { gap: 11px; }
.provider-card {
  min-height: 72px;
  padding: 11px 15px;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(0, 0, 0, .05);
}
.provider-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(0, 0, 0, .05); }
.provider-card img { width: auto; max-width: 84%; max-height: 32px; }
.provider-card:nth-child(1) img { max-height: 38px; }  /* Pragmatic Play · 2,20:1 */
.provider-card:nth-child(2) img { max-height: 46px; }  /* Ruby Play · 1,04:1 (casi cuadrado) */
.provider-card:nth-child(3) img { max-height: 20px; }  /* Evoplay · 5,95:1 */
.provider-card:nth-child(4) img { max-height: 30px; }  /* KA Gaming · 3,06:1 */
.provider-card:nth-child(5) img { max-height: 28px; }  /* Hacksaw · 3,51:1 */
.provider-card:nth-child(6) img { max-height: 22px; }  /* Fastspin · 5,43:1 */

/* ---- 7 · Soporte directo -------------------------------------------- */
.support-section { padding-bottom: clamp(30px, 4vw, 48px); }
.support-panel {
  gap: clamp(24px, 3.2vw, 36px);
  padding: clamp(26px, 3.6vw, 40px);
  border-color: rgba(246, 218, 133, .24);
  background:
    radial-gradient(700px 320px at 0% -10%, rgba(227, 185, 62, .09), transparent 70%),
    linear-gradient(160deg, #16283f 0%, #0c1a2c 60%, #09131f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 56px rgba(0, 0, 0, .34);
}
.support-copy h2 { letter-spacing: -.045em; }
.support-copy > p:last-child { color: var(--muted); }
.support-actions { gap: 12px; }
.support-button {
  grid-template-columns: 46px 1fr 20px;
  gap: 13px;
  min-height: 72px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, .075);
  background: linear-gradient(180deg, rgba(31, 52, 82, .72), rgba(18, 31, 51, .82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.support-button:hover {
  transform: translateX(3px);
  border-color: rgba(246, 218, 133, .34);
  background: linear-gradient(180deg, rgba(40, 66, 103, .82), rgba(23, 40, 65, .88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 24px rgba(0, 0, 0, .26);
}
.support-icon { width: 46px; height: 46px; border-radius: 14px; }
.support-icon-brand img { width: 25px; height: 25px; }
.support-whatsapp .support-icon {
  background: linear-gradient(180deg, rgba(37, 211, 102, .20), rgba(37, 211, 102, .06));
  box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .30);
}
.support-telegram .support-icon {
  background: linear-gradient(180deg, rgba(42, 171, 238, .20), rgba(42, 171, 238, .06));
  box-shadow: inset 0 0 0 1px rgba(42, 171, 238, .30);
}
.support-button strong { font-size: 1rem; font-weight: 700; letter-spacing: -.005em; }
.support-button small { color: var(--muted); font-size: var(--type-small); }
.support-arrow { color: var(--gold-light); opacity: .78; }
.support-button:hover .support-arrow { opacity: 1; }

/* ---- 8 · Video y footer: acabado ------------------------------------ */
.hero-media-top h2 { letter-spacing: -.035em; }
.video-subtitle { color: var(--muted); line-height: 1.55; }
.video-card {
  border-color: rgba(246, 218, 133, .16);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .46), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 0 1px rgba(246, 218, 133, .05);
}
.video-play { box-shadow: 0 0 0 9px rgba(227, 185, 62, .14), 0 16px 34px rgba(0, 0, 0, .38); }
/* El póster vertical es casi todo negro y la tarjeta se leía como un hueco.
   Un halo cálido detrás del play la convierte en superficie iluminada sin
   tocar el vídeo, el póster ni los textos. */
.video-cover {
  background:
    radial-gradient(54% 34% at 50% 45%, rgba(227, 185, 62, .17), transparent 72%),
    linear-gradient(180deg, rgba(3, 5, 9, .10) 0%, rgba(3, 5, 9, .55) 100%);
}
.video-cover:hover {
  background:
    radial-gradient(58% 38% at 50% 45%, rgba(227, 185, 62, .22), transparent 72%),
    linear-gradient(180deg, rgba(3, 5, 9, .06) 0%, rgba(3, 5, 9, .50) 100%);
}
.video-cover-text { color: var(--text); font-size: 12px; font-weight: 800; letter-spacing: .11em; }
.site-footer { color: #8e99a9; }
/* la píldora flotante libraba los legales por 2 px al final del scroll:
   se amplía el colchón para que el "+18" nunca quede debajo */
.site-footer { padding-bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px)); }

/* ---- 9 · Responsive -------------------------------------------------- */
@media (max-width: 780px) {
  .hero-copy { padding: clamp(28px, 4vw, 40px) clamp(22px, 3vw, 34px); }
}
@media (max-width: 600px) {
  /* la píldora vuelve a su altura compacta: en móvil manda el pulgar */
  #cf-widget-root #cf-widget-bubble.cf-bubble { height: 54px; padding: 4px 10px 4px 4px; gap: 10px; }
  #cf-widget-root #cf-widget-bubble .cf-bubble-icon { width: 46px; height: 46px; flex-basis: 46px; }
  #cf-widget-root #cf-widget-bubble .cf-bubble-label { font-size: 14px; }
}
@media (max-width: 520px) {
  .site-header { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .header-actions { gap: 5px; }
  .site-header .js-crear-usuario.is-identified { max-width: none; gap: 7px; padding: 0 12px 0 4px; font-size: 13px; }
  .js-crear-usuario.is-identified .cf-user-ico { width: 28px; height: 28px; flex-basis: 28px; }
  .js-crear-usuario.is-identified .cf-user-ico .cf-icon { width: 16px; height: 16px; }
  .hero-copy { padding: 28px 20px 24px; }
  .hero-copy .eyebrow { margin-bottom: 14px; }
  .hero-copy .hero-actions { margin-top: 24px; }
  /* Con sesión abierta el CTA de cuenta deja de ser media columna: en la
     rejilla 1fr 1fr de móvil el nombre se truncaba ("juanp…"). Ocupa fila
     completa, el nombre entra entero y la flecha se ancla a la derecha. */
  .hero-actions .js-crear-usuario.is-identified { grid-column: 1 / -1; justify-content: flex-start; gap: 10px; padding: 0 16px 0 5px; }
  .hero-actions .js-crear-usuario.is-identified ~ .js-fichas { grid-column: 1 / -1; }
  .hero-actions .js-crear-usuario.is-identified .cf-icon-sm { margin-left: auto; }
  .hero-actions .js-crear-usuario.is-identified .cf-user-ico { width: 36px; height: 36px; flex-basis: 36px; }
  .hero-actions .js-crear-usuario.is-identified .cf-user-ico .cf-icon { width: 20px; height: 20px; }
  .hero-copy .hero-trust { margin-top: 18px; gap: 8px; }
  .hero-copy .trust-item { min-height: 46px; padding: 4px 16px 4px 4px; gap: 9px; }
  .hero-copy .trust-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .hero-copy .trust-icon .cf-icon { width: 19px; height: 19px; }
  .hero-copy .trust-item strong { font-size: 14px; }
  .hero-copy .trust-item small { font-size: 10px; }
  .hero-copy .hero-text-secondary { margin-top: 16px; font-size: 13px; }
  .payment-panel, .support-panel { padding: 22px 18px; border-radius: 20px; }
  .payment-logos { gap: 9px; }
  .payment-logo { min-height: 68px; padding: 11px 13px; }
  .provider-grid { gap: 9px; }
  .provider-card { min-height: 68px; padding: 10px 13px; }
  .support-button { min-height: 68px; padding: 10px 13px; grid-template-columns: 44px 1fr 18px; gap: 11px; }
  .support-icon { width: 44px; height: 44px; }
}
@media (max-width: 360px) {
  .site-header { padding-left: 10px; padding-right: 10px; }
  .site-header .js-crear-usuario.is-identified { gap: 6px; padding: 0 10px 0 4px; font-size: 12px; }
  .js-crear-usuario.is-identified .cf-user-ico { width: 26px; height: 26px; flex-basis: 26px; }
  .js-crear-usuario.is-identified .cf-user-ico .cf-icon { width: 15px; height: 15px; }
  .hero-copy .trust-item { padding-right: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #cf-widget-root #cf-widget-bubble.cf-bubble { transition: none; }
  .payment-logo, .provider-card, .support-button { transition: none; }
}

/* =========================================================
   POLISH V4 · acercar el landing a la maqueta premium.
   Capa ADITIVA y ÚLTIMA: no se edita ninguna regla anterior.
   Sin cambios de lógica, de endpoints ni de textos (el H1 pasa
   a dos <span> con el MISMO texto: "Club" + "Fortuna").
   widget.css sigue intacto (authfix): el CTA flotante se ajusta
   desde aquí con especificidad de id.
   Referencias: maqueta mobile (composición, jerarquía, acabados)
   y fondos azul/dorado (aros, rayos, bokeh, destellos).
   ========================================================= */

/* ---- 1 · Fondo de página: de degradado plano a escenografía ---------- */
/* La maqueta no se apoya en un degradado: tiene aros dorados recortados por
   los bordes, rayos desde arriba, bokeh cálido y destellos, con el centro
   despejado. Eso vive ahora en assets/premium-bg.svg, en una capa fija
   detrás de todo (z-index:-1, pointer-events:none: no toca eventos). */
body {
  background:
    radial-gradient(1200px 680px at 86% -18%, rgba(84, 126, 196, .22), transparent 70%),
    radial-gradient(880px 600px at 0% 22%, rgba(227, 185, 62, .085), transparent 66%),
    radial-gradient(1000px 680px at 52% 106%, rgba(40, 72, 122, .18), transparent 72%),
    linear-gradient(180deg, #0a1930 0%, #071527 30%, #050f1d 64%, #030913 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("assets/premium-bg.svg") center center / cover no-repeat;
}

/* ---- 2 · Header: barra más presente, CTA de oro protagonista -------- */
.site-header {
  min-height: 78px;
  background: linear-gradient(180deg, rgba(6, 13, 26, .96), rgba(4, 9, 18, .98));
  border-bottom: 1px solid rgba(246, 218, 133, .14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .34);
  backdrop-filter: blur(10px);
}
.site-header .btn-header { min-height: 46px; font-size: 13.5px; }
.site-header .btn-header-create,
.site-header .js-crear-usuario.is-identified ~ .js-fichas.btn-gold {
  padding: 0 20px;
  background: linear-gradient(180deg, #f9e4a8 0%, var(--gold-light) 34%, var(--gold) 78%, #d6a92f 100%);
  border: 1px solid rgba(255, 236, 178, .50);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(120, 84, 14, .28),
    0 10px 24px rgba(0, 0, 0, .34),
    0 6px 18px rgba(227, 185, 62, .22);
}
.site-header .js-crear-usuario.is-identified { min-height: 46px; }

/* ---- 3 · Hero: el título manda ------------------------------------- */
/* En la maqueta "Club" (blanco) y "Fortuna" (oro) van en dos líneas y ocupan
   casi todo el ancho. El degradado dorado va con background-clip, con color
   sólido de reserva para navegadores que no lo soporten. */
.hero h1 {
  margin-bottom: 14px;
  font-size: clamp(3.3rem, 14.5vw, 5.2rem);
  font-weight: 600;
  letter-spacing: -.042em;
  line-height: .93;
  text-shadow: none;
}
.hero h1 .h1-line { display: block; }
.hero h1 .h1-gold { color: var(--gold-light); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 .h1-gold {
    background: linear-gradient(168deg, #fdf1cb 0%, #f6da85 24%, #e3b93e 56%, #bb8d2c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 3px 18px rgba(227, 185, 62, .22));
  }
}
.hero-copy { --orn-pos: right -20px center; --orn-size: auto 78%; }
.hero-copy .eyebrow { margin-bottom: 15px; }
.hero-copy .hero-tagline { margin-bottom: 4px; font-size: clamp(1.15rem, 4.4vw, 1.45rem); }

/* El ornamento del hero (cartas + ficha) es el mismo asset de identidad, pero
   en la maqueta está ENCENDIDO, no apagado: se sube su halo y se recorta el
   velo para que no lo apague, dejando limpia la banda inferior de las pills. */
.hero-copy {
  border: 1px solid rgba(246, 218, 133, .18);
  background:
    radial-gradient(140% 118% at 50% 44%, transparent 58%, rgba(2, 6, 13, .44) 100%),
    radial-gradient(112% 124% at 0% 48%, rgba(6, 14, 28, .94) 0%, rgba(6, 14, 28, .52) 36%, transparent 72%),
    linear-gradient(90deg, rgba(7, 16, 30, .94) 0%, rgba(7, 16, 30, .84) 34%, rgba(7, 16, 30, .40) 62%, rgba(7, 16, 30, .02) 92%),
    radial-gradient(64% 66% at 88% 12%, rgba(227, 185, 62, .22), transparent 60%),
    url("assets/hero-ornament.svg") var(--orn-pos) / var(--orn-size) no-repeat,
    linear-gradient(158deg, #16294a 0%, #0d1d36 46%, #091524 100%);
  box-shadow:
    0 34px 78px rgba(0, 0, 0, .46),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 0 0 1px rgba(246, 218, 133, .06);
}
.hero-copy::before {
  background: linear-gradient(0deg, rgba(5, 12, 24, .92) 0%, rgba(5, 12, 24, .42) 18%, rgba(5, 12, 24, 0) 42%);
}

/* ---- 4 · Pills: acabado de la maqueta ------------------------------- */
/* Chip circular de filo dorado sobre relleno oscuro (en la maqueta el icono
   NO va sobre un disco dorado, va sobre un disco oscuro con aro fino). */
.hero-copy .trust-item {
  min-height: 52px;
  padding: 6px 18px 6px 6px;
  border-color: rgba(246, 218, 133, .22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .012)),
    rgba(9, 19, 34, .90);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 0 0 1px rgba(246, 218, 133, .05),
    0 10px 22px rgba(0, 0, 0, .26);
}
.hero-copy .trust-icon {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  color: var(--gold-light);
  background: radial-gradient(120% 120% at 50% 0%, rgba(246, 218, 133, .16), rgba(8, 17, 30, .96) 62%);
  box-shadow:
    inset 0 0 0 1.5px rgba(246, 218, 133, .46),
    0 0 14px rgba(227, 185, 62, .14),
    0 2px 8px rgba(0, 0, 0, .3);
}
.hero-copy .trust-icon .cf-icon { width: 20px; height: 20px; stroke-width: 1.8; }
.hero-copy .trust-item strong { font-size: 15px; }
.hero-copy .trust-item small { color: #b9c3d1; font-size: 10.5px; letter-spacing: .09em; }

/* La fila de tres de la maqueta necesita ~150 px por pill (chip de 40 +
   "PERSONALIZADA" a 9,5 px). Eso son ~560 px de viewport: por debajo siguen a
   ancho completo, que es como se leen bien en un teléfono. */
@media (min-width: 560px) {
  .hero-copy .hero-trust { flex-wrap: nowrap; gap: 9px; }
  .hero-copy .trust-item { flex: 1 1 0; min-width: 0; min-height: 60px; padding: 7px 12px 7px 7px; gap: 10px; }
  .hero-copy .trust-item > span:last-child { display: block; min-width: 0; }
  .hero-copy .trust-item strong { display: block; font-size: 15px; line-height: 1.12; }
  .hero-copy .trust-item small { display: block; margin-top: 2px; font-size: 9.5px; letter-spacing: .085em; line-height: 1.15; }
}

/* El CTA secundario era translúcido y la ficha se transparentaba a través. */
.hero-actions .btn-quiet {
  background: linear-gradient(180deg, #24395c 0%, #182b47 100%);
  border-color: rgba(246, 218, 133, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 10px 24px rgba(0, 0, 0, .34);
}
.hero-actions .btn-quiet:hover { background: linear-gradient(180deg, #2c456d 0%, #1e3454 100%); border-color: rgba(246, 218, 133, .44); }

/* ---- 5 · Superficies de sección: navy visible, no casi negro -------- */
/* En la maqueta las tarjetas son de un navy claramente azul sobre un fondo
   más oscuro. Aquí estaban casi al mismo valor que la página y se perdían. */
.payment-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(246, 218, 133, .16);
  border-radius: var(--r-lg);
  /* OJO con el orden: en `background` la PRIMERA capa va ENCIMA. El velo de
     legibilidad tiene que ir antes que el ornamento, no después. */
  --pay-orn-pos: right -6px top -4px;
  --pay-orn-size: auto 172px;
  background:
    linear-gradient(100deg, rgba(12, 26, 47, .97) 0%, rgba(12, 26, 47, .93) 42%, rgba(12, 26, 47, .55) 64%, rgba(12, 26, 47, .08) 88%),
    url("assets/pay-ornament.svg") var(--pay-orn-pos) / var(--pay-orn-size) no-repeat,
    radial-gradient(660px 300px at 100% -16%, rgba(227, 185, 62, .16), transparent 74%),
    linear-gradient(166deg, #12243f 0%, #0c1b31 58%, #091524 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 22px 52px rgba(0, 0, 0, .36);
}
.support-panel {
  border-color: rgba(246, 218, 133, .26);
  background:
    radial-gradient(720px 340px at 0% -12%, rgba(227, 185, 62, .11), transparent 70%),
    linear-gradient(160deg, #182c46 0%, #0e1e33 58%, #0a1523 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 26px 60px rgba(0, 0, 0, .38);
}
.support-button {
  border: 1px solid rgba(246, 218, 133, .12);
  background: linear-gradient(180deg, rgba(36, 60, 95, .80), rgba(20, 35, 57, .88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.support-button:hover { border-color: rgba(246, 218, 133, .38); background: linear-gradient(180deg, rgba(45, 74, 115, .88), rgba(26, 45, 72, .92)); }
.support-icon { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .10); }
.support-whatsapp .support-icon { box-shadow: inset 0 0 0 1.5px rgba(37, 211, 102, .38), 0 0 14px rgba(37, 211, 102, .12); }
.support-telegram .support-icon { box-shadow: inset 0 0 0 1.5px rgba(42, 171, 238, .38), 0 0 14px rgba(42, 171, 238, .12); }

/* chips claros de logos: filo y sombra de la maqueta */
.payment-logo, .provider-card {
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .30), inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.payment-logo:hover, .provider-card:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, .36), inset 0 0 0 1px rgba(0, 0, 0, .06); }

/* ---- 6 · Bloque del video: enmarcado premium ------------------------ */
/* Se recorta algo la altura (dominaba el scroll en móvil) y la tarjeta pasa
   a tener marco dorado y un halo que la asienta sobre el fondo. */
.hero-media-wrap {
  background: radial-gradient(82% 58% at 50% 46%, rgba(52, 88, 146, .20), transparent 76%);
}
.video-card {
  width: min(100%, calc(56dvh * 9 / 16), 330px);
  border: 1px solid rgba(246, 218, 133, .18);
  border-radius: 20px;
  box-shadow:
    0 30px 66px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(246, 218, 133, .08),
    0 0 40px rgba(227, 185, 62, .10),
    inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.hero-media-top h2 { letter-spacing: -.038em; }
/* El póster (720x1280) ya es un panel navy con marco dorado propio: la capa
   oscura del overlay lo apagaba y el doble marco recargaba. Se aclara el velo
   y se suaviza el borde de la tarjeta. */
.video-cover {
  background:
    radial-gradient(50% 30% at 50% 44%, rgba(227, 185, 62, .20), transparent 72%),
    linear-gradient(180deg, rgba(3, 5, 9, .04) 0%, rgba(3, 5, 9, .34) 100%);
}
.video-cover:hover {
  background:
    radial-gradient(56% 34% at 50% 44%, rgba(227, 185, 62, .26), transparent 72%),
    linear-gradient(180deg, rgba(3, 5, 9, 0) 0%, rgba(3, 5, 9, .26) 100%);
}
.video-play {
  background: linear-gradient(180deg, #f9e4a8 0%, var(--gold-light) 34%, var(--gold) 100%);
  box-shadow: 0 0 0 10px rgba(227, 185, 62, .15), 0 18px 38px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* ---- 7 · CTA flotante: mismo oro, más presencia -------------------- */
#cf-widget-root #cf-widget-bubble.cf-bubble {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .58),
    inset 0 -1px 0 rgba(120, 84, 14, .26),
    0 16px 36px rgba(0, 0, 0, .50),
    0 8px 26px rgba(227, 185, 62, .26);
}
#cf-widget-root #cf-widget-bubble .cf-bubble-icon {
  background: radial-gradient(120% 120% at 50% 0%, #1b3155, #091323 70%);
  box-shadow: inset 0 0 0 1.5px rgba(246, 218, 133, .34);
}

/* ---- 8 · Footer ------------------------------------------------------ */
.site-footer {
  border-top: 1px solid rgba(246, 218, 133, .14);
  color: #98a3b3;
}

/* ---- 9 · Responsive -------------------------------------------------- */
@media (max-width: 780px) {
  /* el ornamento ocupa el cuadrante superior derecho, como en la maqueta, y
     deja libre la banda de las pills. Tamaño en px: al crecer el H1 a dos
     líneas la tarjeta se alargó y un % de su alto ampliaba el dibujo hasta
     cruzar el texto. */
  .hero-copy { --orn-pos: right -22px top 2px; --orn-size: auto 288px; }
}
@media (max-width: 520px) {
  .hero-copy { --orn-pos: right -18px top 0; --orn-size: auto 258px; padding: 26px 18px 22px; }
  .hero h1 { font-size: clamp(3.1rem, 15vw, 3.9rem); margin-bottom: 12px; }
  .hero-copy .hero-tagline { font-size: 1.15rem; }
  .hero-copy .trust-item { min-height: 50px; padding: 5px 16px 5px 5px; }
  .hero-copy .trust-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .hero-copy .trust-icon .cf-icon { width: 19px; height: 19px; }
  .payment-panel { --pay-orn-size: auto 132px; --pay-orn-pos: right -10px top -2px; }
  .site-header { min-height: 72px; }
  /* En móvil el CTA no se ensancha: cada píxel que se lleva se lo quita al
     nombre de la pastilla, que volvía a truncarse en 360-375. */
  .site-header .btn-header { min-height: 44px; padding: 0 14px; font-size: 13px; }
  .site-header .btn-header-create,
  .site-header .js-crear-usuario.is-identified ~ .js-fichas.btn-gold { padding: 0 14px; }
  .site-header .js-crear-usuario.is-identified { min-height: 44px; gap: 6px; padding: 0 11px 0 4px; }
  .js-crear-usuario.is-identified .cf-user-ico { width: 27px; height: 27px; flex-basis: 27px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: clamp(2.9rem, 15.5vw, 3.4rem); }
}

/* =========================================================
   POLISH V5 · integración de las referencias premium del VPS
   (/root/clubfortuna-visual-references/premium-v4/).
   Capa ADITIVA y ÚLTIMA: no se edita ninguna regla anterior.
   Sin cambios de lógica, endpoints ni textos. widget.css intacto.

   Assets derivados de las referencias (recortados, difuminados
   con alpha y recomprimidos a WebP para producción):
     ref 4 -> assets/bg-premium.webp    (fondo de página)
     ref 6 -> assets/hero-art.webp      (ornamento del hero)
     ref 7 -> assets/wallet-art.webp    (medios de pago)
     ref 5 -> assets/video-bg.webp      (bloque del video)
   Todos same-origin: cumplen el CSP (img-src 'self' data:).
   ========================================================= */

/* ---- 1 · Fondo de página: render real, no dibujo vectorial ---------- */
/* El SVG anterior reproducía el lenguaje; la referencia lo trae con
   profundidad, bokeh y metal de verdad. El velo vertical mantiene la
   legibilidad: el fondo acompaña, no compite. */
body::before {
  background:
    linear-gradient(180deg,
      rgba(5, 12, 24, .58) 0%,
      rgba(5, 12, 24, .32) 26%,
      rgba(5, 12, 24, .40) 62%,
      rgba(5, 12, 24, .74) 100%),
    url("assets/bg-premium.webp") center top / cover no-repeat;
}

/* ---- 2 · Hero: ornamento fotográfico -------------------------------- */
.hero-copy {
  background:
    radial-gradient(142% 120% at 50% 44%, transparent 58%, rgba(2, 6, 13, .46) 100%),
    radial-gradient(108% 122% at 0% 48%, rgba(6, 14, 28, .92) 0%, rgba(6, 14, 28, .44) 38%, transparent 74%),
    linear-gradient(90deg, rgba(7, 16, 30, .90) 0%, rgba(7, 16, 30, .70) 32%, rgba(7, 16, 30, .18) 62%, rgba(7, 16, 30, 0) 88%),
    radial-gradient(60% 62% at 86% 16%, rgba(227, 185, 62, .18), transparent 62%),
    url("assets/hero-art.webp") var(--orn-pos) / var(--orn-size) no-repeat,
    linear-gradient(158deg, #16294a 0%, #0d1d36 46%, #091524 100%);
}
/* el arte ya trae su propio difuminado: el zócalo puede ser más suave */
.hero-copy::before {
  background: linear-gradient(0deg, rgba(5, 12, 24, .88) 0%, rgba(5, 12, 24, .34) 16%, rgba(5, 12, 24, 0) 38%);
}
/* "Atención directa · Club Fortuna" del bloque del hero: fuera, explícito */
.media-footer { display: none !important; }

/* ---- 3 · Fila del header: dos pastillas, SIEMPRE lado a lado -------- */
/* Regla dura: la fila nunca envuelve. El CTA no se encoge nunca; la que
   cede ancho es la pastilla de usuario, y su nombre se corta con elipsis.
   El tope es un clamp en vw: así el CTA tiene sitio garantizado en
   cualquier pantalla sin depender de breakpoints sueltos. */
.site-header { flex-wrap: nowrap; }
.header-actions { flex-wrap: nowrap; min-width: 0; }
.site-header .js-fichas { flex: 0 0 auto; }
.site-header .js-crear-usuario.is-identified {
  flex: 0 1 auto;
  min-width: 0;
  max-width: clamp(102px, 38vw, 220px);
  overflow: hidden;
}
.site-header .js-crear-usuario.is-identified .cf-account-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.site-header .js-crear-usuario.is-identified .cf-user-ico { flex: 0 0 auto; }

/* ---- 4 · Medios de pago: cartera de la referencia 7 ----------------- */
/* El arte trae alpha difuminado por la izquierda, así que el velo puede ser
   ligero: no hay que apagar la cartera para que el texto se lea. */
.payment-panel {
  --pay-orn-pos: right -4px top 0;
  --pay-orn-size: auto 224px;
  background:
    linear-gradient(100deg, rgba(11, 24, 44, .94) 0%, rgba(11, 24, 44, .78) 38%, rgba(11, 24, 44, .22) 60%, rgba(11, 24, 44, 0) 84%),
    url("assets/wallet-art.webp") var(--pay-orn-pos) / var(--pay-orn-size) no-repeat,
    radial-gradient(700px 320px at 100% -14%, rgba(227, 185, 62, .14), transparent 74%),
    linear-gradient(166deg, #13263f 0%, #0d1c32 58%, #091524 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 56px rgba(0, 0, 0, .40);
}
/* tarjetas de logo: blanco cálido con canto, no gris plano */
.payment-logo {
  min-height: 78px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdf7 0%, #f2ece0 100%);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 0 0 1px rgba(120, 96, 42, .13);
}
.payment-logo:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(184, 137, 42, .30);
}
.provider-card {
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdf7 0%, #f2ece0 100%);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 0 0 1px rgba(120, 96, 42, .12);
}
.provider-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, #fffefb 0%, #f6f1e7 100%);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(184, 137, 42, .28);
}

/* ---- 5 · Bloque del video: contenedor propio ------------------------ */
/* Dejaba de ser un bloque suelto sobre el fondo: pasa a panel con la misma
   escenografía que el resto (referencia 5) y marco dorado fino. */
.hero-media-wrap {
  position: relative;
  padding: clamp(18px, 3vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(246, 218, 133, .17);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(7, 17, 32, .90) 0%, rgba(7, 16, 30, .82) 42%, rgba(6, 14, 27, .93) 100%),
    url("assets/video-bg.webp") center top / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 56px rgba(0, 0, 0, .40);
}
.video-card {
  border-color: rgba(246, 218, 133, .26);
  box-shadow:
    0 26px 58px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(246, 218, 133, .10),
    0 0 46px rgba(227, 185, 62, .13),
    inset 0 0 0 1px rgba(255, 255, 255, .07);
}

/* ---- 6 · Responsive ------------------------------------------------- */
@media (max-width: 780px) {
  .hero-copy { --orn-pos: right -12px top -4px; --orn-size: auto 272px; }
  .hero-media-wrap { padding: 18px 16px 20px; border-radius: 20px; }
}
@media (max-width: 520px) {
  /* el cluster bajaba sobre la tagline: sube y encoge un punto */
  .hero-copy { --orn-pos: right -8px top -6px; --orn-size: auto 232px; }
  /* la cartera se cortaba por arriba: entra entera */
  .payment-panel { --pay-orn-size: auto 172px; --pay-orn-pos: right -4px top 2px; }
  .hero-media-wrap { padding: 16px 14px 18px; border-radius: 18px; }
}
@media (max-width: 380px) {
  .payment-panel { --pay-orn-size: auto 132px; }
}
/* en pantallas anchas la referencia (vertical) se recentra para no perder
   los ornamentos de los cantos */
@media (min-width: 1024px) {
  body::before { background-position: center center, center center; }
}

/* =========================================================
   POLISH V6 · bloque del video (en su sitio, dentro del hero).
   Capa ADITIVA y ÚLTIMA: no se edita ninguna regla anterior.
   Sin cambios de DOM salvo el atributo `poster` del <video>.
   Sin tocar lógica del video, widget, auth ni backend.
   ========================================================= */

/* ---- 1 · Entorno del bloque: menos velo, más escenografía ----------- */
/* El velo de V5 (.90/.82/.93) apagaba el ornamento hasta dejarlo en nada.
   Se aclara y se añade un halo cálido BAJO la tarjeta para asentarla.
   Ojo: en `background` la primera capa va encima, por eso el halo va antes
   que el velo y el velo antes de la foto. */
.hero-media-wrap {
  border-color: rgba(246, 218, 133, .22);
  background:
    radial-gradient(64% 42% at 50% 58%, rgba(227, 185, 62, .15), transparent 72%),
    linear-gradient(180deg, rgba(7, 17, 32, .76) 0%, rgba(7, 16, 30, .58) 40%, rgba(6, 14, 27, .86) 100%),
    url("assets/video-bg.webp") center top / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 26px 60px rgba(0, 0, 0, .42);
}

/* ---- 2 · Jerarquía del texto: 1 · 2 · 3 --------------------------- */
.hero-media-top h2 {
  margin-bottom: 0;
  color: var(--text);
  font-size: clamp(1.7rem, 5.6vw, 2.35rem);
  letter-spacing: -.035em;
  line-height: 1.04;
  text-shadow: 0 2px 18px rgba(2, 6, 13, .55);
}
.video-lead {
  margin-top: 9px;
  color: var(--gold-light);
  font-size: clamp(1.02rem, 3.5vw, 1.2rem);
  letter-spacing: -.005em;
  text-shadow: 0 1px 14px rgba(2, 6, 13, .5);
}
.video-subtitle {
  max-width: 44ch;
  margin: 8px 0 18px;
  color: #b9c3d1;
  font-size: var(--type-small);
  line-height: 1.55;
}

/* ---- 3 · Tarjeta: marco fino + doble filo + halo -------------------- */
.video-card {
  border: 1px solid rgba(246, 218, 133, .34);
  border-radius: 22px;
  box-shadow:
    0 30px 64px rgba(0, 0, 0, .58),
    0 0 0 1px rgba(246, 218, 133, .12),
    0 0 56px rgba(227, 185, 62, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .08);
}
/* el póster nuevo ya trae su propio marco y zócalo: el velo del overlay
   pasa a ser casi nada, sólo lo justo para que el rótulo tenga contraste */
.video-cover {
  gap: 14px;
  background:
    radial-gradient(46% 26% at 50% 49%, rgba(227, 185, 62, .18), transparent 70%),
    linear-gradient(180deg, rgba(3, 5, 9, 0) 40%, rgba(3, 5, 9, .26) 100%);
}
.video-cover:hover {
  background:
    radial-gradient(52% 30% at 50% 49%, rgba(227, 185, 62, .24), transparent 70%),
    linear-gradient(180deg, rgba(3, 5, 9, 0) 44%, rgba(3, 5, 9, .20) 100%);
}
.video-play {
  width: 72px; height: 72px;
  background: linear-gradient(180deg, #fdf1cb 0%, var(--gold-light) 30%, var(--gold) 72%, #d6a92f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 0 0 10px rgba(227, 185, 62, .13),
    0 0 0 1px rgba(246, 218, 133, .45),
    0 18px 40px rgba(0, 0, 0, .46);
}
.video-cover:hover .video-play { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 13px rgba(227,185,62,.17), 0 0 0 1px rgba(246,218,133,.6), 0 22px 46px rgba(0,0,0,.5); }
.video-cover-text {
  color: var(--gold-light);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-shadow: 0 1px 10px rgba(2, 6, 13, .8);
}

/* ---- 4 · Responsive ------------------------------------------------- */
@media (max-width: 780px) {
  .hero-media-top h2 { font-size: clamp(1.68rem, 6.6vw, 2.1rem); }
  .video-card { border-radius: 20px; }
}
@media (max-width: 520px) {
  .video-subtitle { max-width: none; margin-bottom: 16px; }
  .video-play { width: 66px; height: 66px; }
  .video-card { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-cover, .video-play { transition: none; }
}

/* =========================================================
   POLISH V7 · mini-player del video del hero.
   Capa ADITIVA y ÚLTIMA. El video NO se mueve del hero: lo único
   que cambia es la caja de .video-card. Sin tocar widget.css,
   script.js ni widget.js.

   Mapa de capas de la página (por eso el mini-player vive en 880):
     header 100 · auth-launcher 900 · welcome-widget 950 ·
     modal de cuenta 1000 · widget root 9999 · notify 10001/10002
   El mini-player queda POR DEBAJO de todo lo interactivo, y además se
   oculta mientras hay modal de cuenta, notify o chat abierto.
   ========================================================= */

:root { --mini-h: 320px; --mini-right: 16px; --mini-bottom: 96px; }

/* el botón de cierre sólo existe en modo flotante */
.cf-mini-close { display: none; }

.video-card.is-floating {
  position: fixed;
  z-index: 880;
  right: var(--mini-right);
  bottom: var(--mini-bottom);
  width: auto;                       /* shrink-to-fit: lo marca el alto */
  height: var(--mini-h);
  max-height: calc(100dvh - 200px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(246, 218, 133, .38);
  border-radius: 16px;
  background: #050d1a;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, .62),
    0 0 0 1px rgba(246, 218, 133, .14),
    0 0 30px rgba(227, 185, 62, .12);
}
/* el alto manda y la relación 9/16 saca el ancho: nunca se deforma */
.video-card.is-floating .hero-video {
  width: auto;
  height: 100%;
  max-width: none;
}

/* ---- botón X ---- */
.video-card.is-floating .cf-mini-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(246, 218, 133, .34);
  border-radius: 50%;
  color: var(--gold-light);
  background: rgba(6, 13, 26, .84);
}
.video-card.is-floating .cf-mini-close svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round;
}
.video-card.is-floating .cf-mini-close:hover { background: rgba(10, 21, 40, .94); border-color: var(--gold-light); }
.video-card.is-floating .cf-mini-close:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }

/* ---- el mini-player cede ante cuenta, notify y chat ---- */
body.cf-account-open .video-card.is-floating,
body:has(#cf-notify-prompt) .video-card.is-floating,
body:has(#cf-widget-bubble[aria-expanded="true"]) .video-card.is-floating {
  /* `animation: none` es necesario: la animación de entrada usa fill `both` y
     mantendría opacity:1 pisando esta regla. Sin ella el ocultado dependería
     sólo de `visibility`. */
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---- entrada suave, discreta ---- */
@media (prefers-reduced-motion: no-preference) {
  .video-card.is-floating { animation: cf-mini-in .22s cubic-bezier(.2, .7, .3, 1) both; }
  @keyframes cf-mini-in {
    from { opacity: 0; transform: translateY(12px) scale(.965); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---- responsive: por encima de la píldora "Hablar con cajero" ------ */
@media (max-width: 780px) { :root { --mini-h: 268px; } }
@media (max-width: 520px) {
  :root {
    --mini-h: 206px;
    --mini-right: 12px;
    --mini-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .video-card.is-floating { border-radius: 14px; }
  .video-card.is-floating .cf-mini-close { width: 28px; height: 28px; top: 6px; right: 6px; }
}
@media (max-width: 360px) { :root { --mini-h: 184px; } }

/* =========================================================
   POLISH V8 · pasada mobile-first.
   Capa ADITIVA y ÚLTIMA: no se edita ninguna regla anterior.
   Sin cambios de DOM, de textos, de JS ni de lógica.

   Hallazgos que corrige (medidos, no estimados):
   P0 · a 320 px la fila del header medía 334 px con sesión cerrada
        ("Crear usuario" + "Hablar con cajero" son dos botones nowrap
        que no encogen) -> scroll horizontal.
   P1 · los 3 badges apilados a ancho completo comían 145 px del hero
        y se leían como piezas caídas, no como una composición.
   P1 · el bloque del video medía 657 px a 390 px: el 24 % de la página.
   P2 · eyebrow a 10,5 px y ritmo vertical suelto en el hero.
   ========================================================= */

/* ---- P0 · la fila del header no puede desbordar nunca -------------- */
/* Red de seguridad estructural: la pastilla de cuenta cede ancho en
   CUALQUIER estado (antes sólo con sesión abierta). El CTA nunca encoge. */
.site-header .js-crear-usuario { flex: 0 1 auto; min-width: 0; }
.site-header .js-crear-usuario .cf-account-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Y por debajo de 375 px se aprieta lo justo para que las DOS etiquetas
   entren enteras, sin recurrir a la elipsis. */
@media (max-width: 374px) {
  .site-header { gap: 7px; min-height: 66px; padding-left: 8px; padding-right: 8px; }
  .header-actions { gap: 5px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-mark img { width: 30px; height: 30px; }
  .site-header .btn-header { min-height: 42px; padding: 0 11px; font-size: 12px; }
  .site-header .btn-header-create,
  .site-header .js-crear-usuario.is-identified ~ .js-fichas.btn-gold { padding: 0 11px; }
  .site-header .js-crear-usuario.is-identified { gap: 5px; padding: 0 9px 0 3px; }
  .js-crear-usuario.is-identified .cf-user-ico { width: 25px; height: 25px; flex-basis: 25px; }
  .js-crear-usuario.is-identified .cf-user-ico .cf-icon { width: 14px; height: 14px; }
}

/* ---- P1 · badges: una sola tira, no tres piezas caídas ------------- */
/* Tres columnas con icono arriba dentro de un único contenedor, separadas
   por filetes. Pasa de 145 px a ~80 px y se lee como un componente. Los
   .trust-divider ya existen en el DOM: se reutilizan como los filetes. */
@media (max-width: 559px) {
  .hero-copy .hero-trust {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    align-items: stretch;
    margin-top: 16px;
    padding: 2px;
    border: 1px solid rgba(246, 218, 133, .20);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .012)),
      rgba(9, 19, 34, .90);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 22px rgba(0, 0, 0, .26);
  }
  .hero-copy .trust-item {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    /* arriba, no centrado: así los iconos y los rótulos grandes quedan
       enrasados aunque "Juego responsable" ocupe dos líneas y los otros una */
    justify-content: flex-start;
    gap: 6px;
    min-height: 0;
    padding: 10px 4px 9px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: center;
  }
  .hero-copy .trust-divider {
    display: block;
    flex: 0 0 1px;
    align-self: stretch;
    width: 1px;
    height: auto;
    margin: 9px 0;
    background: linear-gradient(180deg, transparent, rgba(246, 218, 133, .24), transparent);
  }
  .hero-copy .trust-icon { width: 30px; height: 30px; flex: 0 0 30px; }
  .hero-copy .trust-icon .cf-icon { width: 16px; height: 16px; }
  .hero-copy .trust-item > span:last-child { display: block; min-width: 0; }
  .hero-copy .trust-item strong { display: block; font-size: 13px; line-height: 1.1; }
  /* dos líneas reservadas para todos: los tres pies acaban a la misma altura */
  .hero-copy .trust-item small { display: block; min-height: 19px; margin-top: 2px; font-size: 8px; letter-spacing: .05em; line-height: 1.2; }
}
@media (max-width: 340px) {
  .hero-copy .trust-item small { font-size: 7.5px; letter-spacing: .02em; }
  .hero-copy .trust-item strong { font-size: 12.5px; }
}

/* ---- P1 · bloque del video: menos altura, misma proporción --------- */
/* La relación 9/16 no se toca: sólo baja el tope de altura. */
@media (max-width: 559px) {
  .hero-media-wrap { padding: 15px 13px 16px; }
  .hero-media-top h2 { font-size: clamp(1.5rem, 6.2vw, 1.9rem); }
  .video-lead { margin-top: 7px; font-size: 1rem; }
  .video-subtitle { margin: 6px 0 13px; font-size: 12.5px; }
  .video-card { width: min(100%, calc(48dvh * 9 / 16), 265px); }
}

/* ---- P2 · ritmo vertical del hero y de las secciones --------------- */
@media (max-width: 559px) {
  .hero { padding-top: 14px; padding-bottom: 24px; }
  .hero-copy { padding: 22px 18px 20px; }
  .hero-copy .eyebrow { margin-bottom: 12px; font-size: 11px; }
  .hero-copy .hero-tagline { margin-bottom: 0; }
  .hero-copy .hero-actions { margin-top: 20px; }
  .hero-copy .hero-text-secondary { margin-top: 13px; font-size: 12.5px; line-height: 1.5; }
  .payment-section { padding-bottom: 22px; }
  .providers-section { padding-top: 22px; padding-bottom: 24px; }
  .section-heading-row { margin-bottom: 18px; }
  .support-section { padding-bottom: 26px; }
}

/* ---- Área táctil del cierre del mini-player ------------------------ */
/* El icono sigue midiendo 28-30 px (no se agranda de más), pero la zona
   pulsable pasa a ~46 px, que es lo que toca el dedo. */
.video-card.is-floating .cf-mini-close::after {
  content: "";
  position: absolute;
  inset: -8px;
}

/* ---- P0 · modal de auth con el teclado abierto ---------------------- */
/* El CTA del modal es `position: sticky; bottom: 0` en <=600 px. Al abrirse
   el teclado el viewport se queda en ~420 px y el botón pegado se pinta
   ENCIMA del input de usuario (los sticky pintan sobre los hermanos
   estáticos): el campo quedaba visible pero no pulsable.
   Dos arreglos: la barra pegada gana fondo propio para no flotar sobre el
   contenido, y el contenedor reserva hueco al desplazar el campo enfocado. */
@media (max-width: 600px) {
  .cf-modal-card {
    scroll-padding-bottom: 86px;
    scroll-behavior: auto;
  }
  .cf-modal-card .btn {
    box-shadow: 0 -12px 16px 12px var(--surface-1);
  }
  #cf-registro-form, #cf-login-form { padding-bottom: 4px; }
}

/* =========================================================
   POLISH V9 · VIDEO: TEASER EN EL LANDING + MODAL DE
   REPRODUCCION. Capa aditiva: no se edita ninguna regla
   anterior, solo se añade al final (gana por orden de fuente).

   Por que: el reproductor 9:16 embebido comia ~470px de alto
   en movil. Ahora el landing muestra una tarjeta 16:10 que
   dispara un modal dedicado donde el video SI es 9:16.
   El <video> vive dentro del modal y nunca se reparenta.

   MAPA DE CAPAS (medido, no inventado):
     header 100 · auth-launcher 900 · welcome-widget 950
     >>> MODAL DE VIDEO 990 <<<  · cf-modal (auth) 1000
     #cf-widget-root 9999 · visor de imagen 10001 · notify 10002
   El modal de video se mete a proposito en el hueco 950-1000:
   tapa header y launcher, pero el modal de auth siempre queda
   por encima. El widget (9999) se neutraliza por clase mientras
   el video esta abierto, y los CTA cierran el video antes de
   abrir chat o auth, asi que nunca hay dos overlays peleando.
   ========================================================= */

/* ---------------------------------------------------------
   1 · TEASER DEL LANDING
   --------------------------------------------------------- */
.video-teaser {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(246, 218, 133, .26);
  border-radius: 18px;
  background: var(--bg-deep);
  box-shadow: 0 22px 46px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255, 255, 255, .04);
  text-align: center;
  transition: border-color var(--t-base, .2s ease), box-shadow var(--t-base, .2s ease);
}
.video-teaser-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.video-teaser-inner {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 14px 16px;
}
.video-teaser-text {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.2;
  text-transform: uppercase;
}
.video-teaser-note {
  max-width: 24ch;
  color: rgba(214, 223, 235, .82);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.35;
}
.video-teaser:hover { border-color: rgba(246, 218, 133, .44); box-shadow: 0 26px 54px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.video-teaser:hover .video-play { transform: scale(1.05); }
.video-teaser:active { transform: translateY(1px); }
.video-teaser:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }

@media (max-width: 430px) {
  .video-teaser { border-radius: 16px; }
  .video-teaser-note { font-size: 11px; }
}
@media (max-width: 374px) {
  .video-teaser-inner { gap: 8px; padding: 12px; }
  .video-teaser-text { font-size: 11px; letter-spacing: .09em; }
  .video-teaser-note { font-size: 10.5px; }
}
@media (min-width: 560px) {
  /* en tablet la columna es unica y el teaser se iria a ~700px de ancho:
     se acota para que siga leyendose como tarjeta, no como banner. */
  .video-teaser { max-width: 520px; margin-inline: auto; }
}
@media (min-width: 981px) {
  .video-teaser-text { font-size: 13px; }
  .video-teaser-note { font-size: 12.5px; }
}

/* ---------------------------------------------------------
   2 · BLOQUEO DEL SCROLL DE FONDO
   position:fixed + top negativo, no solo overflow:hidden:
   iOS Safari ignora overflow:hidden en body y el fondo sigue
   desplazandose. Al cerrar, video-modal.js hace scrollTo(scrollY)
   y el usuario vuelve al pixel exacto donde estaba.
   --------------------------------------------------------- */
body.cf-video-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  padding-right: var(--cf-sbw, 0px);
}
/* el widget (9999) esta por encima de cualquier overlay: se neutraliza
   entero mientras el video esta abierto, igual que hace el AUTH FIX con
   el modal de cuenta. Es solo visual: widget.js no se toca. */
body.cf-video-open #cf-widget-root { opacity: 0; visibility: hidden; pointer-events: none; }
body.cf-video-open .cf-auth-launcher,
body.cf-video-open .cf-welcome-widget { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------
   3 · MODAL DE VIDEO
   --------------------------------------------------------- */
:root {
  --cf-vm-gutter: 14px;
  /* alto reservado para cerrar + CTA + paddings, con holgura.
     Es el unico numero del que depende el tamaño del reproductor. */
  --cf-vm-chrome: 196px;
}

.cf-video-modal { position: fixed; inset: 0; z-index: 990; }
.cf-video-modal[hidden] { display: none; }

.cf-video-scrim {
  position: absolute;
  inset: 0;
  /* casi opaco a proposito: si el navegador no soporta backdrop-filter el fondo
     sigue siendo ilegible detras del scrim, no se ve el landing por transparencia. */
  background: radial-gradient(120% 92% at 50% 10%, rgba(12, 28, 55, .965), rgba(1, 4, 9, .986) 62%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.cf-video-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding:
    calc(env(safe-area-inset-top, 0px) + 10px)
    calc(env(safe-area-inset-right, 0px) + var(--cf-vm-gutter))
    calc(env(safe-area-inset-bottom, 0px) + 10px)
    calc(env(safe-area-inset-left, 0px) + var(--cf-vm-gutter));
}

.cf-video-close {
  align-self: flex-end;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border: 1px solid rgba(246, 218, 133, .34);
  border-radius: 14px;
  color: var(--gold-light);
  background: rgba(10, 21, 40, .86);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
}
.cf-video-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.cf-video-close:hover { border-color: var(--gold-light); background: rgba(16, 32, 58, .94); }
.cf-video-close:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }

.cf-video-stage { position: relative; flex: 0 1 auto; min-height: 0; }

/* El reproductor: 9:16 SIEMPRE. El ancho sale del menor entre
   lo que cabe a lo ancho, lo que cabe a lo alto y un tope de
   420px para que en tablet/desktop siga teniendo forma de movil. */
.cf-video-frame {
  position: relative;
  margin: 0;
  width: min(
    calc(100vw - 2 * var(--cf-vm-gutter) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)),
    calc((100dvh - var(--cf-vm-chrome) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 9 / 16),
    420px
  );
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid rgba(246, 218, 133, .30);
  border-radius: 18px;
  background: #03060b;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.cf-video-el {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  background: #03060b;
}

/* final del video: no se cierra solo. Velo discreto + repetir,
   y el CTA de cajero gana presencia. */
.cf-video-modal.is-ended .cf-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(3, 7, 14, .52), rgba(3, 7, 14, .74));
}
.cf-video-replay {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(246, 218, 133, .45);
  border-radius: var(--r-pill);
  color: var(--text);
  background: rgba(8, 17, 32, .9);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}
.cf-video-replay[hidden] { display: none; }
.cf-video-replay svg { width: 18px; height: 18px; fill: none; stroke: var(--gold-light); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cf-video-replay:hover { border-color: var(--gold-light); background: rgba(14, 28, 50, .94); }
.cf-video-replay:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }

.cf-video-error { max-width: 34ch; margin: 12px 0 0; color: var(--danger); font-size: 13px; line-height: 1.45; text-align: center; }
.cf-video-error[hidden] { display: none; }

/* ---------------------------------------------------------
   4 · CTA DEL MODAL · reutilizan los mecanismos existentes
   --------------------------------------------------------- */
.cf-video-actions {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  max-width: 420px;
  padding-top: 14px;
}
.cf-video-cta { width: 100%; }
.cf-video-modal.is-ended .cf-video-cta { box-shadow: 0 0 0 3px rgba(227, 185, 62, .22), 0 16px 32px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .32); }
.cf-video-alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-sm);
  color: rgba(190, 202, 218, .92);
  background: none;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(170, 181, 196, .4);
  text-underline-offset: 4px;
}
.cf-video-alt:hover { color: var(--gold-light); text-decoration-color: rgba(246, 218, 133, .55); }
.cf-video-alt:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
/* con sesion abierta "Crear usuario" sobra: queda solo hablar con cajero */
body:has(.js-crear-usuario.is-identified) .cf-video-alt { display: none; }

/* ---------------------------------------------------------
   5 · ENTRADA
   --------------------------------------------------------- */
@keyframes cf-vm-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes cf-vm-scrim { from { opacity: 0; } to { opacity: 1; } }
.cf-video-modal.is-open .cf-video-dialog { animation: cf-vm-in .24s cubic-bezier(.2, .7, .3, 1) both; }
.cf-video-modal.is-open .cf-video-scrim { animation: cf-vm-scrim .2s ease both; }

@media (prefers-reduced-motion: reduce) {
  .cf-video-modal.is-open .cf-video-dialog,
  .cf-video-modal.is-open .cf-video-scrim { animation: none; }
  .video-teaser, .video-teaser:hover .video-play { transition: none; transform: none; }
}

/* ---------------------------------------------------------
   6 · PANTALLAS CORTAS Y LANDSCAPE
   --------------------------------------------------------- */
@media (max-height: 640px) {
  /* prioridad declarada: hablar con cajero. El enlace secundario se retira
     y el reproductor se queda con el alto que sobra. */
  :root { --cf-vm-chrome: 150px; }
  .cf-video-alt { display: none; }
  .cf-video-close { margin-bottom: 6px; }  /* 44x44 se mantiene: es el minimo tactil */
  .cf-video-actions { padding-top: 10px; }
}
@media (max-width: 374px) {
  :root { --cf-vm-gutter: 10px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  :root { --cf-vm-chrome: 92px; }
  .cf-video-close {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    right: calc(env(safe-area-inset-right, 0px) + 8px);
    margin: 0;
  }
  .cf-video-actions { max-width: 320px; padding-top: 10px; }
}