/* ================================================================
   VENTUS INSURANCE AGENCY — Services Page Stylesheet
   File: css/services.css
   Inherits design tokens from css/index.css
================================================================ */

/* ----------------------------------------------------------------
   TABLE OF CONTENTS
   1.  Services Page Hero  ← ACTUALIZADO con imagen de fondo
   2.  Services Grid — Core Services Cards
   3.  Service Process Steps
   4.  Specialty Services Grid
   5.  Service Stats Section
   6.  Service Testimonials — CARRUSEL
   7.  Responsive — Tablet (max 1024px)
   8.  Responsive — Mobile (max 768px)
   9.  Responsive — Small Mobile (max 480px)
---------------------------------------------------------------- */


/* ================================================================
   1. SERVICES PAGE HERO
   - .svc-hero__img  → capa de imagen de fondo (z-index: 0)
   - .svc-hero__bg   → overlay de gradiente oscuro  (z-index: 1)
   - Rings + content → z-index: 2 / 3
================================================================ */
.svc-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-navy-darkest);
  padding-bottom: var(--space-20);
}

/* ── Imagen de fondo ──────────────────────────────────────────
   Cambia la URL por la ruta real de tu imagen.
   Recomendado: assets/images/hero-services-bg.webp
   (mínimo 1920×700 px, optimizada en formato WebP)
──────────────────────────────────────────────────────────────── */
.svc-hero__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../assets/images/hero-services-bg.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Sutil zoom-out al cargar la página */
  animation: heroImgZoom 12s ease-out forwards;
}

@keyframes heroImgZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1.00); }
}

/* ── Overlay de gradiente sobre la imagen ───────────────────── */
.svc-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Franja izquierda azul oscuro → texto legible */
    linear-gradient(
      to right,
      rgba(9, 19, 42, 0.96)  0%,
      rgba(9, 19, 42, 0.82) 45%,
      rgba(9, 19, 42, 0.50) 70%,
      rgba(9, 19, 42, 0.15) 100%
    ),
    /* Tono general oscuro sobre toda la imagen */
    linear-gradient(
      155deg,
      rgba(9, 19, 42, 0.70) 0%,
      rgba(18, 33, 71, 0.55) 50%,
      rgba(0, 97, 158, 0.20) 100%
    );
}

/* Decorative animated rings */
.svc-hero__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(197, 171, 98, 0.12);
  pointer-events: none;
  z-index: 2;
}

.svc-hero__ring--1 {
  width: 500px; height: 500px;
  top: 50%; right: -80px;
  transform: translateY(-50%);
  animation: ringPulse 6s ease-in-out infinite;
}

.svc-hero__ring--2 {
  width: 360px; height: 360px;
  top: 50%; right: 10px;
  transform: translateY(-50%);
  border-color: rgba(197, 171, 98, 0.08);
  animation: ringPulse 6s ease-in-out infinite 1.5s;
}

.svc-hero__ring--3 {
  width: 220px; height: 220px;
  top: 50%; right: 100px;
  transform: translateY(-50%);
  border-color: rgba(197, 171, 98, 0.05);
  animation: ringPulse 6s ease-in-out infinite 3s;
}

@keyframes ringPulse {
  0%, 100% { opacity: 1;   transform: translateY(-50%) scale(1);    }
  50%       { opacity: 0.5; transform: translateY(-50%) scale(1.04); }
}

/* Wave bottom divider */
.svc-hero__wave {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  z-index: 4;
  line-height: 0;
}

.svc-hero__wave svg {
  display: block;
  width: 100%;
  height: 80px;
}

/* Breadcrumb */
.svc-hero .breadcrumb { margin-bottom: var(--space-8); }
.svc-hero .breadcrumb ol { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.svc-hero .breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
.svc-hero .breadcrumb a {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-secondary); font-size: var(--fs-xs);
  font-weight: var(--fw-semibold); color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: color var(--transition-fast);
}
.svc-hero .breadcrumb a:hover { color: var(--color-gold-light); }
.svc-hero .breadcrumb i.ri-arrow-right-s-line { color: rgba(255, 255, 255, 0.25); font-size: var(--fs-md); }
.svc-hero .breadcrumb span[aria-current] {
  font-family: var(--font-secondary); font-size: var(--fs-xs);
  font-weight: var(--fw-bold); color: var(--color-gold);
  text-transform: uppercase; letter-spacing: 0.05em;
}

.svc-hero__content {
  position: relative;
  z-index: 3;
  padding-top: var(--space-16);
  width: 100%;
}

.svc-hero__text { max-width: 700px; }

.svc-hero__title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: var(--fw-black);
  color: var(--color-white);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
  /* Sombra de texto para máxima legibilidad sobre imagen */
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

.svc-hero__title--accent {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.svc-hero__desc {
  font-size: clamp(var(--fs-base), 2vw, var(--fs-lg));
  color: rgba(255, 255, 255, 0.78);
  line-height: var(--lh-loose);
  max-width: 580px;
  margin-bottom: var(--space-10);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.svc-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}


/* ================================================================
   2. SERVICES GRID — Core Service Cards
================================================================ */
.services-grid-section { background: var(--color-bg); }

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* Service Card */
.svc-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

/* Top accent line */
.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-normal);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
}

.svc-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(59, 82, 131, 0.20);
}

.svc-card:hover::before { transform: scaleX(1); }

/* Featured card */
.svc-card--featured {
  border-color: var(--color-gold);
  background: linear-gradient(160deg, #fff 0%, rgba(197, 171, 98, 0.04) 100%);
}

.svc-card--featured::before {
  background: var(--gradient-gold);
  transform: scaleX(1);
}

.svc-card__badge {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  background: var(--gradient-gold);
  color: var(--color-white);
  font-family: var(--font-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-gold);
}

/* Icon */
.svc-card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  background: linear-gradient(135deg, rgba(18, 33, 71, 0.07), rgba(59, 82, 131, 0.05));
  border-radius: var(--radius-xl);
  color: var(--color-navy-dark);
  font-size: 1.875rem;
  margin-bottom: var(--space-6);
  flex-shrink: 0;
  transition:
    background var(--transition-normal),
    color var(--transition-normal),
    transform var(--transition-bounce);
}

.svc-card:hover .svc-card__icon-wrap {
  background: var(--gradient-navy);
  color: var(--color-white);
  transform: scale(1.08) rotate(-4deg);
}

.svc-card--featured .svc-card__icon-wrap {
  background: var(--gradient-gold);
  color: var(--color-white);
}

.svc-card--featured:hover .svc-card__icon-wrap {
  background: linear-gradient(135deg, #8a6d20, #c9a84c);
}

/* Text */
.svc-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  color: var(--color-navy-darkest);
  margin-bottom: var(--space-3);
  line-height: var(--lh-snug);
}

.svc-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-5);
  flex: 1;
}

.svc-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.svc-card__features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-light);
}

.svc-card__features li i {
  color: var(--color-gold-dark);
  font-size: var(--fs-md);
  flex-shrink: 0;
}

.svc-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-navy-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: auto;
  transition:
    color var(--transition-fast),
    gap var(--transition-fast);
}

.svc-card__link:hover {
  color: var(--color-gold-dark);
  gap: var(--space-3);
}

.svc-card__link i { font-size: var(--fs-md); }


/* ================================================================
   3. SERVICE PROCESS STEPS
================================================================ */
.svc-process { overflow: hidden; }

.svc-process__steps {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.svc-process__step {
  flex: 1;
  min-width: 170px;
  text-align: center;
  padding: var(--space-8) var(--space-5);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(8px);
  position: relative;
  transition:
    background var(--transition-normal),
    border-color var(--transition-normal),
    transform var(--transition-normal);
}

.svc-process__step:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(197, 171, 98, 0.30);
  transform: translateY(-4px);
}

.svc-process__num {
  position: absolute;
  top: var(--space-3);
  left: var(--space-4);
  font-family: var(--font-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  color: rgba(255, 255, 255, 0.10);
  letter-spacing: 0.04em;
}

.svc-process__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  background: rgba(197, 171, 98, 0.12);
  border: 1px solid rgba(197, 171, 98, 0.25);
  border-radius: var(--radius-xl);
  color: var(--color-gold-light);
  font-size: 1.75rem;
  margin: 0 auto var(--space-5);
  transition:
    background var(--transition-normal),
    transform var(--transition-bounce);
}

.svc-process__step:hover .svc-process__icon {
  background: var(--gradient-gold);
  color: var(--color-white);
  transform: scale(1.10) rotate(-5deg);
}

.svc-process__step h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.svc-process__step p {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.60);
  line-height: var(--lh-loose);
}

.svc-process__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(197, 171, 98, 0.45);
  font-size: var(--fs-2xl);
  flex-shrink: 0;
  margin-top: var(--space-10);
}


/* ================================================================
   4. SPECIALTY SERVICES GRID
================================================================ */
.specialty-section { background: var(--color-bg); }

.specialty__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* FIX 4: clase hidden para el stagger de entrada */
.specialty-card--hidden {
  opacity: 0;
  transform: translateY(24px);
}

.specialty-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-7);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.specialty-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(197, 171, 98, 0.35);
}

.specialty-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  min-width: 52px;
  background: linear-gradient(135deg, rgba(18, 33, 71, 0.07), rgba(197, 171, 98, 0.07));
  border: 1px solid rgba(197, 171, 98, 0.20);
  border-radius: var(--radius-lg);
  color: var(--color-gold-dark);
  font-size: var(--fs-xl);
  transition:
    background var(--transition-normal),
    color var(--transition-normal),
    transform var(--transition-bounce);
}

.specialty-card:hover .specialty-card__icon {
  background: var(--gradient-navy);
  color: var(--color-white);
  transform: scale(1.08) rotate(-4deg);
}

.specialty-card__content h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-navy-darkest);
  margin-bottom: var(--space-2);
  line-height: var(--lh-snug);
}

.specialty-card__content p {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  line-height: var(--lh-loose);
}


/* ================================================================
   5. SERVICE STATS SECTION
================================================================ */
.svc-stats { background: var(--gradient-navy); }

.svc-stats__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.svc-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-2xl);
  transition:
    background var(--transition-normal),
    border-color var(--transition-normal),
    transform var(--transition-normal);
}

.svc-stat-item:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(197, 171, 98, 0.30);
  transform: translateY(-4px);
}

.svc-stat-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  background: rgba(197, 171, 98, 0.12);
  border-radius: var(--radius-lg);
  color: var(--color-gold-light);
  font-size: var(--fs-xl);
  margin-bottom: var(--space-4);
  transition: background var(--transition-normal), transform var(--transition-bounce);
}

.svc-stat-item:hover .svc-stat-item__icon {
  background: var(--gradient-gold);
  color: var(--color-white);
  transform: scale(1.10) rotate(-5deg);
}

.svc-stat-item__numbers {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.svc-stat-item__value {
  font-size: clamp(var(--fs-2xl), 2.5vw, var(--fs-4xl));
  font-weight: var(--fw-black);
  color: var(--color-white);
}

.svc-stat-item__unit {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  color: var(--color-gold);
}

.svc-stat-item__label {
  font-family: var(--font-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: var(--lh-snug);
}


/* ================================================================
   6. TESTIMONIALS — CARRUSEL
================================================================ */
.svc-testimonials { background: var(--color-bg-alt); }

/* ── Wrapper principal ─────────────────────────────────────── */
.testimonials__carousel-wrapper {
  position: relative;
  padding: 0 56px; /* espacio para las flechas */
}

/* ── Flechas de navegación ─────────────────────────────────── */
.testimonials__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-navy-dark);
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-bounce),
    box-shadow var(--transition-fast);
}

.testimonials__arrow:hover {
  background: var(--gradient-navy);
  color: var(--color-white);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(-50%) scale(1.10);
}

.testimonials__arrow:active {
  transform: translateY(-50%) scale(0.96);
}

.testimonials__arrow--prev { left: 0; }
.testimonials__arrow--next { right: 0; }

/* ── Track outer — ventana de recorte ─────────────────────── */
.testimonials__track-outer {
  overflow: hidden;
  border-radius: var(--radius-2xl);
}

/* ── Track — fila deslizable de cards ─────────────────────── */
.testimonials__track {
  display: flex;
  gap: var(--space-6);
  transition: transform 0.50s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  /* Las cards se dimensionan vía JS (--cards-visible) */
}

/* ── Testimonial card ──────────────────────────────────────── */
.testimonial-card {
  flex: 0 0 calc((100% - var(--space-6) * (var(--cards-visible, 3) - 1)) / var(--cards-visible, 3));
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Marca de comillas decorativa */
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  right: var(--space-6);
  font-size: 8rem;
  font-family: Georgia, serif;
  font-weight: 900;
  color: rgba(197, 171, 98, 0.08);
  line-height: 1;
  pointer-events: none;
}

/* Estrellas */
.testimonial-card__stars {
  display: flex;
  gap: 3px;
  color: var(--color-gold);
  font-size: var(--fs-md);
}

/* Texto de la cita */
.testimonial-card__quote {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  line-height: var(--lh-loose);
  flex: 1;
}

/* Footer del autor */
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* Avatar con iniciales */
.author__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: var(--gradient-navy);
  color: var(--color-white);
  font-family: var(--font-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  border: 2px solid var(--color-gold);
  letter-spacing: 0.03em;
}

.author__info strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-navy-darkest);
  line-height: 1.3;
}

.author__info span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-secondary);
  font-size: var(--fs-xs);
  color: var(--color-text-light);
}

/* ── Puntos de navegación ──────────────────────────────────── */
.testimonials__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.testimonials__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--color-border);
  cursor: pointer;
  padding: 0;
  transition:
    background var(--transition-fast),
    transform var(--transition-bounce),
    width var(--transition-fast);
}

.testimonials__dot:hover {
  background: rgba(197, 171, 98, 0.60);
  transform: scale(1.2);
}

.testimonials__dot--active {
  background: var(--color-gold);
  width: 28px;
  border-radius: var(--radius-full);
  transform: none;
}


/* ================================================================
   7. RESPONSIVE — TABLET (max-width: 1024px)
================================================================ */
@media (max-width: 1024px) {

  /* Services grid: 2 columns */
  .services__grid { grid-template-columns: repeat(2, 1fr); }

  /* Specialty: 2 columns */
  .specialty__grid { grid-template-columns: repeat(2, 1fr); }

  /* Stats: 3 columns */
  .svc-stats__grid { grid-template-columns: repeat(3, 1fr); }

  /* Process: wrap */
  .svc-process__steps { flex-wrap: wrap; }
  .svc-process__connector { display: none; }
  .svc-process__step { min-width: 200px; }

  /* Carrusel: 2 cards visibles */
  .testimonials__carousel-wrapper { padding: 0 48px; }
}


/* ================================================================
   8. RESPONSIVE — MOBILE (max-width: 768px)
================================================================ */
@media (max-width: 768px) {

  /* Hero */
  .svc-hero { min-height: 460px; padding-bottom: var(--space-16); }
  .svc-hero__title { font-size: 2rem; }
  .svc-hero__actions { flex-direction: column; }
  .svc-hero__actions .btn { width: 100%; justify-content: center; }
  .svc-hero__ring { display: none; }

  /* Hero image: foco central en móvil */
  .svc-hero__img { background-position: center top; }

  /* Overlay más opaco en móvil para mejor legibilidad */
  .svc-hero__bg {
    background:
      linear-gradient(
        to bottom,
        rgba(9, 19, 42, 0.88) 0%,
        rgba(9, 19, 42, 0.75) 60%,
        rgba(9, 19, 42, 0.88) 100%
      );
  }

  /* Grid: 1 column */
  .services__grid { grid-template-columns: 1fr; }
  .specialty__grid { grid-template-columns: 1fr; }

  /* Stats: 2 columns */
  .svc-stats__grid { grid-template-columns: repeat(2, 1fr); }

  /* Specialty cards: reduce padding */
  .specialty-card { padding: var(--space-6); }

  /* Carrusel: 1 card visible, flechas compactas */
  .testimonials__carousel-wrapper { padding: 0 40px; }
  .testimonials__arrow { width: 40px; height: 40px; font-size: 1.25rem; }
}


/* ================================================================
   9. RESPONSIVE — SMALL MOBILE (max-width: 480px)
================================================================ */
@media (max-width: 480px) {

  .svc-hero__title { font-size: 1.75rem; }

  /* Stats single column */
  .svc-stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

  /* Service cards: reduce padding */
  .svc-card { padding: var(--space-6); }

  /* Specialty inline icon */
  .specialty-card__icon { width: 44px; height: 44px; min-width: 44px; font-size: var(--fs-lg); }

  /* Carrusel: flechas mínimas */
  .testimonials__carousel-wrapper { padding: 0 36px; }
  .testimonials__arrow { width: 36px; height: 36px; font-size: 1.1rem; }
}