/* ==========================================================================
 quote-wizard.css — Overlay del Quote Tool sobre la landing
 Prefijo:lq-q-* (cero clases sin prefijo)
 Scope:todo vive dentro de .lq-q-overlay
 Tokens:unifica con --primary-green/black/white de la landing
 ========================================================================== */
:root {/* Tokens propios del wizard (los globales --primary-* vienen de index.css) */
 --lq-q-text-muted:#64748b; --lq-q-bg-light:#f3f4f6; --lq-q-border-light:rgba(15, 23, 42, 0.1); --lq-q-neon-glow:rgba(56, 237, 36, 0.4); --lq-q-neon-soft:rgba(56, 237, 36, 0.12); --lq-q-badge-text:#047857; --lq-q-danger:#ef4444; --lq-q-danger-bg:rgba(239, 68, 68, 0.1); --lq-q-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05); --lq-q-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --lq-q-shadow-glow:0 0 20px var(--lq-q-neon-glow); --lq-q-shadow-glow-lg:0 0 40px var(--lq-q-neon-glow); --lq-q-transition-fast:0.2s cubic-bezier(0.4, 0, 0.2, 1); --lq-q-transition-smooth:0.3s cubic-bezier(0.4, 0, 0.2, 1);}
/* Body lock — aplicado por JS (clase) cuando overlay está abierto.
 El style.top se setea inline para preservar scroll sin salto. */
body.lq-q-locked {overflow:hidden; position:fixed; width:100%; left:0; right:0;}
/* ==========================================================================
 OVERLAY ROOT
 ========================================================================== */
.lq-q-overlay {position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column; background:var(--lq-q-bg-light); font-family:'Montserrat', sans-serif; color:var(--primary-black); line-height:1.5; opacity:0; visibility:hidden; transition:opacity var(--lq-q-transition-smooth), visibility var(--lq-q-transition-smooth); -webkit-font-smoothing:antialiased;}
.lq-q-overlay.lq-q-open {opacity:1; visibility:visible;}
.lq-q-overlay[hidden] {display:none;}
/* ==========================================================================
 BACKGROUND FLARES (scoped al overlay)
 ========================================================================== */
.lq-q-flares {position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
.lq-q-flare {position:absolute; border-radius:50%; filter:blur(120px); opacity:0.5; background:var(--primary-green);}
.lq-q-flare-tl {width:400px; height:400px; top:-150px; left:-150px;}
.lq-q-flare-br {width:500px; height:500px; bottom:-200px; right:-200px;}
/* ==========================================================================
 CUSTOM SNOWFLAKE CURSOR (scoped al overlay)
 ========================================================================== */
.lq-q-cursor {position:absolute; top:0; left:0; width:48px; height:48px; pointer-events:none; z-index:1; color:var(--primary-green); filter:drop-shadow(0 0 10px var(--primary-green)); transform:translate3d(-9999px, -9999px, 0); transition:transform 0.1s ease-out; will-change:transform; opacity:0;}
.lq-q-overlay.lq-q-open .lq-q-cursor {opacity:1;}
.lq-q-cursor svg {width:100%; height:100%; animation:lq-q-spin 10s linear infinite; transform:translate(-50%, -50%);}
@keyframes lq-q-spin {100% {transform:translate(-50%, -50%) rotate(360deg);}}
/* Cursor invisible en touch — evita artefactos y desperdicio en mobile */
@media (pointer:coarse), (hover:none) {.lq-q-cursor {display:none;}}
/* ==========================================================================
 NAV SUPERIOR
 ========================================================================== */
.lq-q-nav {display:flex; justify-content:space-between; align-items:center; padding:1.5rem 2rem; border-bottom:1px solid var(--lq-q-border-light); background:rgba(243, 244, 246, 0.4); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); position:relative; z-index:20;}
.lq-q-nav-btn {background:none; border:none; font-family:inherit; font-size:1rem; font-weight:600; color:var(--primary-black); cursor:pointer; display:flex; align-items:center; gap:0.5rem; transition:var(--lq-q-transition-fast); padding:0.25rem;}
.lq-q-nav-btn:hover {color:var(--primary-green);}
.lq-q-nav-btn svg {width:20px; height:20px;}
.lq-q-nav-btn.disabled {opacity:0; pointer-events:none;}
.lq-q-progress {text-align:center; flex:1; max-width:300px; margin:0 2rem;}
.lq-q-progress-text {display:block; font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--lq-q-text-muted); margin-bottom:0.5rem;}
.lq-q-progress-bar-bg {width:100%; height:4px; background:var(--lq-q-border-light); border-radius:2px; overflow:hidden;}
.lq-q-progress-bar-fill {height:100%; background:var(--primary-green); width:20%; transition:width var(--lq-q-transition-smooth);}
/* ==========================================================================
 CONTAINER + STEP PANELS
 ========================================================================== */
.lq-q-container {flex:1; position:relative; overflow-x:hidden; overflow-y:auto; display:flex; justify-content:center; padding:3rem 2rem; z-index:20;}
.lq-q-step {width:100%; max-width:800px; position:absolute; opacity:0; visibility:hidden; transform:translateX(40px); transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1); pointer-events:none; padding-bottom:4rem;}
.lq-q-step.lq-q-active {opacity:1; visibility:visible; transform:translateX(0); position:relative; pointer-events:all;}
.lq-q-step.lq-q-slide-out {transform:translateX(-40px); opacity:0; visibility:hidden;}
.lq-q-step-header {text-align:center; margin-bottom:3rem;}
.lq-q-step-header h2 {font-size:2.5rem; font-weight:700; letter-spacing:-0.02em; margin-bottom:0.5rem;}
.lq-q-step-header p {font-size:1.125rem; color:var(--lq-q-text-muted);}
.lq-q-accent {color:var(--primary-black); font-weight:800;}
.lq-q-badge {display:inline-block; margin-top:1rem; padding:0.5rem 1rem; background:var(--lq-q-neon-soft); color:var(--lq-q-badge-text); border-radius:100px; font-weight:600; font-size:0.875rem; border:1px solid var(--primary-green);}
/* ==========================================================================
 LIQUID GLASS PANELS
 ========================================================================== */
.lq-q-glass {background:linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 100%); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid rgba(255, 255, 255, 0.9); border-left:1px solid rgba(255, 255, 255, 0.6); border-right:1px solid rgba(255, 255, 255, 0.3); border-bottom:1px solid rgba(255, 255, 255, 0.2); box-shadow:0 8px 32px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.2);}
.lq-q-block {margin-bottom:2rem; padding:2rem; border-radius:1.25rem; display:flex; flex-direction:column; align-items:center; text-align:center;}
.lq-q-block-title {font-size:1.25rem; font-weight:600; margin-bottom:1.5rem; text-align:center; width:100%;}
.lq-q-action-footer {display:flex; justify-content:center; width:100%; margin-top:2rem; padding-top:2rem; border-top:1px solid var(--lq-q-border-light);}
.lq-q-btn-next {padding:1rem 3rem; font-size:1.125rem; border-radius:100px; width:auto; margin-top:0;}
.lq-q-btn-next:disabled {background:var(--lq-q-border-light); color:var(--lq-q-text-muted); cursor:not-allowed; transform:none; box-shadow:none;}
/* ==========================================================================
 GRID LAYOUTS
 ========================================================================== */
.lq-q-cards-grid {display:grid; gap:1rem; width:100%;}
.lq-q-cards-grid.lq-q-cols-2 {grid-template-columns:repeat(2, 1fr);}
.lq-q-cards-grid.lq-q-cols-4 {grid-template-columns:repeat(4, 1fr);}
@media (max-width:600px) {.lq-q-cards-grid.lq-q-cols-4 {grid-template-columns:repeat(2, 1fr);}
 .lq-q-cards-grid.lq-q-cols-2 {grid-template-columns:1fr;}
}
/* ==========================================================================
 CHOICE CARDS — Step 1 + Step 2
 ========================================================================== */
.lq-q-card {background:linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 100%); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:1rem; padding:1.5rem; cursor:pointer; transition:var(--lq-q-transition-fast); position:relative; text-align:center; border:1px solid transparent; border-top-color:rgba(255, 255, 255, 0.9); border-left-color:rgba(255, 255, 255, 0.6); box-shadow:var(--lq-q-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.5);}
.lq-q-card:hover {border-color:rgba(15, 23, 42, 0.1); transform:translateY(-3px); box-shadow:var(--lq-q-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.8);}
.lq-q-card.lq-q-selected {background:var(--primary-white); border:1px solid var(--primary-green); box-shadow:var(--lq-q-shadow-glow);}
.lq-q-card h4 {font-size:1.125rem; font-weight:600; margin-bottom:0.25rem;}
.lq-q-card p {font-size:0.875rem; color:var(--lq-q-text-muted);}
.lq-q-card-icon {width:48px; height:48px; margin-bottom:1rem; color:var(--primary-green);}
.lq-q-card.lq-q-sm {padding:1rem;}
.lq-q-card.lq-q-sm h4 {font-size:1.25rem;}
.lq-q-card.lq-q-disabled {opacity:0.5; cursor:not-allowed; pointer-events:none; box-shadow:none; transform:none; background:rgba(255, 255, 255, 0.3);}
/* Tooltip — visible cuando la card está disabled y se hace hover */
.lq-q-tooltip {position:absolute; bottom:100%; left:50%; transform:translateX(-50%) translateY(-10px); background:var(--primary-black); color:var(--primary-white); padding:0.5rem 0.75rem; border-radius:0.375rem; font-size:0.75rem; white-space:nowrap; opacity:0; visibility:hidden; transition:var(--lq-q-transition-fast); pointer-events:none; z-index:10;}
.lq-q-tooltip::after {content:''; position:absolute; top:100%; left:50%; margin-left:-5px; border-width:5px; border-style:solid; border-color:var(--primary-black) transparent transparent transparent;}
.lq-q-card.lq-q-disabled:hover .lq-q-tooltip {opacity:1; visibility:visible; transform:translateX(-50%) translateY(-5px);}
/* ==========================================================================
 PILLS — Step 1 (heat source)
 ========================================================================== */
.lq-q-pills-grid {display:flex; flex-wrap:wrap; gap:0.75rem; justify-content:center;}
.lq-q-pill {padding:0.75rem 1.5rem; border:2px solid transparent; border-radius:100px; font-weight:600; font-size:0.95rem; cursor:pointer; transition:var(--lq-q-transition-fast); background:linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 100%); box-shadow:var(--lq-q-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.8);}
.lq-q-pill:hover {border-color:rgba(15, 23, 42, 0.1); transform:translateY(-1px);}
.lq-q-pill.lq-q-selected {background:var(--primary-black); color:var(--primary-white); border-color:var(--primary-black); box-shadow:var(--lq-q-shadow-md);}
.lq-q-pill.lq-q-warn-hover:hover:not(.lq-q-selected) {border-color:var(--lq-q-danger); color:var(--lq-q-danger); background:var(--lq-q-danger-bg); box-shadow:none;}
/* ==========================================================================
 ICON GRID — Step 2 (location)
 ========================================================================== */
.lq-q-icon-grid {display:grid; gap:1rem; width:100%;}
.lq-q-icon-grid.lq-q-cols-4 {grid-template-columns:repeat(4, 1fr);}
@media (max-width:600px) {.lq-q-icon-grid.lq-q-cols-4 {grid-template-columns:repeat(2, 1fr);}}
.lq-q-icon-pill {padding:1rem; border-radius:1rem; text-align:center; font-weight:600; cursor:pointer; transition:var(--lq-q-transition-fast); border:1px solid transparent; border-top-color:rgba(255, 255, 255, 0.9); border-left-color:rgba(255, 255, 255, 0.6); background:linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 100%); box-shadow:var(--lq-q-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.5);}
.lq-q-icon-pill:hover {transform:translateY(-2px); box-shadow:var(--lq-q-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.8);}
.lq-q-icon-pill.lq-q-selected {background:var(--primary-white); border-color:var(--primary-green); box-shadow:var(--lq-q-shadow-glow);}
/* ==========================================================================
 CIRCLE GRID — Step 3 (scale)
 ========================================================================== */
.lq-q-circle-grid {display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; width:100%;}
.lq-q-circle {width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; cursor:pointer; transition:all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); border:1px solid transparent; border-top-color:rgba(255, 255, 255, 0.9); border-left-color:rgba(255, 255, 255, 0.6); background:linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 100%); box-shadow:var(--lq-q-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.5);}
.lq-q-circle:hover {transform:scale(1.1); box-shadow:var(--lq-q-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.8);}
.lq-q-circle:active {transform:scale(0.95);}
.lq-q-circle.lq-q-selected {background:var(--primary-black); color:var(--primary-white); border-color:var(--primary-black); transform:scale(1.1); box-shadow:var(--lq-q-shadow-md);}
/* ==========================================================================
 STEP 4 — SUMMARY + FORM
 ========================================================================== */
.lq-q-summary {display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; margin-bottom:2rem; padding:1.5rem; background:var(--primary-black); color:var(--primary-white); border-radius:1rem; box-shadow:var(--lq-q-shadow-md);}
.lq-q-summary .lq-q-chip {background:rgba(255, 255, 255, 0.1); padding:0.25rem 0.75rem; border-radius:100px; font-size:0.875rem; font-weight:500;}
.lq-q-form {padding:3rem; border-radius:1.25rem; width:100%;}
.lq-q-form-row {display:flex; gap:1rem; margin-bottom:1rem;}
@media (max-width:600px) {.lq-q-form-row {flex-direction:column;}.lq-q-form {padding:2rem 1.5rem;}}
.lq-q-form-group {flex:1; margin-bottom:1rem;}
.lq-q-overlay input {width:100%; padding:1rem; background:rgba(255, 255, 255, 0.8); border:1px solid rgba(15, 23, 42, 0.1); border-radius:0.5rem; font-family:inherit; font-size:1rem; color:var(--primary-black); transition:var(--lq-q-transition-fast); box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.02);}
.lq-q-overlay input:focus {outline:none; border-color:var(--primary-green); background:var(--primary-white); box-shadow:0 0 0 4px var(--lq-q-neon-glow), inset 0 2px 4px rgba(0, 0, 0, 0.02);}
/* ==========================================================================
 CTA BUTTONS
 ========================================================================== */
.lq-q-cta {width:100%; padding:1.25rem; border:none; border-radius:0.5rem; font-family:inherit; font-size:1.125rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--lq-q-transition-smooth); margin-top:1rem; text-decoration:none;}
.lq-q-primary {background:var(--primary-black); color:var(--primary-white);}
.lq-q-primary:hover:not(:disabled) {transform:translateY(-2px); box-shadow:0 10px 20px rgba(15, 23, 42, 0.2);}
.lq-q-spinner {width:24px; height:24px; border:3px solid rgba(255, 255, 255, 0.3); border-radius:50%; border-top-color:var(--primary-white); animation:lq-q-spin-load 1s ease-in-out infinite;}
@keyframes lq-q-spin-load {to {transform:rotate(360deg);}}
.lq-q-trust-mini {display:flex; justify-content:center; gap:2rem; margin-top:1.5rem; font-size:0.875rem; color:var(--lq-q-text-muted); font-weight:500;}
/* ==========================================================================
 STEP 5 — RESULTS
 ========================================================================== */
.lq-q-tier-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; margin-bottom:3rem;}
@media (max-width:900px) {.lq-q-tier-grid {grid-template-columns:1fr;}}
.lq-q-tier {border-radius:1.25rem; padding:2.5rem 2rem; text-align:center; display:flex; flex-direction:column; position:relative; background:linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid transparent; border-top-color:rgba(255, 255, 255, 0.9); border-left-color:rgba(255, 255, 255, 0.6); box-shadow:var(--lq-q-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.6);}
.lq-q-tier-better {border-color:var(--primary-green); box-shadow:var(--lq-q-shadow-glow); transform:scale(1.05); z-index:2; background:linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 100%);}
@media (max-width:900px) {.lq-q-tier-better {transform:none;}}
.lq-q-popular-badge {position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--primary-green); color:var(--primary-black); padding:0.25rem 1rem; border-radius:100px; font-size:0.75rem; font-weight:800; letter-spacing:0.1em; box-shadow:0 4px 10px var(--lq-q-neon-glow);}
.lq-q-tier-name {font-size:1.5rem; font-weight:800; margin-bottom:0.5rem;}
.lq-q-tier-benefit {font-size:0.875rem; color:var(--lq-q-text-muted); margin-bottom:2rem; flex-grow:1;}
.lq-q-price-block {margin-top:auto;}
.lq-q-msrp {color:var(--lq-q-text-muted); font-size:1rem; margin-bottom:0.25rem;}
.lq-q-final-price {font-size:2.5rem; font-weight:800; margin-bottom:0.5rem; line-height:1;}
.lq-q-monthly {font-size:0.875rem; font-weight:600; color:var(--lq-q-text-muted);}
/* ===== Slots dinámicos del Step 5 (sec 18 — render de modelos reales) ===== */
.lq-q-tier-img {display:flex; align-items:center; justify-content:center; height:110px; margin-bottom:0.75rem;}
.lq-q-tier-img img {max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.lq-q-tier-model {font-size:1rem; font-weight:700; color:var(--primary-black); margin-bottom:0.25rem; line-height:1.2;}
.lq-q-tier-spec {font-size:0.8125rem; color:var(--lq-q-text-muted); margin-bottom:0.75rem;}
.lq-q-tier-note {display:inline-block; padding:0.25rem 0.625rem; border-radius:100px; background:var(--lq-q-neon-soft); color:var(--lq-q-badge-text); font-size:0.6875rem; font-weight:600; margin-bottom:0.75rem;}
.lq-q-tier-also {display:inline-block; padding:0.25rem 0.625rem; border-radius:100px; background:var(--lq-q-bg-light); color:var(--lq-q-text-muted); font-size:0.6875rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:0.5rem;}
/* Bloque "missing" — CTA telefónico cuando no hay cobertura en ese tier */
.lq-q-tier-missing {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1rem; flex-grow:1; padding:1rem 0;}
.lq-q-tier-missing p {font-size:0.9375rem; color:var(--lq-q-text-muted); text-align:center; line-height:1.4; margin:0;}
.lq-q-tier-missing .lq-q-cta {width:100%;}
/* ===== Step 5 — booking section (calendario HL embed) ===== */
.lq-q-booking-section {text-align:center; max-width:720px; margin:0 auto; padding:2rem; border-radius:1.25rem;}
.lq-q-booking-title {font-size:clamp(1.125rem, 2.5vw, 1.375rem); font-weight:700; color:var(--primary-black); margin-bottom:0.5rem;}
.lq-q-booking-sub {font-size:0.9375rem; color:var(--lq-q-text-muted); margin-bottom:1.5rem;}
#lqQBookingContainer iframe {display:block; width:100%; border:none; border-radius:0.75rem; background:var(--primary-white);}
.lq-q-booking-alt {margin-top:1.25rem; font-size:0.875rem; color:var(--lq-q-text-muted);}
.lq-q-booking-tel {color:var(--primary-green); font-weight:700; text-decoration:none; transition:var(--lq-q-transition-fast);}
.lq-q-booking-tel:hover {text-decoration:underline;}
/* Fallback button para transición manual cuando HL no emite señal de submit */
.lq-q-manual-continue {display:block; width:100%; margin-top:1rem; padding:1.25rem 1.5rem; background:var(--primary-black); color:var(--primary-white); border:none; border-radius:0.5rem; font-family:inherit; font-size:0.9375rem; font-weight:600; cursor:pointer; transition:var(--lq-q-transition-fast); text-align:center; position:relative; z-index:5; user-select:none;}
.lq-q-manual-continue:hover {transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.15);}
.lq-q-manual-continue:active {transform:translateY(0); box-shadow:0 2px 6px rgba(0,0,0,0.20); transition-duration:0.05s;}
.lq-q-text-link {background:none; border:none; color:var(--lq-q-text-muted); font-family:inherit; font-weight:600; font-size:0.875rem; text-decoration:underline; cursor:pointer;}
.lq-q-text-link:hover {color:var(--primary-black);}
/* ==========================================================================
 ANIMATIONS — Step 5 reveal
 ========================================================================== */
.lq-q-animate-up {opacity:0; transform:translateY(30px); animation:lq-q-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;}
.lq-q-delay-1 {animation-delay:0.1s;}
.lq-q-delay-2 {animation-delay:0.2s;}
.lq-q-delay-3 {animation-delay:0.3s;}
@keyframes lq-q-slide-up {to {opacity:1; transform:translateY(0);}}
/* ==========================================================================
 MOBILE TWEAKS para overlay
 ========================================================================== */
@media (max-width:600px) {.lq-q-nav {padding:1rem;}
 .lq-q-progress {margin:0 1rem;}
 .lq-q-container {padding:2rem 1rem;}
 .lq-q-step-header h2 {font-size:1.75rem;}
 .lq-q-step-header p {font-size:1rem;}
 .lq-q-block {padding:1.25rem;}
 .lq-q-tier {padding:1.75rem 1.25rem;}
 .lq-q-final-price {font-size:2rem;}
 .lq-q-booking-section {padding:1.25rem;}
 .lq-q-booking-title {font-size:1.125rem;}
}