/* Ocultar la imagen de 'about-image' en pantallas pequeñas (celular) */
/* Sección Nosotros: ajustes mobile */
@media (max-width: 767px) {
  .about-circle-img {
    width: 160px;
    height: 160px;
  }
  .principle-item {
    grid-template-columns: 85px 1fr;
  }
  .principle-tag {
    font-size: 0.7rem;
  }
}
/* ====================================
   RESPONSIVE DESIGN - MEDIA QUERIES
   ====================================
   Este archivo contiene todos los media queries del sitio web.
   Cada sección está comentada y explicada para facilitar su edición.
   Puedes modificar los valores de los breakpoints y las reglas según tus necesidades.
*/

/* Tablets y pantallas medianas (768px+) */
@media (min-width: 768px) {
  .capacity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .capacity-title {
    font-size: 2.5rem;
  }
  .capacity-metric {
    font-size: 0.98rem;
    padding: 0.62rem 0.8rem 0.58rem;
    border-left-width: 3px;
  }
  /* Servicios: grid de 2 columnas */
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
  /* Títulos más grandes */
  .services-title {
    font-size: 2.5rem;
  }
  .hero-title {
    font-size: 3rem;
  }
  /* Header más espacioso */
  .header {
    padding: var(--spacing-xl) var(--spacing-base);
  }
  /* Sección Nosotros: títulos y descripción */
  /* Sección Nosotros: tablet */
  .about-title {
    font-size: 2.75rem;
  }
  .principle-item {
    grid-template-columns: 120px 1fr;
  }
  /* Footer en fila */
  .footer-content {
    flex-direction: row;
  }
  
}

/* Escritorio y pantallas grandes (1024px+) */
@media (min-width: 1024px) {
  .capacity-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
  .capacity-card {
    height: 100%;
  }
  .capacity-title {
    font-size: 2.5rem;
  }
  .capacity-description {
    font-size: 1.1rem;
  }
  .capacity-metric {
    font-size: 1.02rem;
    padding: 0.72rem 0.92rem 0.68rem;
    border-left-width: 4px;
  }
  /* Navegación visible */
  .nav {
    display: flex;
  }
  .menu-toggle {
    display: none;
  }
  /* Servicios: grid de 3 columnas */
  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
  .service-title-overlay {
    font-size: 0.95rem;
  }
  .hero-title {
    font-size: 4rem;
  }
  .header {
    padding: var(--spacing-xl) var(--spacing-large);
  }
  /* Sección Nosotros: grid de 2 columnas */
  /* Sección Nosotros: layout horizontal */
  .about-title {
    font-size: 3rem;
  }
  .about-principles-layout {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }
  .about-circle-img {
    width: 260px;
    height: 260px;
  }
  .principle-item {
    grid-template-columns: 130px 1fr;
  }
  .principle-desc {
    font-size: 0.95rem;
  }
}

/* Pantallas extra grandes (1280px+) */
@media (min-width: 1280px) {
  .hero-title {
    font-size: 3.5rem;
  }
  .about-title {
    font-size: 3rem;
  }
  .why-us-title {
    font-size: 2.5rem;
  }
  .why-us-card {
    max-width: 360px;
  }
}

/* Hero estilo portada (index) */
@media (max-width: 1180px) {
  .landing-corporate .hero-indicators {
    left: 1rem;
  }
}

@media (max-width: 1023px) {
  .landing-corporate .header-container {
    min-height: 72px;
  }

  .landing-corporate .nav.nav-open {
    background: #ffffff;
    border-top: 1px solid rgba(40, 106, 77, 0.2);
  }

  .landing-corporate .hero {
    min-height: 100svh;
    height: 100svh;
    padding-top: 122px;
    padding-bottom: 82px;
  }

  .landing-corporate .hero-title {
    font-size: 2.55rem;
    max-width: 560px;
  }

  .landing-corporate .hero-description {
    font-size: 1.2rem;
  }

  .landing-corporate .hero-content {
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .service-title-overlay {
    left: 0.7rem;
    right: 0.7rem;
    bottom: 50%;
    transform: translateY(50%);
    font-size: 0.9rem;
    padding: 0.62rem 0.78rem 0.6rem;
    border-left-width: 3px;
  }

  .service-card:hover .service-title-overlay {
    bottom: 0.7rem;
    transform: translateY(0);
  }

  .service-content p {
    font-size: 1rem;
  }

  .landing-corporate .logo-image {
    width: auto;
    height: 50px;
  }

  .landing-corporate .hero {
    min-height: 100svh;
    height: 100svh;
    padding: 108px 1rem 72px;
  }

  .landing-corporate .hero-title {
    font-size: 2.05rem;
    max-width: 100%;
  }

  .landing-corporate .hero-description {
    font-size: 1.02rem;
    max-width: 100%;
  }

  .landing-corporate .hero-content {
    margin-top: 8px;
  }

  .landing-corporate .hero .btn-secondary {
    width: 100%;
    max-width: 230px;
    text-align: center;
    padding: 0.72rem 1.3rem;
  }

  .landing-corporate .hero-indicators {
    bottom: 44px;
  }

  .landing-corporate .hero-scroll-hint {
    width: 38px;
    height: 38px;
    bottom: 32px;
  }
}