/* ============================================================
   ofertia.pro — hoja de estilos principal
   Concepto visual: "La Boleta" — papel de agencia, tinta azul,
   celeste estructural, naranja sólo para acciones.
   ============================================================ */

:root{
    /* Superficies */
    --paper:        #F1F4F2;
    --paper-deep:   #E4EAE7;
    --card:         #FFFFFF;
    --ink:          #0F2338;
    --ink-2:        #34506B;
    --ink-soft:     #5C7185;
    --line:         #D5DEDA;
    --line-strong:  #B9C6C1;

    /* Acentos */
    --celeste:      #2F93C8;
    --celeste-deep: #17608B;
    --celeste-wash: #E7F2F8;
    --naranja:      #C9481A;
    --naranja-hot:  #E4671F;
    --naranja-wash: #FBEDE6;
    --verde:        #1F7A5A;
    --verde-wash:   #E6F2ED;

    /* Tipografía */
    --display: "Chivo", "Helvetica Neue", Arial, sans-serif;
    --body:    "Asap", "Segoe UI", Roboto, Arial, sans-serif;
    --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

    /* Métrica */
    --wrap:    1120px;
    --radius:  14px;
    --radius-s: 8px;
    --shadow:  0 1px 2px rgba(15,35,56,.06), 0 10px 30px -18px rgba(15,35,56,.35);
    --shadow-lift: 0 2px 4px rgba(15,35,56,.07), 0 22px 44px -22px rgba(15,35,56,.45);
}

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

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

body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:17px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    background-image:
        linear-gradient(var(--paper-deep) 1px, transparent 1px),
        linear-gradient(90deg, var(--paper-deep) 1px, transparent 1px);
    background-size:34px 34px;
    background-position:-1px -1px;
}

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

a{ color:var(--celeste-deep); }
a:hover{ color:var(--naranja); }

:focus-visible{
    outline:3px solid var(--celeste);
    outline-offset:2px;
    border-radius:3px;
}

.wrap{
    width:100%;
    max-width:var(--wrap);
    margin-inline:auto;
    padding-inline:24px;
}

.skip-link{
    position:absolute;
    left:-9999px;
    top:0;
    background:var(--ink);
    color:#fff;
    padding:12px 18px;
    z-index:200;
    font-family:var(--mono);
    font-size:13px;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Tipografía ---------- */

h1,h2,h3,h4{
    font-family:var(--display);
    font-weight:900;
    line-height:1.08;
    letter-spacing:-.018em;
    margin:0 0 .5em;
    color:var(--ink);
}
h1{ font-size:clamp(2.1rem, 1.35rem + 3.1vw, 3.6rem); }
h2{ font-size:clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem); }
h3{ font-size:1.19rem; font-weight:700; letter-spacing:-.008em; }
h4{ font-size:1.02rem; font-weight:700; letter-spacing:0; }

p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

.lead{
    font-size:1.16rem;
    color:var(--ink-2);
    line-height:1.6;
}

.eyebrow{
    font-family:var(--mono);
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.19em;
    text-transform:uppercase;
    color:var(--celeste-deep);
    margin:0 0 14px;
    display:flex;
    align-items:center;
    gap:10px;
}
.eyebrow::before{
    content:"";
    width:26px;
    height:2px;
    background:var(--celeste);
    flex:none;
}

.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ---------- Cinta superior ---------- */

.ribbon{
    background:var(--ink);
    color:#C8D8E4;
    font-family:var(--mono);
    font-size:.7rem;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.ribbon-in{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:36px;
    flex-wrap:wrap;
}
.ribbon-age{
    background:var(--naranja-hot);
    color:#fff;
    font-weight:600;
    padding:2px 8px;
    border-radius:3px;
    letter-spacing:.06em;
}
.ribbon-sep{ color:#3D5A75; }

/* ---------- Cabecera ---------- */

.site-head{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(241,244,242,.93);
    backdrop-filter:saturate(150%) blur(10px);
    border-bottom:1px solid var(--line);
    transition:box-shadow .25s ease;
}
.site-head.is-stuck{ box-shadow:0 10px 26px -22px rgba(15,35,56,.7); }

.head-in{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:68px;
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:11px;
    text-decoration:none;
    color:var(--ink);
    flex:none;
}
.brand-mark{
    width:34px;
    height:34px;
    flex:none;
    display:block;
}
.brand-name{
    font-family:var(--display);
    font-weight:900;
    font-size:1.24rem;
    letter-spacing:-.03em;
}
.brand-tld{ color:var(--celeste-deep); }

.nav-toggle{
    display:none;
    align-items:center;
    gap:8px;
    background:var(--card);
    border:1px solid var(--line-strong);
    border-radius:var(--radius-s);
    padding:9px 13px;
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink);
    cursor:pointer;
}
.nav-toggle-bars{ display:block; width:16px; height:10px; position:relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after,
.nav-toggle-bars span{
    content:"";
    position:absolute;
    left:0; right:0;
    height:2px;
    background:var(--ink);
    border-radius:2px;
}
.nav-toggle-bars::before{ top:0; }
.nav-toggle-bars span{ top:4px; }
.nav-toggle-bars::after{ bottom:0; }

.site-nav{
    display:flex;
    align-items:center;
    gap:26px;
}
.site-nav a.nav-link{
    position:relative;
    text-decoration:none;
    color:var(--ink-2);
    font-size:.95rem;
    font-weight:500;
    padding:6px 0;
    white-space:nowrap;
}
.site-nav a.nav-link:hover{ color:var(--ink); }
.site-nav a.nav-link.is-active{ color:var(--ink); font-weight:600; }
.site-nav a.nav-link.is-active::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-2px;
    height:2px;
    background:var(--naranja-hot);
}

.lang-switch{
    display:inline-flex;
    align-items:center;
    gap:2px;
    border:1px solid var(--line-strong);
    background:var(--card);
    border-radius:999px;
    padding:3px;
    font-family:var(--mono);
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.08em;
    flex:none;
}
.lang-switch a{
    text-decoration:none;
    color:var(--ink-soft);
    padding:4px 11px;
    border-radius:999px;
    line-height:1.4;
}
.lang-switch a:hover{ color:var(--ink); background:var(--paper-deep); }
.lang-switch a.is-current{
    background:var(--ink);
    color:#fff;
}

/* ---------- Botones ---------- */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-family:var(--display);
    font-weight:700;
    font-size:1rem;
    letter-spacing:-.005em;
    line-height:1.2;
    padding:15px 26px;
    border-radius:var(--radius-s);
    border:1px solid transparent;
    text-decoration:none;
    cursor:pointer;
    transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
    background:var(--naranja);
    color:#fff;
    box-shadow:0 12px 24px -16px rgba(201,72,26,.9);
}
.btn-primary:hover{ background:var(--naranja-hot); color:#fff; }

.btn-ink{
    background:var(--ink);
    color:#fff;
}
.btn-ink:hover{ background:#1B3651; color:#fff; }

.btn-outline{
    background:var(--card);
    color:var(--ink);
    border-color:var(--line-strong);
}
.btn-outline:hover{ border-color:var(--ink); color:var(--ink); }

.btn-lg{ font-size:1.08rem; padding:17px 32px; }
.btn-block{ width:100%; }

.btn-note{
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-top:14px;
}

/* ---------- Estructura de secciones ---------- */

main{ display:block; }

.section{ padding:clamp(48px, 6vw, 84px) 0; }
.section-tight{ padding:clamp(34px, 4vw, 56px) 0; }
.section-paper{ background:var(--paper-deep); border-block:1px solid var(--line); }
.section-ink{
    background:var(--ink);
    color:#CFDCE7;
    border-block:1px solid #0A1826;
}
.section-ink h2,
.section-ink h3{ color:#fff; }
.section-ink .section-head p,
.section-ink .lead,
.section-ink p{ color:#A9C0D2; }
.section-ink .eyebrow{ color:#6FC0E8; }
.section-ink .eyebrow::before{ background:#6FC0E8; }
.section-ink a{ color:#8FD1F2; }

.section-head{ max-width:66ch; margin-bottom:34px; }
.section-head p{ color:var(--ink-2); }

/* ---------- Hero de portada ---------- */

.hero{
    position:relative;
    padding:clamp(46px, 6.5vw, 96px) 0 clamp(52px, 6vw, 92px);
    overflow:hidden;
}
.hero::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:1px;
    background:var(--line);
}

.hero-boleta{
    position:relative;
    max-width:760px;
    margin-inline:auto;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-lift);
    --pad:clamp(24px, 4vw, 60px);
    padding:clamp(30px, 4vw, 52px) var(--pad) clamp(32px, 4vw, 48px);
    text-align:center;
}
.hero-boleta::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:5px;
    border-radius:var(--radius) var(--radius) 0 0;
    background:linear-gradient(90deg, var(--celeste) 0 33.3%, #CFE7F4 33.3% 66.6%, var(--celeste) 66.6% 100%);
}
.hero-boleta .eyebrow{ justify-content:center; }
.hero-boleta h1{ margin-bottom:.36em; }

.hero-sub{
    font-size:clamp(1.06rem, .98rem + .5vw, 1.28rem);
    color:var(--ink-2);
    max-width:52ch;
    margin-inline:auto;
    margin-bottom:1.1em;
}
.hero-text{
    color:var(--ink-soft);
    max-width:50ch;
    margin-inline:auto;
    margin-bottom:2em;
}

.hero-stamp{
    position:absolute;
    right:clamp(-6px, -1vw, 0px);
    top:clamp(-14px, -1.5vw, -8px);
    width:104px;
    height:104px;
    pointer-events:none;
    opacity:.92;
}

.tear{
    position:relative;
    height:1px;
    margin:30px 0;
    background-image:linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px);
    background-size:16px 1px;
}
.tear::before,
.tear::after{
    content:"";
    position:absolute;
    top:-11px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--paper);
    border:1px solid var(--line);
}
.tear::before{ left:-11px; }
.tear::after{ right:-11px; }

.hero-boleta .tear{ margin-inline:calc(-1 * var(--pad)); }
.bonus-card .tear{ margin-inline:calc(-1 * var(--pad)); }

.age-line{
    font-family:var(--mono);
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-2);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}
.age-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:24px;
    padding:0 8px;
    border-radius:4px;
    background:var(--naranja-wash);
    color:#B03E16;
    border:1px solid rgba(201,72,26,.28);
    font-weight:600;
    letter-spacing:.04em;
}

/* ---------- Cabecera de página interior ---------- */

.page-head{
    padding:clamp(38px, 4.6vw, 66px) 0 clamp(30px, 3.4vw, 46px);
    border-bottom:1px solid var(--line);
    background:
        radial-gradient(720px 200px at 8% -10%, var(--celeste-wash), transparent 70%);
}
.page-head h1{ max-width:19ch; }
.page-head .lead{ max-width:62ch; }

.breadcrumb{
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:16px;
}
.breadcrumb a{ color:var(--ink-soft); text-decoration:none; }
.breadcrumb a:hover{ color:var(--naranja); }
.breadcrumb span{ color:var(--line-strong); margin:0 6px; }

/* ---------- Tarjetas de bono ("boletas") ---------- */

.bonus-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:26px;
    align-items:start;
}

.bonus-card{
    position:relative;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    --pad:28px;
    padding:26px var(--pad) 28px;
    display:flex;
    flex-direction:column;
    transition:transform .2s ease, box-shadow .2s ease;
}
.bonus-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.bonus-card::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:4px;
    border-radius:var(--radius) var(--radius) 0 0;
    background:var(--celeste);
}
.bonus-card.is-sports::before{ background:var(--verde); }

.bonus-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:6px;
}
.bonus-name{
    font-family:var(--display);
    font-weight:900;
    font-size:1.32rem;
    letter-spacing:-.02em;
    margin:0;
}
.bonus-kind{
    font-family:var(--mono);
    font-size:.68rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-top:4px;
}

.badge{
    display:inline-block;
    font-family:var(--mono);
    font-size:.64rem;
    font-weight:600;
    letter-spacing:.13em;
    text-transform:uppercase;
    padding:6px 10px;
    border-radius:4px;
    background:var(--celeste-wash);
    color:var(--celeste-deep);
    border:1px solid rgba(47,147,200,.3);
    white-space:nowrap;
    flex:none;
}
.bonus-card.is-sports .badge{
    background:var(--verde-wash);
    color:var(--verde);
    border-color:rgba(31,122,90,.3);
}

.bonus-offer{
    font-family:var(--display);
    font-weight:900;
    font-size:clamp(1.55rem, 1.2rem + 1.4vw, 2.05rem);
    line-height:1.1;
    letter-spacing:-.03em;
    color:var(--ink);
    margin:10px 0 4px;
}
.bonus-offer .num{ font-family:var(--display); }
.bonus-desc{ color:var(--ink-2); font-size:.99rem; }

.feat{ list-style:none; margin:0 0 4px; padding:0; }
.feat li{
    position:relative;
    padding-left:27px;
    margin-bottom:9px;
    font-size:.97rem;
    color:var(--ink-2);
}
.feat li::before{
    content:"";
    position:absolute;
    left:0; top:.42em;
    width:15px; height:8px;
    border-left:2px solid var(--verde);
    border-bottom:2px solid var(--verde);
    transform:rotate(-45deg);
}

.bonus-terms{
    font-size:.83rem;
    line-height:1.55;
    color:var(--ink-soft);
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    padding:12px 14px;
    margin:4px 0 20px;
}

.bonus-card .btn{ margin-top:auto; }

.bonus-foot{
    margin-top:12px;
    font-family:var(--mono);
    font-size:.66rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    text-align:center;
}

.disclaimer{
    margin-top:28px;
    background:var(--naranja-wash);
    border:1px solid rgba(201,72,26,.22);
    border-left:4px solid var(--naranja);
    border-radius:var(--radius-s);
    padding:18px 22px;
    font-size:.95rem;
    color:#7A3313;
}
.disclaimer strong{ color:var(--naranja); }

/* ---------- Tabla comparativa ---------- */

.table-wrap{
    overflow-x:auto;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
table.cmp{
    width:100%;
    border-collapse:collapse;
    min-width:620px;
    font-size:.96rem;
}
table.cmp th,
table.cmp td{
    text-align:left;
    padding:15px 20px;
    border-bottom:1px solid var(--line);
    vertical-align:top;
}
table.cmp thead th{
    background:var(--ink);
    color:#fff;
    font-family:var(--display);
    font-weight:700;
    font-size:.95rem;
    letter-spacing:-.005em;
    border-bottom:none;
}
table.cmp thead th:first-child{
    font-family:var(--mono);
    font-weight:500;
    font-size:.7rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#9FB6C8;
}
table.cmp tbody th{
    font-family:var(--mono);
    font-weight:500;
    font-size:.74rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    width:26%;
    background:var(--paper);
}
table.cmp tbody tr:last-child th,
table.cmp tbody tr:last-child td{ border-bottom:none; }
table.cmp td strong{ color:var(--ink); }

/* ---------- Rejillas y fichas ---------- */

.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }

.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px 26px;
    box-shadow:var(--shadow);
}
.card h3{ margin-bottom:.45em; }
.card p{ color:var(--ink-2); font-size:.98rem; }
.card p:last-child{ margin-bottom:0; }

.card-key{
    font-family:var(--mono);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--celeste-deep);
    display:block;
    margin-bottom:10px;
}

.section-ink .card{
    background:#16304A;
    border-color:#22415F;
    box-shadow:none;
}
.section-ink .card p{ color:#B6C9D8; }
.section-ink .card-key{ color:#6FC0E8; }

/* ---------- Prosa ---------- */

.prose{ max-width:70ch; }
.prose h2{ margin-top:1.7em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin-top:1.6em; }
.prose ul,
.prose ol{ padding-left:1.25em; margin:0 0 1.1em; color:var(--ink-2); }
.prose li{ margin-bottom:.5em; }
.prose li::marker{ color:var(--celeste); }
.prose strong{ color:var(--ink); }

.dl{
    margin:0;
    border-top:1px solid var(--line);
}
.dl div{
    display:grid;
    grid-template-columns:minmax(150px, 26%) 1fr;
    gap:18px;
    padding:15px 0;
    border-bottom:1px solid var(--line);
}
.dl dt{
    font-family:var(--mono);
    font-size:.74rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    padding-top:3px;
}
.dl dd{ margin:0; color:var(--ink-2); }

.note{
    background:var(--celeste-wash);
    border:1px solid rgba(47,147,200,.26);
    border-left:4px solid var(--celeste);
    border-radius:var(--radius-s);
    padding:18px 22px;
    font-size:.96rem;
    color:var(--ink-2);
}
.note strong{ color:var(--celeste-deep); }
.note--warn{
    background:var(--naranja-wash);
    border-color:rgba(201,72,26,.22);
    border-left-color:var(--naranja);
    color:#7A3313;
}
.note--warn strong{ color:var(--naranja); }

.helpline{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:20px 24px;
    box-shadow:var(--shadow);
}
.helpline-num{
    font-family:var(--mono);
    font-weight:600;
    font-size:1.34rem;
    letter-spacing:-.01em;
    color:var(--ink);
    white-space:nowrap;
}
.helpline-num a{ color:inherit; text-decoration:none; }
.helpline-num a:hover{ color:var(--naranja); }
.helpline p{ margin:0; font-size:.94rem; color:var(--ink-2); flex:1 1 260px; }

/* ---------- FAQ ---------- */

.faq{ max-width:820px; }
.faq-item{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    margin-bottom:10px;
    box-shadow:0 1px 2px rgba(15,35,56,.04);
}
.faq-item summary{
    list-style:none;
    cursor:pointer;
    padding:17px 52px 17px 22px;
    position:relative;
    font-family:var(--display);
    font-weight:700;
    font-size:1.02rem;
    letter-spacing:-.005em;
    color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
    content:"";
    position:absolute;
    right:22px;
    top:50%;
    width:10px; height:10px;
    margin-top:-6px;
    border-right:2px solid var(--celeste-deep);
    border-bottom:2px solid var(--celeste-deep);
    transform:rotate(45deg);
    transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq-item[open] summary{ color:var(--celeste-deep); }
.faq-answer{
    padding:0 22px 20px;
    color:var(--ink-2);
    font-size:.98rem;
    border-top:1px dashed var(--line-strong);
    margin-top:-1px;
    padding-top:16px;
}

/* ---------- Formularios ---------- */

.form-panel{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:clamp(24px, 3vw, 36px);
}

.field{ margin-bottom:18px; }
.field label{
    display:block;
    font-family:var(--mono);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--ink-2);
    margin-bottom:7px;
}
.field input,
.field textarea,
.field select{
    width:100%;
    font-family:var(--body);
    font-size:1rem;
    color:var(--ink);
    background:var(--paper);
    border:1px solid var(--line-strong);
    border-radius:var(--radius-s);
    padding:13px 15px;
    transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,
.field textarea:focus{
    outline:none;
    background:#fff;
    border-color:var(--celeste);
    box-shadow:0 0 0 3px rgba(47,147,200,.18);
}
.field input::placeholder,
.field textarea::placeholder{ color:#7C8D9C; }

.field-row{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:18px;
}

.form-hint{
    font-size:.83rem;
    color:var(--ink-soft);
    margin-top:14px;
    line-height:1.55;
}

.form-inline{
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:end;
}
.form-inline .field{ margin-bottom:0; }

.grid-lead{ grid-template-columns:1.5fr 1fr; align-items:start; }

.form-done{
    text-align:center;
    padding:clamp(26px, 3vw, 40px) 22px;
}
.form-done .check{
    width:56px; height:56px;
    margin:0 auto 18px;
    border-radius:50%;
    background:var(--verde-wash);
    border:1px solid rgba(31,122,90,.3);
    display:flex;
    align-items:center;
    justify-content:center;
}
.form-done .check::after{
    content:"";
    width:19px; height:10px;
    border-left:3px solid var(--verde);
    border-bottom:3px solid var(--verde);
    transform:rotate(-45deg) translate(2px,-2px);
}
.form-done h3{
    font-size:1.3rem;
    font-weight:900;
    margin-bottom:.4em;
}
.form-done p{
    color:var(--ink-2);
    max-width:46ch;
    margin-inline:auto;
    font-size:.98rem;
}
.form-done .btn{ margin-top:20px; }

/* Bloque de suscripción */
.subscribe{
    background:var(--ink);
    border-radius:var(--radius);
    padding:clamp(28px, 4vw, 48px);
    color:#CFDCE7;
    position:relative;
    overflow:hidden;
}
.subscribe::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:34px 100%;
    pointer-events:none;
}
.subscribe > *{ position:relative; }
.subscribe h2{ color:#fff; }
.subscribe p{ color:#A9C0D2; max-width:52ch; }
.subscribe .eyebrow{ color:#6FC0E8; }
.subscribe .eyebrow::before{ background:#6FC0E8; }
.subscribe .field label{ color:#8FA9BE; }
.subscribe .field input{
    background:#12283E;
    border-color:#2A4661;
    color:#fff;
}
.subscribe .field input::placeholder{ color:#61809A; }
.subscribe .field input:focus{
    background:#16304A;
    border-color:#6FC0E8;
    box-shadow:0 0 0 3px rgba(111,192,232,.22);
}
.subscribe .form-hint{ color:#7F9AB0; }
.subscribe a{ color:#8FD1F2; }
.subscribe a:hover{ color:#fff; }
.subscribe .form-done h3{ color:#fff; }
.subscribe .form-done p{ color:#A9C0D2; }
.subscribe .form-done .check{
    background:rgba(31,122,90,.18);
    border-color:rgba(111,192,232,.4);
}
.subscribe .form-done .check::after{
    border-color:#6FE0B0;
}

/* ---------- 404 ---------- */

.error-page{
    text-align:center;
    padding:clamp(60px, 9vw, 130px) 0;
}
.error-code{
    font-family:var(--display);
    font-weight:900;
    font-size:clamp(5rem, 3rem + 14vw, 11rem);
    line-height:.86;
    letter-spacing:-.05em;
    color:var(--ink);
    margin:0 0 .1em;
    background:linear-gradient(180deg, var(--ink) 40%, var(--celeste) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.error-page h1{ font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
.error-page p{ color:var(--ink-2); max-width:46ch; margin-inline:auto; }
.error-actions{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:28px;
}

/* ---------- CTA final ---------- */

.cta-band{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:clamp(28px, 3.6vw, 44px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
    flex-wrap:wrap;
}
.cta-band h2{ margin-bottom:.3em; }
.cta-band p{ color:var(--ink-2); max-width:52ch; margin:0; }
.cta-band-text{ flex:1 1 380px; }

/* ---------- Pie ---------- */

.site-foot{
    background:var(--ink);
    color:#A9C0D2;
    padding:clamp(44px, 5vw, 68px) 0 34px;
    font-size:.95rem;
}
.foot-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr;
    gap:36px;
    padding-bottom:34px;
    border-bottom:1px solid #22415F;
}
.foot-brand .brand{ color:#fff; margin-bottom:14px; }
.foot-brand .brand-tld{ color:#6FC0E8; }
.foot-about{ color:#8FA9BE; font-size:.92rem; max-width:40ch; }
.foot-mail{
    display:inline-block;
    margin-top:12px;
    font-family:var(--mono);
    font-size:.86rem;
    color:#8FD1F2;
    text-decoration:none;
}
.foot-mail:hover{ color:#fff; }

.foot-col h4{
    color:#fff;
    font-family:var(--mono);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.15em;
    text-transform:uppercase;
    margin-bottom:14px;
}
.foot-col ul{ list-style:none; margin:0; padding:0; }
.foot-col li{ margin-bottom:9px; }
.foot-col a{
    color:#A9C0D2;
    text-decoration:none;
    font-size:.93rem;
}
.foot-col a:hover{ color:#fff; text-decoration:underline; }

.foot-legal{ padding-top:26px; }
.foot-legal .age-line{
    color:#8FA9BE;
    justify-content:flex-start;
    margin-bottom:16px;
}
.foot-legal .age-badge{
    background:rgba(228,103,31,.16);
    border-color:rgba(228,103,31,.45);
    color:#F0A374;
}
.foot-note{
    color:#7F9AB0;
    font-size:.85rem;
    line-height:1.6;
    max-width:92ch;
    margin-bottom:12px;
}
.foot-note a{ color:#8FD1F2; }
.foot-bottom{
    display:flex;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid #22415F;
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#6E8AA2;
}

/* ---------- Barra de cookies ---------- */

.cookie-bar{
    position:fixed;
    left:16px;
    right:16px;
    bottom:16px;
    z-index:120;
    background:var(--card);
    border:1px solid var(--line-strong);
    border-radius:var(--radius);
    box-shadow:0 24px 48px -24px rgba(15,35,56,.7);
    padding:18px 22px;
    display:none;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    max-width:760px;
    margin-inline:auto;
}
.cookie-bar.is-open{ display:flex; }
.cookie-bar p{
    margin:0;
    flex:1 1 320px;
    font-size:.89rem;
    color:var(--ink-2);
    line-height:1.55;
}
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-actions .btn{ padding:11px 20px; font-size:.9rem; }

/* ---------- Volver arriba ---------- */

.to-top{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:90;
    width:44px; height:44px;
    border-radius:50%;
    border:1px solid var(--line-strong);
    background:var(--card);
    color:var(--ink);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
    box-shadow:var(--shadow);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top::after{
    content:"";
    width:10px; height:10px;
    border-left:2px solid currentColor;
    border-top:2px solid currentColor;
    transform:rotate(45deg) translate(2px,2px);
}

/* ---------- Utilidades ---------- */

.is-hidden{ display:none !important; }
.visually-hidden{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
}
.stack-lg > * + *{ margin-top:26px; }
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }

/* ---------- Animación de entrada ---------- */

.reveal{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .55s ease, transform .55s ease;
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{
        animation-duration:.001ms !important;
        transition-duration:.001ms !important;
    }
    .reveal{ opacity:1; transform:none; }
}