/*=========================
        GENERAL
==========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
    scroll-behavior:smooth;
}

body{
    background:#eef7ff;
    color:#333;
    line-height:1.7;
}

/*=========================
      ENCABEZADO
==========================*/

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:70px;
    background:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 35px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    z-index:1000;
}

.logo{
    display:flex;
    align-items:center;
    text-decoration:none;
    color: #333;
    font-size:20px;
    font-weight:bold;
}

.logo img{
    width:45px;
    margin-right:12px;
}

.menu-superior{
    display:flex;
    gap:25px;
}

.menu-superior a{
    text-decoration:none;
    color: #333;
    transition:.3s;
    font-weight:500;
}

.menu-superior a:hover{
    color:#2196F3;
}

/*=========================
     MENU DEL PROYECTO (VERTICAL FLOTANTE)
==========================*/

.menu-proyecto{

    position:fixed;
    top:50%;
    right:20px;
    transform:translateY(-50%);

    background:#2196F3;

    display:flex;
    flex-direction:column;

    gap:12px;

    padding:20px 16px;

    border-radius:16px;

    box-shadow:0 12px 30px rgba(0,0,0,.25);

    max-height:80vh;
    overflow-y:auto;

    z-index:999;

}

.menu-proyecto a{

    color:white;
    text-decoration:none;
    font-size:13px;
    white-space:nowrap;
    transition:.3s;

}

.menu-proyecto a:hover{

    color:#ffe082;
    padding-left:5px;

}

/* Scrollbar interno del menú (opcional) */
.menu-proyecto::-webkit-scrollbar{
    width:5px;
}
.menu-proyecto::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.5);
    border-radius:50px;
}

/*=========================
        PORTADA
==========================*/

.hero{

    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:50px;

    padding:110px 8% 60px;

    background:linear-gradient(135deg,#eef7ff,#dbeeff);

}

.hero-texto{

    flex:1;
    min-width:300px;

}


   .hero-texto h1{

    font-family:'Great Vibes', cursive;
    font-weight:400;
    font-style:normal;

    font-size:65px;
    line-height:1.3;
    color:#0f172a;
    margin-bottom:18px;

}


.libertinus-serif-regular {
  font-family: "Libertinus Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.libertinus-serif-semibold {
  font-family: "Libertinus Serif", serif;
  font-weight: 600;
  font-style: normal;
}

.libertinus-serif-bold {
  font-family: "Libertinus Serif", serif;
  font-weight: 700;
  font-style: normal;
}

.libertinus-serif-regular-italic {
  font-family: "Libertinus Serif", serif;
  font-weight: 400;
  font-style: italic;
}

.libertinus-serif-semibold-italic {
  font-family: "Libertinus Serif", serif;
  font-weight: 600;
  font-style: italic;
}

.libertinus-serif-bold-italic {
  font-family: "Libertinus Serif", serif;
  font-weight: 700;
  font-style: italic;
}


.hero-texto .subtitulo{

    font-size:28px;
    color:#1984dc;
    font-weight:90;
    margin-bottom:20px;

}

.hero-texto p{

    font-size:16px;
    color:#555;
    max-width:520px;
    margin-bottom:30px;
    text-align:justify;

}

.hero-imagen{

    flex:1;
    min-width:300px;
    display:flex;
    justify-content:center;

}

.hero-imagen img{

    width:100%;
    max-width:480px;
    border-radius:24px;
    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.boton{

    display:inline-block;

    padding:15px 40px;

    background:linear-gradient(135deg, #42a5f5, #1565c0);

    color:white;

    text-decoration:none;

    border-radius:50px;

    font-weight:bold;

    transition:.3s;

    box-shadow:0 8px 20px rgba(33,150,243,.35);

}

.boton:hover{

    transform:scale(1.05);
    background:linear-gradient(135deg, #64b5f6, #1976d2);
    box-shadow:0 10px 25px rgba(33,150,243,.5);

}

/*=========================
     SECCIONES
==========================*/


section{

    width: 85%;

}

.contenedor{

    padding:90px 10%;

}

.contenedor h2{

    text-align:center;

    color:#2196F3;

    margin-bottom:35px;

    font-size:40px;

}

.contenedor p{

    text-align:justify;

    margin-bottom:18px;

    font-size:18px;

}

/*=========================
      TARJETAS
==========================*/

.cards{

    padding:90px 8%;

    background:white;

}

.cards h2{

    text-align:center;

    color:#2196F3;

    font-size:40px;

    margin-bottom:50px;

}

.grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}

.card{

    background:white;

    border-radius:18px;

    padding:35px;

    text-align:center;

    box-shadow:0 12px 25px rgba(0,0,0,.08);

    transition:.4s;

}

.card:hover{

    transform:translateY(-10px);

}

.card h3{

    color:#2196F3;

    margin-bottom:15px;

    font-size:28px;

}

.card p{

    text-align:justify;

}

/*=========================
     METODOLOGIA
==========================*/

#metodologia{

    background:#f5fbff;

    padding:90px 10%;

}

.metodo{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:60px;

    flex-wrap:wrap;

}

.metodo div{

    flex:1;

    min-width:320px;

}

.metodo img{

    width:420px;

    border-radius:20px;

    box-shadow:0 20px 35px rgba(0,0,0,.2);

}

/*=========================
      RESULTADOS
==========================*/

#resultados{

    background:#2196F3;

    color:white;

    text-align:center;

    padding:90px;

}

#resultados h2{

    color:white;

    margin-bottom:40px;

}

.estadisticas{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:50px;

}

.estadisticas div{

    background:white;

    color:#2196F3;

    width:220px;

    border-radius:18px;

    padding:30px;

    box-shadow:0 15px 30px rgba(0,0,0,.2);

}

.estadisticas h1{

    font-size:60px;

}

/*=========================
      LISTAS
==========================*/

ul{

    margin-top:20px;

    margin-left:25px;

}

li{

    margin-bottom:15px;

    font-size:18px;

}

/*=========================
      EVIDENCIAS
==========================*/

.evidencias {
    width:100%;
    height:260px;
    object-fit:contain;
    background:#f5fbff;
    border-radius:15px;
    margin-bottom:18px;
    padding:10px;
}

/*=========================
      CONTACTO
==========================*/

#contacto{

    background:#0f172a;

    color:white;

    text-align:center;

    padding:70px;

}

#contacto h2{

    margin-bottom:25px;

    color:white;

}

/*=========================
     TITULOS
==========================*/

h2,h3{

    font-weight:700;

}


/*=========================
      TABLAS
==========================*/

table{

    width:100%;

    border-collapse:collapse;

    margin-top:25px;

}

table th{

    background:#2196F3;

    color:white;

    padding:15px;

}

table td{

    border:1px solid #ddd;

    padding:12px;

}

/*=========================
     SCROLL
==========================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#2196F3;

    border-radius:50px;

}

/*=========================
      RESPONSIVE
==========================*/

@media(max-width:900px){
    

header{

    flex-direction:column;

    height:auto;

    padding:15px;

}

.menu-superior{

    margin-top:15px;

    flex-wrap:wrap;

    justify-content:center;

}

.menu-proyecto{

    top:120px;

}

.hero{
    flex-direction:column;
    text-align:center;
    padding:130px 6% 50px;
}

.hero-texto p{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.hero-texto h1{
    font-size:30px;
}

.hero-texto .subtitulo{
    font-size:17px;
}

.contenedor{

    padding:70px 7%;

}

.metodo img{

    width:100%;

}

.estadisticas div{

    width:180px;

}

}

@media(max-width:600px){

.hero{

    padding:30px;

}

.hero h1{

    font-size:30px;

}

.hero p{

    font-size:18px;

}

.contenedor h2{

    font-size:30px;

}

.cards h2{

    font-size:30px;

}

}
/*=========================
      FIGURAS
==========================*/

.figura{

    margin:40px auto;
    max-width:650px;
    text-align:center;

}

.figura-titulo{

    font-weight:700;
    color:#0f172a;
    margin-bottom:15px;
    font-size:17px;

}

.figura img{

    width:100%;
    border-radius:15px;
    box-shadow:0 12px 25px rgba(0,0,0,.15);

}

.figura figcaption{

    margin-top:12px;
    font-size:14px;
    color:#666;
    font-style:italic;
    text-align:justify;

}
.resultados-contenido{

    background:white;
    color:#333;
    border-radius:24px;
    padding:60px 8%;
    margin-top:60px;
    text-align:justify;

}

.resultados-contenido p{

    text-align:justify;
    font-size:18px;
    margin-bottom:0;

}

.resultados-contenido .figura-titulo{

    color:#0f172a;

}

.resultados-contenido .figura figcaption{

    color:#666;

}
/*=========================
      REFERENCIAS (CARDS)
==========================*/

#referencias .card{

    word-break:break-word;
    overflow-wrap:break-word;

    display:flex;
    align-items:center;

}


.card img{
width: 90%;



}

#referencias .card p{

    margin:0;
    font-size:15px;

}

.card-ref{

    background:#7dd4d4;
    border:1px solid #50759e;

}

.card-ref p{

    color:#020202;

}
#evidencias .card a {
    display: block;
    text-decoration: none;
}

#evidencias .card a img {
    cursor: pointer;
    transition: transform .3s;
}
/*=========================
   FILA TEXTO + IMAGEN
==========================*/

.fila-texto-imagen{

    display:flex;
    align-items:flex-start;
    gap:40px;
    flex-wrap:wrap;

}

.fila-texto-imagen .texto-antecedentes{

    flex:1 1 60%;
    min-width:300px;

}

.fila-texto-imagen .texto-antecedentes p{

    text-align:justify;
    margin-bottom:0;

}

.fila-texto-imagen .hero-imagen{

    flex:1 1 35%;
    min-width:220px;
    max-width:320px;
    justify-content:flex-start;

}

.fila-texto-imagen .hero-imagen img{

    width:100%;
    max-width:320px;

}



/*=========================
   CURSOR PERSONALIZADO
==========================*/

body {
    cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='14' fill='orange' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 16 16, auto;
}
/*=========================
   FONDO FLOTANTE (BALONES Y NÚMEROS)
==========================*/

#fondo-flotante{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}

.item-flotante{
    position:absolute;
    bottom:-60px;
    font-size:28px;
    opacity:.35;
    color:#2196F3;
    animation:flotar linear infinite;
    user-select:none;
}

@keyframes flotar{
    0%{
        transform:translateY(0) rotate(0deg);
        opacity:0;
    }
    10%{
        opacity:.35;
    }
    90%{
        opacity:.35;
    }
    100%{
        transform:translateY(-110vh) rotate(360deg);
        opacity:0;
    }
}
header, section{
    position:relative;
    z-index:1;
}
/*=========================
      CHATBOT ROBMATH
==========================*/

#chatbot-icono{
    position:fixed;
    bottom:25px;
    left:25px;
    width:85px;
    height:100px;
    border-radius:50%;
    background:white;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:1001;
    overflow:hidden;
    transition:.3s;
}

#chatbot-icono:hover{
    transform:scale(1.08);
}

#chatbot-icono img{
    width:100%;
    height:100%;
    object-fit:cover;
}

#chatbot-ventana{
    position:fixed;
    bottom: 135px;
    left:25px;
    width:320px;
    max-width:90vw;
    height:420px;
    background:white;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.3);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    z-index:1001;
}

#chatbot-ventana.oculto{
    display:none;
}

#chatbot-header{
    background:#2196F3;
    color:white;
    padding:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:bold;
}

#chatbot-cerrar{
    background:none;
    border:none;
    color:white;
    font-size:18px;
    cursor:pointer;
}

#chatbot-mensajes{
    flex:1;
    padding:15px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:#f5fbff;
}

.msj{
    max-width:80%;
    padding:10px 14px;
    border-radius:14px;
    font-size:14px;
    line-height:1.4;
}

.msj.bot{
    background:#e3f2fd;
    color:#0f172a;
    align-self:flex-start;
    border-bottom-left-radius:2px;
}

.msj.usuario{
    background:#2196F3;
    color:white;
    align-self:flex-end;
    border-bottom-right-radius:2px;
}

#chatbot-input-area{
    display:flex;
    border-top:1px solid #ddd;
    padding:8px;
}

#chatbot-input{
    flex:1;
    border:none;
    outline:none;
    padding:10px;
    font-size:14px;
    border-radius:20px;
    background:#f0f0f0;
}

#chatbot-enviar{
    background:#2196F3;
    color:white;
    border:none;
    border-radius:50%;
    width:38px;
    height:38px;
    margin-left:8px;
    cursor:pointer;
}

/* =========================================
   ROMPECABEZAS - ESQUINA INFERIOR DERECHA
========================================= */

.rompecabezas-flotante {
    position: fixed;

    /* esquina derecha */
    right: 10px;

    /* abajo de todo */
    bottom: 5px;

    width: 105px;
    height: 105px;

    z-index: 9999;

    display: block;
    cursor: pointer;
    text-decoration: none;

    animation: flotarRompecabezas 3s ease-in-out infinite;
}

.rompecabezas-flotante img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

    filter: drop-shadow(
        0 5px 8px rgba(0,0,0,0.20)
    );

    transition: transform 0.2s ease;
}

.rompecabezas-flotante:hover img {
    transform: scale(1.12) rotate(5deg);
}

@keyframes flotarRompecabezas {

    0%, 100% {
        transform: translateY(0) rotate(-5deg);
    }

    50% {
        transform: translateY(-8px) rotate(5deg);
    }

}
/* ===== BASE RESPONSIVA ===== */
img{ max-width:100%; height:auto; }
section{ width:100%; }
p{ hyphens:auto; }
.hero-imagen{ min-width:0; }
.card{ padding:clamp(20px,4vw,35px); }
.grid{ grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); }
.hero-texto h1{ font-size:clamp(34px,6vw,65px); }
.hero-texto .subtitulo{ font-size:clamp(17px,2.5vw,28px); font-weight:600; }
#resultados{ padding:clamp(40px,7vw,90px) 5%; }
.resultados-contenido{ padding:clamp(25px,5vw,60px) 6%; }
#contacto{ padding:clamp(40px,6vw,70px) 5%; }
.contenedor{ padding:clamp(50px,7vw,90px) 8%; }

/* Descripciones justificadas */
.contenedor p,
.card p,
.resultados-contenido p,
.figura figcaption,
.fila-texto-imagen .texto-antecedentes p,
.metodo p{ text-align:justify; }

.fila-texto-imagen .hero-imagen img{ width:100%; max-width:320px; }

/* Metodología */
.metodo{ display:block; }
.metodo img{ width:100%; max-width:420px; display:block; margin:25px auto; }

/* Pantallas grandes: espacio para el menú de la derecha */
@media(min-width:1101px){
  body{ padding-right:200px; }
}

/* Tablet y celular */
@media(max-width:1100px){
  .menu-proyecto{
    top:auto; bottom:0; left:0; right:0;
    transform:none;
    flex-direction:row;
    border-radius:0;
    max-height:none;
    overflow-x:auto; overflow-y:hidden;
    padding:12px 16px;
    gap:20px;
  }
  .menu-proyecto a{ flex-shrink:0; }
  #chatbot-icono{ bottom:70px; width:65px; height:65px; }
  #chatbot-ventana{ bottom:145px; }
  .rompecabezas-flotante{ bottom:70px; width:80px; height:80px; }
  body{ padding-bottom:60px; }
}

@media(max-width:900px){
  header{ position:relative; }
  .hero{ padding:40px 6% 50px; min-height:auto; }
  .logo{ font-size:16px; }
}
.contenedor{ text-align:justify; }
.contenedor h2{ text-align:center; }
#objetivos .card{ padding:20px; }
#objetivos .card .hero-imagen{ min-width:0; }
#objetivos .card .hero-imagen img{
    width:100%;
    max-width:none;
}
#objetivos .grid{
    grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}