/* ==========================================================================
   Página "Nosotros" — separación y diferenciación entre secciones.

   Solo ajusta el fondo y el espaciado vertical de cada sección. No cambia
   maquetación interna, columnas, tipografías ni contenido. Se carga
   únicamente en /nosotros (resources/views/site/about.blade.php).

   Ritmo vertical antes de este archivo (desigual):
     banner 135/135 · sobre-nosotros 96/96 · características 20/80 · por-qué 50/140
   Ritmo después (uniforme):
     banner 135/135 · el resto 110/110 (70/70 en móvil)
   ========================================================================== */

:root {
    --ab-pad: 110px;
    --ab-pad-mobile: 70px;
    --ab-tint-blue: #e9eef9;   /* características: azul grisáceo */
    --ab-hairline: rgba(20, 19, 59, .09);
}

/* --------------------------------------------------------------------------
   1. Espaciado uniforme entre secciones
   -------------------------------------------------------------------------- */
#nosotros.bg-light {
    padding-top: var(--ab-pad) !important;
    padding-bottom: var(--ab-pad) !important;
}

/* El contenedor interno ya sumaba 48px arriba y abajo: se neutraliza para que
   el espacio total sea el mismo que en las demás secciones. */
#nosotros.bg-light > .container.py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.services-area-six {
    padding-top: var(--ab-pad);
    padding-bottom: var(--ab-pad);
}

.why-choose-us-area {
    padding-top: var(--ab-pad);
    padding-bottom: var(--ab-pad);
}

@media (max-width: 991px) {
    #nosotros.bg-light {
        padding-top: var(--ab-pad-mobile) !important;
        padding-bottom: var(--ab-pad-mobile) !important;
    }

    .services-area-six,
    .why-choose-us-area {
        padding-top: var(--ab-pad-mobile);
        padding-bottom: var(--ab-pad-mobile);
    }
}

/* --------------------------------------------------------------------------
   2. Fondos: cada sección se distingue de la anterior
      banner oscuro → blanco → azul grisáceo → lila
   -------------------------------------------------------------------------- */

/* La cabecera conserva la imagen y el velo del tema: no se toca. */

/* Sobre nosotros — blanco limpio con matices de color muy tenues */
#nosotros.bg-light {
    position: relative;
    background:
        radial-gradient(720px 400px at 96% 6%, rgba(48, 240, 182, .10), transparent 62%),
        radial-gradient(640px 360px at 2% 96%, rgba(103, 77, 243, .07), transparent 60%),
        #ffffff !important;
}

/* Características — azul grisáceo sólido de arriba a abajo
   (sin desvanecer a blanco: así el límite con la sección siguiente se nota) */
.services-area-six:not([class*="bgc-"]) {
    position: relative;
    background:
        radial-gradient(820px 460px at 100% 0%, rgba(103, 77, 243, .07), transparent 62%),
        linear-gradient(180deg, var(--ab-tint-blue) 0%, #eef2fb 100%);
    border-top: 1px solid rgba(20, 19, 59, .07);
}

/* ¿Por qué elegirnos? — blanco. Contrasta con el azul de la sección anterior;
   el borde superior y la sombra interior marcan el corte entre ambas. */
.why-choose-us-area:not([class*="bgc-"]) {
    position: relative;
    background: #ffffff;
    border-top: 1px solid rgba(20, 19, 59, .08);
    box-shadow: inset 0 14px 26px -22px rgba(20, 19, 59, .18);
}

/* --------------------------------------------------------------------------
   3. Línea divisoria fina al inicio de cada sección de contenido
      (pseudo-elemento: no ocupa espacio ni desplaza nada)
   -------------------------------------------------------------------------- */
#nosotros.bg-light::before,
.services-area-six:not([class*="bgc-"])::before,
.why-choose-us-area:not([class*="bgc-"])::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1140px, 92%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ab-hairline), transparent);
    pointer-events: none;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   4. Pestañas: estilo original del tema (borde inferior violeta en la activa).
      Se anula cualquier relleno de color en la pestaña activa, incluido el
      azul que Bootstrap aplica por defecto a .nav-pills.
   -------------------------------------------------------------------------- */
.why-choose-us-area .nav-pills .nav-link,
.why-choose-us-area .nav-pills .nav-link.active,
.why-choose-us-area .nav-pills .show > .nav-link {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}