/* ===========================
   LANDING DE CAMPAÑA (Google Ads)
   ===========================

   Estilos exclusivos de /consulta-presencial-medicina-alternativa-bogota/ y de
   su segunda parte /informacion/. Viven en un archivo aparte a propósito: las
   seis páginas del sitio no cargan nada de esto, y tocar la landing nunca puede
   romper el resto.

   La landing NO usa .header ni .nav-menu. En una página de campaña, cada enlace
   que no sea la conversión es una fuga: por eso arriba solo hay logo (imagen,
   sin enlace) y la única salida antes del pie de página es el botón de
   conversión. El pie sí va completo, porque Google Ads exige que la página de
   destino tenga navegación y política de privacidad visibles.

   Se apoya en las variables y en .container de style.css, que se carga antes. */

/* ===========================
   CABECERA SOLO CON LOGO
   =========================== */
.lp-header {
    background-color: #f7f7f7;
    box-shadow: var(--shadow);
    padding: 0.85rem 0;
}

.lp-header img {
    height: 62px;
    width: auto;
    margin: 0 auto;
}

/* ===========================
   HERO
   =========================== */
.lp-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white);
    padding: 3.5rem 0;
    text-align: center;
}

.lp-hero h1 {
    font-size: 2.4rem;
    line-height: 1.25;
    max-width: 900px;
    margin: 0 auto 1.25rem;
}

.lp-lead {
    font-size: 1.15rem;
    line-height: 1.7;
    max-width: 780px;
    margin: 0 auto;
}

/* ===========================
   HERO DE LA SEGUNDA PÁGINA
   ===========================

   Deliberadamente distinto del hero rosa de la primera página. Con los dos
   iguales, al pulsar el botón de conversión parecía que la página se hubiera
   recargado en vez de avanzar, y la gente se perdía.

   Tres señales de que esto es una página nueva: fondo oscuro en lugar del
   degradado rosa, dos columnas en lugar de texto centrado, y el precio visible
   de entrada, que es justamente lo que la persona vino a ver al hacer clic. */
.lp-hero--paso2 {
    background: var(--text-dark);
    padding: 3rem 0;
    text-align: left;
}

.lp-hero__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3rem;
    align-items: center;
}

/* Las columnas de un grid no bajan de su ancho mínimo de contenido salvo que se
   les diga. Sin esto, el precio en 3.2rem y el botón de WhatsApp ensanchaban la
   columna y la página se desbordaba a lo ancho en móvil. */
.lp-hero__grid > * {
    min-width: 0;
}

.lp-hero--paso2 h1 {
    font-size: 2.1rem;
    line-height: 1.3;
    max-width: none;
    margin: 0 0 1rem;
}

.lp-hero--paso2 .lp-lead {
    max-width: none;
    margin: 0;
    font-size: 1.05rem;
}

.lp-hero--paso2 .lp-pills {
    justify-content: flex-start;
    margin-top: 1.5rem;
}

/* Tarjeta de precio dentro del hero: blanca sobre el fondo oscuro, para que
   sea lo primero que salte a la vista al cargar la página. */
.lp-hero-precio {
    background-color: var(--white);
    color: var(--text-dark);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}

.lp-hero-precio__nota {
    margin: 1rem 0 1.5rem;
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* Chips con los datos que deciden la venta: dos médicos, experiencia, duración.
   Van en el hero para que se lean sin hacer scroll. */
.lp-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.lp-pills li {
    background-color: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 40px;
    padding: 0.5rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 600;
}

/* ===========================
   SECCIONES
   =========================== */
.lp-section {
    padding: 3.5rem 0;
}

.lp-section--alt {
    background-color: var(--bg-light);
}

.lp-prose {
    max-width: 820px;
    margin: 0 auto;
}

.lp-prose p {
    margin-bottom: 1rem;
    line-height: 1.8;
}

.lp-subtitle {
    text-align: center;
    color: var(--text-light);
    max-width: 720px;
    margin: -0.75rem auto 2.25rem;
    line-height: 1.7;
}

/* Separa dos bloques que comparten sección, para que no se lean como uno solo. */
.lp-separado {
    margin-top: 3rem;
}

/* ===========================
   LISTA CON CHULOS
   =========================== */
.lp-checks {
    max-width: 820px;
    margin: 0 auto;
}

.lp-checks li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
    line-height: 1.7;
}

.lp-checks li i {
    color: var(--primary-color);
    font-size: 1.05rem;
    margin-top: 0.35rem;
    flex-shrink: 0;
}

.lp-checks--negativo li i {
    color: var(--text-light);
}

/* ===========================
   MÉDICOS
   =========================== */
.lp-doctors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.lp-doctor {
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Las dos fotos tienen proporciones distintas (una apaisada y otra vertical).
   El recuadro cuadrado con object-fit las deja iguales sin deformarlas. */
.lp-doctor__photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--bg-light);
}

.lp-doctor__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
}

.lp-doctor__body {
    padding: 1.5rem;
}

.lp-doctor h3 {
    color: var(--primary-color);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.lp-doctor__exp {
    display: inline-block;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 40px;
    padding: 0.3rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.lp-doctor p {
    line-height: 1.7;
    color: var(--text-dark);
}

/* ===========================
   PASOS NUMERADOS
   =========================== */
/* El reset de style.css solo quita el marcador de ul, no el de ol. Sin este
   list-style se ven dos numeraciones: el "1." nativo y el círculo del contador. */
.lp-steps {
    list-style: none;
    max-width: 820px;
    margin: 0 auto;
    counter-reset: paso;
}

.lp-steps li {
    counter-increment: paso;
    position: relative;
    padding-left: 3.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.lp-steps li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--white);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-steps strong {
    display: block;
    margin-bottom: 0.15rem;
}

/* ===========================
   NOTA / ACLARACIÓN
   =========================== */
.lp-note {
    max-width: 820px;
    margin: 2rem auto 0;
    padding: 1.25rem 1.5rem;
    background-color: var(--white);
    border-left: 4px solid var(--primary-color);
    border-radius: 4px;
    box-shadow: var(--shadow);
    line-height: 1.7;
}

/* ===========================
   BOTÓN DE CONVERSIÓN
   =========================== */
.lp-cta {
    padding: 3.5rem 0 4rem;
    text-align: center;
}

.lp-cta__btn {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 2rem auto 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    padding: 1.5rem 2rem;
    border-radius: 60px;
    box-shadow: 0 12px 28px rgba(219, 114, 195, 0.4);
    animation: lp-latido 2.6s ease-in-out infinite;
}

.lp-cta__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(219, 114, 195, 0.5);
    animation-play-state: paused;
}

@keyframes lp-latido {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.025); }
}

.lp-cta__note {
    margin-top: 1.25rem;
    color: var(--text-light);
    font-size: 0.95rem;
}

/* ===========================
   PRECIO
   =========================== */
/* El precio vive dentro de .lp-hero-precio, en el hero de la segunda página. */
.lp-price__label {
    color: var(--text-light);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.lp-price__amount {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.1;
}

.lp-price__currency {
    display: block;
    font-size: 0.95rem;
    color: var(--text-light);
    font-weight: 400;
    margin-top: 0.35rem;
}

/* ===========================
   BOTÓN GIGANTE DE WHATSAPP
   =========================== */
.lp-whatsapp-block {
    text-align: center;
}

.lp-whatsapp-banner {
    display: block;
    max-width: 600px;
    width: 100%;
    margin: 0 auto 1.75rem;
}

.lp-whatsapp-banner img {
    width: 100%;
    transition: transform 0.3s ease;
}

.lp-whatsapp-banner:hover img {
    transform: scale(1.04);
}

.lp-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background-color: var(--accent-color);
    color: var(--white);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
    padding: 1.4rem 2rem;
    border-radius: 60px;
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.4);
    animation: lp-latido 2.6s ease-in-out infinite;
}

.lp-whatsapp i {
    font-size: 1.9rem;
}

/* Versión reducida para la tarjeta del hero. Sin latido: el que late es el
   botón grande del final, y dos animaciones a la vez marean. */
.lp-whatsapp--compacto {
    font-size: 1.05rem;
    padding: 0.95rem 1.25rem;
    gap: 0.6rem;
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.35);
    animation: none;
}

.lp-whatsapp--compacto i {
    font-size: 1.35rem;
}

.lp-whatsapp:hover {
    background-color: #1da851;
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(37, 211, 102, 0.5);
    animation-play-state: paused;
}

.lp-phone {
    margin-top: 1.25rem;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.lp-phone strong {
    font-size: 1.35rem;
    color: var(--primary-color);
}

/* ===========================
   PREGUNTAS FRECUENTES
   =========================== */
.lp-faq {
    max-width: 820px;
    margin: 0 auto;
}

.lp-faq__item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.lp-faq__item h3 {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 0.6rem;
}

.lp-faq__item p {
    line-height: 1.8;
}

/* ===========================
   IMAGEN DE APOYO
   =========================== */
.lp-figure {
    max-width: 620px;
    margin: 0 auto 2.5rem;
}

.lp-figure img {
    width: 100%;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

/* ===========================
   BARRA FIJA DE CONVERSIÓN (SOLO MÓVIL)
   ===========================

   En móvil la página 1 mide más de 6000px: el botón de conversión queda sobre
   el píxel 5100, o sea a unas trece pantallas de scroll. En escritorio eso da
   igual porque se baja rápido, pero en el teléfono la mayoría nunca llega.

   La barra resuelve justo eso: mantiene la acción dentro del alcance del pulgar
   durante todo el recorrido. Se oculta mientras el hero está en pantalla (ahí
   la persona todavía está entendiendo la oferta) y también cuando el botón
   grande del final ya se ve, para no mostrar dos veces lo mismo.

   En escritorio no existe: el diseño de ordenador se queda tal cual. */
.lp-sticky {
    display: none;
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 900px) {
    /* En una sola columna la tarjeta de precio va primero: es el motivo por el
       que la persona pulsó el botón de la página anterior. */
    .lp-hero__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .lp-hero--paso2 {
        text-align: center;
    }

    .lp-hero--paso2 .lp-pills {
        justify-content: center;
    }

    .lp-hero__texto {
        order: 2;
    }

    .lp-hero-precio {
        order: 1;
    }
}

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

    .lp-hero h1 {
        font-size: 1.75rem;
    }

    .lp-hero--paso2 h1 {
        font-size: 1.6rem;
    }

    .lp-lead {
        font-size: 1.05rem;
    }

    .lp-section {
        padding: 2.5rem 0;
    }

    .lp-cta__btn {
        font-size: 1.25rem;
        padding: 1.25rem 1.5rem;
    }

    .lp-whatsapp {
        font-size: 1.15rem;
        padding: 1.2rem 1.25rem;
    }

    .lp-whatsapp i {
        font-size: 1.5rem;
    }

    /* Va después de .lp-whatsapp a propósito: si no, la regla de arriba le
       devuelve el tamaño grande al botón compacto de la tarjeta. */
    .lp-whatsapp--compacto {
        font-size: 1rem;
        padding: 0.95rem 1rem;
    }

    .lp-whatsapp--compacto i {
        font-size: 1.25rem;
    }

    .lp-hero-precio {
        padding: 1.75rem 1.25rem;
    }

    .lp-price__amount {
        font-size: 2.5rem;
    }

    /* -----------------------------------------------------------------
       BARRA FIJA
       ----------------------------------------------------------------- */
    .lp-sticky {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        padding: 0.7rem 1rem;
        /* En iPhone la franja del gesto de inicio se come el borde inferior. */
        padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
        background-color: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.12);
        transform: translateY(120%);
        transition: transform 0.3s ease;
    }

    .lp-sticky.visible {
        transform: translateY(0);
    }

    .lp-sticky__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        /* 56px es el mínimo recomendado para una acción primaria en móvil:
           por encima de 44px los toques fallidos dejan de notarse. */
        min-height: 56px;
        padding: 0.9rem 1rem;
        border-radius: 60px;
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        color: var(--white);
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        box-shadow: 0 6px 16px rgba(219, 114, 195, 0.4);
    }

    .lp-sticky__btn--wapp {
        background: var(--accent-color);
        box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
    }

    .lp-sticky__btn i {
        font-size: 1.35rem;
    }

    /* Hueco fijo para que la barra nunca tape el final del pie. Se reserva
       siempre, aunque la barra esté oculta, para que no salte el layout. */
    body {
        padding-bottom: 88px;
        /* Flex en columna para poder reordenar secciones con 'order'
           más abajo. No cambia nada visual por sí solo. */
        display: flex;
        flex-direction: column;
    }

    /* El botón "volver arriba" que inyecta main.js queda justo encima de la
       barra y compite con ella. En la landing sobra: la barra ya da la acción. */
    .scroll-to-top {
        display: none !important;
    }

    /* -----------------------------------------------------------------
       LOS MÉDICOS, ANTES DEL HERO
       Solo en móvil: en escritorio el orden se queda como está en el HTML.

       Se hace con 'order' y no moviendo el bloque en el HTML porque el orden
       del documento es el que leen Google y los lectores de pantalla, y ahí el
       H1 debe seguir siendo lo primero. 'order' cambia lo que se ve, no lo que
       se lee.

       Solo se numeran estos dos: el resto de secciones se queda en order 0 y
       mantiene su orden natural detrás. La barra fija no se ve afectada porque
       es position:fixed y no participa del flujo.
       ----------------------------------------------------------------- */
    .lp-header {
        order: -2;
    }

    .lp-medicos {
        order: -1;
    }

    /* -----------------------------------------------------------------
       HERO MÁS CORTO
       Un hero de pantalla completa en móvil retrasa todo lo demás. Bajarlo
       deja ver que hay contenido debajo e invita a seguir bajando.
       ----------------------------------------------------------------- */
    .lp-hero {
        padding: 2rem 0 2.25rem;
    }

    .lp-hero h1 {
        font-size: 1.6rem;
        line-height: 1.25;
    }

    .lp-lead {
        font-size: 1rem;
    }

    /* -----------------------------------------------------------------
       CHIPS EN REJILLA
       Centrados y con flex-wrap quedaban en escalera, cada uno de un ancho:
       se leía como un descuido. En rejilla de dos forman un bloque ordenado
       y ocupan la mitad de alto.
       ----------------------------------------------------------------- */
    .lp-pills {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-top: 1.5rem;
    }

    .lp-pills li {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0.55rem 0.5rem;
        font-size: 0.78rem;
        line-height: 1.25;
        text-align: center;
    }

    /* -----------------------------------------------------------------
       CADA VENTAJA EN SU TARJETA
       En una sola columna, las viñetas seguidas se leían como un muro de
       texto gris. Separadas en tarjetas, cada idea se lee sola.
       ----------------------------------------------------------------- */
    .lp-checks li {
        background-color: var(--white);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    /* -----------------------------------------------------------------
       MÉDICOS EN FORMATO PERFIL
       La foto cuadrada ocupaba 350px de alto por médico. En redondo son 120
       y la tarjeta pasa a leerse como una ficha, no como un cartel.
       ----------------------------------------------------------------- */
    .lp-doctor {
        padding: 1.5rem 1.25rem;
        text-align: center;
    }

    .lp-doctor__photo {
        width: 120px;
        height: 120px;
        aspect-ratio: auto;
        border-radius: 50%;
        margin: 0 auto 1rem;
        border: 3px solid var(--secondary-color);
    }

    .lp-doctor__body {
        padding: 0;
    }

    .lp-doctor p {
        text-align: left;
    }

    /* -----------------------------------------------------------------
       PASOS UNIDOS POR UNA LÍNEA
       Deja claro de un vistazo que son una secuencia y no cuatro avisos
       sueltos, que es como se leían en columna estrecha.
       ----------------------------------------------------------------- */
    .lp-steps li::after {
        content: '';
        position: absolute;
        left: 1.15rem;
        top: 2.7rem;
        bottom: -1.2rem;
        width: 2px;
        background-color: var(--border-color);
    }

    .lp-steps li:last-child::after {
        display: none;
    }

    /* -----------------------------------------------------------------
       ACENTO BAJO LOS TÍTULOS
       Cinco secciones seguidas con el mismo título rosa centrado se hacían
       monótonas. El subrayado corto marca dónde empieza cada bloque.
       ----------------------------------------------------------------- */
    .lp-section .section-title::after,
    .lp-cta .section-title::after {
        content: '';
        display: block;
        width: 48px;
        height: 3px;
        margin: 0.75rem auto 0;
        border-radius: 2px;
        background-color: var(--secondary-color);
    }
}

/* El latido es un reclamo de atención, no información: si la persona pidió
   menos movimiento en su sistema operativo, se apaga. */
@media (prefers-reduced-motion: reduce) {
    .lp-cta__btn,
    .lp-whatsapp {
        animation: none;
    }
}