/*=========================================
  CHATEADORES
  INFORMACION.CSS
=========================================*/

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

body{

    background:#10162b;
    color:#ffffff;
    font-family:Arial,Helvetica,sans-serif;

}


/*=========================================
  CABECERA
=========================================*/

.cabecera{

    width:95%;
    max-width:1700px;
    height:70px;

    margin:8px auto;

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

    padding:0 30px;

    border-radius:25px;

    background:rgba(20,25,55,.75);

}

.cabecera-logo img{

    width:250px;

}

.cabecera-menu{

    display:flex;
    align-items:center;
    gap:30px;

}

.cabecera-menu a{

    color:#ffffff;
    text-decoration:none;
    font-weight:bold;
    transition:.25s;

}

.cabecera-menu a:hover{

    color:#59d4ff;

}


/*=========================================
  PAGINA INFORMACION
=========================================*/

.informacion{

    position:relative;

    min-height:calc(100vh - 86px);

    background:url("../img/fondos/mundo.webp") center center no-repeat;

    background-size:cover;

    overflow:hidden;

}


/*=========================================
  CAPA OSCURA
=========================================*/

.informacion-overlay{

    position:absolute;

    inset:0;

    background:rgba(8,12,28,.22);

    backdrop-filter:blur(1px);

}


/*=========================================
  CONTENIDO
=========================================*/

.informacion-contenido{

    position:relative;
    z-index:2;

    width:90%;
    max-width:1100px;

    margin:0 auto;
    padding-top:20px;

    text-align:center;

}

.informacion-contenido h1{

    font-family:'Allura',cursive;

    font-size:72px;

    margin-bottom:25px;

}

.informacion-contenido p{

    font-size:22px;

    line-height:1.8;

    max-width:850px;

    margin:auto;

}


/*=========================================
  BIENVENIDA
=========================================*/

.subtitulo{

    display:block;

    font-family:'Allura',cursive;

    font-size:48px;

    color:#9fdcff;

    margin-bottom:10px;

}

.informacion-contenido h1{

    font-size:78px;

    letter-spacing:3px;

    margin-bottom:20px;

    color:#ffffff;

    text-shadow:
        0 0 20px rgba(120,180,255,.45);

}

.informacion-contenido h2{

    font-size:24px;

    font-weight:normal;

    color:#9fdcff;

    letter-spacing:3px;

    margin-bottom:40px;

}

.informacion-contenido p{

    max-width:760px;

    margin:auto;

    font-size:22px;

    line-height:1.9;

    color:#d9e5ff;

}


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

.info-grid{

    position:relative;
    z-index:2;

    width:95%;
    max-width:1600px;

    margin:25px auto 80px;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

.info-card{

    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    min-height:275px;

    padding:35px 30px;

    text-align:center;

    text-decoration:none;
    color:#ffffff;

    border-radius:22px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(120,190,255,.40);

    backdrop-filter:blur(18px);

    overflow:hidden;

    transition:all .40s ease;

    box-shadow:
        0 10px 35px rgba(0,0,0,.35),
        inset 0 0 25px rgba(255,255,255,.03);

}


/*=========================================
  LINEA SUPERIOR LUMINOSA
=========================================*/

.info-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        #27b8ff,
        #6e72ff,
        #d54cff
    );

}


/*=========================================
  HALO DE LUZ
=========================================*/

.info-card::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    border-radius:50%;

    top:-170px;
    right:-120px;

    background:rgba(80,185,255,.10);

    filter:blur(45px);

    transition:.40s;

}


/*=========================================
  HOVER
=========================================*/

.info-card:hover{

    transform:translateY(-12px) scale(1.035);

    border-color:#77ddff;

    background:rgba(255,255,255,.07);

    box-shadow:
        0 0 30px rgba(80,190,255,.35),
        0 0 60px rgba(150,80,255,.25),
        0 18px 45px rgba(0,0,0,.45);

}

.info-card:hover::after{

    transform:scale(1.35);

    background:rgba(90,210,255,.18);

}


/*=========================================
  TITULO
=========================================*/

.info-card h3{

    position:relative;
    z-index:3;

    margin-bottom:28px;

    font-size:32px;

    font-weight:700;

    letter-spacing:1px;

    color:#ffffff;

    text-shadow:
        0 0 8px rgba(255,255,255,.35),
        0 0 18px rgba(120,185,255,.35);

}


/*=========================================
  TEXTO
=========================================*/

.info-card p{

    position:relative;
    z-index:3;

    max-width:240px;

    font-size:18px;

    line-height:1.75;

    color:#d7e4ff;

}
/*=========================================
  BOTÓN INICIO
=========================================*/

.inicio-info{

    position:absolute;

    left:40px;

    top:95px;

    z-index:10;

}

.boton-info{

    display:inline-block;

    padding:15px 35px;

    border-radius:40px;

    background:linear-gradient(90deg,#25b8ff,#7569ff,#d04cff);

    color:#fff;

    text-decoration:none;

    font-size:18px;

    font-weight:bold;

    letter-spacing:.5px;

    transition:.30s ease;

    box-shadow:0 0 18px rgba(80,180,255,.35);

}

.boton-info:hover{

    transform:translateY(-3px) scale(1.04);

    box-shadow:
        0 0 25px rgba(90,210,255,.80),
        0 0 45px rgba(180,90,255,.50);

}

.informacion-marca {
    width:min(720px,86vw);
    margin:0 auto 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.informacion-marca img:first-child {
    display:block;
    width:100%;
    height:auto;
}

.informacion-marca img:last-child {
    display:block;
    width:72%;
    height:auto;
    margin-top:4px;
}

/* Vista compacta: escudo, presentación y tarjetas visibles en una captura. */
.informacion-contenido {
    padding-top:10px;
}

.informacion-marca {
    width:min(560px,72vw);
    margin-bottom:4px;
}

.informacion-marca img:last-child {
    width:68%;
    margin-top:0;
}

.informacion-contenido h2 {
    margin:4px 0 8px;
    font-size:20px;
    letter-spacing:2px;
}

.informacion-contenido p {
    max-width:780px;
    font-size:17px;
    line-height:1.4;
}

.info-grid {
    width:94%;
    max-width:1380px;
    margin:14px auto 24px;
    gap:16px;
}

.info-card {
    min-height:160px;
    padding:22px 18px;
    border-radius:18px;
}

.info-card h3 {
    margin-bottom:8px;
    font-size:24px;
}

.info-card p {
    font-size:16px;
    line-height:1.4;
}