/* ==========================================
   1. VARIABLES Y CONFIGURACIÓN BASE
   ========================================== */
:root {
    --color-primario: #3366AF;   /* Azul profundo clínico / psicoanalítico */
    --color-secundario: #FF9C7A; /* Tono cálido/oro sutil para acentos y botones */
    --color-oscuro: #2d3748;     /* Gris oscuro para textos principales */
    --color-claro: #f7fafc;      /* Fondo gris muy claro para contraste */
    --color-blanco: #ffffff;
    --transicion: all 0.3s ease;
}

@font-face {
  font-family: 'Montserrat-Bold';
  src: url(../Fuentes/Montserrat-Bold.ttf) format("truetype");
  font-display: swap; 
}
@font-face {
  font-family: 'Montserrat-Regular';
  src: url(../Fuentes/Montserrat-Regular.ttf) format("truetype");
  font-display: swap; 
}
@font-face {
  font-family: 'Montserrat-SemiBold';
  src: url(../Fuentes/Montserrat-SemiBold.ttf) format("truetype");
  font-display: swap; 
}
@font-face {
  font-family: 'Montserrat-BoldItalic';
  src: url(../Fuentes/Montserrat-BoldItalic.ttf) format("truetype");
  font-display: swap; 
}
@font-face {
  font-family: 'DIN-Alternate-Bold';
  src: url(../Fuentes/DIN-Alternate-Bold.ttf) format("truetype");
  font-display: swap; 
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    color: var(--color-oscuro);
    line-height: 1.6;
}

body {
    background-color: var(--color-blanco);
    font-family: 'Montserrat-Regular';
}

img {
    max-width: 100%;
    display: block;
}

.btn-cta {
    display: inline-block;
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    transition: var(--transicion);
    margin-top: 15px;
}

.btn-cta:hover {
    background-color: var(--color-primario);
}

/* Header */
header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-blanco);
    padding: 15px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-bottom: 1px solid #e2e8f0;
    box-sizing: border-box;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 18px; /*Separación horizontal exacta entre los iconos */
}

.social-link {
    color: #1F53A0;
    width: 1.7rem;
    text-decoration: none;
    transition: var(--transicion);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo {
    font-weight: bold;
    color: var(--color-primario);
    font-size: 1rem;
    text-align: center;
    margin-bottom: 10px;
}

.logo img {
    width: 8rem;
    height: auto;
}

nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 20px;
    list-style: none;
}

nav a {
    text-decoration: none;
    color: #ffff !important;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 5px 8px;
    transition: var(--transicion);
    display: block;

    align-items: flex-start;
}

nav a:hover {
    color: var(--color-secundario);
}

.menu-icon {
    display: block;
    cursor: pointer;
    width: 30px;  /* Ajusta el tamaño de tu SVG */
    height: auto;
    cursor: pointer;
}

header nav {
    display: none;
    position: absolute;
    top: 100%; /* Exactamente donde termina el header */
    left: 0;
    width: 100%;
    background-color: rgba(31, 83, 160, 0.8);
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
header nav.active {
    display: block !important;
}
/* ==========================================
   3. SECCIONES GENERALES (ESTRUCTURA MÓVIL)
   ========================================== */
main section {
    padding: 60px 20px;
}

/* Encabezados de sección estándar */
main section h2 {
    font-size: 1.8rem;
    color: var(--color-primario);
    margin-bottom: 15px;
    position: relative;
}

main section h3 {
    font-size: 1.3rem;
    color: var(--color-oscuro);
    margin-bottom: 15px;
    font-weight: 600;
}

main section p {
    margin-bottom: 15px;
    font-size: 1rem;
    color: #4a5568;
}

/* --- HERO / PORTADA (MÓVIL) --- */
#inicio {
    position: relative;
    width: 100%;
    min-height: 80vh;
    background-image: url('../imagenes/WEbp/4-ptada-cel2.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;

    /* SOLUCIÓN: Quitamos el margin-top para eliminar el hueco blanco */
    margin-top: 0;

    /* Pasamos el espacio al padding-top (130px) para proteger el texto
       bajo el header sin separar la imagen de fondo */
    padding: 130px 30px 40px 30px;
    box-sizing: border-box;
}

/* Contenedor neutro para celular: solo hereda el flujo vertical hacia abajo */
.hero-contenedor-textos {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#inicio h1 {
    font-family: 'DIN-Alternate-Bold', sans-serif;
    font-size: 1.4rem;
    color: var(--color-blanco);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin-bottom: 15px;
}

#inicio .slogan {
    font-family: 'DIN-Alternate-Bold', sans-serif;
    font-size: 2.1rem;
    color: #1F53A0;
    line-height: 1;
    margin-bottom: 20px;
}
#inicio .salto-movil-slogan {
    display: none;
}

#inicio .modalidad {
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: .96rem;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 35px;
    max-width: 90%;
}

#inicio .btn-cta {
    display: inline-block;
    align-self: flex-start;
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 1rem;
    padding: 12px 35px;
    text-decoration: none;
    border: 3px solid #3b82f6;
    border-radius: 50px;
    text-align: center;
    transition: var(--transicion);
}

#inicio .btn-cta:hover {
    background-color: #3b82f6;
}

/* --- QUIÉNES SOMOS --- */
#nosotros {
    background-color: var(--color-blanco);
    width: 100%;
    text-align: center;
    margin: auto;
    padding-top: 135px;
}

#nosotros h2 {
    font-family: 'DIN-Alternate-Bold', sans-serif;
    font-size: 1.5rem;
    color: var(--color-primario);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}
#nosotros h3 {
  font-family: 'Montserrat-SemiBoldItalic', sans-serif;
  font-size: 1.3rem;
  color: #689EE0;
  line-height: 1.2;
  margin-bottom: 35px;
}
#nosotros .descripcion-1 {
  font-family: 'Montserrat-Regular', sans-serif;
  font-size: .96rem;
  color: var(--color-oscuro);
  line-height: 1.2;
  margin-bottom: 15px;
}
#nosotros .descripcion-2 {
  font-family: 'Montserrat-Regular', sans-serif;
  font-size: .96rem;
  color: var(--color-oscuro);
  line-height: 1.2;
  margin-bottom: 35px;
}

#nosotros .prop-valor {
  font-family: 'Montserrat-SemiBold', sans-serif;
  font-size: 1.3rem;
  color: var(--color-secundario);
  line-height: 1.2;
  margin-bottom: 35px;
  text-transform: none;
  letter-spacing: normal;
}

/* ===================
   PROPUESTA DE VALOR
   ================== */

.propuestas-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
    padding: 0px 20px;
    width: 100%;
    box-sizing: border-box;
}

.tarjeta-propuesta {
    background-color: var(--color-blanco);
    padding: 25px 20px;
    border-radius: 24px;
    text-align: center;
      box-shadow: 5px 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Evita que componentes internos rompan la tarjeta */
}

.icono-propuesta {
    color: #1F53A0;
    font-size: 2.2rem; /* Reducido de 2.2rem para equilibrar el espacio móvil */
    margin-bottom: 15px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.icono-propuesta img {
    width: 60px; /* Ajuste por si se usan imágenes locales */
    height: auto;
    padding-bottom: 10px;
    padding-top: 10px;
}

.tarjeta-propuesta h3 {
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 1.1rem; /* Reducido un píxel para evitar saltos de línea huérfanos */
    color: var(--color-oscuro) !important;
    line-height: 1.3;
    margin-bottom: 10px !important;
    word-wrap: break-word; /* Fuerza a que si una palabra es muy larga, se fracture abajo de forma segura */
}

.tarjeta-propuesta p {
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 1rem;
    color: #718096;
    line-height: 1.4;
    margin-bottom: 0;
    padding-bottom: 10px
}

/* ============================================================
   BLOQUE NUESTRO EQUIPO (ESTILOS BASE / MÓVILES)
   ============================================================ */
.bloque-equipo {
    background-color: var(--color-blanco);
    padding: 60px 0px !important;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.bloque-equipo h2 {
    font-family: 'DIN-Alternate-Bold', sans-serif;
    font-size: 1.5rem;
    color: #1F53A0;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.equipo-contenedor-global {
    position: relative;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
}

.equipo-carrusel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    padding: 20px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.equipo-carrusel::-webkit-scrollbar {
    display: none;
}

/* MÓVILES: 1 tarjeta por vista */
.tarjeta-psicologo {
    flex: 0 0 100%;
    scroll-snap-align: center;
    background-color: var(--color-blanco);
    border-radius: 24px;
    overflow: hidden;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
}

.contenedor-img-eq {
    width: 100%;
    height: 260px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
}

.contenedor-img-eq img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contenido-eq {
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.contenido-eq h4 {
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 1rem;
    color: #2d3748;
    margin-bottom: 12px;
}

.btn-leer-mas-eq {
    background: none;
    border: none;
    font-family: 'Montserrat-Bold', sans-serif;
    color: var(--color-secundario);
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    padding: 0;
    margin-top: auto;
    width: fit-content;
}

/* FLECHAS DE NAVEGACIÓN (SIEMPRE VISIBLES EN MÓVIL) */
.flecha-equipo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background-color: var(--color-blanco);
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    color: #1F53A0;
    font-size: 1.1rem;
    cursor: pointer;
    display: none !important;
    justify-content: center;
    align-items: center;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    padding: 0;
}

.flecha-eq-izq { left: -10px; }
.flecha-eq-der { right: -10px; }

.flecha-equipo:hover {
    background-color: #1F53A0;
    color: #ffffff;
}

/* ============================================================
   ESTILOS GENERALES DE LOS MODALES (EQUIPO Y ARTÍCULOS UNIFICADOS)
   ============================================================ */

/* 1. Fondo del modal unificado para que cubra toda la pantalla con opacidad sólida */
.modal-fondo {
    display: none; /* Se activa como 'flex' dinámicamente desde el JS */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.6) !important; /* Velo oscuro de fondo */
    z-index: 2000 !important; /* Por encima de cualquier menú o cabecera */

    /* CENTRADO ABSOLUTO */
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 20px !important; /* Colchón perimetral de seguridad para móviles */
}

.modal-semblanza-ancho {
    max-width: 600px;
    width: 90%;
}

/* 2. Ajuste de legibilidad: Fondo blanco 100% opaco y límites de pantalla */
.modal-caja {
    background-color: #ffffff !important; /* Fondo blanco sólido para que no trasluzca nada */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important; /* Sombra elegante para dar relieve */
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;

    /* Evita que el modal se salga de la pantalla en dispositivos pequeños */
    max-height: 85vh !important;
    padding: 30px !important;
    box-sizing: border-box !important;
    position: relative !important;
    margin: 0 auto !important; /* Refuerzo de centrado horizontal */
}

/* 3. Encabezado fijo y centrado textualmente */
.modal-semblanza-header {
    padding-right: 30px;
    padding-left: 30px;   /* Balance simétrico por el botón de cierre */
    flex-shrink: 0 !important;
    text-align: center !important; /* Centrado del nombre y la especialidad */
}

.modal-semblanza-header h3 {
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 1.4rem;
    color: #1F53A0;
    margin-bottom: 5px;
}

.modal-eq-especialidad {
    font-family: 'Montserrat-Regular', sans-serif;
    font-style: italic;
    color: #689EE0;
    font-size: 0.95rem;
}

.modal-eq-separador {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 15px 0;
    flex-shrink: 0 !important; /* Evita que la línea divisoria desaparezca */
}

/* 4. Control de scroll para semblanzas y artículos largos */
.modal-eq-texto-limpio {
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 0.98rem;
    color: #2d3748;
    line-height: 1.6;
    text-align: left;

    /* Activación del scroll vertical interno */
    overflow-y: auto !important;
    flex-grow: 1 !important;    /* Absorbe el espacio sobrante de la caja */
    padding-right: 12px !important; /* Colchón para que la barra no pise el texto */
}

.modal-eq-texto-limpio p {
    margin-bottom: 15px;
}

/* 5. Botón Cerrar estático en la esquina superior derecha */
.modal-cerrar-eq,
.modal-cerrar {
    position: absolute !important;
    top: 20px !important;
    right: 25px !important;
    font-size: 1.8rem;
    font-weight: bold;
    cursor: pointer;
    color: #aaa;
    z-index: 10 !important;
    line-height: 1;
}

.modal-cerrar-eq:hover,
.modal-cerrar:hover {
    color: #000;
}

/* ============================================================
   DISEÑO ELEGANTE PARA LA BARRA DE DESPLAZAMIENTO (SCROLLBAR)
   ============================================================ */
.modal-eq-texto-limpio::-webkit-scrollbar {
    width: 6px !important;
}

.modal-eq-texto-limpio::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 10px !important;
}

.modal-eq-texto-limpio::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 10px !important;
}

.modal-eq-texto-limpio::-webkit-scrollbar-thumb:hover {
    background: #1F53A0 !important; /* Cambia al azul de tu paleta al pasar el cursor */
}

/* ============================================================
   AJUSTES ESPECÍFICOS PARA TELÉFONOS PEQUEÑOS (iPhone SE, etc.)
   ============================================================ */
@media (max-width: 480px) {
    .modal-fondo {
        padding: 15px !important;
    }

    .modal-caja {
        padding: 25px 15px 20px 15px !important;
        max-height: 90vh !important;
    }

    .modal-semblanza-header h3 {
        font-size: 1rem !important;
        margin-bottom: 3px !important;
    }

    #modal-eq-especialidad {
        font-size: 0.85rem !important;
    }

    .modal-cerrar-eq,
    .modal-cerrar {
        top: 15px !important;
        right: 15px !important;
        font-size: 1.5rem !important;
    }

    .modal-eq-separador {
        margin: 10px 0 !important;
    }

    .modal-eq-texto-limpio,
    .modal-eq-texto-limpio p,
    .modal-eq-texto-limpio span {
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
    }

    .modal-eq-texto-limpio {
        padding-right: 8px !important;
    }
}


/* ==========================================
   SECCIÓN SERVICIOS (ESTILO DE TU IMAGEN)
   ========================================== */
#servicios {
    background-color: var(--color-primario); /* Tu azul corporativo como fondo total */
    padding: 60px 35px;
    color: #ffffff;
    padding-top: 135px;
}

/* Título centrado en color naranja/coral */
#servicios h2 {
    font-family: 'DIN-Alternate-Bold', sans-serif !important;
    font-size: 1.6rem;
    color: var(--color-secundario); /* Tu color acento/oro/coral */
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 35px;
}

.servicios-grid {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Separación vertical entre cada servicio */
    margin-bottom: 40px;
}

/* Cada renglón de servicio con alineación horizontal */
.item-servicio {
    display: flex;
    flex-direction: row; /* Pone la imagen al lado del texto */
    align-items: center; /* Centra verticalmente la imagen con su texto */
    gap: 20px; /* Distancia entre la imagen y las letras */
    background: transparent; /* Sin cajas individuales para emular tu captura */
    padding: 0;
    border-left: none; /* Quitamos bordes viejos */
    align-items: flex-start;
}

/* Forzar tamaño y aspecto cuadrado de tus imágenes */
.img-servicio {
    width: 100px;  /* Tamaño exacto para móvil */
    height: 100px; /* Asegura proporciones 1:1 */
    object-fit: cover;
    border-radius: 4px; /* Un redondeado sutil si tus imágenes lo requieren */
    flex-shrink: 0; /* Evita que el texto aplaste o distorsione la imagen */
}

/* Bloque contenedor del texto alineado a la izquierda */
.info-servicio {
    text-align: left;
}

.info-servicio h3 {
    font-family: 'Montserrat-SemiBold', sans-serif;
    font-size: 1.1rem;
    color: #ffffff !important; /* Texto blanco puro */
    margin-bottom: 5px;
    line-height: 1.2;
}

.info-servicio p {
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 0.9rem;
    color: #e2e8f0; /* Un blanco sutilmente grisáceo para mejor lectura */
    line-height: 1.3; /* Interlineado cómodo */
    margin-bottom: 0;
}

/* Centrar el botón inferior */
.centro-btn {
    display: flex;
    justify-content: center;
    width: 100%;
}
#servicios .btn-cta {
    display: inline-block;
    align-self: flex-start;
    background-color: rgba(51, 102, 175, 1);
    color: var(--color-blanco);
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 1rem;
    padding: 12px 35px;
    text-decoration: none;
    border: 3px solid #FF9C7A;
    border-radius: 50px;        /* Redondez */
    text-align: center;
    transition: var(--transicion);
}

#servicios .btn-cta:hover {
    background-color: #FF9C7A;
    border: 3px solid #3366AF;
}

/* ==========================================
   SECCIÓN ENFOQUE (CÓDIGO BASE MÓVIL CORREGIDO)
   ========================================== */
#enfoque {
    background-color: var(--color-claro);
    padding: 135px 35px 60px 35px;
}

#enfoque h2 {
    font-family: 'DIN-Alternate-Bold', sans-serif;
    font-size: 1.5rem;
    color: #1F53A0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    text-align: center;
}

.bloque-enfoque-superior,
.bloque-enfoque-inferior {
    display: flex;
    flex-direction: column; /* Flujo natural hacia abajo */
    width: 100%;
}

.enfoque-col-texto,
.contenedor-img-enfoque {
    width: 100%;
}

.contenedor-img-enfoque {
    padding-bottom: 35px;
    margin-top: 15px; /* Separa la imagen del texto anterior en móvil */
}

.contenedor-img-enfoque img {
    width: 100%;
    height: auto;
    display: block;
}

#enfoque h3 {
    font-family: 'Montserrat-SemiBoldItalic', sans-serif;
    font-size: 1.3rem;
    color: #689EE0;
    line-height: 1.2;
    margin-bottom: 20px;
}

#enfoque p {
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 1rem;
    color: var(--color-oscuro);
    line-height: 1.3;
    margin-bottom: 15px;
}

#enfoque ul {
    list-style: none;
    margin-bottom: 25px;
}

#enfoque ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-family: 'Montserrat-SemiBold', sans-serif;
    line-height: 1.1;
}

#enfoque ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--color-primario);
    font-weight: bold;
}

#enfoque .sintomas-list li::before {
    content: "•";
    color: var(--color-oscuro);
    font-size: 1.5rem;
    line-height: 1;
    top: -2px;
}

#buscar-ayuda {
    color: var(--color-secundario) !important;
    font-family: 'Montserrat-SemiBoldItalic', sans-serif;
    font-size: 1.3rem !important;
    line-height: 1.1;
    margin-bottom: 20px;
}

#buscar-ayuda .ayuda {
    font-family: 'Montserrat-BoldItalic', sans-serif !important;
}

.centro-btn-enfoque {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 5px;
}

#enfoque .btn-cta {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-primario);
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 1rem;
    padding: 12px 35px;
    text-decoration: none;
    border: 3px solid #FF9C7A;
    border-radius: 50px;
    text-align: center;
    transition: var(--transicion);
}

.salto-ayuda{
  display: none;
}

#enfoque .btn-cta:hover {
    background-color: var(--color-primario);
    border: 3px solid #3366AF;
}
#enfoque a:hover {
    color: var(--color-blanco);
}


/* --- GALERÍA (Opción Scroll Snap para Móvil) --- */

#galeria {
    background-color: var(--color-secundario);
    padding: 135px 35px 60px 35px;
    text-align: center;
}

#galeria h2 {
    color: var(--color-blanco);
    text-transform: uppercase;
    font-family: 'DIN-Alternate-Bold', sans-serif;
    font-size: 1.5rem;
}

.galeria-carrusel {
    display: flex;
    overflow-x: auto; /* Permite el scroll horizontal */
    scroll-snap-type: x mandatory; /* Fuerza a que la imagen se "ajuste" perfectamente al deslizar */
    gap: 15px;
    padding: 10px;
    scrollbar-width: none; /* Oculta la barra en Firefox */
}

/* Oculta la barra de scroll en Chrome/Safari */
.galeria-carrusel::-webkit-scrollbar {
    display: none;
}

.carrusel-item {
    flex: 0 0 100%;
    scroll-snap-align: center; /* Centra la foto automáticamente al detener el scroll */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(31, 83, 160, 0.08);
    transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.5s ease;
}
.carrusel-item.active {
    transform: scale(1.05); /* Zoom ligero */
    box-shadow: 0 20px 40px rgba(31, 83, 160, 0.18); /* Sombra se intensifica al centrarse */
}

.carrusel-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}

.carrusel-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px; /* Un poco más de separación entre ellos */
    margin-top: 30px;
}

.punto {
    /* Hacemos el tamaño base más grande y cómodo para el tacto (14px) */
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background-color: #cbd5e0; /* Gris claro para los puntos inactivos */
    cursor: pointer;

    /* Esta transición hace que el cambio de tamaño y color se sienta suave, no de golpe */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.punto.active {
    background-color: #1F53A0;
    width: 19px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(31, 83, 160, 0.4);
}

.punto:hover:not(.active) {
    background-color: #a0aec0;
}

/* ==========================================
   SECCIÓN ARTÍCULOS (CARRUSEL HORIZONTAL CORREGIDO)
   ========================================== */
#articulos {
    background-color: var(--color-claro);
    padding: 135px 35px 60px 35px !important;
    width: 100%;
    overflow: hidden; /* Evita que el scroll horizontal rompa el diseño general del sitio */
    box-sizing: border-box;
}

#articulos h2 {
    font-family: 'DIN-Alternate-Bold', sans-serif;
    font-size: 1.5rem;
    color: #1F53A0;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.subtitulo-articulos {
    font-family: 'Montserrat-Regular', sans-serif;
    font-style: italic;
    font-size: 1.3rem;
    color: #689EE0;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.3;
}

.bajada-articulos {
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: .97rem;
    color: #2d3748;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.3;
}

.articulos-contenedor-global {
    position: relative;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
}

/* El contenedor elástico horizontal en una sola fila */
.articulos-carrusel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Impide que los artículos se vayan abajo */
    gap: 20px;
    padding: 20px 0;
    overflow-x: auto; /* Activa el desplazamiento táctil/scroll horizontal */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Esconde la barra en Firefox */
}

.articulos-carrusel::-webkit-scrollbar {
    display: none; /* Esconde la barra en Chrome, Safari y Edge */
}

/* MÓVILES: Cada tarjeta ocupa un ancho completo (85% para asomar la siguiente) */
.tarjeta-articulo {
    flex: 0 0 100%;
    scroll-snap-align: center;
    background-color: var(--color-blanco);
    border-radius: 24px;
    overflow: hidden;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Estilos internos de la tarjeta */
.contenedor-img-art {
    width: 100%;
    height: 190px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
}

.contenedor-img-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contenido-art {
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.contenido-art h4 {
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 0.95rem;
    color: #2d3748;
    line-height: 1.3;
    margin-bottom: 12px;
}

.btn-leer-mas {
    background: none;
    border: none;
    font-family: 'Montserrat-Bold', sans-serif;
    color: var(--color-secundario);
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    padding: 0;
    margin-top: auto; /* Empuja el botón siempre al fondo de la tarjeta */
    width: fit-content;
}

/* ==========================================
   NUEVO: ESTILOS PARA LAS FLECHAS LATERALES
   ========================================== */
.flecha-carrusel {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  background-color: var(--color-blanco);
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  color: #1F53A0;
  font-size: 1.1rem;
  cursor: pointer;
  display: none !important;
  justify-content: center;
  align-items: center;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  padding: 0;
}

/* Desplazamiento exterior sutil a los bordes */
.flecha-izq {
    left: -15px;
}

.flecha-der {
    right: -15px;
}

/* Efecto hover interactivo */
.flecha-carrusel:hover {
    background-color: #1F53A0;
    color: #ffffff;
    box-shadow: 0 6px 15px rgba(31, 83, 160, 0.3);
}

/* Ajuste responsive para pantallas táctiles pequeñas */
@media (max-width: 480px) {
    .flecha-carrusel {
        display: flex; /* Oculta botones para mejorar usabilidad de arrastre */
    }
    #articulos {
        padding: 60px 15px; /* Aprovecha más espacio útil lateral */
    }
}

.btn-descarga {
    background-color: #1F53A0;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none; /* Asegura un formato limpio de botón */
    transition: background-color 0.3s ease;
}

.btn-descarga:hover {
    background-color: #163d76;
}

/* ==========================================
   SECCIÓN PREGUNTAS FRECUENTES (ACORDEÓN NATIVO)
   ========================================== */
#preguntas-frecuentes {
    background-color: #507EC9; /* El color azul de fondo de tu captura */
    padding: 135px 25px 60px 25px;
    width: 100%;
    box-sizing: border-box;
}

#preguntas-frecuentes h2 {
    font-family: 'DIN-Alternate-Bold', sans-serif;
    font-size: 1.5rem;
    color: var(--color-secundario); /* El color naranja coral para el título */
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 35px;
}

.faq-contenedor {
    max-width: 90%;
    margin: 0 auto;

}

/* Cada fila del acordeón */
.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.6); /* Línea divisoria blanca semi-transparente */
    padding: 15px 0;
    width: 100%;
}

/* El encabezado cliqueable (La Pregunta) */
.faq-item summary {
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 1rem;
    color: #ffffff;
    padding-right: 40px;
    cursor: pointer;
    list-style: none; /* Elimina la flecha nativa en Firefox/Chrome moderno */
    position: relative;
    line-height: 1.4;
    user-select: none;
}

/* Elimina la flecha nativa en navegadores basados en Webkit (Safari/Versiones viejas Chrome) */
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* DISEÑO DE LA FLECHA PERSONALIZADA (V) */
.faq-item summary::after {
    content: '';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    transition: transform 0.3s ease;
}

/* ROTACIÓN DE LA FLECHA CUANDO ESTÁ ABIERTO (^) */
.faq-item[open] summary::after {
    transform: translateY(-20%) rotate(-135deg);
}

/* Contenedor de la Respuesta */
.faq-respuesta {
    padding-top: 10px;
    padding-bottom: 5px;
    /* Animación sutil de entrada para el texto */
    animation: deslizarFaq 0.3s ease-out forwards;
}

.faq-respuesta p {
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 0.95rem;
    color: #ffffff;
    line-height: 1.5;
    margin: 0;
}

/* Pequeño efecto de transición al aparecer */
@keyframes deslizarFaq {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   SECCIÓN CONTACTO (ESTILO PREMIUM CLEAN)
   ========================================== */
#contacto {
    background-color: #F7F9FA; /* El fondo claro azulado suave de tu captura */
    padding: 135px 35px 60px 35px;
    width: 100%;
    box-sizing: border-box;
}

#contacto h2 {
    font-family: 'DIN-Alternate-Bold', sans-serif;
    font-size: 1.5rem;
    color: #3366AF; /* Tu azul principal */
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.subtitulo-contacto {
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 1.1rem;
    color: #1F53A0;
    text-align: left;
    max-width: 450px;
    margin: 0 auto 20px auto;
}

.contacto-contenedor {
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 35px;
}


/* --- ESTILOS DEL FORMULARIO --- */
.formulario-contacto {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* Cajas de texto idénticas a tu diseño (Bordes hiper-redondeados) */
.formulario-contacto input[type="text"],
.formulario-contacto input[type="tel"],
.formulario-contacto input[type="email"] {
    width: 100%;
    height: 48px;
    background-color: var(--color-blanco);
    border: 1px solid #CBD5E0;
    border-radius: 30px; /* Redondeado de píldora */
    padding: 0 25px;
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 0.95rem;
    color: #2D3748;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.formulario-contacto input:focus {
    outline: none;
    border-color: #1F53A0;
}

/* Estilo para los textos informativos interiores (Placeholders) */
.formulario-contacto input::placeholder {
    color: #718096;
}

.checkbox-privacidad {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 15px;
    margin-top: 5px;
}

.checkbox-privacidad input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-privacidad label {
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 0.85rem;
    color: #2D3748;
    user-select: none;
}

/* Botón dominante Naranja Coral */
.btn-solicitar {
    width: 100%;
    height: 50px;
    background-color: var(--color-secundario); /* Tu color coral exacto de la imagen */
    color: #ffffff;
    border: none;
    border-radius: 30px;
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 174, 143, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 10px;
}

.btn-solicitar:hover {
    background-color: #f79c7b;
}

/* --- ESTILOS DE LAS SEDES Y ENLACES --- */
.sedes-contacto h3 {
    font-family: 'DIN-Alternate-Bold', sans-serif;
    font-size: 1.4rem;
    color: #1F53A0;
    margin-top: 15px;
    margin-bottom: 25px;
}

/* Bloques divisorios con líneas horizontales tenues */
.sede-bloque {
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.direccion-texto {
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 0.95rem;
    color: #4A5568;
    line-height: 1.4;
    margin: 0;
}

/* Filas interactivas con íconos */
.enlace-linea {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    width: fit-content;
}

.enlace-linea span {
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 0.95rem;
    color: #2D3748;
    transition: color 0.3s ease;
}

/* Cuando pasan el mouse sobre cualquier enlace de dirección, fono o whatsapp */
.enlace-linea:hover span {
    color: #1F53A0;
    text-decoration: underline;
}

/* Tamaño controlado para tus imágenes locales */
.icono-local {
    width: 36px;  /* Se adapta de forma idéntica a tus dimensiones redondas */
    height: 36px;
    object-fit: contain;
    display: block;
}

/* Bloque inferior para Correo y WhatsApp */
.enlaces-rapidos-contacto {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 25px;
    padding-bottom: 10px;
}
.formulario-columna {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ==========================================
   PIE DE PÁGINA (FOOTER)
   ========================================== */
#pie-pagina {
    background-color: #396292; /* Azul del footer de tu diseño */
    padding: 40px 20px 15px 20px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.footer-contenedor {
    width: 100%;
    max-width: 600px; /* Mantiene los elementos agrupados al centro */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Distribución lado a lado para el logo y las redes */
.footer-superior {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 60px; /* Separación horizontal entre logo y redes */
    flex-wrap: wrap; /* Permite que se acomode en móviles muy pequeños */
    width: 100%;
}

/* Control del tamaño de la imagen local del logo */
.footer-logo img {
    height: 65px; /* Ajusta este valor si tu logo se ve muy grande o chico */
    object-fit: contain;
    display: block;
}

.footer-redes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-redes span {
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 1rem;
    color: #ffffff;
}

.iconos-redes {
    display: flex;
    gap: 15px;
}

/* Control del tamaño de los íconos sociales locales */
.iconos-redes img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Pequeña animación al pasar el cursor sobre las redes */
.iconos-redes a:hover img {
    transform: scale(1.1);
}

/* Enlace de Política de Privacidad */
.footer-inferior {
    display: flex;
    justify-content: center;
    width: 100%;
}

.enlace-privacidad {
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 0.9rem;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.enlace-privacidad:hover {
    opacity: 0.8;
    text-decoration: nonw;
}

/* Estilos de los derechos de autor (Línea final) */
.footer-copyright {
    margin-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Línea divisoria muy tenue */
    padding-top: 5px;
    width: 100%;
    text-align: center;
}

.footer-copyright a {
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7); /* Blanco más transparente para que no sature */
    margin: 0;
    text-decoration: none;
}

/* ==========================================
   BOTÓN FLOTANTE DE WHATSAPP DINÁMICO
   ========================================== */
#whatsapp-flotante {
    position: fixed;
    bottom: 25px; /* Separación desde abajo */
    right: 25px;  /* Separación desde la derecha */
    width: 60px;  /* Tamaño premium del botón */
    height: 60px;
    z-index: 3000; /* Por encima de los modales, menús y carruseles */
    cursor: pointer;
    box-sizing: border-box;
    display: block;
    /* Efecto de transición para el desvanecimiento lento */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

/* Estado 1: Oculto por defecto (Cero opacidad y un poco más abajo para el efecto de subida) */
.btn-whatsapp-oculto {
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
}

/* Estado 2: Visible (Esta clase se inyectará automáticamente con JavaScript) */
.btn-whatsapp-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Estilo para tu imagen de icono local */
#whatsapp-flotante img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: block;
    transition: transform 0.3s ease;
}

/* Pequeño efecto interactivo al pasar el mouse encima */
#whatsapp-flotante:hover img {
    transform: scale(1.08);
}

/* Ajuste para pantallas móviles muy pequeñas para que no tape contenido útil */
@media (max-width: 480px) {
    #whatsapp-flotante {
        bottom: 20px;
        right: 20px;
        width: 54px;
        height: 54px;
    }
}

/* ==========================================================================
   MEDIA QUERIES - DISEÑO RESPONSIVO MUNDIAL (TABLETAS Y ESCRITORIO)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TABLETAS Y PANTALLAS MEDIANAS (Desde 768px hasta 1023px)
   -------------------------------------------------------------------------- */
   @media (min-width: 768px) {

   #inicio {
     background-image: url('../imagenes/WEbp/3.2-ptada-tablet.webp');
     /* Cover se encargará de que el fondo cubra todo de forma elástica sin importar la altura */
     background-size: cover;
     background-position: 75% center;    /* Protege el imagotipo derecho para que no se corte */
     background-repeat: no-repeat;

     width: 100%;
     height: auto;
     aspect-ratio: auto;                 /* Eliminamos el ratio rígido que causa desbordes */
     min-height: 460px;                  /* Garantiza una altura mínima atractiva para el banner */
     margin-top: 0;

     /* Regresamos al flujo normal */
     position: relative;

     /* El padding superior (90px) actúa como escudo contra el header fijo,
        y los demás mantienen los textos centrados y equilibrados */
     padding: 165px 50px 50px 50px;
     box-sizing: border-box;

     display: flex;
     flex-direction: column;
     justify-content: center;            /* Centra verticalmente el texto de forma nativa */
     align-items: flex-start;
   }

   /* El contenedor ahora es estático y fluido, adaptándose al tamaño de tus fuentes */
   #inicio .hero-contenedor-textos {
        position: static;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0;                        /* Limpiamos paddings viejos que causaban desfases */
        box-sizing: border-box;
   }

  #inicio h1 {
      font-size: 1rem;
      margin-bottom: 1.5%; /* Usamos porcentajes para que el espacio escale con la imagen */
      margin-top: 0;
      color: var(--color-blanco);
  }

  #inicio .salto-movil {
      display: none;
  }

  #inicio .slogan {
      font-size: 1.9rem; /* Aumentado para un look premium e idéntico a tu diseño */
      line-height: 1.1;
      margin-bottom: 2%;
      max-width: 65%;    /* Protege la silueta del imagotipo derecho */
  }

  #inicio .salto-movil-slogan {
      display: flex;
  }


  #inicio .modalidad {
      font-size: 0.95rem;
      line-height: 1.3;
      margin-bottom: 3.5%;
      max-width: 70%;
  }

  #inicio .btn-cta {
      margin-top: 0;
      padding: 12px 35px;
  }

    /* --- NOSOTROS / PROPUESTA --- */

    #nosotros{
      width: 80%;
    }
    .propuestas-grid {
        /* Cambiamos el flujo vertical de móvil a horizontal flexible */
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        padding: 0px 20px;
    }

    .tarjeta-propuesta {
        /* La magia matemática: cada tarjeta ocupa el 50% del ancho restando el espacio del gap */
        flex: 0 0 calc((100% - 20px) / 2);

        /* Reducimos sutilmente el padding interno para balancear la nueva anchura */
        padding: 20px 15px;
    }

    .tarjeta-propuesta h3 {
        font-size: 1rem;      /* Ajustado para evitar que los títulos largos rompan el diseño */
        line-height: 1.2;
    }

    .tarjeta-propuesta p {
        font-size: 0.9rem;    /* Hace el párrafo más compacto y estético en la rejilla */
        line-height: 1.35;
    }

    /* ============================================================
       NUESTRO EQUIPO
       ============================================================ */
       .flecha-equipo {
            display: none !important;
       }

       .equipo-carrusel {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important; /* Mantiene las 2 columnas */
            gap: 25px !important;
            overflow-x: visible !important;
       }

       .tarjeta-psicologo {
            flex: auto !important;
            scroll-snap-align: none !important;
       }

       /* ¡EL TRUCO DE CENTRADO PARA LA TERCERA TARJETA! */
       .tarjeta-psicologo:last-child {
            grid-column: span 2 !important;     /* Hace que el espacio abarque toda la fila */
            justify-self: center !important;    /* La posiciona al centro exacto */

            /* Esta fórmula calcula el ancho perfecto restando el espacio del gap (25px)
               para que mida exactamente lo mismo que las tarjetas de arriba */
            width: calc((100% - 25px) / 2) !important;
       }

  /* ==========================================
        SECCIÓN SERVICIOS (RETÍCULA TABLETAS 2 COL)
        ========================================== */

    .servicios-grid {
        flex-direction: row; /* Cambia el flujo vertical de móvil a horizontal */
        flex-wrap: wrap;     /* Permite que los elementos salten de línea y armen las 2 columnas */
        column-gap: 6%;      /* Espacio proporcional entre la columna izquierda y derecha */
        row-gap: 35px;       /* Separación vertical limpia entre filas */
        margin: auto;
        margin-bottom: 30px;
        max-width: 90%;
    }

    .item-servicio {
        /* La magia matemática: 47% de ancho para cada uno asegura que entren exactamente dos por fila */
        flex: 0 0 47%;
        box-sizing: border-box;

        /* Mantiene la imagen y el texto alineados perfectamente desde arriba */
        align-items: flex-start;
    }

    .info-servicio h3 {
        font-size: 1.15rem; /* Un ligero ajuste de escala para pantallas medianas */
    }

    .info-servicio p {
        font-size: 0.95rem;
        line-height: 1.35;
    }

    /* ALINEACIÓN DEL BOTÓN INFERIOR */
    #servicios .centro-btn {
      display: flex;
      justify-content: center; /* Centra el botón internamente en su columna */
      align-items: center;

      /* Ocupa exactamente el mismo ancho (47%) que un servicio para encajar en la columna derecha */
      flex: 0 0 47%;
      box-sizing: border-box;

      /* Empuja el botón un poco hacia abajo para alinearlo visualmente con el texto del servicio de al lado */
      padding-top: 20px;
      margin-top: 0;
  }


      /* ==========================================
         SECCIÓN ENFOQUE (TABLEROS CRUZADOS TABLETA)
         ========================================== */

       #enfoque {
           padding: 135px 50px 80px 50px;
           display: flex;
           flex-direction: column;
           gap: 50px; /* Separación marcada entre el bloque superior y el inferior */
       }

       #enfoque h2 {
           font-size: 2.1rem;
           margin-bottom: 30px;
           text-align: center;
       }

       /* --- BLOQUE SUPERIOR (Texto Izquierda / Imagen Derecha) --- */
       .bloque-enfoque-superior {
           display: flex;
           flex-direction: row;
           justify-content: space-between;
           align-items: center;
           gap: 6%;
           width: 100%;
       }

       .bloque-enfoque-superior .enfoque-col-texto {
           flex: 0 0 52%;
       }

       .bloque-enfoque-superior .contenedor-img-enfoque {
           flex: 0 0 42%;
           padding-bottom: 0;
           margin-top: 0;
       }

       /* --- BLOQUE INFERIOR (Imagen Izquierda / Texto y Botón Derecha) --- */
       .bloque-enfoque-inferior {
           display: flex;
           flex-direction: row;
           flex-wrap: wrap; /* Permite que el botón salte abajo del texto manteniéndose a la derecha */
           justify-content: space-between;
           align-items: center;
           gap: 6%;
           width: 100%;
       }

       /* Mágico cruce: La imagen pasa a la izquierda (order: 1) y el texto a la derecha (order: 2) */
       .bloque-enfoque-inferior .img-espejo {
           flex: 0 0 42%;
           order: 1;
           padding-bottom: 0;
           margin-top: 0;
       }

       .bloque-enfoque-inferior .enfoque-col-texto {
           flex: 0 0 52%;
           order: 2;
       }

       /* El botón se posiciona en su fila propia abajo de la lista de síntomas (order: 3) */
       .bloque-enfoque-inferior .centro-btn-enfoque {
           flex: 0 0 52%;
           order: 3;
           justify-content: flex-start; /* Lo alinea a la izquierda de su columna (debajo de los síntomas) */
           margin-top: 25px;
           margin-left: auto; /* Truco elástico para alinearlo perfectamente con el bloque de texto derecho */
       }

       /* --- Ajustes Finos de Tipografía en Tabletas --- */
       #enfoque h3,
       #buscar-ayuda {
           font-size: 1.5rem !important;
           line-height: 1.25;
           text-align: left;
       }

       #enfoque p,
       #enfoque ul li {
           font-size: 0.95rem;
           line-height: 1.4;
       }

/* --- Galería --- */
   #galeria {
        padding: 135px 50px 60px 50px;
   }

   #galeria h2 {
        font-size: 2.1rem;
        margin-bottom: 25px;
   }

   .galeria-carrusel {
        gap: 20px; /* Ampliamos sutilmente el espacio entre fotos en pantallas más grandes */
        padding: 15px 5px;
   }

   .carrusel-item {
        /* Restamos el espacio del gap (20px) y dividimos entre 2 para que entren exactamente dos fotos */
        flex: 0 0 calc((100% - 20px) / 2);

        /* Cambiamos a 'start' para que al deslizar se encuadren perfectamente de par en par desde el inicio */
        scroll-snap-align: start;
   }

   .carrusel-item img {
        /* Forzamos una altura fija para que todas las fotos se alineen de forma homogénea y estética */
        height: 250px;
        object-fit: cover;
   }

   /* Ocultamos los indicadores de puntos en tabletas si tu script de JS solo conmuta de uno en uno,
      or simplemente los dejamos centrados para mantener la estética limpia */
   .carrusel-indicators {
        margin-top: 35px;
   }

  /* --- SECCIÓN ARTÍCULOS --- */
  /* En tabletas mostramos exactamente 3 tarjetas por fila visual usando cálculo geométrico */
  .tarjeta-articulo {
      flex: 0 0 calc((100% - (20px * 2)) / 3);
      scroll-snap-align: start;
  }

  .flecha-carrusel{
    display: none;
  }
  /* Reposicionamos las flechas un poco más afuera aprovechando la pantalla */
  .flecha-izq { left: -20px; }
  .flecha-der { right: -20px; }

  .salto-subtitulo{
    display: none;
  }

  /* El contenedor elástico horizontal en una sola fila */
  .articulos-carrusel {
      justify-content: center;
  }

  /* --- SECCIÓN PREGUNTAS FRECUENTES --- */

  #preguntas-frecuentes {
      padding: 135px 40px 60px 40px;
  }
  .faq-item summary {
      font-size: 1.1rem;
  }

  /* ==========================================
     SECCIÓN CONTACTO (DOS COLUMNAS TABLETA)
     ========================================== */

  #contacto {
      padding: 60px 50px 80px 50px;
  }

  #contacto h2 {
      font-size: 2.1rem;
      margin-bottom: 45px;
  }

  /* Rompemos el max-width restrictivo de celular para que se expanda horizontalmente */
  #contacto .contacto-contenedor {
      max-width: 90%;
      flex-direction: row; /* La magia: alinea el formulario al lado de las sedes */
      justify-content: space-between;
      align-items: flex-start;
      gap: 8%; /* Separación elástica del 8% entre columnas */
  }

  /* Columna Izquierda: Contenedor del Formulario */
  #contacto .formulario-columna {
      flex: 0 0 46%; /* Toma casi la mitad horizontal de la pantalla */
  }

  #contacto .subtitulo-contacto {
      font-size: 1.4rem;
      margin: 0 0 20px 0; /* Eliminamos el centrado automático de celular */
      text-align: left;
  }

  /* Columna Derecha: Contenedor de Sedes (Tu clase corregida y mapeada) */
  #contacto .sedes-contacto {
      flex: 0 0 46%; /* Toma la otra mitad horizontal */
      display: flex;
      flex-direction: column;
      text-align: left;
      margin: 0; /* Resetea márgenes externos heredados */
      max-width: none;
  }

  #contacto .sedes-contacto h3 {
      font-family: 'Montserrat-Bold', sans-serif;
      font-size: 1.4rem;
      color: #1F53A0;
      margin-bottom: 20px;
      margin-top: 0;
      text-align: left;
  }



  /* --- PIE DE PÁGINA (FOOTER) --- */
  #pie-pagina {
      padding: 50px 40px 20px 40px;
      align-items: center;
  }
  .footer-superior {
      justify-content: space-between;
      max-width: 90%;
      gap: 30px;
  }
  .footer-contenedor {
      max-width: 100%;
  }

}

/* --------------------------------------------------------------------------
   2. EQUIPOS DE ESCRITORIO Y PANTALLAS GRANDES (Desde 1024px en adelante)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

/* --- HERO --- */

  #inicio {
    background-image: url('../imagenes/WEbp/3.1-ptada-escritorio-2.webp');
    min-height: 100vh;
    padding: 165px 50px 50px 150px;
  }

  #inicio h1 {
      font-size: 1.6rem;
      margin-bottom: 1.5%; /* Usamos porcentajes para que el espacio escale con la imagen */
  }

  #inicio .slogan {
      font-size: 2.7rem; /* Aumentado para un look premium e idéntico a tu diseño */
      line-height: 1;
  }

  #inicio .modalidad {
      font-size: 1.1rem;
      line-height: 1.2;
      max-width: 55%;
  }

  .menu-icon{
    display: none;
  }

  /* ============================================================
     HEADER RESPONSIVO (CORREGIDO CON TUS CLASES REALES)
     ============================================================ */

  /* 1. Ocultar por completo las tres rayitas (icono hamburguesa) */
  .menu-icon {
      display: none !important;
  }

  /* 2. Resetear el contenedor del menú para que flote al centro y pierda la estética móvil */
  header nav {
      display: flex !important; /* Forza a que se muestre siempre */
      position: static !important; /* Elimina el posicionamiento absolute de móvil */
      width: auto !important; /* Ya no ocupa el 100% de la pantalla */
      background-color: transparent !important; /* Adiós al fondo azul de móvil */
      box-shadow: none !important; /* ¡Adiós a la sombra que se colaba! */
  }

  /* 3. Cambiar la lista de enlaces de vertical (columna) a horizontal (fila) */
  nav ul {
      flex-direction: row !important; /* Los alinea en fila uno al lado del otro */
      gap: 18px !important; /* Separación limpia entre cada palabra del menú */
      padding: 0 !important; /* Eliminamos el padding vertical de móvil */
  }

  /* 4. Cambiar el color del texto a oscuro y ajustar tipografía */
  nav a {
      color: #333333 !important; /* Cambiamos el blanco móvil por un gris oscuro legible */
      text-transform: uppercase !important; /* Forzamos mayúsculas como en tu imagen */
      font-size: 0.78rem !important; /* Tamaño compacto y estilizado */
      font-weight: 700 !important; /* Negrita clara */
      padding: 0 !important; /* Limpiamos paddings móviles */
  }

  /* Efecto Hover adaptado a tus variables */
  nav a:hover {
      color: #1F53A0 !important; /* Cambia a tu azul de acento al pasar el mouse */
  }

  /* 5. Asegurar los espacios del contenedor principal */
  header {
    position: fixed !important;
      padding: 15px 4% !important; /* Le da un colchón elástico a los extremos de la pantalla */
  }

  /* 2. El contenedor de redes sociales: Lo clavamos en la esquina inferior derecha */
  .header-right {
      position: absolute !important;
      right: 4% !important;  /* Alineado exactamente con el margen derecho del header */
      bottom: 10px !important; /* Separación sutil del borde inferior blanco */
      display: flex !important;
      flex-direction: row !important;
      gap: 12px !important; /* Espaciado compacto entre Instagram y Facebook */
      align-items: center !important;
      margin-top: 5px;
  }

  /* 3. ¡EL DOMADOR DE ICONOS GIGANTES!
     Forzamos a que las imágenes internas midan lo que deben medir */
  .social-link {
      width: 22px !important;  /* Controlamos el contenedor */
      height: 22px !important;
      display: inline-flex !important;
  }

  .social-link img {
      width: 100% !important;  /* Obliga a la imagen gigante a encogerse al tamaño del link */
      height: 100% !important;
      object-fit: contain !important;
      display: block !important;
  }

  /* --- NOSOTROS / PROPUESTA --- */

  #nosotros {
    padding: 65px 50px 60px 50px;
  }

  #nosotros h2 {
    font-size: 1.7rem;
    padding-top: 80px;
  }

  #nosotros h3 {
    font-size: 1.3rem;
    line-height: 1.5;
    margin-bottom: 35px;
  }
  #nosotros .descripcion-1 {
    font-size: 1.2rem;
    line-height: 1.2;
    margin:auto;
    text-align: left;
    max-width: 90%;
    margin-bottom: 15px;
  }
  #nosotros .descripcion-2 {
    font-size: 1.2rem;
    line-height: 1.2;
    margin:auto;
    text-align: left;
    max-width: 90%;
  }

  .propuestas-grid {
    display: flex !important;
    flex-direction: row !important;

    /* 1. Mantenemos el wrap si lo deseas, pero con la matemática correcta no actuará */
    flex-wrap: wrap !important;

    /* 2. Forzamos un gap exacto de 15px para que coincida con el cálculo matemático de abajo */
    gap: 15px !important;

    width: 100% !important;
  }
  .tarjeta-propuesta {
    /* 3. LA CORRECCIÓN MATEMÁTICA:
       Para 4 tarjetas en línea hay 3 espacios (gaps) de 15px entre ellas (3 * 15px = 45px).
       Restamos esos 45px del total y dividimos exactamente entre 4 */
    flex: 0 0 calc((100% - 45px) / 4) !important;
    width: calc((100% - 45px) / 4) !important;

    /* Mantenemos tus estilos de padding compactos originales */
    padding: 20px 15px;
    box-sizing: border-box !important; /* Vital para que el padding no sume píxeles extra */
}

  .tarjeta-propuesta h3 {
      font-size: 1rem !important;      /* Ajustado para evitar que los títulos largos rompan el diseño */
      line-height: 1.2;
  }

  .tarjeta-propuesta p {
      font-size: .9rem;    /* Hace el párrafo más compacto y estético en la rejilla */
      line-height: 1.35;
  }

  #nosotros .prop-valor{
    padding-bottom: 15px;
    font-size: 1.9rem;
  }

  /* --- EQUIPO --- */
  /* En PC de escritorio mostramos exactamente 4 tarjetas por fila visual */

  .equipo-carrusel {
          grid-template-columns: repeat(3, 1fr) !important; /* Regresa a 3 columnas en una fila */
      }

      /* Reseteamos la tercera tarjeta en escritorio para que ocupe su lugar normal */
      .tarjeta-psicologo:last-child {
          grid-column: auto !important;
          justify-self: stretch !important;
          width: auto !important;
      }

  /* Estilo premium exterior para las flechas flotantes */
  .flecha-izq { left: -30px; }
  .flecha-der { right: -30px; }
  .flecha-carrusel {
      width: 50px;
      height: 50px;
      font-size: 1.25rem;
  }

  /* ============================================================
     NUESTRO EQUIPO
     ============================================================ */
      .flecha-equipo {
          display: none !important; /* Desaparecen las flechas automáticamente */
      }

      .equipo-carrusel {
          display: grid !important;
          grid-template-columns: repeat(3, 1fr) !important; /* Fila exacta de 3 tarjetas */
          gap: 25px !important;
          overflow-x: visible !important; /* Desactiva el desplazamiento lateral */
      }

      .tarjeta-psicologo {
          flex: auto !important;
      }

/* --- SECCIÓN Enfoque --- */

  #enfoque h2{
    font-size: 1.7rem;
  }

  .contenedor-img-enfoque img {
      width: 90%;
      height: auto;
  }

  .salto-ayuda{
    display: flex;
  }

  .bloque-enfoque-superior,
  .bloque-enfoque-inferior {
      display: flex;
      margin: auto;
      width: 90%;
      align-items: flex-start;
  }

  #enfoque h3,
  #buscar-ayuda {
      font-size: 1.8rem !important;
      line-height: 1;
      text-align: left;
  }

  #enfoque p,
  #enfoque ul li {
      font-size: 1.1rem;
      line-height: 1.2;
  }

/* --- GALERÍA --- */

/* ============================================================
CARRUSEL DINÁMICO DE ESCRITORIO (CORREGIDO Y SIN COMPRESIÓN)
============================================================ */
#galeria h2{
  font-size: 1.7rem;
}

.galeria-carrusel {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  align-items: center !important;
  gap: 30px !important;

  /* Regresamos a un padding normal para proteger los bordes verticales */
  padding: 80px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Oculta la barra de scroll en Chrome/Safari para mantenerlo limpio */
.galeria-carrusel::-webkit-scrollbar {
  display: none !important;
}

/* 1. Reset general: 3 fotos exactas y visibles en el área del monitor */
.galeria-carrusel .carrusel-item {
  /* Fórmula exacta restando los dos gaps de 30px (60px) y dividiendo entre 3 */
  flex: 0 0 calc((100% - 60px) / 3) !important;
  width: calc((100% - 60px) / 3) !important;
  min-width: calc((100% - 60px) / 3) !important; /* Evita que Flexbox las comprima */
  scroll-snap-align: center !important;

  transform: scale(1) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
  z-index: 1 !important;
  transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.4s ease !important;
}

/* 2. LA MAGIA PARA LOS EXTREMOS:
      Le damos a la primera foto un margen izquierdo y a la última un margen derecho
      equivalente a una columna exacta. Esto les da el espacio físico para llegar al centro */
.galeria-carrusel .carrusel-item:first-child {
  margin-left: calc((100% - 60px) / 3) !important;
}
.galeria-carrusel .carrusel-item:last-child {
  margin-right: calc((100% - 60px) / 3) !important;
}

/* 3. La foto activa del centro se destaca e infla */
.galeria-carrusel .carrusel-item.active {
  transform: scale(1.5) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.22) !important;
  z-index: 5 !important;
}

/* 4. Las imágenes recuperan su proporción horizontal */
.galeria-carrusel .carrusel-item img {
  height: 230px !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* --- SECCIÓN SERVICIOS --- */

.servicios-grid {
    max-width: 90%;
    margin: auto;
}

.info-servicio h3 {
    font-size: 1.2rem; /* Un ligero ajuste de escala para pantallas medianas */
}

.info-servicio p {
    font-size: 1rem;
    line-height: 1.35;
}


    /* --- SECCIÓN ARTÍCULOS --- */
    /* En PC de escritorio mostramos exactamente 4 tarjetas por fila visual */
    .tarjeta-articulo {
        flex: 0 0 calc((100% - (20px * 3)) / 4);
        scroll-snap-align: start;
    }

    /* Estilo premium exterior para las flechas flotantes */
    .flecha-izq { left: -30px; }
    .flecha-der { right: -30px; }
    .flecha-carrusel {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    #articulos h2 {
        font-size: 1.7rem;
    }

    .subtitulo-articulos {
        font-size: 1.7rem;
    }

    .bajada-articulos {
        font-size: 1.1rem;
    }

    /* --- SECCIÓN PREGUNTAS FRECUENTES --- */
    .faq-contenedor {
        max-width: 70%; /* Centrado de lectura óptimo para monitores anchos */
    }

    #preguntas-frecuentes h2 {
        font-size: 1.7rem;
    }

    .faq-respuesta p{
      font-size: 1.1rem;
    }

    .faq-item summary{
      font-size: 1.2rem;
    }

    /* --- SECCIÓN CONTACTO (DISTRIBUCIÓN EN PARALELO/COLUMNAS) --- */

    #contacto{
      padding: 135px 50px 50px 50px;
    }

    #contacto h2{
      font-size: 1.7rem;
    }

    .subtitulo-contacto {
        max-width: 1100px;
        margin: 0 auto 30px auto;
        font-size: 1.25rem;
    }

    /* El contenedor se vuelve una fila horizontal */
    .contacto-contenedor {
        max-width: 90%;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 50px;
    }

    /* Cada bloque ocupa el 48% del ancho para un balance perfecto */
    .formulario-contacto,
    .sedes-contacto {
        flex: 0 0 48%;
    }

    .sedes-contacto h3 {
        margin-top: 0; /* Alinea el título de las sedes con el primer input */
    }

    /* --- PIE DE PÁGINA (FOOTER) --- */
    .footer-superior {
        max-width: 1100px;
    }
    .footer-contenedor {
        max-width: 1100px;
        gap: 35px;
    }
    .footer-logo img {
        height: 75px; /* Un poco más grande en pantallas de escritorio */
    }

    /* --- BOTÓN FLOTANTE DE WHATSAPP --- */
    #whatsapp-flotante {
        bottom: 35px;
        right: 35px;
        width: 65px;
        height: 65px;
    }
}

/* ============================================================
   PUNTO DE RUPTURA EXCLUSIVO PARA PANTALLAS ULTRA GRANDES (1600px+)
   Fuerza la aplicación de estilos sobreescribiendo el CSS base
   ============================================================ */
@media screen and (min-width: 1600px) {

  /* Usamos "html body" al inicio para darle el máximo peso al selector */
  #inicio {
      padding-left: 10% !important;
      padding-right: 10% !important;
      width: 100% !important;
  }
  /* 1. EL H1 (Título Principal): Aquí puedes cambiar el tamaño libremente */
  #inicio h1{
      font-size: 2.8rem !important; /* Subido a 4.5rem para que resalte con fuerza en 1728px */
      line-height: 1.2 !important;
      margin-bottom: 30px !important;
      display: block !important;
  }

  /* 2. El Párrafo de Descripción */
  #inicio .slogan {
      font-size: 3.95rem !important;
      line-height: 1 !important;
      margin-bottom: 45px !important;
  }

  #inicio .modalidad {
      font-size: 1.9rem !important;
      line-height: 1 !important;
      margin-bottom: 45px !important;
      max-width: 70%;
  }

  /* 3. El Botón */
  #inicio .btn-cta {
      font-size: 1.6rem !important;
  }

  #enfoque h3,
  #buscar-ayuda {
      font-size: 2.6rem !important;
      line-height: 1;
      text-align: left;
  }

/* Enfoque */

  #enfoque p,
  #enfoque ul li {
      font-size: 1.7rem;
      line-height: 1.2;
  }

  #enfoque .btn-cta{
    font-size: 1.6rem;
  }

/* Servicios */

  .servicios-grid {
      max-width: 90%;
      margin: auto;
  }

/* Articulos */

  .subtitulo-articulos {
      font-size: 1.9rem;
  }

  .bajada-articulos {
      font-size: 1.4rem;
  }

  .contenido-art h4 {
      font-size: 1.2rem;
  }

  .btn-leer-mas {
      font-size: 1.2rem;
  }


/* Contacto */

  #contacto h2{
    font-size: 2.3rem;
  }

  .formulario-contacto input[type="text"],
  .formulario-contacto input[type="tel"],
  .formulario-contacto input[type="email"] {
      font-size: 1.5rem;
  }

  .contacto-contenedor {
      max-width: 90%;
  }

  #contacto .subtitulo-contacto {
      font-size: 1.7rem;
  }

  #contacto .sedes-contacto h3 {
      font-size: 1.7rem;
  }

  .checkbox-privacidad label {
      font-size: 1.3rem;
  }

  .btn-solicitar {
      font-size: 1.5rem;
  }

  .direccion-texto {
      font-size: 1.4rem;
  }

  .enlace-linea span {
      font-size: 1.4rem;
  }

/* footer */

  #pie-pagina {
      padding: 50px 40px 20px 40px;
      align-items: center;
  }
  .footer-superior {
      justify-content: space-between;
      max-width: 90%;
      gap: 30px;
  }
  .footer-contenedor {
      max-width: 100%;
  }

}