/* css/inicio-cope.css */
:root {
    --cope-primario: #002856;
    --cope-primario-claro: #003a70;
    --cope-accent: #007D67;
    --cope-accent-hover: #005f4f;
    --texto-primario: #1e293b;
    --texto-secundario: #475569;
    --texto-claro: #e2e8f0;
    --fondo-ligero: #f8fafc;
    --borde-claro: #e2e8f0;
    --sombra-suave: 0 10px 30px rgba(0, 0, 0, 0.05);
    --sombra-media: 0 15px 40px rgba(0, 40, 86, 0.1);
    --sombra-fuerte: 0 20px 50px rgba(0, 0, 0, 0.15);
    --fuente-titulos: 'Poppins', sans-serif;
    --fuente-cuerpo: 'Lato', sans-serif;
    --transicion-suave: all 0.25s ease;
}

/* =========================================
   RESETEO ANTI-DESBORDAMIENTO MÓVIL
   ========================================= */
html, body {
    overflow-x: hidden; /* Bloquea el movimiento lateral */
    width: 100%;
}

*, *::before, *::after {
    box-sizing: border-box; /* Obliga a los paddings a quedarse hacia adentro */
}

/* Utilidades generales */
.contenedor { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
.bg-ligero { background-color: var(--fondo-ligero); }
.bg-white { background-color: #ffffff; }
.seccion-info { padding: 70px 0; }
.mt-40 { margin-top: 40px; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-width-850 { max-width: 850px; }
.max-width-800 { max-width: 800px; }
.max-width-700 { max-width: 700px; }
.separador { width: 70px; height: 4px; background: var(--cope-accent); margin-bottom: 25px; border-radius: 2px; }
.h2-seccion { color: var(--cope-primario); font-size: 2rem; margin-bottom: 15px; font-weight: 700; line-height: 1.3; font-family: var(--fuente-titulos); }
.texto-cuerpo { color: var(--texto-secundario); font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.2rem; font-family: var(--fuente-cuerpo); }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; font-weight: 600; font-size: 0.95rem; border-radius: 50px; text-decoration: none; transition: var(--transicion-suave); cursor: pointer; border: 2px solid transparent; font-family: var(--fuente-titulos); }
.btn-primario { background: var(--cope-accent); color: #fff; border-color: var(--cope-accent); box-shadow: 0 4px 12px rgba(0, 125, 103, 0.25); }
.btn-primario:hover { background: var(--cope-primario); border-color: var(--cope-primario); transform: translateY(-2px); color: #fff; }
.btn-primario-dark { background: var(--cope-primario); color: #fff; border-color: var(--cope-primario); }
.btn-primario-dark:hover { background: var(--cope-accent); border-color: var(--cope-accent); transform: translateY(-2px); color: #fff; }
.btn-secundario, .btn-outline-light { background: transparent; border: 2px solid #fff; color: #fff; }
.btn-secundario:hover, .btn-outline-light:hover { background: #fff; color: var(--cope-primario); }
.btn-secundario-dark { background: transparent; border: 2px solid var(--cope-primario); color: var(--cope-primario); }
.btn-secundario-dark:hover { background: var(--cope-primario); color: #fff; }
.btn-google { background: #4285F4; border-color: #4285F4; color: white; }
.btn-google:hover { background: #2a6ed1; border-color: #2a6ed1; color: white; transform: translateY(-2px); }
.btn-full { width: 100%; box-sizing: border-box; }

/* Hero */
.hero-premium { position: relative; width: 100%; height: 75vh; min-height: 500px; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; background-color: var(--cope-primario); }
.hero-fondo { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-fondo .swiper, .hero-fondo .swiper-wrapper, .hero-fondo .swiper-slide { height: 100% !important; width: 100%; }
.hero-fondo .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0, 40, 86, 0.94) 0%, rgba(0, 40, 86, 0.3) 100%); z-index: 2; }
.hero-estatico { position: relative; z-index: 3; width: 100%; }
.hero-texto-central { max-width: 700px; color: #fff; }
.hero-texto-central h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.15; margin-bottom: 15px; font-weight: 800; font-family: var(--fuente-titulos); }
.hero-subtitulo, .slide-subtitle { font-size: 1.25rem; color: var(--texto-claro); margin-bottom: 30px; line-height: 1.5; font-family: var(--fuente-cuerpo); }
.hero-botones { display: flex; gap: 15px; flex-wrap: wrap; }

/* Tarjeta de servicio */
.tarjeta-servicio { background: #fff; padding: 35px; border-radius: 20px; box-shadow: var(--sombra-suave); max-width: 800px; margin: 0 auto; border: 1px solid var(--borde-claro); text-align: center; transition: var(--transicion-suave); }
.tarjeta-servicio:hover { box-shadow: var(--sombra-media); transform: translateY(-3px); }
.servicio-titulo { color: var(--cope-primario); font-size: 1.4rem; margin-bottom: 10px; font-weight: 700; font-family: var(--fuente-titulos); }

/* Filosofía */
.filosofia-card { background: #fff; border-radius: 20px; padding: 30px 25px; text-align: center; box-shadow: var(--sombra-suave); border: 1px solid var(--borde-claro); transition: var(--transicion-suave); }
.filosofia-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-media); }
.filosofia-icono { font-size: 2.5rem; margin-bottom: 15px; }
.filosofia-card h3 { color: var(--cope-primario); font-size: 1.3rem; margin-bottom: 10px; font-weight: 700; font-family: var(--fuente-titulos); }
.filosofia-card p { color: var(--texto-secundario); font-size: 1rem; line-height: 1.6; font-family: var(--fuente-cuerpo); }

/* Experiencia */
.seccion-experiencia { background-color: #ffffff; padding: 70px 0; border-top: 4px solid var(--cope-accent); }
.grid-experiencia { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 40px; 
    align-items: center; 
    background-color: var(--cope-primario); 
    border-radius: 20px; 
    padding: 45px; 
    box-shadow: var(--sombra-media);
    width: 100%; /* FIX: Asegura que no desborde horizontalmente */
    box-sizing: border-box; /* FIX: Asegura que el padding no rompa el ancho */
}
.experiencia-texto h2 { font-size: 2rem; line-height: 1.25; font-weight: 800; font-family: var(--fuente-titulos); }
.separador-accent { width: 80px; height: 4px; background-color: var(--cope-accent); margin-bottom: 20px; }
.texto-experiencia { font-size: 1.05rem; line-height: 1.7; color: #ffffff; margin-bottom: 25px; font-family: var(--fuente-cuerpo); }

/* FIX: Se saca del media query para que aplique siempre el min-width 0 al grid */
.experiencia-carousel { 
    flex: 1; 
    width: 100%; 
    min-width: 0; /* ¡ESTA ES LA MAGIA QUE ARREGLA SWIPER EN GRID! */
    max-width: 100%; 
    overflow: hidden; 
    justify-self: center; 
}
.expSwiper { border-radius: 16px; overflow: hidden; box-shadow: var(--sombra-fuerte); width: 100%; }

/* Carrusel Experiencia */
.expSwiper .swiper, .expSwiper .swiper-wrapper, .expSwiper .swiper-slide { width: 100%; height: auto; }
.expSwiper .swiper-slide img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

@media (min-width: 1025px) { .expSwiper .swiper-slide img { max-height: 450px; } }
@media (min-width: 769px) and (max-width: 1024px) { .expSwiper .swiper-slide img { max-height: 380px; } }
@media (max-width: 768px) { 
    .expSwiper .swiper-slide img { max-height: 300px; }
    .expSwiper .swiper-pagination-exp { bottom: 8px !important; }
    .expSwiper .swiper-pagination-bullet { width: 8px; height: 8px; }
}
@media (max-width: 900px) and (orientation: landscape) { .expSwiper .swiper-slide img { max-height: 250px; } }

.slide-con-etiqueta { position: relative; }
.slide-tag-medico { position: absolute; bottom: 15px; left: 15px; background: rgba(0, 40, 86, 0.85); backdrop-filter: blur(8px); color: #fff; padding: 6px 14px; border-radius: 30px; font-size: 0.85rem; font-weight: 600; font-family: var(--fuente-titulos); border: 1px solid rgba(255, 255, 255, 0.2); }

/* Reseñas Google */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
.google-review-card { background: #fff; border-radius: 16px; padding: 25px; text-align: left; box-shadow: var(--sombra-suave); border: 1px solid var(--borde-claro); display: flex; flex-direction: column; transition: var(--transicion-suave); }
.google-review-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-media); }
.google-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.google-user { display: flex; align-items: center; gap: 10px; }
.google-avatar { width: 44px; height: 44px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; font-family: var(--fuente-titulos); }
.google-name strong { color: var(--texto-primario); font-size: 1rem; line-height: 1.2; display: block; font-family: var(--fuente-titulos); }
.google-stars { font-size: 0.85rem; letter-spacing: 1px; margin-top: 2px; display: block; }
.google-icono { font-size: 1.6rem; color: #4285F4; flex-shrink: 0; }
.google-text { color: var(--texto-secundario); font-size: 0.95rem; line-height: 1.6; font-style: italic; flex-grow: 1; font-family: var(--fuente-cuerpo); }

/* Contacto */
.grid-contacto { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; align-items: start; }
.tarjeta-contacto { background: #fff; border-radius: 16px; padding: 25px; box-shadow: var(--sombra-suave); border: 1px solid var(--borde-claro); display: flex; flex-direction: column; gap: 15px; }
.info-telefono { margin: 0; color: var(--texto-secundario); font-size: 1rem; font-family: var(--fuente-cuerpo); }

/* Mapa */
.mapa-lazy-container { position: relative; width: 100%; cursor: pointer; border-radius: 15px; overflow: hidden; box-shadow: var(--sombra-media); }
.mapa-lazy-img { width: 100%; height: auto; display: block; aspect-ratio: 4/3; object-fit: cover; }
.mapa-lazy-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; transition: background 0.3s; }
.mapa-lazy-overlay:hover { background: rgba(0, 0, 0, 0.15); }
.mapa-lazy-btn { background: var(--cope-primario); color: #fff; border: none; padding: 12px 25px; border-radius: 50px; font-weight: 600; font-size: 1rem; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: transform 0.2s; font-family: var(--fuente-titulos); }
.mapa-lazy-overlay:hover .mapa-lazy-btn { transform: scale(1.05); }

/* Chatbot IA */
#cope-bot-container { position: fixed; bottom: 25px; right: 25px; z-index: 99999; font-family: var(--fuente-cuerpo); }
#cope-bot-button { background: linear-gradient(135deg, var(--cope-primario), var(--cope-accent)); color: white; padding: 14px 24px; border-radius: 50px; cursor: pointer; box-shadow: 0 8px 25px rgba(0, 40, 86, 0.3); font-weight: 600; font-size: 1rem; transition: var(--transicion-suave); display: flex; align-items: center; gap: 8px; border: none; font-family: var(--fuente-titulos); }
#cope-bot-button:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 30px rgba(0, 40, 86, 0.4); }
#cope-bot-window { position: absolute; bottom: 80px; right: 0; width: 350px; background: white; border-radius: 20px; box-shadow: var(--sombra-fuerte); overflow: hidden; display: flex; flex-direction: column; transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1.2); transform-origin: bottom right; border: 1px solid var(--borde-claro); }
.bot-cerrado { opacity: 0; transform: scale(0.8) translateY(20px); pointer-events: none; visibility: hidden; }
.bot-abierto { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; visibility: visible; }
#cope-bot-header { background: linear-gradient(135deg, var(--cope-primario), var(--cope-primario-claro)); color: white; padding: 18px; display: flex; justify-content: space-between; align-items: center; }
.bot-header-info { display: flex; align-items: center; gap: 10px; }
.bot-avatar { width: 42px; height: 42px; background: var(--cope-accent); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.3rem; border: 2px solid white; }
.bot-close-btn { background: transparent; border: none; color: #ffffff; font-size: 1.2rem; cursor: pointer; opacity: 0.8; transition: var(--transicion-suave); padding: 5px; display: flex; align-items: center; justify-content: center; }
.bot-close-btn:hover { opacity: 1; transform: scale(1.1); }
#cope-bot-body { padding: 18px; background: var(--fondo-ligero); }
#cope-bot-chat-logs { height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 5px; scroll-behavior: smooth; }
.bot-msg-chat, .user-msg-chat { padding: 10px 16px; border-radius: 14px; font-size: 0.9rem; margin: 0; line-height: 1.45; max-width: 90%; }
.bot-msg-chat { background: #fff; color: var(--texto-secundario); border-radius: 14px 14px 14px 0; border: 1px solid var(--borde-claro); align-self: flex-start; }
.user-msg-chat { background: var(--cope-primario); color: #fff; border-radius: 14px 14px 0 14px; align-self: flex-end; }
.bot-faq-container { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; width: 100%; }
.bot-faq-btn { background: #fff; border: 1px solid var(--cope-accent); text-align: left; padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; color: var(--cope-accent); cursor: pointer; font-weight: 600; transition: var(--transicion-suave); font-family: var(--fuente-cuerpo); }
.bot-faq-btn:hover { background: var(--cope-accent); color: white; }
#cope-bot-footer { display: flex; border-top: 1px solid var(--borde-claro); padding: 12px; background: #fff; gap: 8px; align-items: center; }
#cope-bot-input { flex-grow: 1; border: 1px solid var(--borde-claro); padding: 10px 14px; border-radius: 50px; outline: none; font-size: 0.9rem; background: var(--fondo-ligero); font-family: var(--fuente-cuerpo); }
#cope-bot-send { background: var(--cope-accent); color: white; border: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: var(--transicion-suave); }
#cope-bot-send:hover { background: var(--cope-primario); }

/* =========================================
   RESPONSIVE MÓVIL Y TABLET (CORREGIDO FINAL)
   ========================================= */

/* Para Tablets y pantallas medianas */
@media (max-width: 900px) {
    .grid-experiencia { 
        display: flex; /* ESTO ES CLAVE: Adiós al Grid en móviles */
        flex-direction: column; /* Apila el texto arriba y el carrusel abajo */
        padding: 30px 20px; 
        gap: 25px;
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .experiencia-carousel {
        width: 100%;
        max-width: 100%;
        display: block;
        overflow: hidden;
    }

    .expSwiper {
        width: 100%;
    }
    
    .grid-contacto { 
        grid-template-columns: minmax(0, 1fr); 
    }
    
    .hero-premium { 
        height: auto; 
        min-height: 80vh; 
        padding: 120px 0 60px 0; 
    }
    
    #cope-bot-window { 
        width: calc(100vw - 30px); 
        bottom: 75px; 
        right: 0; 
    }
}
/* Para Teléfonos Celulares (Smartphones) */
@media (max-width: 768px) {
    .hero-texto-central h1 { 
        font-size: 2rem !important; /* Achica el texto principal para que no desborde */
        line-height: 1.25;
    }
    
    .hero-subtitulo {
        font-size: 1.05rem;
    }
    
    .h2-seccion {
        font-size: 1.6rem;
    }
    
    /* Reducimos los espacios enormes de PC para que en móvil fluya mejor */
    .seccion-info, .seccion-experiencia {
        padding: 45px 0; 
    }
    
    .grid-experiencia {
        padding: 25px 20px; 
    }
    
    .tarjeta-servicio, 
    .filosofia-card, 
    .tarjeta-contacto, 
    .google-review-card {
        padding: 20px;
    }

    /* Convertimos los botones lado a lado en una columna del 100% de ancho */
    .hero-botones {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-botones .btn {
        width: 100%;
    }
}