html, body {
    height: 100%;
    margin: 0;
}

body {
    background-color: #f0f0f0;
    background-image: url("../libs/images/Agente-Virtual_Desktop.jpg");
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: fixed;
    background-size: cover;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column; 
    font-family: Arial, sans-serif;
}

/* Manejo de fondo responsive */

/* Tablets genéricas */
@media (min-width: 768px) and (max-width: 1024px) {
    body {
        background-image: url("../libs/images/AV-Portrait.jpg");
        background-size: cover;
         background-position: center top;
         background-repeat: no-repeat;
         background-attachment: fixed;
         min-height: 100vh;
         margin: 0;
    }
      .kore-chat-window {
        height: 80% !important; 
        width: 80% !important;
        right: 0 !important;
        left: 120px !important;
        bottom: 60px !important;
        min-width: 0 !important;
        border-radius: 0 !important; /* Opcional: para que se vea como una ventana inferior nativa */
    }
}

/* iPad vertical */
@media (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
    body {
        background-size: cover;
    }
      .kore-chat-window {
        height: 80% !important; 
        width: 80% !important;
        right: 0 !important;
        left: 80px !important;
        bottom: 60px !important;
        min-width: 0 !important;
        border-radius: 0 !important; /* Opcional: para que se vea como una ventana inferior nativa */
    }
}

/* iPad horizontal */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    body {
         background-image: url("../libs/images/AV-Landscape.jpg");
         background-size: cover;
         background-position: center left;
         background-repeat: no-repeat;
         background-attachment: fixed;
         min-height: 100vh;
         margin: 0;
    }
      .kore-chat-window {
        height: 60% !important; 
        width: 50% !important;
        right: 0 !important;
        left: auto !important;
        bottom: 60px !important;
        min-width: 0 !important;
        border-radius: 0 !important; /* Opcional: para que se vea como una ventana inferior nativa */
    }
}

/* mobile (phones) */
@media (max-width: 767px) {
    body {
        background-image: url("../libs/images/Agente-Virtual_Mobile.jpg");
        background-attachment: scroll;
        background-position: center left;
        background-size: contain;
    }
     .kore-chat-window {
        height: 90% !important; 
        width: 90% !important;
        right: 0 !important;
        left: 20px !important;
        bottom: 60px !important;
        min-width: 0 !important;
        border-radius: 0 !important; /* Opcional: para que se vea como una ventana inferior nativa */
    }
}

#main-content-wrapper {
   
    max-width: 100%; 
    margin: 0 auto;
    /* height: 100vh; Ocupa exactamente la altura de la ventana */
    /* overflow: hidden; */
    background-color: white; 
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Header superior */
.page-header {
    background-color: #004e8e;
    color: white;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
}
.page-header p {
    margin: 0;
    font-size: 14px;
}

/* ----------------------------------------------------
 * ESTILOS: LOGO TELCEL EN EL FOOTER DE LA PÁGINA
 * ---------------------------------------------------- */
/* ----------------------------------------------------
 * ESTILOS: LOGO TELCEL EN EL FOOTER DE LA PÁGINA
 * ---------------------------------------------------- */

.site-footer {
    position: static; 
    flex-shrink: 0; 
    height: 60px; 
    margin-top: 0; 
    
    /* 1. FLEXBOX CLAVE: Justify-content space-between separa los elementos */
    display: flex;
    justify-content: space-between; /* Mueve el primer elemento (Logo) a la izquierda y el último (Aviso) a la derecha */
    align-items: center; /* Centra verticalmente ambos elementos */
    
    padding: 10px 20px;
    background-color: #002F87;
    width: 100%;
    box-sizing: border-box;
}

.site-footer .telcel-logo {
    height: 30px; 
    width: auto;
    /* Ya no necesita margin-left: 0; porque justify-content: space-between lo empuja a la izquierda */
    opacity: 1; 
    
    /* Importante: Mantenemos el logo fuera del flujo de centrado de texto */
    /* text-align: left; no es necesario en flexbox */
}

/* 2. Contenedor del enlace: Aseguramos que se comporte como un bloque y que su texto se centre solo si tiene espacio */
.site-footer .isLink2 {
    display: block; 
    margin-left: auto;
    /*margin-right: auto;*/
    /* Eliminar el margin-top innecesario si está alineado verticalmente */
    margin-top: 0; 
    text-align: center; 
}

/* 3. Estilo del enlace (opcional) */
.site-footer .isLink2 a {
    color: #fffdfd; 
    text-decoration: none;
    font-size: 12px;
    font-family: Gotham;
    font-weight: 500;
    font-style: normal;
}

/* ----------------------------------------------------
 * ESTILOS: "AGENTE VIRTUAL" (POSICIÓN ABSOLUTA)
 * ---------------------------------------------------- */

.hero-section {
    flex-grow: 1; /* Permite que ocupe todo el espacio restante dentro de main-content-wrapper */
    width: 100%;
    /* No debe tener aquí un background-image o podría cubrir el texto */
    /* Aquí definimos el layout interno para la imagen y el texto */
    display: flex; /* Añadir display: flex aquí */
    flex-direction: column; /* Apila los elementos si hubiere más */
}

/* Contenedor del texto "Agente Virtual" */
.hero-section .hero-text-container {
    position: absolute; /* Posiciona el texto respecto al .hero-section */
    top: 50px; 
    left: 20px; 
    z-index: 100; /* Asegura que el texto esté siempre por encima de la imagen */
    width: auto; /* Asegura que no se fuerce un ancho innecesario */
    pointer-events: none; /* Permite clickar a través del texto si hay elementos debajo */
}

.hero-section .hero-text-container h1 {
    font-size: 40px;
    font-family: 'Gotham-Book','Gotham' !important;
    font-weight: 500;
    color: #002F87; 
    margin: 0;
    line-height: 1.1;
    border-left: 2px solid #002F87; 
    padding-left: 20px; 
}



/* ------------------------------------------- */
/* --- MEDIA QUERY: TABLET/DESKTOP (> 768px) --- */
/* ------------------------------------------- */
@media (min-width: 769px) {
       
    .hero-section .hero-image-container {
        /* Usamos la imagen de desktop */
        background-image: url("../libs/images/Agente\ Virtual_Tablet.jpg");
        
        /* CORRECCIÓN CLAVE: Usamos 'cover' para que ocupe todo el ancho, pero la ajustamos abajo */
        background-size: cover; 
        
        /* Aseguramos que la chica se mantenga visible abajo */
        background-position: center bottom; 
        
        /* Establecemos una altura mínima en VISTA GRANDE, pero un MÁXIMO para evitar el desbordamiento */
        min-height: 400px; 
        /* <<<<<<<<<<<<<< CORRECCIÓN CLAVE: Limitamos la altura absoluta */
        max-height: 50vh; 
        max-width: 100%; /* Aseguramos que no se exceda el ancho */
    }

    .hero-section .hero-text-container {
        /* Reajuste del texto para desktop/tablet */
        top: 80px; 
        left: 50px; 
    }
}


/* ------------------------------------------- */
/* --- MEDIA QUERY: PANTALLAS PEQUEÑAS (MÓVILES < 768px) --- */
/* ------------------------------------------- */
@media (max-width: 768px) {
    /* Quitamos la limitación de max-width: 414px para que ocupe todo el ancho del móvil */
    #main-content-wrapper {
        max-width: 100%; 
    }
    
    .hero-text-container {
        top: 20px; 
        left: 10px; 
    }

    .hero-text-container h1 {
        padding-left: 8px; 
        font-size: 28px; 
    }

    .hero-image-container {
        min-height: 40vh; /* Altura mínima más compacta para móvil */
        max-height: 500px; 
    }
}