/*
 * Calculadora de precios de la landing. Fichero COMPARTIDO entre productos:
 * idéntico byte a byte, vigilado por el test de paridad. Si cambias algo aquí,
 * cámbialo en todos los productos a la vez y actualiza la lista de hashes.
 *
 * Autocontenido: clases con prefijo pc-, tokens --pc-* en la raíz .pc y reset
 * propio, para que ni Bootstrap ni Tailwind de la landing se cuelen. La familia
 * tipográfica se hereda de la página; escala, pesos y espaciado son de aquí.
 *
 * Layout: cabecera centrada, interruptor segmentado, rejilla 3/5 + 2/5 desde
 * 1024 px con el desglose fijo; por debajo, una columna y barra inferior.
 */

/* ---------- Tokens (claro) ---------- */
.pc {
    /* Unidad propia en px: con rem, la calculadora mediría distinto en cada
       landing según el tamaño raíz de la página (14 px en Fisionexa). */
    --pc-u: 16px;
    --pc-accent: #00b8a9;

    --pc-ground: #f1f7f6;
    --pc-surface: #ffffff;
    --pc-surface-sunk: #f6faf9;
    --pc-ink: #0d2a2d;
    --pc-ink-soft: #44656a;
    --pc-ink-faint: #59777b;
    --pc-line: #d4e5e3;
    --pc-line-strong: #b4cdca;

    --pc-accent-ink: color-mix(in oklab, var(--pc-accent) 56%, #062420);
    --pc-accent-fill: color-mix(in oklab, var(--pc-accent) 64%, #052a26);
    --pc-on-accent: #ffffff;
    --pc-accent-soft: color-mix(in srgb, var(--pc-accent) 10%, transparent);
    --pc-accent-edge: color-mix(in srgb, var(--pc-accent) 25%, transparent);
    --pc-ring: color-mix(in srgb, var(--pc-accent) 30%, transparent);
    --pc-glow: color-mix(in srgb, var(--pc-accent) 22%, transparent);

    --pc-amber-bg: #fff5dd;
    --pc-amber-edge: #eac16a;
    --pc-amber-ink: #774700;
    --pc-amber-field: #d4951c;

    --pc-shadow: 0 1px 2px rgb(13 42 45 / 0.05), 0 22px 44px -22px var(--pc-glow);
    --pc-bar-shadow: 0 -12px 28px -14px rgb(13 42 45 / 0.28);

    --pc-fs-xs: calc(0.8125 * var(--pc-u));
    --pc-fs-sm: calc(0.875 * var(--pc-u));
    --pc-fs-base: calc(1 * var(--pc-u));
    --pc-fs-md: calc(1.125 * var(--pc-u));
    --pc-fs-lg: calc(1.25 * var(--pc-u));
    --pc-fs-total: calc(1.875 * var(--pc-u));
    --pc-fs-title: clamp(calc(1.875 * var(--pc-u)), calc(1.3 * var(--pc-u)) + 2.3vw, calc(2.875 * var(--pc-u)));

    --pc-radius-card: 16px;
    --pc-radius-field: 12px;
    --pc-touch: 44px;
}

/* ---------- Tokens (oscuro): las dos maneras de cambiar de tema ---------- */
[data-theme="dark"] .pc,
.dark .pc {
    --pc-ground: #0b1820;
    --pc-surface: #10232c;
    --pc-surface-sunk: #0d1d25;
    --pc-ink: #e3f1ef;
    --pc-ink-soft: #a6c1c3;
    --pc-ink-faint: #89a6a9;
    --pc-line: #213b45;
    --pc-line-strong: #315260;

    --pc-accent-ink: color-mix(in oklab, var(--pc-accent) 76%, #ffffff);
    --pc-accent-fill: color-mix(in oklab, var(--pc-accent) 86%, #ffffff);
    --pc-on-accent: #04211e;
    --pc-accent-soft: color-mix(in srgb, var(--pc-accent) 14%, transparent);
    --pc-accent-edge: color-mix(in srgb, var(--pc-accent) 30%, transparent);
    --pc-ring: color-mix(in srgb, var(--pc-accent) 34%, transparent);
    --pc-glow: color-mix(in srgb, var(--pc-accent) 16%, transparent);

    --pc-amber-bg: rgb(245 166 35 / 0.12);
    --pc-amber-edge: rgb(245 166 35 / 0.42);
    --pc-amber-ink: #f5c66c;
    --pc-amber-field: #c98a1a;

    --pc-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 22px 44px -22px var(--pc-glow);
    --pc-bar-shadow: 0 -12px 28px -14px rgb(0 0 0 / 0.6);
}

/* Navegadores sin color-mix(): tonos fijos del turquesa. */
@supports not (color: color-mix(in srgb, red, blue)) {
    .pc {
        --pc-accent-ink: #00675e;
        --pc-accent-fill: #00776d;
        --pc-accent-soft: rgb(0 184 169 / 0.1);
        --pc-accent-edge: rgb(0 184 169 / 0.25);
        --pc-ring: rgb(0 184 169 / 0.3);
        --pc-glow: rgb(0 184 169 / 0.22);
    }

    [data-theme="dark"] .pc,
    .dark .pc {
        --pc-accent-ink: #5fdcd0;
        --pc-accent-fill: #3fd2c4;
        --pc-accent-soft: rgb(0 184 169 / 0.14);
        --pc-accent-edge: rgb(0 184 169 / 0.3);
        --pc-ring: rgb(0 184 169 / 0.34);
        --pc-glow: rgb(0 184 169 / 0.16);
    }
}

/* ---------- Reset propio ---------- */
.pc,
.pc *,
.pc *::before,
.pc *::after {
    box-sizing: border-box;
}

.pc :where(h2, h3, h4, p, dl, dt, dd, fieldset, legend, table, caption, th, td, details, summary) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-transform: none;
}

.pc :where(fieldset) {
    min-width: 0;
    border: 0;
}

.pc :where(legend) {
    float: none;
    width: auto;
}

.pc :where(button, input, select) {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-transform: none;
}

.pc :where(button) {
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.pc :where(a) {
    color: inherit;
    text-decoration: none;
}

.pc :where(table) {
    border-collapse: collapse;
    caption-side: top;
}

.pc :where(th) {
    text-align: inherit;
}

.pc [hidden] {
    display: none !important;
}

/* ---------- Raíz y contenedor ---------- */
.pc {
    display: block;
    padding-block: clamp(calc(4 * var(--pc-u)), calc(3 * var(--pc-u)) + 4vw, calc(6.5 * var(--pc-u)));
    background: var(--pc-ground);
    color: var(--pc-ink);
    font-family: inherit;
    font-size: var(--pc-fs-base);
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
}

.pc-wrap {
    width: 100%;
    max-width: calc(75 * var(--pc-u));
    margin-inline: auto;
    padding-inline: calc(1 * var(--pc-u));
}

@media (min-width: 640px) {
    .pc-wrap {
        padding-inline: calc(1.5 * var(--pc-u));
    }
}

/* ---------- Cabecera ---------- */
.pc-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(1 * var(--pc-u));
    text-align: center;
}

.pc-eyebrow {
    display: inline-flex;
    padding: calc(0.375 * var(--pc-u)) calc(1 * var(--pc-u));
    border-radius: 999px;
    background: var(--pc-accent-soft);
    color: var(--pc-accent-ink);
    font-size: var(--pc-fs-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.pc-title {
    max-width: 22ch;
    color: var(--pc-ink);
    font-size: var(--pc-fs-title);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.pc-subtitle {
    max-width: calc(42 * var(--pc-u));
    color: var(--pc-ink-soft);
    font-size: var(--pc-fs-md);
    text-wrap: pretty;
}

/* ---------- Interruptor Resumido / Completo ---------- */
.pc-modes {
    display: flex;
    justify-content: center;
    margin-top: calc(2.25 * var(--pc-u));
}

.pc-modes-track {
    display: inline-flex;
    gap: calc(0.25 * var(--pc-u));
    padding: calc(0.25 * var(--pc-u));
    border: 1px solid var(--pc-line);
    border-radius: 999px;
    background: var(--pc-surface);
}

.pc-mode {
    min-height: var(--pc-touch);
    padding: calc(0.5 * var(--pc-u)) calc(1.5 * var(--pc-u));
    border-radius: 999px;
    color: var(--pc-ink-soft);
    font-size: var(--pc-fs-sm);
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pc-mode:hover {
    color: var(--pc-ink);
}

.pc-mode[aria-selected="true"] {
    background: var(--pc-accent-fill);
    color: var(--pc-on-accent);
}

/* ---------- Rejilla ---------- */
.pc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(2 * var(--pc-u));
    margin-top: calc(2.5 * var(--pc-u));
}

@media (min-width: 1024px) {
    .pc-grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: calc(2.5 * var(--pc-u));
        align-items: start;
    }

    .pc-aside {
        position: sticky;
        top: calc(6 * var(--pc-u));
    }
}

.pc-aside {
    min-width: 0;
    scroll-margin-top: calc(6 * var(--pc-u));
}

/* ---------- Tarjeta de preguntas ---------- */
.pc-card {
    min-width: 0;
    border-radius: var(--pc-radius-card);
}

.pc-questions {
    padding: calc(1.5 * var(--pc-u)) calc(1.25 * var(--pc-u));
    border: 1px solid var(--pc-line);
    background: var(--pc-surface-sunk);
}

@media (min-width: 640px) {
    .pc-questions {
        padding: calc(2 * var(--pc-u));
    }
}

.pc-panel {
    display: flex;
    flex-direction: column;
    gap: calc(1.75 * var(--pc-u));
}

.pc-field {
    display: flex;
    flex-direction: column;
    gap: calc(0.375 * var(--pc-u));
    min-width: 0;
}

.pc-label {
    display: block;
    color: var(--pc-ink);
    font-size: var(--pc-fs-base);
    font-weight: 600;
    line-height: 1.4;
}

.pc-label-sub {
    font-weight: 500;
}

.pc-hint {
    color: var(--pc-ink-soft);
    font-size: var(--pc-fs-sm);
    font-style: italic;
}

.pc-subfield {
    margin-top: calc(0.75 * var(--pc-u));
}

/* Campos */
.pc-input {
    display: block;
    width: 100%;
    max-width: calc(13.75 * var(--pc-u));
    min-height: var(--pc-touch);
    margin-top: calc(0.25 * var(--pc-u));
    padding: calc(0.625 * var(--pc-u)) calc(1 * var(--pc-u));
    border: 1px solid var(--pc-line-strong);
    border-radius: var(--pc-radius-field);
    background: var(--pc-surface);
    color: var(--pc-ink);
    font-size: var(--pc-fs-base);
    font-variant-numeric: tabular-nums;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pc-input:hover {
    border-color: var(--pc-ink-faint);
}

.pc-input:focus,
.pc-input:focus-visible {
    border-color: var(--pc-accent);
    outline: none;
    box-shadow: 0 0 0 4px var(--pc-ring);
}

.pc-select {
    position: relative;
    display: block;
    width: 100%;
    max-width: calc(16.25 * var(--pc-u));
}

.pc-select-narrow {
    max-width: calc(10 * var(--pc-u));
}

.pc-input-select {
    max-width: none;
    padding-right: calc(2.5 * var(--pc-u));
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.pc-select::after {
    content: "";
    position: absolute;
    top: calc(50% + calc(0.125 * var(--pc-u)));
    right: calc(1 * var(--pc-u));
    width: calc(0.5 * var(--pc-u));
    height: calc(0.5 * var(--pc-u));
    border-right: 2px solid var(--pc-ink-soft);
    border-bottom: 2px solid var(--pc-ink-soft);
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
}

/* Reparto en porcentajes */
.pc-split {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(0.75 * var(--pc-u));
    max-width: calc(26 * var(--pc-u));
    margin-top: calc(0.5 * var(--pc-u));
}

.pc-split-item {
    display: flex;
    flex-direction: column;
    gap: calc(0.25 * var(--pc-u));
    min-width: 0;
}

.pc-split-label {
    color: var(--pc-ink-soft);
    font-size: var(--pc-fs-sm);
}

.pc-suffix {
    position: relative;
    display: block;
}

.pc-input-percent {
    max-width: none;
    margin-top: 0;
    padding-right: calc(2 * var(--pc-u));
    padding-left: calc(0.75 * var(--pc-u));
}

.pc-suffix-mark {
    position: absolute;
    top: 50%;
    right: calc(0.75 * var(--pc-u));
    color: var(--pc-ink-faint);
    font-size: var(--pc-fs-sm);
    transform: translateY(-50%);
    pointer-events: none;
}

.pc-input[aria-invalid="true"] {
    border-color: var(--pc-amber-field);
}

.pc-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 4px var(--pc-amber-bg);
}

.pc-split-error {
    margin-top: calc(0.5 * var(--pc-u));
    color: var(--pc-amber-ink);
    font-size: var(--pc-fs-sm);
    font-weight: 500;
}

/* Casillas: toda la fila es clicable */
.pc-checks {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(0.5 * var(--pc-u));
    margin-top: calc(0.5 * var(--pc-u));
}

@media (min-width: 640px) {
    .pc-checks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pc-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(0.75 * var(--pc-u));
    min-height: var(--pc-touch);
    padding: calc(0.5 * var(--pc-u)) calc(0.875 * var(--pc-u));
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-field);
    background: var(--pc-surface);
    color: var(--pc-ink);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pc-check:hover {
    border-color: var(--pc-line-strong);
}

.pc-check:has(.pc-check-input:checked) {
    border-color: var(--pc-accent-edge);
    background: var(--pc-accent-soft);
}

.pc-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.pc-check-box {
    position: relative;
    flex: none;
    width: calc(1.25 * var(--pc-u));
    height: calc(1.25 * var(--pc-u));
    border: 1.5px solid var(--pc-line-strong);
    border-radius: 6px;
    background: var(--pc-surface);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pc-check-input:checked + .pc-check-box {
    border-color: var(--pc-accent-fill);
    background: var(--pc-accent-fill);
}

.pc-check-input:checked + .pc-check-box::after {
    content: "";
    position: absolute;
    top: calc(0.125 * var(--pc-u));
    left: calc(0.375 * var(--pc-u));
    width: calc(0.3125 * var(--pc-u));
    height: calc(0.625 * var(--pc-u));
    border-right: 2px solid var(--pc-on-accent);
    border-bottom: 2px solid var(--pc-on-accent);
    transform: rotate(45deg);
}

.pc-check-input:focus-visible + .pc-check-box {
    box-shadow: 0 0 0 4px var(--pc-ring);
}

.pc-check-text {
    min-width: 0;
    font-size: var(--pc-fs-base);
}

/* Píldoras Sí / No */
.pc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.5 * var(--pc-u));
    margin-top: calc(0.5 * var(--pc-u));
}

.pc-pill {
    min-width: calc(5 * var(--pc-u));
    min-height: var(--pc-touch);
    padding: calc(0.5 * var(--pc-u)) calc(1.25 * var(--pc-u));
    border: 1px solid var(--pc-line-strong);
    border-radius: 999px;
    background: var(--pc-surface);
    color: var(--pc-ink-soft);
    font-size: var(--pc-fs-sm);
    font-weight: 600;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.pc-pill:hover {
    border-color: var(--pc-ink-faint);
    color: var(--pc-ink);
}

.pc-pill[aria-pressed="true"] {
    border-color: var(--pc-accent);
    background: var(--pc-accent-soft);
    color: var(--pc-accent-ink);
}

/* ---------- Desglose ---------- */
.pc-summary {
    overflow: hidden;
    border: 1px solid var(--pc-accent-edge);
    background: var(--pc-surface);
    box-shadow: var(--pc-shadow);
}

.pc-summary-head {
    padding: calc(1.25 * var(--pc-u)) calc(1.5 * var(--pc-u));
    border-bottom: 1px solid var(--pc-line);
}

.pc-summary-title {
    color: var(--pc-ink);
    font-size: var(--pc-fs-md);
    font-weight: 700;
    line-height: 1.3;
}

.pc-summary-body {
    padding: calc(1.25 * var(--pc-u)) calc(1.5 * var(--pc-u)) calc(1.5 * var(--pc-u));
}

.pc-lines,
.pc-total {
    transition: opacity 0.2s ease;
}

.pc-summary.is-loading .pc-lines,
.pc-summary.is-loading .pc-total {
    opacity: 0.5;
}

.pc-lines {
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--pc-u));
}

.pc-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(1 * var(--pc-u));
}

.pc-line.is-off {
    opacity: 0.5;
}

.pc-line-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(0.125 * var(--pc-u));
    min-width: 0;
}

.pc-line-label {
    color: var(--pc-ink);
    font-size: var(--pc-fs-base);
    font-weight: 500;
}

.pc-line-meta {
    color: var(--pc-ink-faint);
    font-size: var(--pc-fs-xs);
    font-variant-numeric: tabular-nums;
}

.pc-line-meta:empty {
    display: none;
}

.pc-badge {
    display: inline-flex;
    margin-top: calc(0.25 * var(--pc-u));
    padding: calc(0.125 * var(--pc-u)) calc(0.5 * var(--pc-u));
    border: 1px solid var(--pc-amber-edge);
    border-radius: 999px;
    background: var(--pc-amber-bg);
    color: var(--pc-amber-ink);
    font-size: calc(0.75 * var(--pc-u));
    font-weight: 600;
}

.pc-line-amount {
    flex: none;
    color: var(--pc-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pc-line-base {
    padding-top: calc(1 * var(--pc-u));
    border-top: 1px dashed var(--pc-line);
}

.pc-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(0.25 * var(--pc-u)) calc(1 * var(--pc-u));
    margin-top: calc(1.25 * var(--pc-u));
    padding-top: calc(1.25 * var(--pc-u));
    border-top: 1px solid var(--pc-line);
}

.pc-total-label {
    color: var(--pc-ink);
    font-weight: 700;
}

.pc-total-amount {
    color: var(--pc-accent-ink);
    font-size: var(--pc-fs-total);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pc-approx {
    margin-top: calc(0.5 * var(--pc-u));
    color: var(--pc-ink-soft);
    font-size: var(--pc-fs-sm);
}

.pc-alert {
    margin-top: calc(0.25 * var(--pc-u));
    padding: calc(0.875 * var(--pc-u)) calc(1 * var(--pc-u));
    border: 1px solid var(--pc-amber-edge);
    border-radius: var(--pc-radius-field);
    background: var(--pc-amber-bg);
    color: var(--pc-amber-ink);
    font-size: var(--pc-fs-sm);
    font-weight: 500;
}

.pc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(3.25 * var(--pc-u));
    margin-top: calc(1.5 * var(--pc-u));
    padding: calc(0.75 * var(--pc-u)) calc(1.5 * var(--pc-u));
    border-radius: var(--pc-radius-field);
    background: var(--pc-accent-fill);
    color: var(--pc-on-accent);
    font-size: var(--pc-fs-base);
    font-weight: 700;
    text-align: center;
    box-shadow: 0 10px 24px -12px var(--pc-glow);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.pc-cta:hover {
    color: var(--pc-on-accent);
    transform: scale(1.02);
}

/* Los enlaces del componente ganan a reglas de la página como `.w-body a`
   (0,1,1), que si no les ponen el color de la tinta de la landing. */
.pc a.pc-cta,
.pc a.pc-cta:hover,
.pc a.pc-cta:focus-visible {
    color: var(--pc-on-accent);
    text-decoration: none;
}

.pc a.pc-bar-link,
.pc a.pc-bar-link:hover {
    color: var(--pc-accent-ink);
}

.pc-cta.is-disabled {
    opacity: 0.5;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.pc-cta-note {
    margin-top: calc(1 * var(--pc-u));
    color: var(--pc-ink-soft);
    font-size: var(--pc-fs-sm);
}

.pc-vat {
    margin-top: calc(1 * var(--pc-u));
    color: var(--pc-ink-soft);
    font-size: var(--pc-fs-sm);
}

/* ---------- Tabla de tramos ---------- */
.pc-tiers {
    margin-top: calc(3.5 * var(--pc-u));
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-card);
    background: var(--pc-surface);
}

.pc-tiers-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(1 * var(--pc-u));
    min-height: calc(3.5 * var(--pc-u));
    padding: calc(1.25 * var(--pc-u)) calc(1.5 * var(--pc-u));
    border-radius: var(--pc-radius-card);
    color: var(--pc-ink);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.pc-tiers-summary::-webkit-details-marker {
    display: none;
}

.pc-chevron {
    flex: none;
    width: calc(0.625 * var(--pc-u));
    height: calc(0.625 * var(--pc-u));
    border-right: 2px solid var(--pc-ink-soft);
    border-bottom: 2px solid var(--pc-ink-soft);
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.2s ease;
}

.pc-tiers[open] .pc-chevron {
    transform: translateY(25%) rotate(-135deg);
}

.pc-tiers-body {
    padding: calc(0.25 * var(--pc-u)) calc(1.5 * var(--pc-u)) calc(1.5 * var(--pc-u));
}

.pc-tiers-intro,
.pc-tiers-note {
    max-width: calc(42 * var(--pc-u));
    color: var(--pc-ink-soft);
}

.pc-tiers-note {
    font-size: var(--pc-fs-sm);
}

.pc-tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(15 * var(--pc-u))), 1fr));
    gap: calc(1.25 * var(--pc-u));
    margin-block: calc(1.5 * var(--pc-u));
}

.pc-tier-card {
    min-width: 0;
    padding: calc(1.25 * var(--pc-u));
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-field);
    background: var(--pc-surface-sunk);
}

.pc-tier-title {
    margin-bottom: calc(0.75 * var(--pc-u));
    color: var(--pc-ink);
    font-weight: 600;
}

.pc-tier-table {
    width: 100%;
    font-size: var(--pc-fs-sm);
    font-variant-numeric: tabular-nums;
}

.pc-tier-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pc-tier-table th {
    padding-bottom: calc(0.5 * var(--pc-u));
    color: var(--pc-ink-faint);
    font-weight: 500;
    text-align: left;
}

.pc-tier-table td {
    padding-block: calc(0.375 * var(--pc-u));
    border-top: 1px solid var(--pc-line);
    color: var(--pc-ink-soft);
}

.pc-tier-table th:last-child,
.pc-tier-table td:last-child {
    color: var(--pc-ink);
    font-weight: 500;
    text-align: right;
}

/* ---------- Barra inferior (móvil) ---------- */
.pc-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(1 * var(--pc-u));
    padding: calc(0.625 * var(--pc-u)) calc(1 * var(--pc-u)) calc(calc(0.625 * var(--pc-u)) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--pc-accent-edge);
    background: var(--pc-surface);
    color: var(--pc-ink);
    box-shadow: var(--pc-bar-shadow);
}

.pc-bar-total {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.pc-bar-label {
    color: var(--pc-ink-soft);
    font-size: var(--pc-fs-xs);
    font-weight: 600;
}

.pc-bar-amount {
    color: var(--pc-accent-ink);
    font-size: var(--pc-fs-lg);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: opacity 0.2s ease;
}

.pc-bar.is-loading .pc-bar-amount {
    opacity: 0.5;
}

.pc-bar-link {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: var(--pc-touch);
    padding: calc(0.5 * var(--pc-u)) calc(1.125 * var(--pc-u));
    border-radius: 999px;
    background: var(--pc-accent-soft);
    color: var(--pc-accent-ink);
    font-size: var(--pc-fs-sm);
    font-weight: 700;
}

.pc-bar-link:hover {
    color: var(--pc-accent-ink);
    background: var(--pc-accent-edge);
}

@media (max-width: 1023.98px) {
    .pc.has-bar {
        padding-bottom: calc(clamp(calc(4 * var(--pc-u)), calc(3 * var(--pc-u)) + 4vw, calc(6.5 * var(--pc-u))) + calc(4.5 * var(--pc-u)));
    }
}

@media (min-width: 1024px) {
    .pc-bar {
        display: none !important;
    }
}

/* ---------- Foco visible en todo ---------- */
.pc-mode:focus-visible,
.pc-pill:focus-visible,
.pc-cta:focus-visible,
.pc-bar-link:focus-visible,
.pc-tiers-summary:focus-visible {
    outline: 3px solid var(--pc-accent);
    outline-offset: 2px;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    .pc *,
    .pc *::before,
    .pc *::after {
        transition: none !important;
    }

    .pc-cta:hover {
        transform: none;
    }
}