/* ==========================================================================
   HOME — hero, empresa, valor agregado, servicios, clientes, banner, contacto
   ========================================================================== */

/* ==========================================================================
   1. HERO / carrusel
   ========================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--gbm-navy-900);
    /*border-bottom-left-radius: clamp(24px, 3vw, 52px);
    border-bottom-right-radius: clamp(24px, 3vw, 52px);*/
}

.hero__viewport {
    position: relative;
    height: clamp(520px, 72vh, 780px);
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.1s var(--ease), visibility 1.1s;
}

.hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.hero__slide>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__slide.is-active>img {
    animation: heroZoom 10s var(--ease) forwards;
}

@keyframes heroZoom {
    from {
        transform: scale(1.05);
    }

    to {
        transform: scale(1);
    }
}

.hero__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(6, 12, 20, .62) 0%, rgba(6, 12, 20, .28) 46%, rgba(6, 12, 20, .05) 80%);
}

.hero__content {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    padding-top: var(--header-h);
    pointer-events: none;
}

.hero__card {
    pointer-events: auto;
    max-width: 540px;
    background: rgba(6, 6, 8, .93);
    border: 1px solid #3f7286;
    border-radius: 16px;
    padding: clamp(1.4rem, 1rem + 1.5vw, 2.35rem) clamp(1.4rem, 1rem + 1.6vw, 2.5rem);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: translateY(24px);
}

.hero__slide.is-active .hero__card {
    animation: heroCardIn .9s .15s var(--ease) forwards;
}

@keyframes heroCardIn {
    to {
        opacity: 1;
        transform: none;
    }
}

.hero__badge {
    margin: 0 0 1.35rem;
}

.hero__badge img {
    width: clamp(180px, 22vw, 255px);
    height: auto;
    display: block;
}

.hero__kicker {
    color: #fff;
    font-size: clamp(.95rem, .88rem + .3vw, 1.1rem);
    margin-bottom: .4rem;
    font-weight: 400;
}

.hero__title {
    color: #fff;
    font-size: var(--fs-display);
    line-height: 1.02;
    font-weight: 800;
    margin: 0 0 1.7rem;
    letter-spacing: -.015em;
}

.hero__title span {
    display: block;
    font-weight: 300;
    letter-spacing: 0;
}

/* Flechas laterales tipo pestaña naranja */
.hero__arrow {
    background-color: transparent;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    width: 21px;
    height: 104px;
    z-index: 6;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease);
}

.hero__arrow--prev {
    left: 0;
    border-radius: 0 8px 8px 0;
    background-image: url('../images/hero/left.png');
}

.hero__arrow--next {
    right: 0;
    border-radius: 8px 0 0 8px;
    background-image: url('../images/hero/right.png');
}

/* Al hacer hover: se oculta la imagen lateral y se muestra el fondo naranja */
.hero__arrow:hover {
    background-color: rgba(226, 67, 28, .92);
    background-image: none;
}

/* Flecha central que aparece en hover */
.hero__arrow::after {
    content: '';
    width: 14px;
    height: 14px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.hero__arrow--prev::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}

.hero__arrow--next::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

.hero__arrow:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* Bullets dentro de una píldora clara */
.hero__dots {
    position: absolute;
    z-index: 6;
    bottom: clamp(.9rem, .4rem + 1.2vw, 1.6rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .4rem;
    align-items: center;
    background: rgba(255, 255, 255, .9);
    border-radius: var(--radius-pill);
    padding: 6px 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.hero__dot {
    width: 8px;
    height: 8px;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    background: #c9ced6;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.hero__dot.is-active {
    background: var(--gbm-orange);
    transform: scale(1.15);
}

/* ==========================================================================
   2. Presentación de la empresa
   ========================================================================== */
.company {
    background: var(--gbm-surface);
    padding-block: clamp(1rem, .5rem + 1.2vw, 1.75rem) 0;
}

.company__grid {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    align-items: end;
    /* la columna de texto se justifica abajo */
}

.company__media {
    position: relative;
    align-self: stretch;
}

.company__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center bottom;
    /* recorta cielo, nunca al equipo */
}

.company__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: clamp(1.25rem, .4rem + 3vw, 4rem);
    padding-top: clamp(1rem, .4rem + 2vw, 2rem);
}

.company__inner {
    max-width: 660px;
    padding-right: var(--gutter);
}

.company__inner p {
    font-size: clamp(.86rem, .8rem + .28vw, 1rem);
    line-height: 1.72;
}

/* Sello 24 años con texto rotando */
.years-seal {
    position: relative;
    width: clamp(158px, 12.5vw, 196px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin-bottom: 1.5rem;
}

.years-seal__num {
    width: 53%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--gbm-ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: clamp(1.9rem, 1.2rem + 1vw, 2.45rem);
}

.years-seal__ring {
    position: absolute;
    inset: 0;
    animation: sealSpin 24s linear infinite;
}

.years-seal__ring text {
    font-size: 11px;
    font-weight: 700;
    fill: var(--gbm-ink);
    text-transform: uppercase;
}

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

.company__title {
    font-size: clamp(1.8rem, 1rem + 2.6vw, 3.55rem);
    text-transform: uppercase;
    letter-spacing: -.015em;
    line-height: 1.1;
    margin-bottom: 1.35rem;
}

.company__title span {
    display: block;
    font-weight: 300;
}

.company__sub {
    font-weight: 700;
    color: var(--gbm-ink);
    margin-bottom: 1.1rem;
    font-size: 1.02rem;
}

.company__cta {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.6rem;
    padding-right: var(--gutter);
}

.company__thumbs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.6rem;
}

.company__thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 429 / 329;
}

.company__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease);
}

.company__thumb:hover img {
    transform: scale(1.05);
}

/* ==========================================================================
   3. Nuestro valor agregado (acordeón)
   ========================================================================== */
.value {
    position: relative;
    overflow: hidden;
    background: var(--gbm-orange);
    border-bottom-left-radius: clamp(24px, 3vw, 52px);
    border-bottom-right-radius: clamp(24px, 3vw, 52px);
    color: #fff;
    padding-block: clamp(2.25rem, 1.2rem + 3vw, 4rem);
}

/* Rayos radiales del prototipo */
.value::before {
    content: "";
    position: absolute;
    inset: -20% -10% 0;
    pointer-events: none;
    background: repeating-conic-gradient(from 0deg at 50% 0%,
            rgba(0, 0, 0, .035) 0deg .5deg, rgba(0, 0, 0, 0) .5deg 1.9deg);
    opacity: .85;
}

.value>.gbm-container {
    position: relative;
    z-index: 1;
}

.value__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.6rem;
    flex-wrap: wrap;
}

.value__title {
    color: #fff;
    font-size: clamp(1.6rem, 1rem + 1.9vw, 2.7rem);
    margin: 0;
    line-height: 1.15;
}

.value__title span {
    display: block;
    font-weight: 300;
}

.value .link-more {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
    border-radius: var(--radius-xs);
    padding: .6rem 1.2rem;
}

.value .link-more:hover {
    background: #fff;
    color: var(--gbm-orange);
    border-color: #fff;
}

.accordion-gbm {
    display: flex;
    gap: 0;
    align-items: stretch;
    min-height: clamp(36rem, 19rem + 8vw, 460px);
    background: #2a2a2c;
    border-radius: var(--radius-lg);
    padding: clamp(.9rem, .5rem + 1vw, 1.6rem);
    overflow: hidden;
}

.acc-item {
    flex: 0 0 15%;
    min-width: 82px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, .13);
    transition: flex-basis .65s var(--ease), min-width .65s var(--ease), background .45s var(--ease);
    position: relative;
    overflow: hidden;
}

.acc-item:first-child {
    border-left: 0;
}

.acc-item.is-open {
    flex: 1 1 auto;
    min-width: 0;
}

.acc-item__head {
    margin: 0;
    display: flex;
    flex: 1 1 auto;
}

.acc-item.is-open .acc-item__head {
    flex: 0 0 auto;
}

.acc-item__btn {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: none;
    border: 0;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    text-align: left;
    padding: .55rem 1rem .4rem;
    position: relative;
}

.acc-item.is-open .acc-item__btn {
    flex-direction: row;
    align-items: baseline;
    gap: .7rem;
    padding-bottom: .9rem;
}

.acc-item__num {
    font-size: 2.15rem;
    font-weight: 700;
    color: #fff;
    display: block;
    line-height: 1.1;
}

.acc-item__label {
    position: absolute;
    left: 50%;
    top: calc(50% + 30px);
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .85);
    transition: color .3s var(--ease);
}

.acc-item.is-open .acc-item__label {
    position: static;
    transform: none;
    white-space: normal;
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 500;
    color: #fff;
}

.acc-item__btn:hover .acc-item__label {
    color: #fff;
}

/* Animación al cambiar de un número a otro */
.acc-item.is-open .acc-item__num {
    animation: accNumIn .55s var(--ease) both;
}

.acc-item.is-open .acc-item__label {
    animation: accLabelIn .6s .07s var(--ease) both;
}

.acc-item.is-open .acc-item__img {
    animation: accMediaIn .7s .1s var(--ease) both;
}

.acc-item:not(.is-open) .acc-item__num {
    animation: accNumSide .5s var(--ease) both;
}

.acc-item:not(.is-open) .acc-item__label {
    animation: accLabelSide .55s .05s var(--ease) both;
}

@keyframes accNumIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.82);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes accLabelIn {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes accMediaIn {
    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes accNumSide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes accLabelSide {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-90deg) scale(.88);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-90deg) scale(1);
    }
}

.acc-item__panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .45s var(--ease) .12s, transform .55s var(--ease) .12s, visibility .45s;
}

.acc-item.is-open .acc-item__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.acc-item:not(.is-open) .acc-item__panel {
    flex: 0 0 0;
    height: 0;
}

.acc-item__inner {
    display: block;
    padding: 0 1rem 1rem;
    max-width: 430px;
}

.acc-item__img {
    border-radius: var(--radius-xs);
    overflow: hidden;
    aspect-ratio: 16 / 10.4;
}

.acc-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.acc-item__text {
    color: rgba(255, 255, 255, .8);
    font-size: .86rem;
    line-height: 1.6;
    margin: .9rem 0 1.1rem;
}

.acc-item__more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--radius-xs);
    padding: .5rem 1.25rem;
    font-size: .88rem;
    font-weight: 500;
    color: #fff;
    transition: all var(--dur) var(--ease);
}

.acc-item__more:hover {
    background: #fff;
    color: #2a2a2c;
}

/* ==========================================================================
   4. Servicios (diagrama animado)
   ========================================================================== */
.services {
    background: var(--gbm-surface-2) url("../images/services/servicios-fondo.webp") center / cover no-repeat;
    overflow: hidden;
}

.services .gbm-container {
    position: relative;
    z-index: 1;
}

.services__diagram {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, .5fr) minmax(0, 1fr);
    grid-template-areas:
        "s1 hub s2"
        "s3 hub s4"
        "s5 s5 s5";
    gap: clamp(.9rem, .4rem + 1.1vw, 1.5rem);
    align-items: stretch;
    position: relative;
}

.services__hub {
    grid-area: hub;
    justify-self: center;
    align-self: center;
    width: clamp(118px, 13vw, 168px);
    aspect-ratio: 1;
    border-radius: clamp(16px, 1.6vw, 26px);
    background: linear-gradient(155deg, #f96604, #f96604) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 1.5vw, 26px);
    box-shadow: 0 20px 46px rgba(249, 82, 40, .42), 0 0 0 10px rgba(249, 82, 40, .10);
    position: relative;
    z-index: 2;
}

.services__hub::after {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: clamp(22px, 2.2vw, 34px);
    border: 1px solid rgba(249, 82, 40, .32);
    animation: hubPulse 3.6s var(--ease) infinite;
}

@keyframes hubPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .85;
    }

    50% {
        transform: scale(1.07);
        opacity: .2;
    }
}

.services__hub img {
    width: 100%;
    height: auto;
}

/* Conectores del prototipo */
.services__wires {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.services__wires svg {
    width: 100%;
    height: 100%;
}

/* ============================================================
   Tarjetas de servicio
   ============================================================ */
.svc-card {
    background: #f1f2f4;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: clamp(1rem, .7rem + .8vw, 1.5rem);
    position: relative;
    transition: all .5s var(--ease);
    height: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.svc-card--1 {
    grid-area: s1;
}

.svc-card--2 {
    grid-area: s2;
}

.svc-card--3 {
    grid-area: s3;
}

.svc-card--4 {
    grid-area: s4;
}

.svc-card--5 {
    grid-area: s5;
    max-width: 33%;
    min-width: 300px;
    margin-inline: auto;
    width: 100%;
}

/* ---------- Icono (arriba a la izquierda, fuera de la imagen) ---------- */
.svc-card__icon {
    width: 44px;
    height: 44px;
    margin-bottom: .9rem;
    border-radius: 10px;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    flex: 0 0 auto;

    /*display: block;*/
}

/* ---------- Imagen: centrada y más pequeña ---------- */
.svc-card__media {
    width: calc(100% - 2rem);
    /* deja margen a los lados */
    max-width: 340px;
    /* no crece indefinidamente */
    aspect-ratio: 5 / 3;
    margin: 0 auto 1rem;
    /* centrada horizontalmente */
    border-radius: 8px;
    overflow: hidden;
    background: #eef1f4;
}

.svc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--ease);
}

.svc-card:hover .svc-card__media img {
    transform: scale(1.04);
}

/* ---------- Texto ---------- */
.svc-card__title {
    font-size: 1.4rem;
    margin-bottom: .55rem;
    font-weight: 700;
}

.svc-card__title span {
    display: block;
    font-weight: 400;
    font-size: 1rem;
    color: var(--gbm-body);
    margin-bottom: .1rem;
}

.svc-card__text {
    font-size: .9rem;
    margin: 0;
    line-height: 1.62;
    color: var(--gbm-muted);
}

/* ---------- Estados hover / lit ---------- */
.svc-card.is-lit,
.svc-card:hover {
    background: #fff;
    border-color: var(--gbm-orange);
    box-shadow: 0 18px 40px rgba(249, 82, 40, .16);
    transform: translateY(-3px);
}

.services__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: clamp(1.5rem, 1rem + 1.4vw, 2.75rem);
}

/* ==========================================================================
   5. Clientes
   ========================================================================== */
.clients__track-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #f1f2f4;
    border-radius: var(--radius-md);
    padding: clamp(.6rem, .35rem + .7vw, 1rem);
}

.clients__track {
    display: flex;
    gap: clamp(.5rem, .25rem + .7vw, .9rem);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    flex: 1 1 auto;
    scrollbar-width: none;
}

.clients__track::-webkit-scrollbar {
    display: none;
}

.client-logo {
    flex: 0 0 clamp(150px, 18vw, 242px);
    scroll-snap-align: start;
    background: #fff;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    aspect-ratio: 22 / 9;
    display: grid;
    place-items: center;
    padding: .85rem 1.1rem;
    transition: all var(--dur) var(--ease);
}

.client-logo img {
    filter: grayscale(1) opacity(.5);
    transition: filter var(--dur) var(--ease);
    max-height: 100%;
    width: auto;
}

.client-logo:hover,
.client-logo:focus-within {
    border-color: var(--gbm-orange);
    box-shadow: var(--shadow-sm);
}

.client-logo:hover img,
.client-logo:focus-within img {
    filter: grayscale(0) opacity(1);
}

.clients__nav {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #9aa2ad;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}

.clients__nav:hover {
    color: var(--gbm-orange);
    transform: scale(1.08);
}

.clients__nav svg {
    width: 30px;
    height: 30px;
}

/* ==========================================================================
   6. Banner GBM con escaneo
   ========================================================================== */
.gbm-banner {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    background: #16233a;
}

.gbm-banner__bg {
    position: absolute;
    inset: 32% 0 0;
}

.gbm-banner__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gbm-banner__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #16233a 0%, rgba(22, 35, 58, .55) 22%, rgba(22, 35, 58, .18) 55%, rgba(22, 35, 58, .35) 100%);
}

/* Muesca blanca superior */
.gbm-banner__notch {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: clamp(180px, 26%, 330px);
    height: 26px;
    background: var(--gbm-surface);
    border-radius: 0 0 18px 18px;
}

.gbm-banner__inner {
    position: relative;
    z-index: 3;
    min-height: clamp(420px, 46vw, 620px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(2rem, 1rem + 3vw, 3.6rem) clamp(1.25rem, .5rem + 3vw, 5rem) clamp(2rem, 1rem + 3vw, 3.6rem);
}

.gbm-banner__icon {
    position: absolute;
    top: clamp(1.1rem, .6rem + 1vw, 1.9rem);
    left: clamp(1.1rem, .6rem + 1vw, 1.9rem);
    width: 40px;
    height: 40px;
    color: #fff;
}

.gbm-banner__drop {
    display: grid;
    gap: 6px;
    justify-items: center;
    margin-bottom: .7rem;
}

.gbm-banner__drop i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gbm-orange);
    opacity: .35;
    animation: dropDot 1.8s var(--ease) infinite;
}

.gbm-banner__drop i:nth-child(2) {
    animation-delay: .18s;
}

.gbm-banner__drop i:nth-child(3) {
    animation-delay: .36s;
}

.gbm-banner__drop i:nth-child(4) {
    animation-delay: .54s;
}

@keyframes dropDot {

    0%,
    100% {
        opacity: .3;
    }

    50% {
        opacity: 1;
    }
}

.gbm-banner__arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #10192b;
    display: grid;
    place-items: center;
    color: var(--gbm-orange);
    margin-bottom: 1.5rem;
    animation: dropArrow 2.4s var(--ease) infinite;
}

@keyframes dropArrow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

.gbm-banner__lead {
    color: #fff;
    font-size: clamp(1rem, .8rem + .95vw, 1.6rem);
    font-weight: 500;
    line-height: 1.5;
    max-width: 34ch;
    margin: 0 0 auto;
}

.gbm-banner__cta {
    margin-top: auto;
}

/* Marcos de escaneo tipo "target" */
.scan-frame {
    position: absolute;
    z-index: 3;
    width: 78px;
    height: 92px;
    pointer-events: none;
    opacity: 0;
    animation: scanPop 7s var(--ease) infinite;
}

.scan-frame span {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .9);
}

.scan-frame span:nth-child(1) {
    top: 0;
    left: 0;
    border-right: 0;
    border-bottom: 0;
}

.scan-frame span:nth-child(2) {
    top: 0;
    right: 0;
    border-left: 0;
    border-bottom: 0;
}

.scan-frame span:nth-child(3) {
    bottom: 0;
    left: 0;
    border-right: 0;
    border-top: 0;
}

.scan-frame span:nth-child(4) {
    bottom: 0;
    right: 0;
    border-left: 0;
    border-top: 0;
}

.scan-frame::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gbm-orange), transparent);
    animation: scanLine 2.6s linear infinite;
}

@keyframes scanLine {
    0% {
        top: 4%;
    }

    100% {
        top: 94%;
    }
}

@keyframes scanPop {

    0%,
    8% {
        opacity: 0;
        transform: scale(.86);
    }

    16%,
    62% {
        opacity: 1;
        transform: scale(1);
    }

    72%,
    100% {
        opacity: 0;
        transform: scale(1.04);
    }
}

.scan-frame--a {
    left: 19.5%;
    bottom: 23%;
    animation-delay: 0s;
}

.scan-frame--b {
    left: 41%;
    bottom: 32%;
    animation-delay: 1.6s;
}

.scan-frame--c {
    right: 34%;
    bottom: 36%;
    animation-delay: 3s;
}

.scan-frame--d {
    right: 5.5%;
    bottom: 22%;
    animation-delay: 4.4s;
}

/* ==========================================================================
   7. Contacto
   ========================================================================== */
.contact {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--gbm-navy) url("../images/contact/contacto-fondo.webp") center / cover no-repeat;
    /*border-bottom-left-radius: clamp(24px, 3vw, 52px);
    border-bottom-right-radius: clamp(24px, 3vw, 52px);*/
    padding-block: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem);
    margin-bottom: clamp(14px, 1.6vw, 30px);
}

.pleca {
    position: relative;
    overflow: hidden;
    background-image: url(../images/pleca.png);
    background-position: center;
    margin-top: -74px;
    float: left;
    /* background-color: red; */
    width: 100%;
    height: 70px;
    background-repeat: no-repeat;
    background-size: cover;
}

.contact .gbm-container {
    position: relative;
    z-index: 2;
}

.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    gap: clamp(1.5rem, .8rem + 3vw, 3.5rem);
    align-items: stretch;
}

.contact__aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: clamp(300px, 30vw, 440px);
}

.contact__title {
    color: #fff;
    font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.6rem);
    text-transform: uppercase;
    margin-bottom: .3rem;
    letter-spacing: -.01em;
}

.contact__sub {
    color: rgba(255, 255, 255, .92);
    font-weight: 400;
    margin-bottom: 0;
}

.contact__chips {
    display: grid;
    gap: .75rem;
    max-width: 420px;
    background: rgba(8, 20, 36, .72);
    border: 1px solid;
    border-radius: 14px;
    padding: 1rem;
    border-color: #236d80;
    opacity: 0.85;
}

.contact__chip {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: #fff;
    transition: opacity var(--dur) var(--ease);
}

.contact__chip:hover {
    opacity: .82;
    color: #fff;
}

.contact__chip i {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--radius-xs);
    background: var(--gbm-orange);
    display: grid;
    place-items: center;
}

.contact__chip svg {
    width: 28px;
    height: 28px;
}

.contact__chip small {
    display: block;
    font-size: .84rem;
    color: rgba(255, 255, 255, .9);
    font-style: normal;
    font-weight: 600;
}

.contact__chip b {
    font-size: .92rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .96);
}

/* Formulario */
.form-card {
    background: #fff;
    border-radius: var(--radius-md);
    padding: clamp(1.35rem, .9rem + 1.7vw, 2.4rem);
    box-shadow: var(--shadow-lg);
    color: var(--gbm-body);
}

.form-card__title {
    font-size: clamp(1.1rem, .9rem + .7vw, 1.5rem);
    margin-bottom: 1.35rem;
}

.form-field {
    margin-bottom: 1rem;
}

.form-field label {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: var(--gbm-ink);
    margin-bottom: .25rem;
}

.form-field input,
.form-field textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--gbm-line);
    padding: .55rem 0;
    font-family: inherit;
    font-size: 1rem;
    color: var(--gbm-ink);
    background: transparent;
    transition: border-color var(--dur) var(--ease);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #b6bcc5;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: 0;
    border-bottom-color: var(--gbm-orange);
}

.form-field textarea {
    resize: vertical;
    min-height: 60px;
}

.form-field .error-msg {
    display: none;
    color: var(--gbm-orange-600);
    font-size: var(--fs-micro);
    margin-top: .3rem;
    font-weight: 600;
}

.form-field.has-error input,
.form-field.has-error textarea {
    border-bottom-color: var(--gbm-orange-600);
}

.form-field.has-error .error-msg {
    display: block;
}

.form-status {
    margin-top: 1rem;
    font-size: var(--fs-small);
    font-weight: 700;
}

.form-status.ok {
    color: #1a8a4a;
}

.form-status.ko {
    color: var(--gbm-orange-600);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
    .services__diagram {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "hub hub" "s1 s2" "s3 s4" "s5 s5";
    }

    .services__hub {
        margin-bottom: .5rem;
    }

    .services__wires {
        display: none;
    }

    .svc-card--5 {
        max-width: none;
    }
}

@media (max-width: 991.98px) {

    .company__grid,
    .contact__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .company__body {
        padding-left: var(--gutter);
    }

    .company__inner,
    .company__cta {
        padding-right: 0;
    }

    .company__body {
        padding-right: var(--gutter);
    }

    .company__thumbs {
        margin-inline: calc(var(--gutter) * -1);
    }

    .contact__sub {
        margin-bottom: 2rem;
    }

    .accordion-gbm {
        flex-direction: column;
        min-height: 0;
    }

    .acc-item {
        flex: 0 0 auto;
        min-width: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .acc-item:first-child {
        border-top: 0;
    }

    .acc-item__head {
        flex: 0 0 auto;
    }

    .acc-item__btn {
        flex-direction: row;
        align-items: center;
        gap: .7rem;
        padding: 1rem .85rem;
    }

    .acc-item__label {
        position: static;
        transform: none;
        white-space: normal;
        font-size: .95rem;
        transform: rotate(0deg);
    }

    .acc-item:not(.is-open) .acc-item__panel {
        display: none;
    }

    .acc-item__inner {
        max-width: none;
    }

    .acc-item:not(.is-open) .acc-item__label {
        animation: accLabelSide .55s .05s;
    }
}

@media (max-width: 767.98px) {
    .hero__content {
        justify-content: center;
    }

    .hero__card {
        max-width: 100%;
        text-align: center;
    }

    .hero__badge {
        justify-content: center;
    }

    .hero__arrow {
        height: 70px;
    }

    .services__diagram {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "hub" "s1" "s2" "s3" "s4" "s5";
    }

    .company__thumbs {
        grid-template-columns: minmax(0, 1fr);
    }

    .gbm-banner__bg {
        inset: 46% 0 0;
    }
}

/* ============================================================
   Sectores: chips + panel flotante
   ============================================================ */
.sectores__lead {
    text-align: center;
    max-width: 62ch;
    margin: 0 auto clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    color: var(--gbm-body);
}

.sectores {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* ---------- Panel flotante (tarjeta superior) ---------- */
.sectores__panel {
    display: flex;
    align-items: center;
    gap: clamp(1rem, .8rem + .8vw, 1.5rem);
    width: min(100%, 900px);
    padding: clamp(1rem, .8rem + .6vw, 1.35rem);
    background: #fff;
    border-radius: var(--radius-md, 14px);
    box-shadow: 0 18px 45px rgba(15, 22, 32, .08);
    border: 1px solid rgba(15, 22, 32, .05);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    opacity: 1;
    transform: translateY(0);
}

.sectores__media {
    flex: 0 0 clamp(180px, 24vw, 260px);
    aspect-ratio: 5 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: #eef1f4;
}

.sectores__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--ease), opacity .35s var(--ease);
}

.sectores__body {
    flex: 1 1 auto;
    min-width: 0;
}

.sectores__title {
    font-size: clamp(1.05rem, .9rem + .5vw, 1.25rem);
    margin: 0 0 .45rem;
    color: var(--gbm-ink);
    font-weight: 700;
    line-height: 1.25;
}

.sectores__text {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--gbm-muted);
    margin: 0;
    text-align: left;
}

/* ---------- Animación al cambiar de sector ---------- */
.sectores__panel.is-swapping {
    opacity: 0;
    transform: translateY(6px);
}

/* ---------- Chips ---------- */
.sector-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sector-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .62rem 1.15rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--gbm-ink);
    background: #fff;
    border: 0px solid rgba(15, 22, 32, .12);
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--dur, .3s) var(--ease, ease);
    font-family: inherit;
}

.sector-chip:hover {
    border-color: var(--gbm-orange);
    color: var(--gbm-orange);
    transform: translateY(-2px);
}

.sector-chip.is-active {
    border-color: var(--gbm-orange);
    color: var(--gbm-orange);
    background: #fff;
    /*box-shadow: 0 4px 14px rgba(249, 82, 40, .18);*/
}

.sector-chip:focus-visible {
    outline: 3px solid var(--gbm-orange);
    outline-offset: 3px;
}

/* ---------- Responsive: móvil apila todo ---------- */
@media (max-width: 767.98px) {
    .sectores__panel {
        flex-direction: column;
        align-items: stretch;
    }

    .sectores__media {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .sectores__text {
        text-align: center;
    }

    .sectores__title {
        text-align: center;
    }
}