:root{
    --ligth: #F8FAFC;
    --blue: #e32652;
    --darkblue: #000000;
    --green: #059669
}


body {
    font-family: "Manrope", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif !important;
}

/* =========================================================
   Single post — tipografía del contenido
   ========================================================= */

.cym-post-content {
    font-size: 1rem;
    line-height: 1.85;
    color: white;
}

.cym-post-content h2,
.cym-post-content h3,
.cym-post-content h4 {
    font-family: 'Playfair Display', serif;
    color: white;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.cym-post-content h2 { font-size: 1.75rem; }
.cym-post-content h3 { font-size: 1.35rem; }
.cym-post-content h4 { font-size: 1.1rem; }

.cym-post-content p {
    margin-bottom: 1.4rem;
}

.cym-post-content a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cym-post-content a:hover {
    opacity: 0.75;
}

.cym-post-content ul,
.cym-post-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.4rem;
}

.cym-post-content ul { list-style: disc; }
.cym-post-content ol { list-style: decimal; }

.cym-post-content li {
    margin-bottom: 0.4rem;
}

.cym-post-content blockquote {
    border-left: 3px solid var(--blue);
    padding: 0.75rem 1.25rem;
    margin: 1.75rem 0;
    background: #f8fafc;
    border-radius: 0 0.5rem 0.5rem 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #475569;
}

.cym-post-content img {
    max-width: 100%;
    border-radius: 0.75rem;
    margin: 1.5rem 0;
}

.cym-post-content hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 2rem 0;
}

.cym-post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.4rem;
    font-size: 0.9rem;
}

.cym-post-content th,
.cym-post-content td {
    border: 1px solid #e2e8f0;
    padding: 0.6rem 0.9rem;
    text-align: left;
}

.cym-post-content th {
    background: #f1f5f9;
    font-weight: 600;
    color: white;
}

/* =========================================================
   Contact Form 7 — Cielo y Mar styles
   ========================================================= */

.cym-cf7-wrapper .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cym-cf7-wrapper label {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b; /* slate-500 */
}

.form-input,
.form-textarea {
    width: 100%;
    border: 1px solid #cad1db; /* slate-200 */
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-family: "Manrope", sans-serif;
    color: #334155; /* slate-700 */
    background-color: #f8fafc; /* slate-50 */
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    max-height: 100px;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #94a3b8; /* slate-400 */
}

.form-input:focus,
.form-textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 1px var(--blue);
}

.form-textarea {
    resize: none;
    min-height: 130px;
}

.form-submit {
    width: 100%;
    background-color: var(--blue);
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 0.25rem;
}

.form-submit:hover {
    opacity: 0.85;
}

/* Mensajes de validación CF7 */
.cym-cf7-wrapper .wpcf7-not-valid-tip {
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 0.25rem;
}

.cym-cf7-wrapper .wpcf7-response-output {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-family: "Manrope", sans-serif;
}

.cym-cf7-wrapper .wpcf7-mail-sent-ok {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.cym-cf7-wrapper .wpcf7-mail-sent-ng,
.cym-cf7-wrapper .wpcf7-aborted,
.cym-cf7-wrapper .wpcf7-validation-errors {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* =========================================================
   WordPress blog pagination
   ========================================================= */

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    font-family: "Manrope", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.nav-links .page-numbers:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.nav-links .page-numbers.current {
    background-color: var(--blue);
    border-color: var(--blue);
    color: #ffffff;
}

.nav-links .page-numbers.dots {
    border: none;
    background: none;
    color: #94a3b8;
    min-width: auto;
}

/* =========================================================
   IDX Flex MLS — Overrides para el tema Cielo y Mar
   ========================================================= */

/* Full width + estilo del tema */
.flexmls_connect__search.flexmls-v2-widget {
    max-width: 100% !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: none;
    overflow: hidden;
}

.flexmls_connect__container, .flexmls_connect__carousel_nav.clearfix {
    background-color: #0a0a0a;
    border: 1px solid #0a0a0a;
    color: white;
}

.flexmls_connect__carousel a.next, .flexmls_connect__carousel a.previous, .flexmls_connect__disclaimer a, .flexmls_connect__count{
    color: white;
}

.flexmls_connect__listing .caption{
    padding: 12px;
}

/* Botón Search: color del tema */
.flexmls_connect__search_v2_submit[type="submit"] {
    background: var(--blue) !important;
    color: #ffffff !important;
    font-family: "Manrope", sans-serif !important;
    font-weight: 600 !important;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.flexmls_connect__search_v2_submit[type="submit"]:hover {
    opacity: 0.85 !important;
}

/* Enlace "More Search Options" */
.flexmls_connect__search_v2_links a {
    font-size: 0.72rem;
    color: #64748b !important;
    font-family: "Manrope", sans-serif;
    text-decoration: none;
    white-space: nowrap;
}
.flexmls_connect__search_v2_links a:hover {
    color: var(--blue) !important;
}

.flexmls_connect__search_results_v2 .flexmls-listing .flexmls-last-modified-and-idx-wrapper .flexmls-idx-compliance-badge{
    max-width: 40px;
}

.flexmls-idx-compliance-badge{
    max-width: 50px;
    
}

.flexmls_connect__search_results_v2 .flexmls-listing .flexmls-content-wrapper, 
.flexmls-count-and-filters-wrapper, 
.flexmls_connect__idx_disclosure_text.flexmls_connect__disclaimer_text, .flexmls_connect__sr_pagination,
.flexmls-price.flexmls-title-large, .flexmls-details,
.disclosure-section.listing-section, .flexmls-description, .property-details {
    color: white;
}

.flexmls-btn.flexmls-btn-primary.flexmls-primary-color-background{
    display: none;
}

#cym-search-modal-panel .flexmls_connect__search_v2_submit{
    margin-top: 15px;
}

.logged-in-as, .comment-body{
   color: white; 
}

.edit-link, .logged-in-as a{
    color: var(--blue);
    text-decoration: underline;
}

/* ── Móvil: layout vertical con padding ─────────────────── */
@media (max-width: 1023px) {
    .flexmls_connect__search.flexmls-v2-widget {
        padding: 20px !important;
    }
    .flexmls_connect__search_v2_title {
        font-family: 'Playfair Display', serif;
        font-size: 1.1rem;
        color: var(--darkblue);
        margin-bottom: 14px;
    }
    .flexmls_connect__search_v2_submit[type="submit"] {
        width: 100%;
        padding: 12px 16px;
        font-size: 0.875rem;
    }
}

/* ── Escritorio: layout horizontal (solo en .cym-hero-search) ── */
@media (min-width: 1024px) {

    /* Ocultar título "Search" en desktop */
    .cym-hero-search .flexmls_connect__search_v2_title {
        display: none;
    }

    /* Hacer el formulario una fila flex */
    .cym-hero-search .flexmls_connect__search_v2 form {
        display: flex;
        align-items: stretch;
    }

    /* Campo de ubicación: ocupa todo el espacio disponible */
    .cym-hero-search .flexmls_connect__search_field.location {
        flex: 1 1 0%;
        min-width: 0;
        padding: 14px 18px;
        border-right: 1px solid #e2e8f0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .flexmls_connect__search_field{
        margin-bottom: 0px;
    }

    .cym-hero-search .flexmls_connect__search_field.location label {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #64748b;
        font-family: "Manrope", sans-serif;
    }

    /* Select2: forzar ancho completo */
    .cym-hero-search .flexmls_connect__search_field.location .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .cym-hero-search .flexmls_connect__search_field.location .select2-selection {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        min-height: 28px;
        height: auto !important;
    }

    /* Lista interna: wrap para que los chips ocupen su espacio */
    .cym-hero-search .flexmls_connect__search_field.location .select2-selection__rendered {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 2px 0 !important;
        border: 1px solid #d9d9d9;
        border-radius: 10px;
    }

    /* Chips de ítems seleccionados */
    .cym-hero-search .flexmls_connect__search_field.location .select2-selection__choice {
        display: inline-flex !important;
        align-items: center !important;
        background: rgba(227, 38, 82, 0.15) !important;
        border: 1px solid rgba(227, 38, 82, 0.35) !important;
        border-radius: 5px !important;
        padding: 2px 8px !important;
        font-size: 0.78rem !important;
        font-family: "Manrope", sans-serif !important;
        color: #e32652 !important;
        line-height: 1.5 !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    .cym-hero-search .flexmls_connect__search_field.location .select2-selection__choice__remove {
        color: #e32652 !important;
        margin-right: 5px !important;
        font-weight: 700 !important;
    }

    /* Campo de texto del select2 */
    .cym-hero-search .flexmls_connect__search_field.location .select2-search__field {
        font-size: 0.875rem;
        font-family: "Manrope", sans-serif;
        color: #1e293b;
        border: none;
        height: 55px;
        padding-left: 10px;
    }

    /* Wrapper de filtros: inline con la ubicación */
    .cym-hero-search .flexmls_connect__filters_wrapper,
    .cym-hero-search .flexmls_connect__righthand_filters_wrapper {
        display: flex;
        align-items: stretch;
    }

    /* Campo Sort By */
    .cym-hero-search .flexmls_connect__search_v2_sort_by.flexmls_connect__search_v2_field_group {
        padding: 14px 18px;
        border-right: 1px solid #e2e8f0;
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 190px;
    }

    .cym-hero-search .flexmls_connect__search_v2_sort_by label {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #64748b;
        font-family: "Manrope", sans-serif;
    }

    .cym-hero-search .flexmls_connect__search_v2_sort_by select {
        background: transparent;
        font-size: 0.875rem;
        color: #1e293b;
        outline: none;
        cursor: pointer;
        font-family: "Manrope", sans-serif;
        padding: 0;
    }

    /* Área del botón de búsqueda */
    .cym-hero-search .flexmls_connect__search_v2_links {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 12px;
        flex-shrink: 0;
    }

    .cym-hero-search .flexmls_connect__search_v2_submit[type="submit"] {
        padding: 10px 28px;
        font-size: 0.875rem;
        white-space: nowrap;
        border-radius: 8px;
    }
}


/* =========================================================
   GTranslate Language Switcher — Estilos del tema
   ========================================================= */

.gt_switcher {
    font-family: "Manrope", sans-serif;
}

/* ── Móvil: neutraliza el position:absolute y white-space:nowrap
   que GTranslate inyecta como style="" inline en su contenedor.
   Esto evita que el switcher se salga de la pantalla. ───────── */
@media (max-width: 1023px) {

    /* El <li> necesita altura explícita porque su único hijo
       es absolute — al hacerlo static recupera height auto */
    #mobile-menu .menu-item-gtranslate {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    /* Contenedor inyectado por GTranslate */
    #mobile-menu .menu-item-gtranslate > div {
        position: static !important;
        white-space: normal !important;
        width: auto !important;
    }

    /* El switcher en sí: alineado a la derecha igual que los links */
    #mobile-menu .gt_switcher {
        text-align: right;
        font-size: 0.9rem;
    }

    /* Asegura que el dropdown de idiomas no se salga por la derecha */
    #mobile-menu .gt_option {
        right: 0 !important;
        left: auto !important;
        min-width: 130px;
    }
}



/* =========================================================
   Select2 — z-index fix para modales
   El dropdown de select2 se añade al <body> con z-index ~1051
   por defecto, que queda debajo de nuestros modales (z-9999).
   ========================================================= */

.select2-container--open .select2-dropdown {
    z-index: 100000 !important;
}


/* =========================================================
   Splide — Testimonios (#cym-testimonials-splide)
   ========================================================= */

#cym-testimonials-splide .splide__arrow {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    transition: background 0.2s, border-color 0.2s;
    top: 50%;
}

#cym-testimonials-splide .splide__arrow:hover {
    background: #e32652;
    border-color: #e32652;
}

#cym-testimonials-splide .splide__arrow svg {
    fill: #fff;
    width: 0.9rem;
    height: 0.9rem;
}

#cym-testimonials-splide .splide__arrow--prev {
    left: -1.25rem;
}

#cym-testimonials-splide .splide__arrow--next {
    right: -1.25rem;
}

#cym-testimonials-splide .splide__pagination {
    margin-top: 1.75rem;
    gap: 0.5rem;
    position: static;
    padding: 0;
}

#cym-testimonials-splide .splide__pagination__page {
    background: rgba(255, 255, 255, 0.2);
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    transition: background 0.2s, width 0.2s;
    opacity: 1;
}

#cym-testimonials-splide .splide__pagination__page.is-active {
    background: #e32652;
    width: 20px;
    transform: none;
}


/* =========================================================
   IDX Modal — Dark theme overrides
   Fuerza tema oscuro dentro del panel de búsqueda avanzada
   ========================================================= */

/* Contenedor principal del widget */
#cym-search-modal-panel .flexmls_connect__search.flexmls-v2-widget,
#cym-search-modal-panel .flexmls-v2-widget {
    background: transparent !important;
    box-shadow: none !important;
}

/* Fondo de inputs y selects */
#cym-search-modal-panel input,
#cym-search-modal-panel select,
#cym-search-modal-panel textarea {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
}

#cym-search-modal-panel input::placeholder,
#cym-search-modal-panel textarea::placeholder {
    color: #64748b !important;
}

#cym-search-modal-panel input:focus,
#cym-search-modal-panel select:focus {
    border-color: #e32652 !important;
    box-shadow: 0 0 0 1px #e32652 !important;
    outline: none !important;
}

/* Labels y textos */
#cym-search-modal-panel label,
#cym-search-modal-panel .flexmls_connect__search_v2_title,
#cym-search-modal-panel .flexmls_connect__search_v2_field_group label {
    color: #94a3b8 !important;
}

/* Select2 dentro del modal */
#cym-search-modal-panel .select2-selection,
#cym-search-modal-panel .select2-selection--multiple,
#cym-search-modal-panel .select2-selection--single {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

#cym-search-modal-panel .select2-selection__rendered,
#cym-search-modal-panel .select2-selection__placeholder {
    color: #94a3b8 !important;
}

#cym-search-modal-panel .select2-selection__arrow b {
    border-top-color: #94a3b8 !important;
}

/* Dropdown del select2 (se renderiza en body) */
.select2-dropdown {
    background-color: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.select2-results__option {
    color: #cbd5e1 !important;
    background-color: transparent !important;
}

.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"] {
    background-color: rgba(227, 38, 82, 0.15) !important;
    color: #e32652 !important;
}

.select2-search--dropdown .select2-search__field {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
}

/* Select nativo — opciones */
#cym-search-modal-panel select option {
    background-color: #1e1e1e;
    color: #cbd5e1;
}

/* Separadores internos */
#cym-search-modal-panel .flexmls_connect__search_v2_field_group,
#cym-search-modal-panel .flexmls_connect__search_field {
    border-color: rgba(255, 255, 255, 0.08) !important;
}


/* =========================================================
   Comments — Cielo y Mar dark theme
   ========================================================= */

/* Reset de márgenes del article/footer que WordPress inyecta */
.comment-body,
.comment-meta,
.comment-author,
.comment-metadata,
.comment-content,
.reply {
    all: unset;
    display: block;
}

/* Ocultar el "says:" que WordPress añade */
.comment-author .says {
    display: none;
}

/* Avatar dentro del walker — los estilos Tailwind los controla el PHP,
   pero nos aseguramos de que no herede margin/padding extraños */
.comment-author img.avatar {
    display: block;
    margin: 0;
}

/* Reply link generado por WordPress */
.comment-reply-link {
    color: #e32652;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.comment-reply-link:hover {
    opacity: 0.7;
}

/* Cancel reply link */
#cancel-comment-reply-link {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s;
}
#cancel-comment-reply-link:hover {
    color: #ffffff;
}

/* Cuerpo del comentario: párrafos */
.cym-comment-body p,
.comment-content p {
    margin-bottom: 0.5rem;
    color: #cbd5e1;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.65;
}
.cym-comment-body p:last-child,
.comment-content p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   Media queries
   ========================================================= */

@media (max-width: 992px) {


}