@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    --balis-blue: #0B1C2E;
    --olive-green: #708238;
    --champagne-gold: #C5A059;
    --cloud-white: #F8F9FA;
    --balis-gold: #C5A059;
    --pure-black: #000000;
    --glass-bg: rgba(255, 255, 255, 0.98);
    --glass-border: rgba(11, 28, 46, 0.08);
    --font-titles: 'Lora', serif;
    --font-body: 'Montserrat', sans-serif;
    --balis-dark: #071524;
    --transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);

    /* Standardized Animation Rhythm (Quiet Luxury) */
    --dur-fast: 300ms;
    --dur-std: 600ms;
    --dur-hero: 1200ms;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-std: all var(--dur-std) var(--ease-out);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

*::-webkit-scrollbar {
    display: none !important;
}

body {
    font-family: var(--font-body);
    background-color: var(--cloud-white);
    color: var(--balis-blue);
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

/* Background Layer */
.bg-drone {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.35)), url('../recursos/fotos/bg_light.webp') center/cover no-repeat;
    z-index: -1;
}

.progress-indicator {
    position: fixed;
    top: 2rem;
    right: 3rem;
    z-index: 100;
    text-align: right;
}

.step-counter {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    display: block;
    color: var(--balis-blue);
    opacity: 0.6;
}

.progress-track {
    width: 120px;
    height: 2px;
    background: rgba(11, 28, 46, 0.1);
    position: relative;
}

.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 25%;
    background: var(--champagne-gold);
    transition: width 0.8s var(--transition);
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.4);
}

/* Main Container: Re-engineered to dynamic flex box with sharp luxury edges */
.master-container {
    width: 100%;
    max-width: 680px;
    height: 560px !important;
    min-height: 560px !important;
    max-height: 560px !important;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 48px;
    /* Quite Luxury: custom premium geometric curved edges (48px) */
    position: relative;
    padding: 1.8rem 3rem 1.5rem 3rem;
    box-shadow: 0 30px 80px rgba(11, 28, 46, 0.05);
    overflow: hidden !important;
    opacity: 0;
    transform: scale(0.98);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out), height 0.4s var(--ease-out);
}

/* Internal Progress & Navigation */
.container-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    /* Match Desktop Card Border Radius (48px) to prevent vertical scale down */
    background: linear-gradient(rgba(11, 28, 46, 0.03) 4px, transparent 4px);
    z-index: 200;
    border-top-left-radius: 48px;
    border-top-right-radius: 48px;
    overflow: hidden;
    pointer-events: none;
    /* Crucial: Let clicks pass through the 48px height to elements below */
}

@keyframes goldFlow {
    0% {
        background-position: 200% 0%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.fluid-gold {
    background: linear-gradient(90deg,
            #C5A059 0%,
            #E8D0A1 25%,
            #D4B98E 50%,
            #E8D0A1 75%,
            #C5A059 100%);
    background-size: 200% 100%;
    animation: goldFlow 8s linear infinite !important;
}

.progress-fill {
    height: 4px;
    width: 25%;
    background-size: 200% 100%;
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.3);
    transition: width 0.8s var(--transition);
}

/* Header layout updated to sequential flow for better responsiveness */
.container-header {
    width: 100%;
    height: auto;
    padding: 0 0 0.8rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(11, 28, 46, 0.05);
    background: transparent;
    z-index: 100;
    margin-bottom: 1.0rem;
}

.btn-back-minimal {
    background: transparent;
    border: none;
    color: var(--balis-blue);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: var(--transition);
    opacity: 0.5;
    visibility: hidden;
    /* Fitts's Law Touch Target UX Optimization (Massive Area Click Target) */
    padding: 1.2rem 2.5rem 1.2rem 1.5rem;
    margin-left: -1.5rem;
    margin-top: -1.2rem;
    margin-bottom: -1.2rem;
}

.btn-back-minimal:hover {
    opacity: 1;
    transform: translateX(-3px);
}

.btn-back-minimal i {
    font-size: 0.85rem;
    color: var(--balis-blue);
}

.container-step-counter {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--balis-blue);
    opacity: 0.5;
    text-transform: uppercase;
}

h1 {
    font-family: var(--font-titles);
    font-size: 1.45rem;
    font-weight: 500;
    margin-top: 0.5rem;
    margin-bottom: 0.4rem;
    line-height: 1.35;
    color: var(--balis-blue);
    text-align: center;
}

.step-subtitle {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: rgba(11, 28, 46, 0.45);
    text-align: center;
    display: block;
    margin-bottom: 1.5rem;
    line-height: 1.45;
}

.step-content {
    flex-grow: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    padding-bottom: 1.5rem;
    overflow-x: hidden;
}

/* Interaction stability during scroll */
.is-scrolling,
.is-scrolling * {
    pointer-events: none !important;
    cursor: default !important;
}

.step-pane {
    display: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.step-pane.active {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Specialized Step 8 Light Scroll */
#pane8.active {
    display: flex;
    flex-direction: column;
    padding: 0;
}

#pane8 .step-content {
    display: block;
    width: 100%;
    padding-bottom: 0;
}

/* Step 1: Goals Grid */
.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    width: 100%;
    margin-top: 0.5rem;
}

.option-card {
    padding: 2rem 1.5rem;
    border: 1px solid rgba(11, 28, 46, 0.05);
    border-radius: 24px;
    /* Curved luxury border style (24px) */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    background: white;
    text-align: center;
    min-height: 140px;
    box-shadow: 0 4px 15px rgba(11, 28, 46, 0.01);
    position: relative;
    overflow: hidden;
}

.option-card:hover {
    border-color: var(--champagne-gold);
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(11, 28, 46, 0.04);
}

#pane4piso .option-card,
#pane4casa .option-card,
#pane4villa .option-card,
#pane4parcela .option-card {
    min-height: 72px;
    padding: 1rem 1.2rem;
    gap: 0.7rem;
    border-radius: 18px;
}

#pane4piso .option-card span,
#pane4casa .option-card span,
#pane4villa .option-card span,
#pane4parcela .option-card span {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Vertically center the 2×2 grid within the pane4 step-content */
#pane4piso .step-content,
#pane4casa .step-content,
#pane4villa .step-content,
#pane4parcela .step-content {
    justify-content: center;
}

/* pane2parcela: elegant, compact topography and access cards on desktop */
#pane2parcela .option-card {
    min-height: 86px;
    padding: 0.8rem 1rem;
    gap: 0.6rem;
    border-radius: 18px;
}

#pane2parcela .option-card i {
    font-size: 1.5rem;
}

#pane2parcela .option-card span {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* pane3parcela: elegant, compact main usage cards in a single row on desktop */
#pane3parcela .option-card {
    min-height: 72px;
    padding: 1rem 1.2rem;
    gap: 0.7rem;
    border-radius: 18px;
}

#pane3parcela .option-card span {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

#pane3parcela #parcela_uso_urbano_group .options-grid {
    grid-template-columns: 1fr 1fr 1fr;
}

#pane5piso .option-card.mini,
#pane5casa .option-card.mini,
#pane5villa .option-card.mini,
#pane5parcela .option-card.mini {
    padding: 0.8rem;
    font-size: 0.8rem;
    min-height: auto;
    border-radius: 16px;
}

.option-card.checked {
    border-color: var(--champagne-gold);
    background: white;
    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.08);
}

.option-card.checked::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--champagne-gold);
    opacity: 0.8;
}

/* Fluid gold animation ONLY for the Extras step */
#pane7 .option-card.checked::before {
    background: linear-gradient(90deg, #C5A059 0%, #E8D0A1 25%, #D4B98E 50%, #E8D0A1 75%, #C5A059 100%);
    background-size: 200% 100%;
    animation: goldFlow 8s linear infinite;
}

.option-card.checked i {
    color: var(--champagne-gold);
    opacity: 1;
}

.extras-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.8rem;
}

.extras-grid .option-card {
    min-height: 85px;
    padding: 0.8rem;
    gap: 0.6rem;
}

.extras-grid .option-card i {
    font-size: 1.6rem;
}

.extras-grid .option-card span {
    font-size: 0.8rem;
}

.option-card i {
    font-size: 2.2rem;
    color: var(--balis-blue);
    opacity: 0.7;
    transition: var(--transition);
}

#insulation_estudio_row .option-card i,
#insulation_casa_row .option-card i,
#insulation_villa_row .option-card i {
    font-size: 1.4rem;
}

/* Desktop: compact height for insulation/estudio extra buttons (pane3 of piso/casa/villa) */
#insulation_estudio_row,
#insulation_casa_row,
#insulation_villa_row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-top: 0.6rem;
    width: 100%;
}

#insulation_estudio_row .option-card,
#insulation_casa_row .option-card,
#insulation_villa_row .option-card {
    flex-direction: row;
    gap: 10px;
    padding: 0.65rem 1rem;
    min-height: unset;
    height: 48px;
    justify-content: flex-start;
    align-items: center;
    border-radius: 14px;
    flex: 1;
}

.option-card:hover i {
    color: var(--champagne-gold);
    opacity: 1;
    transform: scale(1.1);
}

.option-card span {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(11, 28, 46, 0.82);
    line-height: 1.4;
}

/* Result View Extras */
.valuation-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.valuation-detail-row span:last-child {
    color: var(--champagne-gold);
    font-weight: 600;
}

/* Form Utilities */
.input-group {
    margin-bottom: 1rem;
    position: relative;
    width: 100%;
}

.label-mini {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--champagne-gold);
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    display: block;
    font-weight: 600;
}

/* Final Form Box */
.lead-form-box {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    background: white;
    border: 1px solid rgba(11, 28, 46, 0.04);
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(11, 28, 46, 0.03);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select {
    width: 100%;
    padding: 1.1rem 1.4rem;
    border: 1px solid rgba(11, 28, 46, 0.08);
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: var(--font-body);
    background: #fdfdfd;
    transition: var(--transition);
    color: var(--balis-blue);
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--champagne-gold);
    background: white;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08);
}

/* Prevent Google Places Autocomplete watermark */
#st {
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: right 15px center !important;
}

.check-group {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

input::placeholder {
    color: rgba(11, 28, 46, 0.3);
}

/* Location Suggestions Dropdown */
.loc-results,
.st-results,
.cp-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 180px;
    overflow-y: auto;
    background: white;
    border: 1px solid rgba(11, 28, 46, 0.08);
    border-radius: 4px;
    z-index: 2000;
    margin-top: 8px;
    box-shadow: 0 15px 40px rgba(11, 28, 46, 0.08);
    display: none;
}

.loc-results::-webkit-scrollbar,
.st-results::-webkit-scrollbar,
.cp-results::-webkit-scrollbar {
    display: none;
}

.loc-result-item,
.st-result-item,
.cp-result-item {
    padding: 1rem 1.4rem;
    font-size: 0.95rem;
    color: var(--balis-blue);
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 1px solid rgba(11, 28, 46, 0.02);
    text-align: left;
}

.loc-result-item:last-child,
.st-result-item:last-child,
.cp-result-item:last-child {
    border-bottom: none;
}

.loc-result-item:hover,
.st-result-item:hover,
.cp-result-item:hover {
    background: rgba(212, 175, 55, 0.05);
    color: var(--champagne-gold);
    padding-left: 1.6rem;
}

.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Checkbox Styling */
.check-box {
    width: 18px;
    height: 18px;
    border: 2px solid #EEE;
    border-radius: 4px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.check-box.checked {
    background: var(--champagne-gold);
    border-color: var(--champagne-gold);
    box-shadow: 0 5px 15px rgba(197, 160, 89, 0.3);
}

.check-box:hover {
    border-color: var(--champagne-gold);
    transform: scale(1.1);
    background: rgba(197, 160, 89, 0.05);
}

.check-box.checked::after {
    content: '\f00c';
    font-family: "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
    font-size: 0.7rem;
    color: white;
    display: block;
}

.check-text {
    font-size: 0.8rem;
    color: rgba(11, 28, 46, 0.6);
}

/* Range Slider Styling */
.range-container {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(197, 160, 89, 0.1);
    border-radius: 4px;
    padding: 2rem;
    margin-top: 1rem;
}

.range-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
}

.range-label {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--balis-blue);
}

.range-value {
    font-family: var(--font-titles);
    font-size: 2rem;
    color: var(--champagne-gold);
    font-weight: 500;
}

input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    cursor: pointer;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    background: rgba(11, 28, 46, 0.1);
    border-radius: 2px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--champagne-gold);
    border: 4px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: -9px;
    transition: var(--transition);
}

input[type=range]:active::-webkit-slider-thumb {
    transform: scale(1.2);
    background: var(--balis-blue);
}

.range-limits {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    font-size: 0.75rem;
    color: rgba(11, 28, 46, 0.4);
    font-weight: 500;
}

/* Stepper Styling */
.stepper-card {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(197, 160, 89, 0.1);
    border-radius: 4px;
    padding: 1rem 1.5rem;
    margin-bottom: 0.6rem;
    justify-content: space-between;
    transition: var(--transition);
}

.stepper-info {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.stepper-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(197, 160, 89, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--champagne-gold);
    font-size: 1.1rem;
}

.stepper-icon i {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    text-align: center !important;
}

.extra-details-box {
    display: none;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(197, 160, 89, 0.1);
    border-radius: 4px;
    padding: 1rem 0.4rem;
    margin-top: 1rem;
    width: 100%;
    transition: var(--transition);
}

#piso_details_parking,
#piso_details_terraza,
#piso_details_inquilinos {
    align-items: center;
}

#piso_details_parking .label-mini,
#piso_details_terraza .label-mini,
#piso_details_inquilinos .label-mini {
    margin-bottom: 0 !important;
}

#piso_details_parking .mini-stepper,
#piso_details_terraza .options-grid,
#piso_details_inquilinos .options-grid {
    margin-top: 0 !important;
}

.stepper-label {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--balis-blue);
    font-weight: 500;
}

.stepper-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-stepper {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(11, 28, 46, 0.1);
    background: white;
    color: var(--balis-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    font-size: 1rem;
}

.btn-stepper:hover {
    border-color: var(--champagne-gold);
    color: var(--champagne-gold);
    transform: scale(1.1);
}

.btn-stepper .stepper-line {
    position: absolute;
    background-color: currentColor;
    border-radius: 1px;
    transition: background-color 0.2s ease;
}

.btn-stepper .stepper-line.horizontal {
    width: 14px;
    height: 1.5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn-stepper .stepper-line.vertical {
    width: 1.5px;
    height: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.stepper-value {
    min-width: 45px;
    width: auto;
    padding: 0 8px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body), sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #002B49;
    text-align: center;
    white-space: nowrap;
}

/* Buttons: Transformed from absolute positioning to natural inline flow */
.btn-advance {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 1rem !important;
    width: 100%;
    background: var(--balis-blue);
    color: white;
    border: none;
    padding: 1.1rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-std);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-advance:hover {
    background: var(--champagne-gold);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(197, 160, 89, 0.2);
}

.btn-back {
    display: none;
}

/* New Dynamic Selection Items */
.selection-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.selection-item {
    display: flex;
    align-items: center;
    padding: 0.9rem 1.2rem;
    background: white;
    border: 1px solid rgba(11, 28, 46, 0.08);
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
}

.selection-item:hover {
    border-color: var(--champagne-gold);
    background: rgba(212, 175, 55, 0.02);
}

.selection-item.active {
    border-color: var(--champagne-gold);
    background: rgba(212, 175, 55, 0.05);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
}

.selection-item .radio-circle {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(11, 28, 46, 0.1);
    border-radius: 50%;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.selection-item.active .radio-circle {
    border-color: var(--champagne-gold);
}

.radio-circle::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--champagne-gold);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.5);
    transition: var(--transition);
}

.selection-item.active .radio-circle::after {
    opacity: 1;
    transform: scale(1);
    background: var(--champagne-gold);
}

.selection-label {
    font-size: 0.95rem;
    color: var(--balis-blue);
    font-weight: 400;
    letter-spacing: 0.01rem;
}

.info-box {
    background: #f0f9ff;
    color: #0c4a6e;
    padding: 1rem 1.4rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: left;
    border: 1px solid rgba(59, 130, 246, 0.05);
}

/* Loading View */
#analyzing {
    text-align: center;
    padding: 4rem 2rem;
    display: none;
}

.analysis-loader {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 3rem;
}

.loader-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(212, 175, 55, 0.1);
    border-top: 2px solid var(--champagne-gold);
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.loader-pulse {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    background: rgba(212, 175, 55, 0.03);
    border-radius: 50%;
    animation: pulse-ring 2s ease-in-out infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse-ring {

    0%,
    100% {
        transform: scale(0.95);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.6;
    }
}

#loadingText {
    font-family: var(--font-body);
    font-size: 1.4rem;
    color: var(--balis-blue);
    font-weight: 300;
    letter-spacing: 0.05rem;
    margin-top: 1rem;
    display: block;
}

/* Precision Rows (Horizontal list style) */
.precision-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 0.8rem 1.2rem;
    border-radius: 4px;
    border: 1px solid rgba(11, 28, 46, 0.05);
    margin-bottom: 0.6rem;
    transition: var(--transition);
}

.precision-label {
    font-size: 0.95rem;
    color: var(--balis-blue);
    font-weight: 400;
}

.custom-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    background: white;
}

.custom-checkbox.checked {
    background: var(--champagne-gold);
    border-color: var(--champagne-gold);
}

.custom-checkbox i {
    color: white;
    font-size: 0.8rem;
    display: none;
}

.custom-checkbox.checked i {
    display: block;
}

.mini-stepper {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.btn-mini-step {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(11, 28, 46, 0.1);
    background: white;
    color: var(--balis-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition);
}

.btn-mini-step:hover {
    border-color: var(--champagne-gold);
    background: rgba(212, 175, 55, 0.05);
}

/* Corrección tipográfica de centrado para el menos "-" (compensación del baseline) */
.btn-mini-step:first-of-type,
.btn-stepper:first-of-type {
    padding-bottom: 2px !important;
}

.mini-val {
    font-size: 1rem;
    font-weight: 500;
    color: var(--balis-blue);
    min-width: 15px;
    text-align: center;
}

/* Final View */
#resultView {
    text-align: center;
    display: none;
}

.price-range {
    font-size: 2.5rem;
    font-family: var(--font-titles);
    color: var(--balis-blue);
    margin: 1rem 0;
    font-weight: 600;
}

.trust-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: rgba(112, 130, 56, 0.1);
    border: 1px solid var(--olive-green);
    color: var(--olive-green);
    font-size: 0.7rem;
    text-transform: uppercase;
    border-radius: 100px;
    margin-bottom: 2rem;
}

/* Validation Shake */
.shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* Dimensions UI - Elevated & Integrated */
.m2-hero-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 0;
    margin-top: 1rem;
}

.m2-input-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.m2-hero-input {
    font-family: var(--font-titles);
    font-size: 3.2rem;
    color: var(--balis-blue);
    font-weight: 300;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    width: auto;
    min-width: 1ch;
    text-align: center;
    outline: none;
    letter-spacing: -0.02em;
    transition: width 0.1s ease;
    height: auto;
}

.m2-hero-input::placeholder {
    text-align: center;
    opacity: 0.5;
}

#m2Input.m2-hero-input::-webkit-outer-spin-button,
#m2Input.m2-hero-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.m2-hero-unit {
    font-family: var(--font-titles);
    font-size: 1.1rem;
    color: var(--champagne-gold);
    font-weight: 400;
    opacity: 0.9;
    margin-top: 0.8rem;
}

/* Presets: Minimal Grid */
.m2-presets-section {
    width: 100%;
    max-width: 540px;
    text-align: center;
}

.m2-presets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.m2-preset-chip {
    background: white;
    border: 1px solid rgba(11, 28, 46, 0.04);
    padding: 1.2rem 0.8rem;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01);
}

.m2-preset-chip i {
    font-size: 1.1rem;
    color: var(--balis-blue);
    opacity: 0.2;
    transition: all 0.3s ease;
}

.m2-preset-chip span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--balis-blue);
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.m2-preset-chip small {
    font-size: 0.7rem;
    color: var(--champagne-gold);
    font-family: var(--font-titles);
    font-weight: 500;
}

.m2-preset-chip:hover {
    border-color: var(--champagne-gold);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(11, 28, 46, 0.04);
}

.m2-preset-chip:active {
    transform: scale(0.95);
}

.m2-preset-chip.active {
    border-color: var(--champagne-gold);
    background: white;
    box-shadow: 0 12px 30px rgba(197, 160, 89, 0.12);
    transform: translateY(-3px);
}

.m2-preset-chip.active i {
    color: var(--champagne-gold);
    opacity: 1;
}

@media (max-width: 600px) {
    .m2-hero-input {
        font-size: 3.5rem;
        width: 140px;
    }

    .m2-input-hero {
        gap: 1.5rem;
    }

    .m2-presets-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- SKELETON LOADING SYSTEM --- */
.skeleton {
    background: linear-gradient(90deg, rgba(11, 28, 46, 0.03) 25%, rgba(11, 28, 46, 0.07) 37%, rgba(11, 28, 46, 0.03) 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.skeleton-title {
    width: 60%;
    height: 24px;
    margin: 0 auto 1.5rem;
}

.skeleton-subtitle {
    width: 40%;
    height: 14px;
    margin: 0 auto 3rem;
    opacity: 0.5;
}

.skeleton-hero {
    width: 100%;
    height: 180px;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.skeleton-row {
    width: 100%;
    height: 50px;
    margin-bottom: 0.8rem;
    border-radius: 4px;
}

.skeleton-btn {
    width: 100%;
    height: 55px;
    border-radius: 4px;
    margin-top: 2rem;
    opacity: 0.3;
}

/* --- VERIFIED BADGES --- */
.verified-badge {
    color: var(--balis-gold);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.55rem;
}

.verified-badge.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- REDESIGN: RADIO PILLS & LUXURY CONTROLS --- */
.radio-pill {
    background: white;
    border: 1.5px solid rgba(0, 0, 0, 0.05);
    border-radius: 40px;
    padding: 0.7rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.radio-pill:hover {
    border-color: var(--champagne-gold);
    transform: translateY(-1px);
}

.radio-pill.active {
    border-color: var(--champagne-gold);
    border-width: 1.5px;
    background: rgba(197, 160, 89, 0.04);
    box-shadow: 0 8px 25px rgba(197, 160, 89, 0.08);
}

.radio-pill .radio-circle {
    width: 16px;
    height: 16px;
    border: 1.5px solid #DDD;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.radio-pill.active .radio-circle {
    border-color: var(--champagne-gold);
    border-width: 2.5px;
    background: white;
}

.radio-pill.active .radio-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--champagne-gold);
    border-radius: 50%;
}

.radio-pill span {
    font-size: 0.85rem;
    color: #002B49;
    font-weight: 500;
}

.radio-pill.mini {
    padding: 0.5rem 1rem;
    flex: 1;
    justify-content: center;
}

.radio-pill.square {
    border-radius: 4px;
}

@keyframes togglePop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }

    100% {
        transform: scale(1);
    }
}

.check-box-luxury {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid #EEE;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.85rem;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.check-box-luxury i {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    transform: scale(0);
    opacity: 0;
}

#piso_vpo_check {
    width: 20px;
    height: 20px;
}

.check-box-luxury.checked {
    background: var(--champagne-gold) !important;
    border-color: var(--champagne-gold) !important;
    box-shadow: 0 4px 12px rgba(197, 160, 89, 0.25) !important;
    animation: togglePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.check-box-luxury.checked i {
    transform: scale(1);
    opacity: 1;
}

.no-number-card-luxury:hover .check-box-luxury,
.check-group:hover .check-box-luxury,
.check-box-luxury:hover {
    border-color: var(--champagne-gold) !important;
    transform: scale(1.08);
    background: rgba(197, 160, 89, 0.03);
}

.no-number-card-luxury:active,
.check-group:active,
.check-box-luxury:active {
    transform: scale(0.97);
}

/* Specialized Layout for Position Step */
#pane2piso.active,
#pane4piso.active,
#pane2casa.active,
#pane2villa.active,
#pane4casa.active,
#pane4villa.active {
    overflow-y: auto;
    padding-bottom: 1rem;
}

#pane4piso .check-box-luxury,
#pane4casa .check-box-luxury {
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#pane4piso .no-num-title,
#pane4casa .no-num-title {
    white-space: normal !important;
    line-height: 1.25 !important;
}

#pane1casa .step-content,
#pane2piso .step-content,
#pane5piso .step-content,
#pane2casa .step-content,
#pane2villa .step-content,
#pane5casa .step-content {
    justify-content: flex-start;
    padding-top: 1rem;
    flex: none;
}

#pane1villa .step-content {
    justify-content: center !important;
    padding-top: 1rem;
    flex: none;
}

/* pane4 step-content needs padding-top + flex:none but justify-content: center (from rule above) */
#pane4piso .step-content,
#pane4casa .step-content,
#pane4villa .step-content,
#pane4parcela .step-content {
    padding-top: 1rem;
    flex: none;
}

#pane1casa .step-content>div,
#pane1villa .step-content>div {
    max-width: 450px !important;
}

/* Allow Soil Classification guide (pane1parcela), Casa Tipology guide (pane1casa), and Villa Tipology guide (pane1villa) to take 100% panel width on desktop */
#pane1casa .step-content > .parcela-guide-container,
#pane1villa .step-content > .parcela-guide-container,
#pane1parcela .step-content > .parcela-guide-container {
    max-width: 100% !important;
}

/* Set the option cards in pane1casa and pane1parcela to 3 columns in a single row on desktop */
#pane1casa .step-content > .options-grid,
#pane1parcela .step-content > .options-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    max-width: 100% !important;
}

/* Center the 2-column options-grid in pane1villa horizontally on desktop */
#pane1villa .step-content > .options-grid {
    align-self: center !important;
    width: 100% !important;
}

#pane1casa .option-card,
#pane1villa .option-card,
#pane1parcela .option-card {
    min-height: 86px !important;
    padding: 0.8rem 1rem !important;
    gap: 0.6rem !important;
    border-radius: 18px !important;
}

#pane1casa .option-card i,
#pane1villa .option-card i,
#pane1parcela .option-card i {
    font-size: 1.5rem !important;
}

#pane1casa .option-card span,
#pane1villa .option-card span,
#pane1parcela .option-card span {
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}

@media (max-width: 768px) {

    #pane1casa .option-card,
    #pane1villa .option-card,
    #pane1parcela .option-card {
        min-height: 55px !important;
        height: auto !important;
        padding: 0.6rem 1rem !important;
        gap: 0.8rem !important;
        border-radius: 16px !important;
    }

    #pane1casa .option-card i,
    #pane1villa .option-card i,
    #pane1parcela .option-card i {
        font-size: 1.1rem !important;
    }

    #pane1casa .option-card span,
    #pane1villa .option-card span,
    #pane1parcela .option-card span {
        font-size: 1rem !important;
    }
}

#pane5piso h1,
#pane5piso .step-subtitle {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-bottom: 0.5rem;
    text-align: center;
}

#pane2piso .btn-advance,
#pane4piso .btn-advance,
#pane5piso .btn-advance {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 1rem !important;
    width: 100%;
}

.split-grid-position {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 1.2rem;
    margin-top: 0.4rem;
    margin-bottom: 0.5rem;
}

.visual-loc-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.radio-pill.vertical {
    width: 100%;
    justify-content: flex-start;
    padding-left: 1.2rem;
    border-radius: 4px;
}

.elevator-card-luxury {
    background: white;
    border: 1px solid rgba(11, 28, 46, 0.05);
    border-radius: 4px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    cursor: pointer;
    transition: var(--transition-std);
}

.elevator-card-luxury:hover {
    background: rgba(197, 160, 89, 0.02);
}

.elevator-card-luxury:active {
    transform: scale(0.97);
}

.elevator-card-luxury:hover .check-box-luxury {
    border-color: var(--champagne-gold) !important;
    transform: scale(1.08);
    background: rgba(197, 160, 89, 0.03);
}

.elevator-title {
    font-size: 0.85rem;
    color: var(--balis-blue);
    font-weight: 400;
    text-align: center;
    line-height: 1.3;
}

.no-number-card-luxury {
    background: white;
    border: none;
    border-radius: 4px;
    height: 55px;
    padding: 0 0.8rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
    cursor: pointer;
    transition: var(--transition-std);
}

.no-number-card-luxury:hover {
    background: rgba(197, 160, 89, 0.02);
}

.no-num-title {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--balis-blue);
    font-weight: 400;
    margin: 0;
    white-space: nowrap;
    user-select: none;
}

/* --- RESPONSIVE DESIGN (BALIS PREMIUM MOBILE) --- */
@media (max-width: 768px) {
    body {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 15px;
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
    }

    /* Fixed the master container mapping on mobile for absolute responsiveness */
    .master-container {
        width: 100%;
        height: 82vh !important;
        min-height: 480px !important;
        max-height: 580px !important;
        border-radius: 36px;
        margin: 15px auto;
        position: relative;
        padding: 2.2rem 1.2rem 1.6rem;
        box-shadow: 0 20px 50px rgba(11, 28, 46, 0.05);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden !important;
    }

    /* Allows full vertical flexibility when displaying grand final valuation report */
    .master-container.results-mode {
        height: auto !important;
        max-height: none !important;
        min-height: unset !important;
        overflow: visible !important;
    }

    .container-progress-bar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        height: 36px !important;
        background: linear-gradient(rgba(11, 28, 46, 0.03) 4px, transparent 4px) !important;
        border-top-left-radius: 36px !important;
        border-top-right-radius: 36px !important;
        z-index: 200 !important;
        overflow: hidden !important;
    }

    /* FIX: Strict Panel Isolation with internal scroll capability */
    .step-pane {
        display: none !important;
        opacity: 0;
        visibility: hidden;
        padding: 0.5rem 0.1rem 1.5rem !important;
        justify-content: flex-start !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: 100% !important;
        flex: 1 1 auto !important;
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .step-pane.active {
        display: flex !important;
        opacity: 1;
        visibility: visible;
    }

    /* Text Scaling */
    h1 {
        font-size: 1.55rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.4rem !important;
        text-align: center;
        line-height: 1.2;
    }

    .step-subtitle {
        font-size: 0.95rem !important;
        margin-bottom: 1.2rem !important;
        padding: 0 0.5rem;
        line-height: 1.45;
        opacity: 0.75;
        text-align: center;
    }

    /* Form & Labels Scaling */
    .input-label,
    label,
    .field-label,
    .label-mini {
        font-size: 0.85rem !important;
        letter-spacing: 0.05rem;
        margin-bottom: 0.6rem !important;
    }

    input,
    .form-control,
    select {
        font-size: 16px !important;
        padding: 0.8rem 1rem !important;
        height: auto !important;
    }

    .cp-result-item,
    .loc-result-item,
    .cp-results,
    .loc-results {
        font-size: 1rem !important;
        padding: 0.8rem 1rem !important;
        height: auto !important;
    }

    .container-header {
        height: auto !important;
        padding: 0.6rem 0.8rem 0.5rem 0.8rem !important;
        margin-bottom: 0.7rem !important;
    }

    .btn-back-minimal {
        font-size: 0.9rem !important;
    }

    .btn-back-minimal i {
        font-size: 0.95rem !important;
    }

    .container-step-counter {
        font-size: 0.85rem !important;
    }

    /* Buttons Scaling */
    .btn-advance {
        font-size: 1.05rem !important;
        padding: 1.1rem !important;
        letter-spacing: 0.05rem;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        margin-top: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .btn-back {
        font-size: 0.85rem !important;
    }

    .btn-back span {
        font-size: 0.85rem !important;
    }

    .step-counter {
        font-size: 0.95rem !important;
    }

    .step-content {
        margin-top: 0.2rem !important;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        flex: none;
    }

    #pane1casa .step-content>div,
    #pane1villa .step-content>div {
        max-width: 450px !important;
    }

    /* Option Cards Scaling */
    .options-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        width: 100%;
        margin-top: 0.5rem;
    }

    .options-grid>* {
        grid-column: auto !important;
    }

    .option-card {
        flex-direction: row !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 0.6rem 1rem !important;
        min-height: 55px !important;
        gap: 0.8rem !important;
        border-radius: 16px !important;
    }

    .option-card i {
        font-size: 1.1rem !important;
        width: 22px;
        margin: 0 !important;
    }

    .option-card span {
        font-size: 1rem !important;
        line-height: 1.2;
    }

    /* Pane 4: Dimensions Scaling */
    #pane4 .step-content {
        padding-top: 0.2rem !important;
        justify-content: flex-start !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .m2-hero-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
        width: 100%;
    }

    .m2-input-hero {
        margin-top: 0.5rem !important;
        margin-bottom: 1rem !important;
        gap: 0.4rem !important;
        justify-content: center !important;
    }

    .m2-hero-unit {
        font-size: 1.2rem !important;
    }

    .btn-stepper {
        width: 32px !important;
        height: 32px !important;
        font-size: 1.2rem !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        line-height: 1 !important;
        font-weight: 300 !important;
        font-family: inherit !important;
    }

    .btn-stepper .stepper-line.horizontal {
        width: 11px !important;
        height: 1.2px !important;
    }

    .btn-stepper .stepper-line.vertical {
        width: 1.2px !important;
        height: 11px !important;
    }

    #pane2piso .btn-stepper,
    #pane3piso .btn-stepper,
    #pane2casa .btn-stepper,
    #pane3casa .btn-stepper,
    #pane2villa .btn-stepper,
    #pane3villa .btn-stepper {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.9rem !important;
        border: 1px solid rgba(11, 28, 46, 0.1) !important;
        background: white !important;
        color: var(--balis-blue) !important;
        transition: var(--transition) !important;
        transform: none !important;
    }

    #pane2piso .btn-stepper:hover,
    #pane3piso .btn-stepper:hover,
    #pane2casa .btn-stepper:hover,
    #pane3casa .btn-stepper:hover,
    #pane2villa .btn-stepper:hover,
    #pane3villa .btn-stepper:hover {
        border-color: var(--champagne-gold) !important;
        background: rgba(212, 175, 55, 0.05) !important;
        color: var(--balis-blue) !important;
        transform: none !important;
    }

    .m2-presets-section {
        margin-top: 1.5rem !important;
    }

    .m2-presets-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.6rem !important;
        margin-top: 0.5rem !important;
    }

    .m2-preset-chip {
        padding: 0.8rem 1rem !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 0.7rem !important;
        text-align: left !important;
        min-height: auto !important;
    }

    .m2-preset-chip i {
        font-size: 1.1rem !important;
        width: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    .m2-preset-chip span {
        font-size: 1rem !important;
        display: block !important;
        margin: 0 !important;
    }

    .m2-preset-chip small {
        font-size: 0.95rem !important;
        margin-left: auto;
        opacity: 0.6;
    }

    .badge-container-m2 {
        margin-bottom: 0.6rem !important;
    }

    #pane4piso .option-card,
    #pane4casa .option-card,
    #pane4villa .option-card,
    #pane4parcela .option-card {
        min-height: 55px !important;
        padding: 0.8rem 1rem !important;
        border-radius: 12px !important;
    }

    #pane4piso .step-content,
    #pane4casa .step-content,
    #pane4villa .step-content,
    #pane4parcela .step-content {
        justify-content: flex-start !important;
    }

    #pane4piso .no-number-card-luxury,
    #pane4casa .no-number-card-luxury {
        margin-top: 0.5rem !important;
    }

    /* Steppers & Specific Cards (pane2piso, pane3piso) */
    .stepper-card {
        padding: 0.8rem 1rem !important;
        margin-bottom: 0.4rem !important;
        border-radius: 4px !important;
    }

    .stepper-info {
        gap: 0.8rem !important;
    }

    .stepper-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
    }

    .stepper-label {
        font-size: 1rem !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        color: var(--balis-blue) !important;
        font-weight: 500 !important;
    }

    .stepper-value {
        font-size: 1.15rem !important;
        font-weight: 600 !important;
        min-width: 1.2rem !important;
        text-align: center !important;
    }

    .parcela-m2-input {
        font-size: 1.15rem !important;
        font-weight: 600 !important;
        width: 58px !important;
        min-width: 0 !important;
        text-align: right !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        height: auto !important;
        outline: none !important;
    }

    .m2-input-container {
        gap: 2px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
    }

    .m2-input-container span {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        opacity: 0.6 !important;
        color: var(--balis-blue) !important;
        margin-left: 2px !important;
    }

    .stepper-controls {
        gap: 0.4rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    /* Distribution Step (pane3piso, pane3casa & pane3villa) */
    #insulation_estudio_row,
    #insulation_casa_row,
    #insulation_villa_row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.6rem !important;
        margin-top: 0.4rem !important;
        width: 100% !important;
    }

    #insulation_estudio_row .option-card,
    #insulation_casa_row .option-card,
    #insulation_villa_row .option-card {
        display: flex !important;
        flex-direction: row !important;
        padding: 0.8rem 0.8rem !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 12px !important;
        min-height: 50px !important;
        height: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Split Grid Position (pane2piso) */
    .split-grid-position {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
        margin-top: 0.2rem !important;
    }

    .visual-loc-stack {
        gap: 0.4rem !important;
    }

    .elevator-card-luxury {
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 1rem 1.2rem !important;
        border-radius: 4px !important;
        gap: 0 !important;
    }

    .no-number-card-luxury {
        padding: 0.8rem 1rem !important;
        border-radius: 4px !important;
        height: auto !important;
        gap: 0.7rem !important;
        border: none !important;
    }

    .elevator-title {
        font-size: 0.9rem !important;
        text-align: left !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        margin: 0 !important;
    }

    .no-num-title {
        font-size: 0.95rem !important;
        text-align: left !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        margin: 0 !important;
        white-space: normal !important;
        font-weight: 500 !important;
    }

    .check-box-luxury {
        width: 18px !important;
        height: 18px !important;
        border-radius: 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .check-box-luxury i {
        font-size: 12px !important;
    }

    .radio-pill.vertical {
        padding: 0.6rem 1rem !important;
        border-radius: 4px !important;
    }

    .radio-pill span {
        font-size: 0.95rem !important;
    }

    .orientation-section .label-mini {
        margin-bottom: 0.4rem !important;
    }

    /* Navigation Fixes */
    .btn-advance span {
        grid-column: 2 !important;
        white-space: nowrap !important;
    }

    .btn-advance i {
        grid-column: 3 !important;
        justify-self: start !important;
        margin-left: 0.8rem !important;
    }

    #pane2piso .btn-advance,
    #pane4piso .btn-advance,
    #pane5piso .btn-advance,
    #pane2casa .btn-advance,
    #pane2villa .btn-advance,
    #pane4casa .btn-advance,
    #pane4villa .btn-advance,
    #pane5casa .btn-advance,
    #pane7 .btn-advance,
    #pane8 .btn-advance,
    #resultView .btn-advance {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* Extras Grid & Details */
    .extras-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .extra-details-box {
        flex-direction: column !important;
        padding: 1.2rem !important;
        gap: 0.8rem !important;
        align-items: center !important;
        text-align: center !important;
    }

    .extra-details-box .label-mini {
        margin-bottom: 0 !important;
    }

    /* Final Lead Form */
    .lead-form-box {
        padding: 1.5rem 1.2rem !important;
        gap: 1rem !important;
    }

    #pane8 h2 {
        font-size: 1.1rem !important;
        margin-top: 0 !important;
    }

    #pane8 .step-subtitle {
        padding: 0 !important;
    }

    /* Result View Refinement */
    #resultView {
        padding: 3rem 1rem !important;
    }

    #priceDisplay {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        gap: 0.5rem !important;
        margin: 0 auto !important;
        padding: 0 !important;
        height: auto !important;
        line-height: 1 !important;
    }

    #priceDisplay span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        font-size: 18px !important;
    }

    .valuation-detail-row {
        padding: 1rem 1.2rem !important;
        font-size: 0.75rem !important;
    }

    #resultView h1 {
        font-size: 1.4rem !important;
    }

    /* Language Selector */
    .lang-selector {
        top: 0.8rem !important;
        right: 0.8rem !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        font-size: 0.7rem !important;
    }

    /* Reducir márgenes en Pane 2 para móviles */
    #pane2 .step-content>.row,
    #pane2 .step-content>.input-group {
        margin-bottom: 0.2rem !important;
    }

    /* Ajustes específicos para Pane 4 en móviles: Juntar botón Continuar al contenido */
    #pane4 {
        height: auto !important;
        min-height: auto !important;
    }

    #pane4 .m2-hero-container {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    #pane4 .m2-presets-section {
        margin-top: 0.5rem !important;
    }

    #pane4 .m2-presets-grid {
        margin-top: 0.2rem !important;
    }

    #pane4 .btn-advance {
        margin-top: 0.4rem !important;
        margin-bottom: 0.4rem !important;
    }

    /* Ajustes específicos para el Row 3 (Nº / Sin número) de Pane 2 en móviles */
    #numRow {
        grid-template-columns: 1fr 1.4fr !important;
    }

    /* Disminuir tipografía y compactar inputs/resultados del Pane 2 en móviles */
    #pane2 input,
    #pane2 .form-control {
        font-size: 16px !important;
        padding: 0.7rem 0.8rem !important;
    }

    #pane2 .loc-result-item,
    #pane2 .st-result-item,
    #pane2 .cp-result-item {
        font-size: 1rem !important;
        padding: 0.8rem 1rem !important;
    }

    /* Analyzing View Mobile Optimization */
    #analyzing {
        padding: 1.5rem 1.2rem !important;
    }

    #analyzing .skeleton-title {
        height: 16px !important;
        margin-bottom: 1rem !important;
    }

    #analyzing .skeleton-subtitle {
        height: 10px !important;
        margin-bottom: 1.5rem !important;
    }

    #analyzing .skeleton-hero {
        height: 110px !important;
        margin-bottom: 1rem !important;
    }

    #analyzing .skeleton-row {
        height: 25px !important;
        margin-bottom: 0.5rem !important;
    }

    #analyzing #loadingText {
        margin-top: 1.2rem !important;
        font-size: 0.65rem !important;
    }

    #analyzing .skeleton-btn {
        height: 40px !important;
        margin-top: 1rem !important;
    }

    /* Result View Mobile Optimization */
    #resultView img {
        width: 100px !important;
        margin: 1rem auto 0.5rem !important;
    }

    #resultView p[data-i18n="results_subtitle"] {
        margin-bottom: 1.5rem !important;
    }

    #resultView div[style*="background: white; border-radius: 30px"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1.2rem 1rem !important;
        margin-bottom: 1.5rem !important;
        border-radius: 20px !important;
        min-height: 70px !important;
    }

    .valuation-breakdown-wrapper {
        max-width: 100% !important;
        margin: 0 0 0.5rem 0 !important;
        width: 100% !important;
    }

    #resultView div[style*="margin: 2rem auto"] {
        margin: 1rem auto 2rem auto !important;
    }

    #valuationBreakdown {
        border-radius: 20px !important;
        background: rgba(11, 28, 46, 0.01) !important;
        border: 1px solid rgba(11, 28, 46, 0.04) !important;
        padding: 0.2rem 0 !important;
    }

    #valuationBreakdown .valuation-detail-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 1rem 1.4rem !important;
        border-bottom: 1px solid rgba(11, 28, 46, 0.04) !important;
        gap: 0.3rem !important;
    }

    #valuationBreakdown .valuation-detail-row:last-child {
        border-bottom: none !important;
    }

    #valuationBreakdown .valuation-detail-row span:first-child {
        font-size: 0.62rem !important;
        color: rgba(11, 28, 46, 0.42) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em;
        font-weight: 600 !important;
        display: block !important;
    }

    #valuationBreakdown .valuation-detail-row span:last-child {
        font-size: 0.82rem !important;
        color: var(--balis-blue) !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
        word-break: break-word !important;
        text-align: left !important;
        display: block !important;
        opacity: 0.9 !important;
    }

    #valuationBreakdown .valuation-detail-row #label_yield {
        font-size: 1.2rem !important;
        color: var(--balis-gold) !important;
        font-family: var(--font-titles) !important;
        font-weight: 700 !important;
        display: block !important;
    }

    #resultView div[style*="max-width: 320px"] {
        margin: 1.5rem auto !important;
    }

    #resultView .btn-advance {
        height: 45px !important;
        border-radius: 12px !important;
    }

    #resultView #label_disclaimer {
        margin-bottom: 2rem !important;
    }

    /* Pane 5 Parcela mobile margin optimizations */
    #pane5parcela #btn_afecciones_trigger_wrapper,
    #pane5parcela .parcela-guide-container,
    #pane5parcela #parcela_help_text,
    #pane5parcela #parcela_details_proyecto,
    #pane5parcela #parcela_details_afecciones {
        margin-bottom: 0.75rem !important;
    }
}


@media (max-width: 440px) {
    .master-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 82vh !important;
        min-height: 480px !important;
        max-height: 580px !important;
        padding: 2.2rem 1rem 1.4rem !important;
        border-radius: 28px !important;
        margin: 10px auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .master-container.results-mode {
        height: auto !important;
        max-height: none !important;
        min-height: unset !important;
        overflow: visible !important;
    }

    .container-progress-bar {
        border-top-left-radius: 28px !important;
        border-top-right-radius: 28px !important;
    }

    /* Step Pane adjustments for screen breathing room */
    .step-pane {
        padding: 0.5rem 0.1rem 1.5rem !important;
        width: 100% !important;
        height: 100% !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    /* Force all flex-rows and multi-column input rows to stack vertically */
    .row,
    div[style*="display: flex; gap: 1rem"],
    #numRow {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    /* Reset CP field to full width when stacked */
    .input-group[style*="width: 130px"] {
        width: 100% !important;
        flex: none !important;
    }

    /* Globally override any fixed/flex inline multi-column styles on options grids to stack single-column */
    .options-grid,
    div[style*="grid-template-columns"],
    div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
    }

    /* Shrink the size of icons in stacked buttons to stay extremely elegant */
    .option-card.mini {
        padding: 0.7rem 1rem !important;
        min-height: 48px !important;
        font-size: 0.95rem !important;
    }

    /* Stack dimensions suggestions grid (SUGERENCIAS RÁPIDAS) to single column */
    .m2-presets-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .m2-preset-chip {
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 0.8rem 1rem !important;
        min-height: 48px !important;
        gap: 0.7rem !important;
        width: 100% !important;
    }

    .m2-preset-chip i {
        font-size: 1.1rem !important;
        width: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    .m2-preset-chip span {
        font-size: 0.9rem !important;
        margin: 0 !important;
    }

    .m2-preset-chip small {
        font-size: 0.95rem !important;
        margin-left: auto !important;
    }

    /* Price display inside Result View: allow wrapping and scale typography elegantly */
    #priceDisplay {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        text-align: center !important;
        gap: 0.3rem !important;
        font-size: 18px !important;
        padding: 0 !important;
        margin: 0 auto !important;
        line-height: 1 !important;
    }

    #priceDisplay span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        font-size: 18px !important;
    }

    /* Valuation summary row: stack label and value vertically on extremely small screens */
    .valuation-detail-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.2rem !important;
        padding: 0.9rem 1.1rem !important;
    }

    .valuation-detail-row span:last-child {
        text-align: left !important;
        width: 100% !important;
        font-size: 0.85rem !important;
        padding-left: 0 !important;
        display: block !important;
    }

    /* Shrink form headers for high density readability */
    h1 {
        font-size: 1.35rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.3rem !important;
        line-height: 1.3 !important;
    }

    .step-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.8rem !important;
    }

    .form-control,
    input,
    select {
        font-size: 16px !important;
        height: 45px !important;
    }

    .btn-advance {
        height: 52px !important;
        font-size: 1.05rem !important;
    }
}

/* Ajustes elegantes y compactación para el Pane 4 en Desktop (para evitar desbordar el master-container de 560px) */
@media (min-width: 769px) {
    #pane4 .m2-hero-container {
        padding: 0.5rem 0 !important;
        margin-top: 0 !important;
    }

    #pane4 .badge-container-m2 {
        margin-bottom: 0.4rem !important;
    }

    #pane4 .m2-input-hero {
        margin-bottom: 0.6rem !important;
    }

    #pane4 .m2-presets-section {
        margin-top: 0.4rem !important;
    }

    #pane4 .m2-presets-section .label-mini {
        margin-bottom: 0.5rem !important;
    }

    #pane4 .m2-presets-grid {
        margin-top: 0.4rem !important;
        margin-bottom: 0.8rem !important;
    }

    #pane4 .btn-advance {
        margin-top: 0.5rem !important;
    }
}

/* Parcela M2 Input Premium Styling */
.parcela-m2-input {
    border: none !important;
    background: transparent !important;
    text-align: right !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--balis-blue) !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: unset !important;
    box-shadow: none !important;
    width: 34px !important;
    min-width: 0 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.parcela-m2-input::-webkit-outer-spin-button,
.parcela-m2-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ============================================================================
   PREVENCIÓN ABSOLUTA DE ZOOM AUTOMÁTICO EN DISPOSITIVOS MÓVILES (iOS / SAFARI)
   Establece un tamaño mínimo de fuente de 16px para todos los campos de formulario,
   evitando que el navegador haga un zoom no deseado al enfocar o escribir.
   ============================================================================ */
@media (max-width: 768px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    select,
    textarea,
    .form-control {
        font-size: 16px !important;
    }
}

/* ============================================================================
   PREMIUM PRICE DISPLAY STYLING (ARMONÍA MEDITERRÁNEA - DESKTOP ELEVATION)
   ============================================================================ */
.price-container-luxury {
    background: white;
    border-radius: 30px;
    padding: 3rem 1.2rem;
    margin-bottom: 3rem;
    box-shadow: 0 20px 40px rgba(11, 28, 46, 0.05);
    border: 1px solid rgba(11, 28, 46, 0.03);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 769px) {
    .price-container-luxury {
        padding: 4.5rem 3.5rem !important;
        border-radius: 40px !important;
        border: 1px solid rgba(197, 160, 89, 0.18) !important;
        background: linear-gradient(180deg, #ffffff 0%, rgba(197, 160, 89, 0.015) 100%) !important;
        box-shadow: 0 25px 60px rgba(11, 28, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    }

    #priceDisplay {
        font-size: clamp(1.8rem, 4.5vw, 3.6rem) !important;
        font-weight: 400 !important;
        letter-spacing: -0.02em !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        gap: 0.5rem !important;
    }

    #priceDisplay span {
        font-size: inherit !important;
        font-weight: inherit !important;
        letter-spacing: inherit !important;
        display: inline-block !important;
    }

    #priceDisplay .price-dash {
        font-size: clamp(1.4rem, 4vw, 2.8rem) !important;
        color: rgba(197, 160, 89, 0.25) !important;
        font-family: var(--font-body) !important;
        font-weight: 300 !important;
        margin: 0 0.8rem !important;
    }
}