/**
 * Spectrum Resources — Shared Styles
 * Paleta oficial Spectrum Resources
 */

html, body {
  overflow-x: hidden;
  max-width: 100%;
}


/* ── Paleta oficial ─────────────────────────────────────────────────────── */
:root {
  /* CORE */
  --sr-black:       #061118;   /* Negro Profundo */
  --sr-navy:        #071A24;   /* Azul Institucional */
  --sr-petrol:      #15DEF3A;  /* Azul Petróleo — aprox. */
  --sr-white:       #FFFFFF;

  /* SPECTRUM */
  --sr-tech-blue:   #1B6B8A;   /* Azul Técnico */
  --sr-green:       #2F5E5B;   /* Verde Transición */
  --sr-celeste:     #4A8FA0;   /* Celeste Estratégico */
  --sr-gray-blue:   #8A9BA8;   /* Gris Azulado */

  /* ACCENT */
  --sr-teal:        #1B8FA6;   /* Verde Acción (marca existente) */
  --sr-light-gray:  #E8EEF0;   /* Gris Claro */

  /* Gradiente de la barra superior — colores institucionales */
  --sr-gradient: linear-gradient(
    90deg,
    #071A24  0%,
    #1B6B8A  30%,
    #2F5E5B  55%,
    #1B8FA6  75%,
    #4A8FA0  100%
  );
}

/* ── Barra accent superior (2px) ────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--sr-gradient);
  z-index: 9999;
  pointer-events: none;
}

/* ── Animación scroll ────────────────────────────────────────────────────── */
.anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s cubic-bezier(0.16,1,0.3,1);
}
.anim.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Etiquetas de sección (texto pequeño uppercase encima de títulos) ────── */
/* Cualquier <p> con clase text-xs + uppercase + tracking-widest + text-gray-400
   dentro de una sección light recibe color institucional sutil */
.sr-label,
p.text-xs.font-bold.uppercase.tracking-widest {
  color: var(--sr-tech-blue) !important;
  opacity: 0.75;
}

/* En secciones oscuras (fondo #061118) las etiquetas vuelven a teal claro */
[style*="background:#061118"] p.text-xs.font-bold.uppercase.tracking-widest,
[style*="background:#061118"] .sr-label {
  color: var(--sr-celeste) !important;
  opacity: 0.85;
}

/* ── Subtítulos / párrafos semibold bajo h1/h2 ──────────────────────────── */
/* Selector apunta a párrafos semibold de descripción en hero y secciones */
p.text-sm.font-semibold.text-gray-700 {
  color: #2a4a4a !important;  /* navy-teal muy sutil, no negro puro */
}

/* ── Stat numbers en strips ─────────────────────────────────────────────── */
/* Los números grandes en strips de stats reciben color petrol */
.text-4xl.font-black,
.text-3xl.font-black,
.text-2xl.font-black {
  color: var(--sr-navy);
}

/* text-white siempre gana sobre las reglas de color anteriores */
.text-white.font-black,
.font-black.text-white {
  color: #ffffff !important;
}

/* En secciones oscuras los números quedan blancos */
[style*="background:#061118"] .text-4xl.font-black,
[style*="background:#061118"] .text-3xl.font-black,
[style*="background:#061118"] .text-2xl.font-black {
  color: #ffffff !important;
}

/* ── Nav links: línea gruesa en activo y hover ──────────────────────────── */
nav ul a {
  font-size: 0.97rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

nav ul a {
  position: relative;
  padding-bottom: 3px;
}
nav ul a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 3px;
  background: var(--sr-navy);
  border-radius: 2px;
  transition: width 0.25s cubic-bezier(0.16,1,0.3,1);
}
nav ul a:hover::after {
  width: 100%;
}
nav ul a.sr-active::after {
  width: 100%;
  background: var(--sr-navy);
}
nav ul a.sr-active {
  color: #111 !important;
  font-weight: 700;
}

/* ── Mega menú Capacidades ───────────────────────────────────────────────── */
.sr-mega {
  position: fixed;
  top: 80px; left: 0; right: 0;
  background: #fff;
  border-top: 2px solid #1B8FA6;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 16px 48px rgba(0,0,0,0.10);
  visibility: hidden;
  z-index: 48;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  pointer-events: none;
}
.sr-mega.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
  pointer-events: auto;
}
.sr-mega-inner {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}
.sr-mega-left {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid #e5e7eb;
  padding: 1.25rem 0;
}
.sr-mega-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1.05rem 1.75rem;
  font-size: 0.97rem;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
  cursor: pointer;
}
.sr-mega-item:hover, .sr-mega-item.sr-mega-active {
  background: #f0f9fb;
  color: #1B8FA6;
  border-left-color: #1B8FA6;
}
.sr-mega-right {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  padding: 1.75rem 2.5rem;
  min-height: 190px;
}
.sr-mega-thumb {
  width: 180px;
  height: 130px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  transition: opacity .2s ease;
}
.sr-mega-info { flex: 1; }
.sr-mega-info strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 0.5rem;
  letter-spacing: -.01em;
}
.sr-mega-info p {
  font-size: 0.825rem;
  color: #6b7280;
  line-height: 1.65;
  margin-bottom: 1rem;
  min-height: 6rem;
}
.sr-mega-info a.sr-mega-cta {
  font-size: .7rem;
  font-weight: 700;
  color: #1B8FA6;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
}
.sr-mega-info a.sr-mega-cta:hover { opacity: .7; }

/* ── Línea decorativa bajo etiqueta en headers de sección ───────────────── */
.sr-section-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--sr-green);
  margin-bottom: 1rem;
  border-radius: 2px;
}

/* ── Links de acción (texto con ↗) ──────────────────────────────────────── */
a.text-xs.font-bold.uppercase.tracking-wider.text-gray-900:hover {
  color: var(--sr-tech-blue) !important;
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::selection { background: var(--sr-teal); color: #fff; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--sr-light-gray); }
::-webkit-scrollbar-thumb { background: var(--sr-gradient); border-radius: 999px; }

/* ── Arrow link helper ───────────────────────────────────────────────────── */
.arrow-link::after { content: ' ↗'; }

/* ── Dark CTA sections: animated teal ambient glow ─────────────────────── */
.sr-cta-glow {
  position: relative;
  overflow: hidden;
}
.sr-cta-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 130% at 92% 50%, rgba(27,143,166,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 35% 70%  at  8% 85%, rgba(27,143,166,0.06) 0%, transparent 55%);
  animation: ctaGlow 9s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.sr-cta-glow > * { position: relative; z-index: 1; }
@keyframes ctaGlow {
  0%   { opacity: .5;  transform: scale(1)    translateY(0); }
  100% { opacity: 1;   transform: scale(1.06) translateY(-4%); }
}

/* ── Fade-up keyframe ────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Hero line-reveal (texto sube desde su propia línea) ────────────────── */
.line-wrap { display:block; overflow:hidden; }
.line-text  { display:block; transform:translateY(105%); animation:lineUp .85s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes lineUp { to { transform:translateY(0); } }

/* ── Hero estándar de páginas interiores ─────────────────────────────────── */
/* Altura fija, texto anclado al fondo, bg-hero.webp como fondo sutil         */
.sr-hero {
  background-color: #f0f2f3;
  padding-top: 80px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  animation: heroBlob 16s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroBlob {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(-35px, 28px) scale(1.07); }
  65%  { transform: translate(28px, -22px) scale(0.94); }
  100% { transform: translate(-55px, 45px) scale(1.13); }
}
.sr-hero-body {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 3rem 3rem 3.5rem;
}
@media (max-width: 1024px) {
  .sr-hero-body { padding: 2.5rem 1.5rem 3rem; }
}
@media (max-width: 640px) {
  .sr-hero { min-height: 280px; }
  .sr-hero-body { padding: 2rem 1.25rem 2.5rem; }

  /* Mobile menu items: prevent text overflow */
  #mobileMenu ul li a { font-size: 1.5rem; }

  /* Reduce section vertical padding on mobile */
  .py-20 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .py-28 { padding-top: 3.5rem; padding-bottom: 3.5rem; }

  /* Globe min-height on mobile */
  #globeWrap { max-width: 320px !important; }

  /* Image-based heroes (sectores, capacidades): reduce height */
  [style*="min-height:520px"] { min-height: 420px !important; }
  [style*="min-height:500px"] { min-height: 360px !important; }

  /* Hero content inside image heroes: less top padding */
  .pt-28 { padding-top: 4.5rem !important; }
  .pb-14 { padding-bottom: 2rem   !important; }
  .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

  /* Sector/cap hero h1 — prevent overflow on narrow screens */
  section.relative h1.text-4xl,
  section.relative h1 { font-size: 2rem   !important; line-height: 1.05 !important; }

  /* Sector hero stats strip: 2-col always on mobile */
  [style*="min-height:520px"] .grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer: reduce padding on mobile */
  footer > div { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

/* ── Footer tablet layout (sm–lg): 2-col grid ──────────────────────────── */
@media (min-width: 641px) and (max-width: 1023px) {
  footer .grid.lg\:grid-cols-12 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  footer .lg\:col-span-4 { grid-column: span 2 / span 2 !important; }
  footer .lg\:col-span-2 { grid-column: span 1 / span 1 !important; }
}