/* =========================
   INFO
========================= */

.about-info{
  position:relative;
  z-index:5;
  padding:80px 60px;
  background:#fff;
}

.tabs{
  display:flex;
  gap:15px;
  margin-bottom:40px;
}

.tabs span{
  padding:10px 18px;
  border-radius:20px;
  background:#f1f6fc;
  font-size:14px;
}

.tabs .active{
  background:#cfe9ff;
}

.info-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center;
}

.info-text h2{
  font-size:32px;
  margin-bottom:20px;
}

.info-text p{
  color:#5a6c80;
  margin-bottom:30px;
}

.outline{
  background:transparent;
  border:1px solid #9fd8ff;
  padding:12px 26px;
  border-radius:25px;
  color:#1f4f82;
}

.info-image img{
  width:100%;
  border-radius:30px;
}



/* =========================
   STATS
========================= */

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
  padding:0 60px 80px;
}

.stat-card{
  background:#f7fbff;
  padding:30px;
  border-radius:25px;
}

.stat-card.image{
  padding:0;
  overflow:hidden;
}

/* CONTENEDORES DE IMAGEN */
.stat-card.image,
.info-image{
  overflow:hidden;
  border-radius:30px;
  position:relative;
}

/* IMAGENES */
.stat-card.image img,
.info-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease, filter .5s ease;
}

/* HOVER */
.stat-card.image:hover img,
.info-image:hover img{
  transform:scale(1.1);
  filter:brightness(1.2);
}

.stat-card.image::after,
.info-image::after{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:60%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  transition:.6s;
}

.stat-card.image:hover::after,
.info-image:hover::after{
  left:120%;
}

.stat-card h3{
  font-size:36px;
  color:#1f4f82;
}

.stat-card span{
  font-size:14px;
  color:#5a6c80;
}

.highlight{
  background:#cfe9ff;
}

/* =========================
   TABLET
========================= */

@media (max-width:1024px){

  .about-header{
    padding:25px 30px;
  }

  .about-hero-content{
    left:40px;
    bottom:60px;
  }

  .about-hero-content h1{
    font-size:60px;
  }

  .info-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .stats{
    grid-template-columns:repeat(2,1fr);
  }

}


/* =========================
   MOBILE
========================= */

@media (max-width:768px){

  /* HERO */

  .about-hero,
  .about-hero-2{
    height:80vh;
  }

  .about-hero-content{
    left:25px;
    right:25px;
    bottom:50px;
    max-width:100%;
  }

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

  .about-hero-content p{
    font-size:14px;
  }

  /* HEADER */

  .about-header{
    justify-content:space-between;
    padding:20px;
  }

  nav{
    position:static;
    transform:none;
  }

  .nav-links{
    gap:18px;
  }

  nav a{
    font-size:14px;
  }

  .btn-login{
    padding:8px 16px;
    font-size:13px;
  }

  /* INFO */

  .about-info{
    padding:60px 25px;
  }

  .info-text h2{
    font-size:26px;
  }

  .tabs{
    flex-wrap:wrap;
  }

  /* STATS */

  .stats{
    grid-template-columns:1fr;
    padding:0 25px 60px;
  }

  .stat-card{
    padding:25px;
  }

}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width:480px){

  .about-hero-content h1{
    font-size:34px;
  }

  .tag{
    font-size:12px;
  }

  .nav-links{
    gap:12px;
  }

  nav a{
    font-size:13px;
  }

}

/* RIGIDEZ PARA LA IMAGEN ÚNICA */
.full-height-image {
    padding: 0 !important;
    position: relative;
    overflow: hidden;
}

.full-height-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que la imagen se estire */
    display: block;
    transition: transform 0.6s ease;
}

/* EFECTOS PARA LA IMAGEN GRANDE */
.full-height-image:hover img {
    transform: scale(1.1);
}

.full-height-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-25deg);
    transition: 0.7s;
}

.full-height-image:hover::after {
    left: 150%;
}

/* ESTILO PARA LA TARJETA DE TEXTOS DIVIDIDOS */
.text-box {
    display: flex;
    flex-direction: column;
    padding: 0 !important; /* Para que los bloques de texto toquen los bordes si es necesario */
}

.text-box .dual-item {
    flex: 1; /* Divide la tarjeta 50/50 exacto */
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.text-box .item-1 {
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Línea divisora sutil */
}

.text-box h3 {
    font-size: 20px;
    color: #1f4f82;
    margin-bottom: 10px;
}

.text-box p {
    font-size: 14px;
    color: #5a6c80;
    line-height: 1.5;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .text-box {
        height: 350px; /* Altura mínima en móvil para que no se vea aplastado */
    }
}