/* ===== VARIABLES ===== */
    :root {
        --azul-principal:    #1A1A1A;
        --azul-oscuro:       #2E2E2E;
        --azul-muy-claro:    #F3EFE8;
        --azul-acento:       #E6DED2;
        --verde-check:       #2BAA95;
        --gris-texto:        #1A1A1A;
        --gris-suave:        #6B6B6B;
        --blanco:            #FFFFFF;
        --crema:             #F7F4EE;
        --shadow-sm:         0 2px 8px rgba(0,0,0,.08);
        --shadow-md:         0 8px 24px rgba(0,0,0,.14);
        --shadow-lg:         0 20px 50px rgba(0,0,0,.18);
        --transition:        all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        --font-display: 'Host Grotesk', sans-serif;
        --font-body:    'Host Grotesk', sans-serif;
    }

    /* ===== HERO SECTION ===== */
    .hero {
        position: relative;
        background-color: var(--crema);
        overflow: hidden;
        /* El header (70px, absolute) flota encima; el padding lo compensa */
        padding: calc(5rem + 70px) 0 7rem;
        min-height: 92vh;
        display: flex;
        align-items: center;
    }

    /* Fondo con textura de puntos */
    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px);
        background-size: 32px 32px;
        pointer-events: none;
        z-index: 0;
    }

    /* Mancha de color difusa */
    .hero::after {
        content: '';
        position: absolute;
        top: -120px;
        right: -80px;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle at center,
            rgba(0,0,0,0.04) 0%,
            rgba(230,222,210,0.06) 45%,
            transparent 70%
        );
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
    }

    /* ===== HERO CONTAINER ===== */
    .hero-container {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 2rem;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 4rem;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    /* ===== HERO CONTENT ===== */
    .hero-content {
        animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* ===== CHIPS DE SEGMENTOS (arriba del H1) ===== */
    .hero-chips {
        display: flex;
        gap: 0.6rem;
        flex-wrap: wrap;
        margin-bottom: 1.25rem;
    }

    .hero-chip {
        background: var(--blanco);
        color: var(--azul-oscuro);
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 0.35rem 1rem;
        border-radius: 50px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
    }

    /* Título — Barlow Condensed: condensada, compacta y muy legible en bold.
       Al ser angosta va un cuerpo más grande y sin tracking negativo. */
    .hero-title {
        font-family: 'Barlow Condensed', var(--font-display);
        font-size: clamp(3rem, 6vw, 4.5rem);
        font-weight: 700;
        line-height: 1.02;
        letter-spacing: 0;
        margin-bottom: 1.5rem;
        color: var(--gris-texto);
        text-wrap: balance;
    }

    /* Descripción */
    .hero-description {
        font-size: 1.3rem;
        line-height: 1.7;
        color: var(--gris-suave);
        margin-bottom: 2.25rem;
        max-width: 88%;
        font-weight: 400;
    }

    /* Botones */
    .hero-buttons {
        display: flex;
        gap: 0.875rem;
        margin-bottom: 3rem;
        flex-wrap: wrap;
        align-items: center;
    }

    /* Misma fuente condensada que el H1; al ser angosta va un cuerpo mayor */
    .btn-large {
        padding: 0.875rem 1.75rem;
        font-size: 1.2rem;
        font-family: 'Barlow Condensed', var(--font-display);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        border-radius: 50px;
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        cursor: pointer;
        text-decoration: none;
        transition: var(--transition);
    }

    /* Botón primario – verde WhatsApp plano */
    .btn-primary {
        background: #8FDCCB;
        color: var(--blanco);
        border: none;
    }

    .btn-primary:hover {
        background: #6FCDB8;
        transform: translateY(-3px);
    }

    .btn-primary i { font-size: 1.15rem; }

    /* Botón secundario */
    .btn-secondary {
        background: var(--blanco);
        color: var(--azul-principal);
        border: 1.5px solid rgba(0,0,0,0.25);
        box-shadow: var(--shadow-sm);
    }

    .btn-secondary:hover {
        background: var(--azul-principal);
        color: var(--blanco);
        border-color: var(--azul-principal);
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    /* Flecha ↗ a la derecha del texto; se desliza en diagonal al hacer hover */
    .btn-icon-right {
        width: 1.05em;
        height: 1.05em;
        flex-shrink: 0;
        transition: transform 0.25s ease;
    }

    .btn-secondary:hover .btn-icon-right {
        transform: translate(3px, -3px);
    }

    /* ===== STATS + TESTIMONIO (foto de fondo + overlay oscuro) ===== */
    .hero-stats-section {
        position: relative;
        background: linear-gradient(135deg, #111111 0%, #2E2E2E 100%);
        padding: 3rem 1.5rem 2.75rem;
        overflow: hidden;
    }

    .hero-stats-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.45) 100%);
    }

    .stats-inner {
        position: relative;
        z-index: 1;
        max-width: 560px;
        margin: 0 auto;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        margin-bottom: 1.75rem;
    }

    /* Reglas escopeadas a la sección: .stat-number y .testimonial-stars
       también existen en por-que-elegirnos con otros estilos */
    .hero-stats-section .stat-number {
        font-family: 'Barlow Condensed', var(--font-display);
        font-size: 3rem;
        font-weight: 700;
        color: var(--blanco);
        line-height: 1;
    }

    .hero-stats-section .stat-plus {
        color: var(--azul-acento);
        font-size: 0.6em;
        vertical-align: super;
    }

    .hero-stats-section .stat-label {
        margin-top: 0.4rem;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.85);
        line-height: 1.55;
    }

    /* ── Card de testimonio ── */
    .hero-stats-section .testimonial-card {
        background: var(--blanco);
        border-radius: 18px;
        padding: 1.4rem 1.5rem;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    }

    .hero-stats-section .testimonial-head {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        margin-bottom: 0.9rem;
    }

    .hero-stats-section .testimonial-avatar {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.3rem;
        flex-shrink: 0;
    }

    /* Avatar con foto real del cliente */
    .hero-stats-section img.testimonial-avatar {
        object-fit: cover;
    }

    .hero-stats-section .testimonial-meta strong {
        display: block;
        color: var(--gris-texto);
        font-size: 1.1rem;
        margin-bottom: 3px;
    }

    /* Estrellas estilo reseña de Google: mismo glifo (Material) y
       mismo amarillo (#FBBC04) que usa Google en Maps/Búsqueda.
       Flex en el contenedor: elimina el espacio en blanco que el
       HTML mete entre los SVG inline. */
    .hero-stats-section .testimonial-stars {
        display: inline-flex;
        gap: 1px;
    }

    .hero-stats-section .testimonial-stars svg {
        width: 17px;
        height: 17px;
        fill: #FBBC04;
    }

    .hero-stats-section .testimonial-text {
        color: var(--gris-suave);
        font-size: 1.1rem;
        line-height: 1.65;
        margin-bottom: 1rem;
    }

    .hero-stats-section .testimonial-reco {
        border-top: 1px solid rgba(0, 0, 0, 0.07);
        padding-top: 0.85rem;
        color: var(--verde-check);
        font-size: 0.95rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* ===== HERO IMAGE ===== */
    .hero-image {
        position: relative;
        animation: heroFadeRight 0.9s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Marco decorativo detrás de la imagen */
    .hero-image::before {
        content: '';
        position: absolute;
        inset: -12px -12px -12px 12px;
        border: 2px solid rgba(0,0,0,0.12);
        border-radius: 28px;
        z-index: 0;
        pointer-events: none;
    }

    .hero-image-wrapper {
        position: relative;
        border-radius: 24px;
        overflow: visible;
        z-index: 1;
    }

    .hero-img {
        width: 100%;
        height: auto;
        /* el video es 9:16; se recorta a la proporción de la tarjeta */
        aspect-ratio: 600 / 680;
        display: block;
        border-radius: 24px;
        object-fit: cover;
        box-shadow: var(--shadow-lg);
        transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .hero-image-wrapper:hover .hero-img {
        transform: scale(1.03) translateY(-4px);
    }

    /* ===== ONDA DECORATIVA ===== */
    .hero-wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
        z-index: 1;
    }

    .hero-wave svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 72px;
    }

    .hero-wave .shape-fill { fill: var(--blanco); }

    /* ===== ANIMACIONES ===== */
    @keyframes heroFadeUp {
        from { opacity: 0; transform: translateY(28px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes heroFadeRight {
        from { opacity: 0; transform: translateX(28px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    @keyframes underlineGrow {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }

    /* ===== VIDEO DE FONDO (solo celular) ===== */
    .hero-video { display: none; }

    @media (max-width: 768px) {
        .hero-video {
            display: block;
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
        }

        .hero-video-el {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        /* Capa oscura para que el texto se lea sobre el video */
        .hero-video-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                180deg,
                rgba(10, 10, 10, 0.68) 0%,
                rgba(40, 40, 40, 0.52) 55%,
                rgba(10, 10, 10, 0.72) 100%
            );
        }

        /* Fondo oscuro en celular: el panel visual se oculta y el texto va en claro */
        .hero { background: linear-gradient(165deg, #111111 0%, #2E2E2E 100%); }
        .hero::before,
        .hero::after { display: none; }

        /* La foto del hero sobra cuando el video ocupa el fondo */
        .hero-image { display: none; }

        /* --- Textos en claro sobre el video (todo el H1 en blanco) --- */
        .hero-title { color: var(--blanco); }

        .hero-description { color: rgba(255, 255, 255, 0.88); }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: var(--blanco);
            border-color: rgba(255, 255, 255, 0.35);
            backdrop-filter: blur(6px);
        }

    }

    /* Respeta la preferencia de menos movimiento: imagen estática en vez de video */
    @media (prefers-reduced-motion: reduce) {
        .hero-video-el { display: none; }
        .hero-video { background: #111111; }
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1100px) {
        .hero-container { gap: 3rem; }
        .hero-description { max-width: 100%; }
    }

    @media (max-width: 900px) {
        .hero-image::before { display: none; }
        .hero-container {
            grid-template-columns: 1fr;
            gap: 2.5rem;
            text-align: center;
        }

        .hero-description { margin-left: auto; margin-right: auto; }

        .hero-buttons { justify-content: center; }

        .hero-image {
            order: -1;
            max-width: 480px;
            margin: 0 auto;
        }
    }

    @media (max-width: 600px) {
        .hero { padding: 2.5rem 0 4rem; }

        .hero-title { letter-spacing: -0.025em; }
    }

    @media (max-width: 480px) {
        .btn-large { width: 100%; justify-content: center; }
        .hero-buttons { flex-direction: column; }
    }

    /*
        ===== LAYOUT CELULAR =====
        El hero toma el alto natural de su contenido.
        Va después del bloque responsive para ganar la cascada.
    */
    @media (max-width: 768px) {
        .hero {
            height: auto;
            min-height: 0;
            padding: calc(64px + 2.5rem) 0 3.5rem; /* el header (64px) flota encima */
        }

        .hero-content { text-align: left; }

        /* Chips: ocultos en celular */
        .hero-chips {
            display: none;
        }

        /* --- Tipografía: H1 grande, entra en 2 líneas --- */
        .hero-title {
            font-size: clamp(2.7rem, 11.8vw, 3.2rem);
            margin-bottom: 1rem;
        }

        .hero-description {
            font-size: 1.15rem;
            line-height: 1.65;
            margin-bottom: 1.75rem;
            margin-left: 0;
            margin-right: auto;
        }

        .hero-buttons {
            justify-content: flex-start;
            gap: 0.75rem;
            margin-bottom: 0;
        }

        /* CTAs más altos en celular: mejor tap target y más presencia */
        .btn-large {
            padding: 1.15rem 1.5rem;
            font-size: 1.15rem;
        }

    }

/* ===== PANEL VISUAL DEL HERO (sin fotos) ===== */
.hero-panel { position: relative; background: linear-gradient(160deg, #3A3A3A 0%, #1A1A1A 55%, #000000 100%); color: #FFFFFF; overflow: hidden; display: flex; align-items: flex-end; padding: 2rem; }
.hero-panel-honeycomb { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255,255,255,.32); }
.hero-panel-body { position: relative; z-index: 1; width: 100%; }
.hero-panel-kicker { display: inline-block; background: rgba(17,17,17,.38); padding: .32rem .85rem; border-radius: 100px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin-bottom: 1rem; }
.hero-panel-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 2.9rem; line-height: .98; text-transform: uppercase; margin: 0 0 1.2rem; text-shadow: 0 2px 14px rgba(17,17,17,.35); }
.hero-panel-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .45rem; }
.hero-panel-list li { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: 1rem; }
.hero-panel-list i { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; flex-shrink: 0; }
.hero-panel-sign { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 700; font-size: 2.1rem; opacity: .92; }
.hero-stats { grid-template-columns: repeat(4, 1fr); }
.stats-inner { max-width: 960px; }
@media (max-width: 700px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }

/* ===== FOTO DE FONDO DEL HERO (solo celular, si existe hero-mobile.jpg) ===== */
.hero-bg { display: none; }
@media (max-width: 768px) {
    .hero--foto { background: #111111; }
    .hero-bg { display: block; position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center top; }
    .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.78) 0%, rgba(17,17,17,.55) 50%, rgba(10,10,10,.85) 100%); }
    .hero--foto .hero-container { position: relative; z-index: 1; }
}

/* ===== TESTIMONIOS: carrusel con snap (una tarjeta + asoma la siguiente en celular) ===== */
.testi-section { background: #FFFFFF; padding: 3.5rem 0 3rem; border-bottom: 1px solid #E6DED2; }
.testi-inner { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
.testi-head { text-align: center; margin-bottom: 1.75rem; }
.testi-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: .25rem 0 1rem; scroll-padding-inline: 2rem; }
.testi-track::-webkit-scrollbar { display: none; }
.testi-card { flex: 0 0 calc((100% - 2rem) / 3); scroll-snap-align: start; background: #F7F4EE; border: 1px solid #E6DED2; border-radius: 16px; padding: 1.4rem 1.4rem 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.testi-stars { color: #2BAA95; font-size: .85rem; display: flex; gap: .15rem; }
.testi-text { font-size: 1.02rem; line-height: 1.55; color: #1A1A1A; flex: 1; }
.testi-meta { display: flex; align-items: center; gap: .7rem; }
.testi-meta strong { display: block; font-size: .95rem; color: #111111; }
.testi-meta span:last-child { font-size: .82rem; color: #6B6B6B; }
.testi-avatar { width: 38px; height: 38px; border-radius: 50%; background: #111111; color: #E6DED2; display: inline-flex; align-items: center; justify-content: center; font-family: "Times New Roman", Times, serif; font-size: 1.15rem; flex-shrink: 0; }
@media (max-width: 900px) { .testi-card { flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 768px) {
    /* En celular: sin banda de cifras; el carrusel muestra una tarjeta y asoma un pedazo de la siguiente */
    .hero-stats-section { display: none; }
    .testi-section { padding: 2.5rem 0 2rem; }
    .testi-inner { padding: 0 0 0 1.25rem; }
    .testi-head { text-align: left; padding-right: 1.25rem; }
    .testi-track { gap: .8rem; scroll-padding-inline: 1.25rem; padding-right: 1.25rem; }
    .testi-card { flex-basis: 82%; }
}
.testi-section { padding-top: 2rem; }
@media (max-width: 768px) { .testi-section { padding-top: 1.5rem; } }

/* ===== RESEÑAS ESTILO GOOGLE, MINIMALISTAS ===== */
.testi-card { background: #FFFFFF; border: 1px solid #EBE7E0; border-radius: 12px; padding: 1.1rem 1.2rem 1.15rem; gap: .55rem; box-shadow: none; }
.testi-top { display: flex; align-items: center; gap: .7rem; }
.testi-avatar { width: 36px; height: 36px; font-family: "Host Grotesk", system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: #FFFFFF; }
.testi-who { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.testi-who strong { font-size: .95rem; font-weight: 600; color: #1F1F1F; }
.testi-who span { font-size: .78rem; color: #6B6B6B; }
.testi-g { font-size: 1.05rem; color: #4285F4; opacity: .9; }
.testi-rating { display: flex; align-items: center; gap: .55rem; }
.testi-stars { color: #FBBC04; font-size: .8rem; display: inline-flex; gap: .1rem; }
.testi-stars .is-off { color: #E0E0E0; }
.testi-date { font-size: .78rem; color: #6B6B6B; }
.testi-text { font-size: .95rem; line-height: 1.5; color: #3C3C3C; flex: 1; margin: 0; }