/* ================================================================
   4PASSIONATES – STYLESHEET PRINCIPAL
   ================================================================
   PALETA DE COLORES INSTITUCIONAL:
   --color-primary:    #001f3f  (azul marino oscuro – principal)
   --color-secondary:  #b5e06c  (verde lima – secundario)
   --color-accent:     #ff5733  (naranja/coral – acento)
   --color-base:       #f2f1ed  (crema suave – fondo base)

   SISTEMA DE TIPOGRAFÍA:
   Syne       → títulos y headings (600-800)
   Inter      → cuerpo de texto y UI (300-700)
   ================================================================ */


/* ================================================================
   1. CUSTOM PROPERTIES (VARIABLES CSS)
   ================================================================ */
:root {
  /* ── Paleta institucional ── */
  --color-primary:        #001f3f;
  --color-primary-light:  #003366;
  --color-primary-dark:   #000d1a;
  --color-secondary:      #b5e06c;
  --color-secondary-dark: #96c84a;
  --color-accent:         #ff5733;
  --color-accent-dark:    #e04520;
  --color-base:           #f2f1ed;
  --color-base-dark:      #e8e7e2;
  --color-white:          #ffffff;
  --color-text:           #1a1a2e;
  --color-text-light:     #555577;
  --color-border:         rgba(0, 31, 63, 0.12);

  /* ── Tipografía ── */
  --font-heading:         'Syne', sans-serif;
  --font-body:            'Inter', sans-serif;

  /* ── Tamaños de fuente (escala fluida) ── */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.5rem;
  --text-4xl:   3.25rem;
  --text-5xl:   4rem;

  /* ── Espaciado ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ── Layout ── */
  --container-max:  1200px;
  --container-pad:  clamp(1rem, 5vw, 2rem);
  --navbar-height:  72px;

  /* ── Bordes y sombras ── */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full: 9999px;
  --shadow-sm:  0 1px 3px rgba(0,31,63,0.08);
  --shadow-md:  0 4px 16px rgba(0,31,63,0.12);
  --shadow-lg:  0 8px 32px rgba(0,31,63,0.16);
  --shadow-xl:  0 16px 48px rgba(0,31,63,0.20);

  /* ── Transiciones ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
}


/* ================================================================
   2. RESET Y BASE
   ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;           /* Scroll suave entre secciones */
  scroll-padding-top: var(--navbar-height); /* Compensa el navbar sticky */
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-base);
  overflow-x: hidden;
}

/* Optimización de fuentes */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  font-weight: 700;
}

/* Imágenes responsivas por defecto */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Links sin decoración por defecto */
a {
  color: inherit;
  text-decoration: none;
}

/* Lista sin estilos por defecto para listas de navegación */
ul[role="list"] {
  list-style: none;
}

/* Focus visible accesible */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ================================================================
   3. COMPONENTE: BOTONES
   Variantes: primary | secondary | outline | small | large | full
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}

/* Botón primario: fondo acento, texto blanco */
.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}
.btn--primary:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 87, 51, 0.35);
}

/* Botón secundario: fondo lima, texto primario */
.btn--secondary {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border-color: var(--color-secondary);
}
.btn--secondary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(181, 224, 108, 0.35);
}

/* Botón outline: borde blanco, texto blanco (sobre fondos oscuros) */
.btn--outline {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.6);
}
.btn--outline:hover {
  background-color: rgba(255,255,255,0.1);
  border-color: var(--color-white);
  transform: translateY(-2px);
}

/* Tamaño grande */
.btn--large {
  font-size: var(--text-md);
  padding: var(--space-4) var(--space-8);
}

/* Tamaño pequeño */
.btn--small {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
}

/* Ancho completo */
.btn--full {
  width: 100%;
}

/* Estado deshabilitado */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}


/* ================================================================
   4. COMPONENTE: ENCABEZADO DE SECCIÓN (section-header)
   ================================================================ */
.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

/* Etiqueta pequeña sobre el título */
.section-header__tag {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  background-color: rgba(255, 87, 51, 0.08);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

/* Etiqueta en versión clara (sobre fondos oscuros) */
.section-header__tag--light {
  color: var(--color-secondary);
  background-color: rgba(181, 224, 108, 0.12);
}

/* Título principal de la sección */
.section-header__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

/* Versión clara del título (sobre fondos oscuros) */
.section-header--light .section-header__title {
  color: var(--color-white);
}

/* Subtítulo de la sección */
.section-header__subtitle {
  font-size: var(--text-md);
  color: var(--color-text-light);
  max-width: 560px;
  margin: 0 auto;
}

.section-header--light .section-header__subtitle {
  color: rgba(255,255,255,0.7);
}


/* ================================================================
   5. NAVBAR – BARRA DE NAVEGACIÓN STICKY
   ================================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--navbar-height);
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition-base);
}

/* Estado scrolled: navbar con más sombra al hacer scroll */
.navbar--scrolled {
  box-shadow: var(--shadow-md);
  background-color: rgba(255, 255, 255, 0.98);
}

/* Contenedor interno del navbar */
.navbar__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Logo */
.navbar__logo {
  flex-shrink: 0;
  text-decoration: none;
}
.navbar__logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}
/* La parte "Passionates" del logo en color acento */
.navbar__logo-accent {
  color: var(--color-accent);
}

/* Menú de navegación */
.navbar__nav {
  margin-left: auto;      /* Empuja el menú hacia la derecha */
}
.navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}

/* Links del navbar */
.navbar__link {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  padding: var(--space-2) var(--space-1);
  position: relative;
  transition: color var(--transition-fast);
}
/* Subrayado animado al hover */
.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--transition-base);
}
.navbar__link:hover::after,
.navbar__link--active::after {
  transform: scaleX(1);
}
.navbar__link:hover {
  color: var(--color-accent);
}
.navbar__link--active {
  color: var(--color-accent);
}

/* Enlace de cambio de idioma */
.navbar__link--lang {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}
.navbar__link--lang:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-white);
}
.navbar__link--lang::after { display: none; }

/* Botón CTA en navbar */
.navbar__cta {
  flex-shrink: 0;
  margin-left: var(--space-4);
}

/* ─── Hamburguesa móvil ─── */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  margin-left: auto;
}
.navbar__hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 2px;
  transition: all var(--transition-base);
}
/* Animación hamburguesa → X */
.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-line:nth-child(2) {
  opacity: 0;
}
.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── Menú móvil ─── */
.navbar__mobile-menu {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--container-pad);
  z-index: 999;
}
.navbar__mobile-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.navbar__mobile-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-weight: 500;
  color: var(--color-primary);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.navbar__mobile-link:hover,
.navbar__mobile-link.navbar__link--active {
  background-color: var(--color-base);
  color: var(--color-accent);
}
/* CTA en menú móvil */
.navbar__mobile-cta {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
  text-align: center;
  font-weight: 700;
  margin-top: var(--space-2);
}


/* ================================================================
   6. HERO
   ================================================================ */
.hero {
  position: relative;
  min-height: 100svh;            /* Ocupa toda la pantalla */
  display: flex;
  align-items: center;
  padding-top: var(--navbar-height);
  background-color: var(--color-primary);
  overflow: hidden;
}

/* ─── Formas decorativas de fondo ─── */
.hero__bg-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero__shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.25;
}
/* Forma 1: secundario (verde lima), arriba a la derecha */
.hero__shape--1 {
  width: 500px;
  height: 500px;
  background-color: var(--color-secondary);
  top: -100px;
  right: -100px;
  animation: float-shape 8s ease-in-out infinite;
}
/* Forma 2: acento (naranja), centro-izquierda */
.hero__shape--2 {
  width: 350px;
  height: 350px;
  background-color: var(--color-accent);
  bottom: 100px;
  left: -80px;
  animation: float-shape 10s ease-in-out infinite reverse;
}
/* Forma 3: secundario más pequeño, abajo derecha */
.hero__shape--3 {
  width: 250px;
  height: 250px;
  background-color: var(--color-secondary);
  bottom: -50px;
  right: 200px;
  animation: float-shape 12s ease-in-out infinite 2s;
}

/* Animación flotante para las formas */
@keyframes float-shape {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.05); }
}

/* ─── Contenido del hero ─── */
.hero__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-16) var(--container-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  width: 100%;
}

/* Badge / etiqueta pequeña */
.hero__badge {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
  background-color: rgba(181, 224, 108, 0.12);
  border: 1px solid rgba(181, 224, 108, 0.3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

/* Título principal del hero */
.hero__title {
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: var(--space-6);
  letter-spacing: -0.03em;
}
/* La parte destacada del título con color lima */
.hero__title-highlight {
  color: var(--color-secondary);
}

/* Párrafo de descripción */
.hero__description {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-4);
  max-width: 540px;
}

/* Párrafo del proceso */
.hero__process {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--space-8);
  max-width: 540px;
}
.hero__process strong {
  color: var(--color-secondary);
  font-weight: 600;
}

/* Botones de acción del hero */
.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ─── Columna visual del hero (derecha) ─── */
.hero__visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: stretch;      /* La card ocupa todo el ancho de la columna */
  width: 100%;
}

/* Tarjeta principal del hero: flexible, ocupa todo el ancho disponible,
   con imagen incrustada y texto superpuesto en la parte inferior */
.hero__card {
  position: relative;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;           /* Recorta imagen y elementos internos */
  border: 1px solid rgba(255,255,255,0.15);
  animation: float-card 6s ease-in-out infinite;
  background-color: var(--color-primary-light); /* Fondo mientras carga la imagen */
}
@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* ─── Zona de imagen ─── */
.hero__card-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;        /* Proporción 4:3 — modificar si la imagen es diferente */
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--color-primary-light) 0%,
    var(--color-primary-dark)  100%
  );
}

/* Imagen principal — ocupa toda la zona */
.hero__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}
.hero__card:hover .hero__card-image {
  transform: scale(1.04);      /* Zoom sutil al hover */
}

/* Ícon de fallback: visible solo cuando la imagen no carga
   (controlado por la clase --empty añadida via onerror en JS) */
.hero__card-image-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  color: var(--color-secondary);
  opacity: 0;                  /* Oculto por defecto */
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* Activar el fallback cuando el wrapper tiene la clase --empty */
.hero__card-image-wrapper--empty .hero__card-image {
  visibility: hidden;
}
.hero__card-image-wrapper--empty .hero__card-image-fallback {
  opacity: 0.6;
}

/* Gradiente oscuro en la parte inferior para que el texto sea legible */
.hero__card-image-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(
    to top,
    rgba(0, 13, 26, 0.88) 0%,
    rgba(0, 13, 26, 0.4)  50%,
    transparent           100%
  );
  pointer-events: none;
}

/* ─── Caption superpuesto sobre la imagen ─── */
.hero__card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6) var(--space-6) var(--space-6);
  z-index: 1;
}

/* Texto de la caption */
.hero__card-text {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.hero__card-text strong {
  color: var(--color-secondary);
  display: block;
  font-size: var(--text-2xl);
}

/* Estadísticas en el hero: centradas respecto a la card */
.hero__stats {
  display: flex;
  gap: var(--space-6);
  justify-content: center;   /* Centra los 3 stats horizontalmente bajo la card */
  width: 100%;               /* Ocupa el mismo ancho que la card */
}
.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__stat-number {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-secondary);
}
.hero__stat-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Indicador de scroll */
.hero__scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: rgba(255,255,255,0.4);
  font-size: var(--text-xl);
  animation: bounce 2s ease-in-out infinite;
  transition: color var(--transition-fast);
}
.hero__scroll-indicator:hover {
  color: var(--color-secondary);
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}


/* ================================================================
   7. SECCIÓN SERVICIOS + CARRUSEL
   ================================================================ */
.services {
  padding: var(--space-24) 0;
  background-color: var(--color-base);
}
.services__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ─── Carrusel (wrapper general) ─── */
/*
   El carrusel usa variables CSS para controlar cuántas tarjetas
   son visibles a la vez. El JS lee --cards-visible para calcular
   el ancho exacto de cada tarjeta y el desplazamiento correcto.
*/
.carousel {
  position: relative;
  /* Espacio lateral para que los botones prev/next no queden encima del contenido */
  padding: 0 var(--space-10);
}

/* Variables del carrusel de servicios: 3 tarjetas en desktop */
#services-carousel {
  --cards-visible: 3;
  --carousel-gap:  24px;   /* Equivale a var(--space-6) = 1.5rem */
}

/* Botones prev/next: posicionados en los extremos del padding */
.carousel__btn {
  position: absolute;
  top: 40%;                /* Alineado al centro visual de las tarjetas */
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}
.carousel__btn--prev { left: 0; }
.carousel__btn--next { right: 0; }
.carousel__btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  transform: translateY(-50%) scale(1.05);
}

/* Ventana visible: oculta el overflow horizontal */
.carousel__track-wrapper {
  overflow: hidden;
}

/* Pista: fila de tarjetas que se desplaza con transform translateX */
.carousel__track {
  display: flex;
  gap: var(--carousel-gap, 24px);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  /* Importante: sin padding ni margin extra para que el cálculo en JS sea exacto */
}

/* ─── Dots (indicadores de posición) ─── */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
}
.carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-border);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  padding: 0;
}
.carousel__dot--active {
  background-color: var(--color-accent);
  width: 24px;
  border-radius: var(--radius-full);
}

/* ─── Tarjeta de servicio ─── */
/*
   El ancho de la tarjeta se calcula en JS con:
   cardWidth = (trackWidth - gap * (visible-1)) / visible
   Aquí solo declaramos flex-shrink:0 para que no se compriman.
*/
.service-card {
  flex: 0 0 auto;          /* El ancho real lo asigna JS dinámicamente */
  min-width: 0;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
              border-color var(--transition-base);
  border: 1px solid var(--color-border);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-secondary);
}

/* Zona de imagen de la tarjeta */
.service-card__image-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-primary);
}
.service-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.service-card:hover .service-card__image {
  transform: scale(1.05);
}
/* Ícono de fallback (cuando la imagen no carga) */
.service-card__image-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--color-secondary);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.service-card__image-wrapper--placeholder .service-card__image-overlay { opacity: 1; }
.service-card__image-wrapper--placeholder .service-card__image        { display: none; }

/* Cuerpo de texto */
.service-card__body        { padding: var(--space-6); }
.service-card__title       { font-size: var(--text-xl); color: var(--color-primary); margin-bottom: var(--space-3); }
.service-card__description { font-size: var(--text-sm); color: var(--color-text-light); line-height: 1.65; margin-bottom: var(--space-4); }
.service-card__features    { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.service-card__features li { font-size: var(--text-sm); color: var(--color-text); padding-left: var(--space-5); position: relative; }
/* Check mark verde antes de cada ítem */
.service-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-secondary-dark);
  font-weight: 700;
}


/* ================================================================
   8. SECCIÓN PROCESO (3 PASOS)
   ================================================================ */
.process {
  padding: var(--space-24) 0;
  background-color: var(--color-primary);
  position: relative;
  overflow: hidden;
}
/* Patrón decorativo de fondo */
.process::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(181,224,108,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.process__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
/* Grid de los 3 pasos + conectores */
.process__steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
/* Conector visual entre pasos */
.process__connector {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--color-secondary) 0%, rgba(181,224,108,0.2) 100%);
  margin-top: 40px;      /* Alinea con el centro del ícono del paso */
  margin-left: -1px;
  margin-right: -1px;
}
/* Cada paso del proceso */
.process__step {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.process__step-number {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}
.process__step-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(181,224,108,0.1);
  border: 2px solid rgba(181,224,108,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  color: var(--color-secondary);
  margin-bottom: var(--space-5);
  transition: all var(--transition-base);
}
.process__step:hover .process__step-icon {
  background: rgba(181,224,108,0.2);
  border-color: var(--color-secondary);
  transform: scale(1.1);
}
.process__step-title {
  font-size: var(--text-lg);
  color: var(--color-white);
  margin-bottom: var(--space-3);
}
.process__step-desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  max-width: 220px;
}


/* ================================================================
   9. SECCIÓN CLIENTES
   ================================================================ */
.clients {
  padding: var(--space-24) 0;
  background-color: var(--color-base);
}
.clients__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ─── Carrusel infinito de logos ─── */
.clients-logos {
  overflow: hidden;
  position: relative;
  margin-bottom: var(--space-16);
}
/* Gradiente en los bordes para efecto fade */
.clients-logos::before,
.clients-logos::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.clients-logos::before {
  left: 0;
  background: linear-gradient(to right, var(--color-base), transparent);
}
.clients-logos::after {
  right: 0;
  background: linear-gradient(to left, var(--color-base), transparent);
}
/* Pista animada: movimiento infinito hacia la izquierda */
.clients-logos__track {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  animation: scroll-logos 25s linear infinite;
  width: max-content;
}
/* Pausa la animación al hover */
.clients-logos:hover .clients-logos__track {
  animation-play-state: paused;
}
@keyframes scroll-logos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }  /* -50% porque el track se duplica en JS */
}
/* Cada ítem de logo */
.client-logo-item {
  flex-shrink: 0;
}
.client-logo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 140px;
  height: 80px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  transition: all var(--transition-base);
}
.client-logo-placeholder i {
  font-size: var(--text-xl);
  color: var(--color-primary);
  opacity: 0.5;
}
.client-logo-placeholder:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}
.client-logo-item img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all var(--transition-base);
}
.client-logo-item img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ─── Card de logo con nombre (versión homogénea) ───────────────────
   Uso en HTML:
   <div class="client-logo-item">
     <div class="client-logo-card">
       <img src="images/logo-cliente.png" alt="Nombre" class="client-logo-card__img" />
       <span class="client-logo-card__name">Nombre Cliente</span>
     </div>
   </div>
   ─────────────────────────────────────────────────────────────────── */
.client-logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);           /* Espacio entre logo y nombre */
  width: 160px;                  /* Ancho fijo para homogeneizar */
  height: 110px;                 /* Alto fijo para homogeneizar */
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  transition: all var(--transition-base);
  cursor: default;
}
.client-logo-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Imagen del logo dentro de la card */
.client-logo-card__img {
  height: 44px;                  /* Alto fijo — el ancho se adapta automáticamente */
  width: auto;
  max-width: 120px;              /* Evita que logos muy anchos desborden */
  object-fit: contain;
  object-position: center;
  filter: grayscale(100%);       /* Escala de grises por defecto */
  opacity: 0.65;
  transition: all var(--transition-base);
}
.client-logo-card:hover .client-logo-card__img {
  filter: grayscale(0%);         /* Color al hacer hover */
  opacity: 1;
}

/* Nombre del cliente debajo del logo */
.client-logo-card__name {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1.3;
  transition: color var(--transition-base);
}
.client-logo-card:hover .client-logo-card__name {
  color: var(--color-primary);   /* Oscurece el nombre al hacer hover */
}

/* ─── Testimonios ─── */
.testimonials {
  position: relative;
  padding: 0 var(--space-10);   /* Espacio para los botones prev/next */
}
/* Los botones del carrusel de testimonios */
.testimonials .carousel__btn--prev { left: -16px; }
.testimonials .carousel__btn--next { right: -16px; }

.testimonials__track-wrapper {
  overflow: hidden;
}
.testimonials__track {
  display: flex;
  transition: transform var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
  gap: var(--space-6);
}

/* Tarjeta de testimonio */
.testimonial-card {
  flex: 0 0 100%;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.testimonial-card__quote {
  margin-bottom: var(--space-6);
}
.testimonial-card__quote p {
  font-size: var(--text-lg);
  color: var(--color-primary);
  line-height: 1.7;
  font-style: italic;
  position: relative;
  padding-left: var(--space-6);
}
/* Comilla de apertura decorativa */
.testimonial-card__quote p::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -8px;
  font-size: 3rem;
  color: var(--color-secondary);
  font-style: normal;
  font-family: var(--font-heading);
  line-height: 1;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.testimonial-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--color-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  color: var(--color-text-light);
  flex-shrink: 0;
  overflow: hidden;
}
.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial-card__info {
  flex: 1;
}
.testimonial-card__name {
  display: block;
  font-size: var(--text-base);
  color: var(--color-primary);
  font-weight: 700;
}
.testimonial-card__role {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}
.testimonial-card__stars {
  color: #f59e0b;         /* Amarillo/dorado para las estrellas */
  font-size: var(--text-sm);
  display: flex;
  gap: 2px;
}


/* ================================================================
   10. FOOTER
   ================================================================ */
.footer {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  padding: var(--space-20) 0 0;
}
.footer__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Bloque CTA superior del footer */
.footer__cta-block {
  text-align: center;
  margin-bottom: var(--space-16);
}
.footer__cta-title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  color: var(--color-white);
  margin-bottom: var(--space-4);
}
.footer__cta-subtitle {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.65);
}

/* Grid del footer: formulario + info */
.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-16);
  padding-bottom: var(--space-16);
}

.footer__col-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-5);
}

/* ─── Formulario de contacto ─── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contact-form__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.contact-form__input {
  padding: var(--space-3) var(--space-4);
  background-color: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: all var(--transition-fast);
}
.contact-form__input::placeholder {
  color: rgba(255,255,255,0.35);
}
.contact-form__input:focus {
  outline: none;
  border-color: var(--color-secondary);
  background-color: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 3px rgba(181,224,108,0.15);
}
/* Estado de error en el input */
.contact-form__input--error {
  border-color: var(--color-accent) !important;
}
/* Textarea de mensaje */
.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
}
/* Select */
.contact-form__select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.contact-form__select option {
  background-color: var(--color-primary);
  color: var(--color-white);
}
/* Mensaje de error debajo del input */
.contact-form__error {
  font-size: var(--text-xs);
  color: var(--color-accent);
  min-height: 1em;
}

/* Botón de envío */
.contact-form__submit {
  margin-top: var(--space-2);
  position: relative;
}

/* Feedback del formulario (éxito/error global) */
.contact-form__feedback {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  text-align: center;
}
.contact-form__feedback--success {
  background-color: rgba(181,224,108,0.15);
  border: 1px solid rgba(181,224,108,0.3);
  color: var(--color-secondary);
}
.contact-form__feedback--error {
  background-color: rgba(255,87,51,0.15);
  border: 1px solid rgba(255,87,51,0.3);
  color: var(--color-accent);
}

/* ─── Columna de información de contacto ─── */
.footer__brand {
  margin-bottom: var(--space-8);
}
.footer__brand-logo {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
  display: block;
}
.footer__brand-tagline {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  max-width: 280px;
}

.footer__contact-info {
  font-style: normal;
  margin-bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer__contact-item:hover {
  color: var(--color-secondary);
}
.footer__contact-icon {
  width: 20px;
  color: var(--color-secondary);
  font-size: var(--text-base);
}

/* Redes sociales */
.footer__social-links {
  display: flex;
  gap: var(--space-3);
}
.footer__social-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: var(--text-base);
  text-decoration: none;
  transition: all var(--transition-base);
}
.footer__social-link:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  transform: translateY(-3px);
}
/* SVG inline del ícono de X: hereda color y tamaño del link */
.footer__social-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;   /* Toma el color del elemento padre (.footer__social-link) */
  display: block;
  flex-shrink: 0;
}

/* ─── Barra inferior del footer ─── */
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: var(--space-6) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer__copyright {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
}
.footer__bottom-nav {
  display: flex;
  gap: var(--space-6);
}
.footer__bottom-link {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer__bottom-link:hover {
  color: var(--color-secondary);
}


/* ================================================================
   11. BOTÓN SCROLL TO TOP
   ================================================================ */
.scroll-top-btn {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 900;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-white);
  border: none;
  font-size: var(--text-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-base);
  opacity: 0;
  transform: translateY(20px);
}
/* El botón se muestra cuando JS lo activa */
.scroll-top-btn--visible {
  opacity: 1;
  transform: translateY(0);
}
.scroll-top-btn:hover {
  background-color: var(--color-accent-dark);
  transform: translateY(-3px) !important;
}


/* ================================================================
   12. RESPONSIVE – BREAKPOINTS
   ================================================================ */

/* ── Tablet: máx 1024px ── */
@media (max-width: 1024px) {
  /* Carrusel de servicios: 2 tarjetas visibles en tablet */
  #services-carousel {
    --cards-visible: 2;
  }

  /* Proceso: scroll horizontal en tablet */
  .process__steps {
    overflow-x: auto;
    padding-bottom: var(--space-4);
  }
  .process__step {
    flex: 0 0 200px;
  }
}

/* ── Móvil grande: máx 768px ── */
@media (max-width: 768px) {

  /* Navbar: mostrar hamburguesa, ocultar menú y CTA */
  .navbar__nav,
  .navbar__cta {
    display: none;
  }
  .navbar__hamburger {
    display: flex;
  }

  /* Hero: una columna */
  .hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
  .hero__visual {
    align-items: stretch;  /* La card ocupa todo el ancho también en móvil */
  }
  /* La card ya es width:100% por defecto, no necesita override */

  /* Carrusel botones: ajustar posición */
  /* Carrusel de servicios: 1 tarjeta visible en móvil */
  #services-carousel {
    --cards-visible: 1;
    padding: 0 var(--space-6);   /* Menos padding lateral en móvil */
  }

  /* Proceso: columna vertical */
  .process__steps {
    flex-direction: column;
    align-items: center;
  }
  .process__connector {
    display: none;     /* Ocultar conectores horizontales en móvil */
  }
  .process__step {
    flex: none;
    width: 100%;
    max-width: 300px;
  }

  /* Footer grid: una columna */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Footer bottom: centrado */
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ── Móvil pequeño: máx 480px ── */
@media (max-width: 480px) {
  .hero__actions {
    flex-direction: column;
  }
  .hero__actions .btn {
    width: 100%;
  }
  .hero__stats {
    gap: var(--space-4);
  }
  /* En móvil muy pequeño los botones prev/next se ocultan;
     el usuario navega por swipe o por los dots */
  #services-carousel .carousel__btn,
  .testimonials .carousel__btn {
    display: none;
  }
}


/* ================================================================
   13. UTILIDADES Y ESTADOS
   ================================================================ */
/* Ocultar visualmente (accesible para lectores de pantalla) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Loader spinner */
.btn-loader {
  display: inline-flex;
}
.btn-loader[hidden] {
  display: none;
}

/* Clase para smooth reveal al hacer scroll (activada por JS) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}
/* Delays para efectos escalonados */
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }