/* Paleta de colores (Light Mode) */
:root {
    --bg-dark: #ebeef5;          /* Fondo principal (Gris ligeramente m??s oscuro para contraste) */
    --bg-panel: #ffffff;         /* Fondo de tarjetas (Blanco puro) */
    --bg-input: #f0f2f5;         /* Fondo de inputs */
    --border-color: #e8ebf0;     /* Bordes sutiles */
    --text-main: #3d3d3d;        /* Texto principal (Gris oscuro) */
    --text-muted: #6a6a6a;       /* Texto secundario (Gris medio) */
    --accent-green: #406efb;     /* Azul principal (reemplazo de verde) */
    --accent-green-hover: #2850cd; /* Azul m??s oscuro para hover */
    --accent-red: #da3633;       /* Rojo de p??rdida */
    --accent-blue: #0969da;      /* Azul secundario para enlaces */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

body.mode-home {
    background: linear-gradient(135deg, #a7d0e3 0%, #d5e6f0 50%, #f4f7f9 100%);
    transition: background 1.2s ease-in-out, background-color 1.2s ease-in-out;
}

/* Clases din??micas de fondo claro (inyectadas por JS) */
body.mode-home.bg-theme-white {
    background: #ffffff;
}
body.mode-home.bg-theme-gray {
    background: #f8fafc;
}
body.mode-home.bg-theme-soft-blue {
    background: #f0f7ff;
}
body.mode-home.bg-theme-dark {
    background: #333333;
    color: #ffffff;
}

/* Scroll Snap Configuraci??n global */
html.snap-scroll-enabled {
    scroll-snap-type: y proximity;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
}

/* Home Minimalista (Estilo Google) */
.home-hero {
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
    min-height: 90vh; /* Para que el carrusel baje al final */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.logo-giant {
    font-size: 64px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 5px;
}

.logo-giant span {
    color: var(--accent-green);
}

.subtitle-giant {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.index-count {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 35px;
    background-color: var(--bg-panel);
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

.index-count strong {
    color: var(--accent-green);
    font-weight: 600;
}

.search-form-giant {
    width: 100%;
    margin-bottom: 30px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.icon-search {
    position: absolute;
    left: 20px;
    font-size: 20px;
    color: var(--text-muted);
}

.search-input-wrapper input {
    width: 100%;
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 16px 20px 16px 50px;
    border-radius: 30px;
    font-size: 18px;
    outline: none;
    transition: box-shadow 0.3s, border-color 0.3s, background-color 0.3s;
}

.search-input-wrapper input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 1px var(--accent-blue), 0 8px 16px rgba(0,0,0,0.05);
    background-color: var(--bg-panel);
}

.search-buttons {
    margin-top: 0px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn-giant {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 10px 24px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-giant:hover {
    background-color: var(--border-color);
    border-color: var(--text-muted);
}

.suggestions {
    font-size: 13px;
    color: var(--text-muted);
}

.suggestions a {
    color: var(--accent-blue);
    text-decoration: none;
}

.suggestions a:hover {
    text-decoration: underline;
}

/* Header Compacto (Modo Resultados) */
.topbar {
    background-color: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar-flex {
    display: flex;
    align-items: center;
    gap: 30px;
}

.logo-link {
    text-decoration: none;
}

.logo-small {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-main);
}

.logo-small span {
    color: var(--accent-green);
}

.search-form-mini {
    display: flex;
    flex-grow: 1;
    max-width: 600px;
}

.search-form-mini input {
    width: 100%;
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 10px 20px;
    border-radius: 20px 0 0 20px;
    font-size: 15px;
    outline: none;
}

.search-form-mini button {
    background-color: var(--border-color);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 10px 20px;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s;
}

.search-form-mini button:hover {
    background-color: var(--text-muted);
    color: var(--bg-dark);
}

/* Resultados */
.results-view {
    margin-top: 0px;
    margin-bottom: 50px;
}

/* Panel NLP */
.nlp-interpretation {
    background-color: rgba(46, 160, 67, 0.1);
    border: 1px solid var(--accent-green);
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 30px;
}

.nlp-interpretation h3 {
    font-size: 14px;
    color: var(--text-main);
    margin-bottom: 10px;
}

.nlp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.nlp-tag {
    background-color: var(--accent-green);
    color: #fff;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 600;
}

.results-header {
    margin-bottom: 20px;
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

/* Tarjetas (se mantienen iguales) */
.card {
    background-color: var(--bg-panel);
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0,0,0,0.12);
    border-color: transparent;
}

.card-img {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--accent-green);
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

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

.card-title {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--text-main);
    line-height: 1.3;
}

.card-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent-green);
    margin-bottom: 15px;
}

.card-specs {
    list-style: none;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.card-extra {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tag {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 4px;
    color: var(--text-muted);
}

.card-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-view {
    margin-top: auto;
    display: block;
    text-align: center;
    background-color: transparent;
    color: var(--text-main);
    text-decoration: none;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    transition: background-color 0.3s, color 0.3s;
    font-weight: 600;
}

.btn-view:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}

.no-results {
    background-color: var(--bg-panel);
    padding: 40px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.btn-submit {
    display: block;
    width: 100%;
    background-color: var(--accent-green);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn-submit:hover {
    background-color: var(--accent-green-hover);
}

/* Responsividad */
@media (max-width: 768px) {
    .topbar-flex {
        flex-direction: column;
        gap: 15px;
    }
}

/* --- Carrusel --- */
.carousel {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.carousel-img {
    min-width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    z-index: 10;
    transition: background 0.3s;
}
.carousel-btn:hover { background: rgba(0, 0, 0, 0.8); }
.carousel-btn.prev { left: 0; }
.carousel-btn.next { right: 0; }

.foto-count {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    z-index: 10;
}

/* --- Lightbox Modal --- */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.lightbox-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 60px;
    font-weight: bold;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 20px;
}
.lightbox-btn:hover { color: var(--accent-green); }
.lightbox-btn.prev { left: 20px; }
.lightbox-btn.next { right: 20px; }

.lightbox-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* --- Layout de Vista de Detalle (detalle.php) --- */

.detail-view {
    margin-top: 0px;
    margin-bottom: 50px;
}

.detail-header-section {
    margin-bottom: 20px;
}

.detail-breadcrumb {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.detail-breadcrumb a {
    color: var(--accent-blue);
    text-decoration: none;
}

.detail-breadcrumb a:hover {
    text-decoration: underline;
}

.detail-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
    margin-bottom: 8px;
}

.detail-subtitle-loc {
    font-size: 14px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Grid de fotos estilo premium (Zonaprop / Inmobiliaria) */
.detail-photos-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 150px 150px;
    gap: 10px;
    margin-bottom: 25px;
    border-radius: 8px;
    overflow: hidden;
}

.photo-main {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    height: 310px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: filter 0.3s ease;
}

.photo-thumb {
    height: 150px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    position: relative;
    transition: filter 0.3s ease;
}

.photo-main:hover, .photo-thumb:hover {
    filter: brightness(1.15);
}

.photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 17, 23, 0.75);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    backdrop-filter: blur(2px);
    transition: background 0.3s ease;
}

.photo-overlay:hover {
    background: rgba(13, 17, 23, 0.85);
}

.photo-overlay-icon {
    font-size: 24px;
    margin-bottom: 5px;
}

/* Barra de precio y botones */
.price-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 25px;
}

.price-container {
    display: flex;
    flex-direction: column;
}

.price-tag-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.price-value-detail {
    font-size: 34px;
    font-weight: 800;
    color: var(--accent-green);
    line-height: 1;
}

.actions-container {
    display: flex;
    gap: 12px;
}

.btn-action-primary {
    background-color: var(--accent-green);
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-action-primary:hover {
    background-color: var(--accent-green-hover);
}

.btn-action-secondary {
    background-color: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-action-secondary:hover {
    background-color: var(--border-color);
}

/* Ficha de Caracter??sticas Destacadas (Grilla del c??rculo rojo) */
.features-container {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 25px;
}

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

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.feature-icon {
    font-size: 20px;
    color: var(--accent-green);
    background-color: var(--bg-dark);
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.feature-info {
    display: flex;
    flex-direction: column;
}

.feature-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.feature-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

/* Secciones de Contenido */
.detail-section {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
}

.detail-section h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    color: var(--text-main);
}

.description-text {
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.8;
    white-space: pre-wrap;
}

.location-detail-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.location-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
}

.location-item strong {
    color: var(--text-muted);
    min-width: 110px;
}

/* Secci??n de Veh??culos Similares */
.similares-section {
    margin-top: 40px;
    margin-bottom: 50px;
}

.similares-section h2 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--text-main);
}

/* Responsividad de los componentes de Detalle */
@media (max-width: 992px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .detail-title {
        font-size: 26px;
    }
    
    .detail-photos-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 240px;
    }
    .photo-main {
        grid-column: 1;
        grid-row: 1;
        height: 240px;
    }
    .photo-thumb {
        display: none;
    }
    
    .price-actions-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .price-container {
        text-align: left;
        max-width: 100%;
    }

    .price-value-detail {
        font-size: 24px;
        white-space: nowrap;
    }

    .actions-container {
        width: 100%;
    }

    .btn-action-primary, .btn-action-secondary {
        flex-grow: 1;
        justify-content: center;
    }

    /* Comparar: solo ícono en mobile (el texto se oculta, el botón queda cuadrado) */
    .btn-compare-toggle {
        flex-grow: 0 !important;
        width: 44px;
        padding: 12px !important;
    }

    .btn-compare-toggle .btn-text-label {
        display: none;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

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

/* --- Mapa Interactivo (OpenStreetMap / Leaflet) --- */
#map-container {
    width: 100%;
    margin-top: 15px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

#map {
    width: 100%;
    height: 320px;
    z-index: 1; /* Evita superposiciones indeseadas */
}

/* Ajustes oscuros para popup y UI de Leaflet */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background-color: var(--bg-panel) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 3px 14px rgba(0,0,0,0.6) !important;
}
.leaflet-popup-content-wrapper {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    padding: 5px;
}
.leaflet-container a.leaflet-popup-close-button {
    color: var(--text-muted) !important;
}
.leaflet-bar {
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}
.leaflet-bar a {
    background-color: var(--bg-panel) !important;
    color: var(--text-main) !important;
    border-bottom: 1px solid var(--border-color) !important;
    transition: background-color 0.2s;
}
.leaflet-bar a:hover {
    background-color: var(--border-color) !important;
}

/* --- Comparador de Veh??culos Lado a Lado --- */

/* Bot??n comparador toggle (Zonaprop style) */
.btn-compare-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-compare-toggle.active {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: white !important;
}

.btn-compare-toggle.active:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* Widget flotante inferior central */
.compare-floating-widget {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%) translateY(120px); /* Oculto por defecto */
    background-color: rgba(22, 27, 34, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 40px;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    z-index: 9999;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(8px);
}

.compare-floating-widget.visible {
    transform: translateX(-50%) translateY(0); /* Se desliza a la vista */
}

.compare-thumbs-overlap {
    display: flex;
    align-items: center;
}

.compare-thumb-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--bg-panel);
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    margin-right: -12px; /* Superposici??n de miniaturas */
    position: relative;
    transition: transform 0.2s ease;
}

.compare-thumb-img:hover {
    transform: translateY(-4px) scale(1.1);
    z-index: 10;
}

.btn-compare-submit {
    background-color: white;
    color: #0d1117;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.btn-compare-submit:hover {
    background-color: var(--accent-green-hover);
    color: white;
    box-shadow: 0 0 12px rgba(46, 160, 67, 0.5);
}

.btn-compare-submit.disabled {
    background-color: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* P??gina de comparaci??n (comparar.php) */
.compare-view {
    margin-top: 0px;
    margin-bottom: 50px;
}

.compare-grid-header {
    display: grid;
    grid-template-columns: 240px 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.compare-header-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.compare-header-info h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 5px;
}

.compare-header-info span {
    font-size: 13px;
    color: var(--text-muted);
}

.compare-card-header {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.compare-card-img {
    height: 180px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--border-color);
}

.compare-card-body {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.compare-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 8px;
    line-height: 1.3;
}

.compare-card-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent-green);
    margin-bottom: 15px;
}

.compare-actions-row {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.compare-actions-row .btn-action-primary, 
.compare-actions-row .btn-action-secondary {
    padding: 8px 12px;
    font-size: 12px;
    flex-grow: 1;
    justify-content: center;
}

.compare-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(218, 54, 51, 0.85);
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
    z-index: 10;
}

.compare-remove-btn:hover {
    background-color: var(--accent-red);
}

/* Tabla comparativa */
.compare-table-container {
    background-color: #ffffff;
    border: none;
    overflow: hidden;
    margin-bottom: 40px;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.compare-table tr.section-title td {
    background-color: #f1f5f9;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #334155;
    padding: 20px 24px;
    border-bottom: 2px solid #e2e8f0;
}

.compare-table tr.section-title:first-child td {
    border-top: none;
}

.compare-table tr.data-row td {
    padding: 18px 24px;
    font-size: 15px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.compare-table tr.data-row:last-child td {
    border-bottom: none;
}

.compare-table td.label-col {
    width: 260px;
    color: #64748b;
    font-weight: 600;
    background-color: #ffffff;
    border-right: 1px solid #f8fafc;
}

.compare-table td.value-col {
    width: calc(50% - 130px);
    color: #0f172a;
    font-weight: 500;
    background-color: #ffffff;
    border-right: 1px solid #f1f5f9;
    transition: background-color 0.2s ease;
}
.compare-table tr.data-row:hover td.value-col {
    background-color: #f8fafc;
}

.compare-table td.value-col:last-child {
    border-right: none;
}

.compare-table td.value-col.winner {
    background-color: rgba(16, 185, 129, 0.08) !important;
    color: #065f46;
    font-weight: 700;
    position: relative;
}

.compare-badge-winner {
    color: #10b981;
    font-size: 16px;
    margin-right: 8px;
    font-weight: bold;
    background: #d1fae5;
    padding: 4px 8px;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .compare-grid-header {
        grid-template-columns: 1fr;
    }
    
    .compare-table td.label-col {
    width: 260px;
    color: #64748b;
    font-weight: 600;
    background-color: #ffffff;
    border-right: 1px solid #f8fafc;
}
    
    .compare-header-info {
        text-align: center;
        margin-bottom: 15px;
    }
}

/* Bot??n de cierre (cruz) del widget flotante */
.compare-widget-close {
    background: transparent;
    color: var(--text-muted);
    border: none;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 4px;
    margin-left: 6px;
    transition: color 0.2s ease;
    outline: none;
}

.compare-widget-close:hover {
    color: var(--accent-red);
}

/* --- Results Toolbar (Filtros, Ocultar Visitadas, Alerta) --- */
.results-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 15px;
}

.toolbar-left, .toolbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Chips de Filtros */
.filter-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(163, 113, 247, 0.15); /* P??rpura suave, estilo inmueble pero dark */
    color: #d2a8ff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(163, 113, 247, 0.4);
}
.filter-chip .remove {
    margin-left: 8px;
    cursor: pointer;
    font-weight: bold;
}
.filter-chip .remove:hover {
    color: #fff;
}

/* Toggle Switch */
.toggle-switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-main);
    cursor: pointer;
}
.toggle-switch {
    position: relative;
    width: 40px;
    height: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    transition: 0.3s;
}
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: 0.3s;
}
.toggle-switch.active {
    background: var(--accent-green);
    border-color: var(--accent-green);
}
.toggle-switch.active::after {
    left: 22px;
    background: #fff;
}

/* Botones Toolbar */
.btn-toolbar {
    background: #e2e8f0;
    color: #334155;
    border: 1px solid #cbd5e1;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}
.btn-toolbar:hover {
    background: #cbd5e1;
}
.btn-toolbar-active {
    background: rgba(64, 110, 251, 0.1);
    border-color: #406efb;
    color: #406efb;
}

/* Dropdown Relevancia */
.select-toolbar {
    background: #e2e8f0;
    color: #334155;
    border: 1px solid #cbd5e1;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    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%23334155%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.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 10px auto;
    padding-right: 35px;
}
.select-toolbar:focus {
    border-color: var(--accent-blue);
}
.select-toolbar option {
    background: var(--bg-body);
    color: var(--text-main);
}

/* Tarjeta Estado Visitado */
.card.visited {
    /* Style application via JS toggle */
}
.card.visited .card-img::before {
    content: '??????? Visitado';
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(88, 166, 255, 0.9);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    z-index: 10;
}
.hide-visited .card.visited {
    display: none !important;
}

/* --- Modal Filtros --- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}
.modal-content.light-theme {
    background: #ffffff;
    border: none;
    border-radius: 24px;
    width: 95%;
    max-width: 900px;
    height: 85vh;
    max-height: 700px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    font-family: 'Inter', sans-serif;
}
.modal-content.light-theme .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}
.modal-content.light-theme .modal-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.5px;
}
.modal-content.light-theme .modal-close {
    background: #f1f5f9;
    border: none;
    color: #64748b;
    font-size: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.modal-content.light-theme .modal-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.modal-content.light-theme .modal-body {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}
.modal-content.light-theme .modal-sidebar {
    width: 280px;
    min-width: 280px;
    flex-shrink: 0;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 24px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.modal-content.light-theme .modal-sidebar-item {
    padding: 16px 20px;
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.modal-content.light-theme .modal-sidebar-item:hover {
    background: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.modal-content.light-theme .modal-sidebar-item.active {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.modal-sidebar-icon {
    font-size: 20px;
    color: #94a3b8;
    margin-top: 2px;
    transition: color 0.2s ease;
}
.modal-sidebar-item.active .modal-sidebar-icon {
    color: #406efb;
}
.modal-sidebar-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.modal-sidebar-title {
    font-weight: 700;
    font-size: 15px;
    color: #334155;
}
.modal-sidebar-item.active .modal-sidebar-title {
    color: #0f172a;
}
.modal-sidebar-subtitle {
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
}
.modal-content.light-theme .modal-main {
    flex-grow: 1;
    padding: 30px 40px;
    overflow-y: auto;
    background: #ffffff;
}
.modal-main-header {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.modal-main-header i {
    color: #406efb;
}
.modal-content.light-theme .modal-section {
    margin-bottom: 40px;
}
.modal-content.light-theme .modal-section h4 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #64748b;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}
.modal-content.light-theme .modal-grid-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.modal-content.light-theme .filter-btn-option {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 10px 16px;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 85px;
}
.modal-content.light-theme .filter-btn-option:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}
.modal-content.light-theme .filter-btn-option.active {
    background: rgba(64, 110, 251, 0.08);
    border-color: #406efb;
    color: #406efb;
}



/* Autocomplete Suggestions */
#ubicacion-suggestions, .autocomplete-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 120px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-height: 250px;
    overflow-y: auto;
    z-index: 10000;
    margin-top: 5px;
}
#ubicacion-suggestions .suggestion-item, .autocomplete-suggestions .suggestion-item {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
}
#ubicacion-suggestions .suggestion-item:last-child, .autocomplete-suggestions .suggestion-item:last-child {
    border-bottom: none;
}
#ubicacion-suggestions .suggestion-item:hover, .autocomplete-suggestions .suggestion-item:hover {
    background: #f8fafc;
    color: #406efb;
}

/* Ubicacion Pills */
.ubicacion-pill {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    font-family: inherit;
}
.ubicacion-pill i { 
    color: #406efb; 
    font-size: 13px;
}
.ubicacion-pill .remove {
    color: #94a3b8;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    margin-left: 2px;
    transition: color 0.2s;
}
.ubicacion-pill .remove:hover { 
    color: #ef4444; 
}
.ubicaciones-clear:hover {
    color: #406efb !important;
}

/* Date Pills Filters */
.modal-content.light-theme .date-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.modal-content.light-theme .date-pill {
    background: #f1f5f9;
    border: 1px solid transparent;
    color: #475569;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}
.modal-content.light-theme .date-pill:hover {
    background: #e2e8f0;
}
.modal-content.light-theme .date-pill.active {
    background: #ffffff;
    border-color: #406efb;
    color: #406efb;
    box-shadow: 0 2px 8px rgba(64, 110, 251, 0.15);
}
.modal-content.light-theme .date-pill.custom-days {
    padding: 6px 16px;
}
.modal-content.light-theme .inline-days-input {
    width: 50px;
    margin: 0 8px;
    padding: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    background: #ffffff;
    outline: none;
    transition: border-color 0.2s;
}
.modal-content.light-theme .inline-days-input:focus {
    border-color: #406efb;
}
.modal-content.light-theme .modal-input-group {
    display: flex;
    gap: 16px;
}
.modal-content.light-theme .light-input {
    flex: 1;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.2s ease;
}
.modal-content.light-theme .light-input:focus {
    outline: none;
    border-color: #406efb;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(64, 110, 251, 0.15);
}
.modal-content.light-theme .full-width {
    width: 100%;
}
.modal-content.light-theme .modal-footer {
    padding: 20px 30px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-content.light-theme .btn-clear {
    background: #f1f5f9;
    border: none;
    color: #475569;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    padding: 12px 24px;
    border-radius: 12px;
    transition: all 0.2s ease;
}
.modal-content.light-theme .btn-clear:hover { 
    background: #e2e8f0;
    color: #1e293b; 
}
.modal-content.light-theme .btn-apply {
    background: #406efb;
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(64, 110, 251, 0.3);
}
.modal-content.light-theme .btn-apply:hover { 
    background: #2b51cc;
    box-shadow: 0 6px 15px rgba(64, 110, 251, 0.4);
}
/*

AI

Chat

Hero

Styles

*/


/* AI Chat Hero Styles */
.ai-chat-hero {
    position: relative;
    width: 100%;
    max-width: 1000px;
    padding: 0 20px;
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    margin: 20px auto 0 auto; /* Bajar un poco m??s el texto y centrar horizontalmente */
}

.hero-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at 50% 40%, rgba(16, 185, 129, 0.15) 0%, rgba(59, 130, 246, 0.1) 30%, transparent 60%);
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    filter: blur(80px);
}

.chat-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1000px;
    padding: 0 20px;
    margin-top: 200px; /* Margen solicitado por el usuario */
    flex-grow: 1; /* Mantiene centrado dentro de flex */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chat-hero-content .logo-giant {
    font-size: 64px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 5px;
    letter-spacing: -2px;
}

.chat-hero-content .subtitle-giant {
    font-size: 20px;
    color: var(--text-muted);
    margin-bottom: 40px;
    font-weight: 400;
}

.search-form-ai {
    width: 100%;
    margin-bottom: 35px;
}

.search-input-wrapper-ai {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.search-input-wrapper-ai:focus-within {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(16, 185, 129, 0.2);
}

.search-input-wrapper-ai textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 18px;
    resize: none;
    outline: none;
    padding: 8px 0;
    font-family: inherit;
    line-height: 1.5;
}

.search-input-wrapper-ai textarea::placeholder {
    color: #64748b;
}

.search-actions-ai {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.attachment-icon {
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    font-weight: 600;
}

.attachment-icon:hover {
    color: #cbd5e1;
}

.btn-ai-submit {
    background: #406efb;
    color: #ffffff;
    border: none;
    height: 36px;
    padding: 0 16px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(64, 110, 251, 0.3);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-ai-submit:hover {
    background: #2850cd;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(64, 110, 251, 0.4);
}

.ai-suggestions-wrapper {
    margin-top: 10px;
}

.ai-suggestions-label {
    display: block;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.ai-pill {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 1);
    color: var(--text-main);
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.ai-pill:hover {
    background: #ffffff;
    color: var(--accent-green);
    border-color: rgba(51, 154, 45, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
/*

Lovable

Dark

Mode

Overrides

*/


/* Lovable Dark Mode Overrides */
.lovable-style {
    min-height: 85vh;
}

.lovable-glow {
    background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 30%, transparent 60%);
    filter: blur(100px);
}

.lovable-badge {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.lovable-badge span {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s;
}

.lovable-badge span:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lovable-title {
    font-size: 52px !important;
    font-weight: 800 !important;
    color: #3d3d3d !important;
    letter-spacing: 0.5px !important;
}

.lovable-subtitle {
    font-size: 17px !important;
    color: #6a6a6a !important;
    margin-bottom: 40px !important;
}

.brumm-logo-text {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: inherit;
    background: linear-gradient(90deg, #2038a8 0%, #406efb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    line-height: 1.1;
    letter-spacing: -2px;
}

.search-form-lovable {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

.search-input-wrapper-lovable {
    background: #ffffff;
    border: 1px solid #d1d5db; /* Borde gris claro para destacar */
    border-radius: 20px;
    padding: 16px 24px 12px 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.3s, border-color 0.3s;
}

/* Ensure the text is dark since background is light cream inside the chatbox */
.search-input-wrapper-lovable textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 17px;
    font-weight: 500;
    resize: none;
    outline: none;
    padding: 0;
    font-family: inherit;
    line-height: 1.5;
}

.search-input-wrapper-lovable textarea::placeholder {
    color: #94a3b8;
}

.search-toolbar-lovable {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
}

.toolbar-left, .toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tool-btn {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
    font-family: inherit;
}

.tool-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #1e293b;
}

.tool-btn.icon-only {
    width: 32px;
    height: 32px;
}

.tool-btn.with-text {
    height: 32px;
    padding: 0 20px;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

.btn-lovable-submit {
    background: #475569; /* Dark gray circular button */
    color: #ffffff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.btn-lovable-submit:hover {
    background: #1e293b;
    transform: translateY(-2px);
}

.lovable-nav-btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 24px !important;
    font-size: 13px !important;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.lovable-nav-btn:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Remove default styles from old buttons if they exist inline */
.topbar-flex .user-nav a, .topbar-flex .nav-left a {
    text-decoration: none;
}

.transparent-topbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Image-style Pill Buttons for Dark Mode */
.lovable-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px !important;
    border-radius: 9999px !important; /* Perfect Pill */
    font-size: 15px !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.2px;
}

/* Primary style (Registrarse) */
.lovable-nav-btn.primary {
    background: #406efb !important;
    color: #ffffff !important;
    border: 2px solid #406efb !important;
    box-shadow: 0 4px 14px rgba(64, 110, 251, 0.3);
}
.lovable-nav-btn.primary:hover {
    background: #2850cd !important;
    border-color: #2850cd !important;
    transform: translateY(-2px);
}

/* Outline Accent style (Panel Radar) */
.lovable-nav-btn.outline-accent {
    background: transparent !important;
    color: #406efb !important;
    border: 2px solid #406efb !important;
}
.lovable-nav-btn.outline-accent:hover {
    background: rgba(64, 110, 251, 0.1) !important;
    transform: translateY(-2px);
}

/* Outline White/Gray style (Iniciar Sesion) */
.lovable-nav-btn.outline-base {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}
.lovable-nav-btn.outline-base:hover {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateY(-2px);
}

/* Outline Primary style (Iniciar Sesion - Blue) */
.lovable-nav-btn.outline-primary {
    background: transparent !important;
    color: #406efb !important;
    border: 2px solid #406efb !important;
}
.lovable-nav-btn.outline-primary:hover {
    background: rgba(64, 110, 251, 0.05) !important;
    transform: translateY(-2px);
}

.blue-arrow-btn {
    background: #0ea5e9 !important;
    color: #ffffff !important;
}
.blue-arrow-btn:hover {
    background: #0284c7 !important;
}

@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #112216;
    overflow: hidden;
    z-index: -1; /* Added to keep it behind content */
}

.background span {
    width: 50vmin;
    height: 50vmin;
    border-radius: 50vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 20;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #0a241a;
    top: 49%;
    left: 61%;
    animation-duration: 69s;
    animation-delay: -148s;
    transform-origin: 24vw 17vh;
    box-shadow: 100vmin 0 13.055958220246689vmin currentColor;
}
.background span:nth-child(1) {
    color: #0a241a;
    top: 27%;
    left: 97%;
    animation-duration: 181s;
    animation-delay: -215s;
    transform-origin: -23vw 1vh;
    box-shadow: -100vmin 0 12.660837805720226vmin currentColor;
}
.background span:nth-child(2) {
    color: #152e18;
    top: 30%;
    left: 5%;
    animation-duration: 16s;
    animation-delay: -84s;
    transform-origin: 16vw 21vh;
    box-shadow: -100vmin 0 12.91426612952569vmin currentColor;
}
.background span:nth-child(3) {
    color: #152e18;
    top: 72%;
    left: 91%;
    animation-duration: 98s;
    animation-delay: -38s;
    transform-origin: 25vw 24vh;
    box-shadow: -100vmin 0 13.159643451139257vmin currentColor;
}
.background span:nth-child(4) {
    color: rgba(255, 255, 255, 0.8);
    top: 57%;
    left: 11%;
    animation-duration: 259s;
    animation-delay: -117s;
    transform-origin: 11vw -16vh;
    box-shadow: -100vmin 0 12.555535454589535vmin currentColor;
}
.background span:nth-child(5) {
    color: rgba(255, 255, 255, 0.8);
    top: 25%;
    left: 10%;
    animation-duration: 181s;
    animation-delay: -143s;
    transform-origin: 1vw -16vh;
    box-shadow: -100vmin 0 13.369267907279724vmin currentColor;
}
.background span:nth-child(6) {
    color: rgba(255, 255, 255, 0.8);
    top: 59%;
    left: 61%;
    animation-duration: 214s;
    animation-delay: -72s;
    transform-origin: 25vw 24vh;
    box-shadow: 100vmin 0 13.166073970461902vmin currentColor;
}
.background span:nth-child(7) {
    color: rgba(255, 255, 255, 0.8);
    top: 50%;
    left: 42%;
    animation-duration: 222s;
    animation-delay: -149s;
    transform-origin: 24vw -6vh;
    box-shadow: 100vmin 0 12.576907583335586vmin currentColor;
}
.background span:nth-child(8) {
    color: rgba(255, 255, 255, 0.6);
    top: 63%;
    left: 12%;
    animation-duration: 14s;
    animation-delay: -291s;
    transform-origin: -16vw -10vh;
    box-shadow: -100vmin 0 13.275301980563237vmin currentColor;
}
.background span:nth-child(9) {
    color: rgba(255, 255, 255, 0.8);
    top: 56%;
    left: 12%;
    animation-duration: 16s;
    animation-delay: -231s;
    transform-origin: -17vw 19vh;
    box-shadow: -100vmin 0 12.563354183559646vmin currentColor;
}
.background span:nth-child(10) {
    color: rgba(255, 255, 255, 0.6);
    top: 71%;
    left: 39%;
    animation-duration: 144s;
    animation-delay: -208s;
    transform-origin: 0vw 2vh;
    box-shadow: 100vmin 0 13.363076841702055vmin currentColor;
}
.background span:nth-child(11) {
    color: rgba(255, 255, 255, 0.4);
    top: 44%;
    left: 90%;
    animation-duration: 215s;
    animation-delay: -287s;
    transform-origin: -17vw 7vh;
    box-shadow: 100vmin 0 12.593657911892079vmin currentColor;
}
.background span:nth-child(12) {
    color: rgba(255, 255, 255, 0.4);
    top: 44%;
    left: 53%;
    animation-duration: 164s;
    animation-delay: -15s;
    transform-origin: 22vw 24vh;
    box-shadow: -100vmin 0 13.480753905110763vmin currentColor;
}
.background span:nth-child(13) {
    color: rgba(255, 255, 255, 0.4);
    top: 73%;
    left: 33%;
    animation-duration: 87s;
    animation-delay: -111s;
    transform-origin: 18vw 9vh;
    box-shadow: -100vmin 0 13.058372409293115vmin currentColor;
}
.background span:nth-child(14) {
    color: rgba(255, 255, 255, 0.4);
    top: 56%;
    left: 95%;
    animation-duration: 245s;
    animation-delay: -216s;
    transform-origin: 6vw 12vh;
    box-shadow: -100vmin 0 13.485740647605667vmin currentColor;
}
.background span:nth-child(15) {
    color: rgba(255, 255, 255, 0.6);
    top: 96%;
    left: 94%;
    animation-duration: 85s;
    animation-delay: -131s;
    transform-origin: 7vw 15vh;
    box-shadow: 100vmin 0 12.589501029635276vmin currentColor;
}
.background span:nth-child(16) {
    color: rgba(255, 255, 255, 0.8);
    top: 3%;
    left: 3%;
    animation-duration: 222s;
    animation-delay: -102s;
    transform-origin: -21vw 11vh;
    box-shadow: 100vmin 0 12.766967252121775vmin currentColor;
}
.background span:nth-child(17) {
    color: rgba(255, 255, 255, 0.4);
    top: 80%;
    left: 82%;
    animation-duration: 6s;
    animation-delay: -133s;
    transform-origin: -11vw 11vh;
    box-shadow: -100vmin 0 12.580116913501351vmin currentColor;
}
.background span:nth-child(18) {
    color: rgba(255, 255, 255, 0.6);
    top: 71%;
    left: 57%;
    animation-duration: 258s;
    animation-delay: -186s;
    transform-origin: 16vw 23vh;
    box-shadow: -100vmin 0 12.797276761656045vmin currentColor;
}
.background span:nth-child(19) {
    color: rgba(255, 255, 255, 0.8);
    top: 71%;
    left: 26%;
    animation-duration: 242s;
    animation-delay: -157s;
    transform-origin: 23vw -16vh;
    box-shadow: -100vmin 0 12.523916207612858vmin currentColor;
}
.background span:nth-child(20) {
    color: rgba(255, 255, 255, 0.8);
    top: 26%;
    left: 10%;
    animation-duration: 178s;
    animation-delay: -15s;
    transform-origin: -9vw 12vh;
    box-shadow: -100vmin 0 13.495190197519129vmin currentColor;
}
.background span:nth-child(21) {
    color: rgba(255, 255, 255, 0.8);
    top: 5%;
    left: 46%;
    animation-duration: 305s;
    animation-delay: -277s;
    transform-origin: -24vw 20vh;
    box-shadow: -100vmin 0 13.293095457967233vmin currentColor;
}
.background span:nth-child(22) {
    color: rgba(255, 255, 255, 0.4);
    top: 41%;
    left: 48%;
    animation-duration: 285s;
    animation-delay: -98s;
    transform-origin: -4vw -19vh;
    box-shadow: 100vmin 0 12.925155251223988vmin currentColor;
}
.background span:nth-child(23) {
    color: rgba(255, 255, 255, 0.8);
    top: 34%;
    left: 52%;
    animation-duration: 99s;
    animation-delay: -73s;
    transform-origin: 18vw 9vh;
    box-shadow: -100vmin 0 12.948873384948058vmin currentColor;
}
.background span:nth-child(24) {
    color: rgba(255, 255, 255, 0.8);
    top: 15%;
    left: 26%;
    animation-duration: 106s;
    animation-delay: -219s;
    transform-origin: 5vw -17vh;
    box-shadow: -100vmin 0 12.96480067688997vmin currentColor;
}
.background span:nth-child(25) {
    color: rgba(255, 255, 255, 0.6);
    top: 65%;
    left: 20%;
    animation-duration: 168s;
    animation-delay: -131s;
    transform-origin: -2vw -23vh;
    box-shadow: 100vmin 0 12.551448997688297vmin currentColor;
}
.background span:nth-child(26) {
    color: rgba(255, 255, 255, 0.6);
    top: 83%;
    left: 21%;
    animation-duration: 184s;
    animation-delay: -30s;
    transform-origin: 15vw 14vh;
    box-shadow: -100vmin 0 13.478877425304018vmin currentColor;
}
.background span:nth-child(27) {
    color: rgba(255, 255, 255, 0.8);
    top: 57%;
    left: 8%;
    animation-duration: 6s;
    animation-delay: -40s;
    transform-origin: 21vw 8vh;
    box-shadow: -100vmin 0 13.230163692378065vmin currentColor;
}
.background span:nth-child(28) {
    color: rgba(255, 255, 255, 0.8);
    top: 68%;
    left: 47%;
    animation-duration: 197s;
    animation-delay: -53s;
    transform-origin: 14vw -9vh;
    box-shadow: 100vmin 0 12.989728427037846vmin currentColor;
}
.background span:nth-child(29) {
    color: rgba(255, 255, 255, 0.6);
    top: 82%;
    left: 59%;
    animation-duration: 101s;
    animation-delay: -42s;
    transform-origin: 4vw -14vh;
    box-shadow: 100vmin 0 13.180656794899065vmin currentColor;
}
.background span:nth-child(30) {
    color: rgba(255, 255, 255, 0.6);
    top: 7%;
    left: 7%;
    animation-duration: 96s;
    animation-delay: -97s;
    transform-origin: 14vw 10vh;
    box-shadow: 100vmin 0 12.55397568919869vmin currentColor;
}
.background span:nth-child(31) {
    color: rgba(255, 255, 255, 0.6);
    top: 44%;
    left: 62%;
    animation-duration: 253s;
    animation-delay: -219s;
    transform-origin: -5vw -1vh;
    box-shadow: -100vmin 0 13.110017115703354vmin currentColor;
}
.background span:nth-child(32) {
    color: rgba(255, 255, 255, 0.8);
    top: 7%;
    left: 15%;
    animation-duration: 109s;
    animation-delay: -26s;
    transform-origin: 0vw -22vh;
    box-shadow: -100vmin 0 12.527352986233243vmin currentColor;
}
.background span:nth-child(33) {
    color: rgba(255, 255, 255, 0.8);
    top: 88%;
    left: 37%;
    animation-duration: 112s;
    animation-delay: -211s;
    transform-origin: 6vw -23vh;
    box-shadow: 100vmin 0 13.372504409483795vmin currentColor;
}
.background span:nth-child(34) {
    color: rgba(255, 255, 255, 0.4);
    top: 57%;
    left: 7%;
    animation-duration: 287s;
    animation-delay: -81s;
    transform-origin: 2vw 11vh;
    box-shadow: 100vmin 0 13.238375641209238vmin currentColor;
}
.background span:nth-child(35) {
    color: rgba(255, 255, 255, 0.8);
    top: 33%;
    left: 66%;
    animation-duration: 153s;
    animation-delay: -234s;
    transform-origin: 16vw 13vh;
    box-shadow: 100vmin 0 12.73979809145559vmin currentColor;
}
.background span:nth-child(36) {
    color: rgba(255, 255, 255, 0.4);
    top: 52%;
    left: 35%;
    animation-duration: 155s;
    animation-delay: -203s;
    transform-origin: -11vw 14vh;
    box-shadow: -100vmin 0 13.06813822946242vmin currentColor;
}
.background span:nth-child(37) {
    color: rgba(255, 255, 255, 0.4);
    top: 33%;
    left: 14%;
    animation-duration: 133s;
    animation-delay: -188s;
    transform-origin: 9vw -3vh;
    box-shadow: 100vmin 0 12.855785655345318vmin currentColor;
}
.background span:nth-child(38) {
    color: rgba(255, 255, 255, 0.6);
    top: 29%;
    left: 33%;
    animation-duration: 42s;
    animation-delay: -52s;
    transform-origin: -21vw -23vh;
    box-shadow: 100vmin 0 13.244445304490965vmin currentColor;
}
.background span:nth-child(39) {
    color: rgba(255, 255, 255, 0.4);
    top: 29%;
    left: 70%;
    animation-duration: 171s;
    animation-delay: -74s;
    transform-origin: 11vw 13vh;
    box-shadow: -100vmin 0 12.991714780810938vmin currentColor;
}
.background span:nth-child(40) {
    color: rgba(255, 255, 255, 0.6);
    top: 86%;
    left: 26%;
    animation-duration: 291s;
    animation-delay: -169s;
    transform-origin: 21vw -16vh;
    box-shadow: -100vmin 0 13.3019830980381vmin currentColor;
}
.background span:nth-child(41) {
    color: rgba(255, 255, 255, 0.8);
    top: 43%;
    left: 3%;
    animation-duration: 239s;
    animation-delay: -190s;
    transform-origin: -2vw -19vh;
    box-shadow: -100vmin 0 12.849277209958569vmin currentColor;
}
.background span:nth-child(42) {
    color: rgba(255, 255, 255, 0.4);
    top: 56%;
    left: 29%;
    animation-duration: 216s;
    animation-delay: -6s;
    transform-origin: 5vw 12vh;
    box-shadow: -100vmin 0 13.165745902093718vmin currentColor;
}
.background span:nth-child(43) {
    color: rgba(255, 255, 255, 0.4);
    top: 87%;
    left: 64%;
    animation-duration: 54s;
    animation-delay: -156s;
    transform-origin: 21vw -18vh;
    box-shadow: 100vmin 0 12.718430444427995vmin currentColor;
}
.background span:nth-child(44) {
    color: rgba(255, 255, 255, 0.4);
    top: 3%;
    left: 78%;
    animation-duration: 267s;
    animation-delay: -294s;
    transform-origin: -2vw 14vh;
    box-shadow: 100vmin 0 13.138649129224246vmin currentColor;
}
.background span:nth-child(45) {
    color: rgba(255, 255, 255, 0.6);
    top: 32%;
    left: 91%;
    animation-duration: 112s;
    animation-delay: -40s;
    transform-origin: -23vw -13vh;
    box-shadow: 100vmin 0 13.24884278554915vmin currentColor;
}
.background span:nth-child(46) {
    color: rgba(255, 255, 255, 0.4);
    top: 31%;
    left: 20%;
    animation-duration: 106s;
    animation-delay: -178s;
    transform-origin: 25vw -11vh;
    box-shadow: -100vmin 0 13.470196801352447vmin currentColor;
}
.background span:nth-child(47) {
    color: rgba(255, 255, 255, 0.8);
    top: 5%;
    left: 49%;
    animation-duration: 236s;
    animation-delay: -21s;
    transform-origin: -5vw 2vh;
    box-shadow: -100vmin 0 12.680027950642879vmin currentColor;
}
.background span:nth-child(48) {
    color: rgba(255, 255, 255, 0.6);
    top: 79%;
    left: 69%;
    animation-duration: 151s;
    animation-delay: -163s;
    transform-origin: 20vw -10vh;
    box-shadow: 100vmin 0 13.008842811761978vmin currentColor;
}
.background span:nth-child(49) {
    color: rgba(255, 255, 255, 0.6);
    top: 46%;
    left: 57%;
    animation-duration: 195s;
    animation-delay: -232s;
    transform-origin: 10vw 4vh;
    box-shadow: -100vmin 0 12.879643732591397vmin currentColor;
}

/* --- Coverflow Carousel para Home --- */
.home-coverflow-wrapper {
    margin-top: 50px;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 2;
    padding-top: 30px;
    padding-bottom: 50px;
    perspective: 1000px;
}

.coverflow-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 400px; /* Alto fijo aproximado de las cards */
    transform-style: preserve-3d;
    cursor: grab;
}

.coverflow-container:active {
    cursor: grabbing;
}

.coverflow-item {
    position: absolute;
    width: 280px;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease; /* M??s lento y fluido */
    user-select: none;
    will-change: transform, opacity;
}

/* Evitar clics accidentales mientras se arrastra y ocultar cards inactivas */
.coverflow-item {
    pointer-events: none;
}
.coverflow-item.active {
    pointer-events: auto;
    z-index: 10;
}

/* --- Landing Features Section --- */
.landing-features {
    width: 100%;
    max-width: 1000px;
    padding: 0 20px;
    margin: 100px auto 100px auto;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.landing-how-it-works {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.landing-how-it-works h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--text-main);
}

.landing-how-it-works p {
    font-size: 18px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Bento Grid */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.bento-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.bento-wide {
    grid-column: span 2;
}

.bento-icon {
    font-size: 32px;
    margin-bottom: 20px;
}

.bento-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-main);
}

.bento-card p {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
    .bento-wide {
        grid-column: span 1;
    }
    .landing-how-it-works h2 {
        font-size: 28px;
    }
    .landing-features {
        gap: 60px;
        margin: 60px auto;
    }
}

/* CTA Final */
.landing-cta {
    text-align: center;
    background: linear-gradient(135deg, rgba(235, 238, 245, 0.5), rgba(255, 255, 255, 0.8));
    border-radius: 20px;
    padding: 60px 20px;
    border: 1px solid var(--border-color);
}

.landing-cta h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 30px;
}

/* --- Scroll Snap y Secciones --- */
.snap-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* --- Scroll Reveal Animations --- */
.reveal-element {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}

.reveal-element.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Delays escalonados para Bento Grid */
.bento-grid .reveal-element:nth-child(1) { transition-delay: 0.1s; }
.bento-grid .reveal-element:nth-child(2) { transition-delay: 0.3s; }
.bento-grid .reveal-element:nth-child(3) { transition-delay: 0.5s; }

.landing-features {
    padding-top: 100px;
    padding-bottom: 100px;
}

/* --- NUEVOS SECTORES LANDING (5 SECTORES) --- */

.landing-sector {
    width: 100%;
    min-height: 70vh; /* Reducido para acercar las secciones */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    background-color: #ffffff;
    box-shadow: 0 0 0 100vmax #ffffff;
    clip-path: inset(0 -100vmax);
}

.sector-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Split Layout (50/50) */
.split-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

.split-text {
    flex: 0 1 500px;
    max-width: 500px;
}

.split-visual {
    flex: 0 1 500px;
    display: flex;
    justify-content: center;
}

.split-text h2 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--text-main);
}
body.bg-theme-dark .split-text h2 { color: #fff; }

.split-text p {
    font-size: 18px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 30px;
}

.eyebrow {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}
.check-list li {
    font-size: 16px;
    color: var(--text-main);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.check-list li::before {
    content: '???';
    color: #406efb; /* azul web style */
    font-weight: bold;
    margin-right: 10px;
    font-size: 18px;
}

.btn-primary-purple {
    background: #406efb;
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s ease;
}
.btn-primary-purple:hover {
    background: #2b56d8;
}

/* UI Mocks (Sector 1) */
.mock-ui-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    border: 1px solid #eaeaea;
}
.mock-header {
    background: #f5f5f5;
    padding: 12px 16px;
    display: flex;
    gap: 6px;
}
.mock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e0e0e0;
}
.mock-dot:nth-child(1) { background: #ff5f56; }
.mock-dot:nth-child(2) { background: #ffbd2e; }
.mock-dot:nth-child(3) { background: #27c93f; }
.mock-body {
    padding: 30px;
    background: linear-gradient(135deg, #ffd3b6, #ffaaa5); /* Inspirado en Pitch */
    min-height: 300px;
}
.mock-search-bar {
    background: white;
    padding: 12px 20px;
    border-radius: 30px;
    color: #999;
    font-size: 14px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.mock-card-grid {
    display: flex;
    gap: 15px;
}
.mock-mini-card {
    background: white;
    height: 120px;
    flex: 1;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Bento Grid 2x2 (Sector 2) */
.s2-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
}
.s2-header h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--text-main);
}
.s2-header p {
    font-size: 18px;
    color: var(--text-muted);
    line-height: 1.6;
}
body.bg-theme-dark .s2-header h2 { color: #fff; }

.bento-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.bento-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}
.icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.bento-visual {
    margin-top: 20px;
    background: #f8fafc;
    border-radius: 8px;
    padding: 20px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mock-input {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 10px 15px;
    border-radius: 8px;
    color: #64748b;
    font-size: 14px;
    width: 100%;
}
.mock-compare {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
}
.mock-bar {
    height: 12px;
    border-radius: 6px;
}
.bg-blue { background: #3b82f6; }
.bg-gray { background: #cbd5e1; }
.mock-collections {
    gap: 10px;
}
.mock-collections .mock-img {
    width: 60px;
    height: 60px;
    background: #e2e8f0;
    border-radius: 8px;
}
.mock-alert .mock-msg {
    background: white;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-size: 13px;
    font-weight: 600;
}
.btn-mock {
    background: white;
    border: 1px solid #e2e8f0;
    color: #8a2be2;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* Magia (Sector 3) */
.s3-magic {
    min-height: 40vh; /* Altura menor para que no quede tanto espacio vac??o */
    padding: 60px 20px;
}
.s3-magic .sector-container {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.s3-magic h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--text-main);
}
.s3-magic p {
    font-size: 18px;
    color: var(--text-muted);
    line-height: 1.6;
}
body.bg-theme-dark .s3-magic h2 { color: #fff; }

/* Dashboard Mock (Sector 4) */
.dashboard-mock {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 500px;
    padding: 30px;
    border: 1px solid #eaeaea;
}
.dash-stats {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}
.dash-stat {
    flex: 1;
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px 10px;
    text-align: center;
    font-size: 11px;
    color: #64748b;
}
.dash-stat b {
    font-size: 24px;
    color: #1e293b;
    display: block;
    margin-bottom: 5px;
}
.dash-stat.active {
    background: rgba(64,110,251,0.1); /* azul claro */
    color: #406efb;
}
.dash-stat.active b {
    color: #406efb;
}
.dash-subtitle {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 15px;
}
.dash-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: white;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.dash-row span {
    color: #406efb;
    font-size: 20px;
}

/* Footer (Sector 5) */
.rooda-footer {
    background: #406efb;
    color: #ffffff;
    padding: 60px 20px 20px 20px;
    font-size: 14px;
}
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.footer-brand-col {
    padding-right: 20px;
}
.footer-logo-img {
    max-width: 180px;
    height: auto;
    margin: 0 0 15px 0;
    display: block;
}
.footer-description {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
    color: rgba(255,255,255,0.9);
}
.footer-title {
    color: #ffffff; 
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}
.mt-4 { margin-top: 0px; }
.footer-col p {
    margin-bottom: 8px;
    color: rgba(255,255,255,0.8);
}
.social-icons {
    display: flex;
    gap: 15px;
}
.social-icon {
    width: 36px;
    height: 36px;
    background: #ffffff;
    color: #406efb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
    transition: transform 0.2s, background 0.2s;
}
.social-icon:hover {
    transform: translateY(-3px);
    background: #f1f5f9;
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li {
    margin-bottom: 12px;
    color: rgba(255,255,255,0.8);
}
.footer-links a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}
.footer-contact-info li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-bottom {
    max-width: 1200px;
    margin: 20px auto 0 auto;
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}
.text-highlight {
    color: #f97316 !important;
}

/* Responsive */
@media (max-width: 900px) {
    .split-layout {
        flex-direction: column;
    }
    .bento-grid-2x2 {
        grid-template-columns: 1fr;
    }
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .footer-container {
        grid-template-columns: 1fr;
    }
}

/* Animated Particles Background */
@keyframes particle-move { 100% { transform: translate3d(0, 0, 1px) rotate(360deg); } }
.animated-particles-bg { position: absolute; width: 100vw; height: 100%; left: 50%; transform: translateX(-50%); top: 0; overflow: hidden; z-index: 0; pointer-events: none; background: #ffffff; }
.animated-particles-bg span { width: 50vmin; height: 50vmin; border-radius: 50vmin; backface-visibility: hidden; position: absolute; animation: particle-move; animation-duration: 11s; animation-timing-function: linear; animation-iteration-count: infinite; }
.animated-particles-bg span:nth-child(0) { color: #d3f6fd; top: 64%; left: 72%; animation-duration: 256s; animation-delay: -162s; transform-origin: -20vw 23vh; box-shadow: 100vmin 0 13.077925223372484vmin currentColor; }
.animated-particles-bg span:nth-child(1) { color: #cfe0fa; top: 71%; left: 93%; animation-duration: 53s; animation-delay: -167s; transform-origin: -20vw -9vh; box-shadow: 100vmin 0 12.945851913618904vmin currentColor; }
.animated-particles-bg span:nth-child(2) { color: #cfdffb; top: 91%; left: 95%; animation-duration: 368s; animation-delay: -237s; transform-origin: -23vw -10vh; box-shadow: -100vmin 0 12.769393802143975vmin currentColor; }
.animated-particles-bg span:nth-child(3) { color: #cfe1f9; top: 30%; left: 98%; animation-duration: 306s; animation-delay: -34s; transform-origin: 21vw 17vh; box-shadow: 100vmin 0 13.10149623665343vmin currentColor; }
.animated-particles-bg span:nth-child(4) { color: #d2f6fe; top: 89%; left: 99%; animation-duration: 14s; animation-delay: -1s; transform-origin: -6vw 4vh; box-shadow: -100vmin 0 13.115661556938333vmin currentColor; }
.animated-particles-bg span:nth-child(5) { color: #d2f6fe; top: 29%; left: 93%; animation-duration: 127s; animation-delay: -296s; transform-origin: -18vw 7vh; box-shadow: 100vmin 0 13.068032972416091vmin currentColor; }
.animated-particles-bg span:nth-child(6) { color: #cfe0fa; top: 21%; left: 56%; animation-duration: 225s; animation-delay: -316s; transform-origin: 10vw -20vh; box-shadow: -100vmin 0 13.464742980679258vmin currentColor; }
.animated-particles-bg span:nth-child(7) { color: #d3f6fd; top: 50%; left: 79%; animation-duration: 11s; animation-delay: -303s; transform-origin: 8vw 14vh; box-shadow: 100vmin 0 12.595958111068473vmin currentColor; }
.animated-particles-bg span:nth-child(8) { color: #cfdffb; top: 61%; left: 78%; animation-duration: 182s; animation-delay: -61s; transform-origin: -13vw 14vh; box-shadow: 100vmin 0 12.625501255653472vmin currentColor; }
.animated-particles-bg span:nth-child(9) { color: #cfe0fa; top: 72%; left: 71%; animation-duration: 182s; animation-delay: -28s; transform-origin: 19vw 13vh; box-shadow: -100vmin 0 13.233317452526167vmin currentColor; }
.animated-particles-bg span:nth-child(10) { color: #d3f6fd; top: 70%; left: 94%; animation-duration: 167s; animation-delay: -225s; transform-origin: 16vw -23vh; box-shadow: 100vmin 0 13.4973592962859vmin currentColor; }
.animated-particles-bg span:nth-child(11) { color: #cfe1f9; top: 18%; left: 84%; animation-duration: 301s; animation-delay: -260s; transform-origin: 25vw 15vh; box-shadow: 100vmin 0 12.506196407278175vmin currentColor; }
.animated-particles-bg span:nth-child(12) { color: #cfe1f9; top: 36%; left: 54%; animation-duration: 114s; animation-delay: -124s; transform-origin: 11vw 23vh; box-shadow: -100vmin 0 12.524950537903187vmin currentColor; }
.animated-particles-bg span:nth-child(13) { color: #cfdffb; top: 92%; left: 59%; animation-duration: 175s; animation-delay: -191s; transform-origin: -15vw -10vh; box-shadow: -100vmin 0 12.908073224947245vmin currentColor; }
.animated-particles-bg span:nth-child(14) { color: #cfdffb; top: 83%; left: 10%; animation-duration: 175s; animation-delay: -62s; transform-origin: -5vw -10vh; box-shadow: -100vmin 0 12.827570042340867vmin currentColor; }
.animated-particles-bg span:nth-child(15) { color: #cfdffb; top: 14%; left: 54%; animation-duration: 111s; animation-delay: -166s; transform-origin: -2vw -20vh; box-shadow: 100vmin 0 12.618343749480077vmin currentColor; }
.animated-particles-bg span:nth-child(16) { color: #cfdffb; top: 62%; left: 53%; animation-duration: 27s; animation-delay: -327s; transform-origin: 12vw -1vh; box-shadow: 100vmin 0 13.272320988091213vmin currentColor; }
.animated-particles-bg span:nth-child(17) { color: #cfe1f9; top: 76%; left: 52%; animation-duration: 297s; animation-delay: -16s; transform-origin: 20vw 17vh; box-shadow: 100vmin 0 12.847909967396413vmin currentColor; }
.animated-particles-bg span:nth-child(18) { color: #d3f6fd; top: 6%; left: 79%; animation-duration: 222s; animation-delay: -131s; transform-origin: -13vw 5vh; box-shadow: 100vmin 0 13.305664724625105vmin currentColor; }
.animated-particles-bg span:nth-child(19) { color: #cfe1f9; top: 16%; left: 62%; animation-duration: 87s; animation-delay: -44s; transform-origin: -6vw -8vh; box-shadow: -100vmin 0 13.206481307241733vmin currentColor; }
.animated-particles-bg span:nth-child(20) { color: #d3f6fd; top: 62%; left: 93%; animation-duration: 333s; animation-delay: -323s; transform-origin: 25vw 2vh; box-shadow: -100vmin 0 12.907049076976184vmin currentColor; }
.animated-particles-bg span:nth-child(21) { color: #cfe0fa; top: 83%; left: 57%; animation-duration: 155s; animation-delay: -17s; transform-origin: 0vw -13vh; box-shadow: -100vmin 0 12.5829763867304vmin currentColor; }
.animated-particles-bg span:nth-child(22) { color: #cfe0fa; top: 7%; left: 63%; animation-duration: 202s; animation-delay: -337s; transform-origin: 5vw 9vh; box-shadow: -100vmin 0 13.044645142060142vmin currentColor; }
.animated-particles-bg span:nth-child(23) { color: #d3f6fd; top: 83%; left: 28%; animation-duration: 298s; animation-delay: -106s; transform-origin: -18vw 23vh; box-shadow: 100vmin 0 12.956465789869302vmin currentColor; }
.animated-particles-bg span:nth-child(24) { color: #cfdffb; top: 72%; left: 57%; animation-duration: 274s; animation-delay: -33s; transform-origin: -2vw -17vh; box-shadow: -100vmin 0 12.787685953879118vmin currentColor; }
.animated-particles-bg span:nth-child(25) { color: #d2f6fe; top: 71%; left: 63%; animation-duration: 276s; animation-delay: -269s; transform-origin: 10vw -9vh; box-shadow: 100vmin 0 13.423809091363601vmin currentColor; }
.animated-particles-bg span:nth-child(26) { color: #cfe1f9; top: 28%; left: 76%; animation-duration: 378s; animation-delay: -385s; transform-origin: -14vw -17vh; box-shadow: 100vmin 0 12.792544538833264vmin currentColor; }
.animated-particles-bg span:nth-child(27) { color: #cfe0fa; top: 36%; left: 73%; animation-duration: 59s; animation-delay: -150s; transform-origin: -20vw 13vh; box-shadow: 100vmin 0 12.59591508719408vmin currentColor; }
.animated-particles-bg span:nth-child(28) { color: #d3f6fd; top: 43%; left: 40%; animation-duration: 335s; animation-delay: -286s; transform-origin: -5vw 13vh; box-shadow: 100vmin 0 12.640321460566678vmin currentColor; }
.animated-particles-bg span:nth-child(29) { color: #cfe0fa; top: 38%; left: 21%; animation-duration: 91s; animation-delay: -79s; transform-origin: 25vw -4vh; box-shadow: 100vmin 0 13.351395526236047vmin currentColor; }
.animated-particles-bg span:nth-child(30) { color: #cfe1f9; top: 12%; left: 41%; animation-duration: 192s; animation-delay: -246s; transform-origin: -16vw -16vh; box-shadow: -100vmin 0 13.182028600602713vmin currentColor; }
.animated-particles-bg span:nth-child(31) { color: #d2f6fe; top: 64%; left: 13%; animation-duration: 350s; animation-delay: -304s; transform-origin: 24vw 21vh; box-shadow: 100vmin 0 13.209642565828691vmin currentColor; }
.animated-particles-bg span:nth-child(32) { color: #d3f6fd; top: 4%; left: 49%; animation-duration: 375s; animation-delay: -284s; transform-origin: 10vw 23vh; box-shadow: 100vmin 0 13.47545233033473vmin currentColor; }
.animated-particles-bg span:nth-child(33) { color: #cfdffb; top: 99%; left: 56%; animation-duration: 150s; animation-delay: -266s; transform-origin: -11vw -20vh; box-shadow: 100vmin 0 12.859212819604805vmin currentColor; }
.animated-particles-bg span:nth-child(34) { color: #cfe0fa; top: 97%; left: 88%; animation-duration: 369s; animation-delay: -374s; transform-origin: -17vw 8vh; box-shadow: -100vmin 0 12.749338054485689vmin currentColor; }
.animated-particles-bg span:nth-child(35) { color: #d2f6fe; top: 49%; left: 84%; animation-duration: 338s; animation-delay: -298s; transform-origin: 10vw -8vh; box-shadow: -100vmin 0 12.866518061688177vmin currentColor; }
.animated-particles-bg span:nth-child(36) { color: #cfe0fa; top: 26%; left: 47%; animation-duration: 214s; animation-delay: -232s; transform-origin: -20vw 24vh; box-shadow: -100vmin 0 12.873570265446052vmin currentColor; }
.animated-particles-bg span:nth-child(37) { color: #cfe0fa; top: 17%; left: 77%; animation-duration: 250s; animation-delay: -98s; transform-origin: -21vw 6vh; box-shadow: -100vmin 0 12.631618787755864vmin currentColor; }
.animated-particles-bg span:nth-child(38) { color: #cfdffb; top: 13%; left: 100%; animation-duration: 196s; animation-delay: -372s; transform-origin: -19vw 11vh; box-shadow: 100vmin 0 13.034132548016375vmin currentColor; }
.animated-particles-bg span:nth-child(39) { color: #d3f6fd; top: 43%; left: 62%; animation-duration: 55s; animation-delay: -202s; transform-origin: 0vw 10vh; box-shadow: -100vmin 0 13.13133861955052vmin currentColor; }
.animated-particles-bg span:nth-child(40) { color: #cfe0fa; top: 59%; left: 11%; animation-duration: 318s; animation-delay: -264s; transform-origin: -24vw -19vh; box-shadow: -100vmin 0 12.6632815518587vmin currentColor; }
.animated-particles-bg span:nth-child(41) { color: #cfdffb; top: 30%; left: 2%; animation-duration: 9s; animation-delay: -124s; transform-origin: 0vw 21vh; box-shadow: -100vmin 0 13.187076051796451vmin currentColor; }
.animated-particles-bg span:nth-child(42) { color: #d3f6fd; top: 63%; left: 77%; animation-duration: 226s; animation-delay: -42s; transform-origin: 5vw 4vh; box-shadow: -100vmin 0 13.050422852893524vmin currentColor; }
.animated-particles-bg span:nth-child(43) { color: #cfdffb; top: 26%; left: 73%; animation-duration: 215s; animation-delay: -101s; transform-origin: -23vw 24vh; box-shadow: -100vmin 0 13.273177751098778vmin currentColor; }
.animated-particles-bg span:nth-child(44) { color: #d2f6fe; top: 1%; left: 19%; animation-duration: 78s; animation-delay: -131s; transform-origin: 17vw -13vh; box-shadow: -100vmin 0 12.862973163734983vmin currentColor; }
.animated-particles-bg span:nth-child(45) { color: #d3f6fd; top: 100%; left: 98%; animation-duration: 175s; animation-delay: -323s; transform-origin: 5vw -10vh; box-shadow: -100vmin 0 12.699224292123608vmin currentColor; }
.animated-particles-bg span:nth-child(46) { color: #d3f6fd; top: 22%; left: 19%; animation-duration: 304s; animation-delay: -313s; transform-origin: -2vw -7vh; box-shadow: -100vmin 0 13.341883680032977vmin currentColor; }
.animated-particles-bg span:nth-child(47) { color: #cfdffb; top: 77%; left: 1%; animation-duration: 144s; animation-delay: -326s; transform-origin: 24vw 15vh; box-shadow: 100vmin 0 12.88238810674021vmin currentColor; }
.animated-particles-bg span:nth-child(48) { color: #d3f6fd; top: 53%; left: 41%; animation-duration: 279s; animation-delay: -235s; transform-origin: -22vw 14vh; box-shadow: 100vmin 0 13.320389914650237vmin currentColor; }
.animated-particles-bg span:nth-child(49) { color: #d2f6fe; top: 11%; left: 92%; animation-duration: 53s; animation-delay: -250s; transform-origin: 20vw -9vh; box-shadow: 100vmin 0 13.1563288313551vmin currentColor; }

/* Ajustes para versin mvil (Responsive Design) */
@media (max-width: 768px) {
    .home-hero {
        min-height: auto !important;
        padding-top: 60px !important;
    }
    /* 1. Centrar el area de bsqueda y 3. Mover texto abajo del buscador */
    .chat-hero-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        margin-top: 100px !important;
        padding: 0px !important;
        /* min-height: 70vh !important; removido */
    }
    
    .chat-hero-content .logo-giant {
        order: 1 !important;
        font-size: 2.0rem !important;
        line-height: 1.3 !important;
        margin-bottom: 30px !important;
        max-width: 320px; /* Obligar a que rompa en 3 l??neas en pantallas anchas */
        margin-left: auto !important;
        margin-right: auto !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Reducir todos los t??tulos grandes en la home a 2rem para m??vil */
    h1, .title-giant, .lovable-title {
        font-size: 2.0rem !important;
    }
    /* Reducir a??n m??s los h2 (como ??ltimos autos agregados) para que entren en 1 l??nea */
    h2, .section-title {
        font-size: 1.5rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .chat-hero-content .search-form-lovable {
        order: 2 !important;
        margin-bottom: 20px !important;
    }
    
    .chat-hero-content .subtitle-giant {
        order: 3 !important;
        font-size: 1rem !important;
        margin-top: 10px !important;
        padding: 0 15px !important;
    }
    
    .chat-hero-content .lovable-badge {
        order: 4 !important;
        margin-top: 5px !important;
    }

    /* 4. Achicar logo a la izquierda y esconder men de escritorio */
    .topbar .nav-left img {
        height: 30px !important; /* Achicar logo */
    }
    
    .topbar-flex {
        padding-top: 15px !important;
        align-items: flex-start !important;
    }

    .topbar .user-nav {
        display: none !important; /* Esconder men en mvil */
    }

    /* Navegacin inferior flotante en mvil */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: white;
        border-radius: 40px;
        padding: 8px 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        z-index: 999;
        gap: 25px;
        align-items: center;
    }
    
    .mobile-bottom-nav a {
        color: #64748b;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        height: 45px;
        transition: all 0.3s ease;
    }
    
    .mobile-bottom-nav a.active {
        background-color: #5b21b6; /* Color prpura de la imagen */
        color: white;
        border-radius: 30px;
        padding: 0 20px;
            font-size: 1rem;
        font-weight: 600;
        gap: 8px;
    }
    
    .mobile-bottom-nav a.active span {
        display: inline-block;
    }
    
    .mobile-bottom-nav a:not(.active) span {
        display: none;
    }
            /* Agrandar cuadro de busqueda y achicar texto a 2 lineas */
    #search-input-ai {
        font-size: 17px !important;
        height: 70px !important;
        line-height: 1.4 !important;
        padding-bottom: 15px !important;
        white-space: pre-wrap !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    .search-input-wrapper-lovable {
        min-height: 130px !important;
        border-radius: 20px !important;
    }
}

/* Esconder nav flotante en escritorio */
.mobile-bottom-nav {
    display: none;
}

/* Utilidades de texto responsivo */
.mobile-text { display: none; }
@media (max-width: 768px) {
    .desktop-text { display: none; }
    .mobile-text { display: inline; }
}
/* Nuevos ajustes moviles */
@media (max-width: 768px) {
    .hide-on-mobile { display: none !important; }
    .latest-cars-wrapper { 
        padding-left: 0px !important; 
        padding-right: 0px !important; 
    }
    .card-price {
        font-size: 22px !important;
    }
}
/* Ajustes de toolbar de resultados en movil */
@media (max-width: 768px) {
    .results-toolbar {
        flex-direction: row !important;
        align-items: center !important;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
    }
    .results-toolbar::-webkit-scrollbar {
        display: none;
    }
    .toolbar-left, .toolbar-right {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: auto !important;
    }
    /* Reducir gap si es necesario para que entre todo */
    .toolbar-left {
        gap: 10px !important;
    }
    .select-toolbar {
        width: auto !important;
        padding: 8px 30px 8px 12px !important;
    }
}
/* Reducir espacio entre tags y barra de herramientas */
@media (max-width: 768px) {
    .results-hero {
        padding-bottom: 0px !important;
    }
    .results-view {
        padding-top: 0px !important;
    }
    /* El toggle ocupa menos espacio si quitamos margen del label */
    .toggle-switch-container {
        margin-bottom: 0 !important;
        gap: 0 !important; /* Si usamos el span que se oculta, no necesitamos gap */
    }
    .results-toolbar {
        margin-top: 5px; 
    }
}
/* Reducir espacio entre nlp-tags y toolbar, y hacer tags deslizable */
@media (max-width: 768px) {
    .results-toolbar {
        padding-top: 0px !important;
        margin-top: 0px !important;
    }
    .nlp-tags {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 5px !important; /* para un respiro visual abajo si se desliza */
        -webkit-overflow-scrolling: touch; /* Suavizar scroll en iOS */
    }
    .nlp-tags::-webkit-scrollbar {
        display: none;
    }
    .nlp-tag {
        white-space: nowrap !important;
        flex-shrink: 0 !important; /* Evitar que se encojan */
    }
}
@media (max-width: 768px) {
    .results-view {
        margin-top: 5px !important;
    }
}
/* ========================================================
   MODAL DE DETALLE (BOTTOM SHEET)
   ======================================================== */
.mobile-detail-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999;
}
.mobile-detail-modal .modal-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mobile-detail-modal .modal-content {
    position: absolute;
    bottom: -100%;
    left: 0; width: 100%;
    height: 90vh; /* Altura del popup */
    background: #fff;
    border-radius: 20px 20px 0 0;
    transition: bottom 0.3s ease;
    overflow: hidden;
}
.mobile-detail-modal.open .modal-overlay {
    opacity: 1;
}
.mobile-detail-modal.open .modal-content {
    bottom: 0;
}
#modal-iframe {
    width: 100%; height: 100%;
    border: none;
}

/* Estilos dentro de detalle.php cuando es Modal */
body.mode-results:has(.modal-specific-header) {
    background: #fff !important;
}
.hide-in-modal {
    display: none !important;
}

.modal-specific-header {
    padding: 15px 20px;
}
.drag-handle {
    width: 40px; height: 5px;
    background: #e2e8f0;
    border-radius: 3px;
    margin: 0 auto 15px auto;
}
.modal-icon-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.modal-icons-left, .modal-icons-right {
    display: flex; gap: 15px;
}
.icon-btn {
    background: none; border: none; font-size: 20px; color: #64748b; cursor: pointer; padding: 0;
}
.modal-car-title {
    font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 15px; line-height: 1.3;
}
.modal-carousel {
    width: 100%; height: 100%; position: relative;
}
.modal-carousel-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: block; object-fit: cover; object-position: center;
}
.modal-carousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.7); border: none; width: 30px; height: 30px; border-radius: 50%;
    font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.modal-carousel-btn.prev { left: 10px; }
.modal-carousel-btn.next { right: 10px; }
.modal-carousel-counter {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 12px;
}
.modal-price {
    text-align: center; font-size: 24px; font-weight: 800; color: #4c1d95; margin-bottom: 20px;
}
.modal-action-buttons {
    display: flex; flex-direction: column; gap: 10px;
}
.modal-btn {
    width: 100%; padding: 12px; border-radius: 8px; font-size: 16px; font-weight: 600; text-align: center; cursor: pointer; text-decoration: none; border: 1px solid transparent;
}
.modal-btn-contact {
    background: #16a34a; color: #fff; display: flex; justify-content: center; align-items: center; gap: 8px;
}
.modal-btn-report {
    background: #fff; color: #64748b; border-color: #cbd5e1;
}
.modal-divider {
    border: none; border-top: 1px solid #f1f5f9; margin: 0;
}
/* Nuevos estilos para carrusel modal del nuevo dise??o */
.modal-new-arrow {
    background: rgba(0,0,0,0.5) !important;
    color: white !important;
    height: 40px !important;
    width: 25px !important;
    border-radius: 0 !important;
}
.modal-new-arrow.prev { left: 0 !important; border-radius: 0 4px 4px 0 !important; }
.modal-new-arrow.next { right: 0 !important; border-radius: 4px 0 0 4px !important; }

.modal-new-counter {
    background: rgba(0,0,0,0.6) !important;
    border-radius: 12px !important;
    padding: 2px 12px !important;
    font-size: 11px !important;
    bottom: 8px !important;
    letter-spacing: 1px;
}
/* Eliminar m??rgenes y padding del contenedor en modo modal (m??vil) */
@media (max-width: 768px) {
    body:has(.modal-specific-header) .detail-view {
        margin-top: 0 !important;
    }
    body:has(.modal-specific-header) main.container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* Agregar padding interno a las secciones del modal porque el contenedor ya no lo tiene */
@media (max-width: 768px) {
    body:has(.modal-specific-header) .detail-section,
    body:has(.modal-specific-header) .similares-section,
    body:has(.modal-specific-header) .features-container,
    body:has(.modal-specific-header) .disclaimer-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
/* Sombra para distinguir el popup del fondo */
.mobile-detail-modal .modal-content {
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.2);
    border-top: 1px solid #e2e8f0;
}

/* Color azul para el nav inferior (igual que el buscar) */
.mobile-bottom-nav a.active {
    background-color: #2563eb !important; /* Azul primario */
    color: #ffffff !important;
}
@media (max-width: 768px) {
    .container {
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 150px, #ffffff 100%);
    }
}

@media (max-width: 768px) {
    .modal-content.light-theme .modal-body {
        flex-direction: column !important;
    }
    .modal-content.light-theme .modal-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        flex-direction: row !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 10px 5px !important;
        overflow-x: auto;
        justify-content: space-between;
    }
    .modal-sidebar-text {
        display: none !important;
    }
    .modal-content.light-theme .modal-sidebar-item {
        justify-content: center !important;
        padding: 10px !important;
        flex: 1;
        border-radius: 12px !important;
    }
    .modal-sidebar-icon {
        margin-top: 0 !important;
        font-size: 22px !important;
    }
    .modal-content.light-theme .modal-main {
        padding: 20px 15px !important;
    }
    .modal-content.light-theme .modal-input-group {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    /* Aplanar tarjetas est??ticas (Privacidad, T??rminos, Info) en m??viles */
    main.container > div[style*="border-radius:12px"],
    main.container > div.card {
        padding: 20px 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
    
    /* Reglas espec??ficas para acerca.php en m??viles */
    .acerca-card {
        padding: 0 !important; /* El padding est?? en .acerca-text */
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .acerca-img {
        border-radius: 12px !important;
        width: calc(100% - 40px) !important; /* Darle m??rgenes para que se note el borde redondeado */
        margin: 0 20px !important;
    }
    .acerca-text {
        padding: 20px 0 !important;
    }
    
    body.mode-results:has(> main.container > div[style*="border-radius:12px"]),
    body.mode-results:has(> main.container > div.card),
    body.mode-results:has(.acerca-card) {
        background: #fff !important;
    }
}

/* SEO Breadcrumbs */

/* SEO Breadcrumbs (Igual a detail-breadcrumb) */
.seo-breadcrumbs { font-size: 12px; color: var(--text-muted, #6c757d); margin-bottom: 5px; }
.seo-breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.seo-breadcrumbs li { display: inline-flex; align-items: center; }
.seo-breadcrumbs li + li::before { content: '/'; margin: 0 5px; color: inherit; }
.seo-breadcrumbs a { color: var(--accent-blue, #0d6efd); text-decoration: none; }
.seo-breadcrumbs a:hover { text-decoration: underline; }