/* RIFAYGANA · estilos del sitio comercial. Consume tokens.css. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
	margin: 0; background: var(--c-paper); color: var(--c-text);
	font-family: var(--f-body); font-size: var(--t-base); line-height: 1.6;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--c-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--c-ink-deep); line-height: 1.05; margin: 0 0 var(--s-4); font-weight: 700; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: var(--t-2xl); font-stretch: var(--stretch-tight); font-weight: 800; }
h2 { font-size: var(--t-xl); font-stretch: var(--stretch-tight); }
h3 { font-size: var(--t-md); line-height: 1.2; }
h4 { font-size: var(--t-base); line-height: 1.3; }
p { margin: 0 0 var(--s-4); max-width: 68ch; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--c-ticket-deep); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: -4rem; background: var(--c-ink); color: #fff; padding: var(--s-2) var(--s-4); z-index: 100; border-radius: var(--r-control); }
.skip:focus { top: var(--s-4); }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.lede { font-size: var(--t-md); color: var(--c-muted); line-height: 1.5; max-width: 60ch; }
.fineprint { font-size: var(--t-xs); color: var(--c-muted); line-height: 1.5; }
.pending { color: var(--c-ink-soft); font-size: var(--t-sm); padding-left: var(--s-3); border-left: 3px solid var(--c-ticket); }
.text-link { font-weight: 600; }
.notice { padding: var(--s-3) var(--s-4); border-radius: var(--r-control); background: var(--c-stock); }
.notice-ok { background: #e3f3ea; color: var(--c-ok); }
.notice-err { background: #fbe7e8; color: var(--c-err); }

/* ---------- Botones ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
	min-height: 3rem; padding: .7rem 1.35rem; border-radius: var(--r-control);
	font: 600 var(--t-sm)/1.2 var(--f-body); text-decoration: none; cursor: pointer;
	border: 2px solid transparent; transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
	white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 2.5rem; padding: .45rem 1rem; }
.btn-primary { background: var(--c-ink); color: #fff; }
.btn-primary:hover { background: var(--c-ink-deep); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { background: var(--c-line); color: var(--c-muted); cursor: not-allowed; }
.btn-line { border-color: var(--c-ink); color: var(--c-ink); background: transparent; }
.btn-line:hover { background: var(--c-ink); color: #fff; }
.btn-ticket { background: var(--c-ticket); color: var(--c-ink-deep); }
.btn-ticket:hover { background: var(--c-ticket-deep); }
.btn-line-light { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-line-light:hover { background: #fff; color: var(--c-ink-deep); }
.btn-quiet { background: transparent; color: var(--c-ink); padding-inline: .5rem; text-decoration: underline; text-underline-offset: .2em; }
.btn-quiet:hover { color: var(--c-ink-deep); }
.btn-whatsapp { background: #25D366; color: #08341F; border-color: #25D366; }
.btn-whatsapp:hover { background: #1EBE5B; border-color: #1EBE5B; }
.wa-ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Franja de vista previa y cabecera ---------- */
.preview-ribbon { background: var(--c-ticket); color: var(--c-ink-deep); font-size: var(--t-xs); text-align: center; padding: .45rem var(--gutter); font-weight: 500; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--c-stock-2); }
.header-inner { display: flex; align-items: center; gap: var(--s-5); min-height: 4.25rem; }
.wordmark { text-decoration: none; display: inline-flex; align-items: center; }
.wordmark-text { font-family: var(--f-display); font-weight: 800; font-stretch: 75%; font-size: 1.6rem; color: var(--c-ink); letter-spacing: .01em; }
.custom-logo { height: 40px; width: auto; }
.nav-primary { margin-left: auto; }
.nav-primary ul { display: flex; list-style: none; gap: var(--s-1); }
.nav-primary a { display: block; padding: .5rem .7rem; text-decoration: none; color: var(--c-text); font-size: var(--t-sm); font-weight: 500; border-radius: 8px; }
.nav-primary a:hover { background: var(--c-stock); }
.nav-primary a[aria-current="page"] { color: var(--c-ink); box-shadow: inset 0 -3px 0 var(--c-ticket); border-radius: 0; }
.menu-toggle { display: none; margin-left: auto; width: 2.75rem; height: 2.75rem; border: 0; background: transparent; cursor: pointer; border-radius: 8px; }
.menu-toggle .bars, .menu-toggle .bars::before, .menu-toggle .bars::after { display: block; width: 22px; height: 2px; background: var(--c-ink); margin: auto; position: relative; transition: transform .2s var(--ease); }
.menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle .bars::before { top: -7px; } .menu-toggle .bars::after { top: 7px; }
.menu-toggle[aria-expanded="true"] .bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile { border-top: 1px solid var(--c-stock-2); background: var(--c-paper); }
.nav-mobile ul { list-style: none; padding: var(--s-3) var(--gutter) var(--s-5); display: grid; }
.nav-mobile a { display: block; padding: .8rem 0; text-decoration: none; font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700; font-stretch: var(--stretch-tight); color: var(--c-ink-deep); border-bottom: 1px solid var(--c-stock-2); }
.nav-mobile a[aria-current="page"] { color: var(--c-ink-soft); }

@media (max-width: 1060px) {
	.nav-primary, .header-cta { display: none; }
	.menu-toggle { display: block; }
}

/* ---------- Boleto (pieza característica) ---------- */
.ticket { position: relative; display: grid; grid-template-columns: 1fr 18rem; background: var(--c-paper); border-radius: var(--r-ticket); box-shadow: var(--shadow-ticket); border: 1px solid var(--c-stock-2); }
.ticket-main { padding: clamp(1.75rem, 1rem + 4vw, 4.5rem); }
.ticket-stub {
	position: relative; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); background: var(--c-ticket);
	border-radius: 0 var(--r-ticket) var(--r-ticket) 0; display: flex; flex-direction: column; gap: var(--s-3);
	background-image: radial-gradient(circle at 0 0, transparent 0, transparent 0);
}
/* Perforación: línea de puntos y muescas semicirculares */
.ticket-stub::before {
	content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 2px;
	background-image: radial-gradient(circle, var(--c-stock) 1.6px, transparent 2px); background-size: 2px 10px; background-repeat: repeat-y;
}
.ticket::before, .ticket::after {
	content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--c-stock);
	right: calc(18rem - 15px); z-index: 2;
}
.ticket::before { top: -15px; box-shadow: inset 0 -1px 0 var(--c-stock-2); }
.ticket::after { bottom: -15px; box-shadow: inset 0 1px 0 var(--c-stock-2); }
.stub-no { font-family: var(--f-display); font-stretch: var(--stretch-num); font-weight: 800; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: .9; color: var(--c-ink-deep); margin: 0 0 var(--s-2); font-variant-numeric: tabular-nums; letter-spacing: -.01em; cursor: default; }
.stub-no span { font-size: .32em; font-weight: 600; vertical-align: top; margin-right: .15em; letter-spacing: 0; }
.stub-q { font-weight: 600; margin: auto 0 var(--s-1); color: var(--c-ink-deep); }
.stub-path { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; background: var(--c-paper); border-radius: var(--r-control); text-decoration: none; font-weight: 600; color: var(--c-ink-deep); border: 2px solid transparent; transition: border-color .15s var(--ease); }
.stub-path::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; }
.stub-path:hover { border-color: var(--c-ink); }

/* ---------- Hero ---------- */
.hero { background: var(--c-stock); padding: clamp(2rem, 1rem + 4vw, 4.5rem) 0 0; overflow: hidden; }
.hero h1 { font-size: var(--t-hero); line-height: .86; letter-spacing: -0.03em; font-stretch: 76%; margin-bottom: var(--s-4); max-width: 8.2em; }
.hero-sub { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 600; font-stretch: 85%; color: var(--c-ink-soft); line-height: 1.1; margin-bottom: var(--s-6); }
.hero-desc { font-size: var(--t-md); max-width: 48ch; line-height: 1.5; }
.hero-actions, .intro-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-strip { display: flex; gap: 6px; margin: clamp(2rem, 1rem + 3vw, 3.5rem) calc(-1 * var(--gutter)) 0; padding: 0 0 var(--s-5); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hero-strip span { flex: 0 0 auto; width: 3.4rem; height: 2.6rem; display: grid; place-items: center; border-radius: var(--r-cell); font-family: var(--f-display); font-stretch: var(--stretch-num); font-weight: 700; font-size: 1.05rem; background: var(--c-paper); color: var(--c-ink); border: 1px solid var(--c-stock-2); transition: background-color .5s var(--ease), color .5s var(--ease); font-variant-numeric: tabular-nums; }
.hero-strip span.is-held { background: var(--c-held); color: var(--c-ink-deep); border-color: transparent; }
.hero-strip span.is-paid { background: var(--c-paid); color: #fff; border-color: transparent; }
.hero-strip span.is-sel { background: var(--c-sel); color: var(--c-ink-deep); border-color: transparent; }

/* ---------- Secciones ---------- */
.section { padding-block: var(--section); }
.section-tight { padding-block: var(--s-7) var(--section); }
.section-stock { background: var(--c-stock); }
.section-ink { background: var(--c-ink-deep); color: #e7e9f6; }
.section-ink h2, .section-ink h3 { color: #fff; }
.section-ink .fineprint { color: #b7bce0; }
.section-head { margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); max-width: 46rem; }
.section-head h2 { margin-bottom: var(--s-3); }

/* Declaración */
.statement-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: start; }
.statement-title { font-size: var(--t-2xl); font-weight: 800; line-height: .95; position: sticky; top: 7rem; }
.statement-body .big { font-family: var(--f-display); font-size: var(--t-lg); line-height: 1.3; color: var(--c-ink-deep); font-weight: 500; font-stretch: 92%; max-width: 32ch; }
.statement-body .fineprint { margin-top: var(--s-6); font-size: var(--t-sm); }

/* Know-how */
.knowhow { background: var(--c-ink-deep); color: #dfe2f5; }
.knowhow h2, .knowhow h3 { color: #fff; }
.knowhow-head { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-7); align-items: end; margin-bottom: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
.knowhow-head h2 { font-size: var(--t-2xl); font-weight: 800; line-height: .96; margin: 0; }
.knowhow-head .lede { color: #b9bee3; margin: 0; }
.pillars { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--c-ticket); }
.pillar { padding: var(--s-5) var(--s-5) var(--s-6) 0; border-right: 1px dashed rgba(255,255,255,.22); display: flex; flex-direction: column; }
.pillar + .pillar { padding-left: var(--s-5); }
.pillar:last-child { border-right: 0; }
.pillar-n { font-family: var(--f-display); font-stretch: var(--stretch-num); font-weight: 800; font-size: 3.25rem; line-height: 1; color: var(--c-ticket); margin-bottom: var(--s-4); }
.pillar h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.pillar p { font-size: var(--t-sm); color: #c5c9e8; }
.pillar-out { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,.14); color: #fff !important; }
.pillar-out span { display: block; font-size: var(--t-xs); color: var(--c-ticket); font-weight: 600; }
.deliverables { margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); display: grid; grid-template-columns: 4fr 8fr; gap: var(--s-7); }
.deliverables-intro p { color: #b9bee3; font-size: var(--t-sm); }
.deliverables-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.deliverables-table th, .deliverables-table td { text-align: left; padding: .8rem .75rem .8rem 0; border-bottom: 1px solid rgba(255,255,255,.13); vertical-align: top; }
.deliverables-table thead th { font-weight: 500; color: #9ea4d3; font-size: var(--t-xs); }
.deliverables-table tbody th { color: #fff; font-weight: 600; }
.deliverables-table td:last-child { color: #b9bee3; }
.cond { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.cond-incluido { background: var(--c-ticket); color: var(--c-ink-deep); }
.cond-limite { border: 1px solid var(--c-ticket); color: var(--c-ticket); }
.cond-aparte { border: 1px dashed rgba(255,255,255,.5); color: #dfe2f5; }

/* Perfiles */
.paths-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 0.5rem + 2vw, 2rem); }
.path { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: var(--r-ticket); background: var(--c-stock); display: flex; flex-direction: column; scroll-margin-top: 6rem; }
.path-alt { background: var(--c-paper); border: 2px solid var(--c-ink); }
.path h3 { font-size: var(--t-xl); font-stretch: var(--stretch-tight); font-weight: 800; }
.path .btn { align-self: flex-start; margin-top: auto; white-space: normal; text-align: left; }
.path-plan { font-size: var(--t-sm); color: var(--c-muted); margin: var(--s-5) 0; }
.checklist { list-style: none; display: grid; gap: .55rem; margin: var(--s-3) 0 var(--s-4); }
.checklist li { position: relative; padding-left: 1.75rem; line-height: 1.45; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .32em; width: 1rem; height: .55rem; border-left: 2.5px solid var(--c-ink); border-bottom: 2.5px solid var(--c-ink); transform: rotate(-45deg) scale(.85); transform-origin: 30% 60%; }
.checklist-light li::before { border-color: var(--c-ticket); }

/* Vista previa del software */
.preview { background: var(--c-stock); }
.preview-grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }

/* ---------- Planes (talonario) ---------- */
.ledger { display: grid; gap: var(--s-6); }
.ledger-group { border-top: 2px solid var(--c-ink); }
.ledger-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); padding: var(--s-4) 0; align-items: baseline; }
.ledger-head h3 { margin: 0; font-size: var(--t-lg); font-stretch: var(--stretch-tight); }
.ledger-head p { margin: 0; color: var(--c-muted); font-size: var(--t-sm); }
.ledger-row { display: grid; grid-template-columns: 6fr 4fr auto; gap: var(--s-5); align-items: center; padding: var(--s-5) 0; border-top: 1px dashed var(--c-line); }
.ledger-name h4 { font-size: var(--t-lg); font-stretch: var(--stretch-tight); margin-bottom: .2rem; }
.ledger-name p { margin: 0; color: var(--c-muted); font-size: var(--t-sm); }
.ledger-price { margin: 0; }
.amount { font-family: var(--f-display); font-stretch: var(--stretch-num); font-weight: 800; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); color: var(--c-ink-deep); line-height: 1; font-variant-numeric: tabular-nums; }
.unit { display: block; font-size: var(--t-xs); color: var(--c-muted); }
.ledger-note { font-size: var(--t-sm); color: var(--c-muted); }

/* Planes detallados */
.plan-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 0.5rem + 2vw, 2rem); align-items: start; }
.plan-sheet { border: 1px solid var(--c-line); border-radius: var(--r-ticket); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); display: flex; flex-direction: column; }
.plan-sheet header { border-bottom: 1px dashed var(--c-line); padding-bottom: var(--s-5); margin-bottom: var(--s-4); }
.plan-sheet-pro { border: 2px solid var(--c-ink); position: relative; }
.plan-sheet-pro::before { content: ""; position: absolute; top: -2px; left: clamp(1.5rem, 1rem + 2vw, 2.75rem); width: 4rem; height: 6px; background: var(--c-ticket); }
.plan-price { margin: var(--s-2) 0 var(--s-3); }
.plan-excl { font-size: var(--t-sm); color: var(--c-muted); }
.plan-sheet .btn { align-self: flex-start; margin-top: var(--s-4); }

.terms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.term h3 { font-size: var(--t-md); }
.term p { font-size: var(--t-sm); }
.cost-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-paper); }
.cost-col { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.cost-col + .cost-col { border-left: 1px dashed var(--c-line); }
.split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-7); align-items: center; }
.split-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: flex-end; }

/* Comparativa */
.compare-wrap { overflow-x: auto; border-radius: var(--r-card); }
.compare { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--t-sm); }
.compare th, .compare td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--c-stock-2); vertical-align: top; }
.compare thead th { vertical-align: bottom; border-bottom: 2px solid var(--c-ink); padding-top: var(--s-5); }
.compare tbody th { font-weight: 500; color: var(--c-text); width: 24%; position: sticky; left: 0; background: var(--c-paper); }
.compare .is-pro { background: var(--c-stock); }
.compare thead .is-pro { background: var(--c-ticket); border-radius: var(--r-card) var(--r-card) 0 0; }
.c-name { display: block; font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); color: var(--c-ink-deep); }
.c-price { display: block; font-family: var(--f-display); font-stretch: var(--stretch-num); font-weight: 800; font-size: 2rem; color: var(--c-ink-deep); line-height: 1.1; margin-top: var(--s-2); }
.c-unit { display: block; font-size: var(--t-xs); color: var(--c-muted); font-weight: 500; }
.yes { font-weight: 600; color: var(--c-ink); }
.yes::before { content: ""; display: inline-block; width: .7rem; height: .38rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin: 0 .5rem .18rem 0; }
.no { color: #9298b3; }
.addons { width: 100%; border-collapse: collapse; font-size: var(--t-sm); background: var(--c-paper); border-radius: var(--r-card); overflow: hidden; }
.addons th, .addons td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--c-stock-2); vertical-align: top; }
.addons thead th { font-size: var(--t-xs); color: var(--c-muted); font-weight: 500; }
.addons tbody th { font-weight: 600; }
.pending-cell { color: var(--c-ink-soft); font-weight: 600; }

/* ---------- Publicidad ---------- */
.ads-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-7); align-items: end; padding-block: var(--s-7); border-block: 2px solid var(--c-ink); }
.ads-teaser { padding-block: var(--s-6); }
.price-pair { display: grid; gap: var(--s-4); margin: 0; }
.price-pair div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); border-bottom: 1px dashed var(--c-line); padding-bottom: var(--s-3); }
.price-pair dt { font-weight: 600; }
.price-pair dd { margin: 0; font-family: var(--f-display); font-stretch: var(--stretch-num); font-weight: 800; font-size: 2rem; color: var(--c-ink-deep); text-align: right; line-height: 1; }
.price-pair dd span { display: block; font-family: var(--f-body); font-size: var(--t-xs); font-weight: 500; color: var(--c-muted); }
.price-pair-light div { border-color: rgba(255,255,255,.25); }
.price-pair-light dd { color: var(--c-ticket); }
.price-pair-light dd span { color: #b9bee3; }
.ads-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); }
.ads-detail .price-pair { margin: var(--s-6) 0 var(--s-4); }

/* ---------- Proceso ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-5); counter-reset: s; }
.steps li { position: relative; padding-top: var(--s-5); border-top: 2px solid var(--c-ink); }
.steps li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--c-ticket); border: 2px solid var(--c-ink); }
.step-n { font-family: var(--f-display); font-stretch: var(--stretch-num); font-weight: 700; color: var(--c-ink-soft); font-size: var(--t-sm); }
.steps h3 { margin: var(--s-2) 0; }
.steps p { font-size: var(--t-sm); color: var(--c-muted); }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: 4fr 8fr; gap: var(--s-7); }
.faq-list details { border-top: 1px solid var(--c-line); }
.faq-list details:last-of-type { border-bottom: 1px solid var(--c-line); }
.faq-list summary { cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative; font-weight: 600; font-size: var(--t-md); line-height: 1.35; color: var(--c-ink-deep); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: .4rem; top: 1.45rem; width: 10px; height: 10px; border-right: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink); transform: rotate(45deg); transition: transform .2s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(-135deg); top: 1.7rem; }
.faq-list details p { padding-bottom: var(--s-5); color: var(--c-muted); }
.faq-list > p { margin-top: var(--s-5); }
.faq-page, .legal-layout { display: grid; grid-template-columns: 3fr 9fr; gap: var(--s-7); align-items: start; }
.faq-index { position: sticky; top: 6.5rem; }
.faq-index ul { list-style: none; display: grid; gap: var(--s-1); border-left: 2px solid var(--c-stock-2); }
.faq-index a { display: block; padding: .4rem 0 .4rem var(--s-4); text-decoration: none; color: var(--c-muted); font-weight: 500; font-size: var(--t-sm); margin-left: -2px; border-left: 2px solid transparent; }
.faq-index a:hover { color: var(--c-ink); border-color: var(--c-ink); }
.faq-group + .faq-group { margin-top: var(--s-8); }

/* ---------- Banda CTA ---------- */
.cta-band { background: var(--c-ink); color: #dfe2f5; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.cta-inner { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-6); align-items: center; }
.cta-band h2 { color: #fff; font-size: var(--t-2xl); font-weight: 800; line-height: .95; }
.cta-band p { color: #c5c9e8; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: flex-end; }

/* ---------- Encabezado de páginas interiores ---------- */
.page-intro { background: var(--c-stock); padding: clamp(3rem, 2rem + 4vw, 6rem) 0 clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.page-intro h1 { font-size: clamp(2.8rem, 1.6rem + 5vw, 6rem); line-height: .9; letter-spacing: -0.025em; max-width: 14ch; }
.page-intro .lede { font-size: var(--t-md); margin-top: var(--s-5); }
.big-404 { font-size: clamp(5rem, 3rem + 8vw, 10rem); color: var(--c-ink); }
.crumbs { padding-top: var(--s-5); font-size: var(--t-sm); color: var(--c-muted); }
.crumbs a { color: var(--c-muted); }
.prose { max-width: 46rem; }

/* ---------- Vehículos ---------- */
.order-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--s-6); counter-reset: o; }
.order-steps li { counter-increment: o; font-size: var(--t-sm); font-weight: 600; color: var(--c-ink-deep); padding: .5rem 1rem .5rem 0; display: flex; align-items: center; gap: .5rem; }
.order-steps li::before { content: counter(o); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid var(--c-ink); font-family: var(--f-display); font-stretch: var(--stretch-num); font-size: .85rem; }
.order-steps li + li { padding-left: 1rem; border-left: 1px dashed var(--c-line); }
.demo-flag { display: inline-block; padding: .55rem .9rem; border-radius: var(--r-control); background: #fff4cc; color: var(--c-ink-deep); font-size: var(--t-sm); font-weight: 500; border: 1px dashed var(--c-ticket-deep); max-width: none; }
.filters { display: grid; grid-template-columns: 2fr repeat(4, 1fr) auto; gap: var(--s-3); align-items: end; margin: var(--s-5) 0 var(--s-3); padding: var(--s-4); background: var(--c-stock); border-radius: var(--r-card); }
.filter label { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--c-muted); margin-bottom: .3rem; }
.filter-count { font-size: var(--t-sm); color: var(--c-muted); margin-bottom: var(--s-5); }
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem); }
.vcard-link { display: block; text-decoration: none; color: inherit; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--c-stock-2); background: var(--c-paper); height: 100%; transition: border-color .15s var(--ease); }
.vcard-link:hover { border-color: var(--c-ink); }
.vcard-link:hover .vcard-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.vcard-media { aspect-ratio: 16 / 10; background: var(--c-stock); }
.vcard-media img { width: 100%; height: 100%; object-fit: cover; }
.vcard-body { padding: var(--s-4) var(--s-5) var(--s-5); }
.vcard-brand { font-size: var(--t-xs); font-weight: 600; color: var(--c-muted); margin: 0; }
.vcard-title { font-size: var(--t-lg); font-stretch: var(--stretch-tight); margin: .1rem 0 .2rem; }
.vcard-title span { font-weight: 500; color: var(--c-muted); font-size: .7em; font-stretch: 100%; display: block; letter-spacing: 0; }
.vcard-meta { font-size: var(--t-sm); color: var(--c-muted); margin: 0 0 var(--s-3); }
.vcard-status { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.stamp { display: inline-block; padding: .15rem .55rem; border: 1.5px solid var(--c-ink); border-radius: 4px; font-size: var(--t-xs); font-weight: 700; color: var(--c-ink); transform: rotate(-2deg); }
.stamp-lg { font-size: var(--t-sm); padding: .25rem .7rem; }
.tag-demo { font-size: var(--t-xs); color: var(--c-ink-deep); background: #fff4cc; padding: .15rem .5rem; border-radius: 4px; }
.vehicle-placeholder { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: var(--c-stock); padding: 8% 6% 12%; }
.vehicle-placeholder span { position: absolute; bottom: .6rem; left: .9rem; font-size: .72rem; color: var(--c-muted); }
.silhouette { width: 100%; height: auto; }
.silhouette .s-body { fill: var(--c-ink); }
.silhouette .s-glass { fill: var(--c-stock-2); }
.silhouette .s-tire { fill: var(--c-ink-deep); }
.silhouette .s-rim { fill: var(--c-ticket); }
.silhouette .s-line { stroke: var(--c-stock-2); stroke-width: 3; fill: none; }
.silhouette .s-ground { stroke: var(--c-line); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.silhouette .s-seat { fill: var(--c-ink-deep); }
.vehicle-placeholder[data-tipo="moto"] .s-body { fill: none; stroke: var(--c-ink); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.vgrid-teaser { margin-top: 0; }
.teaser-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.teaser-head .section-head { margin: 0; }
.empty { text-align: left; padding: var(--s-7) 0; }

.vehicle-top { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); padding-block: var(--s-5) var(--s-8); align-items: start; }
.vehicle-hero-media { aspect-ratio: 16 / 10; border-radius: var(--r-ticket); overflow: hidden; background: var(--c-stock); }
.vehicle-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { list-style: none; display: flex; gap: var(--s-2); margin-top: var(--s-3); overflow-x: auto; }
.thumbs button { border: 2px solid transparent; padding: 0; border-radius: 8px; overflow: hidden; width: 6rem; aspect-ratio: 16 / 10; cursor: pointer; background: none; }
.thumbs button[aria-current="true"] { border-color: var(--c-ink); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.media-note { font-size: var(--t-xs); color: var(--c-muted); margin-top: var(--s-3); }
.vehicle-summary { position: sticky; top: 6rem; }
.vehicle-brand { font-weight: 600; color: var(--c-muted); margin: 0; }
.vehicle-summary h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem); line-height: .92; margin: .2rem 0 var(--s-3); }
.vehicle-summary h1 span { display: block; font-size: .42em; font-weight: 600; color: var(--c-ink-soft); font-stretch: 90%; margin-top: .35rem; letter-spacing: 0; }
.vehicle-year { color: var(--c-muted); }
.vehicle-status { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.vehicle-lede { font-size: var(--t-md); line-height: 1.5; margin-top: var(--s-5); }
.vehicle-values { margin: var(--s-5) 0; border-top: 2px solid var(--c-ink); }
.vehicle-values div { display: flex; justify-content: space-between; gap: var(--s-4); padding: .8rem 0; border-bottom: 1px dashed var(--c-line); }
.vehicle-values dt { color: var(--c-muted); font-size: var(--t-sm); }
.vehicle-values dd { margin: 0; font-weight: 700; color: var(--c-ink-deep); text-align: right; }
.vehicle-values .pending { border: 0; padding: 0; font-weight: 600; }
.vehicle-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.vehicle-details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); padding-bottom: var(--s-8); }
.specs div { display: grid; grid-template-columns: 10rem 1fr; gap: var(--s-4); padding: .7rem 0; border-bottom: 1px solid var(--c-stock-2); font-size: var(--t-sm); }
.specs dt { color: var(--c-muted); }
.specs dd { margin: 0; font-weight: 500; }

/* ---------- Calculadora ---------- */
.calc { border: 2px solid var(--c-ink); border-radius: var(--r-ticket); background: var(--c-paper); overflow: hidden; }
.calc-flag { margin: 0; max-width: none; padding: .85rem clamp(1.25rem, 1rem + 1.5vw, 2rem); background: #fff4cc; font-size: var(--t-sm); border-bottom: 1px dashed var(--c-ticket-deep); }
.calc-body { display: grid; grid-template-columns: 5fr 7fr; }
.calc-inputs { border: 0; margin: 0; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-content: start; border-right: 1px dashed var(--c-line); min-width: 0; }
.calc-field label { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--c-muted); margin-bottom: .3rem; }
.calc-input { display: flex; align-items: center; border: 1.5px solid var(--c-line); border-radius: var(--r-control); background: var(--c-paper); padding-inline: .75rem; transition: border-color .15s var(--ease); }
.calc-input:focus-within { border-color: var(--c-ink); box-shadow: 0 0 0 3px rgba(255, 210, 63, .55); }
.calc-input span { color: var(--c-muted); font-weight: 600; }
.calc-input input { border: 0; outline: 0; background: transparent; width: 100%; min-width: 0; padding: .7rem .35rem; font: 600 var(--t-base) var(--f-body); color: var(--c-ink-deep); font-variant-numeric: tabular-nums; }
.calc-results { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); background: var(--c-stock); min-width: 0; }
.calc-figures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); margin: 0 0 var(--s-5); }
.calc-figures div { border-top: 1px solid var(--c-line); padding-top: var(--s-2); }
.calc-figures dt { font-size: var(--t-xs); color: var(--c-muted); font-weight: 600; }
.calc-figures dd { margin: .15rem 0 0; font-family: var(--f-display); font-stretch: var(--stretch-num); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); color: var(--c-ink-deep); line-height: 1.05; font-variant-numeric: tabular-nums; }
.calc-figures .is-key { grid-column: 1 / -1; border-top: 2px solid var(--c-ink); }
.calc-figures .is-key dd { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); }
.calc-figures dd.is-negative { color: var(--c-err); }
.calc-strip { margin-bottom: var(--s-3); }
.strip-cells { display: grid; grid-template-columns: repeat(50, 1fr); gap: 2px; }
.strip-cells i { display: block; aspect-ratio: 1 / 2.2; border-radius: 2px; background: var(--c-paper); border: 1px solid var(--c-line); }
.strip-cells i.sold { background: var(--c-ink); border-color: var(--c-ink); }
.strip-cells i.be { box-shadow: 0 -5px 0 -1px var(--c-ticket-deep), 0 5px 0 -1px var(--c-ticket-deep); background: var(--c-ticket); border-color: var(--c-ticket-deep); }
.strip-legend, .legend { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--t-xs); color: var(--c-muted); margin-top: var(--s-2); }
.lg { display: inline-flex; align-items: center; gap: .4rem; }
.lg::before { content: ""; width: .85rem; height: .85rem; border-radius: 3px; border: 1px solid var(--c-line); background: var(--c-paper); }
.lg-sold::before, .lg-paid::before { background: var(--c-paid); border-color: var(--c-paid); }
.lg-be::before, .lg-sel::before { background: var(--c-ticket); border-color: var(--c-ticket-deep); }
.lg-held::before { background: var(--c-held); border-color: var(--c-held); }
.calc-be { font-size: var(--t-sm); font-weight: 600; color: var(--c-ink-deep); }
.calc-scenarios { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin-top: var(--s-4); }
.calc-scenarios caption { text-align: left; font-weight: 600; font-size: var(--t-xs); color: var(--c-muted); padding-bottom: var(--s-2); }
.calc-scenarios th, .calc-scenarios td { text-align: left; padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--c-line); font-variant-numeric: tabular-nums; }
.calc-scenarios thead th { font-weight: 500; color: var(--c-muted); font-size: var(--t-xs); }
.calc-scenarios td.neg { color: var(--c-err); font-weight: 600; }
.calc-compact .calc-inputs { grid-template-columns: 1fr 1fr; }
.calc-section { background: var(--c-paper); }

/* ---------- Demostración de boletaje ---------- */
.raffle .demo-flag { margin-bottom: var(--s-4); }
.raffle-prize { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); background: var(--c-stock); border-radius: var(--r-ticket); margin-bottom: var(--s-5); }
.raffle-prize-media { background: var(--c-paper); border-radius: var(--r-card); padding: 8% 6%; }
.raffle-org { font-size: var(--t-sm); color: var(--c-muted); margin: 0 0 var(--s-2); }
.raffle-prize h2 { margin-bottom: var(--s-4); }
.raffle-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-5); margin: 0 0 var(--s-4); }
.raffle-facts dt { font-size: var(--t-xs); color: var(--c-muted); font-weight: 600; }
.raffle-facts dd { margin: 0; font-weight: 600; color: var(--c-ink-deep); }
.raffle-bases { font-size: var(--t-sm); color: var(--c-muted); margin: 0; }
.raffle-board { display: grid; grid-template-columns: 1fr 20rem; gap: var(--s-5); align-items: start; }
.raffle-mini .raffle-board { grid-template-columns: 1fr; }
.raffle-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); }
.raffle-tools { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.lookup { display: flex; gap: var(--s-2); align-items: center; }
.lookup label { font-size: var(--t-xs); font-weight: 600; color: var(--c-muted); }
.lookup input { width: 5.5rem; padding: .5rem .6rem; border: 1.5px solid var(--c-line); border-radius: 8px; font: 600 var(--t-sm) var(--f-body); }
.only-free { font-size: var(--t-sm); display: inline-flex; gap: .4rem; align-items: center; }
.lookup-out { min-height: 1.5em; font-size: var(--t-sm); font-weight: 600; color: var(--c-ink-deep); margin: 0 0 var(--s-2); }
.ticket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr)); gap: 5px; max-height: 34rem; overflow-y: auto; padding: 4px; background: var(--c-stock); border-radius: var(--r-card); overscroll-behavior: contain; }
.raffle-mini .ticket-grid { grid-template-columns: repeat(10, 1fr); max-height: none; padding: clamp(.5rem, .3rem + 1vw, 1rem); background: var(--c-paper); border: 1px solid var(--c-stock-2); box-shadow: var(--shadow-ticket); }
.tk {
	appearance: none; border: 1px solid var(--c-line); background: var(--c-free); color: var(--c-ink);
	border-radius: var(--r-cell); height: 2.6rem; cursor: pointer;
	font-family: var(--f-display); font-stretch: var(--stretch-num); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums;
	transition: background-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
}
.raffle-mini .tk { height: auto; aspect-ratio: 1.25; font-size: clamp(.8rem, .6rem + .6vw, 1.05rem); }
.tk:hover:not(:disabled) { border-color: var(--c-ink); }
.tk[aria-pressed="true"] { background: var(--c-sel); border-color: var(--c-ticket-deep); color: var(--c-ink-deep); transform: scale(1.04); }
.tk.is-held { background: var(--c-held); border-color: var(--c-held); color: var(--c-ink-deep); }
.tk.is-mine.is-held { outline: 2px solid var(--c-ink); outline-offset: -2px; }
.tk.is-paid { background: var(--c-paid); border-color: var(--c-paid); color: #fff; }
.tk.is-mine.is-paid { background: var(--c-ink-soft); outline: 2px solid var(--c-ticket); outline-offset: -2px; }
.tk:disabled { cursor: not-allowed; }
.tk.is-hit { animation: hit 1.2s var(--ease) 1; }
@keyframes hit { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px var(--c-ink-deep); } }
.ticket-grid.only-free .tk:disabled { display: none; }
.raffle-cart { background: var(--c-paper); border: 2px solid var(--c-ink); border-radius: var(--r-ticket); padding: var(--s-5); position: sticky; top: 6rem; }
.raffle-cart h3 { font-size: var(--t-lg); font-stretch: var(--stretch-tight); }
.random-pick label { font-size: var(--t-xs); font-weight: 600; color: var(--c-muted); display: block; margin-bottom: .3rem; }
.random-row { display: flex; gap: var(--s-2); }
.random-row input { width: 4.5rem; padding: .5rem .6rem; border: 1.5px solid var(--c-line); border-radius: 8px; font: 600 var(--t-sm) var(--f-body); }
.random-pick small { display: block; font-size: var(--t-xs); color: var(--c-muted); margin-top: .3rem; }
.cart-list { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: var(--s-4) 0 var(--s-2); }
.cart-list li { display: inline-flex; align-items: center; gap: .2rem; background: var(--c-ticket); border-radius: 6px; padding: .2rem .25rem .2rem .55rem; font-family: var(--f-display); font-stretch: var(--stretch-num); font-weight: 700; color: var(--c-ink-deep); }
.cart-list button { border: 0; background: transparent; cursor: pointer; width: 1.6rem; height: 1.6rem; border-radius: 4px; color: var(--c-ink-deep); font-size: 1.05rem; line-height: 1; }
.cart-list button:hover { background: rgba(0,0,0,.08); }
.cart-list.is-locked li { background: var(--c-held); }
.cart-list.is-paid li { background: var(--c-ink-soft); color: #fff; }
.cart-empty { font-size: var(--t-sm); color: var(--c-muted); margin: var(--s-4) 0 var(--s-2); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--c-line); padding-top: var(--s-3); margin: var(--s-3) 0 var(--s-4); }
.cart-total span { font-size: var(--t-sm); color: var(--c-muted); }
.cart-total strong { font-family: var(--f-display); font-stretch: var(--stretch-num); font-size: 1.9rem; color: var(--c-ink-deep); }
.cart-steps .btn { width: 100%; }
.held-box, .paid-box { font-size: var(--t-sm); display: grid; gap: var(--s-2); }
.held-box p, .paid-box p { margin: 0 0 var(--s-2); }
.paid-box { padding: var(--s-3); background: #e3f3ea; border-radius: var(--r-control); color: #14513a; }
.btn-reset { width: 100%; margin-top: var(--s-4); }
.verse-note { font-size: var(--t-xs); color: var(--c-ink-soft); font-style: italic; margin-top: var(--s-3); border-left: 3px solid var(--c-ticket); padding-left: var(--s-3); }

/* ---------- Formularios ---------- */
.section-form { background: var(--c-stock); }
.form-layout { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.form-aside .btn { margin-top: var(--s-3); }
.ryg-form { background: var(--c-paper); border-radius: var(--r-ticket); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); border: 1px solid var(--c-stock-2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
.field-wide { grid-column: 1 / -1; }
.field label { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: .35rem; color: var(--c-ink-deep); }
.opt { font-weight: 400; color: var(--c-muted); font-size: var(--t-xs); }
.field input, .field select, .field textarea, .filter input, .filter select {
	width: 100%; padding: .75rem .85rem; border: 1.5px solid var(--c-line); border-radius: var(--r-control);
	font: 500 var(--t-base) var(--f-body); color: var(--c-text); background: var(--c-paper);
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.filter input, .filter select { padding: .6rem .7rem; font-size: var(--t-sm); }
.field input:focus, .field select:focus, .field textarea:focus, .filter input:focus, .filter select:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px rgba(255, 210, 63, .6); }
.field select, .filter select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-ink) 50%), linear-gradient(135deg, var(--c-ink) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.25rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--c-err); }
.hint { display: block; font-size: var(--t-xs); color: var(--c-muted); margin-top: .25rem; }
.err { display: block; font-size: var(--t-xs); color: var(--c-err); font-weight: 600; margin-top: .25rem; min-height: 0; }
.field-consent { margin-top: var(--s-5); }
.check { display: flex !important; gap: .65rem; align-items: flex-start; font-weight: 400 !important; font-size: var(--t-sm) !important; color: var(--c-text) !important; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; flex: none; accent-color: var(--c-ink); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-5); }
.form-status { margin: 0; font-size: var(--t-sm); font-weight: 600; }
.form-status.is-ok { color: var(--c-ok); }
.form-status.is-err { color: var(--c-err); }
.form-status.is-info { color: var(--c-ink-soft); }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 1.1rem; height: 1.1rem; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-preview-note { font-size: var(--t-xs); color: var(--c-muted); margin: var(--s-4) 0 0; padding-top: var(--s-3); border-top: 1px dashed var(--c-line); }
.form-done { padding: var(--s-6); background: #e3f3ea; border-radius: var(--r-ticket); color: #14513a; }
.form-done h3 { color: #14513a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-layout { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.type-picker { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.type-picker legend { font-family: var(--f-display); font-weight: 700; font-size: var(--t-lg); color: var(--c-ink-deep); margin-bottom: var(--s-3); padding: 0; font-stretch: var(--stretch-tight); }
.type-opt { display: flex; gap: .7rem; padding: .85rem 1rem; border-radius: var(--r-control); background: var(--c-paper); border: 2px solid transparent; cursor: pointer; transition: border-color .15s var(--ease); }
.type-opt:hover { border-color: var(--c-line); }
.type-opt:has(input:checked) { border-color: var(--c-ink); }
.type-opt input { accent-color: var(--c-ink); margin-top: .3rem; }
.type-opt strong { display: block; color: var(--c-ink-deep); }
.type-opt small { display: block; color: var(--c-muted); font-size: var(--t-xs); line-height: 1.4; }
.contact-direct { margin-top: var(--s-6); }
.contact-direct h2 { font-size: var(--t-md); }
.contact-forms .form-panel > h2 { font-size: var(--t-lg); }

/* Soluciones */
.combos { display: grid; gap: var(--s-5); }
.combo { display: grid; grid-template-columns: 6fr 6fr; gap: var(--s-6); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0; border-top: 2px solid var(--c-ink); align-items: center; }
.combo h2 { font-size: var(--t-xl); }
.combo-what { font-weight: 600; color: var(--c-ink-deep); }
.combo-pieces { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.combo-pieces li { padding: 1.25rem .4rem; text-align: center; border-radius: var(--r-cell); font-size: var(--t-xs); font-weight: 700; font-family: var(--f-display); font-stretch: 85%; letter-spacing: .01em; }
.combo-pieces .on { background: var(--c-ticket); color: var(--c-ink-deep); }
.combo-pieces .off { background: transparent; border: 1px dashed var(--c-line); color: #9aa0bb; }

/* Legales */
.legal-doc + .legal-doc { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--c-stock-2); }
.draft-flag { display: inline-block; font-size: var(--t-xs); font-weight: 700; color: var(--c-err); border: 1.5px solid var(--c-err); border-radius: 4px; padding: .15rem .5rem; transform: rotate(-1.5deg); }
.legal-outline { padding-left: 1.4rem; display: grid; gap: .4rem; color: var(--c-muted); }

/* ---------- Venta de premios ---------- */
.prize-hero { background: var(--c-ink-deep); color: #dfe2f5; padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0 clamp(2rem, 1rem + 3vw, 3.5rem); overflow: hidden; }
.prize-title { font-family: var(--f-display); font-weight: 800; font-stretch: 76%; text-transform: none; letter-spacing: -0.035em; line-height: .84; font-size: clamp(3.4rem, 1.2rem + 9vw, 10.5rem); color: #fff; margin: 0 0 var(--s-6); max-width: 12ch; text-wrap: balance; }
.prize-hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-6); align-items: end; }
.prize-lede { font-size: var(--t-md); line-height: 1.5; color: #c5c9e8; margin: 0; max-width: 46ch; }
.prize-lede strong { color: var(--c-ticket); font-weight: 600; }
.prize-hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: flex-end; }
.prize-hero .btn-line { border-color: rgba(255,255,255,.7); color: #fff; }
.prize-hero .btn-line:hover { background: #fff; color: var(--c-ink-deep); }
.gain-explainer { background: var(--c-stock); padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0; }
.gain-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.gain-steps ol { list-style: none; counter-reset: g; display: grid; gap: var(--s-4); margin: var(--s-4) 0 var(--s-5); }
.gain-steps li { counter-increment: g; position: relative; padding-left: 3rem; line-height: 1.45; }
.gain-steps li::before { content: counter(g); position: absolute; left: 0; top: -.1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--c-ink); color: var(--c-ticket); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-stretch: var(--stretch-num); }
.gain-sim { background: var(--c-paper); border: 2px solid var(--c-ink); border-radius: var(--r-ticket); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.sim-flag { display: inline-block; margin: 0 0 var(--s-4); font-size: var(--t-xs); font-weight: 600; background: #fff4cc; border-radius: 4px; padding: .15rem .5rem; }
.sim-field { margin-bottom: var(--s-4); }
.sim-field label { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: .3rem; }
.sim-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; }
.sim-row output { font-family: var(--f-display); font-stretch: var(--stretch-num); font-weight: 800; font-size: 1.5rem; color: var(--c-ink-deep); min-width: 8ch; text-align: right; font-variant-numeric: tabular-nums; }
.sim-row input[type=range] { width: 100%; accent-color: var(--c-ink); height: 2rem; }
.sim-bar { display: flex; height: 1.1rem; border-radius: 999px; overflow: hidden; background: var(--c-ticket); margin: var(--s-4) 0 var(--s-2); }
.sim-paid { background: var(--c-ink); transition: width .25s var(--ease); }
.sim-gain { flex: 1; }
.sim-legend { display: flex; gap: var(--s-4); font-size: var(--t-xs); color: var(--c-muted); margin-bottom: var(--s-4); }
.lg-gain::before { background: var(--c-ticket); border-color: var(--c-ticket-deep); }
.sim-results { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: var(--s-3); margin: 0; }
.sim-results div { border-top: 1px solid var(--c-line); padding-top: var(--s-2); }
.sim-results dt { font-size: var(--t-xs); color: var(--c-muted); font-weight: 600; }
.sim-results dd { margin: .1rem 0 0; font-family: var(--f-display); font-stretch: var(--stretch-num); font-weight: 800; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); color: var(--c-ink-deep); font-variant-numeric: tabular-nums; }
.sim-results .is-gain { border-top: 3px solid var(--c-ticket-deep); }
.sim-results .is-gain dd { color: var(--c-ink); background: var(--c-ticket); border-radius: 6px; padding: 0 .35rem; display: inline-block; }

.cat-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-bottom: var(--s-5); }
.cat-tab { appearance: none; display: grid; grid-template-columns: 4.5rem 1fr; grid-template-rows: auto auto; column-gap: var(--s-3); align-items: center; text-align: left; padding: var(--s-4); border-radius: var(--r-card); border: 2px solid var(--c-stock-2); background: var(--c-paper); cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease); font-family: var(--f-body); }
.cat-tab:hover { border-color: var(--c-ink-soft); }
.cat-tab[aria-selected="true"] { border-color: var(--c-ink); background: var(--c-ink); }
.cat-ico { grid-row: 1 / 3; background: var(--c-stock); border-radius: 10px; padding: .35rem; }
.cat-tab[aria-selected="true"] .cat-ico { background: var(--c-ticket); }
.cat-name { font-family: var(--f-display); font-weight: 800; font-stretch: var(--stretch-tight); font-size: var(--t-lg); color: var(--c-ink-deep); line-height: 1.05; }
.cat-count { font-size: var(--t-xs); color: var(--c-muted); }
.cat-tab[aria-selected="true"] .cat-name { color: #fff; }
.cat-tab[aria-selected="true"] .cat-count { color: #c5c9e8; }
.cat-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-bottom: var(--s-3); flex-wrap: wrap; }
.cat-desc { margin: 0; color: var(--c-muted); }

.figs { margin: var(--s-3) 0; display: grid; gap: .1rem; border-top: 1px dashed var(--c-line); padding-top: var(--s-2); }
.fig { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: .2rem 0; }
.fig dt { font-size: var(--t-xs); color: var(--c-muted); font-weight: 500; }
.fig dd { margin: 0; font-weight: 700; color: var(--c-ink-deep); font-variant-numeric: tabular-nums; text-align: right; }
.fig-gain { background: var(--c-ticket); border-radius: 6px; padding: .3rem .5rem; margin-top: .2rem; }
.fig-gain dt { color: var(--c-ink-deep); font-weight: 600; }
.figs.is-pending dd { color: #8a8fa8; font-weight: 600; letter-spacing: .02em; }
.figs.is-pending .fig-gain { background: #fff4cc; }
.figs-note { margin: .3rem 0 0; font-size: var(--t-xs); color: var(--c-muted); }
.figs-lg { border-top: 2px solid var(--c-ink); padding-top: var(--s-3); margin: var(--s-5) 0; }
.figs-lg .fig { padding: .55rem 0; border-bottom: 1px dashed var(--c-line); }
.figs-lg .fig dt { font-size: var(--t-sm); }
.figs-lg .fig dd { font-family: var(--f-display); font-stretch: var(--stretch-num); font-weight: 800; font-size: 1.6rem; }
.figs-lg .fig-gain { border-bottom: 0; padding: .6rem .75rem; margin-top: .4rem; }
.figs-lg .fig-gain dd { font-size: 2rem; }
.vcard { display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--c-stock-2); background: var(--c-paper); transition: border-color .15s var(--ease); }
.vcard:hover { border-color: var(--c-ink); }
.vcard-media { display: block; aspect-ratio: 16 / 10; background: var(--c-stock); }
.vcard-media img { width: 100%; height: 100%; object-fit: cover; }
.vcard-body { display: flex; flex-direction: column; flex: 1; }
.vcard-title a { color: inherit; text-decoration: none; }
.vcard-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.vcard-actions { display: flex; gap: var(--s-2); margin-top: auto; padding-top: var(--s-4); flex-wrap: wrap; }
.vcard-actions .btn { flex: 1; }
.silhouette .s-ring { fill: var(--c-ink); }
.silhouette .s-ring-in { fill: var(--c-stock); }
.cat-tab[aria-selected="true"] .s-ring-in, .vehicle-placeholder .s-ring-in { fill: var(--c-stock); }
.cat-tab[aria-selected="true"] .silhouette .s-ring-in { fill: var(--c-ticket); }
.silhouette .s-tire-line { stroke: var(--c-ink-deep); stroke-width: 6; stroke-linecap: round; fill: none; }
.prize-teaser { background: var(--c-ink-deep); color: #dfe2f5; }
.prize-teaser-head { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-6); align-items: end; margin-bottom: var(--s-7); }
.prize-title-sm { font-size: clamp(3rem, 1.2rem + 6vw, 7rem); margin: 0; }
.prize-teaser .lede { color: #c5c9e8; }
.prize-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-link { padding: .45rem .9rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.5); color: #fff; text-decoration: none; font-weight: 600; font-size: var(--t-sm); }
.chip-link:hover { background: var(--c-ticket); border-color: var(--c-ticket); color: var(--c-ink-deep); }
.teaser-more { margin: var(--s-6) 0 0; }
.prize-teaser .teaser-more .btn-primary { background: var(--c-ticket); color: var(--c-ink-deep); }
.wa-float { position: fixed; right: clamp(.75rem, 2vw, 1.5rem); bottom: clamp(.75rem, 2vw, 1.5rem); z-index: 60; }
.wa-float .btn { border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(8, 52, 31, .6); min-height: 3.25rem; padding-inline: 1.2rem; }
.wa-dialog { position: fixed; inset: 0; z-index: 120; background: rgba(23, 28, 69, .55); display: grid; place-items: center; padding: var(--s-4); }
.wa-dialog-card { background: var(--c-paper); border-radius: var(--r-ticket); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); max-width: 30rem; }
.wa-dialog-card h2 { font-size: var(--t-lg); }
.wa-dialog-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 860px) {
	.prize-hero-grid, .gain-grid, .prize-teaser-head { grid-template-columns: 1fr; }
	.prize-hero-actions { justify-content: flex-start; }
	.cat-tabs { grid-template-columns: 1fr; }
	.cat-tab { grid-template-columns: 3.5rem 1fr; padding: var(--s-3); }
}
@media (max-width: 600px) {
	.sim-results { grid-template-columns: 1fr; }
	.wa-float .btn span { display: none; }
	.wa-float .btn { padding-inline: .9rem; }
}

/* ---------- Pie ---------- */
.site-footer { background: var(--c-ink-deep); color: #c5c9e8; padding: var(--s-8) 0 var(--s-5); font-size: var(--t-sm); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-5); padding-bottom: var(--s-7); border-bottom: 1px dashed rgba(255,255,255,.2); }
.footer-claim { font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 800; font-stretch: 76%; line-height: .95; color: #fff; margin: 0; max-width: 11ch; }
.footer-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.site-footer .btn-ticket { color: var(--c-ink-deep); }
.site-footer .btn-whatsapp { color: #fff; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); padding: var(--s-7) 0; }
.footer-cols h2 { font-family: var(--f-body); font-stretch: 100%; letter-spacing: 0; font-size: var(--t-xs); color: #9ea4d3; font-weight: 600; margin-bottom: var(--s-3); }
.footer-cols ul { list-style: none; display: grid; gap: .5rem; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--s-5); }
.footer-legal p { font-size: var(--t-xs); color: #9ea4d3; max-width: 80ch; }
.footer-small { display: flex; align-items: center; gap: var(--s-3); }
.perf-mark { color: #4a518c; transition: color .4s var(--ease); }
.perf-mark:hover { color: var(--c-ticket); }

/* Huevo de pascua: ΙΧΘΥΣ que cruza la pantalla (código Konami) */
.ichthys { position: fixed; left: -12rem; bottom: 18vh; z-index: 200; width: 10rem; color: var(--c-ink); pointer-events: none; animation: swim 7s linear forwards; }
.ichthys p { margin: .2rem 0 0; font: 600 .8rem var(--f-body); text-align: center; color: var(--c-ink-deep); background: var(--c-ticket); border-radius: 6px; padding: .2rem .4rem; }
@keyframes swim { to { transform: translateX(calc(100vw + 24rem)); } }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
	.pillars { grid-template-columns: 1fr 1fr; }
	.pillar, .pillar + .pillar { padding: var(--s-5) var(--s-4) var(--s-5) 0; border-right: 0; border-bottom: 1px dashed rgba(255,255,255,.22); }
	.steps { grid-template-columns: 1fr 1fr; row-gap: var(--s-6); }
	.filters { grid-template-columns: 1fr 1fr 1fr; }
	.filter-search { grid-column: 1 / -1; }
	.raffle-board { grid-template-columns: 1fr; }
	.raffle-cart { position: static; }
	.deliverables, .knowhow-head { grid-template-columns: 1fr; gap: var(--s-5); }
	.calc-body { grid-template-columns: 1fr; }
	.calc-inputs { border-right: 0; border-bottom: 1px dashed var(--c-line); }
}
@media (max-width: 860px) {
	.ticket { grid-template-columns: 1fr; }
	.ticket-stub { border-radius: 0 0 var(--r-ticket) var(--r-ticket); }
	.ticket-stub::before { left: 18px; right: 18px; top: -1px; bottom: auto; width: auto; height: 2px; background-size: 10px 2px; background-repeat: repeat-x; }
	.ticket::before, .ticket::after { display: none; }
	.statement-grid, .preview-grid, .paths-grid, .plan-pair, .terms-grid, .cost-split, .split, .ads-grid, .ads-detail, .faq-layout, .faq-page, .legal-layout, .cta-inner, .form-layout, .contact-layout, .vehicle-top, .vehicle-details, .raffle-prize, .combo { grid-template-columns: 1fr; }
	.statement-title, .faq-index, .vehicle-summary { position: static; }
	.cost-col + .cost-col { border-left: 0; border-top: 1px dashed var(--c-line); }
	.vgrid { grid-template-columns: 1fr 1fr; }
	.ledger-head { grid-template-columns: 1fr; gap: var(--s-2); }
	.ledger-row { grid-template-columns: 1fr auto; }
	.ledger-row .btn { grid-column: 1 / -1; justify-self: start; }
	.split-actions, .cta-actions { justify-content: flex-start; }
	.teaser-head { flex-direction: column; align-items: flex-start; }
	.faq-index ul { display: flex; flex-wrap: wrap; border: 0; gap: var(--s-2); }
	.faq-index a { border: 1px solid var(--c-line); border-radius: 999px; padding: .35rem .8rem; margin: 0; }
}
@media (max-width: 600px) {
	.vgrid, .form-grid, .calc-inputs, .calc-compact .calc-inputs, .pillars, .steps, .footer-cols, .filters, .raffle-facts { grid-template-columns: 1fr; }
	.calc-figures { grid-template-columns: 1fr; }
	.raffle-mini .ticket-grid { gap: 3px; }
	.strip-cells { grid-template-columns: repeat(25, 1fr); }
	.combo-pieces { grid-template-columns: repeat(3, 1fr); }
	.order-steps li + li { border-left: 0; padding-left: 0; }
	.ticket-grid { max-height: 24rem; }
	.footer-claim { font-size: var(--t-xl); max-width: none; }
	.hero h1 { max-width: none; }
	.btn { white-space: normal; text-align: center; }
	.addons thead, .deliverables-table thead { display: none; }
	.addons, .addons tbody, .deliverables-table, .deliverables-table tbody { display: block; width: 100%; }
	.addons tr, .deliverables-table tr { display: grid; gap: .2rem; padding: .85rem 1rem; border-bottom: 1px solid var(--c-stock-2); }
	.deliverables-table tr { padding-inline: 0; border-color: rgba(255,255,255,.13); }
	.addons th, .addons td, .deliverables-table th, .deliverables-table td { display: block; border: 0; padding: 0; }
	.deliverables-table td:empty { display: none; }
}

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

@media print {
	.site-header, .preview-ribbon, .site-footer, .cta-band, .hero-strip { display: none; }
}