/* =========================================================
   JOSMA SpA – Corporate Theme
   Optimized for contrast, accessibility & brand consistency
   ======================================================== */

/* ---------- Brand palette ---------- */
:root {
  --josma-blue:        #1800AD;  /* Azul logotipo */
  --josma-blue-ink:    #1B00A7;  /* Azul texto */
  --josma-green:       #88C932;  /* Verde institucional */
  --josma-green-700:   #6EAD25;  /* Verde hover accesible */
  --navbar-bg:         #EAF3FF;  /* Fondo navbar claro */
  --navbar-bg-2:       #DCEAFF;  /* Variante para gradiente */
}

/* =========================================================
   NAVBAR
   Fondo claro para destacar logo
   Enlaces en azul, hover en verde institucional
   ======================================================== */
.navbar {
  background-color: var(--navbar-bg) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.navbar .nav-link {
  color: var(--josma-blue-ink) !important;
  opacity: 1 !important;
  font-weight: 500;
  position: relative;
  transition: color 0.15s ease;
  outline: none;
}

/* Hover / Focus / Active */
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: var(--josma-green) !important;
}

/* Subrayado sutil al foco (teclado) */
.navbar .nav-link:focus-visible {
  color: var(--josma-green) !important;
  text-decoration: none;
}
.navbar .nav-link:focus-visible::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  bottom: 0.35rem;
  height: 2px;
  background: var(--josma-green);
  border-radius: 2px;
}

/* Actual */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  color: var(--josma-green) !important;
  font-weight: 600;
}

/* Dropdown */
.dropdown-menu {
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.dropdown-item {
  color: var(--josma-blue-ink);
  outline: none;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(136, 201, 50, 0.12);
  color: var(--josma-blue-ink);
}
.dropdown-item:focus-visible {
  outline: 3px solid var(--josma-green);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* Navbar toggler (hamburger) accesible */
.navbar-toggler {
  border-color: transparent !important;
  outline: none;
}
.navbar-toggler:focus-visible {
  outline: 3px solid var(--josma-green);
  outline-offset: 3px;
  border-radius: 0.5rem;
}

/* Navbar gradiente opcional */
.navbar.navbar-gradient {
  background: linear-gradient(180deg, var(--navbar-bg), var(--navbar-bg-2)) !important;
}

/* =========================================================
   BUTTONS
   Verde institucional, sin tonos dorados
   ======================================================== */
.btn-cta {
  background-color: var(--josma-green) !important;
  color: #fff !important;
  border: none !important;
  transition: background-color 0.25s ease, transform 0.15s ease;
  font-weight: 600;
}

.btn-cta:hover,
.btn-cta:focus {
  background-color: var(--josma-green-700) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

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

/* Outline light adaptado */
.btn-outline-light {
  color: var(--josma-blue-ink) !important;
  border-color: var(--josma-blue-ink) !important;
  background: transparent !important;
}
.btn-outline-light:hover,
.btn-outline-light:focus {
  background-color: var(--josma-blue-ink) !important;
  border-color: var(--josma-blue-ink) !important;
  color: #fff !important;
}

/* =========================================================
   ACCENTS & ACCESSIBILITY
   ======================================================== */
.text-accent {
  color: var(--josma-blue) !important;
}

/* Focus ring accesible global */
:focus-visible {
  outline: 3px solid var(--josma-green) !important;
  outline-offset: 2px !important;
  border-radius: 0.5rem;
}

/* =========================================================
   BRAND ASSETS
   ======================================================== */
.navbar-brand img,
.brand-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 991.98px) {
  .navbar-brand img,
  .brand-logo {
    height: 36px;
  }
}

/* =========================================================
   DARK MODE (automático)
   ======================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --navbar-bg: #0f1530;
    --navbar-bg-2: #121a3a;
  }

  .navbar,
  .navbar.navbar-gradient {
    background: linear-gradient(180deg, var(--navbar-bg), var(--navbar-bg-2)) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  }

  .navbar .nav-link {
    color: #e7eaff !important;
  }
  .navbar .nav-link:hover,
  .navbar .nav-link:focus {
    color: var(--josma-green) !important;
  }
  .navbar .nav-link.active,
  .navbar .nav-link[aria-current="page"] {
    color: var(--josma-green) !important;
  }

  .dropdown-menu {
    background: #111831;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  }
  .dropdown-item {
    color: #e7eaff;
  }
  .dropdown-item:hover,
  .dropdown-item:focus {
    background: rgba(136, 201, 50, 0.18);
    color: #fff;
  }

  .btn-cta {
    background-color: var(--josma-green) !important;
    color: #091224 !important;
  }
  .btn-cta:hover,
  .btn-cta:focus {
    background-color: var(--josma-green-700) !important;
    color: #0b1326 !important;
  }
}

/* =========================================================
   GLOBAL LINKS FOCUS (refuerzo)
   ======================================================== */
a:focus-visible {
  outline: 3px solid var(--josma-green);
  outline-offset: 2px;
  border-radius: 0.35rem;
}
/* =========================================================
   RESTORE BACKGROUNDS (Hero + sections)
   ======================================================== */
    
/* Fondo general muy sutil para que no quede “plano” */
body{
  background: #f7f9fc; /* casi blanco con tinte frío */
}

/* Sección genérica */
.section{ padding: 64px 0; }

/* Sección con fondo suave (usada en Contacto y otras) */
.bg-section{
  background: linear-gradient(180deg, #f6fbff 0%, #f2f7ff 100%);
}

/* ----- HERO ----- */

/* Contenedor del hero */
.hero{
  position: relative;
  overflow: hidden;
  color: #fff;
  /* Gradiente azul petróleo (profesional, técnico) */
  background: linear-gradient(180deg, #0e2e50 0%, #07253d 100%);
  /* si tu header fijo tapa el inicio, ajusta el padding-top según el alto del navbar */
  padding-top: 96px; /* ajusta si tu navbar es más bajo/alto */
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* “brillo” suave a la derecha del hero */
.hero-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(800px 400px at 85% 20%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(600px 300px at 70% 0%, rgba(255,255,255,.08), transparent 60%);
  mix-blend-mode: screen;
}

/* Card del logo dentro del hero (si la estás usando) */
.hero-logo-card{
  background: #fff;
  border-radius: 16px;
  padding: 16px 20px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

/* Imagen del hero (si va como <img>, no como background) */
.hero img,
.hero .hero-logo{
  display:block;
  max-width:100%;
  height:auto;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}

/* Suaviza las tarjetas para que “floten” sobre los bg */
.shadow-soft{
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Ajustes responsivos */
@media (max-width: 991.98px){
  .hero{ padding-top: 80px; padding-bottom: 40px; }
}
/* =========================================================
   RESTAURACIÓN DE FONDOS Y SECCIONES JOSMA
   ======================================================== */
    
/* ----- General ----- */
section {
  padding: 90px 0;
  position: relative;
  z-index: 1;
}

/* Fondo principal (blanco limpio) */
section:nth-of-type(odd) {
  background: #ffffff;
}

/* Fondo alternado (azulado suave) */
section:nth-of-type(even) {
  background: linear-gradient(180deg, #f6f9fc 0%, #edf3f9 100%);
}

/* Para secciones con la clase específica .bg-section (por ejemplo contacto) */
.bg-section {
  background: linear-gradient(180deg, #f2f7fc 0%, #e9f0f9 100%) !important;
}

/* Borde superior y sombra sutil entre secciones */
section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.05);
}

/* Card estandarizadas */
.card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Textos */
section h2, section h3 {
  color: #0d1a3d;
  font-weight: 600;
}

section p {
  color: #374151;
}

/* Suaviza el fondo del bloque contacto para integrarse con el CTA */
#contacto {
  background: linear-gradient(180deg, #f5f9fc 0%, #edf5fc 100%);
}