/* Home page sections - Minimalista Blanco y Rojo
   UI/UX Improvements 2025-11:
     - Stats grid gap space-6→space-7; responsive gaps según breakpoint
     - Services grid min ancho 260→280px + stack <480px
     - Testimonials grid min ancho 300→320px + stack <480px
     - Consistencia tipográfica en títulos/excerpts
     - CTA section mantiene colores accesibles (contraste alto)
   Hero: usa patrón estándar definido en heroes.css
   Grids: usan utilidades .grid-auto-fit / variantes de base.css
*/

/* Stats Grid específico (4 columnas fijas) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-7); /* Aumentado de space-6 a space-7 */
}
@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}
@media (max-width: 480px) {
  .stats-grid {
    gap: var(--space-5); /* Reducido en móvil pequeño */
  }
}

/* Cards - Extienden .card-base de base.css para propiedades base */
.project-thumbnail img, .blog-thumbnail img {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.project-content, .blog-content { padding: var(--space-5); }
.project-title, .blog-title { margin: 0 0 var(--space-3); font-size: 1.15rem; font-weight: 600; color: var(--color-text); }
.project-title a, .blog-title a { color: inherit; text-decoration: none; transition: color 0.2s; }
.project-title a:hover, .blog-title a:hover { color: var(--color-primary); }
.project-excerpt, .blog-excerpt { color: var(--color-text-secondary); line-height: 1.6; font-size: 0.95rem; }

/* Services Cards específico - Extiende .card-base */
.services-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Aumentado de 260px a 280px */
  gap: var(--space-6);
}
@media (max-width: 480px) {
  .services-cards {
    grid-template-columns: 1fr; /* Stack en móvil pequeño */
    gap: var(--space-5);
  }
}
.services-cards .service-card {
  display: flex;
  flex-direction: column;
}
.services-cards .service-thumbnail {
  overflow: hidden;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.services-cards .service-thumbnail img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.services-cards .service-content {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.services-cards .service-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.services-cards .service-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.services-cards .service-title a:hover {
  color: var(--color-primary);
}
.services-cards .service-excerpt {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

/* Testimonials específico */
.testimonials-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Aumentado de 300px a 320px */
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
@media (max-width: 480px) {
  .testimonials-carousel {
    grid-template-columns: 1fr; /* Stack en móvil pequeño */
    gap: var(--space-5);
  }
}
.testimonial-card {
  /* Extiende .card-base */
  padding: var(--space-6);
  border-left: 4px solid var(--color-primary);
  position: relative;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 3.5rem;
  color: rgba(195, 0, 0, 0.08);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}
.testimonial-content {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0 0 var(--space-4);
  position: relative;
  z-index: 1;
}
.testimonial-content p {
  margin: 0;
}
.testimonial-content iframe,
.testimonial-content video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--space-4) 0;
  border-radius: var(--radius);
}
.testimonial-author {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}
.testimonial-author strong {
  display: block;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.testimonial-author span {
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* Stats */
.stat-number { color: var(--color-primary); font-weight: 700; font-size: 2.5rem; line-height: 1; }
.stat-label { color: var(--color-text-secondary); font-size: 0.95rem; margin-top: 8px; }

/* Container Queries for responsive sections */
.stats-grid {
  container-type: inline-size;
  container-name: stats;
}

@container stats (width < 600px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

.services-cards {
  container-type: inline-size;
  container-name: services;
}

@container services (width < 480px) {
  .services-cards {
    grid-template-columns: 1fr;
  }
}

.testimonials-carousel {
  container-type: inline-size;
  container-name: testimonials;
}

@container testimonials (width < 480px) {
  .testimonials-carousel {
    grid-template-columns: 1fr;
  }
}

/* CTA section */
.section-dark { background: var(--color-surface); }
.section-dark .section-title { color: var(--color-text); }
.section-title { font-size: clamp(22px, 2.4vw, 32px); margin: 0 0 var(--space-4); color: var(--color-text); }
.section-description { color: var(--color-text-secondary); margin: 0 0 var(--space-6); }

/* Contact CTA rojo */
#contact-cta { background: var(--color-primary); }
#contact-cta .section-title { color: #fff; }
#contact-cta .section-description { color: rgba(255,255,255,0.95); }
#contact-cta .btn-primary { background: #fff; color: var(--color-primary); }
#contact-cta .btn-primary:hover { background: var(--color-surface); }

/* Language switcher list accessibility fix */
.lang-switcher-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-3);
}

.lang-switcher-list .lang-item {
  display: inline-block;
}

.lang-switcher-list .lang-item a {
  display: inline-block;
  padding: 4px 8px;
  text-decoration: none;
}