/* General Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Habilita smooth scroll nativo para anclas, aunque JS lo refina */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333333;
    background-color: #F8F9FA;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
}

.site-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-x: hidden;
}

.container {
    background-color: #FFFFFF;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 700px;
    margin: 15px auto;
    position: relative;
    /* Ensure stacking context */
}

header {
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #EAEFF4;
}

header h1 {
    color: #2C3E50;
    font-size: 1.6em;
    font-weight: 600;
    margin-bottom: 8px;
}

header p {
    font-size: 1em;
    color: #555555;
}

/* Form Styles */
.form-group {
    margin-bottom: 14px;
    /* Increased from 22px for better separation */
    position: relative;
    /* For password toggle positioning */
}

.form-group label {
    display: block;
    font-weight: 600;
    /* Increased weight */
    margin-bottom: 6px;
    /* Reduced from 8px for better proximity */
    font-size: 0.95em;
    color: #495057;
}

/* --- MODIFICADO/AÑADIDO --- */
/* Estilos base GENERALIZADOS para todos los inputs de texto y select */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select {
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 10px 15px;
    border: 1px solid #767676;
    /* Darker border for better contrast (WCAG) */
    border-radius: 6px;
    font-size: 1em;
    background-color: #FFFFFF;
    color: #333333;
    /* Asegurar color de texto consistente */
    line-height: 1.5;
    /* Altura de línea consistente */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    -webkit-appearance: none;
    /* Quitar apariencia por defecto en algunos navegadores */
    -moz-appearance: none;
    appearance: none;
}

/* Modal Open State */
body.modal-open {
    overflow: hidden;
    /* Prevent background scrolling */
}

/* Close Button Styles */
.close-button {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
    padding: 0;
    z-index: 10;
}

.close-button:hover,
.close-button:focus {
    color: #333;
    outline: none;
}

.login-form-container {
    position: relative;
    /* Ensure close button is positioned relative to this container */
}


/* --- MODIFICADO/AÑADIDO --- */
/* Placeholder styling generalizado */
.form-group input::placeholder {
    /* Aplica a todos los inputs con placeholder */
    color: #A0AEC0;
    opacity: 1;
}

/* --- MODIFICADO/AÑADIDO --- */
/* Estilo de foco GENERALIZADO para todos los inputs y selects */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="number"]:focus,
.form-group select:focus {
    border-color: #4A90E2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
    outline: none;
}

/* Estilos específicos para <select> (flecha personalizada) */
.form-group select {
    /* appearance, -webkit-appearance, -moz-appearance ya están arriba */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234A90E2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px 10px;
    padding-right: 40px;
}

.addons-section {
    border: 1px solid #EAEFF4;
    border-radius: 8px;
    padding: 20px;
    margin-top: 25px;
    margin-bottom: 25px;
}

.addons-section legend {
    font-weight: 600;
    padding: 0 10px;
    font-size: 1.1em;
    color: #2C3E50;
}

.addon-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.addon-checkbox:hover {
    background-color: #F7F9FC;
}

.addon-checkbox input[type="checkbox"] {
    margin-right: 12px;
    width: 20px;
    height: 20px;
    accent-color: #4A90E2;
    cursor: pointer;
}

.addon-checkbox label {
    margin-bottom: 0;
    font-weight: normal;
    font-size: 0.95em;
    color: #333333;
    cursor: pointer;
}

.cta-button {
    display: block;
    width: 100%;
    background-color: #4A90E2;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.35);
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: #357ABD;
    transform: translateY(-1px);
}

.cta-button:active {
    transform: translateY(0px);
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
}





.price-display {
    font-size: 2em;
    font-weight: 700;
    color: #4A90E2;
    margin-bottom: 18px;
    letter-spacing: -0.5px;
}

.disclaimer {
    font-size: 0.85em;
    color: #555555;
    text-align: justify;
    line-height: 1.5;
}

/* Loader Animation */
.loader {
    border: 5px solid #EAEFF4;
    border-top: 5px solid #4A90E2;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    animation: spin 0.8s linear infinite;
    margin: 25px auto;
}

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

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

/* Utility Classes */
.hidden {
    display: none !important;
}

/* --- ESTILOS BARRA DE NAVEGACIÓN --- */
.navbar {
    background-color: #FFFFFF;
    padding: 10px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;

    /* --- HERO SECTION STYLES --- */
}

.hero-section {
    position: relative;
    width: 100%;
    height: 500px;
    background-image: url('https://images.unsplash.com/photo-1577587230708-187fdbef4d91?q=80&w=871');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: -60px;
    /* Pull up behind navbar if navbar is transparent, or just normally */
    padding-top: 60px;
    /* Compensate */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Darker overlay for better text contrast */
    background: linear-gradient(135deg, rgba(25, 35, 45, 0.92), rgba(45, 85, 155, 0.88));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 20px;
}

.hero-content h1 {
    font-size: 3em;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

.hero-subtitle {
    font-size: 1.25em;
    margin-bottom: 30px;
    opacity: 0.9;
    font-weight: 300;
}

.hero-price {
    font-size: 4em;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    margin: 20px 0;
}

.hero-price .unit {
    font-size: 0.4em;
    font-weight: 400;
    opacity: 0.8;
}

.hero-disclaimer {
    font-size: 0.85em;
    opacity: 0.7;
    margin-top: 10px;
}

/* Overlap Calculator */
#calculator-section {
    margin-top: -100px;
    /* Negative margin to overlap hero */
    z-index: 10;
    position: relative;
}

.navbar {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

/* --- ESTILOS BARRA DE NAVEGACIÓN --- */
.navbar {
    /* Keep original structure but ensure it sits well */
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.nav-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    font-size: 1.5em;
    font-weight: 700;
    color: #4A90E2;
    text-decoration: none;
}

.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    margin-left: 25px;
    position: relative;
    /* Needed for dropdown positioning */
}

/* DROPDOWN STYLES */
.dropdown .nav-link i {
    font-size: 0.8em;
    margin-left: 5px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 600px;
    /* Wider for columns */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    /* Softer shadow */
    z-index: 1000;
    border-radius: 12px;
    padding: 20px;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    margin-top: 15px;

    /* Grid System */
    display: none;
    /* Reset to be toggled on hover */
    grid-template-columns: repeat(3, 1fr);
    /* 3 Columns */
    gap: 12px 25px;
    /* Improved spacing */
    margin-top: 15px;

    /* Aesthetics */
    list-style: none !important;
    /* Force remove bullets */
    border: 1px solid rgba(0, 0, 0, 0.04);

    max-height: 60vh;
    /* Viewport based height */
    overflow-y: auto;

    /* Scrollbar Styling */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f1f5f9;
}

/* Custom Scrollbar for Webkit */
.dropdown-content::-webkit-scrollbar {
    width: 6px;
}

.dropdown-content::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.dropdown-content::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 4px;
}

/* Invisible bridge so mouse doesn't leave hover area */
.dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10px;
}

.dropdown-content li {
    margin: 0;
    width: 100%;
    text-align: left;
}

.dropdown-content li a {
    color: #4a5568;
    /* Softer dark gray */
    padding: 10px 14px;
    text-decoration: none;
    display: flex;
    /* alignment */
    align-items: center;
    font-size: 0.95em;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.dropdown-content li a:hover {
    background-color: #ebf8ff;
    /* Light blue tint */
    color: #3182ce;
    /* Primary blue */
    transform: translateX(3px);
    /* Subtle nudge */
    box-shadow: 0 2px 5px rgba(66, 153, 225, 0.1);
}

/* Add a tiny dot on hover to indicate selection */
.dropdown-content li a:hover::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background-color: #3182ce;
    border-radius: 50%;
    margin-right: 8px;
    animation: popIn 0.2s;
}

@keyframes popIn {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/* Show on hover */
/* Show on hover with Grid */
.dropdown:hover .dropdown-content {
    display: grid;
    animation: fadeInDropdown 0.2s ease-out;
}

@keyframes fadeInDropdown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.nav-link {
    text-decoration: none;
    color: #333333;
    font-weight: 500;
    font-size: 0.95em;
    padding: 8px 0px;
    position: relative;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #4A90E2;
    transition: width 0.3s ease;
}

.nav-link:hover,
.nav-link:focus {
    color: #4A90E2;
}

.nav-link:hover::after,
.nav-link:focus::after {
    width: 100%;
}

/* --- ESTILOS MENÚ HAMBURGUESA (Mobile First) --- */
.nav-toggle-checkbox {
    display: none;
}

.nav-toggle-label {
    display: none;
    cursor: pointer;
    padding: 5px;
}

.nav-toggle-label span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333333;
    margin: 5px 0;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* --- ESTILOS NUEVAS SECCIONES DE CONTENIDO --- */
.content-sections-wrapper {
    padding-top: 0;
    flex-grow: 1;
}

.content-section {
    padding: 40px 0;
}

.content-section.light-bg {
    background-color: #F7F9FC;
    border-top: 1px solid #EAEFF4;
    border-bottom: 1px solid #EAEFF4;
}

.content-section h2 {
    text-align: center;
    font-size: 1.8em;
    color: #2C3E50;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

.content-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #4A90E2;
    border-radius: 2px;
}

.content-section p,
.content-section ul,
.content-section ol {
    font-size: 1.05em;
    color: #444444;
    line-height: 1.7;
    margin-bottom: 18px;
}

.content-section ul,
.content-section ol {
    padding-left: 25px;
}

.content-section ul li,
.content-section ol li {
    margin-bottom: 10px;
}

.container-sm {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    background: transparent !important;
    /* Ensure no white box */
}

.scroll-to-calculator {
    display: block;
    /* Allows margin auto to work */
    width: fit-content;
    /* Only take needed width */
    margin: 20px auto;
    /* Center horizontally */
    padding: 12px 40px;
    /* Hereda estilos de .cta-button así que no necesita más */
}

/* Footer */
footer {
    text-align: center;
    width: 100%;
    padding: 25px 20px;
    border-top: 1px solid #EAEFF4;
    font-size: 0.9em;
    color: #777777;
    background-color: #FFFFFF;
    margin-top: auto;
}

/* --- ESTILOS PARA EL FLUJO MULTI-PASO --- */
.calculator-step {
    display: none;
    width: 100%;
}

.calculator-step.active-step {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-display-section {
    margin-top: 20px;
    padding: 20px;
    background-color: #EBF4FF;
    border: 1px solid #BADDFF;
    border-radius: 8px;
    text-align: center;
}

.result-display-section,
.calculator-form {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* --- MODIFICADO/AÑADIDO --- */
/* Estilo para los títulos H2 de .result-display-section y H3 de .calculator-step */
.result-display-section h2,
.calculator-step h3 {
    font-size: 1.6em;
    font-weight: 600;
    color: #357ABD;
    margin-bottom: 20px;
    text-align: center;
}

.calculator-step h3 {
    margin-top: 10px;
    /* Espacio superior para títulos de pasos internos como "Paso 2: Añade detalles" */
    /* Si los H3 dentro de .calculator-form (que está dentro de .calculator-step) se ven muy grandes, 
        puedes hacer un selector más específico:
        .calculator-step > .calculator-form > h3 { ... }
     */
}

.incentive-message,
.confirmation-message {
    font-size: 1em;
    color: #333;
    margin: 15px 0;
    line-height: 1.5;
}

.secondary-button {
    display: inline-block;
    background-color: #6c757d;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
    margin-top: 10px;
    margin-left: 5px;
}

.secondary-button:hover {
    background-color: #5a6268;
}



.cta-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.quick-calc-placeholder-column {
    display: none;
}

/* --- Responsive adjustments --- */

/* Estilos para Desktop que incluyen layout de 2 columnas y compactación */
@media (min-width: 992px) {
    .container#calculator-section {
        max-width: 960px;
    }

    .calculator-form .form-columns-wrapper {
        display: flex;
        gap: 30px;
        margin-bottom: 20px;
    }

    .calculator-form .form-column {
        flex: 1;
        min-width: 0;
    }

    .calculator-form .form-column .form-group {
        margin-bottom: 14px;
    }

    .calculator-form .form-column .form-group label {
        font-size: 0.9em;
        margin-bottom: 6px;
    }

    /* --- MODIFICADO/AÑADIDO --- */
    /* Estilos compactos GENERALIZADOS para inputs y selects en columnas de desktop */
    .calculator-form .form-column .form-group input[type="text"],
    .calculator-form .form-column .form-group input[type="email"],
    .calculator-form .form-column .form-group input[type="tel"],
    .calculator-form .form-column .form-group input[type="password"],
    .calculator-form .form-column .form-group input[type="number"],
    .calculator-form .form-column .form-group select {
        padding: 10px 12px;
        font-size: 0.95em;
        margin-left: 0;
        margin-right: 0;
    }


    .calculator-form .form-column .form-group select {
        padding-right: 35px;
        background-size: 9px 9px;
    }

    .calculator-form .addons-column .addons-section {
        margin-top: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .calculator-form .addons-column .addons-section legend {
        font-size: 1.05em;
    }

    /* Botón Calcular en Paso 1, y Siguiente en Paso 3, cuando están después de columnas */
    /* Asumimos que estos botones son hijos directos de .calculator-form */
    .calculator-form>.cta-button#btnQuickCalc,
    .calculator-form>.cta-button#btnGoToRegistration {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    /* --- AÑADIDO --- */
    /* Layout de dos columnas para el formulario de registro en Desktop */
    .calculator-form.registration-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 30px;
        /* Espacio horizontal entre columnas, sin espacio vertical para las filas de la grid */
        align-items: start;
        /* Alinea los items al inicio de su celda en la grid */
    }

    /* El input de nombre de propiedad en el paso 3 (que es una sola columna por ahora) */
    /* Si quieres que este input también sea más compacto en desktop: */



    /* Para que el checkbox de términos y el botón final en el formulario de registro ocupen ambas columnas */
    .registration-form .form-group.addon-checkbox,
    /* Asegúrate que el div del checkbox de términos tenga estas clases */
    .registration-form>.cta-button#btnFinalizeAndCalc {
        /* El botón que es hijo directo de .registration-form */
        grid-column: 1 / -1;
        /* Ocupa desde la primera hasta la última línea de la grid */
    }

    .registration-form .form-group.addon-checkbox {
        margin-top: 15px;
        margin-bottom: 15px;
    }


    .quick-calc-placeholder-column {
        display: block;
        flex: 1;
        min-width: 0;
        padding: 15px;
    }

    /* Ajustes al header de la calculadora para que sea más compacto */
    #calculator-section header {
        margin-bottom: 25px;
        padding-bottom: 15px;
    }

    #calculator-section header h1 {
        font-size: 2em;
    }

    #calculator-section header p {
        font-size: 1em;
    }
}


@media (max-width: 768px) {

    /* Fix for Calculator Overlap on Mobile - Remove negative margin completely so it sits below */
    #calculator-section {
        margin-top: 0;
    }

    .container {
        padding: 20px 16px;
        margin: 0;
        /* Fix for "Blue Vignette" - Full width on mobile, no gaps */
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        /* Remove rounded corners to look like a full section */
        box-shadow: none;
        /* Optional: remove shadow for flat look */
        border-bottom: 1px solid #EAEFF4;
    }

    .nav-container {
        padding: 0 15px;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 56px;
        left: 0;
        width: 100%;
        background-color: #FFFFFF;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        padding: 10px 0;
        border-top: 1px solid #EAEFF4;
    }

    .nav-toggle-checkbox:checked~.nav-menu {
        display: flex;
    }

    .nav-menu li {
        margin: 0;
        width: 100%;
        text-align: center;
    }

    .nav-link {
        display: block;
        padding: 12px 20px;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .nav-link:last-child {
        border-bottom: none;
    }

    .nav-link::after {
        display: none;
    }

    .nav-link:hover,
    .nav-link:focus {
        background-color: #f7f9fc;
    }

    .nav-toggle-label {
        display: block;
    }

    .nav-toggle-checkbox:checked~.nav-toggle-label span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle-checkbox:checked~.nav-toggle-label span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle-checkbox:checked~.nav-toggle-label span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .content-section h2 {
        font-size: 1.6em;
    }

    .content-section p,
    .content-section ul,
    .content-section ol {
        font-size: 1em;
    }

    .container-sm {
        padding: 0 15px;
    }

    .price-display {
        font-size: 1.6em;
    }

    .cta-button,
    .scroll-to-calculator {
        padding: 12px 15px;
        font-size: 1em;
    }

    .form-group select {
        background-size: 9px 9px;
        padding-right: 35px;
    }

    .result-display-section .cta-button,
    .result-display-section .secondary-button {

        width: 100%;
        /* margin-left: 0; */
        /* Quitar el margen izquierdo del secondary-button si se apilan */

    }
}

@media (max-width: 480px) {
    body {
        padding: 0;
    }

    .container {
        margin: 0 !important;
        padding: 20px 16px;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid #EAEFF4;
    }

    .nav-container {
        padding: 0 10px;
    }

    #calculator-section header h1 {
        /* Ajuste específico para el H1 de la calculadora en móviles muy pequeños */
        font-size: 1.6em;
        /* Más compacto */
    }

    #calculator-section header p {
        font-size: 0.9em;
    }
}

/* --- ESTILOS PARA VALIDACIÓN DE FORMULARIO --- */
.form-group input.input-error,
.form-group select.input-error {
    border-color: #E74C3C;
    /* Rojo para el borde del input con error */
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
    /* Sombra roja suave */
}

.error-message {
    display: block;
    /* Para que ocupe su propia línea */
    color: #E74C3C;
    /* Color de texto rojo para el error */
    font-size: 0.85em;
    /* Tamaño de fuente pequeño */
    margin-top: 5px;
    /* Espacio respecto al input */
    min-height: 1.2em;
    /* Para evitar saltos de layout si el mensaje aparece/desaparece */
}

/* Ocultar el error-message por defecto si no tiene texto (lo haremos con JS) */
.error-message:empty {
    display: none;
}

/* --- ESTILOS PARA LA SECCIÓN DE LOGIN --- */
/* --- ESTILOS PARA LA SECCIÓN DE LOGIN --- */
.login-section-container {
    position: fixed;
    /* Se superpone al contenido */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* Fondo semitransparente oscuro */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Fix viewport clipping by starting from top */
    z-index: 2000;
    /* Asegurar que esté por encima de la navbar */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    /* Scroll support */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 40px 20px;
    /* Top padding to visually center-ish but allow scroll */
}

.login-section-container.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
    pointer-events: auto;
    /* Enable interaction when visible */
}

/* El .container dentro de la sección de login */
.login-form-container {
    position: relative;
    /* Para posicionar el botón de cierre */
    background-color: #FFFFFF;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    width: 100%;
    margin: auto;
    /* Auto margin helps with scroll bar centering if content overflows */
    max-height: 90vh;
    /* Prevent modal from growing taller than screen */
    overflow-y: auto;
    /* Enable internal scrolling if content is too tall */
    -webkit-overflow-scrolling: touch;
    max-width: 450px;
    /* Ancho máximo para el modal de login */
    margin: 20px;
    /* Margen para que no pegue a los bordes en pantallas pequeñas */
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.login-section-container.visible .login-form-container {
    transform: scale(1);
}


.login-form-container h2 {
    text-align: center;
    color: #2C3E50;
    font-size: 1.8em;
    margin-bottom: 25px;
}

/* Botón de cerrar (X) para el modal/sección de login */
.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2.5em;
    /* Tamaño grande para la 'X' */
    color: #888;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
}

.close-button:hover {
    color: #333;
}

/* Estilos para los enlaces dentro del formulario de login/registro */
.form-link-text {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9em;
}

.form-link-text a {
    color: #4A90E2;
    text-decoration: none;
    font-weight: 500;
}

.form-link-text a:hover {
    text-decoration: underline;
}

/* Ajustes para el formulario de login si reutiliza .calculator-form */
/* Si .calculator-form tiene un layout de 2 columnas en desktop,
   queremos que el login sea siempre 1 columna. */
#loginForm.calculator-form .form-columns-wrapper {
    display: block;
    /* Anular flex si viene de .calculator-form */
}

#loginForm.calculator-form .form-column {
    flex: none;
    /* Anular flex-grow si viene de .calculator-form */
    width: 100%;
}

/* Asegurar que los campos de login no sean afectados por estilos de columnas de desktop */
@media (min-width: 992px) {

    #loginForm.calculator-form .form-group input[type="email"],
    #loginForm.calculator-form .form-group input[type="password"] {
        max-width: none;
        /* Permitir que usen el ancho completo del .login-form-container */
        /* Otros estilos compactos de .form-column no deberían aplicar aquí si no están en columnas */
    }

    #loginForm.calculator-form .cta-button {
        max-width: 100%;
        /* El botón de login puede ocupar todo el ancho */
    }
}

/* Ajustes para el enlace de "Iniciar Sesión" en la navbar si el usuario está logueado */
/* (Esto es más para el futuro, cuando manejemos el estado de sesión) */
/*
.nav-menu #auth-link-item .nav-link.user-loggedin {
    color: #28a745; // Un color diferente, por ejemplo
    font-weight: 600;
}
*/

/* --- CURRENCY TOGGLE STYLES --- */
.currency-toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.toggle-label {
    font-weight: 600;
    color: #4A90E2;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #4A90E2;
}

input:focus+.slider {
    box-shadow: 0 0 1px #4A90E2;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* --- SEO Comparative Table Styles --- */
.table-responsive {
    overflow-x: auto;
    margin-top: 20px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.comparison-table th,
.comparison-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #EAEFF4;
}

.comparison-table th {
    background-color: #F7F9FC;
    color: #2C3E50;
    font-weight: 600;
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

.comparison-table tr.highlight-row {
    background-color: #EBF4FF;
    /* Light Blue highlight for current */
    border-left: 4px solid #4A90E2;
}

.more-expensive {
    color: #E74C3C;
    /* Red */
    font-weight: 500;
}

.cheaper {
    color: #27AE60;
    /* Green */
    font-weight: 500;
}

/* --- SEO Internal Linking Grid --- */
.internal-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 25px;
}

.district-link-card {
    display: block;
    background-color: #FFFFFF;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #EAEFF4;
    text-decoration: none;
    color: #333;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.district-link-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-color: #4A90E2;
    color: #4A90E2;
}

@media (max-width: 600px) {

    .comparison-table th,
    .comparison-table td {
        padding: 10px;
        font-size: 0.9em;
    }
}

/* Custom Checkbox Alignment */
.addon-checkbox {
    display: flex;
    align-items: flex-start;
    /* Aligns checkbox with top line of text */
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 25px;
}

.addon-checkbox input[type="checkbox"] {
    margin-top: 4px;
    /* Visual alignment with text line-height */
    width: 20px;
    height: 20px;
    /* Larger touch target */
    flex-shrink: 0;
}

.addon-checkbox label {
    margin-bottom: 0;
    line-height: 1.4;
    font-weight: 400;
    font-size: 0.9em;
    cursor: pointer;
}

/* Password Toggle Button */
.password-toggle-btn {
    position: absolute;
    top: 38px;
    /* Slightly adjusted down */
    right: 15px;
    /* Fixed right position for simplicity as inputs are centered but wide enough on mobile */
    padding: 5px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #888;
    font-weight: 400;
    font-size: 0.85em;
    /* Smaller text */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background-color 0.2s;
    border-radius: 4px;
}

.password-toggle-btn:hover {
    color: #333;
    background-color: rgba(0, 0, 0, 0.05);
}

@media (max-width: 360px) {
    .password-toggle-btn {
        right: 15px;
        /* On very small screens, just stick to right padding */
    }
}

/* --- Article & Blog Visual Improvements --- */

/* Article Container */
.article-container {
    max-width: 800px;
    margin: 30px auto;
    padding: 0 20px;
    background-color: #fff;
}

/* Article Typography */
.article-content {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #2c3e50;
    line-height: 1.75;
    font-size: 1.125rem;
    /* 18px */
    max-width: 70ch;
    /* Optimal reading length */
    margin: 0 auto;
}

.article-content p {
    margin-bottom: 24px;
}

.article-content h2 {
    color: #2c3e50;
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.8rem;
    font-weight: 700;
    border-bottom: 2px solid #eaeaea;
    padding-bottom: 10px;
}

.article-content h3 {
    color: #34495e;
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.4rem;
    font-weight: 600;
}

/* Lists in Articles */
.article-content ul,
.article-content ol {
    margin-bottom: 24px;
    padding-left: 20px;
}

.article-content li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 10px;
}

/* Custom bullet for UL */
.article-content ul li::marker {
    color: #4A90E2;
}

/* Blockquotes */
.article-content blockquote {
    background: #f8f9fa;
    border-left: 5px solid #4A90E2;
    margin: 30px 0;
    padding: 20px;
    font-style: italic;
    color: #555;
    border-radius: 0 8px 8px 0;
}

/* Images inside content */
.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 30px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Links inside content */
.article-content a {
    color: #4A90E2;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.article-content a:hover {
    color: #2c3e50;
}

/* Bold text emphasis */
.article-content strong {
    color: #2c3e50;
    font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: row;
        /* Keep logo and toggle side-by-side */
        flex-wrap: wrap;
        /* Allow menu to break to next line */
        align-items: center;
        justify-content: space-between;
        padding-bottom: 10px;
    }

    .nav-menu {
        flex-direction: column;
        width: 100%;
        display: none;
        /* Hidden on mobile by default */
        margin-top: 20px;
    }

    .nav-toggle-checkbox:checked~.nav-menu {
        display: flex;
    }

    .nav-menu li {
        width: 100%;

        .dropdown:hover .dropdown-content {
            /* On mobile, disable hover-to-show, rely on click/active class */
            display: none;
        }

        .dropdown.active .dropdown-content {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        /* Reveal dropdown on click/focus/hover shim or better allow native interaction */
        /* For now, simple override to show inline block if parent is 'active' or just list them */
        .dropdown .dropdown-content {
            position: static;
            transform: none;
            box-shadow: none;
            display: none;
            /* Hide by default on mobile */

            /* MOBILE FIX: Remove scroll container, let it expand naturally */
            max-height: none;
            overflow-y: visible;

            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            background-color: #fafafa;

            /* Reset Desktop Styles */
            min-width: 100%;
            margin-top: 0;
            border: none;
            padding: 5px 0;
        }

        .dropdown-content li a {
            padding: 15px 10px;
            /* More vertical space */
            border-bottom: 1px solid #f0f0f0;
            font-size: 1rem;
            /* Larger font for mobile */
        }

        .article-content {
            font-size: 1rem;
        }

        .article-content h2 {
            font-size: 1.5rem;
        }

        .article-content h3 {
            font-size: 1.25rem;
        }
    }
}

/* --- Blog Listing Page Styles --- */

.blog-header {
    background-color: #2C3E50;
    /* Fallback */
    background: linear-gradient(135deg, #2C3E50 0%, #4A90E2 100%);
    color: white;
    padding: 60px 20px;
    text-align: center;
    width: 100%;
}

.blog-header h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: white !important;
    /* Force white text */
}

.blog-header p {
    font-size: 1.2em;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.9);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    padding: 40px 0;
}

.blog-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.blog-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-image {
    transform: scale(1.05);
}

.blog-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-date {
    font-size: 0.85em;
    color: #888;
    margin-bottom: 10px;
}

.blog-card h2 {
    font-size: 1.3em;
    margin-bottom: 10px;
    color: #2C3E50;
    line-height: 1.4;
}

.blog-excerpt {
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1;
}

.read-more {
    color: #4A90E2;
    font-weight: 600;
    margin-top: auto;
}

/* --- FEATURES & TIPS GRIDS --- */
.section-subtitle {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
    font-size: 1.1em;
    color: #666;
}

.features-grid,
.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.feature-card {
    background: #FFFFFF;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #EAEFF4;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.feature-icon {
    font-size: 2.5em;
    color: #4A90E2;
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 1.3em;
    margin-bottom: 15px;
    color: #2C3E50;
    font-weight: 600;
}

.feature-card p {
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
}

.tip-card {
    display: flex;
    align-items: flex-start;
    background: #FFFFFF;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #EAEFF4;
    transition: all 0.3s ease;
}

.tip-card:hover {
    border-color: #4A90E2;
    box-shadow: 0 5px 15px rgba(74, 144, 226, 0.1);
}

.tip-icon {
    font-size: 1.8em;
    color: #4A90E2;
    margin-right: 20px;
    min-width: 40px;
    text-align: center;
}

.tip-content h3 {
    font-size: 1.2em;
    margin-bottom: 8px;
    color: #2C3E50;
    margin-top: 0;
    font-weight: 600;
}

.tip-content p {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.2em;
    }

    .hero-section {
        height: 400px;
    }

    .hero-price {
        font-size: 3em;
    }

    .calculator-form.registration-form {
        grid-template-columns: 1fr;
    }
}

/* --- JOBS STANDARD V2 COMPONENT STYLES --- */

/* 1. Tactile Cards */
.property-selector-container {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.property-card {
    flex: 1;
    background: #fff;
    border: 2px solid #e1e8ed;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #555;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.property-card i {
    font-size: 1.8rem;
    color: #bdc3c7;
    transition: color 0.2s ease;
}

.property-card span {
    font-weight: 600;
    font-size: 1rem;
}

.property-card:hover {
    border-color: #aab7c4;
    transform: translateY(-2px);
}

.property-card.selected {
    border-color: #4A90E2;
    background-color: #f0f7ff;
    color: #4A90E2;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
}

.property-card.selected i {
    color: #4A90E2;
}

/* 2. Giant Search Input */
.giant-search-section {
    position: relative;
    margin-bottom: 25px;
}

.giant-input-wrapper {
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #fff;
    transition: box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.giant-input-wrapper:focus-within {
    box-shadow: 0 8px 30px rgba(74, 144, 226, 0.15);
    border-color: #4A90E2;
}

.giant-search-input {
    width: 100%;
    height: 60px;
    padding: 0 20px 0 55px;
    /* Space for icon */
    font-size: 1.1rem;
    border: none;
    border-radius: 12px;
    outline: none;
    font-family: inherit;
    color: #2c3e50;
    background: transparent;
}

.search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #95a5a6;
}

.giant-options {
    top: 65px;
    /* Push down below input */
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* 3. Steppers & Inputs */
.dynamic-inputs-container {
    margin-bottom: 25px;
    animation: fadeIn 0.4s ease;
}

.inputs-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #34495e;
    font-size: 0.95rem;
}

.stepper-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #dce4ec;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    height: 50px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.stepper-btn {
    width: 50px;
    height: 100%;
    border: none;
    background: #f8f9fa;
    color: #4A90E2;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.stepper-btn:hover {
    background: #e9ecef;
}

.stepper-btn:active {
    background: #dde2e6;
}

.input-with-suffix {
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

.stepper-input {
    flex: 1;
    height: 100%;
    border: none;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    outline: none;
    width: 100%;
    padding: 0;
}

.suffix {
    padding-right: 15px;
    color: #95a5a6;
    font-weight: 500;
    font-size: 1rem;
    user-select: none;
}

.stepper-row {
    display: flex;
    gap: 15px;
}

.stepper-item {
    flex: 1;
}

/* 4. The Climax Button */
.big-climax-btn {
    font-size: 1.1rem;
    padding: 18px 25px;
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    box-shadow: 0 10px 25px rgba(74, 144, 226, 0.4);
    letter-spacing: 0.5px;
    border-radius: 50px;
    /* Pill shape */
    width: 100%;
    text-transform: uppercase;
    font-weight: 700;
    color: white;
    border: none;
    cursor: pointer;
}

.big-climax-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(74, 144, 226, 0.5);
}

/* 5. Psychological Loader Overlay */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loader-content {
    text-align: center;
    animation: fadeIn 0.5s ease;
}

.pulse-circle {
    width: 60px;
    height: 60px;
    background: #4A90E2;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(74, 144, 226, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0);
    }
}

.loader-content h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 700;
}

.loader-content p {
    color: #7f8c8d;
    font-size: 1.1rem;
}

.hidden {
    display: none !important;
}

/* Mobile adjustments for new elements */
@media (max-width: 768px) {
    .giant-search-input {
        font-size: 1rem;
        height: 55px;
    }

    .stepper-btn {
        width: 32px;
    }

    .property-selector-container {
        gap: 10px;
    }

    .property-card {
        padding: 15px 10px;
    }

    .property-card i {
        font-size: 1.5rem;
    }
}

/* --- RESTORED STYLES (Combobox, Sticky Footer) --- */

/* --- Custom Combobox Styles --- */
.combobox-container {
    position: relative;
    width: 100%;
}

.combobox-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #BDC3C7;
    /* Softer border */
    border-radius: 8px;
    /* More rounded */
    font-size: 1rem;
    color: #2C3E50;
    background-color: #fff;
    transition: all 0.2s ease;
    /* Remove default appearance */
    -webkit-appearance: none;
    appearance: none;
}

.combobox-input:focus {
    border-color: #4A90E2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
    outline: none;
}

.combobox-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    /* Scrollable */
    background: #fff;
    border: 1px solid #EAEFF4;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 100;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    /* Hidden by default */
}

.combobox-options.active {
    display: block;
    animation: fadeInDropdown 0.2s ease-out;
}

.combobox-option {
    padding: 12px 15px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #444;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.1s;
}

.combobox-option:last-child {
    border-bottom: none;
}

.combobox-option:hover,
.combobox-option.selected {
    background-color: #F0F7FF;
    color: #4A90E2;
    font-weight: 500;
}

/* --- Monospace Price Display --- */
.price-display {
    font-family: 'Roboto Mono', 'Courier Prime', monospace;
    /* Monospace for financial data */
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}

/* --- Sticky Mobile Footer --- */
@media (max-width: 768px) {
    .sticky-mobile-cta {
        position: static;
        /* Natural flow */
        transform: none;
        /* Always visible */
        width: 100%;
        background-color: transparent;
        /* Seamless integration */
        padding: 20px 0;
        /* Vertical spacing */
        box-shadow: none;
        z-index: auto;
        border-top: none;
        text-align: center;
    }

    .sticky-mobile-cta.visible {
        transform: none;
    }

    .sticky-mobile-cta .cta-button {
        width: 100%;
        margin: 0;
        box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
        /* Stronger shadow for emphasis */
    }

    /* Spacer is no longer needed but we keep it empty or remove logic usage */
    .sticky-footer-spacer {
        display: none;
    }
}

/* --- BOOKING STYLE SEARCH BAR (Merged) --- */
.search-bar-container {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 9999px;
    /* Pill shape */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    padding: 8px;
    max-width: 900px;
    margin: 0 auto 40px auto;
    /* Centered with bottom margin */
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    z-index: 100;
}

.search-bar-container.focused {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-color: #357ABD;
}

.search-item {
    flex: 1;
    padding: 10px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 30px;
    transition: background-color 0.2s ease;
    min-height: 70px;
    /* Fixed height for consistency */
}

.search-item:hover {
    background-color: #F8FAFC;
    cursor: pointer;
}

.search-item-label {
    font-size: 0.8em;
    font-weight: 600;
    color: #64748B;
    margin-bottom: 4px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.search-item-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1em;
    color: #1a1a1a;
    font-weight: 500;
}

.search-item-input-wrapper i {
    color: #94A3B8;
    font-size: 1.1em;
}

/* Specific Inputs inside the bar */
.search-bar-input {
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
    font-size: 1em;
    font-weight: 600;
    color: #1a1a1a;
    padding: 0;
    margin: 0;
}

.search-bar-input::placeholder {
    color: #CBD5E1;
    font-weight: 400;
}

.search-divider {
    width: 1px;
    height: 40px;
    background-color: #E2E8F0;
    margin: 0 5px;
}

.search-submit-btn {
    background-color: #357ABD;
    color: #fff;
    border: none;
    border-radius: 9999px;
    padding: 16px 32px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    white-space: nowrap;
    margin-left: 10px;
    box-shadow: 0 4px 10px rgba(53, 122, 189, 0.3);
}

.search-submit-btn:hover {
    background-color: #2a629c;
    transform: translateY(-1px);
}

/* Property Type Specific Styles inside Bar */
.type-selector-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Area Input Specifics */
.area-input-group {
    display: flex;
    gap: 10px;
    width: 100%;
}

.area-sub-input {
    flex: 1;
    min-width: 0;
}

/* For dual inputs (Casa) */
.dual-area-inputs {
    display: flex;
    gap: 15px;
}

.dual-area-inputs .input-with-icon {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.03);
    padding: 5px 10px;
    border-radius: 8px;
}

.dual-area-inputs input {
    width: 60px;
    background: transparent;
    border: none;
    outline: none;
    font-weight: 600;
    text-align: right;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .search-bar-container {
        flex-direction: column;
        border-radius: 24px;
        padding: 12px;
        gap: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
        background: #fff;
        max-width: 100%;
        margin: 20px 0;
    }

    .search-item {
        width: 100%;
        border-bottom: 1px solid #F1F5F9;
        border-radius: 12px;
        padding: 15px;
        min-height: auto;
        /* Allow flexible height */
    }

    .search-item:last-of-type {
        border-bottom: none;
    }

    .search-divider {
        display: none;
    }

    .search-submit-btn {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
        padding: 18px;
        border-radius: 16px;
        /* Slightly less rounded on mobile card */
    }

    .dual-area-inputs {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .dual-area-inputs .input-with-icon {
        width: 100%;
        justify-content: space-between;
    }
}

/* --- RADICAL NARRATIVE STYLES --- */

/* 1. Stats Bar */
.stats-bar-section {
    background: #0F172A;
    /* Dark contrast */
    color: #fff;
    padding: 30px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.stat-number {
    font-size: 2em;
    font-weight: 800;
    color: #38bdf8;
    /* Cyan accent */
    letter-spacing: -0.05em;
}

.stat-label {
    font-size: 1.1em;
    font-weight: 500;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 2. Editorial Section (Transparency) */
.editorial-section {
    padding: 100px 20px;
    background: #fff;
    text-align: center;
}

.editorial-content {
    max-width: 800px;
    margin: 0 auto;
}

.editorial-content h2 {
    font-size: 2.5em;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 30px;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.editorial-lead {
    font-size: 1.5em;
    color: #334155;
    line-height: 1.5;
    margin-bottom: 30px;
    font-weight: 500;
}

.editorial-content p {
    font-size: 1.25em;
    color: #64748B;
    line-height: 1.6;
    font-weight: 400;
}

.editorial-content strong {
    color: #0F172A;
    font-weight: 600;
}

/* 3. Capabilities / Features Grid (Jobs Standard / Decateca Style) */
.capabilities-section {
    padding: 100px 20px;
    background: #fff;
    /* Clean white, no gray */
    border-top: none;
}

.section-title-minimal {
    text-align: center;
    font-size: 1.8em;
    /* Increased from 1.4em to match standard */
    color: #2C3E50;
    /* Standard header color */
    font-weight: 700;
    /* Standard bold */
    margin-bottom: 40px;
    /* Reduced from 80px */
    text-transform: none;
    /* Removed uppercase */
    letter-spacing: normal;
    /* Removed spacing */
    opacity: 1;
    /* Removed opacity */
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.capability-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 4px;
    /* Sharper corners */
    border: 1px solid #f1f5f9;
    /* Very subtle border */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.capability-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: #fff;
}

/* .cap-icon removed in favor of images */

.cap-image-container {
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
    border-radius: 12px;
    overflow: hidden;
    /* Optional: Minimal shadow for the icon itself */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.cap-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.capability-card h3 {
    font-size: 1.5em;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
    letter-spacing: -0.02em;
}

.capability-card p {
    font-size: 1.1em;
    color: #64748B;
    line-height: 1.6;
    margin-bottom: 30px;
    font-weight: 400;
}

.cap-link {
    color: #1a1a1a;
    font-weight: 600;
    text-decoration: none;
    font-size: 1em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.cap-link:hover {
    gap: 12px;
    opacity: 0.7;
}

/* Content Sections Wrapper (General Cleanup) */
.content-sections-wrapper {
    background: #fff;
}

.content-section {
    padding: 100px 20px;
    background: #fff;
}

.content-section h2 {
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 30px;
    color: #1a1a1a;
    letter-spacing: -0.03em;
    text-align: center;
}

.content-section p {
    line-height: 1.8;
    color: #475569;
    font-size: 1.15em;
    max-width: 700px;
    margin: 0 auto 30px;
    text-align: center;
}

.section-subtitle {
    font-size: 1.25em;
    color: #64748B;
    max-width: 600px;
    margin: 0 auto 50px;
    font-weight: 300;
}

.content-section.light-bg {
    background: #FAFAFA;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.feature-card {
    text-align: center;
    padding: 20px;
}

.feature-icon {
    font-size: 2em;
    color: #1a1a1a;
    margin-bottom: 20px;
    opacity: 0.8;
}

.feature-card h3 {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 10px;
}

.feature-card p {
    font-size: 0.95em;
    line-height: 1.5;
    color: #64748B;
}

/* Tips Grid Update */
.tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 60px;
}

.tip-card {
    padding: 30px;
    border: 1px solid #f1f5f9;
    border-radius: 4px;
    background: #fff;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tip-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.tip-icon {
    font-size: 2em;
    color: #94a3b8;
    margin-bottom: 20px;
}

.tip-content h3 {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.tip-content p {
    font-size: 0.95em;
    color: #64748B;
    margin: 0;
}

/* Mobile Responsive Narrative */
@media (max-width: 768px) {
    .stat-item {
        flex-direction: column;
        gap: 5px;
    }

    .stat-number {
        font-size: 2.5em;
    }

    .editorial-section {
        padding: 60px 20px;
    }

    .editorial-content h2 {
        font-size: 2em;
    }

    .editorial-lead {
        font-size: 1.25em;
    }

    .editorial-content p {
        font-size: 1.1em;
    }

    .capabilities-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .section-title-minimal {
        font-size: 1.2em;
        margin-bottom: 40px;
    }
}

/* --- NEW HUB & SPOKE "NARRATOR" STYLES (Merged) --- */
.narrator-hero {
    text-align: center;
    padding: 40px 16px 60px;
    background: #fff;
}

.narrator-hero h1 {
    font-size: 2.5em;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 24px;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.narrator-hero p.hero-subtitle {
    font-size: 1.35em;
    color: #555;
    margin-top: 40px;
    margin-bottom: 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
    font-weight: 400;
}

.hero-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-card {
    position: relative;
    display: block;
    /* It's an anchor */
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1/1;
    /* Square cards for better visibility */
    text-decoration: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

.hero-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.hero-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.hero-card:hover .hero-card-bg {
    transform: scale(1.08);
}

.hero-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
    transition: background 0.3s ease;
}

.hero-card:hover .hero-card-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
}

.hero-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    z-index: 10;
    text-align: left;
}

.hero-card-content h2 {
    color: #fff;
    font-size: 1.8em;
    font-weight: 700;
    margin: 0 0 6px 0;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-card-content p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1em;
    font-weight: 500;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-arrow {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    transition: background 0.3s ease, transform 0.3s ease;
}

.hero-card:hover .card-arrow {
    background: rgba(255, 255, 255, 1);
    color: #000;
    transform: translateX(5px);
}

/* Steps Section new */
.steps-section-hub {
    padding: 40px 20px;
    background: #FAFAFA;
    border-top: 1px solid #eee;
    margin-top: 60px;
}

.steps-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.step-hub-item {
    position: relative;
    padding-left: 20px;
    border-left: 3px solid #E2E8F0;
    text-align: left;
}

.step-hub-number {
    font-size: 2em;
    font-weight: 900;
    color: #CBD5E1;
    line-height: 1;
    margin-bottom: 10px;
    display: block;
}

.step-hub-title {
    font-weight: 700;
    font-size: 1.1em;
    color: #1a1a1a;
    display: block;
    margin-bottom: 5px;
}

.step-hub-desc {
    font-size: 0.9em;
    color: #64748B;
    line-height: 1.5;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .narrator-hero {
        padding: 50px 15px 40px;
    }

    .narrator-hero h1 {
        font-size: 2.2em;
        letter-spacing: -0.02em;
    }

    .narrator-hero p.hero-subtitle {
        font-size: 1.1em;
        margin-bottom: 30px;
    }

    .hero-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hero-card {
        aspect-ratio: 16/10;
        /* More landscape on mobile to fit screen better */
        border-radius: 16px;
    }

    .hero-card-content {
        padding: 20px;
    }

    .steps-hub-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 0;
    }
}

/* --- BLOG & ARTICLE NEW STANDARD (JOB STANDARD) --- */

.blog-header-minimal {
    padding: 80px 20px 40px;
    background-color: #ffffff;
    text-align: center;
}

.blog-header-minimal h1 {
    font-size: 3em;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 15px;
    letter-spacing: -0.03em;
}

.blog-header-minimal p {
    font-size: 1.25em;
    color: #64748B;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
    font-weight: 400;
}

.blog-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 30px;
    padding: 20px 0 80px;
    max-width: 1200px;
    margin: 0 auto;
}

.blog-card-premium {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.03);
    height: 100%;
}

.blog-card-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.blog-card-image-container {
    height: 240px;
    overflow: hidden;
    position: relative;
    background-color: #f1f5f9;
}

.blog-card-image-premium {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.blog-card-premium:hover .blog-card-image-premium {
    transform: scale(1.05);
}

.blog-card-content-premium {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-date-premium {
    font-size: 0.8em;
    color: #94A3B8;
    margin-bottom: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-title-premium {
    font-size: 1.4em;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.blog-excerpt-premium {
    font-size: 1em;
    color: #64748B;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

.read-more-premium {
    color: #4A90E2;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    font-size: 0.95em;
    transition: gap 0.2s ease;
}

.blog-card-premium:hover .read-more-premium {
    gap: 10px;
}

/* Article Page Details */
.article-header-minimal {
    padding: 60px 20px 40px;
    text-align: center;
    background: #ffffff;
    max-width: 900px;
    margin: 0 auto;
}

.article-title-hero {
    font-size: 2.8em;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
}

.article-meta-hero {
    color: #64748B;
    font-size: 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.article-container-premium {
    max-width: 740px;
    margin: 0 auto;
    padding: 0 20px 80px;
}

.article-main-image {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 50px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.article-content-premium {
    font-size: 1.15em;
    line-height: 1.8;
    color: #334155;
    font-family: 'Georgia', serif;
    /* Use serif for long reading? Or keep Inter? Job Standard implies Inter usually. Let's stick to Inter but if user complains we change 
       Actually landing.php is Inter. Let's stick to Inter for consistency but maximize readability.
    */
    font-family: 'Inter', sans-serif;
}

.article-content-premium p {
    margin-bottom: 24px;
}

.article-content-premium h2 {
    font-size: 1.8em;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 50px;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.article-content-premium ul,
.article-content-premium ol {
    margin-bottom: 24px;
    padding-left: 20px;
}

.article-content-premium li {
    margin-bottom: 10px;
}

.expert-badge-premium {
    background-color: #ECFDF5;
    color: #059669;
    padding: 6px 12px;
    border-radius: 99px;
    font-size: 0.85em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.back-link-premium {
    display: inline-flex;
    align-items: center;
    margin-bottom: 30px;
    color: #64748B;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95em;
    transition: color 0.2s;
}

.back-link-premium:hover {
    color: #4A90E2;
}

@media (max-width: 768px) {
    .blog-header-minimal h1 {
        font-size: 2.2em;
    }

    .article-title-hero {
        font-size: 2em;
    }

    .blog-grid-premium {
        grid-template-columns: 1fr;
        max-width: 450px;
    }

    .blog-card-image-container {
        height: 200px;
    }
}

/* --- FEATURED & WIZARD STYLES --- */

/* Featured Cards (Similar to Blog but slightly different context) */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 30px;
}

.featured-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.featured-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: #4A90E2;
}

.featured-card-icon {
    font-size: 2em;
    color: #4A90E2;
    margin-bottom: 15px;
}

.featured-card h3 {
    font-size: 1.3em;
    font-weight: 700;
    color: #2C3E50;
    margin-bottom: 8px;
}

.featured-card p {
    font-size: 0.95em;
    color: #64748B;
    margin-bottom: 20px;
    flex-grow: 1;
}

.featured-card-cta {
    font-weight: 600;
    color: #4A90E2;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95em;
}

.featured-card:hover .featured-card-cta {
    text-decoration: underline;
}

/* Tax Wizard Modal */
.wizard-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    /* Hidden by class 'hidden' */
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wizard-content {
    background: #ffffff;
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wizard-step {
    display: none;
    /* Controlled by JS */
}

.wizard-step.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

.wizard-header {
    text-align: center;
    margin-bottom: 25px;
}

.wizard-header h3 {
    font-size: 1.5em;
    color: #2C3E50;
    font-weight: 700;
    margin-bottom: 10px;
}

.wizard-progress {
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    margin-bottom: 20px;
    overflow: hidden;
}

.wizard-progress-bar {
    height: 100%;
    background: #4A90E2;
    width: 0%;
    transition: width 0.3s ease;
}

/* Wizard Options (Yes/No or Cards) */
.wizard-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.wizard-option-card {
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.wizard-option-card:hover {
    border-color: #4A90E2;
    background-color: #F8FAFC;
}

.wizard-option-card.selected {
    border-color: #4A90E2;
    background-color: #EFF6FF;
    color: #1e3a8a;
}

.wizard-input-group {
    margin-bottom: 20px;
}

.wizard-input-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #475569;
}

.wizard-input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    font-size: 1em;
}

.wizard-result-box {
    background: #F0FDF4;
    /* Green tint */
    border: 1px solid #BBF7D0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.wizard-result-amount {
    font-size: 2.5em;
    font-weight: 800;
    color: #166534;
    margin: 10px 0;
}

.wizard-result-note {
    font-size: 0.9em;
    color: #15803D;
    line-height: 1.4;
}

.wizard-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.btn-wizard-back {
    background: none;
    border: none;
    color: #94A3B8;
    font-weight: 600;
    cursor: pointer;
}

.btn-wizard-next {
    background: #4A90E2;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 768px) {
    .featured-grid {
        grid-template-columns: 1fr;
    }
}