/* 🎨 Variables globales */
:root {
  --primary-blue: #003366;
  /* Azul primario */
  --primary-black: #000000;
  /* Negro primario */
  --primary-white: #ffffff;
  /* Blanco primario */
  --secondary-gray: #f4f4f4;
  /* Gris secundario para fondos */
  --card-padding: 2rem;
  /* Espaciado estándar de tarjetas */
  --border-radius: 12px;
  /* Borde redondeado estándar */
}

/* ✅ Ajuste de la caja para evitar desbordamientos */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  /* Hereda box-sizing de html */
}

/* ✅ Estilos generales */
body {
  font-family: 'Roboto', sans-serif;
  /* Fuente principal */
  line-height: 1.6;
  /* Espaciado entre líneas */
  color: var(--primary-black);
  /* Color de texto principal */
  background-color: var(--secondary-gray);
  /* Fondo general */
}

/* ✅ Estilo para subtítulos (h6) */
h6 {
  text-align: center;
  color: #6c757d;
  /* Gris para destacar */
  font-size: 1.35rem;
  /* Tamaño de fuente ajustado */
  font-weight: bold;
  /* Texto en negrita */
  font-style: normal;
  /* Sin cursiva */
  margin-top: 10px;
}

/* ✅ Estilos para el título principal */
.title-container {
  background-color: var(--primary-blue);
  /* Fondo azul */
  color: var(--primary-white);
  /* Texto en blanco */
  padding: 1rem;
  /* Espaciado interno */
  text-align: center;
  /* Centrar texto */
  width: 100%;
  /* Ocupar todo el ancho */
  margin: 0;
  /* Sin margen */
}

.title-container h1 {
  font-size: 1.8rem;
  /* Tamaño ajustado del título */
  max-width: 800px;
  /* Ancho máximo del título */
  margin: 0 auto;
  /* Centrar horizontalmente */
}

/* 📱 Responsividad del título */
@media (max-width: 768px) {
  .title-container h1 {
    font-size: 1.35rem;
    /* Ajuste para tablets */
  }
}

@media (max-width: 480px) {
  .title-container h1 {
    font-size: 1.08rem;
    /* Ajuste para móviles */
  }
}

/* ✅ Sección Hero */
.hero-section {
  background-color: var(--primary-white);
  padding: 1rem var(--card-padding);
  /* Espaciado horizontal dinámico */
  text-align: center;
  /* Centrar contenido */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  /* Separador sutil */
  margin: 0;
  /* Sin margen */
}

/* ✅ Texto dentro de la sección Hero */
.hero-text h2 {
  color: var(--primary-blue);
  /* Color azul primario */
  font-size: 2.25rem;
  /* Tamaño ajustado del título */
  margin-bottom: 1rem;
  /* Espaciado inferior */
}

/* ✅ Contenedor de características */
.features-container {
  display: flex;
  flex-wrap: wrap;
  /* Permite ajuste responsivo */
  gap: 2rem;
  /* Espaciado entre elementos */
  padding: 1rem 2rem;
  /* Espaciado general */
  max-width: 1100px;
  /* Ancho máximo del contenedor */
  margin: 0 auto;
  /* Centrado */
}

/* ✅ Configuración de la tarjeta principal */
.main-feature {
  flex: 0 0 350px;
  /* Tamaño fijo de 350px */
  height: auto;
  display: flex;
}

/* ✅ Distribución de otras características */
.regular-features {
  flex: 1;
  /* Se ajusta al espacio disponible */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 columnas iguales */
  gap: 1rem;
  /* Espaciado entre elementos */
  flex: 0 0 650px;
  /* Tamaño fijo de 650px */
  height: 600px;
  /* Altura fija */
}

/* ✅ Estilo para las tarjetas de características */
.feature-card {
  position: relative;
  background-color: var(--primary-white);
  border-radius: var(--border-radius);
  overflow: hidden;
  /* Evita que el contenido sobresalga */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Sombra ligera */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* ✅ Efecto hover en las tarjetas */
.feature-card:hover {
  transform: translateY(-5px);
  /* Elevar tarjeta al pasar el mouse */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  /* Aumentar sombra */
}

/* ✅ Contenido dentro de las tarjetas */
.feature-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Ocupar todo el ancho */
  padding: 1rem;
  /* Espaciado ajustado */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  color: var(--primary-white);
}

/* ✅ Título dentro de la tarjeta */
.feature-content h3 {
  margin-bottom: 0.5rem;
  font-size: 1rem !important;
  /* Tamaño ajustado */
}

/* ✅ Descripción oculta hasta el hover */
.feature-description {
  opacity: 0;
  /* Oculta el texto */
  transform: translateY(10px);
  /* Desplazamiento inicial */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  font-size: 0.81rem !important;
  /* Tamaño ajustado */
}

.feature-card:hover .feature-description {
  opacity: 1;
  /* Hace visible el texto */
  transform: translateY(0);
  /* Vuelve a su posición normal */
}

/* ✅ Imágenes dentro de las tarjetas */
.feature-image {
  width: 100%;
  /* Ajusta el ancho al contenedor */
  height: 100%;
  /* Ajusta la altura al contenedor */
  object-fit: cover;
  /* Evita deformaciones de imagen */
}



/* 🔹📱 Ajustes Responsive */
@media (max-width: 1024px) {
  .features-container {
    flex-direction: column;
    padding-top: 0.625rem;
    padding: 1rem;
    gap: 1.25rem;
    margin-top: 18.75px;
  }

  .main-feature {
    width: 100%;
    height: auto;
    flex: 0 0 225px;
  }

  .regular-features {
    grid-template-columns: repeat(2, 1fr);
    flex: 0 0 300px;
    height: 437.5px;
    gap: 0.75rem;
  }

  .feature-card {
    height: auto;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1875);
  }

  .feature-card.main-feature img.feature-image {
    width: 100%;
    height: auto;
  }

  .feature-content {
    padding: 2.25rem;
    text-align: center;
  }

  .feature-content h3 {
    font-size: 1.75rem !important;
    text-align: left;
  }

  .feature-description {
    font-size: 1.0625rem !important;
    text-align: left;
  }

  .title-container {
    padding: 0.75rem 1.125rem;
    text-align: center;
    margin-bottom: 0.625rem;
  }

  .title-container h1 {
    font-size: 1.375rem;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
  }

  h6 {
    font-size: 1.125rem;
    font-weight: normal;
    color: #2f2c2c;
    margin: 0.5rem 0;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 1.25rem 1.5rem;
  }

  .hero-text h2 {
    font-size: 1.875rem;
  }

  .regular-features {
    grid-template-columns: 1fr;
  }

  .feature-card {
    height: auto;
  }

  .feature-content {
    padding: 2.125rem;
  }

  .feature-content h3 {
    font-size: 1.5625rem !important;
  }

  .feature-description {
    font-size: 0.9375rem !important;
  }
}

@media (max-width: 480px) {
  .hero-text h2 {
    font-size: 0.2rem;
  }

  .features-container {
    padding: 0.6rem;
    gap: 0.7rem;
    margin-top: 10px;
    padding-top: 0px;
  }

  .main-feature {
    flex: 0 0 140px;
    height: auto;
    display: flex;
  }

  .regular-features {
    flex: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    flex: 0 0 200px;
    height: 300px;
  }

  .feature-card {
    height: auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }

  .feature-card.main-feature img.feature-image {
    width: 100%;
    height: auto;
  }

  .feature-content {
    padding: .5rem;
    text-align: center;
  }

  .feature-content h3 {
    font-size: 0.6rem !important;
    text-align: left;
  }

  .feature-description {
    font-size: 0.5rem !important;
    text-align: left;
  }

  .title-container {
    padding: 0.3rem 0.5rem;
    text-align: center;
    margin-bottom: 0.3rem;
  }

  .title-container h1 {
    font-size: .7rem;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
  }

  h6 {
    font-size: 0.7rem;
    font-weight: normal;
    color: #2f2c2c;
    margin: 0.2rem 0;
  }
}