/* =====================================================================
   Goldstone Immigration — Refresh visual 2026 (v2)
   Modernización manteniendo la identidad naranja. Reversible: quitar el
   <link> a este archivo restaura el diseño previo.
   REGLA DE ORO: nunca forzar color de texto de forma global (rompe el
   texto blanco del héroe y del footer). El color se ajusta por contexto.
   ===================================================================== */

:root {
  --gs-ink: #1a2030;          /* texto principal sobre claro */
  --gs-ink-soft: #4b5568;     /* texto secundario sobre claro */
  --gs-primary: #ff914d;      /* naranja marca */
  --gs-primary-600: #f4772a;
  --gs-primary-700: #d95f18;  /* naranja profundo (texto/acento sobre blanco) */
  --gs-accent: #ec2026;
  --gs-warm-50: #fff8f3;      /* fondo cálido casi blanco */
  --gs-warm-100: #fff1e8;
  --gs-line: rgba(20, 25, 45, 0.09);
  --gs-shadow-sm: 0 1px 2px rgba(20,25,45,.05), 0 3px 8px rgba(20,25,45,.05);
  --gs-shadow-md: 0 10px 30px -12px rgba(20,25,45,.16), 0 4px 10px -6px rgba(20,25,45,.08);
  --gs-shadow-lg: 0 30px 60px -20px rgba(217,95,24,.30), 0 10px 24px -14px rgba(20,25,45,.16);
  --gs-radius: 18px;
}

/* ---------------- Tipografía ---------------- */
html { scroll-behavior: smooth; }

body, body.font-sans {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  color: var(--gs-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, .font-bold, .font-semibold {
  font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.021em;
  color: inherit;
}
h1 { line-height: 1.04; }
h2 { line-height: 1.1; }
h2.text-4xl, h2.text-3xl { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.leading-tight { line-height: 1.06 !important; }

/* Color de texto SOLO donde el fondo es claro/blanco (nunca global). */
section.bg-white p:not([class*="text-"]),
section.bg-gray-50 p:not([class*="text-"]) { color: var(--gs-ink-soft); }

/* Naranja con buen contraste como texto sobre blanco */
.text-primary { color: var(--gs-primary-700) !important; }

/* Links con transición suave */
a, button { transition: color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease; }

/* ---------------- Héroe ---------------- */
.hero { background-position: center; }
.hero-overlay {
  background:
    linear-gradient(180deg, rgba(14,17,30,.20) 0%, rgba(14,17,30,.06) 32%, rgba(14,17,30,.60) 100%),
    linear-gradient(120deg, rgba(217,95,24,.60) 0%, rgba(236,32,38,.40) 55%, rgba(14,17,30,.30) 100%) !important;
  opacity: 1 !important;
}
.hero, .hero * { }
.hero .hero-content h1 { text-shadow: 0 2px 20px rgba(8,10,20,.35); }
/* Asegura que el texto del héroe se mantenga BLANCO y legible */
.hero .hero-content p,
.hero .hero-content .opacity-90,
.hero .hero-content h3 { color: #fff !important; }
.hero .hero-content p { opacity: .96 !important; text-shadow: 0 1px 12px rgba(8,10,20,.30); }
.hero .backdrop-blur-sm {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 24px 60px -28px rgba(0,0,0,.55);
}

/* ---------------- Botones ---------------- */
.hero a[href="#contact"] { box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); }
.hero a[href="#contact"]:hover { transform: translateY(-2px); }
.hero a[href="consultation.html"]:hover { transform: translateY(-2px); }

/* CTA sólidos de marca (los botones grandes de secciones) */
a[class*="from-red-600"][class*="to-red-700"],
a[class*="from-orange-500"][class*="to-red-500"].inline-flex {
  box-shadow: 0 16px 30px -14px rgba(217,95,24,.5) !important;
}

/* ---------------- Fondos de sección: calmar los degradados ---------------- */
/* Sustituye los lavados naranja saturados por tonos cálidos casi blancos */
section.bg-gradient-to-r.from-orange-50,
section.bg-gradient-to-br.from-orange-50,
section.bg-gradient-to-r.from-red-50,
section.bg-gradient-to-br.from-white.via-orange-50,
section[class*="from-orange-50"],
section[class*="from-red-50"] {
  background: linear-gradient(180deg, var(--gs-warm-50) 0%, #ffffff 60%) !important;
}
section.py-16, section.py-20 { padding-top: 5.5rem; padding-bottom: 5.5rem; }

/* ---------------- Encabezados de sección ---------------- */
section .text-center > h2,
section .container > .text-center h2 { margin-bottom: .5rem; }
section .text-center > h2.text-4xl::after,
section .text-center > h2.text-3xl::after,
section .text-center h2[class*="text-5xl"]::after {
  content:""; display:block; width:60px; height:4px; margin:16px auto 0;
  border-radius:999px; background:linear-gradient(90deg,var(--gs-primary),var(--gs-accent));
}

/* ---------------- Tarjetas: sistema unificado ---------------- */
section .bg-white.rounded-xl,
section .bg-white.rounded-2xl,
section .bg-white.rounded-3xl,
section .bg-white.shadow-lg,
section .bg-white.shadow-md,
section .bg-white.shadow-xl,
section .bg-white.p-8,
section .bg-white.p-6 {
  border: 1px solid var(--gs-line);
  border-radius: var(--gs-radius) !important;
  box-shadow: var(--gs-shadow-md) !important;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
section .bg-white.rounded-xl:hover,
section .bg-white.rounded-2xl:hover,
section .bg-white.rounded-3xl:hover,
section .bg-white.shadow-lg:hover,
section .bg-white.shadow-md:hover,
section .bg-white.shadow-xl:hover {
  transform: translateY(-6px);
  box-shadow: var(--gs-shadow-lg) !important;
}

/* ---------------- Íconos circulares: un solo tratamiento de marca ---------------- */
/* Todas las burbujas de ícono con degradado pasan a un naranja de marca coherente
   (menos “arcoíris” rojo-naranja-amarillo). El texto/ícono interior sigue blanco. */
[class*="bg-gradient-to-r"].rounded-full.w-16.h-16,
[class*="bg-gradient-to-r"].rounded-full.w-20.h-20,
[class*="bg-gradient-to-r"].rounded-full.w-12.h-12,
[class*="bg-gradient-to-r"].rounded-full.p-4,
[class*="bg-gradient-to-r"].rounded-full.p-2 {
  background: linear-gradient(135deg, var(--gs-primary) 0%, var(--gs-primary-700) 100%) !important;
  box-shadow: 0 12px 24px -12px rgba(217,95,24,.55);
}
/* Burbujas tenues (who-we-are) */
.bg-primary.bg-opacity-10.rounded-full {
  background: var(--gs-warm-100) !important;
  box-shadow: inset 0 0 0 1px rgba(217,95,24,.12);
}

/* Píldoras/insignias con degradado saturado -> marca sobria */
span[class*="from-orange-500"][class*="to-red-500"].rounded-full,
span[class*="from-red-500"][class*="to-orange-500"].rounded-full {
  background: linear-gradient(135deg, var(--gs-primary-600), var(--gs-primary-700)) !important;
}
/* Divisores tipo barra */
.w-24.h-1[class*="from-orange-500"], .w-24.h-1[class*="to-red-500"] {
  background: linear-gradient(90deg,var(--gs-primary),var(--gs-accent)) !important;
}

/* ---------------- Navegación ---------------- */
#main-header { box-shadow: 0 1px 0 var(--gs-line), 0 10px 30px -22px rgba(20,25,45,.30) !important; }
#main-header nav a.font-medium { position: relative; color: var(--gs-ink); }
#main-header nav a.font-medium::after {
  content:""; position:absolute; left:0; bottom:-5px; width:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gs-primary),var(--gs-accent)); transition:width .25s ease;
}
#main-header nav a.font-medium:hover::after { width:100%; }

/* ---------------- Footer ---------------- */
footer.bg-gray-900 { background:#12151f !important; padding-top:4rem; padding-bottom:2.5rem; }
footer .text-gray-400 { color:#aab2c5 !important; }         /* mejor contraste que el gris original */
footer h4 { color:#fff !important; letter-spacing:.01em; }
footer a.hover\:text-white:hover { color:#fff !important; }
footer .border-gray-800 { border-color:rgba(255,255,255,.10) !important; }

/* ---------------- Accesibilidad ---------------- */
a:focus-visible, button:focus-visible { outline:3px solid rgba(255,145,77,.6); outline-offset:2px; border-radius:6px; }
img { max-width:100%; height:auto; }