/* ==========================================================================
   RE/MAX Litoral – Static Home Styles
   Reemplaza los estilos de Elementor con CSS plano semántico.
   ========================================================================== */

/* ---------- Design Tokens (antes Elementor kit-1440) ---------- */
:root {
    --color-primary: #B91325;
    --color-secondary: #27458C;
    --color-text: #3E3E3D;
    --color-accent: #B91325;
    --color-white: #FFFFFF;
    --color-dark-blue-1: #1F356A;
    --color-dark-blue-2: #233D7B;
    --color-dark-blue-3: #27458C;
    --color-red-1: #91161C;
    --color-red-2: #A71521;
    --color-red-3: #B91325;
    --font-primary: "Montserrat", sans-serif;
    --font-secondary: "Roboto", sans-serif;
    --fw-primary: 600;
    --fw-text: 400;
    --fw-accent: 500;
    --container-max: 1140px;
    --bs-text-opacity: .5;
    --bs-offsetHeight: -28px;
}

/* Retrocompat de variables Elementor en custom.js / inline SVG */
body {
    --e-global-color-primary: var(--color-primary);
    --e-global-color-secondary: var(--color-secondary);
    --e-global-color-text: var(--color-text);
    --e-global-color-accent: var(--color-accent);
    --e-global-typography-primary-font-family: var(--font-primary);
    --e-global-typography-primary-font-weight: var(--fw-primary);
    --e-global-typography-text-font-family: var(--font-primary);
    --e-global-typography-text-font-weight: var(--fw-text);
    --e-global-typography-secondary-font-family: var(--font-primary);
    --e-global-typography-secondary-font-weight: var(--fw-text);
    --e-global-typography-accent-font-family: var(--font-primary);
    --e-global-typography-accent-font-weight: var(--fw-accent);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-primary);
    font-weight: var(--fw-text);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--fw-primary);
    margin: 0 0 .5rem;
    line-height: 1.2;
    color: var(--color-primary);
}

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
}

section {
    padding: 2rem 11rem;
}

.section { position: relative; }

/* ---------- Utilities ---------- */
.color-primary   { color: var(--color-primary); }
.color-secondary { color: var(--color-secondary); }
.color-text      { color: var(--color-text); }
.text-center     { text-align: center; }
.text-left       { text-align: left; }
.d-none          { display: none !important; }
.overflow-hidden { overflow: hidden; }

/* ---------- 1. LOGO (absolute top-left) ---------- */
.site-logo {
    z-index: 5;
    display: flex;
    width: 100%;
}
.site-logo img {
    width: 76%;
    max-width: 228px;
    height: auto;
    left: -23px;
    position: relative;
}

/* ---------- 2. HERO ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    overflow: hidden;
}
.hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-text);
    opacity: 0.2;
    z-index: 1;
}
.hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.hero__content h1, .hero__content h2, .hero__content h3, .hero__content h4, .hero__content h5, .hero__content h6 {
    text-transform: unset;
}
.hero__col-left {
    width: 55%;
    display: flex;
    flex-direction: column;
}
.hero__col-right {
    width: 45%;
}
.hero__spacer {
    height: 175px;
}
.hero__chat {
    margin-bottom: 50px;
}
.hero__text h1 {
    color: var(--color-white);
    font-family: var(--font-primary);
    font-weight: 400;
}
.typewriterContainer {
    height: 100px;
}
.hero__cta .btn-primary {
    display: inline-block;
    padding: 12px 24px;
    font-family: var(--font-primary);
    font-weight: var(--fw-accent);
    font-size: .9rem;
    color: var(--color-white);
    background-color: var(--color-accent);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity .3s;
    text-decoration: none;
}
.hero__cta .btn-primary:hover { opacity: .85; }

/* ---------- WhatsApp chat bubble ---------- */
.msg { width: 100%; display: block; overflow: hidden; }
.bubble {
    float: left;
    max-width: 75%;
    width: auto;
    background: #ebebeb;
    border-radius: 5px;
    position: relative;
    margin: 10px 0 3px 10px;
    box-shadow: 0 2px 1px rgba(0,0,0,.2);
}
.bubble .txt { padding: 8px 0; width: 100%; }
.bubble .txt .name {
    font-weight: 600;
    font-size: 14px;
    display: inline-table;
    padding: 0 0 0 15px;
    margin: 0 0 4px;
    color: var(--color-primary);
}
.bubble .txt .message {
    font-size: 14px;
    font-weight: 500;
    padding: 0 15px;
    color: #2b2b2b;
    display: table;
}
.bubble .txt .timestamp,
.bubble .txt .timestamp2 {
    font-size: 11px;
    padding: 0 15px 0 0;
    display: table;
    float: right;
    text-transform: uppercase;
    color: #999;
}
.bubble-arrow {
    position: absolute;
    float: left;
    left: -11px;
    top: 0;
}
.bubble-arrow::after {
    content: "";
    position: absolute;
    border-top: 15px solid #ebebeb;
    border-left: 15px solid transparent;
    border-radius: 4px 0 0 0;
}

/* ---------- 3. MISSION / LOGO ANIMATION ---------- */
.mission {
    position: relative;
}
.mission__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-text);
    opacity: 0.2;
    z-index: 0;
}
.mission__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.mission__svg-col {
    width: 33.33%;
    padding: 30px 30px 30px 0;
}
.mission__text-col {
    width: 50%;
    padding-left: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mission__text-col h1 {
    color: var(--color-text);
    font-size: 29px;
}
.mission__spacer-col {
    width: 16.67%;
}
#animation-logo-section svg {
    width: 100%;
    height: auto;
}
#isologo .remax-letter,
#isologo .litoral-letter,
#superate .superate-letter {
    opacity: 0;
}

/* ---------- 4. LEADERS / ICONS SECTION ---------- */
.leaders {
}
.leaders__inner {
    padding: 0;
}

#lideres-section section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: space-between;
}

#lideres-section h1,
.section-title {
    /* opacity: 0; */
    text-align: center;
    font-size: 29px;
    font-family: var(--font-primary);
    font-weight: var(--fw-primary);
    color: var(--color-text);
}

#faq-section {
    background-color: #d8d8d8;
}

p.ask {
    font-weight: 600;
    margin-bottom: 0.3rem;
}

#lideres-section .subtitle {
    opacity: 0;
}

.subtitle {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    border-radius: 10px;
    text-align: left;
}
#lideres-section .subtitles {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ---------- 5. COUNTERS (oculto por defecto, pero con estilos) ---------- */
.counters {
    min-height: 50vh;
    padding: 1.5rem 1rem;
    background-color: var(--color-white);
    display: none;
}
.counters__title h1 {
    color: var(--color-text);
    text-align: left;
    margin-bottom: 2rem;
}
.counters__grid {
    display: flex;
    gap: 1rem;
}
.counter-block {
    flex: 1;
    padding: 50px 0;
    border-radius: 10px;
    text-align: center;
    color: var(--color-white);
}
.counter-block:nth-child(1) { background-color: var(--color-dark-blue-1); }
.counter-block:nth-child(2) { background-color: var(--color-dark-blue-2); }
.counter-block:nth-child(3) { background-color: var(--color-dark-blue-3); }
.counter__number-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-primary);
    font-size: 45px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-white);
}
.counter__title {
    font-family: var(--font-primary);
    font-weight: var(--fw-primary);
    font-size: 19px;
    line-height: 2.5;
    color: var(--color-white);
    text-align: center;
}

#whatsapp-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    z-index: 1000;
}

#whatsapp-icon i {
    top: 20%;
    right: 27%;
    position: absolute;
}

/* ---------- 6. GESTORES / TESTIMONIALS ---------- */
.gestores {
    overflow: hidden;
    padding: 1.5rem 0;
    position: relative;
}
.gestores__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-text);
    opacity: 0.2;
    z-index: 0;
}
.gestores__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}
.gestores__heading {
    min-height: 85px;
    display: flex;
    align-items: center;
    padding: 0;
}
.gestores__heading h1 {
    color: var(--color-text);
    text-align: left;
}

/* Testimonial cards row (scrolls horizontally via GSAP) */
#testimonial-row {
    overflow: hidden;
    margin-bottom: 2rem;
}
#testimonial-row .testimonials-track {
    display: flex;
    width: 3000px;
    min-width: 3000px;
    height: 210px;
}
.testimonial {
    max-width: 333px;
    width: 335px;
    flex-shrink: 0;
    background-color: var(--color-primary);
    border-radius: 10px;
    margin: 30px 12px 0px 0;
    position: relative;
}
.testimonial-inner {
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
}
.testimonial .gestor-avatar {
    margin-left: -33px;
    max-width: 220px;
    height: auto;
}
.testimonial .gestor-avatar img {
    width: 100%;
    height: auto;
    border-radius: 0;
}
.testimonial .gestor-detail {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
    padding-right: .5rem;
    height: 100%;
    gap: 0.35rem;
}
.testimonial .gestor-detail h6 {
    color: var(--color-white);
    margin: 0;
}
.testimonial .gestor-detail :first-child {
    font-size: 0.8rem;
    font-weight: 300;
    text-transform: none;
    border-bottom: 1px solid #ffffff5e;
    padding-bottom: 0.6rem;
}
.testimonial .gestor-detail :nth-child(2) {
    font-size: .83rem;
    font-weight: 300;
    text-transform: none;
}
.testimonial .gestor-detail :nth-child(3) {
    font-size: .6rem;
    font-weight: 300;
    text-transform: none;
}

/* ---------- 7. EMPRENDEDORES (PIE CHART) ---------- */
.emprendedores {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}
.emprendedores__chart {
    display: flex;
    justify-content: center;
}
.emprendedores__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.emprendedores__text h4 {
    color: var(--color-primary);
}
.emprendedores__text h2 {
    color: var(--color-secondary);
}

svg#pie { width: 300px; height: 300px; }
svg#pie circle { fill: none !important; stroke-width: 250px; }
#text_vos, #text_tu_negocio, #text_remax, #mix_perfecto { opacity: 0; }

/* ---------- 8. VIDEO ---------- */
.video-section {
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-section__wrapper {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
}
.video-section__wrapper iframe,
.video-section__wrapper video {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #000;
}

.mission-video {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #000;
    position: relative;
}

/* ---------- 9. CONTACT ---------- */
.contact {
    min-height: 400px;
    display: flex;
    align-items: center;
    position: relative;
}
.contact__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-text);
    opacity: 0.5;
    z-index: 0;
}
.contact__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.contact__info {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.contact__map {
    width: 75%;
}
.contact__map iframe {
    width: 100%;
    height: 300px;
    border: none;
}

/* Social icons */
.social-icons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 1rem;
}
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(25px + 1em);
    height: calc(25px + 1em);
    border-radius: 50%;
    font-size: 25px;
    line-height: 25px;
    color: var(--color-white);
    transition: opacity .3s;
}
.social-icon:hover { opacity: .85; }
.social-icon--envelope { background-color: var(--color-text); }
.social-icon--whatsapp { background-color: var(--color-text); }

/* ---------- 10. FOOTER ---------- */
.site-footer {
    padding: 0;
    margin: 0;
}
.credit-link {
    font-size: .8rem;
    text-align: center;
    padding: 1.5rem 0;
}
.credit-link a { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .container { max-width: 1024px; }
}

@media (max-width: 767px) {
    .container { max-width: 100%; }

    .hero__col-left { width: 100%; }
    .hero__col-right { display: none; }
    .hero__spacer { height: 142px; }
    .hero__bg { background-position: bottom center; }

    .mission__svg-col {
        width: 100%;
        padding: 0;
        text-align: center;
    }
    .mission__text-col {
        width: 100%;
        padding: 1rem 0 0;
    }
    .mission__spacer-col { display: none; }

    #lideres-section .subtitle { width: 100%; }
    #lideres-section .subtitles { flex-direction: column; }

    .counters__grid { flex-direction: column; }

    .emprendedores__chart,
    .emprendedores__text { width: 100%; }

    .video-section { min-height: 160px; }

    .contact__info { width: 100%; }
    .contact__map { width: 100%; }

    .gestores__inner {
        padding: 0;
    }

    section {
        padding: 2rem 2rem;
    }
}

@media (min-width: 768px) {
    .emprendedores__chart { width: 30%; }
    .emprendedores__text  { width: 70%; padding: 0 30px; }
}