:root {
  --azul: #07152E;
  --azul2: #0F172A;
  --dorado: #F59E0B;
  --blanco: #FFFFFF;
  --gris: #F8FAFC;
}

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

body {
  font-family: 'Inter', sans-serif;
  background: var(--gris);
  color: var(--azul);
}

.header {
  background: rgba(7, 21, 46, 0.97);
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;

  position: sticky;
  top: 0;
  z-index: 9999;

  backdrop-filter: blur(10px);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo img{
    height:70px;
    width:auto;
    border-radius:8px;
}

.logo-icon {
  font-size: 42px;
}

.logo h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  letter-spacing: 2px;
}

.logo span {
  color: var(--dorado);
  letter-spacing: 5px;
  font-weight: bold;
}

.menu {
  display: flex;
  gap: 30px;
}

.menu a {
  color: white;
  text-decoration: none;
  font-weight: 600;
}

.menu a:hover {
  color: var(--dorado);
}

.btn-cotizar {
  position: absolute;
  right: 50px;

  background: #F59E0B;
  color: #07152E;
  padding: 15px 30px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
}

.hero {
  width: 100%;
  background: #07152E;
  overflow: hidden;
}

.hero img {
  width:100%;
  height:auto;
  display:block;
}



.soluciones {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 25px;
  padding: 40px 8%;
  background: white;
}

.card {
  background: white;
  padding: 30px 20px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
  transition: .3s;
}

.card:hover {
  transform: translateY(-10px);
}

.card span {
  font-size: 40px;
}

.card h3 {
  margin: 15px 0 10px;
}

.card p {
  font-size: 14px;
  line-height: 1.5;
}

.catalogo {
  background: var(--azul);
  color: white;
  padding: 50px 8%;
}

.subtitulo {
  color: var(--dorado);
  font-weight: bold;
}

.catalogo h2 {
  font-size: 36px;
  margin-bottom: 30px;
}

.catalogo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px;
}

.book {
  height: 230px;
  border-radius: 10px;
  padding: 25px;
  font-size: 24px;
  font-weight: 800;
  color: white;
  display: flex;
  align-items: end;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: .3s;
}

.book:hover {
  transform: scale(1.06);
}

.azul { background: linear-gradient(135deg, #004AAD, #07152E); }
.verde { background: linear-gradient(135deg, #15803D, #07152E); }
.morado { background: linear-gradient(135deg, #7E22CE, #07152E); }
.cian { background: linear-gradient(135deg, #0891B2, #07152E); }
.naranja { background: linear-gradient(135deg, #EA580C, #07152E); }
.rojo { background: linear-gradient(135deg, #DC2626, #07152E); }

.impacto{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
    padding:80px 8%;
    background:white;
    text-align:center;
}

.impacto h2{
    font-size:60px;
    color:#F59E0B;
    margin-bottom:10px;
}

.impacto p{
    font-size:22px;
    color:#07152E;
}

.impacto h2 {
  color: var(--dorado);
  font-size: 42px;
}

.contacto {
  padding: 60px 8%;
  background: var(--gris);
}

.contacto h2 {
  font-size: 36px;
  margin-bottom: 10px;
}

.contacto form {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.contacto input,
.contacto textarea {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  font-family: 'Inter', sans-serif;
}

.contacto textarea {
  grid-column: span 2;
  height: 130px;
}

.contacto button {
  grid-column: span 2;
  background: var(--dorado);
  color: var(--azul);
  padding: 16px;
  border: none;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

footer {
  background: var(--azul);
  color: white;
  padding: 40px 8%;
}

footer h2 {
  color: white;
}

.whatsapp {
  position: fixed;
  right: 25px;
  bottom: 25px;
  background: #25D366;
  color: white;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 30px;
}

/* Responsive para celular */
@media (max-width: 900px) {
  .header {
    height: auto;
    padding: 20px;
    flex-direction: column;
    gap: 20px;
  }

  .menu {
    flex-wrap: wrap;
    justify-content: center;
  }

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

  .hero-text,
  .hero-img {
    width: 100%;
  }

  .hero h1 {
    font-size: 42px;
  }

  .hero-botones {
    justify-content: center;
    flex-direction: column;
  }

  .soluciones,
  .catalogo-grid,
  .impacto {
    grid-template-columns: 1fr;
  }

  .contacto form {
    grid-template-columns: 1fr;
  }

  .contacto textarea,
  .contacto button {
    grid-column: span 1;
  }
}

.logo{
    position:absolute;
    left:30px;
}

.btn-cotizar{
    position:absolute;
    right:30px;
}

.hero-marca{
    margin-bottom:30px;
}

.hero-marca img{
    width:220px;
    height:auto;
    margin-bottom:10px;
}

.hero-marca p{
    color:#F59E0B;
    font-size:22px !important;
    font-weight:600;
    margin-top:15px;
    letter-spacing:.5px;
    font-style:italic;
    max-width:700px;
}

/* HERO NUEVO */

.hero{
    position:relative;
    width:100%;
}

.hero img{
    width:100%;
    display:block;
}

.hero-overlay{
    position:absolute;
    left:60px;
    top:40px;
    max-width:450px;
}

.hero-logo-grande img{
    width:140px;
    height:auto;
    margin-bottom:15px;
}

.hero-frase{
    color:#F59E0B;
    font-size:18px;
    font-style:italic;
    font-weight:700;
    margin-bottom:35px;
    max-width:700px;
}

.hero-overlay h1{
    color:white;
    font-size:50px;
    line-height:1.1;
    margin-bottom:25px;
}

.hero-descripcion{
    color:#FFFFFF !important;
    font-size:18px;
    line-height:1.6;
    margin-bottom:30px;
}

.hero-botones{
    display:flex;
    gap:20px;
}

.btn-amarillo{
    background:#F59E0B;
    color:#07152E !important;
    padding:18px 30px;
    border-radius:10px;
    text-decoration:none;
    font-weight:800;
    display:inline-block;
}

.btn-borde{
    border:2px solid #FFFFFF;
    color:#FFFFFF !important;
    padding:18px 30px;
    border-radius:10px;
    text-decoration:none;
    font-weight:800;
    display:inline-block;
}

.btn-borde:hover{
    background:white;
    color:#07152E;
}

/* PRODUCTOS DESTACADOS */

.productos-destacados{
    padding:80px 8%;
    background:#F8FAFC;
}

.productos-destacados .subtitulo{
    color:#F59E0B;
    font-weight:700;
    margin-bottom:10px;
}

.productos-destacados h2{
    font-size:42px;
    color:#07152E;
    margin-bottom:50px;
}

.productos-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
    margin-top:40px;
}

.producto{
    background:#FFFFFF;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.producto:hover{
    transform:translateY(-8px);
}

.producto img{
    width:100%;
    height:420px;
    object-fit:cover;
    display:block;
}

.producto h3{
    padding:20px;
    text-align:center;
    color:#07152E;
    font-size:20px;
}

@media(max-width:1000px){

.productos-grid{
    grid-template-columns:1fr;
}

}

/* REDES EDUCATIVAS */

.redes-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
    margin-top:50px;
}

.red-card{
    text-align:center;
}

.red-card img{
    width:220px;
    height:220px;
    border-radius:50%;
    object-fit:cover;
    transition:.4s;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.red-card img:hover{
    transform:scale(1.08);
    box-shadow:0 0 30px rgba(245,158,11,.7);
}

.red-card h3{
    margin-top:25px;
    color:#F59E0B;
    font-size:30px;
    font-family:'Poppins',sans-serif;
}

.btn-red{
    display:inline-block;
    margin-top:20px;
    background:#F59E0B;
    color:#07152E;
    padding:12px 25px;
    border-radius:8px;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.btn-red:hover{
    transform:translateY(-3px);
}

@media(max-width:1000px){

.redes-grid{
    grid-template-columns:1fr;
}

}

/* DETALLE RED APRENDER */

.detalle-red{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;

    padding:80px 8%;
    background:#F8FAFC;
}

.detalle-texto{
    flex:1;
}

.detalle-texto h2{
    font-size:60px;
    color:#F59E0B;
    margin-bottom:20px;
}

.intro-red{
    font-size:28px;
    font-weight:700;
    color:#07152E;
    margin-bottom:25px;
}

.detalle-texto p{
    font-size:20px;
    line-height:1.8;
    margin-bottom:25px;
}

.detalle-texto h3{
    margin-bottom:15px;
    color:#07152E;
}

.detalle-texto ul{
    padding-left:25px;
    margin-bottom:25px;
}

.detalle-texto li{
    font-size:20px;
    margin-bottom:10px;
}

.detalle-imagen{
    width:400px;
}

.detalle-imagen img{
    width:100%;
    border-radius:15px;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

/* PAGINAS DE REDES */

.hero-red{
    background:#07152E;
    color:white;
    padding:80px 8%;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:80px;
}

.hero-red-texto{
    flex:1;
}

.red-subtitulo{
    color:#F59E0B;
    font-weight:700;
    margin-bottom:15px;
}

.hero-red h1{
    font-size:72px;
    margin-bottom:20px;
}

.hero-red p{
    font-size:22px;
    line-height:1.6;
}

.hero-red-imagen img{
    width:320px;
    border-radius:50%;
}

.contenido-red,
.productos-red{
    padding:80px 8%;
}

.contenido-red h2,
.productos-red h2{
    font-size:42px;
    margin-bottom:25px;
}

.contenido-red p{
    font-size:20px;
    line-height:1.8;
    margin-bottom:20px;
}

.productos-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.producto-card{
    background:white;
    padding:25px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    text-align:center;
}

.productos-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
    margin-top:40px;
}

.producto-card img{
    width:100%;
    height:auto;
    max-height:280px;
    object-fit:contain;
    display:block;
    margin:auto;
    margin-bottom:20px;
}

.producto-card h3{
    font-size:28px;
    color:#07152E;
    margin-bottom:10px;
}

.producto-card p{
    font-size:18px;
    color:#475569;
    line-height:1.6;
}

.producto-card:hover{
    transform:translateY(-8px);
    transition:.3s;
}

@media(max-width:900px){

.productos-grid{
    grid-template-columns:1fr;
}

}

/* CARRUSEL RED AVANZAR */

.slider{
    width:100%;
    overflow:hidden;
    margin-top:40px;
}

.slide-track{
    display:flex;
    width:max-content;
    animation:scroll 45s linear infinite;
}

.slide-track img{
    width:220px;
    height:300px;
    object-fit:contain;
    background:white;
    padding:10px;
    margin:0 15px;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    flex-shrink:0;
}

.slide-track img:hover{
    transform:scale(1.08);
    transition:.3s;
}

@keyframes scroll{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(calc(-180px * 11));
    }

}

.contenido-formar{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:50px;
    align-items:center;
}

.formar-imagen img{
    width:100%;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.formar-texto p{
    font-size:20px;
    line-height:1.8;
}

@media(max-width:900px){

.contenido-formar{
    grid-template-columns:1fr;
}

}

.card{
    text-decoration:none;
    color:inherit;
}