/* ─────────────────  TIPOGRAFÍA  ───────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');



body {
  font-family: 'Montserrat', sans-serif;
}

/* ─────────────────  HERO  ───────────────── */
.hero-gradient {
  background: linear-gradient(135deg, #0c2f50 0%, #1e3a8a 100%);
  padding: 4rem 1.25rem;        /* 64 px arriba/abajo, 20 px laterales en móvil */
  text-align: center;           /* centra título en pantallas angostas */
}

@media (min-width: 768px) {
  .hero-gradient {
    padding: 6rem 2rem;         /* 96 px × 32 px en tablet */
    text-align: left;           /* vuelve al alineado normal */
  }
}

/* ─────────────────  TARJETAS (stats & servicios) ───────────────── */
.stat-card,
.service-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover,
.service-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* cuadrícula responsiva (por si no usas Tailwind) */
.cards-grid {
  display: grid;
  gap: 1.25rem;                 /* 20 px */
  grid-template-columns: 1fr;   /* 1 col en móvil */
}
@media (min-width: 640px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); } /* 2 col en ≥ 640 */
}
@media (min-width: 1024px) {
  .cards-grid { grid-template-columns: repeat(3, 1fr); } /* 3 col en ≥ 1024 */
}

/* ─────────────────  GRÁFICA DECORATIVA  ───────────────── */
.chart-container {
  position: relative;
  width: 100%;
  height: 220px;                /* móvil */
  margin: 0 auto;
}
@media (min-width: 640px) {     /* tablet */
  .chart-container { height: 260px; }
}
@media (min-width: 1024px) {    /* desktop */
  .chart-container { height: 320px; }
}

/* Relleno degradado */
.chart-line,
.chart-line-top {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
}

.chart-line {
  background: linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.2) 0%,
    rgba(59, 130, 246, 0.5) 50%,
    rgba(59, 130, 246, 0.2) 100%
  );
  clip-path: polygon(
    0% 100%, 5% 85%, 10% 70%, 15% 80%, 20% 65%, 25% 75%, 30% 60%, 35% 65%,
    40% 45%, 45% 60%, 50% 40%, 55% 45%, 60% 35%, 65% 45%, 70% 30%, 75% 40%,
    80% 25%, 85% 35%, 90% 20%, 95% 30%, 100% 15%, 100% 100%
  );
}

.chart-line-top {
  border-top: 2px solid #3b82f6;
  clip-path: polygon(
    0% 85%, 5% 85%, 10% 70%, 15% 80%, 20% 65%, 25% 75%, 30% 60%, 35% 65%,
    40% 45%, 45% 60%, 50% 40%, 55% 45%, 60% 35%, 65% 45%, 70% 30%, 75% 40%,
    80% 25%, 85% 35%, 90% 20%, 95% 30%, 100% 15%
  );
}

/* ─────────────────  TESTIMONIOS  ───────────────── */
.testimonial-card {
  padding: 1.5rem;             /* 24 px en móvil */
  border-radius: 0.75rem;      /* 12 px */
  background: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 768px) {
  .testimonial-card { padding: 2rem; }  /* 32 px en tablet+ */
}
.testimonial-card:hover {
  transform: scale(1.03);
  box-shadow:
    0 20px 25px -5px rgba(0,0,0,.1),
    0 10px 10px -5px rgba(0,0,0,.04);
}

/* ─────────────────  ANIMACIÓN DE ENTRADA  ───────────────── */
@keyframes scaleIn {
  0%   { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.animate-scale-in {
  animation: scaleIn 0.3s ease-out;
}

 .nav-link    { @apply text-sm lg:text-base text-gray-700 hover:text-blue-600 font-medium transition; }
  .mobile-link { @apply block text-gray-700 hover:text-blue-600 font-medium text-base; }