/* Estilos propios del micrositio de Respaldos y DRP.
   La base visual viene de bootstrap.min.css, custom.css y style.css, que son
   copias sin cambios del sitio principal. Aquí solo va lo que el micrositio agrega. */

/*** Paleta ***/
/* El azul marino de GST (--primary, en custom.css) sigue siendo la base. El naranja es
   el mismo de la pastilla "Respaldos y DRP" del sitio principal. Los fondos son grises
   claros en lugar de blanco y las tarjetas se distinguen por relleno, no por borde. */
:root {
    --accent: #fd7e14;
    --accent-hover: #ff9a45;
    --accent-text: #b45309; /* naranja oscuro: legible como texto sobre fondo claro */
    --gst-green: #137134;   /* verde del logo de GSTNetwork */

    --page-bg: #f1f2f6;     /* fondo general */
    --band-bg: #e6e8ef;     /* franja alterna entre secciones */
    --card-text: #4b5160;   /* texto sobre los rellenos pastel */

    /* Rellenos de tarjeta; se van alternando dentro de cada rejilla. */
    --tint-1: #fce5d0;      /* durazno */
    --tint-2: #dde3f6;      /* azul */
    --tint-3: #d9eedf;      /* menta */
    --tint-4: #e9e0f5;      /* lila */
}

body {
    background-color: var(--page-bg);
}

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

.text-accent {
    color: var(--accent-text);
}

/* Botón principal: naranja con texto azul marino (blanco sobre este naranja no se lee bien). */
.btn.btn-accent {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--primary);
    font-weight: 600;
}

.btn.btn-accent:hover,
.btn.btn-accent:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--primary);
}

/* Etiqueta pequeña sobre el título de una sección. */
.kicker {
    margin-bottom: .75rem;
    color: var(--accent-text);
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/*** Menú ***/
/* custom.css fuerza el gris en todos los .nav-link; aquí se marca la página actual. */
.navbar .navbar-nav .nav-link.active {
    color: var(--primary) !important;
    box-shadow: inset 0 -3px 0 var(--accent);
}

/* El menú es gemelo del menú del sitio principal: mismo centrado, misma separación
   (25px; 10px en modo compacto) y pastillas con la misma forma. Si se cambia algo aquí,
   revisar la pastilla ".nav-pill-drp" en custom.css del sitio principal. */

/* "GSTNetwork": pastilla que distingue el enlace al sitio principal de las páginas del
   micrositio, gemela de la pastilla naranja "Respaldos y DRP" de allá. Azul marino en
   reposo y, al pasar el cursor, el verde del logo de GST. */
.navbar .navbar-nav .nav-badge-gst {
    align-self: center;
    margin-left: 25px;
    padding: 6px 16px;
    border-radius: 50rem;
    background-color: var(--primary);
    color: #ffffff;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease-in-out;
}

.navbar .navbar-nav .nav-badge-gst:hover,
.navbar .navbar-nav .nav-badge-gst:focus {
    background-color: var(--gst-green);
    color: #ffffff;
}

/* El menú colapsa en xl (no en lg como el sitio principal) porque sus etiquetas
   son más largas. Se replican los ajustes que style.css aplica al menú colapsado. */
@media (max-width: 1199.98px) {
    .navbar .navbar-brand img {
        max-height: 45px;
    }

    .navbar .navbar-nav {
        margin-top: 20px;
        margin-bottom: 15px;
    }

    /* En el menú en columna el subrayado se cambia por una barra a la izquierda. */
    .navbar .navbar-nav .nav-link.active {
        padding-left: 10px;
        box-shadow: inset 3px 0 0 var(--accent);
    }

    .navbar .navbar-nav .nav-badge-gst {
        align-self: flex-start;
        margin: 8px 0 8px 25px;
    }
}

/* Menú desplegado: logo | hueco (logos de socios) | menú | hueco | WhatsApp.
   Los dos huecos crecen por igual, así el menú queda centrado entre el logo y el botón
   como en el sitio principal. En las páginas con logos de socios, si no alcanza para que
   el hueco izquierdo mida --partners-min, se encoge primero el derecho: el menú se recorre
   a la derecha solo lo necesario y vuelve a centrarse en cuanto hay espacio (≈1600px). */
.navbar {
    --partners-min: 0px;
}

.navbar:has(.partners-frame) {
    --partners-min: 200px;
}

@media (min-width: 1200px) {
    .navbar {
        flex-wrap: nowrap;
    }

    /* none también en el logo: es fluido y se encogería antes que los huecos */
    .navbar > .navbar-brand,
    .navbar > .navbar-collapse,
    .navbar > .nav-wa-btn {
        flex: none;
    }

    .navbar > .navbar-partners,
    .navbar > .navbar-gap {
        flex: 1 1 var(--partners-min);
        min-width: 0;
    }

    .navbar > .navbar-gap {
        flex-shrink: 1000;
        min-width: 1rem; /* que el menú no quede pegado al botón */
    }

    .navbar .navbar-nav {
        white-space: nowrap; /* las etiquetas nunca se parten en dos líneas */
    }
}

/* Modo compacto, como el del sitio principal entre 992 y 1399px. Aquí llega hasta
   1799px porque las etiquetas de este menú son más largas y así queda espacio para
   que los logos de socios se vean grandes. */
@media (min-width: 1200px) and (max-width: 1799.98px) {
    .navbar .navbar-nav .nav-link,
    .navbar .navbar-nav .nav-badge-gst {
        margin-left: 10px;
    }

    .navbar .navbar-nav .nav-badge-gst {
        padding: 6px 12px;
    }

    .navbar .nav-wa-label {
        display: none;
    }
}

/* style.css esconde el navbar 100px arriba hasta que se hace scroll; con el menú
   abierto en móvil mide más que eso. main.js usa el mismo valor. */
.navbar.sticky-top {
    top: -200px;
}

/*** Logos de socios en el encabezado ***/
/* Ocupan el hueco entre el logo de GST y el menú (ver "Menú desplegado" arriba).
   Con varios socios, main.js los convierte en un carrusel infinito que se puede arrastrar;
   con uno solo, el logo se queda fijo y centrado. Cada logo mide hasta 170x44px, pero
   nunca más que la ventana del carrusel: así siempre se ve completo al pasar. */
.navbar-partners {
    --partner-height: 44px;
    --partner-width: 170px;
    flex: 1 1 0; /* con el menú colapsado; desplegado, ver "Menú desplegado" */
    min-width: 0;
    container-type: inline-size;
}

.partners-frame {
    display: flex;
    align-items: center;
    max-width: 380px; /* main.js cubre este ancho con copias de los logos */
    margin-right: 1rem;
    padding-left: 1rem;
    border-left: 1px solid #dee2e6;
}

.partners-window {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    container-type: inline-size; /* 100cqw abajo = ancho de la ventana */
}

.partners-track {
    display: flex;
    align-items: center;
    width: max-content;
}

.partners-track > * {
    flex-shrink: 0;
    height: var(--partner-height);
    width: auto;
    max-width: min(var(--partner-width), 100cqw);
    margin-right: 32px;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* En el carrusel, además, sin entrar en los bordes difuminados. */
.navbar-partners.is-marquee .partners-track > * {
    max-width: min(var(--partner-width), 100cqw - 16px);
}

/* Un solo socio (o antes de que arranque el carrusel): centrado y sin recortarse. */
.navbar-partners:not(.is-marquee) .partners-track {
    width: 100%;
    justify-content: center;
}

.navbar-partners:not(.is-marquee) .partners-track > * {
    margin-right: 0;
}

/* Poco espacio (teléfono): marco más angosto y, si no cabe ni así, oculto. */
@container (max-width: 149.98px) {
    .partners-frame {
        margin-right: .5rem;
        padding-left: .5rem;
    }
}

@container (max-width: 89.98px) {
    .partners-frame {
        display: none;
    }
}

/* Estado que pone main.js cuando hay carrusel: bordes difuminados y cursor de arrastre. */
.navbar-partners.is-marquee .partners-window {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8px, #000 calc(100% - 8px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 8px, #000 calc(100% - 8px), transparent);
    cursor: grab;
    touch-action: pan-y; /* el arrastre horizontal mueve el carrusel; el vertical, la página */
}

.navbar-partners.is-dragging .partners-window {
    cursor: grabbing;
}

/* Marcador de posición mientras no haya logo del socio. */
.partner-placeholder {
    display: flex;
    align-items: center;
    padding: 0 .6rem;
    border: 1px dashed var(--secondary);
    border-radius: 6px;
    color: #696E77;
    font-size: .75rem;
    white-space: nowrap;
}

/* En teléfono el logo de GST deja un poco más de hueco para los socios. */
@media (max-width: 575.98px) {
    .navbar .navbar-brand {
        margin-right: 0;
    }
}

/*** Tarjetas ***/
/* Sin borde ni sombra: se distinguen del fondo por su relleno. */
.card.card-drp {
    border: 0;
    background-color: var(--tint-1);
}

.row > :nth-child(4n + 2) > .card-drp {
    background-color: var(--tint-2);
}

.row > :nth-child(4n + 3) > .card-drp {
    background-color: var(--tint-3);
}

.row > :nth-child(4n + 4) > .card-drp {
    background-color: var(--tint-4);
}

.card-drp p,
.card-drp li {
    color: var(--card-text);
}

/* Recuadro del icono: mismo tamaño que el icono de las tarjetas de "Servicios". */
.card-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 84px;
    font-size: 2.5rem;
}

/* Tarjetas de "Nuestras soluciones" en Inicio (.service-item del sitio principal):
   mismos rellenos, sin la sombra blanca. */
.service-item {
    box-shadow: none;
    background-color: var(--tint-1);
}

.row > :nth-child(4n + 2) > .service-item {
    background-color: var(--tint-2);
}

.row > :nth-child(4n + 3) > .service-item {
    background-color: var(--tint-3);
}

.row > :nth-child(4n + 4) > .service-item {
    background-color: var(--tint-4);
}

.service-item p {
    color: var(--card-text);
}

/* Lista con palomita naranja. */
.lista-check {
    padding: 0;
    list-style: none;
}

.lista-check li {
    display: flex;
    margin-bottom: .6rem;
}

.lista-check .bi {
    margin-right: .6rem;
    color: var(--accent-text);
}

/*** Logos de marcas dentro de las páginas ***/
/* Fondo blanco porque los logos .webp traen fondo blanco, no transparente. */
.logo-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 1.5rem;
    border-radius: 10px;
    background: #ffffff;
}

.logo-marca img {
    width: 100%;
    height: 100%;
    max-width: 260px;
    object-fit: contain;
}

/*** Regla 3-2-1 (Inicio) ***/
.regla-321 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    padding: 2.5rem;
    border-radius: 10px;
    background: var(--primary);
    color: #ffffff;
}

.regla-321 h2,
.regla-321 h3 {
    color: #ffffff;
}

.regla-321-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.regla-321-num {
    flex-shrink: 0;
    width: 72px;
    color: var(--accent);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

/*** Pasos numerados ***/
.pasos {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: paso;
}

.pasos li {
    position: relative;
    padding: 0 0 1.75rem 4rem;
    counter-increment: paso;
}

.pasos li:last-child {
    padding-bottom: 0;
}

.pasos li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--accent);
    font-weight: 700;
}

/* Línea que une un paso con el siguiente. */
.pasos li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(1.375rem - 1px);
    top: 2.75rem;
    bottom: 0;
    width: 2px;
    background: #c9cddb;
}

/*** Formulario de contacto ***/
.contact-form-card {
    background-color: var(--page-bg);
}

/* Capa que cubre la página mientras se envía el formulario. */
#loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .5);
}

#loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, .3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/*** Marcador de posición para imágenes pendientes ***/
.pendiente-img {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 1rem;
    border: 2px dashed var(--secondary);
    border-radius: 10px;
    background: var(--band-bg);
    color: var(--card-text);
    text-align: center;
}