/*---------------------------------------
  SECTION
-----------------------------------------*/
.separador {
    height: 4px;
    width: 72px;
    background: linear-gradient(90deg, var(--secondary-color), var(--secondary-color-light));
    border: none;
    border-radius: var(--radius-pill);
    opacity: 1;
}

/* padding-top/bottom: 1px evita que el margen del primer o último hijo
   (p.ej. un <h2>, #pageHeaderTitle, o una columna con mb-4 mb-lg-0 que
   solo se anula en desktop) "escape" por colapso de márgenes arriba O
   abajo de la sección y deje ver el fondo blanco del body entre esta
   sección y la contigua. El efecto visual es imperceptible. */
.dark {
    background: var(--dark-color);
    background-image: radial-gradient(900px 420px at 85% 0%, rgba(26, 22, 96, 0.35), transparent 65%);
    padding-top: 1px;
    padding-bottom: 1px;
}

.light {
    background: var(--light-color);
    padding-top: 1px;
    padding-bottom: 1px;
}

.section-padding {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

.section-bg {
    background-color: var(--section-bg-color);
}

/* inset:0 (no top/left + width/height:100%) para que cubra correctamente
   también a .hero-section_2, cuya altura depende de su contenido: con
   width/height:100% un div vacío como este colapsa a 0px en ese caso. */
.section-overlay {
    background: linear-gradient(180deg, rgba(12, 10, 20, 0.35) 0%, rgba(12, 10, 20, 0.65) 100%);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 1;
}

.section-overlay+.container {
    position: relative;
}

/* Título de sección centrado + separador, patrón repetido en todo el sitio */
.section-title-wrap {
    margin-bottom: var(--space-5);
}

.tab-content {
    background-color: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 1.3rem + 1.8vw, 2.8rem);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.nav-tabs {
    background-color: var(--surface-color);
    border-radius: var(--radius-pill);
    border-bottom: 0;
    padding: 8px;
    display: inline-flex;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.nav-tabs .nav-link {
    border-radius: var(--radius-pill);
    border: 0;
    padding: 12px 26px;
    transition: all var(--transition-fast);
}

.nav-tabs .nav-link:first-child {
    margin-right: 8px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    background: var(--dark-color);
    box-shadow: var(--shadow-md);
    color: var(--white-color);
}

.nav-tabs h5 {
    color: var(--p-color);
    margin-bottom: 0;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-tabs .nav-link.active h5,
.nav-tabs .nav-link:focus h5,
.nav-tabs .nav-link:hover h5 {
    color: var(--white-color);
}

/* Variante de cristal oscuro: cualquier tab-content/nav-tabs que caiga
   dentro de una sección .dark adopta un panel translúcido en vez de la
   tarjeta blanca, para mantener unificado el modo oscuro en todo el sitio. */
.dark .tab-content {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.dark .nav-tabs {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.dark .nav-tabs h5 {
    color: rgba(255, 255, 255, 0.75);
}

.dark .nav-tabs .nav-item.show .nav-link,
.dark .nav-tabs .nav-link.active,
.dark .nav-tabs .nav-link:focus,
.dark .nav-tabs .nav-link:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-accent);
}

.p-descripcion {
    color: white;
    font-size: 16px;
    font-weight: var(--font-weight-light);
}

.p-descripcion-2 {
    color: var(--dark-color);
    font-size: 16px;
    font-weight: var(--font-weight-light);
}

/* En una sección oscura, las listas/tarjetas que usaban p-descripcion-2
   (pensada para fondo claro) necesitan texto claro en su lugar. */
.dark .p-descripcion-2 {
    color: rgba(255, 255, 255, 0.85);
}

.p-activities {
    color: var(--p-color);
    font-size: 18px;
    font-weight: var(--font-weight-light);
}

.dark .p-activities {
    color: rgba(255, 255, 255, 0.75);
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}