/* =================== Bienvenidos — estilos comentados =================== */
/* Pegar este bloque al final de secciones/assets/styles.css */

/* ---------- Variables globales (colores / efecto neón) ----------
   Definimos variables para usar de forma coherente en todo el bloque.
   Cambia estas variables si querés otro color principal.
*/
:root{
  --neon: #00eaff;                    /* color principal neón */
  --neon-soft: rgba(0,234,255,.65);   /* versión suave para sombras */
}

/* ---------- Contenedor principal (.fixed-banner) ----------
   - Asegura que la sección ocupe un área visible (min-height) y que el fondo no desborde.
   - No toca los márgenes del contenido exterior.
*/
.fixed-banner {
  position: relative;     /* necesario para posicionar fondo absoluto y overlays */
  width: 100%;
  overflow: hidden;       /* evita scroll involuntario por transform/scale del fondo */
  background: #000;       /* fallback si la imagen no carga */
  min-height: 56vh;       /* altura inicial (responsive) */
  display: block;
}

/* Desktop: aumentamos la altura mínima para pantallas grandes */
@media (min-width: 200px) {
  .fixed-banner { min-height: 42vh; }
}

/* ---------- Fondo absoluto (.fixed-bg) ----------
   - Aquí se usa la inline style background-image que ya tenés en el PHP:
     <div class="fixed-bg" style="background-image:url('...')">
   - El CSS asegura cover/center y un ligero scale para evitar bordes negros.
   - TRANSFORM/transition permiten añadir ligeros efectos sin romper layout.
*/
.fixed-banner .fixed-bg {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;        /* fill sin deformar (recorta si hace falta) */
  background-position: center center;
  transform: scale(1.03);         /* ligero zoom para evitar gap en responsive */
  will-change: transform;
  transition: transform .6s ease;
  filter: saturate(.98) contrast(1);
}

/* ---------- Overlay oscuro (.fixed-banner::before) ----------
   - Crea un degradado encima del fondo para que el texto destaque.
   - No interfiere con clicks por pointer-events: none.
*/
.fixed-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}

/* ---------- Contenido (.content) ----------
   - Convertimos el contenedor en flex para centrar vertical y horizontalmente.
   - Mantiene la estructura de .container que ya tenés en el PHP.
   - IMPORTANTE: usamos position:relative y z-index:3 para que quede por encima del overlay.
*/
.fixed-banner .content {
  position: relative;
  z-index: 3;                 /* por encima del ::before y del fondo */
  min-height: inherit;        /* hereda la altura del banner para centrado vertical correcto */
  display: flex;
  align-items: center;        /* CENTRADO VERTICAL */
  justify-content: center;    /* CENTRADO HORIZONTAL */
  padding-top: 2.0rem;
  padding-bottom: 2.0rem;
  box-sizing: border-box;
}

/* ---------- Limitador de ancho / centrado interno ----------
   - Asegura que el texto no se extienda demasiado en pantallas grandes.
   - Mantiene text-align:center para que títulos y subtítulos estén centrados.
*/
.fixed-banner .content header,
.fixed-banner .content .content-inner,
.fixed-banner .content .container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- Título (.section-title) — estilo neón y shine ----------
   - Tipografía, tamaño responsivo y sombras tipo “neón”.
   - pseudo ::after genera la franja brillante que anima (efecto *shine*).
   - No se cambian familias ni pesos existentes, solo se añaden sombras.
*/
.fixed-banner .section-title {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 5.6vw, 56px); /* tamaño responsivo */
  line-height: 1.05;
  color: #e6fbff;
  margin: 0;
  padding: 0 .25em;
  display: inline-block;
  text-shadow:
    0 0 6px var(--neon-soft),
    0 0 18px var(--neon-soft),
    0 0 36px rgba(0,150,255,.35),
    0 0 64px rgba(0,150,255,.15);
  position: relative;
}
/* La franja brillante que se desliza (shine) */
.fixed-banner .section-title::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.85) 12%,
    rgba(255,255,255,0) 24%);
  mix-blend-mode: screen;
  transform: translateX(-120%) skewX(-18deg);
  animation: hero-shine 3.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes hero-shine {
  0% { transform: translateX(-120%) skewX(-18deg); }
  60%, 100% { transform: translateX(120%) skewX(-18deg); }
}

/* ---------- Subtítulo (.section-subtitle) ----------
   - Tamaño y color coherente con el título; ligera sombra para legibilidad.
*/
.fixed-banner .section-subtitle {
  margin-top: .6rem;
  font-size: clamp(14px, 2.2vw, 20px);
  color: rgba(233,247,255,0.95);
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
  margin-bottom: 0;
}

/* ---------- Asegurar que el fondo no “rompa” la caja ----------
   - Evita que la imagen/fondo tenga menor alto que el contenedor.
*/
.fixed-banner .fixed-bg,
.fixed-banner img {
  min-height: 100%;
}

/* ---------- Mobile tweaks ----------
   - Ajustes de altura/padding/tamaños para pantallas pequeñas.
*/
@media (max-width: 767px) {
  .fixed-banner { min-height: 48vh; }
  .f
/* ================= Bienvenidos: separador + estilos (comentados) ================= */

/* ---------- Separador entre banners ----------
   Este elemento .banner-sep aparece justo antes del banner y crea
   un “espaciador” visual de 6px. Puedes ajustar height a 5px si preferís.
*/
.banner-sep {
  height: 6px;                /* grosor de la línea separadora (5-6px como pediste) */
  width: 100%;
  display:block;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset; /* sutil relieve */
  /* El color se inyecta inline desde PHP (usa color de la DB si existe) */
}

/* ---------- Ajustes/bases para la sección fixed-banner ----------
   Esto reutiliza tus selectores originales y añade/asegura centrado vertical.
*/
.fixed-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  min-height: 56vh;
  display:block;
}
@media (min-width: 992px) {
  .fixed-banner { min-height: 72vh; }
}

/* Fondo absoluto (usa inline background-image en el HTML) */
.fixed-banner .fixed-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;       /* cover para que ocupe y recorte sin deformar */
  background-position: center center;
  transform: scale(1.03);
  will-change: transform;
  transition: transform .6s ease;
  filter: saturate(.98) contrast(1);
}

/* Degradado encima del fondo para mejorar contraste del texto */
.fixed-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}

/* Contenido centrado vertical y horizontalmente */
.fixed-banner .content {
  position: relative;
  z-index: 3;
  min-height: inherit;
  display: flex;
  align-items: center;       /* centrado vertical */
  justify-content: center;   /* centrado horizontal */
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}

/* Alinear y limitar ancho del contenido interno */
.fixed-banner .content header,
.fixed-banner .content .content-inner,
.fixed-banner .content .container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* Título con efecto neón/shine (igual que ya tenías) */
.fixed-banner .section-title {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 5.6vw, 56px);
  line-height: 1.05;
  color: #e6fbff;
  margin: 0;
  padding: 0 .25em;
  display: inline-block;
  text-shadow:
    0 0 6px rgba(0,234,255,.65),
    0 0 18px rgba(0,234,255,.65),
    0 0 36px rgba(0,150,255,.35),
    0 0 64px rgba(0,150,255,.15);
  position: relative;
}
.fixed-banner .section-title::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.85) 12%,
    rgba(255,255,255,0) 24%);
  mix-blend-mode: screen;
  transform: translateX(-120%) skewX(-18deg);
  animation: hero-shine 3.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes hero-shine {
  0% { transform: translateX(-120%) skewX(-18deg); }
  60%, 100% { transform: translateX(120%) skewX(-18deg); }
}

/* Subtítulo */
.fixed-banner .section-subtitle {
  margin-top: .6rem;
  font-size: clamp(14px, 2.2vw, 20px);
  color: rgba(233,247,255,0.95);
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
  margin-bottom: 0;
}

/* Compatibilidad: asegurar que la imagen de fondo ocupe y no se rompa */
.fixed-banner .fixed-bg,
.fixed-banner img {
  min-height: 100%;
}

/* Mobile tweaks */
@media (max-width: 767px) {
  .fixed-banner { min-height: 48vh; }
  .fixed-banner .content { padding-top: 1rem; padding-bottom: 1rem; }
  .fixed-banner .section-title { font-size: clamp(20px, 7vw, 36px); }
}