/* ---------- 8. SIMULADOR (Versión Senior UI/UX) ---------- */
/* Variables propias del simulador: acotadas a .sim-bleed para no pisar los tokens globales de styles.css */
.sim-bleed {
    --bg-main: #06080b; 
    --bg-surface: #11151c;
    --border-hover: #323d4f;
    --border-strong: #5a677d; /* contorno de controles sin seleccionar (contraste >= 3:1) */
    --accent-hover: #e02456;
    --accent-glow: rgba(252, 48, 101, 0.18);
    --success: #10b981;
    --radius-sm: 10px;
    --radius-md: 16px;
    --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    /* Movimiento */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-card: 0.2s;
    --dur-step: 0.3s;
    --step-shift: 20px;
    --vp-pad: 14px;
    --cotizacion-css-version: "v8-bottom-sheet-fix";
}

:where(.sim-bleed) .section-header{
    margin-bottom: 40px;
    text-align: left;
}

:where(.sim-bleed) .section-header h2{
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

:where(.sim-bleed) .section-header h2 span{
    color: var(--accent);
}

:where(.sim-bleed) .section-header p{
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.5;
    max-width: 540px;
    margin: 0;
}

/* Layout Grid */
.simulator-layout {
    display: grid; 
    grid-template-columns: 1fr 360px;
    gap: 40px; 
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.simulator-main { min-width: 0; }

/* --- STEPPER PROFESIONAL --- */
.sim-stepper { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 32px; 
    padding-bottom: 24px; 
    border-bottom: 1px solid var(--border-color); 
}

.step-indicator { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    color: var(--text-muted); 
    transition: color var(--dur-card) ease;
}

.step-indicator .num { 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    border: 1px solid var(--border-color); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.75rem; 
    font-weight: 600; 
    font-variant-numeric: tabular-nums;
    background: var(--bg-surface);
    flex-shrink: 0;
    position: relative;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.3s ease;
}

.num-label { transition: opacity 0.2s ease, transform 0.25s var(--ease-out); }
.step-indicator .num .check-draw {
    position: absolute;
    width: 14px;
    height: 14px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.25s var(--ease-out);
}
.step-indicator.completed .num .check-draw { opacity: 1; transform: none; }
.step-indicator.completed .num .num-label { opacity: 0; transform: scale(0.6); }

.step-indicator.active, .step-indicator.active .num { transition-delay: 0.15s; }

.step-indicator.active { color: var(--text-main); }
.step-indicator.active .num { 
    border-color: var(--accent); 
    color: var(--text-main); 
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(252, 48, 101, 0.14);
}

.step-indicator.completed { color: var(--text-main); }
.step-indicator.completed .num {
    border-color: var(--accent);
    background: rgba(252, 48, 101, 0.12);
    color: var(--accent);
    box-shadow: 0 0 12px -2px rgba(252, 48, 101, 0.45);
}

.check-draw path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.step-indicator.completed .check-draw path { animation: drawCheck 0.28s var(--ease-out) 0.08s forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

.step-indicator .info { display: flex; flex-direction: column; }
.step-indicator .info strong { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700;}
.step-indicator .info span { font-size: 0.8rem; font-weight: 500; }

.stepper-line { 
    position: relative;
    flex: 1; 
    height: 2px; 
    background: var(--border-color); 
    margin: 0 16px; 
    border-radius: 2px;
    overflow: hidden;
}

.stepper-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(252, 48, 101, 0.6);
    transition: width 0.45s var(--ease-out);
}

.stepper-line.completed::after { width: 100%; }

.stepper-progress { margin-left: 28px; font-size: 0.75rem; color: var(--text-muted); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 0.2px; flex-shrink: 0; }
.stepper-progress.is-swapping { animation: progressSwap 0.3s var(--ease-out); }
@keyframes progressSwap {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

fieldset { border: 0; min-width: 0; margin: 0; padding: 0; }

.steps-viewport {
    display: grid;
    margin-inline: calc(var(--vp-pad) * -1);
    padding-inline: var(--vp-pad);
    overflow-x: clip;
}

.step-section {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(var(--step-shift));
    transition:
        opacity 0.16s ease-out,
        transform var(--dur-step) var(--ease-out),
        visibility 0s linear var(--dur-step);
}
.step-section.is-before { transform: translateX(calc(var(--step-shift) * -1)); }
.step-section.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition:
        opacity 0.26s ease-out 0.06s,
        transform var(--dur-step) var(--ease-out),
        visibility 0s;
}
.step-section:focus { outline: none; }

.step-section:not(.is-active) .option-label { opacity: 0; translate: 0 14px; }
.step-section:not(.is-active) .step-actions { opacity: 0; translate: 0 8px; }
.step-actions { transition: opacity 0.2s ease, translate 0.2s ease; }

.step-section.is-active .option-label {
    transition:
        border-color var(--dur-card) ease,
        background-color var(--dur-card) ease,
        box-shadow var(--dur-card) ease,
        transform var(--dur-card) var(--ease-out),
        opacity 0.38s ease-out calc(90ms + var(--i, 0) * 70ms),
        translate 0.45s var(--ease-out) calc(90ms + var(--i, 0) * 70ms);
}
.step-section.is-active .step-actions {
    transition: opacity 0.35s ease-out 0.34s, translate 0.4s var(--ease-out) 0.34s;
}
.steps-viewport.no-anim .option-label, .steps-viewport.no-anim .step-actions { transition: none !important; }
.steps-viewport.no-anim .step-section { transition: none !important; }

.step-title { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; width: 100%; }
.step-num { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 600; flex-shrink: 0; }
.step-text-wrapper h3 { font-size: 1.25rem; font-weight: 600; color: var(--text-main); margin: 0 0 4px 0; letter-spacing: -0.3px; }
.step-text-wrapper p { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

.options-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 16px; 
    margin-bottom: 12px;
}

.field-error {
    min-height: 20px;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 20px;
    color: var(--accent);
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity var(--dur-card) ease, transform var(--dur-card) var(--ease-out);
}
.field-error.is-visible { opacity: 1; transform: none; }
.options-grid.has-error .option-label:not(:has(input:checked)) { border-color: rgba(252, 48, 101, 0.45); }

/* --- TARJETAS --- */
.option-label {
    position: relative; 
    display: flex; 
    flex-direction: column; 
    padding: 20px; 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-sm);
    background-color: var(--bg-card); 
    cursor: pointer; 
    transform: translateY(0);
    transition:
        border-color var(--dur-card) ease,
        background-color var(--dur-card) ease,
        box-shadow var(--dur-card) ease,
        transform var(--dur-card) var(--ease-out),
        opacity 0.2s ease,
        translate 0.2s ease;
    height: 100%;
    min-height: 160px; 
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.option-label input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.option-label:has(input:disabled) input { cursor: not-allowed; }
.option-label { touch-action: manipulation; }
.simulator-layout, .steps-viewport { overflow-anchor: none; }

.option-indicator {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--border-strong);
    background-color: transparent;
    transition: border-color var(--dur-card) ease, background-color var(--dur-card) ease;
}
.option-indicator::after {
    content: "";
    position: absolute;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.18s ease, transform var(--dur-card) var(--ease-out);
}
.option-label.is-radio .option-indicator { border-radius: 50%; }
.option-label.is-radio .option-indicator::after { inset: 3px; border-radius: 50%; background: var(--accent); }
.option-label.is-checkbox .option-indicator { border-radius: 6px; }
.option-label.is-checkbox .option-indicator::after {
    inset: 0;
    background: center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}

.option-icon { 
    width: 36px; height: 36px; 
    border-radius: 8px; 
    background: var(--bg-surface); 
    border: 1px solid var(--border-color); 
    display: flex; align-items: center; justify-content: center; 
    margin-bottom: 16px; color: var(--text-muted); 
    transition: color var(--dur-card) ease, border-color var(--dur-card) ease, background-color var(--dur-card) ease;
}
.option-icon svg { width: 18px; height: 18px; }

.option-title { font-weight: 600; color: var(--text-main); font-size: 0.95rem; margin-bottom: 6px; letter-spacing: -0.2px; }
.option-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; flex-grow: 1; margin-bottom: 16px; }

@media (hover: hover) {
    .option-label:not(:has(input:disabled)):hover { transform: translateY(-2px); }
    .option-label:not(:has(input:checked, input:disabled)):hover { border-color: var(--border-hover); background-color: var(--bg-surface); }
    .option-label:not(:has(input:checked, input:disabled)):hover .option-indicator { border-color: var(--text-muted); }
}
.option-label:not(:has(input:disabled)):active { transform: translateY(0); }

.option-label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.option-label:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

.option-label::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(110% 90% at 50% 0%, rgba(252, 48, 101, 0.16), rgba(252, 48, 101, 0) 65%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.option-label:has(input:checked)::before { opacity: 1; }

.option-label:has(input:checked) {
    border-color: var(--accent);
    background-color: rgba(252, 48, 101, 0.045);
    box-shadow: 0 0 0 1px rgba(252, 48, 101, 0.35), 0 12px 32px -12px rgba(252, 48, 101, 0.6);
    animation: selectRing 0.55s ease-out;
}
@keyframes selectRing {
    0%   { box-shadow: 0 0 0 0 rgba(252, 48, 101, 0.5), 0 12px 32px -12px rgba(252, 48, 101, 0.6); }
    100% { box-shadow: 0 0 0 10px rgba(252, 48, 101, 0), 0 12px 32px -12px rgba(252, 48, 101, 0.6); }
}
.option-label:has(input:checked) .option-icon { color: var(--accent); border-color: rgba(252, 48, 101, 0.3); background-color: rgba(252, 48, 101, 0.06); }

/* Precios en oferta (precio original tachado -> USD 0) */
.promo-was { color: var(--text-muted); font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.promo-now { color: #4ade80; font-weight: 700; }
.item-price .promo-was { margin-right: 6px; }

.option-label:has(input:checked) .option-indicator { border-color: var(--accent); }
.option-label.is-checkbox:has(input:checked) .option-indicator { background-color: var(--accent); }
.option-label:has(input:checked) .option-indicator::after { opacity: 1; transform: scale(1); }

/* --- CONTROLES DE NAVEGACIÓN --- */
.step-actions { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-top: auto;
    padding-top: 24px; 
    border-top: 1px solid var(--border-color); 
}
.step-actions.right-only { justify-content: flex-end; }

:where(.sim-bleed) .btn-primary, :where(.sim-bleed) .btn-secondary, .btn-whatsapp {
    min-height: 44px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color var(--dur-card) ease,
        border-color var(--dur-card) ease,
        box-shadow var(--dur-card) ease,
        color var(--dur-card) ease,
        opacity var(--dur-card) ease,
        transform 0.15s var(--ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

:where(.sim-bleed) .btn-primary:focus-visible, :where(.sim-bleed) .btn-secondary:focus-visible, .btn-whatsapp:focus-visible, .toggle-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg-main), 0 0 0 4px var(--accent);
}

:where(.sim-bleed) .btn-primary{ background: var(--accent); color: #fff; box-shadow: 0 4px 14px var(--accent-glow); }
:where(.sim-bleed) .btn-primary:active{ transform: translateY(1px); box-shadow: 0 2px 8px var(--accent-glow); }
:where(.sim-bleed) .btn-primary:focus-visible{ box-shadow: 0 0 0 2px var(--bg-main), 0 0 0 4px var(--accent), 0 4px 14px var(--accent-glow); }

:where(.sim-bleed) .btn-secondary{ background: var(--bg-surface); color: var(--text-main); border: 1px solid var(--border-color); }
:where(.sim-bleed) .btn-secondary:active{ transform: translateY(1px); }

@media (hover: hover) {
    :where(.sim-bleed) .btn-primary:hover{ background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 8px 24px -4px rgba(252, 48, 101, 0.55); }
    :where(.sim-bleed) .btn-primary:active{ transform: translateY(1px); box-shadow: 0 2px 8px var(--accent-glow); }
    :where(.sim-bleed) .btn-secondary:hover{ background: var(--border-color); border-color: var(--border-hover); }
}

:where(.sim-bleed) .btn-primary:disabled, :where(.sim-bleed) .btn-secondary:disabled{
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- PANEL DERECHO (Resumen) --- */
.summary-panel {
    background: var(--bg-card); 
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); 
    border-radius: var(--radius-md);
    padding: 32px 28px; 
    display: flex; flex-direction: column;
    position: sticky;
    top: 32px;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.summary-panel.highlight-pulse {
    border-color: var(--accent);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 28px rgba(252, 48, 101, 0.2);
}

.toggle-bg { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 50px; padding: 4px; display: inline-flex; margin-bottom: 24px; align-self: flex-start; }
.toggle-btn { background: transparent; border: none; color: var(--text-muted); padding: 6px 16px; font-weight: 600; border-radius: 50px; cursor: pointer; font-size: 0.75rem; transition: background-color var(--dur-card) ease, color var(--dur-card) ease; }
.toggle-btn.active { background: var(--border-hover); color: var(--text-main); }
@media (hover: hover) {
    .toggle-btn:not(.active):hover { color: var(--text-main); }
}
.toggle-btn:active { background-color: var(--border-color); }

.summary-label { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; margin-bottom: 8px; }

.price-display {
    --price-h: 3rem;
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: flex-end;
    gap: 0 8px;
    height: var(--price-h);
    line-height: 1;
    letter-spacing: -1.5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.summary-panel[data-currency="ARS"] .price-display { font-size: 2.3rem; }
.price-display .currency { font-size: 1.1rem; font-weight: 600; letter-spacing: normal; color: var(--text-muted); }
.price-converted { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; font-weight: 500; margin-top: 8px; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.price-note { font-size: 0.72rem; line-height: 1.45; color: var(--text-muted); margin: 0 0 24px; }

.summary-details-inner { min-width: 0; }

/* Barra fija, fondo y encabezado del panel: solo existen en pantallas chicas */
.sheet-head, .price-bar, .sheet-backdrop { display: none; }

.price-display.is-updating, .total-amount.is-updating, .price-bar-amount.is-updating { animation: priceHalo 0.7s ease-out; }
@keyframes priceHalo {
    0%   { text-shadow: 0 0 0 rgba(252, 48, 101, 0); }
    25%  { text-shadow: 0 0 20px rgba(252, 48, 101, 0.42); }
    100% { text-shadow: 0 0 0 rgba(252, 48, 101, 0); }
}

.summary-meta { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; }
.summary-meta span { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-main); font-weight: 500; }
.summary-meta svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }

.summary-section h4 { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.summary-included-list { list-style: none; padding: 0; margin: 0 0 20px 0; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; }
.summary-included-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.8rem; color: var(--text-main); margin-bottom: 12px; line-height: 1.4; }
.summary-included-list li .check-icon { width: 16px; height: 16px; border-radius: 50%; background: rgba(16, 185, 129, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--success); margin-top: 2px;}
.summary-included-list li .check-icon svg { width: 10px; height: 10px; }

.selection-list { list-style: none; padding: 0; margin: 0; }
.sel-row {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.24s var(--ease-out), opacity 0.2s ease-out;
}
.sel-row.is-entering, .sel-row.is-leaving { grid-template-rows: 0fr; opacity: 0; }
.sel-clip { min-height: 0; overflow: hidden; }
.sel-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.8rem; padding-bottom: 10px; }
.selection-list .item-name { color: var(--text-muted); min-width: 0; }
.selection-list .item-price { color: var(--text-main); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.selection-list .item-price.is-changed { animation: itemFlash 0.6s ease-out; }
@keyframes itemFlash { from { color: var(--accent); } to { color: var(--text-main); } }

.selection-total-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px dashed var(--border-color); padding-top: 16px; margin-top: 6px; margin-bottom: 24px; }
.selection-total-row span { font-weight: 600; color: var(--text-main); font-size: 0.85rem; }
.selection-total-row .total-amount { color: var(--accent); font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.btn-whatsapp {
    width: 100%; min-height: 48px; font-size: 0.95rem; font-weight: 600; white-space: nowrap;
    background: var(--text-main); color: var(--bg-main);
}
.btn-whatsapp .cta-arrow { transition: transform 0.25s var(--ease-out); opacity: 0.7; }
.btn-whatsapp:active { transform: translateY(1px); }
@media (hover: hover) {
    .btn-whatsapp:hover { background: #e2e8f0; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(255,255,255,0.1); }
    .btn-whatsapp:hover .cta-arrow { transform: translateX(3px); opacity: 1; }
}
.btn-whatsapp[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.summary-footer { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }

.pulse-cta {
    animation: pulseCta 0.6s ease-in-out 3;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
@keyframes pulseCta {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); transform: scale(1); }
    50%  { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); transform: scale(1.03); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); transform: scale(1); }
}

.summary-assurances { list-style: none; padding: 0; margin: 16px 0 0 0; }
.summary-assurances li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.4; }
.summary-assurances li .check-icon { width: 16px; height: 16px; min-width: 16px; border-radius: 50%; background: rgba(16, 185, 129, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--success); margin-top: 2px; }
.summary-assurances li .check-icon svg { width: 10px; height: 10px; }

/* --- DESKTOP VS MOBILE HELPERS --- */
.desktop-actions { display: flex; }
.desktop-whatsapp { display: inline-flex; }
.mobile-step-actions { display: none; }
.summary-breakdown-details { display: block; }
.breakdown-summary-title { display: none; }

/* =========================================================================
   --- RESPONSIVE DESIGN (NUEVA VERSIÓN BOTTOM SHEET PARA MOBILE) --- 
   ========================================================================= */
@media (max-width: 1024px) {
    .simulator-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
        max-width: 500px;
        margin: 0 auto;
        padding-bottom: 90px;
    }

    .desktop-actions { display: none !important; }
    .desktop-whatsapp { margin-top: 20px; }
    .breakdown-summary-title { display: flex; }

    /* Stepper */
    .sim-stepper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border-color);
    }
    .step-indicator {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .step-indicator .num {
        width: 26px; height: 26px; border-radius: 50%;
        border: 1px solid var(--border-color);
        display: flex; align-items: center; justify-content: center;
        font-size: 0.72rem; font-weight: 700;
        background: var(--bg-surface); color: var(--text-muted); flex-shrink: 0;
    }
    .step-indicator.active .num {
        background: var(--accent); border-color: var(--accent);
        color: #fff; box-shadow: 0 0 10px rgba(252, 48, 101, 0.45);
    }
    .step-indicator.completed .num {
        background: rgba(252, 48, 101, 0.12); border-color: var(--accent); color: var(--accent);
    }
    .step-indicator .info { display: flex; flex-direction: column; }
    .step-indicator .info strong { font-size: 0.75rem; letter-spacing: 0.4px; font-weight: 700; color: var(--text-main); }
    .step-indicator .info span { font-size: 0.75rem; color: var(--text-muted); }
    .stepper-line { flex: 1; height: 2px; background: var(--border-color); margin: 0 4px; min-width: 8px; }
    .stepper-progress { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; margin-left: 4px; }

    /* Opciones */
    .options-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
    .option-label {
        position: relative; display: grid; grid-template-columns: 44px 1fr 24px;
        grid-template-areas: "icon title indicator" "icon desc indicator" "icon price indicator";
        align-items: center; column-gap: 14px; row-gap: 2px;
        padding: 16px 18px; min-height: auto; height: auto;
        border-radius: 14px; border: 1px solid var(--border-color);
        background-color: var(--bg-card); cursor: pointer; user-select: none;
        -webkit-tap-highlight-color: transparent;
        transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    }
    .option-label::before { display: none !important; }
    .option-label:has(input:checked) {
        border-color: var(--accent); background-color: var(--bg-card);
        box-shadow: 0 0 0 1px var(--accent); animation: none;
    }
    .option-icon {
        grid-area: icon; width: 44px; height: 44px; border-radius: 10px; margin: 0;
        align-self: center; background: var(--bg-surface); border: 1px solid var(--border-color);
        display: flex; align-items: center; justify-content: center; color: var(--text-muted);
    }
    .option-icon svg { width: 20px; height: 20px; }
    .option-title { grid-area: title; font-size: 0.95rem; font-weight: 700; color: var(--text-main); margin: 0; line-height: 1.25; }
    .option-desc { grid-area: desc; font-size: 0.78rem; color: var(--text-muted); line-height: 1.35; margin: 2px 0 6px 0; }
    .option-indicator { grid-area: indicator; position: relative; width: 20px; height: 20px; margin: 0; align-self: center; border: 1.5px solid var(--border-strong); border-radius: 50%; }
    .option-label.is-checkbox .option-indicator { border-radius: 6px; }
    .option-label:has(input:checked) .option-indicator { border-color: var(--accent); background-color: var(--accent); }
    .option-label.is-radio:has(input:checked) .option-indicator { background-color: transparent; }
    .option-label.is-radio:has(input:checked) .option-indicator::after {
        content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); opacity: 1; transform: scale(1);
    }

    /* --- NUEVO BOTTOM SHEET --- */
    
    /* 1. Fondo oscuro detrás del panel */
    .sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(3px);
        z-index: 90;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
    }
    .sheet-backdrop.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* 2. Barra flotante que abre el panel */
    .price-bar {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; width: 100%; /* Ancho estricto */
        box-sizing: border-box; /* Previene desborde */
        background: var(--bg-surface);
        border-top: 1px solid var(--border-color);
        padding: 16px 20px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        z-index: 85;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
        
        /* Oculto por defecto hasta que llegues a la sección */
        transform: translateY(150%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
    }

    /* Clase que el JS va a encender cuando estés en el simulador */
    .price-bar.is-docked {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .price-bar-info { display: flex; flex-direction: column; }
    .price-bar-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; margin-bottom: 2px;}
    .price-bar-amount { font-size: 1.25rem; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; letter-spacing: -0.5px;}
    .price-bar-btn {
        background: var(--text-main); color: var(--bg-main);
        border: none; padding: 12px 18px; border-radius: 10px;
        font-weight: 700; font-size: 0.9rem; cursor: pointer;
        display: flex; align-items: center; gap: 6px;
    }

    /* 3. El panel deslizable (Bottom Sheet) */
    .summary-panel {
        position: fixed;
        top: auto; left: 0; right: 0; bottom: 0;
        width: 100%;
        box-sizing: border-box; 
        margin: 0;
        padding: 20px 24px 24px;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
        background: var(--bg-card);
        border: none;
        border-top: 1px solid var(--border-color);
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.7);
        z-index: 100;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        max-height: 90vh;
        overflow-y: auto;
    }
    .summary-panel.is-open {
        transform: translateY(0);
    }

    /* Cabecera del panel para arrastrar/cerrar */
    .sheet-head {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 20px;
        margin-bottom: 16px;
        border-bottom: 1px solid var(--border-color);
        position: sticky;
        top: 0;
        background: var(--bg-card);
        z-index: 101;
    }
    .sheet-handle {
        width: 44px; height: 5px;
        background: var(--border-strong);
        border-radius: 10px;
    }
    .sheet-close {
        position: absolute; right: 0; top: -6px;
        background: var(--bg-surface); border: 1px solid var(--border-color);
        color: var(--text-muted); font-size: 1.2rem;
        width: 32px; height: 32px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center; cursor: pointer;
    }

    /* Limpiar la calculadora en móvil para que no se superponga o rompa el panel */
    .calc3d { display: none !important; }

    .summary-panel .toggle-bg { margin-bottom: 16px; }
    .summary-panel .summary-label { display: none; /* Oculto en móvil porque está en la barra */ }
    .summary-panel .price-display { font-size: 2.2rem; height: auto; margin-bottom: 4px; letter-spacing: -1px; }
    .summary-panel .price-converted { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; margin-bottom: 8px; }
    .summary-panel .price-note { font-size: 0.7rem; line-height: 1.4; color: var(--text-muted); margin-bottom: 16px; }
    .summary-panel .summary-meta { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border-color); }
    .summary-panel .summary-meta span { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-main); }
    .meta-tag { font-size: 0.75rem; font-weight: 700; color: var(--success); background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.25); padding: 2px 8px; border-radius: 40px; margin-left: auto; }
    .summary-section h4 { font-size: 0.72rem; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
    .summary-included-list { list-style: none; padding: 0; margin: 0 0 16px 0; border-bottom: 1px solid var(--border-color); padding-bottom: 16px; }
    .summary-included-list li { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--text-main); margin-bottom: 10px; }
    .summary-included-list li .check-icon { width: 16px; height: 16px; border-radius: 50%; background: rgba(16, 185, 129, 0.15); color: var(--success); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .summary-included-list li .check-icon svg { width: 10px; height: 10px; }

    /* Acordeón de desglose */
    .summary-breakdown-details { border: 1px solid var(--border-color); background: var(--bg-surface); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
    .breakdown-summary-title { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 0.82rem; font-weight: 600; color: var(--text-main); cursor: pointer; list-style: none; user-select: none; }
    .breakdown-summary-title::-webkit-details-marker { display: none; }
    .breakdown-summary-title .accordion-arrow { color: var(--text-muted); transition: transform 0.2s ease; }
    .summary-breakdown-details[open] .breakdown-summary-title .accordion-arrow { transform: rotate(180deg); }
    .breakdown-content { padding: 0 16px 14px; border-top: 1px solid var(--border-color); }
    .selection-list { list-style: none; padding: 10px 0 0; margin: 0; }
    .selection-total-row { margin-top: 10px; margin-bottom: 0; padding-top: 10px; }

    /* Botones de navegación al final de la tarjeta */
    .mobile-step-actions {
        display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-color);
    }
    .mob-btn-prev { flex: 1; min-height: 48px; padding: 12px 18px; font-size: 0.92rem; font-weight: 600; background: var(--bg-surface); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease; }
    .mob-btn-prev:active { transform: translateY(1px); background: var(--border-color); }
    .mob-btn-next { flex: 2; min-height: 48px; padding: 12px 20px; font-size: 0.95rem; font-weight: 700; background: linear-gradient(135deg, var(--accent) 0%, #ff2a5f 100%); color: #ffffff; border: none; border-radius: 12px; box-shadow: 0 4px 18px rgba(252, 48, 101, 0.45); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease, box-shadow 0.2s ease; }
    .mob-btn-next:active { transform: translateY(1px); }

    .sim-deco { display: block !important; position: absolute; inset: 0; pointer-events: none; }
    .key3d { display: block !important; mix-blend-mode: screen; pointer-events: none; }
    .k-plus   { width: 44px; left: 45%; top: -10px; }
    .k-pct    { width: 50px; left: -16px; top: 380px; }
    .k-eq     { width: 72px; left: -24px; top: 720px; }
    .k-pct2   { width: 42px; right: -12px; top: 320px; }
    .k-dollar { width: 50px; right: -16px; top: 600px; }

    .summary-assurances { margin-top: 16px; padding-top: 16px; }
}

@keyframes shakeSoft {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}
.shake-anim { animation: shakeSoft 0.4s ease-out; }

/* ================= DECORACIÓN 3D ================= */
/* El recorte horizontal vive en un envoltorio de ancho completo (no en la sección):
   así evita el scroll lateral sin cortar las piezas 3D ni cambiar el ancho del .container */
.sim-bleed { width: 100%; overflow-x: clip; }
#simulador { position: relative; }
#simulador .simulator-layout { position: relative; z-index: 1; }
.sim-deco { position: absolute; inset: 0; pointer-events: none; }
#simulador::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    top: 0; bottom: -200px; left: calc(50% - 50vw); right: calc(50% - 50vw);
    background:
        radial-gradient(560px 440px at 86% 260px, rgba(252, 48, 101, .13), transparent 70%),
        radial-gradient(500px 420px at 97% calc(100% - 320px), rgba(252, 48, 101, .09), transparent 70%),
        radial-gradient(440px 380px at 3% calc(100% - 360px), rgba(252, 48, 101, .08), transparent 70%);
}

/* ===== Fondo + features + barra Tridente ===== */
.sim-stage { position: relative; isolation: isolate; padding-bottom: 28px; }
.sim-footbar { display: flex; align-items: center; gap: 24px; max-width: 1200px; margin: 90px auto 0; padding-bottom: 8px; position: relative; z-index: 1; }
.sim-logo { height: 36px; width: auto; flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(252, 48, 101, .25)); }
.sim-footline { flex: 1; height: 1px; background: rgba(255, 255, 255, .14); }
.sim-tagline { margin: 0; color: #d7dbe3; font-size: .72rem; letter-spacing: 2px; white-space: nowrap; font-family: 'Inter', system-ui, sans-serif; }
.sim-tagline i { color: var(--accent); font-style: normal; margin: 0 6px; }
.sim-tagline b { color: var(--accent); font-weight: 500; }
@media (max-width: 900px) {
    .sim-footbar { padding-inline: var(--vp-pad); flex-wrap: wrap; gap: 12px; }
    .sim-footline { display: none; }
}

.calc3d { position: absolute; z-index: 5; top: -118px; right: -64px; width: 270px; pointer-events: none; }
.calc3d-float { position: relative; animation: calcFloat 7s ease-in-out infinite; }
.calc3d-float img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
/* Resplandor rosa + sombra de contacto sin filtros (mismo look, sin blur en tiempo real) */
.calc3d-float::before, .calc3d-float::after { content: ''; position: absolute; pointer-events: none; border-radius: 50%; z-index: 0; }
.calc3d-float::before { inset: -10% -12% -6% -12%; background: radial-gradient(closest-side, rgba(252, 48, 101, .34), rgba(252, 48, 101, .12) 58%, transparent 80%); }
.calc3d-float::after { left: 10%; right: 6%; bottom: -7%; height: 16%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent 78%); }
@keyframes calcFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.key3d { position: absolute; height: auto; mix-blend-mode: screen; animation: keyFloat 8s ease-in-out infinite; }
/* El JS convierte el fondo negro en transparencia real (se ve igual) y así se elimina la mezcla, que obligaba a componer toda la sección en una textura aparte por frame */
.key3d.is-alpha { mix-blend-mode: normal; }
@keyframes keyFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.k-plus   { width: 96px;  left: -40px;  top: 90px;     animation-delay: -1s; }
.k-pct    { width: 110px; left: -64px;  top: 420px;   animation-delay: -3s; }
.k-eq     { width: 190px; left: -104px; top: 690px;   animation-delay: -5s; }
.k-pct2   { width: 84px;  right: -50px; top: 300px;   animation-delay: -2s; }
.k-dollar { width: 84px;  right: -60px; top: 560px;   animation-delay: -4s; }
@media (max-width: 1280px) { .k-eq, .k-pct, .k-dollar, .k-pct2 { opacity: .6; } }


/* --- ACCESIBILIDAD: movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
    #simulador { scroll-behavior: auto; }
    #simulador .step-section,
    #simulador .step-section.is-before { transform: none !important; }
    #simulador .option-label,
    #simulador .step-actions { transform: none !important; translate: none !important; }
    #simulador .field-error { transform: none !important; }
    #simulador .check-draw path { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* =========================================================================
   AJUSTES RESPONSIVE (correcciones del bottom sheet)
   ========================================================================= */
@media (min-width: 1025px) and (max-width: 1360px) {
    /* Con poco margen lateral la calculadora no debe salirse de la pantalla */
    .calc3d { right: -12px; width: 240px; }
}

@media (max-width: 1024px) {
    /* La columna se estiraba al ancho del stepper (heredaba align-items: start de la grilla) */
    .simulator-layout { align-items: stretch; }
    .sim-stepper { min-width: 0; }

    /* Sin contexto de apilamiento propio: la barra y el panel quedan por encima de todo el sitio */
    #simulador .simulator-layout { z-index: auto; }

    /* Panel: el encabezado pegajoso respeta el borde superior (el padding del panel dejaba
       ver el contenido por encima) y, cerrado, no recibe foco con Tab */
    .summary-panel {
        padding-top: 0;
        visibility: hidden;
        overscroll-behavior: contain;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
    }
    .summary-panel.is-open {
        visibility: visible;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
    }
    .summary-panel:focus { outline: none; }
    .summary-panel > * { flex-shrink: 0; }
    .sheet-head { padding-top: 22px; }
    .sheet-head { touch-action: none; }
    .sheet-close {
        top: 4px; right: 0; width: 40px; height: 40px; padding: 0;
        font-size: 0; /* se dibuja con ::before/::after para que quede perfectamente centrada */
        background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-muted);
    }
    .sheet-close::before, .sheet-close::after {
        content: ""; position: absolute; left: 50%; top: 50%;
        width: 14px; height: 2px; border-radius: 2px; background: currentColor;
    }
    .sheet-close::before { transform: translate(-50%, -50%) rotate(45deg); }
    .sheet-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
    .sheet-close:active { background: var(--border-color); color: var(--text-main); }

    /* Botones del paso: "Finalizar configuración" en una sola línea */
    .mob-btn-prev { flex: 0 0 auto; padding-inline: 20px; }
    .mob-btn-next { flex: 1; white-space: nowrap; padding-inline: 14px; }
    .price-bar-btn { white-space: nowrap; flex-shrink: 0; }

    /* Piezas 3D: más sutiles para que no compitan con las tarjetas */
    .key3d { opacity: 0.5; }
}

@media (max-width: 600px) {
    /* Stepper: solo números + "Paso X de 3" (los textos no entran en 360px) */
    .step-indicator .info { display: none; }
    .step-indicator { gap: 0; }
    .stepper-line { margin: 0 8px; }
    .stepper-progress { margin-left: 8px; }
}

/* ================= VIDA: parallax y tilt ================= */
.sim-bgwrap { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.sim-deco { --mx: 0; --my: 0; --amp: 1; }
@media (hover: none), (pointer: coarse) { .sim-deco { --amp: .6; } }

/* Teclas 3D: ya no siguen al cursor; solo flotan con keyDrift */
.key3d {
    will-change: translate, rotate;
    animation: keyDrift var(--fd, 8s) ease-in-out var(--fdelay, 0s) infinite;
}
/* Cada tecla con su propia duración, delay, amplitud y giro: se sienten independientes */
.k-eq     { --d: 1.6;  --fd: 9.7s;  --fdelay: -5.2s; --fy: -14px; --fx: 5px;  --fr: 3deg; }
.k-pct    { --d: 1.1;  --fd: 7.3s;  --fdelay: -2.1s; --fy: -11px; --fx: -4px; --fr: 5deg; }
.k-plus   { --d: .9;   --fd: 8.6s;  --fdelay: -6.4s; --fy: -9px;  --fx: 3px;  --fr: 6deg; }
.k-dollar { --d: .75;  --fd: 6.4s;  --fdelay: -3.3s; --fy: -12px; --fx: -3px; --fr: 4deg; }
.k-pct2   { --d: .7;   --fd: 10.4s; --fdelay: -8.1s; --fy: -8px;  --fx: 4px;  --fr: 7deg; }

/* translate / rotate son propiedades independientes: no pisan al transform del parallax */
@keyframes keyDrift {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    30% { translate: var(--fx, 3px) calc(var(--fy, -12px) * .7); rotate: calc(var(--fr, 3deg) * .6); }
    65% { translate: calc(var(--fx, 3px) * -1) var(--fy, -12px); rotate: calc(var(--fr, 3deg) * -1); }
}



/* =========================================================================
   v10 · FONDO VECTORIAL (nítido en cualquier pantalla) + VISTA PREVIA VIVA
   ========================================================================= */
/* =========================================================================
   ===== VISTA ORIENTATIVA v2 (ventana de navegador + 3 sitios distintos) =====
   El sitio de ejemplo se dibuja a 1000px de ancho y se escala al ancho disponible
   (--pv-scale la calcula el JS). Scroll automático sobre el sitio completo.
   ========================================================================= */
@media (min-width: 1025px) {
    .sim-preview {
        --ui: #fc3065; --glow: rgba(252, 48, 101, .35); --pv-scale: .8;
        position: relative; display: block; margin-top: 32px; overflow-anchor: none; contain: layout;
    }
    .sim-preview[data-type="institucional"] { --ui: #2f8cff; --glow: rgba(47, 140, 255, .38); }
    .sim-preview[data-type="tienda"]        { --ui: #ff6a1a; --glow: rgba(255, 106, 26, .38); }
    .sim-preview [hidden] { display: none !important; }

    /* ---------- Marco de la vista: bisel oscuro fino ---------- */
    .pv-chips { display: flex; gap: 6px; }
    .pv-chip { font-size: 12px; font-weight: 700; color: var(--ui); border: 1px solid color-mix(in srgb, var(--ui) 55%, transparent); border-radius: 999px; padding: 3px 10px; background: color-mix(in srgb, var(--ui) 10%, transparent); animation: pvPop .35s cubic-bezier(.22, 1, .36, 1); white-space: nowrap; }

    .pv-viewport { position: relative; height: 380px; overflow: hidden; background: #05070b; border: 7px solid #0b0d12; border-radius: 22px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 34px 70px -34px rgba(0, 0, 0, .95); }
    .pv-viewport.is-swap { animation: pvSwap .4s cubic-bezier(.22, 1, .36, 1); }
    .pv-scroller { will-change: transform; transform: translate3d(0, 0, 0); }
    /* barra de scroll: zona de clic ancha, pista y pulgar finos */
    .pv-sbar { position: absolute; z-index: 7; top: 6px; bottom: 6px; right: 2px; width: 14px; cursor: pointer; touch-action: none; }
    .pv-sbar::before { content: ''; position: absolute; left: 5px; right: 5px; top: 0; bottom: 0; border-radius: 6px; background: rgba(128, 128, 128, .2); transition: left .15s, right .15s; }
    .pv-sbar i { position: absolute; left: 5px; right: 5px; top: 0; height: var(--pv-thumb-h, 40px); border-radius: 6px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); cursor: grab; transition: left .15s, right .15s, background .15s; }
    .pv-sbar:hover::before, .pv-sbar.is-drag::before { left: 3px; right: 3px; }
    .pv-sbar:hover i, .pv-sbar.is-drag i { left: 3px; right: 3px; background: rgba(255, 255, 255, .85); }
    .pv-sbar.is-drag i { cursor: grabbing; }

    .pv-foot { display: flex; align-items: center; gap: 12px; padding: 16px 8px 0; font-size: 12.5px; color: #8b95a5; }
    .pv-caption { margin: 0; display: flex; align-items: center; gap: 9px; font-weight: 500; letter-spacing: .01em; }
    .pv-caption::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #4a5262; }
    .pv-chips { margin-left: auto; }
    .pv-count-info { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #8791a3; font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
    .pv-chips:empty + .pv-count-info { margin-left: auto; }

    /* ---------- Base del sitio de ejemplo ---------- */
    .pv-site { width: 1000px; transform: scale(var(--pv-scale, .8)); transform-origin: 0 0; font: 400 14px/1.45 'Inter', system-ui, -apple-system, sans-serif; color: #fff; text-align: left; }
    .pv-site *, .pv-site *::before, .pv-site *::after { box-sizing: border-box; }
    .pv-site :where(p, b, small, strong, em, i, s, ul, q) { margin: 0; }
    .pv-site :where(em, i) { font-style: normal; }
    .pv-site :where(b, strong) { font-weight: 700; }
    .pv-site svg { display: block; }
    .pv-site [data-c="0"] { opacity: .62; }
    .pv-site section { position: relative; }

    .pv-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; letter-spacing: .06em; }
    .pv-brand i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--a), var(--a2, var(--a))); color: #fff; font-weight: 900; font-size: 15px; letter-spacing: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
    .pv-pill { display: inline-block; padding: 10px 22px; border-radius: 999px; background: var(--a); color: #fff; font-weight: 700; font-size: 13px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px -10px var(--a); }
    .pv-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .pv-h1 { margin: 20px 0 16px; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -.03em; }
    .pv-h1 span { display: block; }
    .pv-site [data-c="1"]:not([hidden]) { animation: pvCopyIn .55s cubic-bezier(.22, 1, .36, 1) both; }
    .pv-lead [data-c="1"]:not([hidden]) { animation-delay: .08s; }
    @keyframes pvCopyIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .pv-grad { background: linear-gradient(100deg, color-mix(in srgb, var(--a) 72%, #fff), var(--a2, var(--a))); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .pv-lead { max-width: 540px; margin: 0 auto 26px; font-size: 17px; line-height: 1.55; color: var(--gt, rgba(255, 255, 255, .7)); }
    .pv-lead span { display: block; }
    .pv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 12px; background: #fff; color: #0b0410; font-weight: 800; font-size: 14px; box-shadow: 0 10px 24px -12px rgba(255, 255, 255, .5); }
    .pv-btn.ghost { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
    .pv-cta-row { display: flex; gap: 12px; }
    .pv-avs { display: flex; }
    .pv-avs i { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; border: 2px solid #0d0b16; background: linear-gradient(135deg, var(--a2, var(--a)), var(--a)); font-size: 11px; font-weight: 800; color: #fff; }
    .pv-avs i:first-child { margin-left: 0; }
    .pv-stars { color: #fbbf24; letter-spacing: 2px; }
    .pv-spk { width: 100%; height: 26px; margin-top: 8px; stroke: var(--a); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
    .pv-spk path { vector-effect: non-scaling-stroke; }
    :where(.pv-site) svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .pv-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px; background: linear-gradient(135deg, var(--a), var(--a2, var(--a))); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
    .pv-ic svg { width: 22px; height: 22px; }
    .pv-card { padding: 24px; border-radius: 18px; }
    .pv-card b { display: block; margin-bottom: 6px; font-size: 17px; }
    .pv-card p { font-size: 13px; line-height: 1.5; color: var(--gt); }
    .pv-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .pv-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
    .pv-eyebrow { display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--a); }
    .pv-st { margin-top: 8px; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; }
    .pv-sh { margin-bottom: 30px; text-align: center; }
    .pv-sh-l { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 26px; }
    .pv-sh-l .pv-st { font-size: 28px; max-width: 460px; }
    .pv-sh-l p { max-width: 280px; font-size: 13px; color: var(--gt); }
    .pv-sfoot { display: flex; justify-content: space-between; padding: 22px 52px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12px; color: rgba(255, 255, 255, .5); }

    /* ---------- Vidrio (landing + corporativa) ----------
       Una sola receta: degradé translúcido + borde + luz superior. El desenfoque real (backdrop-filter)
       se usa solo en los pocos elementos que flotan sobre contenido; en el resto no se nota y cuesta. */
    .pv-landing, .pv-corp { --gt: rgba(255, 255, 255, .66); --gb: rgba(255, 255, 255, .12);
        --gl: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
        --gs: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 44px -30px rgba(0, 0, 0, .8); }
    :is(.pv-card, .pv-step, .pv-plan, .pv-faq > div, .pv-tcard, .pv-ui, .pv-band, .pv-proj, .pv-tm, .pv-pst, .pv-bot, .pv-news, .pv-form span, .pv-lnav, .pv-ph-row) { background: var(--gl); border: 1px solid var(--gb); box-shadow: var(--gs); }
    .pv-glass, .pv-cc { backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 24px 44px -20px rgba(0, 0, 0, .75); color: #fff; }
    .pv-glass small, .pv-cc small { color: rgba(255, 255, 255, .72); }
    .pv-checks { display: grid; gap: 11px; margin-top: 18px; padding: 0; list-style: none; font-size: 14px; }
    .pv-checks li { display: flex; align-items: center; gap: 10px; }
    .pv-checks li::before { content: '✓'; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--a) 24%, transparent); color: color-mix(in srgb, var(--a) 55%, #fff); font-size: 11px; font-weight: 800; }
    .pv-logos { padding: 34px 48px 36px; text-align: center; }
    .pv-logos small { font-size: 11px; letter-spacing: .18em; color: rgba(255, 255, 255, .42); }
    .pv-logos div { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding: 0 20px; }
    .pv-logos b { font-size: 17px; letter-spacing: .2em; color: rgba(255, 255, 255, .34); }
    .pv-band { display: grid; grid-template-columns: repeat(4, 1fr); margin: 26px 48px; padding: 30px 12px; border-radius: 22px; text-align: center; }
    .pv-band div + div { border-left: 1px solid rgba(255, 255, 255, .1); }
    .pv-band strong { display: block; font-size: 34px; letter-spacing: -.02em; }
    .pv-band small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gt); }
    .pv-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding: 52px 52px; }
    .pv-split.rev { grid-template-columns: 1fr 1.05fr; }
    .pv-split .pv-lead { max-width: none; margin: 12px 0 0; font-size: 15px; }
    .pv-ui { padding: 22px; border-radius: 22px; }
    .pv-ui-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .pv-ui-h b { font-size: 14px; }
    .pv-ui-h em { padding: 3px 10px; border-radius: 999px; background: rgba(61, 220, 151, .14); color: #3ddc97; font-size: 11px; font-weight: 700; }
    .pv-bars { display: flex; align-items: stretch; gap: 10px; height: 130px; }
    .pv-bars span { flex: 1; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 6px; }
    .pv-bars i { align-self: end; width: 100%; height: var(--h); border-radius: 8px; background: linear-gradient(180deg, var(--a), color-mix(in srgb, var(--a2) 55%, transparent)); }
    .pv-bars small { font-size: 11px; color: var(--gt); }
    .pv-ui-f { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
    .pv-ui-f small { display: block; font-size: 11px; color: var(--gt); }
    .pv-ui-f b { font-size: 15px; }
    .pv-lb { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
    .pv-lb i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--a2), var(--a)); font-size: 11px; font-weight: 800; }
    .pv-lb span { flex: 1; }
    .pv-lb b { display: block; margin-bottom: 6px; font-size: 13px; }
    .pv-lb u { display: block; height: 6px; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, .1); text-decoration: none; }
    .pv-lb s { display: block; width: var(--w); height: 100%; background: linear-gradient(90deg, var(--a), var(--a2)); text-decoration: none; }
    .pv-lb em { width: 38px; font-size: 12px; font-weight: 700; text-align: right; }

    /* =============== LANDING =============== */
    .pv-landing { --a: #fc3065; --a2: #8b5cf6;
        background: radial-gradient(640px 420px at 16% -60px, rgba(252, 48, 101, .26), transparent 70%), radial-gradient(560px 460px at 94% 140px, rgba(139, 92, 246, .22), transparent 70%), radial-gradient(760px 520px at 50% 64%, rgba(139, 92, 246, .09), transparent 70%), #08080e; }
    .pv-lnav { display: flex; align-items: center; justify-content: space-between; margin: 0 40px; padding: 11px 12px 11px 22px; border-radius: 999px; }
    .pv-landing { padding-top: 20px; } /* antes era margin en la barra: se escapaba y dejaba una franja oscura arriba */
    .pv-lnav nav { display: flex; gap: 30px; font-size: 13px; color: var(--gt); }
    .pv-lhero { padding: 56px 150px 0; overflow: hidden; text-align: center; }
    .pv-lhero .pv-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--a); box-shadow: 0 0 10px var(--a); }
    .pv-lhero .pv-cta-row { justify-content: center; }
    .pv-proof { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 26px; font-size: 12px; line-height: 1.5; color: var(--gt); text-align: left; }
    .pv-lstage { position: relative; height: 330px; margin: 46px -100px 0; }
    .pv-phone { position: absolute; left: 50%; top: 0; width: 272px; height: 100%; margin-left: -136px; padding: 18px 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-bottom: 0; border-radius: 36px 36px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)), #0f0d19; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 -40px 90px -40px var(--a); text-align: left; }
    .pv-phone::after { content: ''; position: absolute; inset: auto 0 0; height: 90px; background: linear-gradient(transparent, #0b0a13); }
    .pv-ph-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .pv-ph-top small { display: block; font-size: 11px; color: var(--gt); }
    .pv-ph-top b { font-size: 14px; }
    .pv-ph-top i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--a2), var(--a)); font-size: 11px; font-weight: 800; }
    .pv-ph-ring { display: grid; place-items: center; margin-bottom: 12px; }
    .pv-ring { position: relative; display: grid; place-content: center; width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(var(--a) 0 72%, rgba(255, 255, 255, .1) 0); text-align: center; }
    .pv-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #13101f; }
    .pv-ring > * { position: relative; }
    .pv-ring strong { display: block; font-size: 24px; line-height: 1; }
    .pv-ring small { font-size: 11px; color: var(--gt); }
    .pv-ph-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 10px; border-radius: 14px; box-shadow: none; }
    .pv-ph-row i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--a), var(--a2)); color: #fff; }
    .pv-ph-row i svg { width: 15px; height: 15px; }
    .pv-ph-row span { flex: 1; }
    .pv-ph-row b { display: block; font-size: 12px; }
    .pv-ph-row small { font-size: 11px; color: var(--gt); }
    .pv-ph-row em { font-size: 11px; font-weight: 700; color: var(--a); }
    .pv-glass { position: absolute; padding: 14px 16px; border-radius: 16px; }
    .pv-glass small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
    .pv-glass strong { display: block; font-size: 26px; }
    .pv-glass b { display: block; margin: 4px 0; font-size: 12px; line-height: 1.3; }
    .pv-fl1 { left: 56px; top: 70px; width: 150px; transform: rotate(-3deg); }
    .pv-fl2 { right: 56px; top: 24px; width: 170px; transform: rotate(3deg); text-align: left; }
    .pv-fl3 { right: 70px; top: 190px; display: flex; align-items: center; gap: 10px; }
    .pv-fl3 i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--a); }
    .pv-fl3 i svg { width: 15px; height: 15px; }
    .pv-fl3 b { margin: 0; }
    .pv-fl3 small { text-transform: none; letter-spacing: 0; }
    .pv-lben { padding: 52px 52px 14px; }
    .pv-lsteps, .pv-ltest, .pv-lprice, .pv-lfaq { padding: 40px 52px 14px; }
    .pv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .pv-step { padding: 26px 22px; border-radius: 20px; text-align: center; }
    .pv-step span { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--a2)); font-weight: 800; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 20px -10px var(--a); }
    .pv-step b { display: block; margin-bottom: 4px; font-size: 16px; }
    .pv-step p { font-size: 13px; color: var(--gt); }
    .pv-tcard { padding: 24px; border-radius: 20px; }
    .pv-tcard p { margin: 12px 0 18px; font-size: 14px; line-height: 1.55; }
    .pv-quote-by { display: flex; align-items: center; gap: 12px; font-size: 13px; }
    .pv-quote-by i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--a2), var(--a)); font-size: 12px; font-weight: 800; }
    .pv-quote-by small { color: var(--gt); }
    .pv-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .pv-plan { padding: 26px; border-radius: 22px; }
    .pv-plan.is-hot { background: linear-gradient(180deg, color-mix(in srgb, var(--a) 26%, transparent), rgba(255, 255, 255, .03)); border-color: color-mix(in srgb, var(--a) 70%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 30px 60px -32px var(--a); }
    .pv-plan small { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--gt); }
    .pv-plan.is-hot small { color: color-mix(in srgb, var(--a) 50%, #fff); }
    .pv-plan strong { display: block; margin: 10px 0 14px; font-size: 34px; letter-spacing: -.02em; }
    .pv-plan ul { display: grid; gap: 8px; margin-bottom: 20px; padding: 0; list-style: none; font-size: 13px; color: rgba(255, 255, 255, .78); }
    .pv-plan li::before { content: '✓  '; color: var(--a); font-weight: 800; }
    .pv-plan .pv-btn { width: 100%; justify-content: center; padding: 11px; }
    .pv-lfaq { padding-inline: 150px; }
    .pv-faq { display: grid; gap: 10px; }
    .pv-faq > div { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 16px 20px; border-radius: 14px; }
    .pv-faq b { font-weight: 600; }
    .pv-faq p { grid-column: 1 / -1; padding-bottom: 4px; font-size: 13px; line-height: 1.5; color: var(--gt); }
    .pv-faq span { color: var(--a); font-size: 20px; line-height: 1; }
    .pv-lcta { position: relative; overflow: hidden; margin: 44px 52px 40px; padding: 52px 46px; border-radius: 28px; text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--a) 88%, #000), color-mix(in srgb, var(--a2) 88%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 40px 70px -40px var(--a); }
    .pv-lcta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px 220px at 20% 0, rgba(255, 255, 255, .22), transparent 70%); }
    .pv-lcta > * { position: relative; }
    .pv-lcta .pv-st { margin: 0 0 8px; }
    .pv-lcta p { margin-bottom: 22px; opacity: .92; }

    /* =============== CORPORATIVA =============== */
    .pv-corp { --a: #2f8cff; --a2: #22d3ee;
        background: radial-gradient(640px 440px at 100% -40px, rgba(47, 140, 255, .28), transparent 70%), radial-gradient(560px 460px at 0 52%, rgba(34, 211, 238, .09), transparent 70%), radial-gradient(600px 420px at 100% 88%, rgba(47, 140, 255, .12), transparent 70%), #050b1a; }
    .pv-corp .pv-avs i { border-color: #0e2f78; }
    .pv-ctop { display: flex; justify-content: space-between; padding: 9px 48px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 11px; color: var(--gt); }
    .pv-ctop span { display: inline-flex; align-items: center; gap: 8px; }
    .pv-ctop svg { width: 12px; height: 12px; stroke-width: 2; }
    .pv-cnav { display: flex; align-items: center; justify-content: space-between; padding: 18px 48px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
    .pv-cnav nav { display: flex; gap: 28px; font-size: 13px; color: var(--gt); }
    .pv-cnav nav span:first-child { padding-bottom: 6px; color: #fff; box-shadow: 0 2px 0 var(--a); }
    .pv-corp .pv-pill, .pv-corp .pv-btn { border-radius: 10px; }
    .pv-corp .pv-badge { border-radius: 8px; border-color: rgba(47, 140, 255, .45); background: rgba(47, 140, 255, .12); color: #a8d0ff; }
    .pv-chero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; padding: 48px 48px 40px; }
    .pv-chero .pv-h1 { font-size: 44px; }
    .pv-chero .pv-lead { max-width: none; margin: 0 0 24px; font-size: 15px; }
    .pv-cstats { display: flex; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
    .pv-cstats div { flex: 1; padding-right: 16px; }
    .pv-cstats div + div { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .1); }
    .pv-cstats strong { display: block; font-size: 26px; }
    .pv-cstats small { font-size: 11px; color: var(--gt); }
    .pv-cvis { position: relative; height: 340px; overflow: hidden; border-radius: 24px; background: linear-gradient(145deg, #0e2f78, #1d6fe0 55%, #22d3ee); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 40px 70px -40px rgba(47, 140, 255, .9); }
    .pv-cvis::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(circle at 70% 60%, #000, transparent 75%); mask-image: radial-gradient(circle at 70% 60%, #000, transparent 75%); }
    .pv-mark { position: absolute; right: -10px; bottom: -50px; font-size: 260px; font-weight: 900; line-height: 1; color: rgba(255, 255, 255, .12); }
    .pv-cc { position: absolute; padding: 14px 16px; border-radius: 16px; }
    .pv-cc b { display: block; font-size: 13px; }
    .pv-cc small { display: block; font-size: 11px; }
    .pv-cc1 { left: 22px; top: 26px; }
    .pv-cc2 { right: 22px; top: 120px; display: flex; align-items: center; gap: 10px; }
    .pv-tick { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 12px; font-weight: 800; }
    .pv-cc3 { left: 40px; bottom: 28px; width: 170px; }
    .pv-cc3 strong { display: block; font-size: 24px; }
    .pv-cc3 .pv-spk { stroke: #fff; }
    .pv-csvc, .pv-cproj, .pv-cteam, .pv-cproc, .pv-cprods, .pv-cnews { padding: 38px 48px 16px; }
    .pv-corp .pv-card { padding: 22px; border-radius: 16px; }
    .pv-corp .pv-ic { border: 1px solid rgba(47, 140, 255, .3); border-radius: 10px; background: rgba(47, 140, 255, .16); color: #8cc4ff; box-shadow: none; }
    .pv-more { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--a); }
    .pv-csvc .pv-grid3 { gap: 16px; }
    .pv-cabout { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; padding: 52px 48px 28px; }
    .pv-cabout .pv-lead { margin: 12px 0 0; font-size: 14px; }
    .pv-cab-vis { position: relative; height: 270px; }
    .pv-cab-vis i { position: absolute; display: grid; place-content: center; border-radius: 20px; text-align: center; box-shadow: var(--gs); }
    .pv-cab-vis strong { display: block; font-size: 34px; }
    .pv-cab-vis small { font-size: 12px; opacity: .8; }
    .pv-cab-vis .a { left: 0; top: 0; width: 56%; height: 58%; background: linear-gradient(135deg, #1d6fe0, #22d3ee); }
    .pv-cab-vis .b { right: 0; top: 18%; width: 40%; height: 46%; background: var(--gl); border: 1px solid var(--gb); }
    .pv-cab-vis .c { left: 14%; bottom: 0; width: 46%; height: 34%; background: rgba(47, 140, 255, .18); border: 1px solid rgba(47, 140, 255, .35); }
    .pv-cab-vis .c svg { width: 36px; height: 36px; margin: auto; color: #8cc4ff; stroke-width: 1.6; }
    .pv-proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .pv-pst { padding: 22px; border-radius: 18px; }
    .pv-pst span { display: block; margin-bottom: 14px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--a); opacity: .85; }
    .pv-pst b { display: block; margin-bottom: 4px; font-size: 15px; }
    .pv-pst p { font-size: 12px; line-height: 1.5; color: var(--gt); }
    .pv-bot { padding: 14px; border-radius: 18px; }
    .pv-bot-img { display: grid; place-items: center; aspect-ratio: 1 / .85; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
    .pv-bot-img svg { width: 42%; height: 42%; color: rgba(255, 255, 255, .95); stroke-width: 1.3; }
    .pv-bot-img.b1 { background: linear-gradient(145deg, #1d6fe0, #22d3ee); }
    .pv-bot-img.b2 { background: linear-gradient(145deg, #0ea5a4, #1d6fe0); }
    .pv-bot-img.b3 { background: linear-gradient(145deg, #f59e0b, #ea580c); }
    .pv-bot-img.b4 { background: linear-gradient(145deg, #34d399, #0f8a5f); }
    .pv-bot b { display: block; margin-top: 12px; font-size: 14px; }
    .pv-bot small { display: block; font-size: 12px; color: var(--gt); }
    .pv-bot em { display: block; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--a); }
    .pv-proj { overflow: hidden; border-radius: 18px; }
    .pv-proj-art { height: 130px; }
    .pv-proj-art.a1 { background: linear-gradient(135deg, #1d6fe0, #22d3ee); }
    .pv-proj-art.a2 { background: linear-gradient(135deg, #5b3df0, #2f8cff); }
    .pv-proj-art.a3 { background: linear-gradient(135deg, #0ea5a4, #1d6fe0); }
    .pv-proj-b { padding: 16px 18px; }
    .pv-proj-b b { display: block; }
    .pv-proj-b small { color: var(--gt); }
    .pv-team4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .pv-tm { padding: 22px 12px; border-radius: 18px; text-align: center; }
    .pv-tm i { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; font-weight: 800; background: linear-gradient(135deg, #1d6fe0, #22d3ee); }
    .pv-tm i.t2 { background: linear-gradient(135deg, #5b3df0, #2f8cff); }
    .pv-tm i.t3 { background: linear-gradient(135deg, #0ea5a4, #22d3ee); }
    .pv-tm i.t4 { background: linear-gradient(135deg, #2f8cff, #7c3aed); }
    .pv-tm b { display: block; }
    .pv-tm small { color: var(--gt); }
    .pv-news { overflow: hidden; padding-bottom: 18px; border-radius: 18px; }
    .pv-news-art { height: 118px; margin-bottom: 14px; }
    .pv-news-art.n1 { background: linear-gradient(135deg, #1d6fe0, #22d3ee); }
    .pv-news-art.n2 { background: linear-gradient(135deg, #0f8a5f, #34d399); }
    .pv-news-art.n3 { background: linear-gradient(135deg, #5b3df0, #2f8cff); }
    .pv-news small, .pv-news b, .pv-news em { display: block; padding-inline: 18px; }
    .pv-news small { font-size: 11px; color: var(--gt); }
    .pv-news b { margin: 4px 0 10px; font-size: 15px; line-height: 1.3; }
    .pv-news em { font-size: 12px; font-weight: 700; color: var(--a); }
    .pv-ccontact { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin: 44px 48px 40px; padding: 38px; border-radius: 26px; background: linear-gradient(135deg, rgba(47, 140, 255, .22), rgba(34, 211, 238, .05)); border: 1px solid rgba(47, 140, 255, .32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 40px 70px -44px var(--a); }
    .pv-ccontact .pv-st { font-size: 26px; }
    .pv-ccontact .pv-lead { margin: 12px 0 0; font-size: 14px; }
    .pv-form { display: grid; gap: 10px; }
    .pv-form span { padding: 13px 16px; border-radius: 12px; font-size: 13px; color: var(--gt); box-shadow: none; }
    .pv-form .tall { padding-bottom: 36px; }
    .pv-form .pv-btn { justify-content: center; background: var(--a); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 28px -14px var(--a); }
    .pv-cfoot { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 24px; padding: 30px 48px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12px; color: rgba(255, 255, 255, .55); }
    .pv-cfoot div { display: grid; gap: 8px; align-content: start; }
    .pv-cfoot b { color: #fff; }
    .pv-cfoot .pv-brand { color: #fff; }

    /* =============== PALETA CÁLIDA (la de la tienda, compartida por las tres plantillas) ===============
       Crema + tinta + naranja; bloques oscuros con degradé borravino→naranja; vidrio claro con borde fino. */
    .pv-landing, .pv-corp { --a: #ff6a1a; --a2: #e0457b; --ink: #1b1512; --gt: #6f6258; --gb: rgba(60, 35, 20, .09);
        --gl: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .62));
        --gs: inset 0 1px 0 #fff, 0 18px 36px -26px rgba(60, 35, 20, .45), 0 0 0 1px rgba(60, 35, 20, .05);
        color: var(--ink);
        background: radial-gradient(620px 420px at 0 -40px, rgba(255, 106, 26, .13), transparent 70%), radial-gradient(560px 460px at 100% 30%, rgba(217, 68, 107, .09), transparent 70%), radial-gradient(640px 460px at 20% 82%, rgba(79, 127, 209, .08), transparent 70%), #faf6f1; }
    .pv-landing .pv-grad, .pv-corp .pv-grad { background: linear-gradient(100deg, #ff6a1a, #e0457b); -webkit-background-clip: text; background-clip: text; }
    .pv-landing .pv-badge, .pv-corp .pv-badge { border: 1px solid var(--gb); background: rgba(255, 255, 255, .75); color: var(--ink); box-shadow: 0 1px 0 #fff inset; }
    .pv-landing .pv-btn, .pv-corp .pv-btn { background: var(--ink); color: #fff; box-shadow: 0 14px 26px -14px rgba(27, 21, 18, .7); }
    .pv-landing .pv-btn.ghost, .pv-corp .pv-btn.ghost { background: #fff; border: 1px solid #e6dbd0; color: var(--ink); box-shadow: none; }
    .pv-landing .pv-avs i, .pv-corp .pv-avs i { border-color: #faf6f1; }
    .pv-landing :is(.pv-sfoot, .pv-cfoot), .pv-corp :is(.pv-sfoot, .pv-cfoot) { border-top-color: #eee4da; color: #8a7d72; }
    .pv-cfoot b, .pv-cfoot .pv-brand { color: var(--ink); }
    .pv-ctop { background: rgba(60, 35, 20, .04); border-bottom-color: #eee4da; }
    .pv-cnav { border-bottom-color: #eee4da; }
    .pv-cnav nav span:first-child { color: var(--ink); }
    .pv-corp .pv-pill, .pv-landing .pv-pill { box-shadow: 0 12px 24px -12px var(--a); }
    .pv-logos small { color: #a89b8f; }
    .pv-logos b { color: #c9bcae; }
    .pv-checks li::before { background: rgba(255, 106, 26, .14); color: var(--a); }
    .pv-lb u { background: rgba(60, 35, 20, .09); }
    .pv-ui-f { border-top-color: #eee4da; }
    .pv-ui-h em { background: rgba(22, 163, 74, .12); color: #15803d; }
    .pv-lnav nav, .pv-proof { color: var(--gt); }
    .pv-step span, .pv-ph-row i { color: #fff; }
    .pv-corp .pv-ic { border: 1px solid rgba(255, 106, 26, .25); background: rgba(255, 106, 26, .12); color: var(--a); box-shadow: none; }
    .pv-cstats, .pv-cstats div + div { border-color: #e6dbd0; }
    .pv-cvis { background: linear-gradient(145deg, #2a0d12, #7d1d2f 55%, #ff6a1a); box-shadow: 0 30px 60px -34px rgba(125, 29, 47, .7); }
    .pv-cab-vis .a { background: linear-gradient(135deg, #7d1d2f, #ff6a1a); }
    .pv-cab-vis .c { background: #f3ede6; border: 1px solid var(--gb); }
    .pv-cab-vis .c svg { color: var(--a); }
    .pv-tm i { background: linear-gradient(135deg, #ff8a4c, #ff6a1a); }
    .pv-tm i.t2 { background: linear-gradient(135deg, #f9b4c4, #d9446b); }
    .pv-tm i.t3 { background: linear-gradient(135deg, #9fc3a4, #5f8f6a); }
    .pv-tm i.t4 { background: linear-gradient(135deg, #8fb2e6, #4f7fd1); }
    /* bloques oscuros: estadísticas, plan destacado, cierre y contacto */
    .pv-landing .pv-band, .pv-corp .pv-band { --gt: rgba(255, 255, 255, .62); background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 30px 50px -32px rgba(27, 21, 18, .7); }
    .pv-band div + div { border-left-color: rgba(255, 255, 255, .12); }
    .pv-plan.is-hot { --gt: rgba(255, 255, 255, .62); background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 30px 50px -30px rgba(27, 21, 18, .75); }
    .pv-plan.is-hot small { color: #ffb48a; }
    .pv-plan.is-hot ul { color: rgba(255, 255, 255, .8); }
    .pv-plan ul { color: #54483e; }
    .pv-plan.is-hot .pv-btn { background: var(--a); color: #fff; }
    .pv-lcta { background: linear-gradient(120deg, #2a0d12, #7d1d2f 55%, #ff6a1a); color: #fff; box-shadow: 0 30px 60px -34px rgba(125, 29, 47, .8); }
    .pv-lcta .pv-btn { background: #fff; color: var(--ink); }
    .pv-ccontact { --gt: rgba(255, 255, 255, .62); background: var(--ink); border: 0; color: #fff; box-shadow: 0 30px 60px -34px rgba(27, 21, 18, .8); }
    .pv-ccontact .pv-form span { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; color: rgba(255, 255, 255, .6); }
    .pv-ccontact .pv-form .pv-btn { background: var(--a); color: #fff; }
    /* celular (se mantiene oscuro, como un dispositivo real) y vidrio flotante claro */
    .pv-phone { --gt: rgba(255, 255, 255, .62); --gl: rgba(255, 255, 255, .06); --gb: rgba(255, 255, 255, .1); --gs: none; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 40px 70px -34px rgba(27, 21, 18, .75); background: linear-gradient(180deg, #2a2420, #14100d); border-color: #3a322c; }
    .pv-phone::after { background: linear-gradient(transparent, #14100d); }
    .pv-ring::before { background: #1b1612; }
    .pv-landing .pv-glass { background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .95); color: var(--ink); box-shadow: 0 1px 0 #fff inset, 0 24px 40px -22px rgba(60, 35, 20, .55), 0 0 0 1px rgba(60, 35, 20, .05); }
    .pv-landing .pv-glass small { color: var(--gt); }
    .pv-lhero .pv-badge::before { box-shadow: none; }

    /* ---------- Landing con fotos ---------- */
    .pv-sph { position: absolute; top: 26px; width: 232px; height: 292px; overflow: hidden; border-radius: 28px; background: #eadfd4; box-shadow: 0 30px 50px -28px rgba(60, 35, 20, .6), 0 0 0 5px rgba(255, 255, 255, .8); }
    .pv-sph.l { left: 66px; transform: rotate(-4deg); }
    .pv-sph.r { right: 66px; top: 44px; transform: rotate(4deg); }
    .pv-fl1 { left: 24px; top: 210px; }
    .pv-fl2 { right: 24px; top: 6px; }
    .pv-fl3 { right: 96px; top: 226px; }
    .pv-pcard { padding: 0; overflow: hidden; }
    .pv-pcard-img { height: 150px; }
    .pv-pcard-b { padding: 18px 20px 22px; }
    .pv-pcard-b b { display: block; margin-bottom: 4px; font-size: 16px; }
    .pv-pcard-b p { font-size: 13px; color: var(--gt); }
    .pv-pcard-img img { transition: none; }
    .pv-avs i, .pv-quote-by i { position: relative; overflow: hidden; }
    .pv-avs i > img, .pv-quote-by i > img { position: absolute; inset: 0; }
    .pv-collage { position: relative; padding-bottom: 36px; }
    .pv-cph { height: 330px; overflow: hidden; border-radius: 26px; box-shadow: 0 30px 50px -30px rgba(60, 35, 20, .6); }
    .pv-collage .pv-ui { position: absolute; left: 28px; right: -10px; bottom: 0; padding: 16px 20px; }
    .pv-collage .pv-lb { padding: 6px 0; }

    /* =============== E-COMMERCE (tienda clara) =============== */
    .pv-shop { --a: #ff6a1a; --ink: #1b1512; color: var(--ink);
        background: radial-gradient(620px 420px at 0 -40px, rgba(255, 106, 26, .13), transparent 70%), radial-gradient(560px 460px at 100% 30%, rgba(217, 68, 107, .09), transparent 70%), radial-gradient(640px 460px at 20% 82%, rgba(79, 127, 209, .08), transparent 70%), #faf6f1; }
    .pv-shop .pv-st { color: var(--ink); }
    .pv-sann { padding: 9px; background: var(--ink); color: #fff; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
    .pv-shead { display: flex; align-items: center; gap: 26px; padding: 16px 40px; }
    .pv-shead .pv-brand { color: var(--ink); }
    .pv-search { display: flex; flex: 1; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border-radius: 999px; background: #fff; border: 1px solid #e9dfd6; font-size: 13px; color: #9a8e84; }
    .pv-search svg, .pv-sicons svg, .pv-sben svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .pv-search svg { width: 16px; height: 16px; }
    .pv-sicons { display: flex; gap: 12px; color: var(--ink); }
    .pv-sicons .ico { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #e9dfd6; }
    .pv-sicons svg { width: 18px; height: 18px; }
    .pv-sicons em { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--a); color: #fff; font-size: 11px; font-weight: 800; }
    .pv-scats { display: flex; gap: 28px; padding: 12px 40px; border-block: 1px solid #eee4da; font-size: 13px; font-weight: 600; }
    .pv-scats .sale { color: #e11d48; }
    .pv-shero { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 40px; overflow: hidden; border-radius: 24px; background: linear-gradient(120deg, #2a0d12, #7d1d2f 55%, #ff6a1a); color: #fff; }
    .pv-shero-t { padding: 44px 40px; }
    .pv-shero .pv-badge { border-color: rgba(255, 255, 255, .3); }
    .pv-shero .pv-h1 { margin: 16px 0 12px; font-size: 40px; }
    .pv-shero .pv-lead { margin: 0 0 24px; font-size: 15px; color: rgba(255, 255, 255, .8); }
    .pv-shero .pv-btn { background: #fff; color: var(--ink); }
    .pv-fan { display: flex; align-items: center; justify-content: center; padding: 28px 20px; }
    .pv-fan .pv-item { width: 31%; margin-left: -5%; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 22px 36px -14px rgba(0, 0, 0, .6); }
    .pv-fan .pv-item:first-child { margin-left: 0; transform: translateY(8px) rotate(-5deg); }
    .pv-fan .pv-item:nth-child(2) { z-index: 1; width: 35%; transform: translateY(-8px); }
    .pv-fan .pv-item:nth-child(3) { transform: translateY(10px) rotate(5deg); }
    .pv-fan .pv-pprice i, .pv-fan .pv-pprice s, .pv-fan .pv-pheart { display: none; }
    .pv-sben { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 40px; padding: 16px 0 22px; border-bottom: 1px solid #eee4da; }
    .pv-sben > div { display: flex; align-items: center; gap: 12px; }
    .pv-sben svg { flex: none; width: 26px; height: 26px; color: var(--a); }
    .pv-sben b { display: block; font-size: 13px; }
    .pv-sben small { font-size: 11px; color: #8a7d72; }
    .pv-sprods, .pv-scatg, .pv-scatalog, .pv-srev { padding: 32px 40px 8px; }
    .pv-shd { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
    .pv-shd .pv-st { margin: 0; font-size: 26px; }
    .pv-shd span { font-size: 13px; font-weight: 700; color: var(--a); }
    .pv-item b { display: block; margin-top: 10px; font-size: 14px; color: var(--ink); }
    .pv-pimg { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; }
    .pv-pimg > svg { width: 44%; height: 44%; fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
    .pv-tone-1 { background: linear-gradient(145deg, #ffcfae, #ff8a4c); }
    .pv-tone-2 { background: linear-gradient(145deg, #f9b4c4, #d9446b); }
    .pv-tone-3 { background: linear-gradient(145deg, #c9d8c5, #5f8f6a); }
    .pv-tone-4 { background: linear-gradient(145deg, #bcd3f5, #4f7fd1); }
    .pv-tone-5 { background: linear-gradient(145deg, #d9c8f5, #7c5ad1); }
    .pv-tone-6 { background: linear-gradient(145deg, #f3e2b0, #c99a2e); }
    .pv-pbadge { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: var(--a); color: #fff; font-size: 11px; font-weight: 800; }
    .pv-pheart { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; }
    .pv-pheart svg { width: 14px; height: 14px; fill: none; stroke: #8a7d72; stroke-width: 2; }
    .pv-pstars { display: block; margin-top: 2px; font-size: 11px; color: #f59e0b; letter-spacing: 1px; }
    .pv-pstars small { color: #9a8e84; letter-spacing: 0; }
    .pv-pprice { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
    .pv-pprice strong { font-size: 15px; color: var(--ink); }
    .pv-pprice s { font-size: 12px; color: #9a8e84; }
    .pv-pprice i { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; }
    .pv-tile { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 130px; padding: 16px; border-radius: 16px; color: #fff; position: relative; overflow: hidden; }
    .pv-tile svg { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.3; }
    .pv-tile b { font-size: 16px; }
    .pv-tile small { font-size: 11px; opacity: .85; }
    .pv-cat-wrap { display: grid; grid-template-columns: 190px 1fr; gap: 24px; }
    .pv-filters { display: grid; gap: 10px; align-content: start; align-self: start; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid #eee4da; font-size: 13px; }
    .pv-filters > b { margin-top: 6px; font-size: 13px; }
    .pv-filters .chk { display: flex; align-items: center; gap: 8px; color: #54483e; }
    .pv-filters .chk::before { content: ''; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #cdbfb2; }
    .pv-filters .chk.on::before { background: var(--a); border-color: var(--a); }
    .pv-filters .chk small { margin-left: auto; color: #9a8e84; }
    .pv-range { position: relative; height: 4px; border-radius: 4px; background: #eadfd4; }
    .pv-range i { position: absolute; left: 15%; right: 30%; top: 0; bottom: 0; border-radius: 4px; background: var(--a); }
    .pv-range-l { display: flex; justify-content: space-between; color: #9a8e84; }
    .pv-sizes { display: flex; gap: 6px; }
    .pv-sizes span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid #e0d4c8; font-size: 12px; font-weight: 700; }
    .pv-sizes .on { background: var(--ink); border-color: var(--ink); color: #fff; }
    .pv-dots { display: flex; gap: 8px; }
    .pv-dots i { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e0d4c8; }
    .pv-pager { display: flex; justify-content: center; gap: 6px; margin: 22px 0 8px; }
    .pv-pager span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e0d4c8; font-size: 13px; font-weight: 700; }
    .pv-pager .on { background: var(--ink); border-color: var(--ink); color: #fff; }
    .pv-spromo { display: flex; align-items: center; justify-content: space-between; margin: 28px 40px 8px; padding: 30px 34px; border-radius: 22px; background: linear-gradient(120deg, #2a0d12, #c2185b 60%, #ff6a1a); color: #fff; }
    .pv-spromo .pv-st { color: #fff; font-size: 26px; }
    .pv-spromo .pv-badge { border-color: rgba(255, 255, 255, .35); }
    .pv-count { display: flex; gap: 10px; }
    .pv-count span { display: grid; place-items: center; width: 64px; padding: 10px 0; border-radius: 12px; background: rgba(255, 255, 255, .16); }
    .pv-count b { font-size: 24px; color: #fff; }
    .pv-count small { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .85; }
    .pv-rev { padding: 20px; border-radius: 16px; background: #fff; border: 1px solid #eee4da; }
    .pv-rev p { margin: 8px 0; font-size: 13px; line-height: 1.5; color: #3c3128; }
    .pv-rev small { color: #9a8e84; }
    .pv-snews { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 28px 40px 8px; padding: 28px 32px; border-radius: 22px; background: var(--ink); color: #fff; }
    .pv-snews .pv-st { color: #fff; margin: 0 0 4px; font-size: 22px; }
    .pv-snews small { color: rgba(255, 255, 255, .6); }
    .pv-nl { display: flex; gap: 8px; }
    .pv-nl span { display: flex; align-items: center; width: 220px; padding: 0 16px; border-radius: 12px; background: rgba(255, 255, 255, .1); font-size: 13px; color: rgba(255, 255, 255, .55); }
    .pv-nl .pv-btn { background: var(--a); color: #fff; padding: 13px 20px; }
    .pv-sfoot2 { display: flex; align-items: center; gap: 28px; margin-top: 28px; padding: 22px 40px; border-top: 1px solid #eee4da; font-size: 12px; color: #8a7d72; }
    .pv-sfoot2 .pv-brand { margin-right: auto; color: var(--ink); }

    /* Vidrio claro de la tienda: blanco translúcido + borde + luz superior */
    :is(.pv-search, .pv-sicons .ico, .pv-filters, .pv-rev, .pv-item, .pv-duo) { background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .62)); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 1px 0 #fff inset, 0 18px 36px -26px rgba(60, 35, 20, .45), 0 0 0 1px rgba(60, 35, 20, .06); }
    .pv-item { padding: 8px 8px 12px; border-radius: 18px; }
    .pv-fan .pv-item { background: #fff; }
    .pv-sduo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 28px 40px 0; }
    .pv-duo { position: relative; display: flex; align-items: center; justify-content: space-between; overflow: hidden; min-height: 150px; padding: 26px 30px; border-radius: 22px; color: #fff; border: 0; }
    .pv-duo.a { background: linear-gradient(120deg, #1b1512, #5a2a1a 60%, #ff6a1a); }
    .pv-duo.b { background: linear-gradient(120deg, #3b1d5e, #8b3a9e 55%, #ff7a8a); }
    .pv-duo small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; opacity: .85; }
    .pv-duo b { display: block; margin: 6px 0 10px; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
    .pv-duo em { display: inline-block; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .35); font-size: 12px; font-weight: 700; }
    .pv-duo svg { width: 96px; height: 96px; stroke: rgba(255, 255, 255, .5); stroke-width: 1.2; }
    .pv-sbrands { padding: 34px 40px 4px; text-align: center; }
    .pv-sbrands small { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: #a89b8f; }
    .pv-sbrands div { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 0 24px; }
    .pv-sbrands b { font-size: 19px; letter-spacing: .1em; color: #c9bcae; }

    /* ---------- Fotos: recorte parejo, borde fino y velo suave para leer texto encima ---------- */
    .pv-site img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
    .pv-pimg, .pv-tile, .pv-cvis, .pv-bot-img, .pv-proj-art, .pv-news-art, .pv-pcard-img, .pv-cph { position: relative; }
    .pv-pimg, .pv-tile, .pv-cvis, .pv-bot-img, .pv-proj-art, .pv-news-art, .pv-cab-vis i { overflow: hidden; }
    .pv-sph > img, .pv-pcard-img > img, .pv-cph > img, .pv-pimg > img, .pv-tile > img, .pv-cvis > img, .pv-bot-img > img, .pv-proj-art > img, .pv-news-art > img, .pv-cab-vis i > img { position: absolute; inset: 0; }
    .pv-pimg:has(> img) { background: #f3ede6; }
    .pv-pimg > :is(.pv-pbadge, .pv-pheart) { z-index: 1; }
    .pv-pimg::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(60, 35, 20, .07); pointer-events: none; }
    .pv-tile { min-height: 150px; }
    .pv-tile:has(> img)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 14, 8, 0) 25%, rgba(24, 14, 8, .82)); }
    .pv-tile > :is(b, small) { position: relative; z-index: 1; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
    .pv-cvis:has(> img)::before { z-index: 1; background-image: linear-gradient(180deg, rgba(5, 14, 36, .04) 30%, rgba(5, 14, 36, .55)); background-size: auto; -webkit-mask-image: none; mask-image: none; }
    .pv-cvis .pv-cc { z-index: 2; }
    .pv-cab-vis .a:has(> img) { place-content: end start; padding: 18px 20px; text-align: left; }
    .pv-cab-vis .a:has(> img)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 14, 36, 0) 40%, rgba(5, 14, 36, .7)); }
    .pv-cab-vis .a > span { position: relative; z-index: 1; display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 13px; border-radius: 999px; background: rgba(5, 14, 36, .55); border: 1px solid rgba(255, 255, 255, .22); }
    .pv-cab-vis .a > span strong { display: inline; font-size: 20px; }
    .pv-bot-img { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
    .pv-proj-art::after, .pv-news-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5, 11, 26, .35)); }

    /* ---------- Extras SEO / CMS: franja debajo de la vista (no tapa el sitio) ---------- */
    .pv-dock { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out); }
    .sim-preview:is([data-seo="1"], [data-cms="1"]) .pv-dock { grid-template-rows: 1fr; margin-top: 12px; }
    .pv-dock-in { min-height: 0; overflow: hidden; }
    .pv-dock-row { display: flex; gap: 10px; padding: 0 4px; }
    .pv-fb { display: none; flex: 1 1 0; min-width: 0; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); }
    .sim-preview[data-seo="1"] .pv-fb-seo, .sim-preview[data-cms="1"] .pv-fb-cms { display: block; animation: pvPop .4s cubic-bezier(.22, 1, .36, 1) both; }
    .pv-fb small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #8d97a8; }
    .pv-fb > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; white-space: nowrap; font-size: 11.5px; }
    .pv-fb b { overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
    .pv-fb em, .pv-fb u { font-style: normal; text-decoration: none; }
    .pv-fb-seo b { color: #8ab4f8; }
    .pv-fb-seo em { padding: 2px 8px; border-radius: 999px; background: rgba(61, 220, 151, .15); color: #3ddc97; font-size: 12px; font-weight: 800; }
    .pv-fb-cms span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #aeb7c5; }
    .pv-fb-cms u { padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 12px; }
    .pv-fb-cms u.on { background: rgba(61, 220, 151, .16); color: #3ddc97; }

    @keyframes pvPop  { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
    @keyframes pvSwap { from { opacity: .3; transform: scale(.992); } to { opacity: 1; transform: none; } }
}


/* =========================================================================
   v11 · FONDO HD: grano anti-banding, resplandor suave, encuadre mobile
   ========================================================================= */
/* Grano fino: rompe los escalones (banding) de los degradés oscuros */
.sim-bgwrap::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    opacity: .05;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px;
}

/* =========================================================================
   v12 · FONDO VECTORIAL (CSS puro): cuadrícula + haces de luz roja en los bordes
   Mismo ADN que la sección de proyectos, otra composición. Nítido en cualquier pantalla.
   ========================================================================= */
.sim-bgwrap { background: #07090d; }
/* Fundido arriba/abajo con un degradé encima (se ve igual que la máscara, pero no obliga a re-enmascarar toda la sección en cada fotograma) */
.sim-bgwrap::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(#07090d, transparent 110px, transparent calc(100% - 110px), #07090d); }

.cz-fx {
    --mx: 0; --my: 0; --amp: 1;
    position: absolute; inset: 0; pointer-events: none;
    transform: translateZ(0);               /* capa propia y quieta: se rasteriza una sola vez */
}
/* Solo si el parallax del fondo está activado en el JS (PARALLAX_BG = true) */
.cz-fx.is-parallax {
    transform: translate3d(calc(var(--mx) * var(--amp) * -10px), calc(var(--my) * var(--amp) * -6px), 0) scale(1.03);
    will-change: transform;
}
@media (hover: none), (pointer: coarse) { .cz-fx { --amp: .6; } }
.cz-fx > i { position: absolute; display: block; }

/* Cuadrícula muy tenue, más visible al centro */
.cz-grid {
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 15%, transparent 80%);
            mask-image: radial-gradient(ellipse at 50% 45%, #000 15%, transparent 80%);
}

/* Resplandores rojos muy suaves en los bordes */
.cz-glow { border-radius: 50%; background: radial-gradient(closest-side, rgba(255,0,43,.21), rgba(255,0,43,.06) 58%, transparent 78%); }
.cz-g1 { width: min(700px, 70vw); height: 520px; left: -18%; top: 2%; }
.cz-g2 { width: min(640px, 65vw); height: 520px; right: -20%; top: 34%; }
.cz-g3 { width: min(720px, 70vw); height: 440px; left: 22%; bottom: -8%; opacity: .7; }

/* Ondas de luz abstractas (SVG): fibras que fluyen de borde a borde */
.cz-wave {
    position: absolute; left: 50%; translate: -50% 0;
    width: max(100%, 1000px); height: auto; overflow: visible; pointer-events: none;
}
.cz-w1 { top: 3%; }
.cz-w2 { bottom: 1%; }
.cz-wave path { fill: none; stroke: url(#czgrad); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cz-wave .glow { opacity: .35; }
.cz-wave .glow path { opacity: 1; }

/* Celu: se oculta un resplandor para que quede más limpio */
@media (max-width: 768px) {
    .cz-g3 { display: none; }
}


@media (min-width: 1025px) {
    .pv-tile.pv-tone-1 { background: linear-gradient(145deg, #ff9a62, #e8591b); }
    .pv-tile.pv-tone-2 { background: linear-gradient(145deg, #ee7a98, #b8244f); }
    .pv-tile.pv-tone-3 { background: linear-gradient(145deg, #7fae8a, #3f7550); }
    .pv-tile.pv-tone-4 { background: linear-gradient(145deg, #6f9be0, #3559b0); }
}
@media (min-width: 1025px) {
    .pv-viewport { overscroll-behavior: contain; }
    .pv-tick svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .pv-tick-b { background: #2f8cff; }
    .pv-cc1 .pv-tick { margin-bottom: 10px; }
    .pv-cc1 { width: 190px; }
}

/* Sección fuera de pantalla: se pausan las animaciones infinitas (el JS pone .is-off) */
.sim-stage.is-off :is(.key3d, .calc3d-float) { animation-play-state: paused; }

/* ---------- Tarjetas con características y caja de precio (pasos 1, 2 y 3) ---------- */
.option-label.is-rich { padding: 24px 22px 22px; }
.is-rich .option-icon { margin-bottom: 18px; }
.is-rich .option-title { font-size: 1.1rem; margin-bottom: 4px; }
.is-rich .option-desc { flex-grow: 0; margin-bottom: 16px; }
.design-feats { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; align-content: start; flex-grow: 1; font-size: 0.8rem; color: var(--text-muted); }
.design-feats li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.35; }
.design-feats li::before {
    content: ""; flex: none; width: 14px; height: 14px; margin-top: 1px; background: var(--accent);
    -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
            mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}
.design-price {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px;
    margin-top: auto; padding: 16px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0; background: none;
}
.design-price .row { display: flex; flex-direction: column; gap: 3px; font-size: inherit; font-weight: inherit; }
.design-price .pr-lbl { font-size: 0.74rem; line-height: 1.2; color: var(--text-muted); }
.design-price .pr-lbl s { text-decoration-thickness: 1.5px; }
.design-price .pr-amt { font-size: 1.55rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-main); font-variant-numeric: tabular-nums; }
.design-price .pr-amt em { margin-right: 5px; font-size: 0.78rem; font-style: normal; font-weight: 600; letter-spacing: 0; color: var(--text-muted); }
.design-price small { padding: 4px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.design-price small.is-promo { color: #ff7a9c; background: rgba(252, 48, 101, 0.12); }
.design-price small:not(.is-promo) { padding: 0; font-weight: 500; }
.design-price small.is-blank { display: none; }

@media (max-width: 1024px) {
    .option-label.is-rich {
        grid-template-areas: "icon title indicator" "icon desc indicator" "icon feats indicator" "icon price indicator";
        align-items: start; padding: 20px;
    }
    .is-rich .option-icon { align-self: start; }
    .is-rich .option-indicator { align-self: center; }
    .is-rich .option-title { font-size: 1rem; }
    .is-rich .design-feats { grid-area: feats; margin: 6px 0 12px; gap: 4px; font-size: 0.74rem; }
    .is-rich .design-feats li::before { width: 12px; height: 12px; }
    .is-rich .design-price { grid-area: price; margin-top: 4px; padding-top: 12px; }
    .design-price .pr-amt { font-size: 1.3rem; }
}

/* ---------- FIX MOBILE: la vista orientativa es solo de escritorio ----------
   Todos sus estilos (.pv-*) viven dentro de @media (min-width: 1025px), así que en celu
   el HTML del sitio de ejemplo se mostraba crudo, sin estilos. En mobile se oculta. */
@media (max-width: 1024px) {
    .sim-preview { display: none !important; }
}


/* =========================================================================
   v13 · MOBILE COMODO: dock fijo (inversión + Volver/Continuar), tarjetas con
   chips de precio, encabezado de paso como tarjeta y stepper con textos
   ========================================================================= */
@media (max-width: 1024px) {

    /* Lugar para el dock fijo: que el último contenido no quede tapado */
    .simulator-layout { padding-bottom: 16px; }
    .dock-end { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; }

    /* ---------- Encabezado del paso, como tarjeta ---------- */
    .step-title {
        align-items: center; gap: 14px; margin-bottom: 16px; padding: 14px 16px;
        border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-card);
    }
    .step-num {
        width: 42px; height: 42px; border-radius: 10px; font-size: 1.1rem; font-weight: 700; color: #fff;
        border-color: rgba(252, 48, 101, 0.6); background: rgba(252, 48, 101, 0.1);
        box-shadow: 0 0 14px -4px rgba(252, 48, 101, 0.6);
    }
    .step-text-wrapper h3 { font-size: 1.15rem; margin-bottom: 2px; }
    .step-text-wrapper p { font-size: 0.82rem; }
    .step-title::after {
        content: ""; flex: none; width: 24px; height: 24px; margin-left: auto; background: var(--accent);
        -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3l2 6.2 6.2 2-6.2 2L10 19.4l-2-6.2-6.2-2 6.2-2z'/%3E%3Cpath d='M19 2l.9 2.6 2.6.9-2.6.9L19 9l-.9-2.6-2.6-.9 2.6-.9z'/%3E%3C/svg%3E");
                mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3l2 6.2 6.2 2-6.2 2L10 19.4l-2-6.2-6.2-2 6.2-2z'/%3E%3Cpath d='M19 2l.9 2.6 2.6.9-2.6.9L19 9l-.9-2.6-2.6-.9 2.6-.9z'/%3E%3C/svg%3E");
    }

    /* ---------- Tarjetas ---------- */
    .option-label { grid-template-columns: 48px 1fr 24px; column-gap: 14px; }
    .option-icon { width: 48px; height: 48px; border-radius: 12px; }
    .is-rich .option-indicator { align-self: start; margin-top: 2px; }
    .option-label:has(input:checked) {
        background: linear-gradient(135deg, rgba(252, 48, 101, 0.16), rgba(252, 48, 101, 0.04) 60%, var(--bg-card));
        box-shadow: 0 0 0 1px var(--accent), 0 10px 30px -12px rgba(252, 48, 101, 0.55);
    }
    .option-label:has(input:checked) .option-title { color: #ff7a9c; }
    .option-label:has(input:checked) .option-icon { color: var(--accent); border-color: rgba(252, 48, 101, 0.35); background: rgba(252, 48, 101, 0.08); }


    /* ---------- Dock fijo: inversión estimada + Volver / Continuar ---------- */
    .price-bar {
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(14, 18, 25, 0.94), #07090d);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.55);
    }
    .dock-price {
        display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px;
        border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-card);
    }
    .dock-price-icon {
        flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
        color: var(--accent); background: rgba(252, 48, 101, 0.1); border: 1px solid rgba(252, 48, 101, 0.25);
    }
    .dock-price-icon svg { width: 18px; height: 18px; }
    .price-bar-info { flex: 1; min-width: 0; }
    .price-bar-label { font-size: 0.72rem; margin-bottom: 1px; white-space: nowrap; }
    .price-bar-amount { font-size: clamp(1.05rem, 4.6vw, 1.4rem); white-space: nowrap; }
    .price-bar-btn {
        flex: none; min-height: 44px; padding: 10px 14px; gap: 8px; align-items: center; justify-content: center;
        background: #fff; color: #0b0d12; border-radius: 12px; font-size: 0.85rem; font-weight: 700;
        -webkit-tap-highlight-color: transparent;
    }
    .price-bar-btn svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
    .price-bar-btn:active { transform: translateY(1px); }

    /* Botones de navegación dentro del dock */
    .mobile-step-actions { margin: 0; padding: 0; border: 0; gap: 10px; }
    .mob-btn-prev { flex: 0 0 30%; min-height: 50px; padding-inline: 12px; }
    .mob-btn-next { flex: 1; min-height: 50px; padding-inline: 12px; }
    .mob-btn-next.btn-finish-mode { font-size: 0.88rem; }

    /* ---------- Stepper con textos cuando hay lugar (>= 360px) ---------- */
    .stepper-progress { display: none; }
}

@media (min-width: 360px) and (max-width: 600px) {
    .step-indicator { gap: 8px; }
    .step-indicator .info { display: flex; }
    .stepper-line { margin: 0 8px; }
}

/* Pantallas angostas: stepper de solo números + "Paso X de 3", y dock sin ícono */
@media (max-width: 359px) {
    .stepper-progress { display: block; }
}
@media (max-width: 400px) {
    .dock-price-icon { display: none; }
    .dock-price { padding-left: 14px; gap: 10px; }
    .price-bar-btn { padding-inline: 12px; }
}


/* Dock: se oculta recién al pasar a la sección siguiente. Barra de marca (TRIDENTE / IDEAS · CÓDIGO · RESULTADOS) fuera en mobile */
@media (max-width: 1024px) {
    .price-bar.is-docked.is-ended { transform: translateY(150%); opacity: 0; visibility: hidden; pointer-events: none; }
    .sim-footbar { display: none; }
    .sim-stage { padding-bottom: 0; }
}


/* Mobile: los pasos están apilados en una misma celda y la sección tomaba la altura del paso MÁS ALTO,
   dejando hueco abajo en los pasos cortos. El paso inactivo se colapsa (después de su fundido) y
   la sección mide solo lo que mide el paso activo. */
@media (max-width: 1024px) {
    .step-section { max-height: 0; overflow: hidden; transition: opacity 0.16s ease-out, transform var(--dur-step) var(--ease-out), visibility 0s linear var(--dur-step), max-height 0s linear var(--dur-step); }
    .step-section.is-active { max-height: 5000px; overflow: visible; transition: opacity 0.26s ease-out 0.06s, transform var(--dur-step) var(--ease-out), visibility 0s, max-height 0s; }
    .steps-viewport.no-anim .step-section { transition: none !important; }
    /* menos aire bajo la última tarjeta */
    .options-grid { margin-bottom: 4px; }
}



/* =========================================================================
   TARJETAS DE OPCIONES
   Panel oscuro con aro fino y neutro. La elegida suma una luz que recorre el
   borde (solo transform, no pesa) y un brillo suave en la esquina. Sin marco
   rojo completo.
   ========================================================================= */
.option-label {
    --ac: 252, 48, 101;
    --r: 16px;
    border: 0;
    border-radius: var(--r);
    overflow: hidden;
    background: rgba(255, 255, 255, .1);          /* color del aro */
    box-shadow: none;
}

/* Luz que recorre el borde (apagada hasta que se elige) */
.option-label::before {
    content: "";
    display: block !important;
    position: absolute;
    z-index: 0;
    left: 50%; top: 50%; right: auto; bottom: auto;
    width: 900px; height: 900px;
    margin: -450px 0 0 -450px;
    border-radius: 0;
    background: conic-gradient(from 0deg, transparent 0 62%, rgba(var(--ac), .85) 96%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
@keyframes opt-orbit { to { rotate: 360deg; } }

/* Panel interior: deja ver solo 2px de aro */
.option-label::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 2px;
    padding: 0;
    border-radius: calc(var(--r) - 2px);
    background: var(--bg-card);
    -webkit-mask: none;
            mask: none;
    opacity: 1;
    pointer-events: none;
}

/* Contenido por encima del panel */
.option-label > :not(input) { z-index: 2; }
.option-label > input { z-index: 3; }

@media (hover: hover) {
    .option-label:not(:has(input:checked, input:disabled)):hover { background: rgba(255, 255, 255, .22); }
}

/* Seleccionada */
.option-label:has(input:checked) {
    background: rgba(255, 255, 255, .1);
    box-shadow: none;
    animation: none;
}
.option-label:has(input:checked)::before { opacity: 1; animation: opt-orbit 7s linear infinite; }
.option-label:has(input:checked)::after {
    background: radial-gradient(130% 90% at 0% 0%, rgba(var(--ac), .10), transparent 60%), var(--bg-card);
}
.option-label:has(input:checked) .option-title { color: var(--text-main); }
.option-label:has(input:checked) .option-desc  { color: #aab3c2; }
.option-label:has(input:checked) .option-icon {
    color: var(--accent);
    border-color: rgba(var(--ac), .35);
    background: rgba(var(--ac), .10);
}

/* Si falta elegir una opción, el aro de las tarjetas se tiñe */
.options-grid.has-error .option-label:not(:has(input:checked)) { background: rgba(var(--ac), .55); }

/* Fuera de pantalla se pausa; con "reducir movimiento" queda fija */
.sim-stage.is-off .option-label::before { animation-play-state: paused; }
.step-section:not(.is-active) .option-label::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .option-label:has(input:checked)::before { animation: none; rotate: -40deg; }
}
@media (prefers-reduced-motion: reduce) { .pv-site [data-c="1"] { animation: none !important; } .pv-chip, .pv-fb, .pv-viewport.is-swap { animation: none !important; } .pv-dock { transition: none; } }


/* ============ RENDIMIENTO (v9) ============ */
/* Vidrio de la preview: sin backdrop-filter mientras se mueve; al quedar quieta vuelve el desenfoque */
.sim-preview.is-moving :is(.pv-glass, .pv-cc) { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Equipos modestos (poca RAM o ahorro de datos): se quita lo más costoso, el resto queda igual */
.sim-stage.cz-lite .key3d { animation: none; }
.sim-stage.cz-lite :is(.pv-glass, .pv-cc) { -webkit-backdrop-filter: none; backdrop-filter: none; }