/* ========================================================
   MEDIA QUERIES - MÓVIL (Pantalla Completa)
   ======================================================== */
@media (max-width: 1024px) {

    .desktop-nav,
    .desktop-btn {
        display: none;
    }

    /* Centrar logo en header: spacer invisible a la izq y hamburguesa a la der */
    .mobile-spacer {
        display: block;
        width: 32px;
    }

    .hamburger-btn {
        display: block;
        width: 32px;
        color: var(--color-primary);
        font-size: 2rem;
    }

    /* EL MENÚ MÓVIL - 100% Pantalla */
    .mobile-menu-overlay {
        display: flex;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background-color: rgba(0, 94, 184, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 99999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        overflow-y: auto;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        pointer-events: all;
    }

    /* Contenedor del contenido del menú */
    .mobile-menu-content {
        width: 100%;
        max-width: 500px;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Cabecera del menú móvil (Logo y X) */
    .mobile-menu-header {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: 3rem;
        margin-top: 1rem;
    }

    .mobile-logo {
        font-size: 2rem;
    }

    .close-btn {
        position: absolute;
        right: 0;
        color: var(--color-text-dark);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .close-btn span {
        font-size: 2rem;
    }


    /* Lista centrada */
    .mobile-nav-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.8rem;
        width: 100%;
    }

    .mobile-nav-list>li>a {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--color-text-dark);
    }

    /* Acordeón Servicios Centrado */
    .mobile-dropdown {
        width: 100%;
    }

    .mobile-dropdown-header {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
        cursor: pointer;
    }

    .icon-transition {
        transition: transform 0.3s ease;
    }

    .mobile-dropdown-menu {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
        padding-top: 1.5rem;
        margin-top: 1rem;
        border-top: 1px solid #e2e8f0;
    }

    .mobile-dropdown-menu.active {
        display: flex;
    }

    .mobile-dropdown-menu a {
        font-size: 1.1rem;
        color: var(--color-text-dark);
    }

    .mobile-dropdown-menu .separator {
        height: 1px;
        background-color: #e2e8f0;
        width: 60%;
        margin: 0.2rem 0;
    }

    .mobile-btn-container {
        margin-top: 2rem;
    }

    .mobile-spacer {
        display: block;
        width: 40px;
        /* Ajusta esto si el botón hamburguesa cambia de tamaño */
    }

    .hamburger-btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 40px;
        color: var(--color-text-dark);
    }

    /* Logo dentro del menú desplegable móvil */
    .mobile-logo .logo-img {
        max-height: 50px;
        /* Puedes hacerlo un poco más grande en el menú abierto */
        margin-bottom: 2rem;
    }

    .slide-title {
        font-size: 2.2rem;
    }

    .carousel-btn {
        display: none;
        /* Ocultamos las flechas en celular para limpiar la pantalla */
    }

    .slide-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary,
    .btn-outline {
        width: 100%;
        justify-content: center;
    }

    .btn-contacto-mobile {
        color: #ffffff;
    }

    /* BIENESTAR */
    .value-container {
        flex-direction: column-reverse;
        /* Texto arriba, tarjetas abajo */
        gap: 3rem;
    }

    /* Centrar todo el bloque de texto y el botón */
    .value-content {
        align-items: center;
        text-align: center;
    }

    .value-content h2 {
        font-size: 2.5rem;
    }

    /* Centrar el ícono y texto dentro de la cajita gris */
    .highlight-box {
        justify-content: center;
        text-align: center;
    }

    /* Centrar el contenido (íconos y textos) de las 4 tarjetas */
    .value-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* KIT BIENESTAR */
    .tech-kit-header h2 {
        font-size: 2.8rem;
    }

    /* PLANES */
    .planes-grid {
        grid-template-columns: 1fr;
        /* Pasa a 1 sola columna */
        gap: 3rem;
        /* Más espacio vertical entre tarjetas */
        max-width: 500px;
        /* Evita que las tarjetas se estiren demasiado */
        margin: 0 auto;
        /* Asegura que el contenedor de tarjetas quede centrado */
    }

    .plan-highlight {
        transform: scale(1);
        /* Quitamos el efecto de "agrandado" en móviles para que no se salga de la pantalla */
    }

    .plan-highlight:hover {
        transform: scale(1) translateY(-5px);
    }

    /* --- CENTRADO TOTAL PARA MÓVILES --- */
    .plan-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Centra los elementos hijos (títulos, textos) */
    }

    .plan-features {
        align-items: center;
        /* Centra la lista de características (los tildes) en el medio de la tarjeta */
    }

    .plan-features li {
        text-align: left;
        /* Mantiene el texto alineado a su propio ícono para que no se deforme al saltar de línea */
    }

    /* STORYTELLING */
    .experience-container {
        flex-direction: column;
        /* Apila el texto arriba y la imagen abajo */
        gap: 3rem;
    }

    .experience-content {
        align-items: center;
        /* Centra el contenido general */
        text-align: center;
    }

    .experience-content h2 {
        font-size: 2.5rem;
    }

    /* Centrado de la lista de características para móvil */
    .exp-feature-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* En móvil, la imagen puede ocupar todo el ancho disponible */
    .experience-image {
        width: 100%;
    }

    /* APP */
    .app-container {
        flex-direction: column;
        /* Apila el teléfono arriba y el texto abajo */
        gap: 4rem;
        text-align: center;
    }

    .app-content h2 {
        font-size: 2.5rem;
    }

    .app-features {
        grid-template-columns: 1fr;
        /* Una sola columna para las características en celular */
        text-align: left;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .app-buttons {
        justify-content: center;
        flex-direction: column;
    }

    .btn-dark {
        justify-content: center;
        /* Centra el texto del botón si ocupa todo el ancho */
        width: 100%;
    }

    /* BLOG */
    .blog-snippet-header {
        flex-direction: column;
        align-items: center;
        /* Centra el bloque de texto y el botón horizontalmente */
        text-align: center;
        /* Centra el texto dentro de su contenedor */
    }

    .blog-cards-grid {
        grid-template-columns: 1fr;
        /* Una tarjeta debajo de la otra */
    }

    .blog-title-area h2 {
        font-size: 2.5rem;
    }

    .blog-card {
        min-height: 400px;
        padding: 2.5rem 2rem;
    }

    .blog-card-content h3 {
        font-size: 1.8rem;
    }

    /* CONTACTO */

    .contacto-zonas-container {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    /* Centrar textos de la columna izquierda */
    .contacto-info {
        padding-top: 0;
        /* Quitamos el relleno superior en celular porque ya no están lado a lado */
        align-items: center;
        text-align: center;
    }

    .contacto-info h2,
    .zonas-title {
        font-size: 2.2rem;
    }

    .contacto-desc,
    .zonas-desc {
        max-width: 100%;
    }

    /* Apilar y centrar los ítems de contacto (Teléfono, email, etc.) */
    .contacto-item {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }

    .contacto-text {
        align-items: center;
    }

    /* Centrar Redes Sociales */
    .redes-sociales-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .redes-iconos {
        justify-content: center;
    }

    /* Centrar Tarjeta de Zonas */
    .zonas-card {
        padding: 2.5rem 2rem;
        align-items: center;
        text-align: center;
    }

    /* Apilar y centrar cada zona de cobertura */
    .zona-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
        padding: 1.5rem;
    }

    /* Centrar el pie de la tarjeta (texto de zonas no cubiertas) */
    .zonas-footer {
        justify-content: center;
        flex-direction: column;
        /* Apila el icono arriba del texto para que no se vea amontonado */
        text-align: center;
        gap: 0.5rem;
        margin-top: 2rem;
    }

    /* FOOTER */
    .footer-container {
        grid-template-columns: 1fr 1fr;
        /* 2 columnas en tablets */
    }


    /* ========================================================
        SERVICIOS
   ======================================================== */

    /* HERO SERVICIOS */

    .hero-servicios-section {
        padding: 8rem 1.5rem 4rem 1.5rem;
    }

    .hero-servicios-container {
        flex-direction: column;
        gap: 4rem;
        text-align: center;
    }

    .hero-servicios-content {
        align-items: center;
    }

    .hero-servicios-content h1 {
        font-size: 3rem;
    }

    .hero-servicios-content p {
        max-width: 100%;
    }

    /* En celular, la tarjeta flotante no puede sobresalir hacia la izquierda
       porque se saldría de la pantalla, así que la centramos abajo */
    .floating-badge {
        left: 50%;
        transform: translateX(-50%);
        bottom: -2rem;
        /* La dejamos apenas colgando sobre el borde inferior */
        width: 90%;
        max-width: 320px;
    }


    /* PLANES INDIVIDUALES */
    /* Centramos la estructura del precio */
    .plan-price {
        justify-content: center;
    }

    /* Centramos los ítems de la lista (el tilde y el texto) */
    .plan-features li {
        justify-content: center;
        text-align: center;
    }

    /* Movemos la etiqueta "Más popular" al centro arriba para que quede simétrico */
    .plan-badge-corner {
        top: 0;
        right: auto;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid var(--color-primary);
        /* Pequeño borde para que no se pierda si hay fondo blanco atrás */
    }

    /* PLANES DUO */

    .planes-duo-header-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
    }

    .planes-duo-grid {
        grid-template-columns: 1fr;
        /* Una columna */
        max-width: 450px;
        margin: 0 auto;
        gap: 3rem;
    }

    /* Centrar contenido de la tarjeta */
    .duo-card {
        align-items: center;
        text-align: center;
    }

    /* Apilar el título y la pastilla de descuento */
    .duo-card-header {
        flex-direction: column;
        gap: 1rem;
    }

    .duo-price {
        justify-content: center;
    }

    .duo-action {
        justify-content: center;
    }

    /* KIT BIENESTAR / 24HS/ JURIDICO / ADAPTACION DE SERVICIOS  */

    /* Kit Bienestar */
    .srv-kit-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .kit-devices-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columnas en móvil */
    }

    /* Secciones Alternadas */
    .srv-feature-row,
    .srv-feature-row.srv-reverse {
        flex-direction: column;
        text-align: center;
        gap: 3rem;
    }

    .srv-feature-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .srv-feature-text h2 {
        font-size: 2.2rem;
    }

    /* Listas internas centradas */
    .srv-check-list {
        grid-template-columns: 1fr;
        /* 1 columna en móvil */
        justify-content: center;
    }

    .srv-check-list li {
        justify-content: center;
    }

    .srv-list-card,
    .srv-icon-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .srv-list-card i,
    .icon-box-light {
        margin: 0 auto;
    }

    /* ========================================================
                        BLOG
   ======================================================== */

    .blog-header-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .blog-header-text h1 {
        font-size: 2.8rem;
    }

    .blog-filters {
        justify-content: center;
        /* Centra las pastillas de filtros */
    }

    .blog-hero-grid {
        grid-template-columns: 1fr;
        /* Apila el destacado principal y la columna derecha */
    }

    .hero-post-content {
        align-items: center;
        text-align: center;
    }

    .post-meta,
    .post-info {
        justify-content: center;
    }

    .sidebar-post-text {
        text-align: center;
    }

    .promo-content {
        text-align: center;
    }

    .blog-main-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columnas en tablet */
    }



    /* ========================================================
        QUIENES SOMOS
   ======================================================== */

    .hero-grid,
    .historia-grid,
    .mision-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
        text-align: center;
    }

    .quienes-hero-content h1 {
        font-size: 3rem;
    }

    .historia-estadisticas {
        gap: 1rem;
    }

    .stat-number {
        font-size: 2.8rem;
    }

    .stat-box {
        align-items: center;
        border-left: none;
        border-bottom: 3px solid var(--color-primary);
        /* Borde abajo en celular */
        padding-left: 0;
        padding-bottom: 1rem;
    }

    .pilares-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .pilar-card {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mision-image {
        grid-row: 2;
        /* Bajamos la imagen debajo del texto en móvil */
    }

    .quienes-compromiso-section h2 {
        font-size: 3rem;
    }

    .cta-box-blue {
        padding: 3rem 1.5rem;
    }

    .cta-botones-row {
        flex-direction: column;
    }

    /* ========================================================
        PAGINA APP
   ======================================================== */

    .app-hero-grid,
    .app-features-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
        text-align: center;
    }

    .app-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .app-hero-content h1 {
        font-size: 3.5rem;
    }

    .app-hero-actions {
        justify-content: center;
    }

    .conexion-badge {
        left: 50%;
        transform: translateX(-50%);
        top: -1rem;
        /* Lo ponemos arriba centrado para que no se pierda */
    }

    .app-features-image-wrapper {
        order: 2;
        /* Bajamos la imagen debajo del texto */
    }

    .app-feat-item {
        flex-direction: column;
        align-items: center;
    }

    .guide-steps-grid {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin: 0 auto 4rem auto;
    }

    .step-card {
        text-align: center;
    }

    .step-icon {
        margin: 0 auto 1.5rem auto;
    }

    .support-banner {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }

    .support-info {
        flex-direction: column;
        gap: 1rem;
    }

    /* ========================================================
              PLAN ESTAR
   ======================================================== */
    .plan-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 4rem;
    }

    .plan-hero-text p {
        margin: 0 auto 2.5rem auto;
    }

    .floating-badge {
        left: 50%;
        transform: translateX(-50%);
        bottom: -2rem;
        width: max-content;
    }

    /* Kit en tablet: 3 arriba, 2 abajo */
    .plan-kit-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .plan-kit-card:nth-child(4) {
        grid-column: 1 / 2;
    }

    .plan-kit-card:nth-child(5) {
        grid-column: 2 / 4;
    }

    /* Includes en tablet */
    .plan-includes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Dúo apilado */
    .duo-wrapper-box {
        flex-direction: column;
    }

    .duo-image-side {
        height: 300px;
    }

    /* ========================================================
            ESTAR PLUS
   ======================================================== */

    /* Bento Grid: 2 columnas en tablet */
    .inter-bento-grid {
        grid-template-columns: 1fr 1fr;
    }

    .bento-large {
        grid-column: 1 / 3;
        /* Ocupa las 2 columnas */
    }

    .bento-tall {
        grid-column: 1 / 3;
        /* En tablet la ponemos a lo ancho */
    }

    /* Dúo */
    .inter-duo-wrapper {
        flex-direction: column;
        padding: 3rem 2rem;
    }

    /* ========================================================
       PLAN ESTAR PRO
   ======================================================== */

    .premium-bento-grid {
        grid-template-columns: 1fr 1fr;
    }

    .bento-col-2 {
        grid-column: 1 / 3;
    }

    .bento-tall {
        grid-column: 1 / 3;
    }

    .premium-kit-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .premium-kit-banner {
        flex-direction: column;
        text-align: center;
    }

    .kit-banner-badge {
        white-space: normal;
        justify-content: center;
    }


    /* ========================================================
    PAG KIT BIENESTAR
   ======================================================== */
    .kit-products-grid {
        grid-template-columns: 1fr 1fr;
        /* 2 columnas en tablet */
    }

    .kit-process-grid {
        gap: 2rem;
    }


    /* ========================================================
    SMARTWATCH
   ======================================================== */
    .device-row {
        grid-template-columns: 1fr;
        /* Pasa a 1 columna */
        gap: 3rem;
    }

    /* Obliga a la imagen a ir siempre arriba en el celular */
    .device-image-col {
        order: -1;
    }

    .device-text-col h2 {
        font-size: 2rem;
    }

    /* ========================================================
   MEDIA QUERIES - MÓVIL (Oxímetro)
   ======================================================== */

    .oximetro-row {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    /* En tablet/celular, mandamos la imagen arriba del texto */
    .oximetro-image-col {
        order: -1;
    }

    .oximetro-text-col h2 {
        font-size: 2rem;
    }

    /* ========================================================
            Tensiómetro
   ======================================================== */
    .tensiometro-row {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    /* En pantallas chicas, aseguramos que la imagen quede arriba */
    .tensiometro-image-col {
        order: -1;
    }

    .tensiometro-title {
        font-size: 2rem;
    }

    /* ========================================================
         Dispositivos Básicos
   ======================================================== */
    .basic-devices-grid {
        grid-template-columns: 1fr;
        /* Pasa a 1 columna apilada */
        gap: 2.5rem;
    }
}


@media (max-width: 768px) {

    /* BIENESTAR */
    .value-grid {
        grid-template-columns: 1fr;
        /* 1 sola columna en celulares */
    }

    .hero-botones-row {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-botones-row a {
        width: 100%;
        /* Hacemos que el botón ocupe de lado a lado en el celular */
        text-align: center;
        justify-content: center;
    }

    /* KIT BIENESTAR INDEX */
    .tech-kit-header h2 {
        font-size: 2.2rem;
    }

    .tech-devices-grid {
        gap: 1rem;
    }

    .device-card {
        flex: 1 1 100%;
        /* En celulares cada tarjeta ocupa el 100% del ancho */
        max-width: 350px;
    }

    .tech-bonus-banner {
        flex-direction: column;
        text-align: center;
        padding: 1rem 1.5rem;
    }
    

    /* COMPARACION */

    .comparativa-header h2 {
        font-size: 2.2rem;
    }

    /* Indicador visual en móvil para saber que se puede hacer scroll */
    .table-container {
        box-shadow: inset -15px 0 15px -15px rgba(0, 0, 0, 0.1);
    }

    /* APP */

    .app-mockup {
        height: 250px;
        object-fit: cover;
    }

    /* INSTITUCIONES */
    /* En celulares, hacemos que el difuminado sea más pequeño */
    .marquee-container::before,
    .marquee-container::after {
        width: 40px;
    }

    /* REGLA MAGICA: 50vw significa "50% del ancho de la pantalla". 
       Así nos aseguramos de que solo se vean 2 logos a la vez. */
    .partner-logo {
        width: 50vw;
        font-size: 1.2rem;
        /* Achicamos un poco la letra en móvil */
    }

    /* AGE */
    .trust-badge-card {
        flex-direction: column-reverse;
        /* Pone el logo arriba y el texto abajo en celulares */
        text-align: center;
        padding: 2.5rem 1.5rem;
        gap: 2rem;
    }

    .trust-text h2 {
        font-size: 1.35rem;
    }

    .trust-logo img {
        max-width: 180px;
        /* Achica un poco el logo en móviles */
    }

    /*  FAQ */

    .faq-snippet-header h2 {
        font-size: 2.2rem;
    }

    .faq-item summary {
        padding: 1.2rem 1.5rem;
        /* Un poco menos de espacio a los costados en celular */
    }

    .faq-question {
        font-size: 1rem;
        padding-right: 1rem;
        /* Evita que el texto choque con la flechita */
    }

    .faq-answer {
        padding: 0 1.5rem 1.2rem 1.5rem;
    }

    /* FOOTER */

    .footer-container {
        grid-template-columns: 1fr;
        /* 1 columna en celulares */
        gap: 3rem;
        text-align: center;
        /* Centra los párrafos generales */
    }

    /* Centrar Logo y Redes Sociales */
    .footer-logo {
        justify-content: center;
    }

    .footer-socials {
        justify-content: center;
    }

    /* Centrar Títulos de columnas (Enlaces y Contacto) */
    .footer-links-col h4,
    .footer-contact-col h4 {
        justify-content: center;
    }

    /* Centrar listas de enlaces */
    .footer-links-col ul,
    .footer-contact-col ul {
        align-items: center;
    }

    /* Ajuste especial para los datos de contacto (Apilar ícono y texto) */
    .footer-contact-col li {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    /* Centrar el botón de WhatsApp del footer */
    .btn-footer-contact {
        justify-content: center;
        width: fit-content;
        margin: 0 auto;
    }

    /* Centrar barra inferior de Copyright y Legales */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        justify-content: center;
        gap: 1.5rem;
    }

    .footer-legal {
        justify-content: center;
        flex-direction: column;
        /* Apila los links legales en celular para que no queden apretados */
        gap: 0.8rem;
    }

    .footer-legal .separator {
        display: none;
        /* Ocultamos los puntitos separadores en celular */
    }

    /* WHATSAPP*/
    .whatsapp-float {
        bottom: 1.5rem;
        /* Un poco más pegado al borde en celular para no robar tanta pantalla */
        right: 1.5rem;
        width: 55px;
        /* Un poco más pequeño */
        height: 55px;
        font-size: 1.8rem;
    }

    /*===================================
              SERVICIOS
    ===================================*/


    /* DUDAS */

    .cta-dudas-container h2 {
        font-size: 2.5rem;
    }

    .cta-dudas-botones {
        flex-direction: column;
        gap: 1.2rem;
    }

    /* En celulares, los botones ocupan todo el ancho y quedan uno debajo del otro */
    .btn-primary-shadow,
    .btn-outline-shadow {
        width: 100%;
        max-width: 350px;
    }


    /* ========================================================
                        BLOG
   ======================================================== */

    .blog-main-grid {
        grid-template-columns: 1fr;
        /* 1 columna en celulares */
    }

    .newsletter-card {
        text-align: center;
    }
    
    .blog-art-lat{
        display: none;
    }


    /* ========================================================
                QUIENES SOMOS
   ======================================================== */

    .historia-estadisticas {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Dos columnas iguales */
        gap: 1rem;
        /* Espacio vertical y horizontal */
        justify-items: center;
        /* Centra la cajita dentro de su mitad de pantalla */
    }

    /* ========================================================
                FAQ
   ======================================================== */

    .faq-page-header h1 {
        font-size: 2.5rem;
    }

    /* Centramos el título de cada categoría (Ícono + Texto) */
    .faq-category-title {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 0.8rem;
    }

    /* Reducimos el padding de las tarjetas en celular */
    .faq-card summary {
        padding: 1.2rem 1.5rem;
    }

    .faq-a-text {
        padding: 0 1.5rem 1.2rem 1.5rem;
    }

    .faq-cta-box {
        padding: 3rem 1.5rem;
    }

    .faq-cta-box h2 {
        font-size: 1.8rem;
    }

    /* ========================================================
        LEGALES
   ======================================================== */

    .legal-hero h1 {
        font-size: 2.2rem;
    }

    .legal-document {
        padding: 2.5rem 1.5rem;
        /* Menos padding en celulares para aprovechar el espacio */
    }

    .legal-block h2 {
        font-size: 1.25rem;
    }

    .legal-alert-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.8rem;
        border-left: none;
        border-top: 4px solid #fbbf24;
        border-radius: 0 0 1rem 1rem;
    }

    /* En celulares forzamos que las listas de contacto se centren si todo lo demás está centrado */
    .legal-contact-list li {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    /* ========================================================
                PLAN ESTAR
   ======================================================== */

    .plan-hero-text h1 {
        font-size: 2.8rem;
    }

    .plan-section-header h2 {
        font-size: 2.2rem;
    }

    .plan-kit-grid {
        grid-template-columns: 1fr;
        /* 1 columnas en móvil */
    }

    .plan-kit-card:nth-child(4),
    .plan-kit-card:nth-child(5) {
        grid-column: auto;
        /* Resetea el span de tablet */
    }

    .plan-includes-grid {
        grid-template-columns: 1fr;
        /* 1 columna en móvil */
    }

    .duo-content-side {
        padding: 3rem 1.5rem;
        text-align: center;
    }

    .duo-benefits-list li {
        justify-content: center;
        text-align: left;
        /* Mantiene el texto alineado si ocupa más de una línea */
    }

    .duo-content-side .btn-white-solid {
        align-self: center;
    }

    .include-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Centra el ícono y el contenido horizontalmente */
        text-align: center;
        /* Centra los textos */
    }

    .include-icon {
        margin: 0 auto 1.5rem auto;
        /* Asegura que el cuadradito del ícono quede perfectamente al medio */
    }

    /* ========================================================
            ESTAR PLUS
   ======================================================== */

    .intermedio-kit-grid {
        grid-template-columns: 1fr;
        /* Fuerza 5 columnas idénticas */
    }

    /* Bento Grid: 1 columna en celular */
    .inter-bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-large,
    .bento-tall {
        grid-column: 1 / 2;
    }

    .bento-header {
        text-align: center;
    }

    /* Dúo */
    .inter-duo-badge {
        bottom: -1rem;
        right: 50%;
        transform: translateX(50%);
        /* Centra el badge en celular */
    }

    /* Centrar las tarjetas del Bento Grid */
    .bento-card {
        align-items: center;
        text-align: center;
    }

    /* Centrar la sección del Dúo Intermedio */
    .inter-duo-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Centrar la lista de tildes del Dúo */
    .inter-duo-list li {
        justify-content: center;
        text-align: left;
        /* Mantiene el texto prolijo si ocupa dos renglones, pero centrado en la pantalla */
    }

    /* Asegurar que el botón negro se centre perfectamente */
    .inter-duo-content .btn-dark-solid {
        align-self: center;
        margin-top: 0.5rem;
    }

    /* ========================================================
       PLAN ESTAR PRO
   ======================================================== */

    /* 1. Centrar el Hero en móvil */
    .plan-hero-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .plan-hero-text .btn-auto {
        margin: 0 auto;
    }

    .badge-premium {
        left: 50%;
        transform: translateX(-50%);
        bottom: -2rem;
        flex-direction: column;
        text-align: center;
        align-items: center;
        width: 90%;
    }

    /* 2. Centrar Bento Grid (Propuesta de Valor) */
    .premium-bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-col-2,
    .bento-tall {
        grid-column: 1 / 2;
    }

    .bento-card {
        align-items: center;
        text-align: center;
    }

    /* Adaptar tarjeta horizontal */
    .bento-horizontal {
        flex-direction: column;
    }

    .bento-side-img {
        width: 100%;
        height: 200px;
    }

    /* 3. Centrar Kit Premium */
    .premium-kit-grid {
        grid-template-columns: 1fr;
    }

    .premium-kit-grid .inter-kit-card {
        align-items: center;
        text-align: center;
    }

    /* 4. Centrar Dúo Premium */
    .inter-duo-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .inter-duo-list li {
        justify-content: center;
        text-align: left;
    }

    .inter-duo-content .btn-auto {
        align-self: center;
        margin-top: 1rem;
    }

    /* Centrar el título de Propuesta de Valor en móvil */
    .premium-section-title {
        display: block;
        width: fit-content;
        margin: 0 auto 3rem auto;
        text-align: center;
    }

    /* ========================================================
    PAG KIT BIENESTAR
   ======================================================== */

    /* Centrado general en móvil */
    .kit-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .kit-hero-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .kit-hero-text p {
        margin: 0 auto 2.5rem auto;
    }

    .hero-image-bg-shape-kit {
        right: 0;
        width: 100%;
    }

    /* Grid de productos en 1 columna en móvil */
    .kit-products-grid {
        grid-template-columns: 1fr;
    }

    /* Pasos en 1 columna en móvil */
    .kit-process-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .kit-intro-title,
    .kit-section-header h2,
    .text-white h2 {
        font-size: 2rem;
    }

    /* ========================================================
    SMARTWATCH
   ======================================================== */
    .device-feature-item {
        flex-direction: column;
        /* Apila el icono y el texto */
        align-items: center;
        text-align: center;
    }

    .device-text-col h2,
    .device-intro {
        text-align: center;
    }

    .btn-kit-bienestar {
        text-align: center;
        align-items: center;

    }

    /* ========================================================
    (Oxímetro)
   ======================================================== */

    .oximetro-text-col h2,
    .oximetro-intro,
    .oximetro-footer-text {
        text-align: center;
    }

    .stat-card h4,
    .stat-card span {
        text-align: center;
    }

    .device-stats-grid {
        grid-template-columns: 1fr;
        /* Apila las tarjetitas en celulares chicos */
        gap: 1rem;
    }

    .product-showcase-card {
        padding: 2rem;
    }

    .oximetro-text-col .btn-primary,
    .tensiometro-text-col .btn-primary {
        display: flex;
        text-align: center;
        align-items: center;
        margin: 2rem auto;
    }

    /* ========================================================
        Tensiómetro
   ======================================================== */
    .tensiometro-title,
    .tensiometro-quote-box {
        text-align: center;
    }

    .tensiometro-quote-box {
        margin-left: auto;
        margin-right: auto;
        width: fit-content; /* Hace que la caja siga abrazando al texto sin estirarse de más */
        display: block; /* Permite que los márgenes automáticos la centren */
        text-align: center;
    }
   

    .tensiometro-feature-list{
        display: flex;
        align-items: center;
        text-align: center;
    }


    /* BASICOS*/

   

    .bd-image-wrapper {
        height: 220px;
        /* Achica un poco las imágenes en celular */
    }

    
    .bd-content {
        text-align: center;
        align-items: center;
        padding: 2rem 1.5rem;
    }

    /* Termómetro: Apilar icono y texto, y centrarlos */
    .bd-feature-list li {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem; /* Achicamos un poco el espacio entre icono y texto */
    }

    /* Balanza: Forzar 1 sola columna y centrar su contenido */
    .bd-pills-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .bd-pill {
        justify-content: center; /* Esto centra el circulito y el texto */
    }
}