/* ─────────────────  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; }



  .gmaps-responsive-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 0.5rem;
  }

  .gmaps-responsive-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
  }