* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #050505;
    color: #fff;
    font-family: 'Inter', sans-serif;
    padding-top: 100px;
    /* NOTA CRÍTICA: NUNCA agregar "overflow-x: hidden" (ni overflow-y,
       ni overflow: auto/scroll) en el body o en cualquier ancestro de
       .results-sticky. Cualquier valor de overflow distinto de "visible"
       en un ancestro anula silenciosamente "position: sticky" en TODOS
       los navegadores (Chrome, Safari, Firefox). Esto es lo que causó
       que el panel "Resumen Estimado" dejara de funcionar. */
}

.cotizador-layout {
    width: 100%;
    max-width: 1400px;
    margin: 40px auto 100px;
    padding: 0 48px;
}

/* FLUJO FLEX QUE ACTIVA EL MECANISMO STICKY REAL EN LA COLUMNA DE PRECIOS
   ─────────────────────────────────────────────────────────────────────
   CAUSA RAÍZ DEL BUG ORIGINAL: este contenedor tenía "align-items:
   flex-start". Con eso, el flex-item .results-panel colapsaba a la
   altura de su propio contenido (el panel sticky) en vez de estirarse
   a la altura de .cotizador-form (la columna larga del formulario).

   position:sticky necesita que su contenedor padre sea MÁS ALTO que el
   propio elemento para tener "espacio de recorrido" donde desplazarse
   mientras se hace scroll. Sin ese espacio extra, el sticky no tiene
   dónde viajar y el panel queda cortado o se comporta de forma errática.

   "align-items: stretch" (el valor por defecto de flexbox, que acá se
   declara explícito para que quede documentado) hace que .results-panel
   se estire a la altura de .cotizador-form, dándole al sticky todo el
   recorrido vertical que necesita. Con esto el sticky es 100% nativo de
   CSS — no se requiere (ni se debe agregar) ningún JS que simule el
   comportamiento sticky vía scroll/transform. */
.cotizador-container {
    display: flex;
    gap: 40px;
    align-items: stretch;
    width: 100%;
}

.cotizador-form {
    flex: 1.4;
    min-width: 0; /* evita que el flex item fuerce overflow y rompa el cálculo de altura del hermano sticky */
}

.results-panel {
    flex: 1;
    min-width: 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.section-subtitle {
    color: #a0a0a0;
    font-size: 1rem;
    margin-bottom: 40px;
    line-height: 1.6;
}

.step-box {
    background: #0b0b0b;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
}

.step-label {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.range-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #1c1c1c;
    outline: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #d43820;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(212, 56, 32, 0.4);
}

.range-badge {
    background: rgba(212, 56, 32, 0.1);
    border: 1px solid rgba(212, 56, 32, 0.2);
    color: #ff604b;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 700;
    align-self: flex-start;
}

.visual-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* CENTRADO COMPLETO VERTICAL DE TARJETAS SELECTORAS */
.selectable-card {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center; /* Centrado perfecto de los copies al lado del icono */
    gap: 20px;
}

.selectable-card:hover {
    background: #161616;
    border-color: rgba(255, 255, 255, 0.15);
}

.selectable-card.active {
    background: #161211;
    border-color: #d43820;
    box-shadow: 0 0 25px rgba(212, 56, 32, 0.12);
}

.selectable-card.active::after {
    content: "✓";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 24px;
    background: #d43820;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
}

.card-icon {
    font-size: 2rem;
    background: rgba(255, 255, 255, 0.03);
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-body {
    padding-right: 35px;
}

.selectable-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.selectable-card p {
    font-size: 0.9rem;
    color: #999;
    line-height: 1.5;
}

.lead-capture-box {
    border: 1px dashed rgba(212, 56, 32, 0.3);
    background: linear-gradient(180deg, #0b0b0b 0%, #110908 100%);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.input-group input {
    width: 100%;
    background: #050505;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    color: #fff;
    font-size: 0.95rem;
    outline: none;
}

.input-group input:focus { border-color: #d43820; }

.submit-btn-calc {
    width: 100%;
    background: #d43820;
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 20px;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.submit-btn-calc:hover {
    background: #f1432a;
    transform: translateY(-2px);
}

/* CAJA DE RESUMEN QUE TE ACOMPAÑA EN EL DESPLAZAMIENTO (STICKY NATIVO CSS) */
.results-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 135px; /* distancia respecto a la barra de menú fija superior */
    z-index: 50; /* asegura que el panel nunca quede tapado por otros elementos al volverse sticky */
    background: #0f0f0f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    width: 100%;
}

.success-header {
    text-align: center;
    margin-bottom: 20px;
}

.fire-badge {
    width: 48px;
    height: 48px;
    background: rgba(212, 56, 32, 0.15);
    border: 1px solid rgba(212, 56, 32, 0.3);
    font-size: 1.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.success-header h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 6px; }
.success-header p { font-size: 0.82rem; color: #999; line-height: 1.4; }

.price-block {
    background: #050505;
    border-radius: 16px;
    padding: 18px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.03);
    margin-bottom: 16px;
}

.price-block span {
    font-size: 0.78rem;
    color: #888;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.total-price-display {
    font-size: 2.4rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.04em;
}

.price-meta {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 16px;
}

.meta-item { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }
.meta-label { color: #aaa; }
.meta-val { font-weight: 700; color: #ff604b; }

.benefits-checklist h4 { font-size: 0.85rem; margin-bottom: 8px; color: #aaa; }
.benefits-checklist ul { list-style: none; margin-bottom: 18px; }
.benefits-checklist li { font-size: 0.82rem; color: #ccc; margin-bottom: 5px; }

.estimate-disclaimer {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(212, 56, 32, 0.06);
    border: 1px solid rgba(212, 56, 32, 0.18);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.estimate-disclaimer-icon {
    font-size: 1rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.estimate-disclaimer p {
    font-size: 0.75rem;
    line-height: 1.45;
    color: #ccc;
    margin: 0;
}

.estimate-disclaimer strong {
    color: #ff8a72;
    font-weight: 700;
}

.whatsapp-direct-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #000;
    text-decoration: none;
    font-weight: 900;
    font-size: 0.9rem;
    padding: 15px;
    border-radius: 14px;
    transition: transform 0.2s, background 0.2s;
}

.whatsapp-direct-btn:hover { background: #20ba5a; transform: translateY(-2px); }

/* RESPONSIVE DESIGN INTELIGENTE */
@media (max-width: 1024px) {
    .cotizador-container { flex-direction: column; }
    .results-sticky { position: relative; top: 0; width: 100%; }
}

@media (max-width: 600px) {
    .cotizador-layout { padding: 0 20px; }
    .form-grid { grid-template-columns: 1fr; }
    .section-title { font-size: 1.9rem; }
    .selectable-card { text-align: center; flex-direction: column; }
    .card-body { padding-right: 0; }
    .total-price-display { font-size: 2.3rem; }
}