/*

   * {
    outline: 1px solid red !important;
} 
*/




/* ===============
   FUENTES (FONT-FACE)
   =============== */

@font-face {
    font-family: 'Manjari-Bold';
    src: url('./fonts/Manjari-Bold/Manjari-Bold.ttf') format('truetype');
    font-weight: normal; /* Considerar 'bold' si es una fuente específicamente bold */
    font-style: normal;
    font-display: swap;
}

/* ===============
   VARIABLES GLOBALES (:root)
   =============== */

:root {
    /* Colores primarios derivados de #41b6e6 */
    --bs-primary: #41b6e6;
    --bs-primary-rgb: 65, 182, 230;
    --bs-primary-text-emphasis: #205b73;
    --bs-primary-bg-subtle: #D1ECF7;
    --bs-primary-border-subtle: #A3D5EF;

    /* Secundario: Un gris neutro */
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-secondary-text-emphasis: #363b3f;
    --bs-secondary-bg-subtle: #E2E3E5;
    --bs-secondary-border-subtle: #CDD0D4;

    /* Info: Un azul más claro/suave */
    --bs-info: #ADD8E6;
    --bs-info-rgb: 173, 216, 230;
    --bs-info-text-emphasis: #576C73;
    --bs-info-bg-subtle: #EBF7FA;
    --bs-info-border-subtle: #D5EDF3;

    /* Success: Verde estándar */
    --bs-success: #28a745;
    --bs-success-rgb: 40, 167, 69;
    --bs-success-text-emphasis: #145325;
    --bs-success-bg-subtle: #D4EDDA;
    --bs-success-border-subtle: #C3E6CB;

    /* Warning: Amarillo/naranja estándar */
    --bs-warning: #ffc107;
    --bs-warning-rgb: 255, 193, 7;
    --bs-warning-text-emphasis: #7F6103;
    --bs-warning-bg-subtle: #FFF3CD;
    --bs-warning-border-subtle: #FFEEB4;

    /* Danger: Rojo estándar */
    --bs-danger: #dc3545;
    --bs-danger-rgb: 220, 53, 69;
    --bs-danger-text-emphasis: #6E1A22;
    --bs-danger-bg-subtle: #F8D7DA;
    --bs-danger-border-subtle: #F5C6CB;

    /* Light y Dark */
    --bs-light: #f8f9fa;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark: #343a40;
    --bs-dark-rgb: 52, 58, 64;

    /* Colores para links */
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: #338CBF;
    --bs-link-active-color: #205b73;
}

/* ===============
   ESTILOS BASE Y TIPOGRAFÍA
   =============== */

body {
    font-family: "Sora", sans-serif;
    font-weight: 200;
    font-size: 0.85rem;
}

a {
    color: #338CBF;
    text-decoration: none;
}

a:hover {
    color: #000;
}

a:hover img {
    opacity:0.8;
}
/* Clases de tipografía Sora */
.sora-100 {
    font-family: "Sora", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.sora-200 {
    font-family: "Sora", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.sora-400 {
    font-family: "Sora", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.sora-600 {
    font-family: "Sora", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.sora-800 {
    font-family: "Sora", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.logo {
    font-family: 'Manjari-Bold';
    color: #41b6e6;
    font-size: 2.3rem;
    font-weight: bold;
}

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

.text-right {
    text-align:right;
}

/* ===============
   BOTONES
   =============== */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #41b6e6;
    --bs-btn-border-color: #41b6e6;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #338CBF;
    --bs-btn-hover-border-color: #338CBF;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #205b73;
    --bs-btn-active-border-color: #205b73;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #41b6e6;
    --bs-btn-disabled-border-color: #41b6e6;
}

.btn-outline-primary {
    --bs-btn-color: #41b6e6;
    --bs-btn-border-color: #41b6e6;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #41b6e6;
    --bs-btn-hover-border-color: #41b6e6;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #41b6e6;
    --bs-btn-active-border-color: #41b6e6;
    --bs-btn-disabled-color: #41b6e6;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #41b6e6;
    --bs-gradient: none;
}

a.btn {
    font-size: 0.9rem;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: #444;
}

.btn-verde {
    background-color:#71b62c;
    border-color:#71b62c;
    color:#fff;
    font-weight:600;
    font-size:1rem!important;
}

.btn-verde:hover,
.btn-verde:active {
    background-color:#444;
    border-color:#444;
    color:#fff;
    font-weight:600;
}

.btn-verde-filete {
    background-color:#fff;
    border-color:#71b62c;
    color:#71b62c;
    font-weight:600;
}

.btn-verde-filete:hover,
.btn-verde-filete:active {
    background-color:#444;
    border-color:#444;
    color:#fff;
    font-weight:600;
}

.mobile-button-cta-header:hover {
    background-color:#444!important;
    border-color:#444!important;
    color:#fff!important;
    font-weight:600!important;
}

/*
    AJUSTES
*/
.dropdown-menu.show {
    z-index:9999;
    position:absolute;
}
.dropdown-item:focus, .dropdown-item:hover {
    background-color:#41b6e6;
    color:#fff;
}

ul li a {
    word-break: break-all; 
}

/*
    CORPORATIVO
*/
.logo-corporativo, .logo-corp {
    color: #41b6e6 !important;
}

/* ===============
   NAVEGACIÓN Y MENÚ
   =============== */

.bg-body-tertiary {
    background-color: #41b6e6 !important;
}

.nav-link {
    font-weight: 600;
    margin-right: 1.8rem !important;
}

/* =============================================== */
/* ESTILOS PARA LA NUEVA CABECERA RESPONSIVE       */
/* =============================================== */

/* 1. Ajuste del padding para el body por la cabecera fija */
body {
    /* La cabecera móvil es más alta, necesita más padding */
    padding-top: 105px; 
}
@media (min-width: 992px) {
    /* En escritorio, la cabecera es más baja */
    body {
        padding-top: 72px;
    }
}
/* 2. Estilos para los enlaces de la fila inferior en móvil */
/* LA CLAVE PARA QUE NO DESBORDE */
.nav-link-mobile {
    display: block;
    padding: 0.5rem 0.2rem; /* Padding horizontal MÍNIMO */
    font-size: 0.90rem;     /* Letra PEQUEÑA para que quepa */
    font-weight: 500;
    color: #666;
    text-decoration: none;
    white-space: nowrap; /* Evita que el texto se parta en dos líneas */
}
.nav-link-mobile.active, .nav-link-mobile:hover {
    color: #000;
    font-weight: bold;
}

/* 3. Estilo para el botón CTA "Contrata" en móvil */
.btn-mobile-cta {
    display: block;
    background-color: #71b62c;
    border-color: #71b62c;
    color: white;
    border-radius: 20px;
    padding: 0.4rem 0.5rem; /* Padding horizontal y vertical MÍNIMO */
    font-size: 0.75rem;     /* Letra PEQUEÑA para que quepa */
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.btn.btn-cta-nav:hover {
    background-color: #666;
    border-color: #666; 
}

/* 4. Estilos para la navegación de ESCRITORIO */
.navbar-nav .nav-link {
    font-weight: 500;
    color: #555;
    margin: 0 0.5rem;
    padding: 0.5rem 1rem;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #000;
}
.btn-cta-nav {
    background-color: #71b62c;
    border-color: #71b62c;
    color: #fff;
    border-radius: 20px;
    padding: 0.5rem 1.2rem;
    font-weight: 600;
}

/* 5. Transición para el "salto" del menú (solución al segundo problema) */
.navbar.fixed-top {
    transition: all 0.3s ease;
}


/* ===============
   SECCIONES DE PÁGINA Y CABECERAS
   =============== */
.seccion-home {
    
}

.seccion-home h1 {
    font-size: 3.3rem;
}

.seccion-home h2 {
    font-size: 2.85rem;
}

.seccion-home h3 {
    font-size: 2rem;
}

.seccion-home h4 {
    font-size: 1.3rem;
}

.seccion-pagina {
    
}

.seccion-pagina h1 {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 2.8rem;
}

.seccion-pagina h2 {
    font-size: 2.85rem;
    font-weight: 500;
    line-height: 2.88rem;
    color: rgb(33, 37, 41);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.seccion-pagina h3 {
    font-size: 1.4rem;
}

.seccion-pagina h4 {
    font-size: 1.3rem;
}

.especial-cabecera {
    color: rgb(33, 37, 41)!important;
}

.estilos-completos-card {
    font-size:0.9rem;
}

.estilos-completos-card h3 {
    font-size:1.5rem;
}

.card-gris {
    background-color:transparent;
}

.h5-especial h5 {
    font-weight: normal;
    font-size:1.15rem;
}

/** HERO SECTIONS  */

.hero-section-servicios {
    background-image: url('/assets/images/fondo-servicios-002.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 554px;
    position: relative;
    overflow: hidden;
    margin-top: -2px; 
}
.hero-section-servicios h1 {
    font-size:4rem;
    padding-top:380px;

}
.hero-section-servicios p.lead {
    font-size:2.2rem;
}

.hero-section-quienes {
    background-image: url('/assets/images/fondo-oscuro-004.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 554px;
    position: relative;
    overflow: hidden;
    margin-top: -2px; 
}
.hero-section-quienes h1 {
    font-size:4rem;
    padding-top:380px;

}
.hero-section-quienes p.lead {
    font-size:2.2rem;
}

.hero-section-premios {
    background-image: url('/assets/images/fondo-lariz-001.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 554px;
    position: relative;
    overflow: hidden;
    margin-top: -2px; 
}
.hero-section-premios h1 {
    font-size:4rem;
    padding-top:380px;

}
.hero-section-premios p.lead {
    font-size:2.2rem;
}

.hero-section-dispositivos-desktop {
    background-image: url('/assets/images/fondo-dispositivos-001.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 200px !important;
    position: relative;
    overflow: hidden;
    margin-top: -2px;
}

.hero-section-dispositivos-desktop h1 {
    padding-top: 8rem;
    color: #fff;
}

.hero-section-dispositivos-mobile {
    background-image: url('/assets/images/fondo-dispositivos-002.png');
    min-height: 200px !important;
    color: #fff;
}

.hero-section-atencion-cliente-general {
    background-image: url('/assets/images/fondo-atencion-cliente.png');
    min-height: 400px !important;
    height: 400px !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #fff;
}



/* =================================================================== */
/* ESTILOS PARA HEROES DE PÁGINAS INTERNAS (TEMPLATE DUAL)           */
/* =================================================================== */

.hero-page-template {
    position: relative;
    overflow: hidden;
    color: white; /* Color del texto general del hero */
    
    display: flex;             /* Hacemos que sea un contenedor flex */
    flex-direction: column;    /* Importante: Apilamos los hijos verticalmente */
    justify-content: flex-end; /* Empuja el contenido al final (abajo) */
    align-items: center;       /* Sigue centrando horizontalmente el bloque de contenido */
    
    text-align: center; /* Centra el texto dentro del bloque de contenido */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; 
    
    padding-top: 2rem;
    padding-bottom: 2rem; 
}

/* Oscurecimiento de la imagen de fondo (similar a tu fondo-negro) */
.hero-page-template::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Capa semitransparente oscura */
    z-index: 0;
}

/* Contenido (h1, p, botones) que va por encima de la imagen de fondo */
.hero-page-template .content-overlay {
    position: relative;
    z-index: 1; /* Asegura que el contenido esté por encima del oscurecimiento */
    padding: 2rem 1rem; /* Padding interno para el contenido */
}

/* --- Ajustes de ALTURA y FONT-SIZE por defecto para el template --- */
.hero-page-template h1 {
    font-size: 2.8rem;
    line-height: 1.2;
    font-weight: bold;
}
.hero-page-template p.lead {
    font-size: 1.2rem;
}

/* --- Imágenes y Alturas ESPECÍFICAS para cada tipo de página (Desktop) --- */
.hero-section-hogares-desktop {
    background-image: url('/assets/images/hogares-cabecera-desktop-3.png'); /* 1900x500 */
    min-height: 600px;
}
.hero-section-empresas-desktop {
    background-image: url('/assets/images/empresas-cabecera-desktop-3.png');
    min-height: 600px; /* Ajusta según tus imágenes */
}
.hero-section-aapp-desktop {
    background-image: url('/assets/images/aapp-cabecera-desktop-3.png');
    min-height: 600px; /* Ajusta según tus imágenes */
}

/* --- Imágenes y Alturas ESPECÍFICAS para cada tipo de página (Mobile) --- */
.hero-section-hogares-mobile {
    background-image: url('/assets/images/hogares-cabecera-mobile-3.png'); /* 800x1200 */
    min-height: 500px; /* Será más alta para vertical */
}
.hero-section-empresas-mobile {
    background-image: url('/assets/images/empresas-cabecera-mobile-3.png');
    min-height: 500px; /* Ajusta según tus imágenes */
}
.hero-section-aapp-mobile {
    background-image: url('/assets/images/aapp-cabecera-mobile-3b.png');
    min-height: 500px; /* Ajusta según tus imágenes */
}

/* --- Ajustes Responsive para el contenido (para que los textos quepan bien) --- */
@media (max-width: 767.98px) { /* Móviles pequeños */
    .hero-page-template h1 {
        font-size: 2rem;
        line-height: 1.2;
    }
    .hero-page-template p.lead {
        font-size: 1rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) { /* Tablets */
    .hero-page-template h1 {
        font-size: 2.5rem;
    }
    .hero-page-template p.lead {
        font-size: 1.1rem;
    }
}

/* =================================================================== */
/* ESTILOS ESPECÍFICOS PARA HEROES DE PÁGINAS GENÉRICAS               */
/* =================================================================== */

/* Esta es la clase base para los Heroes genéricos (no define imagen de fondo aquí) */
/* El comportamiento (flex, contenido abajo, fondo fijo, etc.) viene de .hero-page-template */
.hero-section-generica {
    /* Aquí no ponemos background-image, lo harán las clases de más abajo */
    justify-content: center; /* Empuja el contenido al final (abajo) */
}

/* --- CLASES ESPECÍFICAS PARA CADA IMAGEN DE FONDO (LAS QUE AÑADIRÁS EN EL HTML) --- */

/* Ejemplo 1: Para páginas como "Políticas" o "Aviso Legal" */
.hero-section-generica-att {
    background-image: url('/assets/images/fondo_blog.png'); /* Tu imagen específica para este tipo de página */
    min-height: 320px; /* Puedes ajustar la altura mínima para esta imagen */
}
.hero-section-generica-blog {
    background-image: url('/assets/images/fondo_blog.png'); /* Tu otra imagen de fondo */
    min-height: 200px; /* Otra altura mínima si lo requiere la imagen */
}
.hero-section-generica-medioambiente {
    background-image: url('/assets/images/fondo-medioambiente-001.png'); /* Tu otra imagen de fondo */
    min-height: 320px; /* Otra altura mínima si lo requiere la imagen */
}
.hero-section-generica-dispositivos {
    background-image: url('/assets/images/fondo-dispositivos-001.png'); /* Tu otra imagen de fondo */
    min-height: 500px; /* Otra altura mínima si lo requiere la imagen */
}
.hero-section-generica-premios {
    background-image: url('/assets/images/fondo-lariz-001.png'); /* Tu otra imagen de fondo */
    min-height: 350px; /* Otra altura mínima si lo requiere la imagen */
}
.hero-section-generica-servicios {
    background-image: url('/assets/images/fondo-servicios-002.png'); /* Tu otra imagen de fondo */
    min-height: 350px; /* Otra altura mínima si lo requiere la imagen */
}
.hero-section-generica-quienes {
    background-image: url('/assets/images/quienes-cabecera-collage.png'); /* Tu otra imagen de fondo */
    min-height: 450px; /* Otra altura mínima si lo requiere la imagen */
    background-repeat: repeat-x;
    background-size: 42%;
    background-position-x: left;
    background-position-y: 68px;
}

.images-aapp img {
    border-radius: 3rem;
}

.img-redondeada-juan {
    border-radius: 0.8rem;
}

.fondo-saludable {
    background-image: url('/assets/images/fondo-saludable-001.png');
}
h3.especial-acceder-a {
    font-size:3rem!important;
    color:#999;
    margin-top:4rem;
    line-height:3rem;
    text-align:right;
}
h3.especial-acceder-a .fuente-corp {
    font-size: 3.5rem;
    margin-top: 22px;
    display:block;
}

.parallax-container,
.parallax-container-empresas,
.parallax-container-dispositivos,
.parallax-container-politicas {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.parallax-container {
    height: 500px;
}

.parallax-container-empresas {
    height: 500px;
}

.parallax-container-dispositivos {
    height: 300px;
}

.parallax-container-politicas {
    background-image: url('/assets/images/fondo-oscuro-005.png');
    min-height: 300px !important;
    height: 300px !important;
}

.parallax-container .contenido,
.parallax-container-empresas .contenido {
    text-align: left;
    padding: 20px;
}

.parallax-container-empresas .contenido {
    padding-top: 4rem;
}

.parallax-container-politicas h1 {
    padding-top: 4rem;
}


.hero-section-medioambiente-desktop, .hero-section-medioambiente-mobile {
    background-image: url('/assets/images/fondo-medioambiente-001.png')!important;
    background-size: 100%;
    background-position: top;
    height: 9.8rem;
    color: #fff;
}

.hero-section-medioambiente-desktop h1 {
  padding-top: 2rem;
    color: #fff;
}

.hero-section-medioambiente-mobile {
  background-size: cover;
  background-position: left center;
  height: 9.8rem;
}
.hero-section-medioambiente-mobile h1 {
    padding-top: 2rem;
    color: #fff;
}

.container-security img.img-fluid { 
    border-radius: 2rem;
    width:70%!important;
}

.zona-oscurilla {
    background-color:#ccc;
    
}

.container-azul-alternativo {
    background-color:#1f5c99;
}
.container-azul-corp {
    background-color:#0c9ed5;
}

.container-azul-alternativo h2, .container-azul-corp h2 {
    color:#fff;
}

.texto-grande p {
    font-size:1.2rem;
}

/* ===============
   ESTILOS PARA DISPOSITIVOS (SECCIÓN O TARJETAS)
   =============== */

.dispositivos h3,
.dispositivos p {
    text-align: center;
    color: #fff;
}
.dispositivos p {
  font-size:0.9rem;
}
.item-menu-dispositivos {
    background-color: #fff;
    border-radius: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 3rem;
    padding: 0.3rem 0.8rem;
}

.titulo-dispositivo {
    font-size: 1.3rem;
    font-weight: bold;
    color: #555;
}

.desc-dispositivo p,
.desc-dispositivo ul {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
    padding:0 1rem;
}

.masinfo-dispositivo {
    text-align: right;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem;
}

.masinfo-dispositivo a {
    font-size: 1rem;
}
.ul-documentacion {
    margin-top:1rem;
}
.ul-documentacion li {
    list-style: none;
    margin-bottom:0.4rem;
    font-size:1.1rem;
}
.ul-documentacion li i {
    margin-right:1rem;
}
/* ===============
   FOOTER
   =============== */

footer h5 {
    color: #41b6e6 !important;
}

.linea_footer {
    border-top: 1px solid #ABD;
    padding-top: 3rem !important;
}

.footer-cite-small {
    font-size: 0.88rem;
    font-style: italic;
}

.item_social {
    font-size: 1.7rem;
}

.item_social a {
  color: #41b6e6 !important;
}
.item_social a:hover {
  color: #888 !important;
}
.cite-very-small {
    font-size: 0.8rem;
    font-style: italic;
    text-align: center;
    line-height: 0.85rem;
}

/* ===============
   TABLAS Y LISTAS
   =============== */

.table-texto-mini {
    font-size: 0.8rem;
}

/* ===============
   COMPONENTES DE TARJETAS Y CAJAS
   =============== */

.cajon-blanco-como-bueno {
    padding: 0.5rem 1.5rem 0 1.5rem;
    margin-bottom: 12px;
    background-color: #fff;
    color: #444;
    border-radius: 10px;
    text-align: center;
}

.cajon-blanco-como-bueno h4 {
    font-weight: bold;
    margin-top: 0.5rem;
}

.cajon-blanco-como-bueno p {
    margin-top: 0;
    padding-bottom: 0px;
}

.caja-blanca-border {
    background-color: #fff;
    border-radius: 16px;
}

.caja-blanca-border h4 {
    font-size: 2.1rem;
    font-weight: bold;
    text-align: center;
    padding-top: 1rem;
    color: #41b6e6;
}

.caja-blanca-border p {
    font-size: 1.1rem;
    text-align: center;
    padding-bottom: 1rem;
}

.card-sin-bordes .card {
    border: none;
}

.card-sin-bordes .card-body {
    padding: 0;
}

.card-sin-bordes-aapp .card img {
    border-radius:0.5rem;
}

.card-sin-bordes-aapp .card-body h3 {
    font-size:1.2rem;
}

.form-control {
    padding: .875rem .75rem;
}

.home-quienes-necesitan h4.card-title {
    font-size:2rem;
    color:#000;
    text-align: center;
    font-weight: 600;
    background-color: #ffffff77;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

.home-quienes-necesitan .card {
    /* - */
}

.home-quienes-necesitan .card img {
    border-radius:1rem;
}

.home-quienes-necesitan p.sub-titulo {
    font-size:1.2rem;
}

.cajon-unico {
    font-size: 1.5rem;
    line-height: 1.7rem;
    font-weight: 500;
}  
.cajon-unico-left-1 {
    border-bottom: 1px solid #aaa;
    margin-top: 7rem;
}
.cajon-unico-left-2 {
    border-bottom: 1px solid #aaa;
    margin-top: 6rem;
}
.cajon-unico-left-1 p, .cajon-unico-left-2 p {
    padding-right:4rem;
    text-align: left;
}

.cajon-unico-right-1 {
    margin-top: 5rem;
    border-bottom: 1px solid #aaa;
}
.cajon-unico-right-2 {
    margin-top: 6rem;
    border-bottom: 1px solid #aaa;
}
.cajon-unico-right-1 p, .cajon-unico-right-2 p {
    padding-left:4rem;
    text-align: right;
}

.cajon-unico-mobile {

}

.cajon-unico-mobile p {
    margin-left:0.4rem;
    padding-top:0.3rem;
    font-size:1.3rem;
    border-left: 2px solid #bbb;
    padding-left:1.4rem;
    margin-top:3rem;
    font-weight: 600;
    padding-right: 1rem;
}

/* ===============
   TABLA DE PRECIOS (PRICING TABLE)
   =============== */

.pricing-table-container .card {
    border-radius: 0.75rem;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    margin-left: auto;
    margin-right: auto;
}

.pricing-table-container .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.pricing-table-container .card-header {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.pricing-table-container .card-header h3 {
    font-size: 1.2rem;
    margin-bottom: 0;
}

.pricing-table-container .card-body ul {
    list-style: none;
    padding: 0;
}

.pricing-table-container .feature-group {
    font-size: 0.9rem;
    font-weight: bold;
    color: #666;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
}

.pricing-table-container .feature-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0;
    font-size: 0.95rem;
    color: #495057;
}

.pricing-table-container .feature-label {
    text-align: right;
    flex-shrink: 0;
    margin-right: 0.5rem;
    color: #666;
    font-size: 0.9rem;
}

.pricing-table-container .feature-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1;
}

.pricing-table-container .feature-value img {
    max-width: 20px;
    height: auto;
    display: block;
}

.btn-planes {
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    background-color: #71b62c;
    border-color: #71b62c;
}

.btn-planes:hover {
    background-color: #406b14;
    border-color: #406b14;
}

.precio-grande {
    font-size: 2rem;
    color: #444;
    font-weight: bold;
}


/* ===============
   CALL TO ACTION (TELÉFONO)
   =============== */

.call-to-action {
    text-align: center;
    margin-top: 3rem;
}

.call-to-action .phone-text {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.call-to-action a,
.phone-number {
    font-size: 3.5rem;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    display: block;
}
.phone-number:hover {
    color: #333 !important;
}

.o-tambien-por-telf {
    font-size: 1.1rem;
}


/* ===============
   TESTIMONIOS (CARRUSEL)
   =============== */

#testimonialsCarousel {
    background-color: #fff;
    padding: 3rem 0;
    border-radius: 1.8rem;
}

#testimonialsCarousel .blockquote p {
    color: #343a40;
    line-height: 1.6;
    font-size: 1.3rem !important;
}

#testimonialsCarousel .blockquote-footer {
    color: #6c757d !important;
}

#testimonialsCarousel .carousel-control-prev-icon,
#testimonialsCarousel .carousel-control-next-icon {
    background-color: transparent;
    background-image: none;
    color: #41b6e6;
    font-size: 3rem;
}

#testimonialsCarousel .carousel-indicators button {
    background-color: #41b6e6;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    margin: 0 5px;
}

#testimonialsCarousel .carousel-indicators button.active {
    background-color: #154a5f;
}

#testimonialsCarousel .carousel-item {
    min-height: 12rem;
    padding: 0 15%;
}

.estrella-amarilla {
    color: #f1d639;
}

/* ===============
   FAQ (ACORDEÓN)
   =============== */
.item_faq {
    text-align: center;
    margin-bottom: 1.5rem;
}

.item_faq h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.item_faq p {
    font-size: 1rem;
}

h2.accordion-header {
    line-height: 1.2;
    margin: 0;
}

h2.accordion-header button {
    color: #41b6e6 !important;
    font-weight: bold;
    text-decoration: none;
}
h2.accordion-header button:focus {
    box-shadow: none;
}


/* ===============
   BARRA DE COOKIES
   =============== */

.cookie-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1070;
    font-size: 0.9rem;
    line-height: 1.4;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    background-color: #343a40;
    color: #f8f9fa;
    padding: 1rem;
    transition: opacity 0.5s ease-in-out;
    align-items: center;
    justify-content: space-between;
}

.cookie-bar.show {
    display: flex;
    opacity: 1;
}

.cookie-bar p {
    margin: 0;
    margin-right: 1rem;
}

/* ===============
   CLASES DE UTILIDAD (COLORES, FONDOS, ESPACIADO)
   =============== */

.color-corp {
    color: #41b6e6 !important;
}

.color-verde {
    color: #5e9c23;
}

.color-rojo {
    color: maroon;
}

a.text-dark {
    color: #333 !important;
}

a.text-dark:hover {
    color: #41b6e6 !important;
}
a.text-white {
  color:#fff;
}
a.text-white:hover {
    color: #ddd !important;
}

.email-grande {
    font-size: 1.2rem !important;
}

.fondo-negro {
    background-color: black;
    color: #fff;
}

.fondo-negro h1,
.fondo-negro h2,
.fondo-negro h3,
.fondo-negro h4,
.fondo-negro p {
    color: #fff;
}

.fondo-gris {
    background-color: #ececec;
}
.fondo-gris2 {
    background-color: #ececec;
}

.fondo-gris h2 {
    color: #fff;
}
.fondo-gris2 h2 {
    color: #333;
}
.fondo-gris2 h3 {
    color: #444!important;
    font-size:1rem;
}

.fondo-corp {
    background-color: #3eb4e5 !important;
}

.fondo-corp h2 {
    color: #fff;
}

.fuente-corp {
    font-family: 'Manjari-Bold', sans-serif; 
}

.background-green-oscuro {
    background-color: #386546;
    color: #fff;
}

.background-green-oscuro h1,
.background-green-oscuro h2,
.background-green-oscuro h3,
.background-green-oscuro h4,
.background-green-oscuro h5 {
    color: #fff;
}

.background-grey {
    background-color: #d9e2e9;
}

.fondo-imagen-003 {
    background-image: url('/assets/images/fondo-oscuro-004.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.fondo-gris-nuevo {
    background-color: #fff;
    color: #444;
}

.fondo-gris-nuevo h1, 
.fondo-gris-nuevo h2, 
.fondo-gris-nuevo h3 {
    color: #333;
}
#err_form_canales {
    color:maroon;
}

/**
    MARGENES Y PADDINGS
*/

.extra-mb {
    margin-bottom: 3.8rem !important;
}

.padding-extra-aire {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.padding-extra-aire-2 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.padding-extra-aire-3 {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.mt-8 {
    margin-top: 6rem;
}

.mb-8 {
    margin-bottom: 6rem;
}

.pt-6 {
    padding-top: 4rem;
}

.pb-6 {
    padding-bottom: 4rem;
}

.pt-8 {
    padding-top: 6rem;
}

.pb-8 {
    padding-bottom: 6rem;
}

.img-iconize {
    display: block;
    margin: 0 auto;
}

.img-redondeada {
    border-radius: 1.5rem;
}

.img-special-blog {
    border-top-left-radius: 3rem;
    border-bottom-right-radius: 3rem;
}

.enlace-limpio {
    text-decoration: none;
}

.titulo-caja {
    font-size: 1.4rem;
    font-weight: bold;
}

.titulo-caja-mobile {
    font-size: 0.8rem !important;
    font-weight: bold;
    text-align: center;
    margin-top: 1rem !important;
    margin-bottom: 2rem !important;
}

.estadisticas-num {
    font-size: 3rem;
    font-weight: bold;
    color: #fff;
}

.home-video {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    color: #fff;
}

.home-video-mobile {
    height: 33rem;
}

.home-video-mobile h1 {
    font-size: 2.2em!important;
    padding-top:13rem;
}
.home-video-mobile .lead {
    font-size: 1.1rem!important;
}

/* ESTILOS PARA NOTICIAS */
.noticia-imagen {
    height:10rem;
    width:100%;
    overflow:hidden;
}

/* Estilos personalizados SERVICIOS */
.icon-svg {
    width: 100px;
    height: 100px;
    fill: #41b6e6; /* Color corporativo principal para iconos */
    margin-right: 15px;
}

.service-item h3 {
    font-size: 1.25rem;
    color: #205b73;
}
.service-item p {
    font-size: 0.95rem;
}
.nutricenter-section {
    background-color: #f8f9fa; /* Un fondo suave para destacar esta sección */
    padding: 2rem;
    border-radius: 8px;
}
.nutricenter-section h2 {
    border-bottom: none; /* Quitar borde para el h2 dentro de esta sección específica */
}
    .action-button {
    background-color: #71b62c; /* Color botones de acción */
    border-color: #71b62c;
}
.action-button:hover {
    background-color: #5a9423;
    border-color: #5a9423;
}
.fondo-corp .list-unstyled {
    color:#fff;
}

/*
    AJUSTES MIGAS PAGN
*/
.migas-pan {
    color:#888;
    font-size:0.9rem;
    margin-bottom:2rem;
}
.migas-pan .bi {
    color:#cdcdcd;
}


.hogares-numerados {
    font-size:1.4rem;
}
.cajon-blanco-col {
    background-color:#fff;
    border-radius:0.6rem;
    padding:1rem 1.6rem;
    font-weight:400;
    font-size:1.2rem;
}

.w-90 {
    width:70%;
}

.mb-6 {
    margin-bottom:2.1rem;
}
.sin-limite {
    font-weight: 600;
    font-style: italic;
    font-size:1.5rem;
}

.cajon-titulo-incrustado {
    background-color: rgba(255, 255, 255, 0.8); 
    font-size:1rem!important;
    color:#222;
    min-height: 3rem;
    height: 4.5rem;
}
.peb-3 {
    padding-bottom: 0.9rem !important;
}

/* ================================================= */
/* ESTILOS PARA TABLA COMO "TARJETAS" EN MÓVIL       */
/* ================================================= */

.table-mobile-cards {
  padding: 1rem; /* Espaciado general para el contenedor de tarjetas */
}

.mobile-card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  margin-bottom: 1rem; /* Espacio entre cada tarjeta de cookie */
  padding: 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.mobile-card-item {
  display: flex; /* Usamos flex para alinear etiqueta y valor */
  justify-content: space-between; /* Empuja etiqueta a un lado, valor al otro */
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.mobile-card-label {
  font-weight: bold;
  margin-right: 0.5rem; /* Pequeño espacio entre etiqueta y valor */
  flex-shrink: 0; /* Evita que la etiqueta se encoja */
}

.mobile-card-value {
  text-align: right;
  flex-grow: 1; /* Permite que el valor ocupe el espacio restante */
  word-break: break-word; /* Para URLs largas en la descripción */
}

/* Estilo específico para la descripción, si quieres que ocupe más espacio verticalmente */
.mobile-card-item.mobile-card-desc {
    flex-direction: column; /* La descripción va en su propia línea */
    align-items: flex-start; /* Alinea la etiqueta de descripción a la izquierda */
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #eee; /* Separador visual */
}
.mobile-card-item.mobile-card-desc .mobile-card-value {
    text-align: left; /* La descripción se alinea a la izquierda */
    margin-top: 0.5rem;
}

/* Ocultamos la tabla original en móvil y mostramos las tarjetas */
@media (max-width: 767.98px) {
  .table-responsive.d-none.d-md-block { /* Apuntamos a tu tabla original */
    display: none !important;
  }
  .table-mobile-cards.d-md-none { /* Apuntamos a la nueva estructura de tarjetas */
    display: block !important;
  }
}

/* Mostramos la tabla original en escritorio y ocultamos las tarjetas */
@media (min-width: 768px) {
  .table-responsive.d-none.d-md-block {
    display: block !important;
  }
  .table-mobile-cards.d-md-none {
    display: none !important;
  }
}

/* =============================================== */
/* ESTILOS PARA OTROS CARD                         */
/* =============================================== */

.card-horizontal {
    background-color: #fff;
    border-radius:3rem;
}
.card-horizontal h3 {
    padding-top:3rem;
}
.card-horizontal img {
    border-radius: 5rem;
}

.especial-iconos {
    margin-bottom:2rem;
    margin-top:1rem;
}
.especial-iconos img {
    width:40%;
    display:block;
    margin:0 auto;
}
.especial-servicios-texto-espaciado h3 {
    margin-bottom:3rem;
}
/* =============================================== */
/* ESTILO PARA LOS NÚMEROS EN CÍRCULO              */
/* =============================================== */

.numero-circulo {
  display: inline-flex; /* Para que se comporte como un bloque pero se alinee con el texto */
  align-items: center;    /* Centra el número verticalmente */
  justify-content: center;/* Centra el número horizontalmente */
  
  width: 50px;            /* Ancho del círculo */
  height: 50px;           /* Alto del círculo */
  border-radius: 50%;     /* ¡Esto lo hace redondo! */
  
  background-color: #41b6e6; /* Tu color corporativo primario */
  color: #fff;               /* Color del número (blanco) */
  
  font-size: 1.8rem;        /* Tamaño del número */
  font-weight: 700;         /* Grosor del número */
  line-height: 1;           /* Evita alturas de línea extrañas */
  text-align: center;
}

/* =========================
   AJUSTES PLANES Y PRECIOS
   ========================= */
.accordion-planes {
    border:0;
    margin-top:1rem;
}

.accordion-planes h2.accordion-header button {
    color:#555!important;
    font-weight:400!important;
}

.padding-laterales {
    padding-left:1rem;
    padding-right:1rem;
}




/* ======================
   ESPECIAL COPIA EFECTOS
   ======================
*/

.cajon-redufactable {
  /* SIN transition aquí */
  padding-left: 0rem;
  padding-right: 0rem;
}

.cajon-redufactable video {
  /* SIN transition aquí */
  border-radius: 0rem;
}


/* Seleccionamos la imagen dentro del enlace con id "hdplaybutton" */
#hdplaybutton img {
  /*
    Esta es la clave para una animación suave.
    Le decimos que cualquier cambio en la propiedad 'transform'
    tarde 0.3 segundos y tenga una curva de aceleración suave.
  */
  transition: transform 1.3s ease-in-out;
}

/*
  Ahora definimos lo que pasa cuando el usuario pone el ratón
  encima del enlace que contiene la imagen.
*/
#hdplaybutton:hover img {
  /* Escalamos la imagen a un 110% de su tamaño original */
  transform: scale(1.03);
}

.img-animation img, .img-animation h4 {
    transition: transform 0.8s ease-in-out;
}
.img-animation .ico-mas-redondo {
    transition: transform 0.3s ease-in-out;
}

.img-animation:hover img, .img-animation:hover h4 {
  /* Escalamos la imagen a un 110% de su tamaño original */
  transform: scale(1.03);
}
.img-animation:hover .ico-mas-redondo {
  /* Escalamos la imagen a un 110% de su tamaño original */
  transform: scale(0);
}

/* ========================
   COMPONENTES A MEDIDA
   ======================== */

/* Contenedor que centra nuestros botones debajo del slider */
.swiper-navigation-custom {
  display: flex;
  justify-content: right;
  align-items: center;
  margin-top: 2rem; /* Espacio entre el slider y los botones */
  gap: 1.5rem; /* Espacio entre los dos botones */
}

/* Estilo común para ambos botones */
.swiper-button-prev-custom,
.swiper-button-next-custom {
  /* Dimensiones y forma */
  width: 55px;
  height: 55px;
  border-radius: 50%; /* ¡Esto los hace redondos! */
  
  /* Color y borde */
  background-color: #ccc; /* Un gris claro de fondo */
  border: 1px solid #ddd;
  color: #fff; /* Color del icono */
  font-size:1.8rem;
  text-align:center;
  /* Centrado del icono dentro del círculo */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Efectos y cursor */
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Efecto al pasar el ratón por encima */
.swiper-button-prev-custom:hover,
.swiper-button-next-custom:hover {
  background-color: #41b6e6; /* Un color de acento, ajústalo a tu marca */
  color: #fff;
}

/* Estilo para cuando un botón está deshabilitado (al llegar al final/principio si loop: false) */
.swiper-button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none; /* Evita que se pueda hacer clic */
}
.swiper-slide {
  /* Hacemos que el propio slide sea un contenedor flex */
  display: flex;
  
  /* Esto es opcional pero recomendado, alinea los hijos (la card) para que se estiren */
  align-items: stretch; 
}
/* --- CSS para el efecto "Full Bleed" del carrusel --- */

.container .swiper.mi-slider {
  /* Usamos la variable de Bootstrap para el padding lateral del container */
  --container-padding: calc(var(--bs-gutter-x, 1.5rem) * .5);

  /* 1. Hacemos que el carrusel se "salga" del container usando márgenes negativos */
  /* Esto lo expande para que ocupe el espacio del padding. */
  margin-left: calc(-1 * var(--container-padding));
  margin-right: calc(-1 * var(--container-padding));
  
  /* 2. Le devolvemos el padding al interior para que el PRIMER slide empiece alineado... */
  padding-left: var(--container-padding);
  
  /* 3. ...y para que el ÚLTIMO slide también tenga un espacio al final. */
  padding-right: var(--container-padding);
}

.swiper-slide .card {
  /* Le decimos a la tarjeta que ocupe todo el ancho disponible del slide */
  width: 100%;
}

.card-amedida {
    border-radius:1rem;
}
.card-amedida p {
    margin-top:1rem;
    margin-bottom:3rem;
}
.card-amedida p img {
    width:160px;
}
.card-amedida h3 {
    font-size:1.4rem;
    padding-left:1rem;
    padding-right:1rem;
    margin-bottom:1.5rem;
}
/* 3. Forzar altura igual en tarjetas del carrusel Swiper */
.mi-slider .swiper-slide {
  height: auto;
  display: flex;       /* Convierte el slide en un contenedor flex */
  align-items: stretch;/* Obliga a los hijos a estirarse */
}

.mi-slider .swiper-slide .card {
  width: 100%;
  display: flex;             /* La tarjeta también será un contenedor flex... */
  flex-direction: column;    /* ...en formato de columna (vertical) */
}

.mi-slider .swiper-slide .card h3 {
  margin-top: auto; /* ¡TRUCO MÁGICO! Empuja el título hacia abajo para alinearlo con los demás */
  padding-top: 1rem; /* Añade un poco de espacio para que no se pegue a la imagen */
}

.container-wrapper-swiper {
  overflow-x: hidden;
}

/* ===============
   MEDIA QUERIES
   =============== */

@media (max-width: 767.98px) {

    .navbar {
        /* Anulamos el padding horizontal excesivo en móviles */
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .pricing-table-container .card-body {
        padding: 0rem 1rem 1rem 1rem;
    }

    .pricing-table-container .feature-group {
        margin-top: 0.25rem;
        margin-bottom: 0.15rem;
        font-size: 0.85rem;
    }

    .pricing-table-container .feature-item {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        padding: 0;
    }

    .pricing-table-container .feature-label {
        text-align: right;
        flex-basis: auto;
        padding-right: 0.5rem;
        font-size: 0.85rem;
    }

    .pricing-table-container .feature-value {
        flex-basis: 40%;
        flex-grow: 0;
        justify-content: left;
    }

    .pricing-table-container .feature-value img {
        max-width: 18px;
    }

    .call-to-action .phone-number {
        font-size: 2rem;
    }

    .call-to-action .phone-text {
        font-size: 1rem;
    }

    .img-promo-disp {
        width: 50%;
        margin: 0 auto;
    }

    #testimonialsCarousel {
        padding: 2rem 0;
    }

    #testimonialsCarousel .blockquote p {
        font-size: 1.05rem !important;
    }

    #testimonialsCarousel .blockquote-footer {
        font-size: 0.85rem !important;
    }

    #testimonialsCarousel .carousel-control-prev-icon,
    #testimonialsCarousel .carousel-control-next-icon {
        padding: 0;
        font-size: 2rem;
    }

    #testimonialsCarousel .carousel-control-next,
    #testimonialsCarousel .carousel-control-prev {
        align-items: flex-start;
    }

    .o-tambien-por-telf { /* Estilo que faltaba aquí */
        font-size:1.1rem;
    }

    .seccion-home h2 {
        font-size:2rem!important;
        line-height: 2.1rem!important;
        padding-bottom:2rem!important;
    }

    .clase-especial-home-cajones,
    .clase-especial-home-cajones:visited, 
    .clase-especial-home-cajones:active, 
    .clase-especial-home-cajones:focus {
        margin-top: -80px;
        background-color: #ffffffcc;
        text-align: center;
        font-weight: 600;
        margin-bottom:2.5rem!important;
    }

    .clase-especial-home-cajones-a {
        text-align:center;
        padding-bottom:3rem!important;
    }

    .cajon-blanco-como-bueno h4{
        color:#41b6e6;
    }
    .cajon-blanco-como-bueno p {
        padding-bottom:1rem;
    }
    .padding-laterales {
        padding-left:0;
        padding-right:0;
    }
    .clase-especial-home-cajones-a {
        padding-bottom:0!important;
    }
    .ajuste-mobile-2 {
        margin-top:0!important;
    }
    a:hover img {
        opacity:1;
    }
    .card-sin-bordes .col-12[class*="col-md-4"] {
        /* En lugar de p-5, usamos un padding más adecuado para móvil */
        padding: 1.5rem 1rem !important;
    }
    /* Seleccionamos la fila que contiene a la doctora y la centramos */
    .fondo-gris-nuevo .d-md-none > .col-12 > .row:last-of-type {
        margin-top: 2rem;
        text-align: center;
    }
    .fondo-corp.d-sm-block.d-md-none .col-6 h3 {
        font-size: 1.1rem; /* Hacemos la fuente un poco más pequeña */
        min-height: 48px;  /* Le damos una altura mínima para alinear los títulos */
        display: flex;
        align-items: center; /* Centramos verticalmente el texto del título */
        justify-content: center;
    }
    .seccion-pagina h2 {
        font-size: 2.4rem!important;
        line-height: 2.46rem!important;
    }
    .seccion-home {
        margin-top:-14px;
    }
    .seccion-pagina {
        margin-top:-14px;
    }
    .ul-documentacion {
        padding-left:0.4rem;
    }
    .ul-documentacion li {
        font-size:0.9rem;
    }
    .ul-documentacion li i {
        margin-right:0.3rem;
    }
}

@media (min-width: 368px) and (max-width: 767.98px) { /* Rango más específico */
    body {
        padding-top: 93px;
    }

    .home-video-mobile {
        height: 42rem;
        padding-top: 14rem !important;
    }

    .home-video-mobile h1 {
        font-size: 2rem!important;
        padding-top:8rem!important;
    }

    .home-video-mobile p {
        font-size: 1rem;
    }

    .home-video-mobile .btn {
        font-size: 1rem;
    }

    .drop_idionas_mobile {
        float:right;
    }

    .estilos-completos-card {
        padding-top:1rem!important;
    }
    .cite-very-small {
        text-align:left!important;
        padding-right: 3rem;
    }
    .card-horizontal {
        border-radius:2.3rem!important;
    }
    .card-horizontal img {
        width:80%!important;
        margin:0 auto;
        display:block;
        margin-bottom:1rem;
    }
    .card-horizontal h3 {
        padding-top:0;
        margin:0;
    }
    .card-horizontal .pt-4 {
        padding-top:0!important;
    }
    .card-horizontal .text-right {
        text-align:center!important;
    }
    .card-horizontal h3 {
        text-align:center!important;
        margin-top:-1rem!important;
    }
    .card-horizontal p {
        padding:0 2rem;
        text-align:center!important;
    }
    .card-horizontal .p-4 {
        padding:0!important;
    }
    .card-horizontal .pb-4 {
        padding-bottom:0!important;
    }
    .py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .especial-servicios-texto-espaciado h3 {
        margin-bottom:2rem;
    }
    .hero-section-generica-quienes {
        min-height: 240px; /* Otra altura mínima si lo requiere la imagen */
        background-repeat: repeat;
        background-size: 100%;
        background-position-x: left;
        background-position-y: 100px;
    }
    .texto-grande p {
        font-size:1rem;
    }
}
@media (min-width: 300px) and (max-width: 360px) { 
    .nav-link-mobile {
        font-size: 0.80rem;
    }
    .seccion-pagina h2 {
        font-size:1.8rem!important;
        line-height: 2rem;
    }
    .phone-number {
        font-size: 3rem;
    }
}
@media (min-width: 768px) {
    body {
        padding-top: 65px;
        font-size: 1rem;
    }

    .pricing-table-container .feature-item {
        justify-content: flex-start;
        padding-left: 1rem;
    }

    .pricing-table-container .feature-label {
        flex-basis: 60%;
        text-align: right;
    }

    .pricing-table-container .feature-value {
        flex-basis: 40%;
        justify-content: flex-start;
    }

    .home-video {
        height: 45rem;
        padding-top: 0;
    }
    .home-video h1 { font-size: 3rem; }
    .home-video p { font-size: 1.2rem; }
    .home-video .btn { font-size: 1.1rem; }
    .especial-cabecera { font-size: 3rem; }
}