/* Agencia Barrio Filipino - CSS Principal Optimizado */

/* CSS Crítico - Variables CSS Custom Properties */
:root {
  /* Colores Premium */
  --primary-dark: #0a0a0a;
  --primary-blue: #1a1a2e;
  --secondary-blue: #16213e;
  --accent-gold: #d4af37;
  --white-pearl: #faf9f6;
  --text-dark: #2c2c2c;
  --text-light: #666666;
  --text-white: #ffffff;
  --border-light: #e5e5e5;
  --shadow-soft: rgba(0, 0, 0, 0.08);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  --shadow-strong: rgba(0, 0, 0, 0.25);
  
  /* Colores Bandera Filipina */
  --philippines-red: #ce1126;
  --philippines-blue: #0038a8;
  --philippines-yellow: #fcd116;
  
  /* Otros colores */
  --accent-green: #10b981;
  --bg-light: #f8fafc;
  
  /* Tipografía Responsiva */
  --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Tamaños de fuente fluidos */
  --fs-h1: clamp(2rem, 4vw + 1rem, 3.5rem);
  --fs-h2: clamp(1.75rem, 3vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
  --fs-h4: clamp(1.25rem, 2vw + 1rem, 1.875rem);
  --fs-body: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --fs-small: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);
  
  /* Espaciado fluido */
  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-sm: clamp(1rem, 2vw, 1.5rem);
  --space-md: clamp(1.5rem, 3vw, 2.5rem);
  --space-lg: clamp(2rem, 4vw, 4rem);
  --space-xl: clamp(3rem, 6vw, 6rem);
  
  /* Contenedor fluido */
  --container-max: min(90vw, 1200px);
  --container-padding: clamp(1rem, 5vw, 2rem);
  
  /* Transiciones */
  --transition-fast: 0.2s ease-out;
  --transition-normal: 0.3s ease-out;
  --transition-slow: 0.5s ease-out;
  
  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
}

/* Reset y Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-secondary);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--white-pearl);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Tipografía */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-sm);
  color: var(--text-dark);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
  margin-bottom: var(--space-sm);
  color: var(--text-light);
}

a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover, a:focus {
  color: var(--accent-gold);
  outline: none;
}

/* Elementos interactivos */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem);
  border: none;
  border-radius: 0px;
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  min-height: 48px; /* Accesibilidad */
  min-width: 48px;
}

button:hover, .btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #1a365d, #2c5aa0);
  box-shadow: 0 6px 25px var(--shadow-strong);
  color: var(--text-white) !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
  box-shadow: 0 4px 15px var(--shadow-medium);
  font-weight: 600;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px var(--shadow-strong);
  background: linear-gradient(135deg, #1a365d, #2c5aa0);
  color: var(--text-white) !important;
}

.btn-secondary {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
  border: none;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #1a365d, #2c5aa0);
  color: var(--text-white) !important;
  transform: translateY(-2px);
}

.btn-accent {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
}

.btn-accent:hover {
  background: linear-gradient(135deg, #1a365d, #2c5aa0);
  transform: translateY(-2px);
  color: var(--text-white) !important;
}

/* Botón compacto para tarjetas */
.btn-small {
  padding: 0.5rem 1rem;
  font-size: var(--fs-small);
  min-height: 36px;
  min-width: auto;
  text-transform: none;
  letter-spacing: normal;
}

/* Botón extra pequeño para header/topbar */
.btn-header {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  min-height: 1.25rem;
  max-height: 1.25rem;
  min-width: auto;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 0px;
}

.nav .cta-button.btn-header {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  min-height: 1.25rem;
  max-height: 1.25rem;
}

/* Contenedores fluidos */
.container {
  width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section {
  padding: var(--space-lg) 0;
}

.section-alt {
  background: linear-gradient(135deg, #f8f9fa, var(--white-pearl));
}

/* Header fijo optimizado */
.header {
  position: sticky;
  position: -webkit-sticky;
  top: 1.75rem;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all var(--transition-normal);
}

.header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.15);
}

.header-content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: clamp(0.5rem, 1.5vw, 0.75rem) 0;
  gap: clamp(0.75rem, 2vw, 1rem);
}

.main-nav {
  justify-self: center;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Top bar eliminado y botones compactos de idioma ya no se usan */
.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 0.75rem);
  justify-self: end;
}

.logo {
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--primary-blue);
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Logo más específico y robusto */
.header .logo .logo-img,
.logo .logo-img,
.logo-img,
img.logo-img {
  height: clamp(35px, 6vw, 45px) !important;
  width: auto !important;
  max-width: 180px !important;
  min-width: 40px !important;
  min-height: 35px !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform 0.2s ease;
  object-fit: contain;
  vertical-align: middle;
}

.logo:hover .logo-img {
  transform: scale(1.05);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1rem);
  flex-wrap: nowrap;
  width: 100%;
  justify-content: space-between;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  align-items: center;
  justify-content: center;
  margin: 0;
}

.nav-link {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  color: var(--philippines-red);
  padding: clamp(0.125rem, 0.5vw, 0.25rem) 0;
  position: relative;
  transition: color var(--transition-fast);
}

/* Navegación - subrayado estable con ::after */
.nav-link {
  position: relative;
  /* color heredado del primer bloque .nav-link */
  text-decoration: none;
  background: transparent;
  display: inline-block;
  padding-bottom: 4px; /* espacio para la línea */
}

/* Línea base oculta */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* dentro del elemento para evitar recortes */
  height: 3px; /* mayor grosor para más contraste */
  background: var(--philippines-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
  pointer-events: none;
}

/* Estado activo - mostrar línea */
.nav-link.active {
  /* color azul como la línea */
  color: var(--philippines-blue);
  font-weight: 600;
}
.nav-link.active::after {
  transform: scaleX(1);
}

/* Hover solo para enlaces no activos: mostrar línea tenue */
.nav-link:hover:not(.active) {
  color: var(--philippines-blue);
}
.nav-link:hover:not(.active)::after {
  transform: scaleX(1);
  background: var(--philippines-blue);
}

/* Selector de idiomas */
.language-selector {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.language-selector .flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.language-selector .flag-img {
  display: block;
  width: 18px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.lang-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.45rem;
  border-radius: 0; /* esquinas rectas */
  font-size: 0.75rem; /* compacto */
.nav-links {
  display: flex;
  list-style: none;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  align-items: center;
  justify-content: center;
  margin: 0;
}
  color: var(--philippines-blue);
}

.lang-link { border: 1px solid transparent; color: var(--philippines-blue); }
.lang-link.active {
  border-color: var(--philippines-blue);
  background: rgba(18, 87, 163, 0.18);
  color: var(--philippines-blue);
}
.lang-code { display: inline !important; font-weight: 600; letter-spacing: 0.5px; }
.lang-name { display: none; }

/* Código oculto en todos los tamaños: solo banderas visibles */

/* (revertido) eliminados estilos del dropdown personalizado de idiomas */

/* Dropdown de idiomas en top bar */
.language-selector-dropdown {
  position: relative;
  display: inline-block;
}

.language-selector-dropdown .language-selector {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
  font-size: var(--fs-small);
}

.language-selector-dropdown .lang-link {
  padding: 0.125rem 0.25rem;
  font-size: 0.8rem;
}

/* CTA compacto */
.cta-compact {
  padding: 0.5rem 1rem !important;
  font-size: var(--fs-small) !important;
  min-width: auto !important;
}

/* CTA dentro de la navegación */
.nav .cta-button {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  min-height: 1.25rem;
  max-height: 1.25rem;
}

/* Todos los botones en el header más pequeños */
.header .btn,
.header button {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  min-height: 1.25rem;
  max-height: 1.25rem;
  border-radius: 0px;
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
}

.header .btn:hover,
.header button:hover {
  background: linear-gradient(135deg, #1a365d, #2c5aa0);
  transform: translateY(-1px);
  color: var(--text-white) !important;
}

.header .mobile-menu-toggle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.25rem;
}

.header .mobile-menu-toggle:hover,
.header .mobile-menu-toggle:focus {
  background: transparent !important;
  transform: none;
}

/* Menu móvil */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
}

.mobile-menu-toggle span {
  width: 18px;
  height: 2px;
  background: var(--primary-blue);
  transition: all var(--transition-fast);
}

/* Menú móvil desplegable */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background: var(--white-pearl);
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  transition: right var(--transition-normal);
  z-index: 1000;
  overflow-y: auto;
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu-content {
  padding: var(--space-lg) var(--space-md);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: var(--space-md);
}

.mobile-menu-close {
  background: transparent;
  border: none;
  color: var(--philippines-blue);
  font-size: 1.75rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.mobile-menu-close:hover,
.mobile-menu-close:focus {
  color: var(--philippines-red);
  transform: translateY(-1px);
  outline: none;
}

.mobile-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav-links li {
  margin-bottom: var(--space-sm);
}

/* Navegación móvil - subrayado estable con ::after */
.mobile-nav-link {
  display: inline-block;
  padding: var(--space-sm) 0;
  padding-bottom: 4px; /* espacio para línea */
  color: var(--philippines-red);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition: color var(--transition-fast);
  position: relative;
}

.mobile-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* dentro del elemento */
  height: 3px;
  background: var(--philippines-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
  pointer-events: none;
}

.mobile-nav-link.active { color: var(--philippines-blue); font-weight: 600; }
.mobile-nav-link.active::after { transform: scaleX(1); }
.mobile-nav-link:hover:not(.active) { color: var(--philippines-blue); }
.mobile-nav-link:hover:not(.active)::after { transform: scaleX(1); background: var(--philippines-blue); }

/* Overlay para cerrar menú móvil */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Prevenir scroll cuando menú móvil está abierto */
body.menu-open {
  overflow: hidden;
}

/* Hero section - Página de inicio */

/* CTA final como tarjetas */
#cta-final .cta-cards { align-items: stretch; }
#cta-final .cta-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 0;
  box-shadow: 0 4px 20px var(--shadow-soft);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal), color var(--transition-normal);
}
#cta-final .cta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px var(--shadow-medium);
  /* Igual que el hover de los botones */
  background: linear-gradient(135deg, #1a365d, #2c5aa0);
  border-color: transparent;
  color: var(--text-white);
}
#cta-final .cta-card-content { padding: var(--space-lg); text-align: center; }
#cta-final .cta-card h4 { margin: 0 0 var(--space-sm) 0; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
#cta-final .cta-card p { margin: 0 0 var(--space-md) 0; color: var(--text-muted); }
#cta-final .cta-card-more { color: var(--text-dark); }
#cta-final .cta-card-button { pointer-events: auto; }

/* Texto blanco sobre el gradiente en hover */
#cta-final .cta-card:hover h4,
#cta-final .cta-card:hover p,
#cta-final .cta-card:hover .cta-card-more { color: var(--text-white); }

/* Efecto hover: invertir colores como botón principal/secundario */
#cta-final .cta-card:hover .btn.btn-primary {
  background: var(--text-white);
  color: var(--primary-blue) !important;
  box-shadow: inset 0 0 0 1px var(--primary-blue);
}
#cta-final .cta-card:hover .btn.btn-secondary {
  background: var(--text-white);
  color: var(--philippines-red) !important;
  box-shadow: inset 0 0 0 1px var(--philippines-red);
}

/* Hover directo sobre los botones dentro de las tarjetas */
#cta-final .cta-card .btn.btn-primary:hover {
  background: var(--text-white);
  color: var(--primary-blue) !important;
  box-shadow: inset 0 0 0 1px var(--primary-blue);
}
#cta-final .cta-card .btn.btn-secondary:hover {
  background: var(--text-white);
  color: var(--philippines-red) !important;
  box-shadow: inset 0 0 0 1px var(--philippines-red);
}

/* Focus visible para accesibilidad */
#cta-final .cta-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(18, 87, 163, 0.25), 0 8px 30px var(--shadow-medium);
  border-color: var(--philippines-blue);
}
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: 
    linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)),
    url('/assets/images/home/hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-white);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}

/* Hero para otras páginas (empleadores, trabajadores, faq) */
.hero-page {
  min-height: 20vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
  position: relative;
  overflow: hidden;
  padding: clamp(0.5rem, 1vw, 1rem) 0;
}

.hero-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  color: var(--text-white);
  margin-bottom: var(--space-md);
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.hero p {
  font-size: clamp(1.125rem, 1vw + 1rem, 1.25rem);
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: var(--space-lg);
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

/* Estilos para hero de otras páginas */
.hero-page .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 0.5rem;
}

.hero-page h1 {
  color: var(--text-white);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  font-weight: 600; /* Reducido de 700 a 600 */
  line-height: 1.2;
}

.hero-page h3 {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.9rem, 1.3vw, 1rem); /* Tamaño más pequeño */
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
  font-weight: 400; /* Peso menor */
  line-height: 1.3;
  opacity: 0.9;
}

.hero-page p {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
  line-height: 1.4;
  opacity: 0.95;
}

/* Grid responsivo fluido */
.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

/* Proceso: forzar 2 columnas (2x2) en pantallas medianas/grandes */
#proceso .grid.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px) {
  #proceso .grid.grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Tarjetas */
.card {
  background: var(--text-white);
  padding: var(--space-md);
  border-radius: 0;
  box-shadow: 0 4px 20px var(--shadow-soft);
  transition: all var(--transition-normal);
  border: 1px solid var(--border-light);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px var(--shadow-medium);
}

/* Tarjetas de servicios con imagen - ajuste de espaciado */
.card.service-card,
#servicios .card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; /* Asegurar altura uniforme */
}

/* Contenido con espaciado controlado y flex */
#servicios .card .content-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--space-md);
}

#servicios .card h3 {
  margin-top: 0;
  margin-bottom: var(--space-sm);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.2;
  min-height: 1.6em; /* Espacio para una línea consistente */
  display: flex;
  align-items: center;
  white-space: nowrap; /* Evitar salto de línea */
  overflow: hidden;
  text-overflow: ellipsis; /* Mostrar ... si es muy largo */
}

/* Para pantallas más pequeñas, permitir wrap pero mantener altura */
@media (max-width: 768px) {
  #servicios .card h3 {
    white-space: normal;
    min-height: 2.4em; /* Espacio para hasta 2 líneas en móvil */
    align-items: flex-start;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
  }
}

#servicios .card p {
  margin-bottom: var(--space-md);
  color: var(--text-gray);
  line-height: 1.6;
  flex-grow: 1; /* Permitir que el párrafo crezca y empuje el botón hacia abajo */
}

#servicios .card .btn {
  margin-top: auto; /* Empujar el botón hacia la parte inferior */
  margin-bottom: 0;
  align-self: flex-start; /* Alinear el botón a la izquierda */
}

/* Asegurar que el grid tenga altura uniforme */
#servicios .grid {
  align-items: stretch;
}

#servicios .grid .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Altura responsiva para contenedores de imagen de servicios */
#servicios .img-container {
  height: clamp(180px, 25vw, 240px) !important;
  border-radius: 0px;
}

/* Responsive: ajustes para móviles */
@media (max-width: 768px) {
  #servicios .img-container {
    height: clamp(160px, 35vw, 200px) !important;
  }
  
  #servicios .card {
    margin-bottom: var(--space-lg);
  }
}

/* Optimización específica para tarjetas de servicios */
#servicios .card .card-header {
  margin: 0;
}

#servicios .card .card-header .img-container {
  border-radius: 0px;
  margin: 0;
}

#servicios .card .card-header .img-responsive {
  border-radius: 0px;
}

.card-header {
  margin-bottom: var(--space-sm);
}

/* Card headers para otras secciones (no servicios) mantienen su margen */
.card-header:not(#servicios .card .card-header) {
  margin-bottom: var(--space-sm);
}

.card-icon {
  width: clamp(32px, 6vw, 48px);
  height: clamp(32px, 6vw, 48px);
  margin-bottom: var(--space-sm);
  color: var(--primary-blue);
}

/* Asegurar centrado visual del icono en tarjetas centradas aunque el texto esté alineado a la izquierda */
#oportunidades .card .card-icon,
#proceso .card .card-icon {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
#oportunidades .card .card-icon svg,
#proceso .card .card-icon svg {
  display: inline-block !important;
}

/* Títulos más pequeños para tarjetas de proceso */
.card h4 {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  margin-bottom: var(--space-xs);
}

/* Ajustes de títulos en tarjetas de Trabajadores y Empleadores */
.grid.grid-3 .card.text-center h3,
.grid.grid-3 .card.text-center h4,
#oportunidades .card h3,
#oportunidades .card h4,
#costes .card h3,
#costes .card h4,
#derechos-laborales .card h3,
#derechos-laborales .card h4,
#info-legal .card h3,
#info-legal .card h4 {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  line-height: 1.25;
  margin-bottom: var(--space-xs);
}

/* Empleadores: Formulario y columnas laterales con títulos compactos */
#formulario-solicitud .card h2,
#formulario-solicitud .card h3,
#formulario-solicitud .card h4 {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  line-height: 1.25;
  margin-bottom: var(--space-xs);
}

/* Formularios: hacer el título principal un poco más grande (aplica a varias páginas) */
#formulario-solicitud .card:has(form) > h2,
#formulario-solicitud .card:has(form) > h3,
#formulario-solicitud .card:has(form) > h4,
#formulario-registro .card:has(form) > h2,
#formulario-registro .card:has(form) > h3,
#formulario-registro .card:has(form) > h4,
.card:has(form) > h2,
.card:has(form) > h3,
.card:has(form) > h4,
.form-card > h2,
.form-card > h3,
.form-card > h4 {
  font-size: clamp(1.2rem, 1.8vw + 0.6rem, 1.5rem);
  line-height: 1.25;
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

/* Aumentar especificidad para anular títulos compactos dentro de #formulario-solicitud/#formulario-registro */
#formulario-solicitud .form-card > h2,
#formulario-solicitud .form-card > h3,
#formulario-solicitud .form-card > h4,
#formulario-registro .form-card > h2,
#formulario-registro .form-card > h3,
#formulario-registro .form-card > h4 {
  font-size: clamp(1.2rem, 1.8vw + 0.6rem, 1.5rem);
}

/* Normalizar icono + título en tarjetas centradas (similar a 'Proceso' de la home) */
.card.text-center .card-icon { margin-bottom: var(--space-xs); }
.card.text-center .card-icon svg { width: 48px; height: 48px; }

/* Centrar iconos y alinear textos a la izquierda en secciones solicitadas */
#oportunidades .card .card-icon { display: flex; justify-content: center; }
#oportunidades .card h3,
#oportunidades .card h4,
#oportunidades .card p,
#oportunidades .card strong { text-align: left; margin-left: 0; }

/* Alinear precios (strong) a la izquierda y mostrarlos como bloque */
#oportunidades .card strong { display: block; }

#proceso .card .card-icon { display: flex; justify-content: center; }
#proceso .card h3,
#proceso .card h4,
#proceso .card p { text-align: left; margin-left: 0; }

/* Color de iconos consistente con el azul activo del menú */
#oportunidades .card .card-icon,
#oportunidades .card .card-icon svg,
#proceso .card .card-icon,
#proceso .card .card-icon svg { color: var(--philippines-blue) !important; stroke: var(--philippines-blue) !important; }

/* Quitar checkmarks manuales en listas específicas */
#testimonios ~ .card ul li,
#oportunidades ~ .card ul li,
#formulario-registro ~ .card ul li,
#formulario-solicitud ~ .card ul li,
#info-legal .card ul li,
#derechos-laborales .card ul li {
  list-style: disc inside;
}

#derechos-laborales .card.card--dark.workers-rights-card ul,
#derechos-laborales .card.card--dark.workers-rights-card ul li {
  list-style: none !important;
}

/* Alinear icono + título como en 'Proceso' de la home */
#oportunidades .card.text-center .card-icon {
  margin-bottom: var(--space-xs);
}
#oportunidades .card.text-center h4,
#oportunidades .card.text-center h3 {
  margin-top: 0;
}

/* Ajustes específicos para la sección de oportunidades en Trabajadores */
.workers-opportunities#oportunidades .card .card-icon,
.workers-opportunities#oportunidades .card.text-center .card-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(40px, 6vw, 56px);
  height: clamp(40px, 6vw, 56px);
  margin: 0 auto var(--space-md);
  color: var(--philippines-blue) !important;
  stroke: var(--philippines-blue) !important;
}

.workers-opportunities#oportunidades .card .card-icon svg {
  width: 100%;
  height: 100%;
  color: inherit !important;
  stroke: inherit !important;
}

.workers-opportunities#oportunidades .card h3,
.workers-opportunities#oportunidades .card h4 {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  line-height: 1.25;
  text-align: center;
}

.workers-opportunities#oportunidades .card p,
.workers-opportunities#oportunidades .card strong {
  font-size: clamp(0.85rem, 0.45vw + 0.7rem, 0.95rem);
  line-height: 1.45;
  text-align: center;
}

.workers-opportunities#oportunidades .card strong {
  display: block;
  margin-top: var(--space-xs);
}

/* Tipografía y jerarquía consistente para toda la página de Trabajadores */
#oportunidades > .container > h2,
#formulario-registro > .container > h2,
#testimonios-trabajadores > .container > h2,
#derechos-laborales > .container > h2 {
  font-size: clamp(1.4rem, 0.9vw + 1.1rem, 2rem);
  letter-spacing: 0.25px;
  line-height: 1.2;
}

.worker-info-card h3,
.worker-info-card .timeline-item strong,
#testimonios-trabajadores .card blockquote strong,
#derechos-laborales .card h3 {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  line-height: 1.25;
  margin-bottom: var(--space-xs);
}

.worker-info-card p,
.worker-info-card li,
.worker-info-card .timeline-item p,
#formulario-registro .card p,
#formulario-registro .card li,
#testimonios-trabajadores .card blockquote p,
#testimonios-trabajadores .card blockquote small,
#derechos-laborales .card p,
#derechos-laborales .card li,
#derechos-laborales .card strong {
  font-size: clamp(0.85rem, 0.45vw + 0.7rem, 0.95rem);
  line-height: 1.45;
}

.worker-info-card ul,
.worker-info-card .timeline {
  margin-top: 0;
  margin-bottom: 0;
}

.worker-info-card .timeline-item {
  padding-left: 1.75rem;
}

/* =============================================================================
   SECCIÓN "POR QUÉ ELEGIRNOS" - DISEÑO METRO
   ============================================================================= */

/* Contenedor principal del grid metro */
.why-metro-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Layout del grid metro */
.why-card--hero {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.why-card--compact:nth-of-type(2) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.why-card--compact:nth-of-type(3) {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
}

.why-card--wide {
  grid-column: 3 / 5;
  grid-row: 2 / 3;
}

/* Estilos base para las tarjetas */
.why-card {
  background: var(--text-white);
  border-radius: 0px;
  box-shadow: 0 4px 20px var(--shadow-soft);
  overflow: hidden;
  transition: all var(--transition-normal);
  border: 1px solid var(--border-light);
}

.why-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--shadow-medium);
}

/* Why card hero en página de inicio - esquinas completamente rectas */
#ventajas .why-card--hero {
  border-radius: 0px !important;
}

/* Variante azul oscuro para contraste */
.why-card--dark {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
  border: 1px solid var(--primary-blue);
}

.why-card--dark:hover {
  background: linear-gradient(135deg, #1a365d, #2c5aa0);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.3);
}

/* Generic dark gradient card variant reused across pages */
.card.card--dark {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
  border: 1px solid var(--primary-blue);
  transition: background var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}
.card.card--dark:hover {
  background: linear-gradient(135deg, #1a365d, #2c5aa0);
  box-shadow: 0 8px 30px rgba(37,99,235,0.3);
  transform: translateY(-2px);
}
.card.card--dark h1,
.card.card--dark h2,
.card.card--dark h3,
.card.card--dark h4,
.card.card--dark p,
.card.card--dark li,
.card.card--dark small,
.card.card--dark strong { color: var(--text-white); }
.card.card--dark ul { list-style: none; padding-left: 0; margin: 0.5rem 0 0 0; }
.card.card--dark ul li { position: relative; padding-left: 1.1em; }
.card.card--dark ul li:before { content: '✓'; position: absolute; left: 0; color: #fff; font-weight: 600; }

/* Ajustes para variantes oscuras en la página de Trabajadores */
.card.card--dark.worker-process-card {
  position: relative;
  overflow: hidden;
}

.card.card--dark.worker-process-card .timeline::before {
  background: rgba(255, 255, 255, 0.35);
}

.card.card--dark.worker-process-card .timeline-item::before {
  border-color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.card.card--dark.worker-process-card .timeline-item strong,
.card.card--dark.worker-process-card .timeline-item p {
  color: rgba(255, 255, 255, 0.9);
}

.card.card--dark.worker-process-card .timeline-item strong {
  font-weight: 600;
}

.card.card--dark.worker-process-card .timeline-item p {
  font-weight: 400;
}

.card.card--dark.workers-rights-card ul li:before {
  color: var(--philippines-yellow);
}

.card.card--dark.workers-rights-card ul {
  list-style: none !important;
  padding-left: 0;
  margin: clamp(0.5rem, 1.5vw, 0.85rem) 0 0 0;
  display: grid;
  gap: clamp(0.45rem, 1.2vw, 0.9rem);
}

.card.card--dark.workers-rights-card ul li {
  position: relative;
  list-style: none;
  padding-left: 1.25em;
  line-height: 1.55;
}

.card.card--dark.workers-rights-card ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--philippines-yellow);
  font-weight: 700;
}

.card.card--dark.workers-rights-card ul li,
.card.card--dark.workers-rights-card p,
.card.card--dark.workers-rights-card small,
.card.card--dark.workers-rights-card strong {
  color: rgba(255, 255, 255, 0.92);
}

/* Bordes rectos para tarjetas y formulario en la página de Trabajadores */
#oportunidades .card,
#informacion-trabajadores .card,
#derechos-laborales .card,
#formulario-registro .card {
  border-radius: 0 !important;
}

/* Ajustar espaciado entre secciones derechos/formulario en Trabajadores */
#derechos-laborales.section {
  padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

#formulario-registro.section {
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
}


/* Tarjeta hero con imagen */
.why-card--hero {
  display: flex;
  flex-direction: column;
}

.why-card-image {
  height: 60%;
  overflow: hidden;
}

.why-choose-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.why-card--hero:hover .why-choose-img {
  transform: scale(1.05);
}

/* Contenido de las tarjetas */
.why-card-content {
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.why-card--hero .why-card-content {
  flex: 1;
  justify-content: center;
}

/* Contenido horizontal para tarjeta wide */
.why-card-content--horizontal {
  flex-direction: row;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.why-text-section {
  flex: 1;
}

/* Iconos */
.why-icon-linear {
  color: var(--primary-blue);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.why-card--hero .why-icon-linear {
  justify-content: center;
}

/* Iconos para tarjetas oscuras */
.why-card--dark .why-icon-linear {
  color: var(--text-white);
}

/* Títulos y texto */
.why-card h3,
.why-card h4 {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

.why-card--hero h3 {
  text-align: center;
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
}

/* Títulos para tarjetas oscuras */
.why-card--dark h3,
.why-card--dark h4 {
  color: var(--text-white);
}

.why-card p {
  color: var(--text-gray);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
}

.why-card--hero p {
  text-align: center;
}

/* Texto para tarjetas oscuras */
.why-card--dark p {
  color: rgba(255, 255, 255, 0.9);
}

/* Badges y elementos extra */
.why-extra-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  margin-top: auto;
}

.why-badge {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
}

/* Badges para tarjetas oscuras */
.why-card--dark .why-badge {
  background: var(--text-white);
  color: var(--primary-blue);
}

.why-highlight {
  background: var(--bg-light);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  margin-top: auto;
}

.why-highlight small {
  color: var(--text-gray);
  line-height: 1.4;
}

/* Highlight para tarjetas oscuras */
.why-card--dark .why-highlight {
  background: rgba(255, 255, 255, 0.1);
}

.why-card--dark .why-highlight small {
  color: rgba(255, 255, 255, 0.8);
}

/* Features legales */
.why-legal-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 200px;
}

.legal-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.9rem;
}

.legal-checkmark {
  color: var(--accent-green);
  font-weight: bold;
  font-size: 1rem;
}

/* Features legales para tarjetas oscuras */
.why-card--dark .legal-item {
  color: var(--text-white);
}

.why-card--dark .legal-checkmark {
  color: #4ade80; /* Verde más claro para contraste */
}

/* Responsive para tablets */
@media (max-width: 768px) {
  .why-metro-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: clamp(0.8rem, 1.5vw, 1.2rem);
  }
  
  .why-card--hero {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    border-radius: 0px !important;
  }
  
  .why-card--compact:nth-of-type(2) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  
  .why-card--compact:nth-of-type(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  
  .why-card--wide {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
  }
  
  .why-card-content--horizontal {
    flex-direction: column;
    text-align: center;
  }
  
  .why-legal-features {
    min-width: auto;
    align-items: center;
  }
}

/* Responsive para móviles */
@media (max-width: 480px) {
  .why-metro-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
  }
  
  .why-card--hero,
  .why-card--compact:nth-of-type(2),
  .why-card--compact:nth-of-type(3),
  .why-card--wide {
    grid-column: 1 / 2;
  }
  
  .why-card--hero {
    grid-row: 1 / 2;
    border-radius: 0px !important;
  }
  
  .why-card--compact:nth-of-type(2) {
    grid-row: 2 / 3;
  }
  
  .why-card--compact:nth-of-type(3) {
    grid-row: 3 / 4;
  }
  
  .why-card--wide {
    grid-row: 4 / 5;
  }
  
  .why-card-image {
    height: 200px;
  }
}

/* =============================================================================
   FIN SECCIÓN "POR QUÉ ELEGIRNOS"
   ============================================================================= */

/* Formularios */
.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: var(--space-xs);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: clamp(0.75rem, 1.5vw, 1rem);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-family: inherit;
  transition: border-color var(--transition-fast);
  background: var(--text-white);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Utilidades ligeras usadas en Contacto y grids */
.align-start { align-items: start; }
.text-muted { color: var(--text-light); }
.text-decoration-none { text-decoration: none; }
.contact-item { display: flex; gap: var(--space-sm); align-items: flex-start; }
.contact-item + .contact-item { margin-top: var(--space-sm); }


.contact-page .contact-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1080px;
  margin: 0 auto;
}

.contact-columns {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.contact-info-card,
.contact-form-card { height: 100%; }

.contact-info-card { display: grid; gap: clamp(0.75rem, 2vw, 1rem); }

.contact-form-card { display: flex; flex-direction: column; gap: clamp(0.75rem, 2vw, 1rem); }

.contact-form .form-grid { width: 100%; }

.contact-form-heading {
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  font-weight: 600;
  margin: 0;
}

.contact-form-heading + .contact-form { margin-top: clamp(0.5rem, 1.8vw, 1rem); }

.card.card--dark .text-muted { color: rgba(255, 255, 255, 0.78); }
.card.card--dark a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
}
.card.card--dark a:hover {
  color: var(--philippines-yellow);
  text-decoration: underline;
}

.contact-facebook { display: flex; justify-content: center; }
.contact-facebook-link {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.5rem, 1.2vw, 0.75rem);
  color: var(--philippines-blue);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-facebook-link:hover { color: var(--philippines-red); }

.contact-facebook-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: rgba(26, 26, 46, 0.08);
  color: var(--primary-blue);
}

@media (min-width: 768px) {
  .contact-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-page .contact-stack { max-width: 1080px; }
}

@media (min-width: 1024px) {
  .contact-columns { grid-template-columns: 1fr 1.1fr; }
}

/* Refuerzo: centrar iconos y alinear texto a la izquierda en secciones requeridas */
#oportunidades .card .card-icon,
#proceso .card .card-icon {
  display: block !important;
}
#oportunidades .card .card-icon svg,
#proceso .card .card-icon svg {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#oportunidades .card h3,
#oportunidades .card h4,
#oportunidades .card p,
#oportunidades .card strong,
#proceso .card h3,
#proceso .card h4,
#proceso .card p {
  text-align: left !important;
}

/* === Employers & Workers Form Modern Layout === */
.employers-form .form-grid,
.workers-form .form-grid,
.contact-form .form-grid {
  display: grid;
  column-gap: var(--space-md);
  row-gap: clamp(0.75rem, 2vw, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-items: start;
}
.workers-form .form-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (min-width: 680px) { .employers-form .form-grid, .workers-form .form-grid, .contact-form .form-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 679.98px) and (min-width: 480px) { .employers-form .form-grid, .workers-form .form-grid, .contact-form .form-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .employers-form .form-grid, .workers-form .form-grid, .contact-form .form-grid { grid-template-columns: 1fr; } }

.employers-form .form-group,
.workers-form .form-group,
.contact-form .form-group { display: flex; flex-direction: column; gap: 0; margin: 0; }
.employers-form .form-group input,
.employers-form .form-group select,
.employers-form .form-group textarea,
.workers-form .form-group input,
.workers-form .form-group select,
.workers-form .form-group textarea,
.contact-form .form-group input,
.contact-form .form-group select,
.contact-form .form-group textarea { width: 100%; }

.employers-form .form-input,
.employers-form .form-select,
.employers-form .form-textarea,
.workers-form .form-input,
.workers-form .form-select,
.workers-form .form-textarea,
.contact-form .form-input,
.contact-form .form-select,
.contact-form .form-textarea {
  border-radius: 0;
}

.employers-form .form-section-title,
.workers-form .form-section-title {
  font-size: clamp(0.9rem, 0.45vw + 0.75rem, 1rem);
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 0.35rem 0 0.2rem 0;
  color: var(--philippines-blue);
  position: relative;
}
.employers-form .form-section-title::after,
.workers-form .form-section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 36px;
  height: 2px;
  background: var(--philippines-blue);
  opacity: .25;
}
.employers-form .form-section-title:not(:first-child),
.workers-form .form-section-title:not(:first-child) { margin-top: clamp(0.75rem, 2vw, 1.1rem); }

.employers-form .span-full,
.workers-form .span-full,
.contact-form .span-full { grid-column: 1 / -1; }
@media (min-width: 680px) { .employers-form .span-2, .workers-form .span-2, .contact-form .span-2 { grid-column: span 2; } }

.employers-form .form-actions,
.workers-form .form-actions,
.contact-form .form-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); }

.employers-form .sr-only,
.workers-form .sr-only,
.contact-form .sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.employers-form .form-input,
.employers-form .form-select,
.employers-form .form-textarea,
.workers-form .form-input,
.workers-form .form-select,
.workers-form .form-textarea,
.contact-form .form-input,
.contact-form .form-select,
.contact-form .form-textarea {
  padding: clamp(0.65rem, 1.2vw, 0.85rem);
  font-size: clamp(0.85rem, 0.45vw + 0.7rem, 0.95rem);
  line-height: 1.45;
}

.workers-info-grid { align-items: stretch; }
.workers-info-grid .worker-info-card { display: flex; flex-direction: column; gap: clamp(0.75rem, 2vw, 1rem); height: 100%; }
.workers-info-grid .worker-info-card ul { margin: 0; padding-left: 1.25rem; display: grid; gap: clamp(0.4rem, 1.1vw, 0.75rem); }
.workers-info-grid .worker-info-card .section-divider { margin: clamp(0.75rem, 2vw, 1.25rem) 0; border-bottom: 1px solid rgba(44, 44, 44, 0.1); }

.worker-process-card .timeline { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); position: relative; padding-left: clamp(1.25rem, 2vw, 1.75rem); }
.worker-process-card .timeline::before { content: ''; position: absolute; left: 0.35rem; top: 0.35rem; bottom: 0.35rem; width: 2px; background: rgba(26, 26, 46, 0.12); }
.worker-process-card .timeline-item { position: relative; padding-left: clamp(1.5rem, 2.5vw, 2.25rem); }
.worker-process-card .timeline-item::before { content: ''; position: absolute; left: 0; top: 0.35rem; width: 0.75rem; height: 0.75rem; border-radius: 999px; border: 2px solid var(--primary-blue); background: var(--white-pearl); box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.05); }

.workers-form-card { margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.workers-form .checkbox-group { display: flex; flex-wrap: wrap; gap: clamp(0.5rem, 1.6vw, 0.85rem) clamp(1rem, 2vw, 1.5rem); }
.workers-form .terms-group { margin-top: clamp(0.5rem, 1.5vw, 0.75rem); }
.workers-form .terms-label { align-items: center; gap: clamp(0.5rem, 1.5vw, 0.75rem); }
.workers-form .terms-label span { line-height: 1.45; display: inline; }

.checkbox-label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 500; }
.checkbox-label span { line-height: 1.4; }
.checkbox-label input[type="checkbox"] { width: auto; margin: 0; }

.alert {
  padding: clamp(0.85rem, 1.5vw, 1.1rem);
  border-radius: var(--radius-md);
  margin-bottom: clamp(0.85rem, 1.8vw, 1.25rem);
  border: 1px solid transparent;
  font-size: clamp(0.85rem, 0.45vw + 0.7rem, 0.95rem);
  line-height: 1.4;
}

.alert-success {
  background: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}

.alert-error {
  background: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}

.alert-error ul {
  margin: 0;
  padding-left: 1.5rem;
}

.price-list { display: flex; flex-direction: column; gap: clamp(0.5rem, 1.5vw, 0.85rem); margin: 0; }
.price-item { display: flex; justify-content: space-between; align-items: center; padding: clamp(0.65rem, 1.6vw, 0.9rem); background: var(--white-pearl); border-radius: var(--radius-sm); border: 1px solid rgba(44, 44, 44, 0.08); }
.price-item span { color: var(--text-light); font-weight: 500; }
.price-item strong { color: var(--philippines-blue); font-weight: 600; }

#formulario-solicitud .form-card p {
  font-size: clamp(0.85rem, 0.45vw + 0.7rem, 0.95rem);
  line-height: 1.45;
}

/* Smaller internal card titles (employers page) */
.card-int-title {
  font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.15rem);
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 var(--space-sm) 0;
  letter-spacing: .25px;
  text-transform: none;
}
/* Ensure inside dark card still white */
.card.card--dark .card-int-title { color: var(--text-white); }

/* Employers page card content harmony */
#employers-info .card-int-title,
#faq-empleadores .card-int-title,
#info-legal .card-int-title,
#costes .card-int-title,
#info-legal .legal-subtitle { font-size: clamp(0.95rem, 0.55vw + 0.8rem, 1.1rem); line-height:1.3; }

#employers-image .employers-intro-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: stretch;
}

#employers-image .service-includes {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

#employers-image .service-includes ul {
  flex-grow: 1;
  margin: 0;
}

#employers-image .card,
#employers-info .card,
#faq-empleadores .card,
#info-legal .card,
#costes .card,
#formulario-solicitud .form-card {
  border-radius: 0;
}

#costes > .container > h2,
#faq-empleadores > .container > h2 {
  font-size: clamp(1.4rem, 0.9vw + 1.1rem, 2rem);
  letter-spacing: 0.25px;
}

/* Normalize paragraph & list text inside employers related sections for consistency */
#employers-image .card p,
#employers-image .card li,
#employers-info .card p,
#faq-empleadores .card p,
#info-legal .card p,
#costes .card p,
#employers-info .card li,
#faq-empleadores .card li,
#info-legal .card li,
#costes .card li { font-size: clamp(0.85rem, 0.45vw + 0.7rem, 0.95rem); line-height:1.45; }

/* Subtle spacing tightening */
#employers-info .card ul,
#faq-empleadores .card ul,
#info-legal .card ul,
#costes .card ul { margin: 0.25rem 0 0 0; }


/* Footer */
.footer {
  background: var(--primary-dark);
  color: var(--text-white);
  padding: var(--space-xl) 0 var(--space-md);
}

.footer-content {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--space-lg);
}

/* Responsive para footer */
@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

@media (max-width: 480px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

.footer-section h4 {
  color: var(--text-white);
  margin-bottom: var(--space-sm);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: var(--space-xs);
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--accent-gold);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-md);
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

/* Placeholder para imágenes */
.image-placeholder {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-sm);
  color: var(--text-light);
  font-style: italic;
  font-size: var(--fs-small);
  line-height: 1.3;
  transition: all var(--transition-normal);
}

.image-placeholder:hover {
  border-color: var(--primary-blue);
  background: linear-gradient(135deg, #f1f3f4, #e8eaed);
}

/* Clases para imágenes optimizadas */
.img-responsive {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-md);
  transition: transform var(--transition-normal);
}

.img-container {
  overflow: hidden;
  border-radius: var(--radius-md);
  position: relative;
  background: var(--bg-light);
}

.img-container:hover .img-responsive {
  transform: scale(1.05);
}

/* Optimización específica para tarjetas de servicios */
#servicios .card .card-header {
  margin: 0;
}

#servicios .card .card-header .img-container {
  border-radius: 0px;
  margin: 0;
}

#servicios .card .card-header .img-responsive {
  border-radius: 0px;
}

/* Contenedor para imágenes circulares */
.img-circle {
  border-radius: 50%;
  overflow: hidden;
}

.img-circle .img-responsive {
  border-radius: 50%;
}

/* Utilidades */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

/* Responsive específico */
@media (max-width: 768px) {
  .main-nav {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
  }
 
  .main-nav .nav-links {
    display: none !important;
  }
  
  .mobile-menu-toggle {
    display: flex;
  }
  
  .header-actions {
    gap: var(--space-sm);
  }
  
  .cta-button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
  
  /* Header offset en mobile (sin top bar) */
  .header {
    top: 0;
  }
  
  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    gap: 0.75rem;
  }
  
  .logo-img {
    height: 35px !important;
    min-height: 35px !important;
  }
  
  .nav-link {
    font-size: 0.875rem;
    padding: 0.125rem 0;
  }
  
  .language-selector-dropdown .language-selector {
    padding: 0.125rem 0.25rem;
    font-size: 0.7rem;
  }
  
  .language-selector-dropdown .lang-link {
    padding: 0.125rem 0.25rem;
    font-size: 0.7rem;
  }

  .header .language-selector {
    gap: 0.5rem;
  }

  .header .language-selector .lang-link {
    padding: 0.25rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
  }

  .header .language-selector .lang-code,
  .header .language-selector .lang-name {
    display: none !important;
  }

  .header .language-selector .flag-img {
    width: 22px;
    box-shadow: none;
  }

  .cta-button {
    width: 100%;
    margin-top: var(--space-sm);
    text-align: center;
  }
  
  .hero {
    min-height: 80vh;
    text-align: center;
  }
  
  .hero-page {
    min-height: 18vh;
    padding: 0.5rem 0;
  }
  
  .header-content {
    flex-wrap: nowrap;
    padding: 0.75rem 0;
  }
}

/* Media query para pantallas grandes - asegurar legibilidad */
@media (min-width: 769px) {
  .main-nav {
    display: block;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-menu,
  .mobile-menu-overlay {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .nav-link {
    font-size: 0.875rem;
    padding: 0.25rem 0;
  }
  
  .nav-links {
    gap: 1.25rem;
  }
  
  .header-content {
    padding: 0.75rem 0;
    gap: 1rem;
  }
  
  .logo-img {
    height: 45px !important;
    min-height: 45px !important;
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding: 1rem;
  }
  
  .hero {
    min-height: 70vh;
  }
  
  .hero-page {
    min-height: 15vh;
    padding: 0.5rem 0;
  }
  
  .hero-page h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin-bottom: 0.75rem;
    font-weight: 600; /* Consistente con el peso reducido */
  }
  
  .hero-page h3 {
    font-size: clamp(0.85rem, 1.2vw, 0.95rem); /* Tamaño más pequeño en móvil */
    margin-bottom: 1rem;
    font-weight: 400; /* Peso menor */
  }
  
  .hero-page p {
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }
  
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  .grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   OPTIMIZACIONES DE PERFORMANCE PARA PAGESPEED
   ============================================================================= */

/* Optimización para Core Web Vitals */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

/* Optimización de fonts para prevenir FOUT */
.fonts-loaded body {
  font-family: var(--font-primary);
}

/* Estados de carga para lazy loading */
.loading {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  background-color: var(--border-light);
  background-image: linear-gradient(45deg, var(--border-light) 25%, transparent 25%),
                    linear-gradient(-45deg, var(--border-light) 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, var(--border-light) 75%),
                    linear-gradient(-45deg, transparent 75%, var(--border-light) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  animation: loading-animation 1s infinite linear;
}

.loaded {
  opacity: 1;
  animation: none;
}

@keyframes loading-animation {
  0% {
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
  100% {
    background-position: 20px 20px, 20px 30px, 30px 10px, 10px 20px;
  }
}

/* Optimización will-change para elementos animados */
.header {
  will-change: transform;
  contain: layout style;
}

.card {
  contain: layout style;
}

.card:hover {
  will-change: transform;
}

/* Optimización de imágenes para mejor LCP */
.img-responsive {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
  content-visibility: auto;
}

/* Optimización para picture elements */
picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Optimización para reducir CLS */
.img-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background-color: var(--border-light);
}

/* Prefers-reduced-motion para accesibilidad */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .loading {
    animation: none;
  }
  
  .hero {
    min-height: 35vh;
    padding: 1rem 0;
  }
}

/* Optimización para dispositivos con conexión lenta */
@media (prefers-reduced-data: reduce) {
  .hero {
    background-image: none;
    background-color: var(--primary-blue);
  }
  
  .loading {
    animation: none;
  }
}

/* Performance optimizations para mejor FID */
.btn {
  touch-action: manipulation;
}

input, textarea, select {
  touch-action: manipulation;
}

/* CSS Containment para mejor performance */
.section {
  contain: layout style;
}

.container {
  contain: layout;
}

/* GPU acceleration optimizado */
.card {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimización para mejor INP */
.card {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover {
  transform: translateY(-2px) translateZ(0);
}

/* Optimización de z-index stacking context */
.header {
  z-index: 1000;
  position: relative;
  isolation: isolate;
}

/* Critical CSS inline compatibility */
@supports (backdrop-filter: blur(10px)) {
  .header {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Performance hint para navegadores */
.hero {
  content-visibility: auto;
  contain-intrinsic-size: 100vh;
}

.hero-page {
  content-visibility: auto;
  contain-intrinsic-size: 50vh;
}

.section {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

/* =============================================================================
   FIN DE OPTIMIZACIONES
   ============================================================================= */

/* =============================================================================
   PÁGINA SERVICIOS - DISEÑO METRO MODERNO
   ============================================================================= */

.services-page {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  min-height: 100vh;
}

/* Hero Section Servicios */
.services-hero {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
  color: var(--text-white);
  padding: var(--space-xl) 0 var(--space-lg);
  margin-top: 80px;
  position: relative;
  overflow: hidden;
}

.services-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  font-size: var(--fs-h1);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}

.hero-subtitle {
  font-size: var(--fs-body);
  opacity: 0.9;
  margin-bottom: var(--space-lg);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.stat-item {
  text-align: center;
  padding: var(--space-sm);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent-gold);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Services Grid */
.services-grid-section {
  padding: var(--space-xl) 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* Service Cards - Estilo Metro */
.service-card {
  background: var(--white-pearl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px var(--shadow-soft);
  transition: all var(--transition-normal);
  position: relative;
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 40px var(--shadow-medium);
}

.service-card--featured {
  grid-column: span 2;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 2px solid var(--accent-gold);
}

.service-card--highlight {
  border-left: 4px solid var(--primary-blue);
}

.service-card--care {
  border-left: 4px solid #28a745;
}

/* Card Media */
.service-card__media {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.service-card--featured .service-card__media {
  height: 250px;
}

.service-card__image {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f1f3f4 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.image-placeholder::before {
  content: '📸';
  font-size: 3rem;
  opacity: 0.3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.placeholder-text {
  padding: var(--space-sm);
  font-size: 0.75rem;
  color: var(--text-light);
  text-align: center;
  line-height: 1.4;
  max-width: 300px;
  opacity: 0.7;
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-sm);
  font-style: italic;
}

/* Badges */
.service-card__badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 3;
}

.badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
  background: var(--accent-gold);
}

.badge--premium {
  background: linear-gradient(135deg, var(--accent-gold) 0%, #f4d03f 100%);
  color: var(--primary-dark);
}

.badge--bilingual {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
}

.badge--care {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

/* Card Content */
.service-card__content {
  padding: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-card__title {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.service-card--featured .service-card__title {
  font-size: var(--fs-h3);
  color: var(--primary-blue);
}

.service-card__summary {
  color: var(--text-light);
  margin-bottom: var(--space-md);
  line-height: 1.6;
  flex: 1;
}

.service-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md) 0;
}

.service-card__features li {
  padding: 0.5rem 0;
  color: var(--text-dark);
  font-size: 0.9rem;
  position: relative;
  padding-left: 1.5rem;
}

.service-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-gold);
  font-weight: bold;
}

.service-card__footer {
  margin-top: auto;
}

/* Buttons Metro Style */
.btn--block {
  width: 100%;
  justify-content: center;
}

.btn--primary {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(26, 26, 46, 0.3);
  background: linear-gradient(135deg, #1a365d, #2c5aa0);
  color: var(--text-white) !important;
}

.btn--outline {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.btn--outline:hover {
  background: linear-gradient(135deg, #1a365d, #2c5aa0);
  color: var(--text-white) !important;
  transform: translateY(-2px);
}

.btn--secondary {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.btn--secondary:hover {
  background: linear-gradient(135deg, #1a365d, #2c5aa0);
  transform: translateY(-2px);
  color: var(--text-white) !important;
}

.btn--care {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.btn--care:hover {
  background: linear-gradient(135deg, #1a365d, #2c5aa0);
  transform: translateY(-2px);
  color: var(--text-white) !important;
}

.btn--large {
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

/* CTA Section */
.services-cta {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-blue) 100%);
  color: var(--text-white);
  padding: var(--space-xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.services-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M20 20c0 11.046-8.954 20-20 20s-20-8.954-20-20 8.954-20 20-20 20 8.954 20 20zm0-20c11.046 0 20 8.954 20 20s-8.954 20-20 20-20-8.954-20-20 8.954-20 20-20z'/%3E%3C/g%3E%3C/svg%3E");
}

.cta-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
}

.cta-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.cta-subtitle {
  font-size: var(--fs-body);
  opacity: 0.9;
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.cta-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* Responsive Design */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  
  .service-card--featured {
    grid-column: span 1;
  }
  
  .hero-stats {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  
  .stat-number {
    font-size: 2rem;
  }
  
  .cta-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .btn--large {
    width: 100%;
    max-width: 300px;
  }
  
  .services-hero {
    padding: var(--space-lg) 0;
  }
}

@media (max-width: 480px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  .service-card__media {
    height: 150px;
  }
  
  .service-card--featured .service-card__media {
    height: 180px;
  }
  
  .placeholder-text {
    font-size: 0.7rem;
    padding: var(--space-xs);
  }
}

/* =============================================================================
   FIN ESTILOS SERVICIOS
   ============================================================================= */

/* =============================================================================
   TOP BAR Y HEADER CORREGIDO
   ============================================================================= */

/* Top bar eliminado */

/* Header principal corregido */
.header {
  background: var(--white-pearl);
  padding: 1rem 0;
  box-shadow: 0 2px 10px var(--shadow-soft);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Botón CTA corregido */
.btn.btn-primary.cta-button {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition-normal);
  box-shadow: 0 2px 8px rgba(26, 26, 46, 0.3);
  white-space: nowrap;
}

.btn.btn-primary.cta-button:hover {
  background: linear-gradient(135deg, #1a365d, #2c5aa0);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(26, 26, 46, 0.4);
  color: var(--text-white) !important;
}

.btn.btn-primary.cta-button:active {
  transform: translateY(0);
}

/* Responsive sin top bar */
@media (max-width: 768px) {
  .header-content { gap: 1rem; }
}

/* =============================================================================
   FIN TOP BAR Y HEADER CORREGIDO
   ============================================================================= */

/* =============================================================================
   PÁGINA DE SERVICIOS - ESTILO METRO ELEGANTE
   ============================================================================= */

/* Services Page Layout */
.services-page {
  background: var(--white-pearl);
  margin-top: 0;
  padding-top: 0;
}

/* Hero Section Metro */
.services-hero {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 6vw, 4rem);
  position: relative;
  overflow: hidden;
  margin-top: 0;
}

.services-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.services-hero .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.services-hero .hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.services-hero .hero-subtitle {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  opacity: 0.95;
  margin-bottom: 3rem;
  line-height: 1.4;
}

/* Hero Metrics */
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2rem;
  max-width: 600px;
  margin: 0 auto;
}

.metric-card {
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform var(--transition-normal);
}

.metric-card:hover {
  transform: translateY(-5px);
}

.metric-number {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--accent-gold);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.metric-label {
  font-size: 0.875rem;
  opacity: 0.9;
  font-weight: 500;
}

/* Services Grid Section */
.services-grid-section {
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.section-title {
  text-align: center;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 3rem;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--accent-gold);
  border-radius: 2px;
}

/* Services Metro Grid */
.services-metro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Service Tiles */
.service-tile {
  background: white;
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  border: 1px solid var(--border-light);
}

.service-tile:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Service Tile en página de inicio - esquinas completamente rectas */
#servicios .service-tile {
  border-radius: 0px !important;
}

/* Imágenes dentro de Service Tile en página de inicio - esquinas completamente rectas */
#servicios .service-tile img,
#servicios .service-tile .service-img,
#servicios .service-tile .service-image {
  border-radius: 0px !important;
}

/* Service Tile en página de servicios - esquinas completamente rectas */
.services-page .service-tile {
  border-radius: 0px !important;
}

/* Imágenes dentro de Service Tile en página de servicios - esquinas completamente rectas */
.services-page .service-tile img,
.services-page .service-tile .service-img,
.services-page .service-tile .service-image {
  border-radius: 0px !important;
}

/* Service Tile Variations */
.service-tile--large {
  grid-column: span 2;
}

.service-tile--wide {
  grid-column: span 2;
}

.service-tile--featured {
  border: 2px solid var(--accent-gold);
  position: relative;
}

.service-tile--featured::before {
  content: 'DESTACADO';
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--accent-gold);
  color: white;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  z-index: 3;
}

/* Variante oscura para service-tile */
.service-tile--dark {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  border: 1px solid var(--primary-blue);
}

.service-tile--dark:hover {
  background: linear-gradient(135deg, #1a365d, #2c5aa0);
  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.3);
}

.service-tile--dark .service-content {
  color: var(--text-white);
}

.service-tile--dark .service-title {
  color: var(--text-white);
}

.service-tile--dark .service-summary {
  color: rgba(255, 255, 255, 0.9);
}

/* Botón blanco específico para tarjetas oscuras */
.service-tile--dark .btn, 
.service-tile--dark .btn-primary, 
.service-tile--dark .btn-secondary {
  background: white !important;
  color: var(--primary-blue) !important;
  border: 2px solid white !important;
}

.service-tile--dark .btn:hover, 
.service-tile--dark .btn-primary:hover, 
.service-tile--dark .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--primary-blue) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2) !important;
}

/* Image Placeholder */
.service-image-placeholder {
  position: relative;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border: 2px dashed #ced4da;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  min-height: 200px;
}

.service-image-placeholder[data-size="400x300"] {
  min-height: 300px;
}

.service-image-placeholder[data-size="300x250"] {
  min-height: 250px;
}

.image-prompt {
  font-size: 0.875rem;
  color: #6c757d;
  line-height: 1.4;
  margin-bottom: 1rem;
  font-style: italic;
  max-width: 90%;
}

.image-dimensions {
  background: var(--primary-blue);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: monospace;
}

/* Service Images - Real Images */
.service-image {
  position: relative;
  overflow: hidden;
  border-radius: 0px;
  background: #f8f9fa;
  width: 100%;
  display: block;
  height: 200px; /* Altura fija para todas las imágenes */
}

.service-img {
  width: 100%;
  height: 200px; /* Altura fija específica */
  object-fit: cover;
  object-position: center; /* Posición center por defecto para tarjetas normales */
  transition: transform 0.3s ease;
  border-radius: 0px;
  display: block;
}

.service-tile:hover .service-img {
  transform: scale(1.05);
}

/* Optimización para diferentes tamaños de tarjeta - Altura uniforme */
.service-tile--large .service-image,
.service-tile .service-image {
  height: 200px; /* Altura fija para todas las tarjetas */
}

.service-tile--large .service-img,
.service-tile .service-img {
  height: 200px; /* Altura fija para todas las imágenes */
  object-fit: cover;
}

/* Altura aumentada para tarjetas específicas que necesitan mostrar mejor las caras */
.service-tile--hero .service-image,
.service-tile--wide .service-image {
  height: 280px; /* Altura aumentada para mostrar mejor las personas */
}

.service-tile--hero .service-img,
.service-tile--wide .service-img {
  height: 280px; /* Altura aumentada para mostrar mejor las caras */
  object-fit: cover;
  object-position: center 30%; /* Posición optimizada para mostrar caras */
}

/* Altura aumentada para las tarjetas de la primera fila (24/7 y Cuidadora) */
.services-row:first-child .service-tile .service-image {
  height: 280px; /* Altura aumentada para mostrar mejor las personas */
}

.services-row:first-child .service-tile .service-img {
  height: 280px; /* Altura aumentada para mostrar mejor las caras */
  object-fit: cover;
  object-position: center 30%; /* Posición optimizada para mostrar caras */
}

/* Altura aumentada para las tarjetas de la tercera fila (Externa 8h e Interna fin de semana) */
.services-row:nth-child(3) .service-tile .service-image {
  height: 280px; /* Altura aumentada para mostrar mejor las personas */
}

.services-row:nth-child(3) .service-tile .service-img {
  height: 280px; /* Altura aumentada para mostrar mejor las caras */
  object-fit: cover;
  object-position: center 30%; /* Posición optimizada para mostrar caras */
}

/* Ajuste específico para la primera tarjeta - mostrar mejor la cara */
.service-tile--large .service-img {
  object-position: center 40% !important; /* Mostrar más de la imagen para ver la cara, flores, manos y mesa */
}

/* Las tarjetas normales mantienen la posición por defecto */

/* Service Content */
.service-content {
  padding: 2rem;
}

.service-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.service-summary {
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* Feature Tags */
.service-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.feature-tag {
  background: var(--accent-gold);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Service CTA */
.service-cta {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

/* Call to Action Section */
.services-cta-section {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-white);
  padding: clamp(3rem, 8vw, 5rem) 0;
  text-align: center;
}

.cta-content h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.cta-content p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  opacity: 0.95;
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.btn--large {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  min-height: auto;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .services-hero {
    padding: 1.5rem 0 2rem;
    margin-top: 0;
  }
  
  .services-metro-grid {
    grid-template-columns: 1fr;
  }
  
  .service-tile--large,
  .service-tile--wide {
    grid-column: span 1;
  }
  
  /* Mantener esquinas completamente rectas en tablet */
  #servicios .service-tile,
  .services-page .service-tile {
    border-radius: 0px !important;
  }
  
  #servicios .service-tile img,
  #servicios .service-tile .service-img,
  #servicios .service-tile .service-image,
  .services-page .service-tile img,
  .services-page .service-tile .service-img,
  .services-page .service-tile .service-image {
    border-radius: 0px !important;
  }
  
  /* Altura aumentada para tarjetas específicas en tablet */
  .service-tile--hero .service-image,
  .service-tile--wide .service-image {
    height: 240px; /* Altura intermedia para tablet */
  }
  
  .service-tile--hero .service-img,
  .service-tile--wide .service-img {
    height: 240px; /* Altura intermedia para tablet */
    object-fit: cover;
    object-position: center 30%;
  }
  
  /* Altura aumentada para las tarjetas de la primera fila en tablet */
  .services-row:first-child .service-tile .service-image {
    height: 240px; /* Altura intermedia para tablet */
  }
  
  .services-row:first-child .service-tile .service-img {
    height: 240px; /* Altura intermedia para tablet */
    object-fit: cover;
    object-position: center 30%;
  }
  
  /* Altura aumentada para las tarjetas de la tercera fila en tablet */
  .services-row:nth-child(3) .service-tile .service-image {
    height: 240px; /* Altura intermedia para tablet */
  }
  
  .services-row:nth-child(3) .service-tile .service-img {
    height: 240px; /* Altura intermedia para tablet */
    object-fit: cover;
    object-position: center 30%;
  }
}

/* Fin de @media (max-width: 768px) */

@media (max-width: 768px) {
  .hero-metrics {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .metric-card {
    padding: 1rem;
  }
  
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn--large {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .services-hero {
    padding: 1rem 0 1.5rem;
    margin-top: 0;
  }
  
  .service-content {
    padding: 1.5rem;
  }
  
  .service-image-placeholder {
    padding: 1rem;
    min-height: 150px;
  }
  
  .service-image {
    height: 150px; /* Altura fija para móviles */
  }
  
  .service-tile--large .service-image,
  .service-tile .service-image {
    height: 150px; /* Altura uniforme en móviles */
  }
  
  /* Altura aumentada para tarjetas específicas en móviles */
  .service-tile--hero .service-image,
  .service-tile--wide .service-image {
    height: 220px; /* Altura aumentada pero reducida para móviles */
  }
  
  .service-tile--hero .service-img,
  .service-tile--wide .service-img {
    height: 220px; /* Altura aumentada pero reducida para móviles */
    object-fit: cover;
    object-position: center 30%;
  }
  
  /* Altura aumentada para las tarjetas de la primera fila en móviles */
  .services-row:first-child .service-tile .service-image {
    height: 220px; /* Altura aumentada pero reducida para móviles */
  }
  
  .services-row:first-child .service-tile .service-img {
    height: 220px; /* Altura aumentada pero reducida para móviles */
    object-fit: cover;
    object-position: center 30%;
  }
  
  /* Altura aumentada para las tarjetas de la tercera fila en móviles */
  .services-row:nth-child(3) .service-tile .service-image {
    height: 220px; /* Altura aumentada pero reducida para móviles */
  }
  
  .services-row:nth-child(3) .service-tile .service-img {
    height: 220px; /* Altura aumentada pero reducida para móviles */
    object-fit: cover;
    object-position: center 30%;
  }
  
  /* Mantener esquinas completamente rectas en móviles */
  #servicios .service-tile,
  .services-page .service-tile {
    border-radius: 0px !important;
  }
  
  #servicios .service-tile img,
  #servicios .service-tile .service-img,
  #servicios .service-tile .service-image,
  .services-page .service-tile img,
  .services-page .service-tile .service-img,
  .services-page .service-tile .service-image {
    border-radius: 0px !important;
  }
  
  .service-img,
  .service-tile--large .service-img,
  .service-tile .service-img {
    height: 150px; /* Altura fija para todas las imágenes en móviles */
  }
  
  .image-prompt {
    font-size: 0.8rem;
  }
}

/* =============================================================================
   FIN PÁGINA DE SERVICIOS
   ============================================================================= */

/* =============================================================================
   LAYOUT ESPECÍFICO PARA SERVICIOS - SEGÚN IMAGEN DE REFERENCIA
   ============================================================================= */

/* Contenedor principal de servicios */
.services-metro-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

/* Filas de servicios */
.services-row {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  align-items: stretch; /* Hace que todas las tarjetas tengan la misma altura */
}

/* Fila 1: Hero - 1 tarjeta ancho completo */
.services-row--hero {
  grid-template-columns: 1fr;
}

/* Fila 2: Triple - 3 tarjetas iguales */
.services-row--triple {
  grid-template-columns: repeat(3, 1fr);
}

/* Fila 3: Dual - 2 tarjetas iguales */
.services-row--dual {
  grid-template-columns: repeat(2, 1fr);
}

/* Fila 4: Single - 1 tarjeta ancho completo */
.services-row--single {
  grid-template-columns: 1fr;
}

/* Tarjetas de servicios - Layout interno */
.services-row article {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.services-row article .service-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.services-row article .service-content .btn {
  margin-top: auto;
}

/* Responsive para filas de servicios */
@media (max-width: 768px) {
  .services-row--hero,
  .services-row--triple,
  .services-row--dual,
  .services-row--single {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .services-metro-section {
    padding: clamp(2rem, 4vw, 3rem) 0;
  }
  
  .services-row {
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
  }
}

/* =============================================================================
   FIN LAYOUT SERVICIOS
   ============================================================================= */

/* =============================================================================
   PÁGINAS DE CONSULTA - NUEVO DISEÑO CON GRID
   ============================================================================= */

/* Contenedor principal para páginas de consulta */
.consultation-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 3vw, 2rem);
}

/* Grid principal para las tarjetas de consulta */
.consultation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Tarjeta que ocupa ancho completo */
.consultation-card--full {
  grid-column: 1 / -1;
}

/* Tarjetas de consulta */
.consultation-card {
  background: var(--white-pearl);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 4px 20px var(--shadow-soft);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  height: 100%;
}

.consultation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px var(--shadow-medium);
}

.consultation-card h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  text-align: center;
}

.consultation-card h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
  text-align: center;
}

.consultation-card p {
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
  color: var(--text-light);
  line-height: 1.6;
  text-align: left;
}

/* Listas de características */
.consultation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1rem);
}

.consultation-list li {
  position: relative;
  padding-left: clamp(1.5rem, 3vw, 2rem);
  color: var(--text-light);
  line-height: 1.5;
}

.consultation-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-gold);
  font-weight: bold;
  font-size: 1.1em;
}

/* Listas de beneficios */
.consultation-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.consultation-benefits li {
  padding: clamp(1rem, 2vw, 1.25rem);
  background: rgba(26, 26, 46, 0.02);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent-gold);
}

.consultation-benefits li strong {
  display: block;
  color: var(--primary-blue);
  font-weight: 600;
  margin-bottom: clamp(0.25rem, 0.5vw, 0.5rem);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
}

.consultation-benefits li p {
  margin: 0;
  color: var(--text-light);
  line-height: 1.5;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
}

/* Tarjeta de formulario */
.consultation-card--form {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* Secciones del formulario */
.form-section {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.form-section h3 {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: clamp(1rem, 2vw, 1.25rem);
  text-align: left;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* Contenedor del formulario de consulta - mantener para compatibilidad */
.consultation-form-container {
  background: var(--white-pearl);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 4px 20px var(--shadow-soft);
  max-width: 600px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}

.consultation-form-container h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}

/* Formulario específico para consultas */
.consultation-form .form-group {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.consultation-form .form-label {
  display: block;
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
}

.consultation-form .form-input,
.consultation-form .form-textarea,
.consultation-form .form-select {
  width: 100%;
  padding: clamp(0.75rem, 1.5vw, 1rem);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  font-family: inherit;
  transition: border-color var(--transition-fast);
  background: var(--text-white);
}

.consultation-form .form-input:focus,
.consultation-form .form-textarea:focus,
.consultation-form .form-select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.1);
}

.consultation-form .form-textarea {
  resize: vertical;
  min-height: clamp(100px, 15vw, 120px);
}

.consultation-form .btn {
  width: 100%;
  justify-content: center;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
}

/* Responsive para páginas de consulta */
@media (max-width: 768px) {
  .consultation-grid {
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
  }
  
  .consultation-card--full {
    grid-column: 1;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: clamp(0.75rem, 1.5vw, 1rem);
  }
  
  .consultation-container {
    padding: clamp(1.5rem, 4vw, 2rem) clamp(0.75rem, 2vw, 1rem);
  }
}

@media (max-width: 480px) {
  .consultation-card {
    padding: clamp(1rem, 3vw, 1.5rem);
  }
  
  .consultation-form-container {
    padding: clamp(1.5rem, 4vw, 2rem);
    margin-top: clamp(1.5rem, 3vw, 2rem);
  }
}

/* =============================================================================
   FIN ESTILOS PÁGINAS DE CONSULTA
   ============================================================================= */
/* Consultation Overview Cards */
.consultation-overview {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.consultation-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

.consultation-card {
  background: var(--white-pearl);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  box-shadow: 0 4px 20px var(--shadow-soft);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  height: 100%;
  position: relative;
}

.consultation-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px var(--shadow-medium);
}

.consultation-card h2,
.consultation-card h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

.consultation-card p {
  margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
  color: var(--text-light);
  line-height: 1.6;
}

.consultation-list,
.consultation-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.1rem);
}

.consultation-list li {
  position: relative;
  padding-left: clamp(1.25rem, 2.5vw, 1.5rem);
  color: var(--text-light);
  line-height: 1.5;
}

.consultation-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--primary-blue);
}

.consultation-benefits li {
  border-left: 3px solid rgba(var(--primary-color-rgb), 0.35);
  padding-left: clamp(0.75rem, 1.5vw, 1rem);
}

.consultation-benefits strong {
  display: block;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--primary-blue);
  margin-bottom: clamp(0.25rem, 1vw, 0.4rem);
}

.consultation-benefits p {
  margin: 0;
  color: var(--text-light);
  line-height: 1.6;
}

.consultation-card--full {
  grid-column: 1 / -1;
}

.consultation-card--form {
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* CTA Banner Styles */
.consultation-card--cta {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  box-shadow: 0 8px 24px rgba(26, 26, 46, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.consultation-card--cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26, 26, 46, 0.3);
}

.cta-banner {
  display: flex;
  align-items: stretch;
  gap: 2rem;
  padding: 2rem;
  color: white;
}

.cta-content {
  flex: 1;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.cta-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.cta-icon svg {
  color: white;
}

.cta-text {
  flex: 1;
}

.cta-text h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  color: white;
}

.cta-text p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1rem 0;
  color: rgba(255, 255, 255, 0.95);
}

.cta-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
}

.cta-features li {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  padding: 0;
}

.cta-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  background: white;
  color: #1a1a2e;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-cta:hover {
  background: #d4af37;
  color: #1a1a2e;
  transform: translateX(4px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4);
}

.btn-cta svg {
  transition: transform 0.3s ease;
}

.btn-cta:hover svg {
  transform: translateX(4px);
}

@media (min-width: 992px) {
  .consultation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .consultation-card--full {
    grid-column: 1 / -1;
  }
}

@media (max-width: 968px) {
  .cta-banner {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .cta-content {
    flex-direction: column;
    gap: 1rem;
  }
  
  .cta-icon {
    width: 56px;
    height: 56px;
  }
  
  .cta-text h3 {
    font-size: 1.25rem;
  }
  
  .cta-features {
    grid-template-columns: 1fr;
  }
  
  .cta-action {
    justify-content: center;
  }
  
  .btn-cta {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consultation-card {
    transition: none;
  }
  .consultation-card:hover {
    transform: none;
  }
}

/* ====================
   Contact Hero Banner
   ==================== */

.contact-hero-banner {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  margin-top: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}

.contact-hero-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.hero-banner-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.hero-banner-content h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 clamp(0.75rem, 2vw, 1rem);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-banner-content > p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-weight: 400;
}

.contact-options {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

.contact-option {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 2vw, 1.25rem);
  background: rgba(255, 255, 255, 0.95);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 12px;
  text-decoration: none;
  color: #2c2c2c;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  flex: 1 1 280px;
  max-width: 400px;
  min-width: 280px;
}

.contact-option:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  background: #ffffff;
}

.contact-option svg {
  flex-shrink: 0;
  width: clamp(32px, 5vw, 40px);
  height: clamp(32px, 5vw, 40px);
  stroke-width: 2;
}

.contact-option--phone svg {
  stroke: #dc2626;
}

.contact-option--email svg {
  stroke: #10b981;
}

.contact-option div {
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 0.5vw, 0.375rem);
  text-align: left;
}

.contact-option strong {
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  font-weight: 700;
  color: #0a0a0a;
  line-height: 1.2;
}

.contact-option span {
  font-size: clamp(0.9375rem, 2vw, 1.125rem);
  font-weight: 600;
  color: #666666;
  line-height: 1.3;
}

.contact-option small {
  font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
  color: #999999;
  font-weight: 400;
  font-style: italic;
}

@media (max-width: 768px) {
  .contact-options {
    flex-direction: column;
    align-items: center;
  }
  
  .contact-option {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .contact-hero-banner {
    padding: clamp(2rem, 5vw, 2.5rem) 0;
  }
  
  .contact-option {
    flex-direction: column;
    text-align: center;
    padding: clamp(1.5rem, 4vw, 2rem);
  }
  
  .contact-option div {
    align-items: center;
    text-align: center;
  }
}