/* =========================================================
   Landing comercial de 4wasap.com
   Mobile-first: todo se piensa primero para pantallas chicas
   y se expande con @media (min-width: ...) hacia arriba.
   Reutiliza las variables de marca definidas en estilo.css.
   ========================================================= */

.landing {
    /* Paleta extraída del logo oficial (verde vivo + verde oscuro del
       degradado, más el tono "mint" clarísimo para fondos). Sobrescribe,
       solo dentro de la landing, las variables de marca genéricas
       definidas en estilo.css — el resto del sitio (catálogo, panel)
       no se ve afectado. */
    --color-marca: #02b03a;
    --color-marca-oscuro: #01851d;
    --color-marca-tenue: #e6f9ea;
    overflow-x: hidden;
}

.landing section {
    scroll-margin-top: 76px;
}

/* ---------- Navbar ---------- */
.landing-nav {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    transition: box-shadow .2s ease;
}

.landing-nav.con-sombra {
    box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}

.landing-marca {
    display: inline-flex;
    align-items: center;
}

.landing-marca .logo-marca {
    height: 30px;
    width: auto;
    display: block;
}

@media (min-width: 576px) {
    .landing-marca .logo-marca {
        height: 36px;
    }
}

/* El navbar no tiene la clase navbar-light/navbar-dark de Bootstrap, así
   que el ícono de hamburguesa por defecto no traía ningún dibujo (quedaba
   invisible sobre el fondo claro del menú). Se define explícitamente aquí,
   y de paso se agranda para que sea más fácil de ver/tocar en celular. */
.landing-nav .navbar-toggler-icon {
    width: 2em;
    height: 2em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33, 37, 41, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.landing-nav .nav-link {
    font-weight: 600;
    color: var(--color-texto-suave);
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.landing-nav .nav-link:hover {
    color: var(--color-marca-oscuro);
}

/* ---------- Hero ---------- */
.hero {
    background: radial-gradient(circle at 15% 0%, var(--color-marca-tenue) 0%, rgba(230, 249, 234, 0) 55%),
        linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    padding-top: clamp(2.5rem, 6vw, 5rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.hero h1 {
    font-size: clamp(1.9rem, 5.5vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.12;
}

.hero .lead {
    font-size: clamp(1.02rem, 2.4vw, 1.2rem);
}

.franja-confianza {
    font-size: .82rem;
    color: var(--color-texto-suave);
}

.franja-confianza svg {
    color: var(--color-marca);
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

/* Mockup de teléfono, 100% CSS/SVG, sin capturas ni marcas de terceros */
.mockup-telefono {
    position: relative;
    width: min(280px, 78vw);
    margin: 0 auto;
    border-radius: 34px;
    background: #1b1d21;
    padding: 12px;
    box-shadow: var(--sombra-media), 0 30px 60px -20px rgba(0, 0, 0, .35);
}

.mockup-telefono .pantalla {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 9 / 18.5;
    display: flex;
    flex-direction: column;
    position: relative;
}

.mockup-telefono .notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 34%;
    height: 16px;
    background: #1b1d21;
    border-radius: 10px;
    z-index: 3;
}

.mockup-barra {
    background: var(--color-marca);
    color: #fff;
    padding: 1.6rem .8rem .5rem;
    font-weight: 700;
    font-size: .78rem;
    text-align: center;
}

.mockup-productos {
    padding: .55rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    flex: 1;
    background: #f8f9fa;
}

.mockup-buscador {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: 1.6rem .55rem 0;
    padding: .35rem .5rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: .58rem;
    color: #6c757d;
}

.mockup-categoria {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: .55rem .55rem 0;
}

.mockup-categoria-nombre {
    font-size: .68rem;
    font-weight: 700;
    color: #212529;
}

.mockup-ver-todos {
    font-size: .5rem;
    color: var(--color-marca);
}

.mockup-nombre {
    font-size: .56rem;
    font-weight: 600;
    color: #212529;
    line-height: 1.2;
    margin-bottom: 2px;
}

.mockup-ultimas {
    display: block;
    font-size: .42rem;
    font-weight: 700;
    background: #dc3545;
    color: #fff;
    border-radius: 3px;
    padding: 1px 4px;
    margin-top: 2px;
    width: fit-content;
}

.mockup-botones {
    display: flex;
    gap: 3px;
    margin-top: 4px;
}

.mockup-btn-ver {
    flex: 1;
    text-align: center;
    font-size: .5rem;
    font-weight: 600;
    color: var(--color-marca);
    border: 1px solid var(--color-marca);
    border-radius: 5px;
    padding: 2px 0;
}

.mockup-btn-agregar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    background: var(--color-marca);
    color: #fff;
    border-radius: 5px;
}

.mockup-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    padding: .4rem;
}

.mockup-card .miniatura {
    background: #e9ecef;
    border-radius: 7px;
    aspect-ratio: 1 / 1;
    margin-bottom: .3rem;
}

.mockup-card .linea {
    height: 6px;
    border-radius: 3px;
    background: #dee2e6;
    margin-bottom: 4px;
}

.mockup-card .linea.corta {
    width: 55%;
}

.mockup-card .precio {
    display: inline-block;
    font-size: .58rem;
    font-weight: 700;
    background: #fff3cd;
    color: #7a5b00;
    border-radius: 20px;
    padding: 1px 6px;
    margin-top: 2px;
}

.mockup-burbuja {
    position: absolute;
    bottom: 14px;
    right: 12px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-marca);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(2, 176, 58, .5);
    animation: pulso-whatsapp 2.4s infinite;
}

.mockup-burbuja svg {
    width: 40px;
    height: 40px;
}

@keyframes pulso-whatsapp {
    0% { box-shadow: 0 0 0 0 rgba(2, 176, 58, .55); }
    70% { box-shadow: 0 0 0 14px rgba(2, 176, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(2, 176, 58, 0); }
}

.chip-flotante {
    position: absolute;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--sombra-media);
    padding: .6rem .9rem;
    font-size: .8rem;
    font-weight: 700;
    display: none;
    align-items: center;
    gap: .5rem;
}

.chip-flotante svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.chip-flotante.chip-pedido {
    top: 8%;
    left: -6%;
    color: var(--color-marca-oscuro);
}

.chip-flotante.chip-gratis {
    bottom: 4%;
    left: -8%;
    color: var(--color-naranja-oscuro);
}

@media (min-width: 992px) {
    .chip-flotante {
        display: inline-flex;
    }
}

/* ---------- Secciones genéricas ---------- */
.seccion-titulo {
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
}

.seccion-subtitulo {
    color: var(--color-texto-suave);
    max-width: 640px;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-marca-oscuro);
}

/* ---------- Cómo funciona ---------- */
.paso-numero {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-marca), var(--color-marca-oscuro));
    color: #fff;
    font-weight: 800;
    font-size: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 22px rgba(2, 176, 58, .35), 0 0 0 6px var(--color-marca-tenue);
}

@media (min-width: 768px) {
    .paso-numero {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
}

.paso-linea {
    flex: 1;
    height: 2px;
    background: repeating-linear-gradient(90deg, #cfe9db 0 8px, transparent 8px 16px);
    margin-top: 40px;
    display: none;
}

@media (min-width: 768px) {
    .paso-linea {
        display: block;
    }
}

/* ---------- Beneficios ---------- */
.tarjeta-beneficio {
    background: #fff;
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-suave);
    padding: 1.4rem 1.2rem;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease;
}

@media (hover: hover) {
    .tarjeta-beneficio:hover {
        transform: translateY(-4px);
        box-shadow: var(--sombra-media);
    }
}

.icono-beneficio {
    width: 76px;
    height: 76px;
    border-radius: 16px;
    background: var(--color-marca-tenue);
    color: var(--color-marca-oscuro);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .8rem;
    flex-shrink: 0;
}

.icono-beneficio svg {
    width: 44px;
    height: 44px;
}

/* ---------- Ideal para ---------- */
.chip-negocio {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 999px;
    padding: .5rem 1rem;
    font-weight: 600;
    font-size: .88rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    box-shadow: var(--sombra-suave);
}

/* Los rubros que además tienen su propia plantilla adaptada (Configuración
   → Plantilla) se distinguen con el borde verde de la marca, sin agregar
   texto de más. */
.chip-negocio-plantilla {
    border: 1.5px solid var(--color-marca);
    color: var(--color-marca-oscuro, #01851d);
}

/* ---------- Precios ---------- */
.franja-prueba {
    background: linear-gradient(135deg, var(--color-marca) 0%, var(--color-marca-oscuro) 100%);
    color: #fff;
    border-radius: 18px;
}

.tarjeta-plan {
    background: #fff;
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-suave);
    padding: 1.6rem 1.4rem;
    height: 100%;
    border: 2px solid transparent;
    position: relative;
    display: flex;
    flex-direction: column;
}

.tarjeta-plan.destacado {
    border-color: var(--color-marca);
    box-shadow: var(--sombra-media);
}

.tarjeta-plan.destacado::before {
    content: "Más popular";
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-marca);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: .25rem .8rem;
    border-radius: 999px;
    white-space: nowrap;
}

.tarjeta-plan .precio-plan {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.tarjeta-plan .precio-mes {
    color: var(--color-texto-suave);
    font-size: .85rem;
}

.tarjeta-plan ul {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
    flex: 1;
}

.tarjeta-plan ul li {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .4rem 0;
    font-size: .92rem;
}

.tarjeta-plan ul li svg {
    color: var(--color-marca);
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

/* ---------- FAQ ---------- */
.landing .accordion-button {
    font-weight: 700;
    border-radius: 12px !important;
}

.landing .accordion-button:not(.collapsed) {
    color: var(--color-marca-oscuro);
    background-color: var(--color-marca-tenue);
}

.landing .accordion-button:focus {
    box-shadow: 0 0 0 .2rem rgba(2, 176, 58, .18);
}

.landing .accordion-item {
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: .6rem;
    border: 1px solid rgba(0, 0, 0, .08);
}

/* ---------- CTA final ---------- */
.cta-final {
    background: linear-gradient(135deg, #01851d 0%, #02b03a 100%);
    color: #fff;
    border-radius: 24px;
}

/* ---------- Footer ---------- */
.landing-footer {
    background: #0f172a;
    font-size: .9rem;
}

.landing-footer .pie-titulo {
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 1rem;
}

.landing-footer .pie-descripcion {
    color: #94a3b8;
}

.landing-footer .pie-enlaces li {
    margin-bottom: .6rem;
}

.landing-footer .pie-enlaces a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color .15s ease;
}

.landing-footer .pie-enlaces a:hover {
    color: #fff;
}

.landing-footer .btn-outline-light {
    border-color: #334155;
}

.landing-footer .btn-outline-light:hover {
    background: var(--color-marca);
    border-color: var(--color-marca);
}

.landing-footer .pie-separador {
    border-color: #1e293b;
    opacity: 1;
}

/* ---------- Utilidades ---------- */
.landing .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
}

.landing .reveal.visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 991.98px) {
    .landing-nav .navbar-collapse {
        margin-top: .5rem;
    }
}

/* ---------- Barra de progreso de lectura ---------- */
.barra-progreso-scroll {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--color-marca), var(--color-marca-oscuro));
    z-index: 1100;
    transition: width .1s linear;
}

/* ---------- Botón flotante "Volver arriba" ---------- */
.btn-volver-arriba {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--color-marca);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sombra-media);
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.btn-volver-arriba.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.btn-volver-arriba:hover {
    background: var(--color-marca-oscuro);
    color: #fff;
}

@media (hover: hover) {
    .btn-volver-arriba:hover {
        transform: translateY(-3px);
    }
}

/* ---------- Presencia internacional: cuadrícula de banderas ---------- */
/* A propósito NO es una franja que se desliza sola: así ningún país queda
   nunca cortado a la mitad en el borde de la pantalla — se ven los 13
   completos siempre, se acomodan solos según el ancho disponible. */
.grilla-paises {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .85rem;
}

.chip-pais {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 999px;
    padding: .65rem 1.3rem;
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    box-shadow: var(--sombra-suave);
    transition: transform .15s ease, box-shadow .15s ease;
}

@media (hover: hover) {
    .chip-pais:hover {
        transform: translateY(-3px);
        box-shadow: var(--sombra-media);
    }
}

.chip-pais .bandera-chip {
    display: inline-flex;
}

.chip-pais .icono-bandera-pais {
    width: 28px;
    height: 21px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

/* ---------- Testimonios ---------- */
.tarjeta-testimonio {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--sombra-media);
    padding: 2rem;
    max-width: 640px;
    text-align: center;
}

.comilla-testimonio {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-marca);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 8px 20px rgba(2, 176, 58, .25);
}

.testimonio-texto {
    font-size: 1.1rem;
    color: var(--color-texto);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.testimonio-autor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

.bandera-testimonio {
    display: inline-flex;
    flex-shrink: 0;
}

.bandera-testimonio .icono-bandera-pais {
    width: 44px;
    height: 33px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

/* El carrusel no debe recortar nada: cada testimonio tiene un largo de
   texto distinto, así que la tarjeta crece lo que necesite en vez de
   quedar con una altura fija — evita que un testimonio más largo se vea
   cortado abajo. */
#carruselTestimonios,
#carruselTestimonios .carousel-inner,
#carruselTestimonios .carousel-item {
    overflow: visible;
}

/* Los indicadores (puntitos) por defecto de Bootstrap quedan pegados al
   borde inferior del carrusel y son casi invisibles en fondo claro; se
   reposicionan debajo de la tarjeta y se oscurecen. */
.posicion-indicadores-testimonios {
    position: static;
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.posicion-indicadores-testimonios [data-bs-target] {
    background-color: #ced4da;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 1;
}


.posicion-indicadores-testimonios .active {
    background-color: var(--color-marca);
}

/* Flechas prev/next: por defecto son blancas (pensadas para ir sobre una
   imagen oscura); acá van sobre fondo claro, así que se oscurecen y se
   alejan un poco de la tarjeta para no taparla en pantallas angostas. */
#carruselTestimonios .carousel-control-prev,
#carruselTestimonios .carousel-control-next {
    width: 3rem;
    opacity: .6;
}

#carruselTestimonios .carousel-control-prev-icon,
#carruselTestimonios .carousel-control-next-icon {
    filter: invert(1) grayscale(100);
    width: 1.75rem;
    height: 1.75rem;
}

@media (max-width: 767.98px) {
    #carruselTestimonios .carousel-control-prev { left: -.5rem; }
    #carruselTestimonios .carousel-control-next { right: -.5rem; }
    .tarjeta-testimonio { padding: 1.5rem 1.25rem; }
}

/* El widget de Facebook (fb-page) a veces no respeta el ancho del
   contenedor donde vive, aunque se le pida "adapt_container_width": es un
   comportamiento conocido de su propio complemento, no de esta página —
   se ve angosto y descentrado en vez de ocupar toda la columna. Se fuerza
   a que el iframe que Facebook termina generando ocupe el 100% del ancho
   disponible. */
#fb-root ~ div,
.fb_iframe_widget,
.fb_iframe_widget span {
    width: 100% !important;
}

.fb_iframe_widget iframe {
    width: 100% !important;
}

/* Tarjeta de contacto, al lado del widget de Facebook ---------- */
.tarjeta-contacto-comunidad {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--sombra-media);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
}

.icono-contacto-comunidad {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(37, 211, 102, .12);
    color: #25d366;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.lista-check-comunidad {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.lista-check-comunidad li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: .6rem;
    color: var(--color-texto);
    font-size: .95rem;
}

.lista-check-comunidad li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-marca);
    font-weight: 800;
}