/* Estilos de la web de canje (layout y todas sus páginas). Los colores son variables: el tema oscuro es el de origen y el claro, su versión para fondos claros (contrastes AA).
   La tipografía y el logotipo de la marca van aparte, en redeem-brand.css, que solo se carga si no está activo el modo neutral (REDEMPTION_BRANDING=neutral). */
:root { --font:system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }

:root {
    color-scheme:dark;
    --bg:#171716; --fg:#fff; --muted:rgba(255,255,255,.7); --faint:rgba(255,255,255,.55);
    --card:#273838; --card-shadow:none; --bar:#1e2c2c;
    --line:rgba(255,255,255,.14); --field:rgba(255,255,255,.3); --placeholder:rgba(255,255,255,.5); --control:rgba(23,23,22,.5);
    --link:#23d1ae; --link-hover:#00a88e; --btn:#00a88e; --btn-hover:#23d1ae; --on-btn:#06201b; --accent:#23d1ae;
    --err:#ff6674; --err-bg:rgba(255,55,72,.16); --ok-bg:rgba(35,209,174,.16); --warn-bg:rgba(255,232,16,.13); --warn-fg:#ffe810;
    --chip:rgba(255,255,255,.1); --code:rgba(0,0,0,.34); --soft:rgba(255,255,255,.04); --option-bg:#fff; --option-fg:#171716; --footer:#999;
}
:root[data-theme="light"] {
    color-scheme:light;
    --bg:#f3f7f6; --fg:#171716; --muted:rgba(23,23,22,.72); --faint:rgba(23,23,22,.65);
    --card:#fff; --card-shadow:inset 0 0 0 1px rgba(23,23,22,.08), 0 1px 2px rgba(23,23,22,.05), 0 18px 44px -14px rgba(0,70,58,.22); --bar:#fff;
    --line:rgba(23,23,22,.12); --field:rgba(23,23,22,.5); --placeholder:rgba(23,23,22,.5); --control:rgba(255,255,255,.75);
    --link:#007a66; --link-hover:#005a4b; --btn:#007a66; --btn-hover:#005a4b; --on-btn:#fff; --accent:#007a66;
    --err:#c4142b; --err-bg:rgba(196,20,43,.08); --ok-bg:rgba(0,168,142,.13); --warn-bg:rgba(214,158,0,.15); --warn-fg:#664a00;
    --chip:rgba(23,23,22,.07); --code:rgba(23,23,22,.06); --soft:rgba(23,23,22,.03); --option-bg:#fff; --option-fg:#171716; --footer:#6b6b6b;
}

/* Colores del calendario de fechas (partials/datepicker). */
:root { --dp-text:var(--fg); --dp-bg:var(--card); --dp-muted:var(--faint); --dp-hover:var(--chip); --dp-accent:var(--accent); --dp-line:var(--line); --dp-sel-bg:var(--fg); --dp-sel-fg:var(--bg); }
:root[data-theme="light"] { --dp-bg:#fff; --dp-sel-fg:#fff; }
.field .datefield { padding:12px; }
html, body, div, span, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, form, fieldset, label, legend, table, tbody, tr, th, td, figure, footer, header, nav, section, main { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; background:var(--bg); }
input, select, textarea, button { font:inherit; color:inherit; vertical-align:middle; outline-offset:0; }
table { border-collapse:collapse; border-spacing:0; }
ul { list-style:none; }

.body { min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden; background:var(--bg); color:var(--fg);
    font-weight:300; font-size:18px; font-family:var(--font); line-height:24px; }
a { color:var(--link); text-decoration:none; font-weight:400; transition:color .3s ease; }
a:hover { color:var(--link-hover); }
button:focus, input:focus, select:focus, textarea:focus { outline:none; }
a:focus-visible, button:focus-visible, .field__input:focus-visible, .lang select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.container { margin:0 auto; padding:0 40px; max-width:1280px; }
.welcome { flex:1; padding-bottom:64px; }
.header__flex { display:flex; justify-content:space-between; align-items:center; padding:32px 0; width:100%; gap:16px; }
.header__logo, .footer__logo { display:block; line-height:0; color:var(--fg); }
.header__logo:hover, .footer__logo:hover { color:var(--fg); }
.wordmark { display:block; max-width:60vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; font-size:22px; line-height:32px; letter-spacing:-.01em; }
.header__tools { display:flex; align-items:center; gap:8px; }
.lang select { height:40px; padding:0 14px; border:2px solid var(--field); border-radius:8px; background:var(--control); color:var(--fg); font-size:14px; font-weight:400; cursor:pointer; transition:border-color .3s ease; }
.lang select:hover, .lang select:focus { border-color:var(--accent); }
option { color:var(--option-fg); background:var(--option-bg); }
.theme { display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; padding:0; border:2px solid var(--field); border-radius:8px; background:var(--control); color:var(--fg); cursor:pointer; transition:border-color .3s ease; }
.theme[hidden] { display:none; }
.theme:hover { border-color:var(--accent); }
.theme svg { width:20px; height:20px; }
.theme__moon { display:none; }
:root[data-theme="light"] .theme__sun { display:none; }
:root[data-theme="light"] .theme__moon { display:block; }
@media (prefers-reduced-motion:no-preference) {
    .theme-fade, .theme-fade *, .theme-fade *::before { transition:background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease !important; }
}

.title { max-width:700px; font-weight:400; font-size:64px; line-height:68px; }
.title_s { font-size:48px; line-height:52px; letter-spacing:-.03em; }
.subtitle { margin-top:24px; max-width:700px; font-weight:300; font-size:21px; line-height:24px; color:var(--muted); }
.form, .panel, .product { background:var(--card); box-shadow:var(--card-shadow); }
.form, .panel { padding:24px; border-radius:16px; }
.form { margin-top:48px; max-width:496px; }
.form__text { margin-bottom:24px; max-width:415px; font-weight:400; font-size:28px; line-height:32px; }
.field + .field { margin-top:16px; }
fieldset.field { min-width:0; } .choice { display:flex; gap:10px; align-items:flex-start; padding:7px 0; font-size:16px; line-height:22px; cursor:pointer; }
.choice input { flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--accent); }
input[type=file].field__input { padding:10px; cursor:pointer; }
.field__input { width:100%; padding:12px; border:2px solid var(--field); border-radius:0; background-color:transparent; color:inherit; font-weight:400; font-size:16px; line-height:20px; transition:border-color .3s ease; }
.field__input::placeholder { color:var(--placeholder); }
.field__input:focus { border-color:var(--accent); }
select.field__input { cursor:pointer; }
textarea.field__input { resize:vertical; min-height:120px; }
.field__error { margin-top:6px; color:var(--err); font-size:14px; line-height:18px; font-weight:400; }
.field__label { display:block; margin-bottom:8px; font-size:14px; line-height:18px; color:var(--muted); }
.field__hint { margin-top:8px; font-size:13px; line-height:18px; color:var(--faint); }
.form .button { margin-top:24px; }
.form__link { margin-top:12px; font-size:15px; line-height:20px; }

.button { position:relative; display:inline-block; padding:14px; min-width:130px; width:100%; border:none; border-radius:8px; background:var(--btn); vertical-align:middle; text-align:center; font-size:0; cursor:pointer; transition:background-color .3s ease, border-color .3s ease; text-decoration:none; }
.button:hover { background-color:var(--btn-hover); }
.button__text { display:inline-block; color:var(--on-btn); vertical-align:middle; font-weight:500; font-size:16px; line-height:20px; font-family:var(--font); }
.button_secondary { padding:12px; border:2px solid var(--fg); background:transparent; }
.button_secondary:hover { border-color:var(--field); background:transparent; }
.button_secondary .button__text { color:var(--fg); }
.button_small { padding:8px 14px; min-width:0; width:auto; }
.button_small.button_secondary { padding:6px 12px; }
.button_small .button__text { font-size:14px; line-height:18px; }
.button[disabled] { opacity:.4; cursor:not-allowed; }
.actions { display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; }
.actions .button { flex:1; width:auto; }

.stack { max-width:640px; margin-top:32px; }
.stack > * + * { margin-top:16px; }
.block { margin-top:24px; }
.center { text-align:center; }
.h2 { font-weight:400; font-size:28px; line-height:32px; }
.h2 + .product, .h2 + .panel, .product + .product { margin-top:16px; }
.panel__title { margin-bottom:16px; font-weight:400; font-size:28px; line-height:32px; }
.meta { color:var(--muted); font-size:16px; line-height:22px; }
.num { font-size:64px; line-height:68px; font-weight:400; letter-spacing:-.03em; }
.balance { display:flex; flex-wrap:wrap; gap:8px 36px; align-items:flex-end; margin-top:6px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.chip { display:inline-flex; align-items:center; padding:5px 14px; border-radius:999px; background:var(--chip); font-size:14px; line-height:18px; font-weight:400; }
.alert { padding:14px 16px; border-radius:12px; font-size:16px; line-height:22px; }
.alert + .alert { margin-top:12px; }
.alert-ok { background:var(--ok-bg); }
.alert-error { background:var(--err-bg); color:var(--err); }
.alert-warn { background:var(--warn-bg); color:var(--warn-fg); }
.checks { display:grid; gap:10px; margin-top:32px; max-width:496px; font-size:16px; line-height:22px; }
.checks li { display:flex; gap:10px; align-items:flex-start; }
.checks svg { flex:none; width:20px; height:20px; margin-top:1px; color:var(--accent); }

.product { border-radius:16px; overflow:hidden; }
.product-h { display:flex; gap:14px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); }
.product-h b { font-size:18px; font-weight:400; }
.tile { width:40px; height:40px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; overflow:hidden; position:relative; }
.tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; padding:3px; }
/* Una sola marca disponible para el país del pedido: su logo, lo más grande de la página. */
.product--solo .product-h { gap:20px; padding:20px 22px; }
.product--solo .product-h b { font-size:26px; line-height:30px; }
.product--solo .tile { width:112px; height:112px; border-radius:22px; font-size:44px; }
.product--solo .tile img { padding:10px; }
.value { display:flex; align-items:center; gap:14px; padding:12px 18px; }
.value + .value { border-top:1px solid var(--line); }
.value .amount { font-weight:400; font-size:21px; line-height:24px; }
.value .stock { font-size:13px; color:var(--faint); line-height:16px; }
.stepper { margin-inline-start:auto; display:flex; align-items:center; gap:12px; }
.stepper button { width:42px; height:42px; border-radius:50%; border:2px solid var(--field); background:transparent; color:var(--fg); font-size:22px; line-height:1; cursor:pointer; transition:background-color .3s ease, border-color .3s ease; }
.stepper button:hover:not([disabled]) { border-color:var(--accent); }
.stepper button.plus { background:var(--btn); border-color:var(--btn); color:var(--on-btn); }
.stepper button.plus:hover:not([disabled]) { background:var(--btn-hover); border-color:var(--btn-hover); }
.stepper button[disabled] { opacity:.3; cursor:not-allowed; }
.stepper output { min-width:24px; text-align:center; font-weight:400; font-size:21px; }
.bar { position:sticky; bottom:16px; margin-top:24px; padding:14px 18px; border-radius:16px; background:var(--bar); box-shadow:var(--card-shadow), 0 10px 30px rgba(0,0,0,.28); border:1px solid var(--line); }
.bar-in { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.bar .sum { flex:1; min-width:170px; font-size:16px; line-height:22px; }
.bar .sum b { font-size:24px; font-weight:400; }
.bar .button { width:auto; min-width:170px; }
.coupon { border:1px solid var(--line); border-radius:14px; padding:16px; background:var(--soft); }
.coupon + .coupon { margin-top:12px; }
.coupon-h { display:flex; align-items:center; gap:14px; }
.coupon-h .amt { margin-inline-start:auto; font-size:21px; font-weight:400; }
.codebox { display:flex; gap:10px; align-items:center; margin-top:12px; }
.codebox code { flex:1; padding:12px 14px; border-radius:10px; background:var(--code); font-size:17px; font-weight:400; overflow-wrap:anywhere; }
.links { display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:15px; }
.summary { width:100%; }
.summary td { padding:12px 0; border-bottom:1px solid var(--line); font-size:17px; }
.summary td:last-child { text-align:end; font-weight:400; }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing:.04em; direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] .mono, [dir="rtl"] input[type=email] { text-align:left; }
.sent__icon { display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; margin-bottom:24px; border-radius:50%; background:var(--ok-bg); color:var(--accent); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.arr { display:inline-block; }
[dir="rtl"] .arr { transform:scaleX(-1); }
[dir="rtl"] .chip, [dir="rtl"] .links a { unicode-bidi:plaintext; }

.footer__flex { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:32px 0; width:100%; gap:12px 16px; }
.footer__copyright { margin-inline-start:16px; color:var(--footer); font-size:12px; line-height:16px; }
.footer__menu { display:flex; flex-wrap:wrap; justify-content:flex-end; row-gap:6px; margin-inline-start:auto; font-size:12px; line-height:16px; }
.footer__menu-link:before { padding:0 9px; color:var(--footer); content:'•'; }
.footer__menu-link:first-child:before { content:none; }

/* Portada: el formulario a la izquierda y, a la derecha, los logos de las marcas «flotando» (ver BrandCloud). Debajo del formulario en pantallas estrechas. */
.home__aside { margin-top:48px; }
.cloud { position:relative; width:100%; max-width:560px; margin:0 auto; container-type:inline-size; }
.cloud__items { position:absolute; inset:0; margin:0; padding:0; list-style:none; }
.cloud__item { position:absolute; left:var(--x); top:var(--y); width:calc(var(--w) * 1cqw); height:calc(var(--h) * 1cqw); transform:translate(-50%,-50%) rotate(calc(var(--r) * 1deg)); }
.cloud__float { display:flex; align-items:center; justify-content:center; width:100%; height:100%; animation:cloud-bob 3s ease-in-out infinite alternate; }
.cloud__logo { display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:calc(var(--h) * .2cqw); border-radius:calc(var(--h) * .24cqw); background:#fff;
    box-shadow:0 .6cqw 2.4cqw rgba(0,0,0,.2); }
/* Ya medido el logo: la ficha toma su proporción (--ar) dentro de su sitio, sin salirse de él. */
.cloud__logo.is-fit { width:min(calc(var(--w) * 1cqw), calc(var(--h) * 1cqw * var(--ar))); height:auto; aspect-ratio:var(--ar); }
.cloud__logo img { display:block; width:100%; height:100%; object-fit:contain; }
.cloud__logo.is-light { background:#252a31; }
:root[data-theme="light"] .cloud__logo { box-shadow:0 .6cqw 2.4cqw rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.06); }
.cloud__center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 calc(var(--pad) * 1cqw); text-align:center; }
.cloud__title { font-weight:400; font-size:6.6cqw; line-height:1.12; letter-spacing:-.02em; }
.cloud__text { margin-top:1.4cqw; font-size:3.2cqw; line-height:1.3; color:var(--muted); }
@keyframes cloud-bob { from { transform:translateY(.7cqw); } to { transform:translateY(-.7cqw); } }
@media (prefers-reduced-motion:reduce) { .cloud__float { animation:none; } }
@supports not (width:1cqw) {
    .cloud__item { width:80px; height:54px; }
    .cloud__center { padding:0 96px; }
    .cloud__title { font-size:28px; }
    .cloud__text { font-size:15px; }
}
/* Soporte: el formulario y, al lado (o debajo en pantallas estrechas), la ilustración de atención al cliente sobre una ficha blanca como las de las marcas. */
.support { display:grid; gap:32px; }
.support__art { max-width:440px; width:100%; margin:0 auto; padding:14px; border-radius:24px; background:#fff; box-shadow:0 8px 28px rgba(0,0,0,.25); }
:root[data-theme="light"] .support__art { box-shadow:0 8px 32px rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.06); }
.support__art img { display:block; width:100%; height:auto; }
@media screen and (min-width:1024px) {
    .support { grid-template-columns:minmax(0,1fr) minmax(0,460px); gap:56px; align-items:start; }
    .support__art { position:sticky; top:24px; margin:0; max-width:none; }
}
@media screen and (min-width:1024px) {
    .home { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:56px; align-items:center; }
}
@media screen and (max-width:1023px) { .container { padding:0 24px; } }
@media screen and (max-width:639px) {
    .container { padding:0 16px; }
    .header__flex { padding:24px 0; }
    .lang select { max-width:132px; padding:0 10px; text-overflow:ellipsis; }
    .title { font-size:36px; line-height:40px; max-width:400px; }
    .title_s { font-size:32px; line-height:36px; }
    .subtitle { margin-top:16px; font-size:16px; line-height:20px; }
    .form { margin-top:32px; padding:16px; max-width:none; }
    .panel { padding:16px; }
    .product--solo .product-h { gap:14px; padding:16px; }
    .product--solo .product-h b { font-size:22px; line-height:26px; }
    .product--solo .tile { width:84px; height:84px; border-radius:18px; font-size:34px; }
    .form__text { font-size:21px; line-height:24px; max-width:300px; }
    .panel__title, .h2 { font-size:21px; line-height:24px; }
    .num { font-size:44px; line-height:48px; }
    .stack { margin-top:24px; }
    .footer__flex { flex-direction:column; align-items:flex-start; padding:24px 0; }
    .footer__copyright, .footer__menu { margin-inline-start:0; }
    .footer__menu { flex-direction:column; align-items:flex-start; row-gap:8px; }
    .footer__menu-link:before { content:none; }
}

/* Utilidades y piezas que antes iban como style="" en las vistas (al final del archivo: ganan a las reglas de pantalla pequeña de arriba). */
.mt-0 { margin-top:0; } .mt-6 { margin-top:6px; } .mt-8 { margin-top:8px; } .mt-12 { margin-top:12px; } .mt-20 { margin-top:20px; }
.mb-0 { margin-bottom:0; } .mb-12 { margin-bottom:12px; } .mb-16 { margin-bottom:16px; } .mb-20 { margin-bottom:20px; }
.num--22 { font-size:22px; } .num--24 { font-size:24px; } .num--28 { font-size:28px; }
.block--narrow { max-width:320px; }
.link-list { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px; }
.legal-list { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:8px 20px; align-items:baseline; margin:0; }
.legal-list dd { margin:0; overflow-wrap:anywhere; }
.order-head { display:flex; gap:12px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
.reason-locked { display:flex; gap:8px 16px; justify-content:space-between; align-items:baseline; flex-wrap:wrap; }
.reason-locked__text { font-weight:400; font-size:21px; line-height:26px; }
/* Campo trampa para robots (honeypot): fuera de la pantalla, no se ve ni se enfoca. */
.trap { position:absolute; inset-inline-start:-9999px; }

/* «Cómo funciona» de la portada (los pasos, también en los datos estructurados para buscadores y asistentes de IA). */
.steps { margin-top:40px; max-width:496px; }
.steps__title { font-size:24px; line-height:28px; font-weight:400; }
.steps__list { margin:16px 0 0; padding-inline-start:24px; display:grid; gap:10px; list-style:decimal; font-size:16px; line-height:22px; color:var(--muted); }
.steps__list li { padding-inline-start:4px; }

/* Enlace para saltar al contenido: invisible hasta que recibe el foco con el teclado. */
.skip-link { position:absolute; inset-inline-start:-9999px; top:8px; z-index:100; padding:10px 16px; border-radius:8px; background:var(--btn); color:var(--on-btn); font-weight:500; }
.skip-link:focus { inset-inline-start:8px; color:var(--on-btn); }
.welcome:focus { outline:none; }