/* /organizer/pricing y las paginas de /organizer/features: el sistema visual de las paginas para
   organizadores (pr-*: portada, titulos, franja de datos, tarjetas ilustradas, pasos, preguntas
   frecuentes). Estaba en un <style> dentro de Precios.cshtml; salio a archivo para que las paginas de
   funciones usen exactamente los mismos estilos. Las ilustraciones reusables (pra-*, prf-*) se
   arman con los parciales de Views/Shared/Marketing. Solo tokens. */

/* ── Encabezado ──────────────────────────────────────── */
.pr-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 54px; align-items: center; padding: 56px 0 52px;
}
.pr-eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent-text); margin: 0 0 14px;
}
.pr-title {
    font-family: var(--font-serif); font-size: clamp(34px, 4.2vw, 54px);
    font-weight: 800; line-height: 1.04; letter-spacing: -.025em;
    color: var(--text-primary); margin: 0 0 18px;
}
.pr-title span { color: var(--accent-primary); }
.pr-sub {
    font-size: 16.5px; line-height: 1.62; color: var(--text-secondary);
    margin: 0 0 26px; max-width: 46ch;
}

.pr-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.pr-btn {
    display: inline-block; padding: 14px 28px; border-radius: var(--radius-pill);
    font-size: 15px; font-weight: 700; text-decoration: none;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}
.pr-btn--primary { background: var(--accent-primary); color: var(--text-on-accent); }
.pr-btn--primary:hover { background: var(--accent-primary-hover); color: var(--text-on-accent); }
.pr-btn--ghost {
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-strong);
}
.pr-btn--ghost:hover { border-color: var(--accent-primary); color: var(--text-primary); }

.pr-checks {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.pr-checks li {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; color: var(--text-secondary);
}
.pr-checks i { color: var(--status-success); font-size: 13px; }

/* ── Maqueta del encabezado ──────────────────────────────
   Es decorativa y lleva aria-hidden: describe el producto, no son datos reales.
   Se arma con divs en vez de una captura para que herede los tokens — si cambia
   la paleta, la maqueta cambia con ella en lugar de quedarse en la versión vieja. */
.pr-art { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; }
.pra-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.pra-side { display: grid; gap: 14px; align-content: start; }

.pra-main { padding: 18px 18px 14px; }
.pra-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--border-subtle);
}
.pra-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.pra-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pra-live {
    font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--status-success); background: var(--status-success-bg);
    border-radius: var(--radius-pill); padding: 4px 8px; white-space: nowrap;
}

.pra-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 13px 0; }
.pra-dow {
    font-size: 9px; font-weight: 700; color: var(--text-muted);
    text-align: center; letter-spacing: .06em; padding-bottom: 2px;
}
.pra-day {
    font-size: 11px; color: var(--text-secondary); text-align: center;
    padding: 5px 0; border-radius: var(--radius-sm); background: var(--bg-canvas);
}
.pra-day--off { color: var(--text-muted); background: transparent; }
.pra-day--on {
    background: var(--accent-primary); color: var(--text-on-accent); font-weight: 700;
}

.pra-label {
    font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted); padding: 10px 0 8px; border-top: 1px solid var(--border-subtle);
}
.pra-row {
    display: flex; align-items: center; gap: 9px; padding: 7px 0;
    border-bottom: 1px solid var(--border-subtle); font-size: 12px;
}
.pra-row:last-child { border-bottom: none; }
.pra-av {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-size: 9px; font-weight: 700;
    background: var(--wine-15); color: var(--accent-text);
}
.pra-name { color: var(--text-primary); flex: 1; }
.pra-qty { color: var(--text-muted); font-size: 11.5px; }
.pra-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-success); flex-shrink: 0; }
.pra-dot--wait { background: var(--zone-4); }

.pra-checkout { padding: 0 0 14px; overflow: hidden; }
.pra-checkout-head {
    background: var(--ink); color: var(--text-on-dark);
    font-size: 12px; font-weight: 700; padding: 13px 16px; margin-bottom: 13px;
}
.pra-line {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 12px; color: var(--text-secondary); padding: 3px 16px;
}
.pra-line span:last-child { color: var(--text-primary); }
.pra-line--muted span { color: var(--text-muted); font-size: 11.5px; }
.pra-total-wrap { border-top: 1px solid var(--border-subtle); margin: 8px 16px 0; padding-top: 9px; }
.pra-total-wrap .pra-line { padding: 0; font-weight: 700; color: var(--text-primary); font-size: 13px; }
.pra-pay {
    display: block; margin: 12px 16px 10px; text-align: center;
    background: var(--accent-primary); color: var(--text-on-accent);
    border-radius: var(--radius-sm); padding: 9px; font-size: 12px; font-weight: 700;
}
.pra-confirm {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 11.5px; color: var(--status-success); margin-bottom: 3px;
}
.pra-foot { font-size: 10.5px; color: var(--text-muted); text-align: center; }

.pra-ticket { display: flex; align-items: center; gap: 13px; padding: 15px 16px; }
.pra-qr {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--radius-sm);
    display: grid; place-items: center; font-size: 26px;
    background: var(--bg-canvas); color: var(--ink);
}
.pra-ticket-label {
    font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted);
}
.pra-ticket-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin: 2px 0 5px; }
.pra-in {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 600; color: var(--status-success);
    background: var(--status-success-bg); border-radius: var(--radius-pill); padding: 3px 8px;
}

.pra-badge {
    position: absolute; left: 10px; bottom: -26px;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ink); color: var(--text-on-dark);
    border-radius: var(--radius-pill); padding: 10px 17px;
    font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-raised);
}
.pra-badge::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--status-success);
}

/* ── Franja de datos ─────────────────────────────────── */
.pr-proof {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); margin-bottom: 40px; overflow: hidden;
}
.pr-proof-item { padding: 20px 24px; border-right: 1px solid var(--border-subtle); }
.pr-proof-item:last-child { border-right: none; }
.pr-proof-label {
    /* --text-muted da 3.64:1 sobre blanco y a 10px eso no pasa AA (pide 4.5:1).
       --text-secondary sube a 7.11:1 sin salirse de los tokens. */
    font-size: 10px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px;
}
.pr-proof-value {
    font-family: var(--font-serif); font-size: 19px; font-weight: 700;
    color: var(--text-primary); letter-spacing: -.01em;
}


/* ── Cabecera de la sección + selector de país ───────── */
.pr-section-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 26px; align-items: end; margin-bottom: 30px;
}
.pr-h2 {
    font-family: var(--font-serif); font-size: clamp(26px, 3vw, 36px);
    font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
    color: var(--text-primary); margin: 0 0 12px;
}
.pr-lead { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0; max-width: 58ch; }
.pr-lead strong { color: var(--text-primary); font-weight: 600; }

.pr-where { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.pr-where-label {
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-secondary);
}
.pr-toggle {
    display: inline-flex; background: var(--bg-card);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 4px;
}
.pr-toggle button {
    border: none; background: transparent; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 600;
    color: var(--text-secondary); padding: 9px 20px;
    border-radius: var(--radius-pill);
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}
.pr-toggle button:hover { color: var(--text-primary); }
.pr-toggle button[aria-pressed="true"] {
    background: var(--accent-primary); color: var(--text-on-accent);
}

/* Solo se muestra la región activa. El atributo lo pone el script; sin JavaScript
   quedan visibles las dos, que es la degradación correcta para buscadores. */
[data-region-active="mx"] [data-region="intl"],
[data-region-active="intl"] [data-region="mx"] { display: none; }

/* ── Escalones de volumen ────────────────────────────── */
.pr-tiers {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 18px; margin-bottom: 18px; padding-top: 13px;
}
.pr-tier {
    position: relative;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 26px 24px 22px;
    display: flex; flex-direction: column;
}

/* El escalón destacado va en tono oscuro, no solo con borde de acento: a un vistazo
   tiene que distinguirse del resto sin que el usuario compare grosores de línea. */
.pr-tier--best {
    background: var(--bg-dark); border-color: var(--bg-dark);
    box-shadow: var(--shadow-raised);
}
.pr-tier--best .pr-tier-name,
.pr-tier--best .pr-tier-num { color: var(--text-on-dark); }
.pr-tier--best .pr-tier-unit { color: var(--surface-70); }
.pr-tier--best .pr-tier-range { color: var(--surface-70); }
.pr-tier--best .pr-tier-foot { border-top-color: var(--border-on-dark); color: var(--surface-70); }
.pr-tier--best .pr-tier-foot strong { color: var(--text-on-dark); }

.pr-tier-flag {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: var(--accent-primary); color: var(--text-on-accent);
    border-radius: var(--radius-pill); padding: 6px 14px; white-space: nowrap;
}
.pr-tier-name {
    font-family: var(--font-serif); font-size: 17px; font-weight: 700;
    color: var(--text-primary); margin: 0 0 14px;
}
.pr-tier-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.pr-tier-num {
    font-family: var(--font-serif); font-size: 38px; font-weight: 800;
    line-height: 1; color: var(--text-primary); letter-spacing: -.02em;
}
.pr-tier-unit { font-size: 13.5px; color: var(--text-secondary); }
/* --text-muted da 3.90:1 aqui y el rango de boletos es la segunda linea mas
   importante de la tarjeta; --text-secondary la sube a 7.11:1. */
.pr-tier-range { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 16px; }
.pr-tier-foot {
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-subtle);
    font-size: 13px; color: var(--text-secondary);
}
.pr-tier-foot strong { color: var(--text-primary); font-weight: 600; }
.pr-tiers-foot {
    font-size: 13px; color: var(--text-secondary); text-align: center; margin: 0 0 18px;
}


/* ── Funciones incluidas ─────────────────────────────────
   Las tres de más valor (mapa de asientos, QR, cupones) llevan tarjeta con maqueta;
   el resto va en una franja compacta. Antes eran nueve palomitas del mismo tamaño y
   el mapa de asientos —lo más difícil de construir que tenemos— pesaba igual que
   "Soporte en español". */
.pr-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.pr-feat {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 22px 22px 24px;
    display: flex; flex-direction: column;
}
.prf-art {
    background: var(--bg-canvas); border-radius: var(--radius-md);
    /* Altura fija, no min-height: las tres maquetas miden distinto y con min-height
       los títulos quedaban a distinta altura en cada tarjeta. */
    padding: 18px; margin-bottom: 18px; height: 152px;
    display: grid; place-items: center;
}
.pr-feat h3 {
    font-family: var(--font-serif); font-size: 17px; font-weight: 700;
    color: var(--text-primary); margin: 0 0 7px;
}
.pr-feat p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* Mini mapa de butacas. Usa los tokens reales de asiento, así que si cambian los
   estados del mapa de verdad, esta maqueta cambia con ellos. */
.prf-seats { display: grid; gap: 9px; }
.prf-stage {
    font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-secondary); text-align: center;
    background: var(--ink-15); border-radius: var(--radius-pill); padding: 3px 0;
}
.prf-row { display: flex; gap: 5px; justify-content: center; }
.prf-seat {
    width: 15px; height: 13px; border-radius: 3px;
    background: var(--seat-available-bg); border: 1px solid var(--seat-available-border);
}
.prf-seat--taken { background: var(--seat-occupied-bg); border-color: transparent; }
.prf-seat--pick { background: var(--accent-primary); border-color: var(--accent-primary); }

/* Mini boleto con QR */
.prf-ticket {
    background: var(--ink); border-radius: var(--radius-md);
    padding: 13px 15px; width: 100%; max-width: 178px; text-align: center;
}
.prf-ticket-top {
    font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--surface-70); margin-bottom: 9px;
}
.prf-qr {
    background: var(--bg-card); border-radius: var(--radius-sm);
    color: var(--ink); font-size: 34px; line-height: 1; padding: 8px 0; margin-bottom: 9px;
}
.prf-valid {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; color: var(--status-success);
}

/* Mini cupón */
.prf-coupon { display: grid; gap: 8px; justify-items: center; width: 100%; }
.prf-code {
    font-family: var(--font-sans); font-size: 15px; font-weight: 800;
    letter-spacing: .16em; color: var(--accent-text);
    background: var(--bg-card); border: 2px dashed var(--accent-primary);
    border-radius: var(--radius-sm); padding: 9px 18px;
}
.prf-strike { font-size: 12px; color: var(--text-secondary); }
.prf-strike s { color: var(--text-muted); }
.prf-strike b { color: var(--text-primary); font-weight: 700; }

/* Franja con el resto */
.pr-more {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 22px 26px; margin-bottom: 42px;
}
.pr-more-label {
    font-size: 10px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--text-secondary); margin-bottom: 14px;
}
.pr-more ul {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px 24px;
}
.pr-more li {
    display: grid; grid-template-columns: 16px 1fr; gap: 9px;
    font-size: 14px; line-height: 1.45; color: var(--text-secondary);
}
.pr-more i { color: var(--status-success); font-size: 13px; line-height: 1.4; }


/* ── Nota de la región ───────────────────────────────────
   Antes era una caja de alerta: ícono de info, barra de acento al costado y la
   palabra "además". Ese es el vocabulario visual de una advertencia, así que el
   cargo por servicio se leía como una trampa antes de que alguien lo entendiera.
   El dato NO se esconde — la productora se entera igual en su propio checkout y
   enterarse tarde cuesta más confianza que verlo aquí — pero se presenta como lo
   que es: la razón por la que se queda con el 100% de su precio. */
.pr-note {
    display: grid; grid-template-columns: 20px 1fr; gap: 13px;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: 18px 22px; margin-bottom: 42px;
}
.pr-note i { color: var(--status-success); font-size: 15px; line-height: 1.55; }
.pr-note p { font-size: 14px; line-height: 1.65; color: var(--text-secondary); margin: 0; }
.pr-note strong { color: var(--text-primary); font-weight: 700; }
/* El ejemplo baja de jerarquía por tamaño y salto de línea, no por color:
   --text-muted daría 3.64:1 y esto es texto que hay que poder leer. */
.pr-note-ex {
    display: block; margin-top: 5px; font-size: 13px; color: var(--text-secondary);
}

/* ── Banda de alto volumen ───────────────────────────────
   Franja oscura a dos columnas: el argumento a la izquierda, los tipos de evento que
   llegan a ese volumen a la derecha. Va dentro de #prPricing y duplicada por región,
   así que los montos siguen al selector de país igual que las tarjetas. */
.pr-band {
    display: grid; grid-template-columns: 1.15fr 1fr;
    background: var(--bg-dark); border-radius: var(--radius-lg);
    overflow: hidden; margin-bottom: 42px;
}
.pr-band-main { padding: 40px 40px 38px; }
.pr-band-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent-primary); margin: 0 0 14px;
}
.pr-band h2 {
    font-family: var(--font-serif); font-size: clamp(26px, 2.9vw, 36px);
    font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
    color: var(--text-on-dark); margin: 0 0 16px;
}
.pr-band-copy {
    font-size: 15px; line-height: 1.65; color: var(--surface-70);
    margin: 0 0 28px; max-width: 50ch;
}
.pr-band-copy strong { color: var(--accent-primary); font-weight: 700; }

.pr-band-stats {
    display: grid; grid-template-columns: repeat(3, auto); gap: 28px;
    justify-content: start; margin-bottom: 30px;
}
.pr-band-num {
    font-family: var(--font-serif); font-size: 24px; font-weight: 800;
    color: var(--text-on-dark); letter-spacing: -.01em; line-height: 1.1;
}
.pr-band-cap { font-size: 12.5px; line-height: 1.45; color: var(--surface-70); margin-top: 5px; max-width: 20ch; }

.pr-band-cta {
    display: inline-block; padding: 14px 28px; border-radius: var(--radius-pill);
    background: var(--accent-primary); color: var(--text-on-accent);
    font-size: 15px; font-weight: 700; text-decoration: none;
    transition: background var(--duration-fast) var(--ease-standard);
}
.pr-band-cta:hover { background: var(--accent-primary-hover); color: var(--text-on-accent); }

.pr-band-side {
    padding: 40px 40px 38px; display: grid; gap: 13px; align-content: center;
    border-left: 1px solid var(--border-on-dark);
}
.pr-band-kind {
    background: var(--bg-dark-raised); border: 1px solid var(--border-on-dark);
    border-radius: var(--radius-md); padding: 16px 18px;
}
.pr-band-kind h3 { font-size: 15px; font-weight: 700; color: var(--text-on-dark); margin: 0 0 4px; }
.pr-band-kind p { font-size: 13px; line-height: 1.5; color: var(--surface-70); margin: 0; }


/* ── Cómo cobras ─────────────────────────────────────── */
.pr-flow { margin-bottom: 42px; }

/* La línea conectora convierte cuatro tarjetas sueltas en una secuencia. Va detrás de
   las tarjetas (z-index) y solo en desktop: apiladas en móvil la flecha apuntaría a
   ningún lado. */
.pr-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.pr-steps::before {
    content: ""; position: absolute; top: 40px; left: 10%; right: 10%;
    height: 1px; background: var(--border-strong); z-index: 0;
}
.pr-step {
    position: relative; z-index: 1;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 22px 20px;
}
.pr-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--ink); color: var(--text-on-dark);
    font-family: var(--font-serif); font-size: 14px; font-weight: 700;
    margin-bottom: 14px;
}
.pr-step h3 { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.pr-step p { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; }

/* El paso 3 es el único en el que Tixzel participa; el resto es dinero de la productora
   moviéndose entre su público y su banco. Marcarlo es el punto de toda la sección. */
.pr-step--ours { border-color: var(--accent-primary); box-shadow: var(--shadow-card); }
.pr-step--ours .pr-step-num { background: var(--accent-primary); color: var(--text-on-accent); }
.pr-step-tag {
    display: inline-block; margin-top: 11px;
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    /* El acento sobre su propio tinte da 2.93:1 y a 10px eso es ilegible. El naranja
       lo pone el fondo; el texto va en tinta. */
    background: var(--wine-15); color: var(--text-primary);
    border-radius: var(--radius-pill); padding: 4px 10px;
}


/* ── Calculadora ─────────────────────────────────────── */
.pr-calc {
    background: var(--bg-dark); border-radius: var(--radius-lg);
    padding: 34px 34px 30px; margin-bottom: 42px;
}
.pr-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.pr-slider + .pr-slider { margin-top: 22px; }
.pr-slider-top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 9px;
}
.pr-slider-label { font-size: 13.5px; color: var(--surface-70); }
.pr-slider-value {
    font-family: var(--font-serif); font-size: 19px; font-weight: 700;
    color: var(--text-on-dark);
}
.pr-slider input[type="range"] {
    width: 100%; appearance: none; -webkit-appearance: none;
    height: 5px; border-radius: var(--radius-pill);
    background: var(--border-on-dark); cursor: pointer;
}
.pr-slider input[type="range"]::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px; border-radius: 50%; border: none;
    background: var(--accent-primary); cursor: pointer;
}
.pr-slider input[type="range"]::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%; border: none;
    background: var(--accent-primary); cursor: pointer;
}
.pr-slider input[type="range"]:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 4px; }

/* Dos tarjetas gemelas, no una lista apilada. Apiladas con línea divisoria en medio,
   dos montos toman la forma de subtotal + total y se leen como una suma; lado a lado y
   con el mismo tamaño se leen como lo que son: dos opciones que compiten. */
.pr-duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.prd-card {
    background: var(--bg-dark-raised); border: 1px solid var(--border-on-dark);
    border-radius: var(--radius-md); padding: 18px 18px 17px;
    display: flex; flex-direction: column;
}
.prd-card--ours { border-color: var(--accent-primary); }
.prd-who {
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--surface-70); margin-bottom: 10px;
}
.prd-amount {
    font-family: var(--font-serif); font-size: clamp(21px, 2.1vw, 27px); font-weight: 800;
    color: var(--text-on-dark); letter-spacing: -.015em; line-height: 1.05;
}
.prd-card--ours .prd-amount { color: var(--accent-primary); }
.prd-detail { font-size: 12.5px; line-height: 1.45; color: var(--surface-70); margin-top: 8px; }
.prd-sep {
    align-self: center; font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--surface-70);
}

/* El ahorro es el remate de la sección: sube de tamaño para separarse de la nota de
   abajo y que el orden de lectura sea tarjetas → ahorro → recomendación. */
.pr-verdict {
    margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--surface-70);
}
.pr-verdict strong { color: var(--text-on-dark); font-weight: 700; }

/* Tercer nivel de la jerarquía: las tarjetas del duelo son la respuesta, el veredicto
   su consecuencia, y esto un refinamiento sobre ambos. Antes tenía fondo y borde propios,
   o sea el mismo peso visual que las tarjetas, y competía con ellas. Sin superficie y
   debajo de una línea, se lee como nota al pie sin dejar de verse. */
.pr-reco {
    margin-top: 16px; padding-top: 15px;
    border-top: 1px solid var(--border-on-dark);
    display: grid; grid-template-columns: 18px 1fr; gap: 11px;
}
.pr-reco-icon { color: var(--accent-primary); font-size: 14px; line-height: 1.5; }
.pr-reco-tag {
    display: block; font-size: 10px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--text-on-dark); margin-bottom: 5px;
}
.pr-reco-text { font-size: 13px; line-height: 1.6; color: var(--surface-70); margin: 0; }
.pr-reco-text strong { color: var(--text-on-dark); font-weight: 700; }

/* Cierre de la calculadora: el que movió los deslizadores y vio el ahorro necesita a
   dónde ir. Blanco sobre el fondo oscuro para que sea lo último que pesa en la tarjeta. */
.pr-calc-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 26px; padding: 17px 26px;
    background: var(--bg-card); color: var(--text-primary);
    border-radius: var(--radius-pill); text-decoration: none;
    font-size: 16px; font-weight: 400; text-align: center;
    transition: background var(--duration-fast) var(--ease-standard);
}
.pr-calc-cta:hover { background: var(--surface-100); color: var(--text-primary); }
.pr-calc-cta strong { font-weight: 700; }
.pr-calc-cta .pr-calc-cta-soft { color: var(--text-secondary); }
.pr-calc-cta i { font-size: 13px; color: var(--text-secondary); }

/* ── Puerta de contacto ──────────────────────────────────
   Salida para quien llegó hasta aquí y su caso no está cubierto. NO promete precios a la
   medida ni equipo de ventas: la página presume dos secciones antes que no hay que pedir
   cotización, y ofrecer lo contrario aquí tiraría ese argumento además de prometer algo
   que hoy no existe. */
.pr-door {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 42px;
}
.pr-door-main { padding: 34px 34px 32px; align-self: center; }
.pr-door h2 {
    font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 28px); font-weight: 800;
    color: var(--text-primary); margin: 0 0 12px; letter-spacing: -.015em;
}
.pr-door p { font-size: 15px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 22px; max-width: 44ch; }
.pr-door-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 24px; border-radius: var(--radius-pill);
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-strong);
    font-size: 15px; font-weight: 700; text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-standard);
}
.pr-door-btn:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.pr-door-btn i { color: var(--status-success); font-size: 17px; }

.pr-door-art {
    background: var(--bg-canvas); padding: 30px 34px;
    display: grid; gap: 10px; align-content: center;
}
.prc-bubble {
    border-radius: var(--radius-md); padding: 12px 15px;
    font-size: 13.5px; line-height: 1.5; max-width: 86%;
}
.prc-bubble--them {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    color: var(--text-primary); justify-self: start;
    border-bottom-left-radius: var(--radius-sm);
}
.prc-bubble--us {
    background: var(--ink); color: var(--text-on-dark);
    justify-self: end; border-bottom-right-radius: var(--radius-sm);
}
.prc-time {
    font-size: 10.5px; color: var(--text-secondary);
    justify-self: end; display: flex; align-items: center; gap: 5px;
}
.prc-time i { color: var(--status-success); font-size: 10px; }


/* ── Comparativa ─────────────────────────────────────── */
.pr-vs {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 26px 28px; margin-bottom: 42px;
}
.pr-vs-currency {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: var(--ink-15); color: var(--text-secondary);
    border-radius: var(--radius-pill); padding: 6px 12px; white-space: nowrap;
}
.pr-scroll { overflow-x: auto; }
.pr-table { width: 100%; border-collapse: collapse; min-width: 640px; }

/* Solo lectores de pantalla: la celda esquina no necesita texto visible, pero sin
   contenido la tabla queda sin encabezado para la columna de conceptos. */
.pr-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.pr-table thead th {
    font-family: var(--font-serif); font-size: 15px; font-weight: 700;
    color: var(--text-primary); text-align: center;
    padding: 0 14px 12px; border-bottom: 1px solid var(--border-subtle);
}
.pr-table tbody th {
    text-align: left; font-size: 13.5px; font-weight: 600; color: var(--text-secondary);
    padding: 14px 14px 14px 0; border-bottom: 1px solid var(--border-subtle);
    vertical-align: top; width: 34%;
}
.pr-table td {
    padding: 14px; font-size: 14px; color: var(--text-primary); text-align: center;
    border-bottom: 1px solid var(--border-subtle); vertical-align: top;
}
.pr-table tbody tr:last-child th,
.pr-table tbody tr:last-child td { border-bottom: none; }
.pr-col--big { font-family: var(--font-serif); font-weight: 700; font-size: 16px; }
.pr-col--note { font-size: 13px; color: var(--text-secondary); text-align: left; }

/* La columna de Tixzel se tiñe completa, de arriba abajo: en una tabla transpuesta el
   lector recorre columnas, no filas, y teñir celda por celda la rompe visualmente. */
.pr-table .pr-col--us { background: var(--wine-15); }
.pr-table thead .pr-col--us { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.pr-table tbody tr:last-child .pr-col--us { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

.pr-table-note { display: block; font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
.pr-source { font-size: 12.5px; color: var(--text-secondary); margin: 16px 0 0; }

/* ── Preguntas ───────────────────────────────────────── */
.pr-faq { margin-bottom: 42px; }
.pr-faq > h2 {
    font-family: var(--font-serif); font-size: 26px; font-weight: 800;
    color: var(--text-primary); margin: 0 0 22px; text-align: center; letter-spacing: -.01em;
}
.pr-q {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); margin-bottom: 10px;
}
.pr-q summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 17px 22px; cursor: pointer; list-style: none;
    font-size: 15px; font-weight: 600; color: var(--text-primary);
}
.pr-q summary::-webkit-details-marker { display: none; }
.pr-q summary::after {
    content: "+"; font-size: 20px; font-weight: 400;
    color: var(--accent-primary); line-height: 1; flex-shrink: 0;
}
.pr-q[open] summary::after { content: "\2013"; }
.pr-q summary:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.pr-q-body { padding: 0 22px 19px; }
.pr-q-body p { font-size: 14px; line-height: 1.65; color: var(--text-secondary); margin: 0; }

/* ── Cierre ──────────────────────────────────────────── */
.pr-cta-wrap { margin-bottom: 64px; }

@media (max-width: 1080px) {
    .pr-hero { gap: 34px; }
    .pr-art { grid-template-columns: 1fr; }
    .pra-side { grid-template-columns: 1fr 1fr; display: grid; }
    .pra-badge { position: static; margin-top: 14px; }
}
@media (max-width: 980px) {
    .pr-hero { grid-template-columns: 1fr; gap: 40px; padding-top: 44px; }
    .pr-sub { max-width: none; }
    /* En dos columnas los pasos van en dos renglones y una línea horizontal única
       conectaría el 2 con el 3 saltándose el renglón. */
    .pr-steps { grid-template-columns: repeat(2, 1fr); }
    .pr-steps::before { display: none; }
    .pr-calc-grid { grid-template-columns: 1fr; gap: 26px; }
    .pr-feats { grid-template-columns: repeat(2, 1fr); }
    .pr-band, .pr-door { grid-template-columns: 1fr; }
    .pr-band-side { border-left: none; border-top: 1px solid var(--border-on-dark); padding-top: 30px; }
    .pr-more ul { grid-template-columns: repeat(2, 1fr); }
    .pr-proof { grid-template-columns: repeat(2, 1fr); }
    .pr-proof-item:nth-child(2) { border-right: none; }
    .pr-proof-item:nth-child(-n+2) { border-bottom: 1px solid var(--border-subtle); }
}
@media (max-width: 900px) {
    .pr-section-head { grid-template-columns: 1fr; align-items: start; gap: 20px; }
    .pr-where { align-items: flex-start; }
    .pr-section-head > .pr-vs-currency { justify-self: start; }
}
@media (max-width: 760px) {
    /* Apiladas, la insignia centrada sobre el borde choca con la tarjeta de arriba;
       se ancla a la izquierda, donde hay aire. */
    .pr-tiers { grid-template-columns: 1fr; gap: 26px; }
    .pr-tier-flag { left: 22px; transform: none; }
}
@media (max-width: 560px) {
    .pr-hero { padding: 36px 0 28px; }
    /* La maqueta es decorativa: en un teléfono se encoge tanto que deja de leerse como
       producto y solo empuja el contenido real hacia abajo. */
    .pr-art { display: none; }
    .pr-btn { flex: 1; text-align: center; padding: 14px 18px; }
    .pr-steps, .pr-feats, .pr-more ul { grid-template-columns: 1fr; }
    /* Apilados, la línea conectora horizontal apuntaría a ningún lado. */
    .pr-steps::before { display: none; }
    .pr-more, .pr-vs, .pr-calc { padding: 22px 20px; }
    .pr-band-main, .pr-band-side, .pr-door-main, .pr-door-art { padding: 26px 22px; }
    /* Tres estadísticas en fila no caben en un teléfono; se apilan. */
    .pr-band-stats { grid-template-columns: 1fr; gap: 18px; }
    .pr-band-cap { max-width: none; }
    /* Apiladas vuelven a parecer una suma, así que el separador deja de ser "vs"
       horizontal y las tarjetas conservan su borde para leerse como opciones. */
    .pr-duel { grid-template-columns: 1fr; gap: 10px; }
    .prd-sep { justify-self: center; }
    .pr-toggle button { padding: 9px 15px; font-size: 13.5px; }
    .pr-proof { grid-template-columns: 1fr; }
    .pr-proof-item { border-right: none; border-bottom: 1px solid var(--border-subtle); }
    .pr-proof-item:last-child { border-bottom: none; }
}