/* =========================================================
   COLORES
   ========================================================= */

:root {
    --segman-blue: #0084d6;
    --segman-blue-dark: #003d73;
    --segman-blue-deep: #002b52;

    --segman-text: #1d2733;
    --segman-gray: #68717c;
    --segman-light: #f5f7f9;
    --segman-border: #e2e6ea;
    --segman-white: #ffffff;

    --segman-header-height: 82px;
}

.segman-header {
    position: relative;
    z-index: 9999;

    width: 100%;

    background:
        radial-gradient(
            ellipse at 80% 0%,
            rgba(16, 91, 145, .35),
            transparent 45%
        ),
        linear-gradient(
            110deg,
            #041F3A,
            #063557
        );

    box-shadow:
        0 5px 20px rgba(0, 20, 40, .25);
}

.segman-header::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: linear-gradient(
        90deg,
        #063557,
        #0874B9,
        #063557
    );

    opacity: .8;
}

.segman-header-inner {
    width: 100%;
    max-width: 1500px;
    height: var(--segman-header-height);
    margin: 0 auto;

    display: flex;
    align-items: center;
}


/* =========================================================
   HEADER
   ========================================================= */

.segman-header-inner {
    width: 100%;
    max-width: 1500px;
    height: var(--segman-header-height);
    margin: 0 auto;

    display: flex;
    align-items: center;
}


/* =========================================================
   LOGO
   ========================================================= */

.segman-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 35px;
}

.segman-logo img {
    display: block;
    width: auto;
    height: 72px;
}


/* =========================================================
   NAVEGACIÓN
   ========================================================= */

.segman-nav {
    flex: 1;
    height: 100%;
}

.segman-nav-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.segman-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.segman-nav-item > a,
.segman-nav-link {
    display: flex;
    align-items: center;
    gap: 7px;

    height: 44px;

    border-radius: 6px;

    padding: 0 14px;

    color: rgba(255, 255, 255, .94);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        color .2s ease,
        background-color .2s ease,
        transform .2s ease;

    text-decoration: none;
}

.segman-nav-item > a:hover,
.segman-nav-link:hover {
    color: #ffffff;

    background: rgba(255, 255, 255, .10);

    transform: translateY(-1px);
}

.segman-has-mega:hover > .segman-nav-link {

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.06)
        );

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.08);
}


/* =========================================================
   FLECHAS
   ========================================================= */

.segman-arrow {
    display: inline-block;

    font-size: 16px;
    line-height: 1;

    color: rgba(255,255,255,.75);

    transform: translateY(-1px);

    transition:
        transform .25s ease,
        color .2s ease;
}

.segman-has-mega:hover .segman-arrow {
    color: #ffffff;
}


/* =========================================================
   CHECKBOXES INVISIBLES
   ========================================================= */

.segman-submenu-toggle,
.segman-menu-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* =========================================================
   MEGA MENÚ
   ========================================================= */

.segman-mega-menu {
    position: absolute;

    top: 100%;
    left: 50%;

    width: min(900px, calc(100vw - 40px));

    background: var(--segman-white);

    border-top: 3px solid var(--segman-blue);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .14);

    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}

/*=================================================================================================================================================*/
/* =========================================================
   MOSTRAR MEGA MENÚ EN DESKTOP
   ========================================================= */

@media (min-width: 1051px) {

    .segman-has-mega:hover > .segman-mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }

    .segman-has-mega:hover .segman-arrow {
        transform: rotate(180deg);
    }

    .segman-has-mega:hover > .segman-mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }

    .segman-has-mega:hover .segman-arrow {
        transform: rotate(180deg);
    }


    /* Robots: alineado al lado derecho */
    .segman-robots:hover > .segman-mega-menu {
        transform: translateY(0);
    }

}


/* =========================================================
   CONTENIDO MEGA MENÚ
   ========================================================= */

.segman-mega-inner {
    display: grid;
    grid-template-columns: 31% 69%;
    min-height: 320px;
}

.segman-mega-column {
    padding: 28px 30px;
}

.segman-mega-column:first-child {
    background: var(--segman-light);
}

.segman-mega-column h3,
.segman-robots-menu h3 {
    margin: 0 0 18px;

    color: var(--segman-blue);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}


/* =========================================================
   SOLUCIONES
   ========================================================= */

.segman-solutions {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.segman-solutions li {
    display: block;
}

.segman-solutions span {
    display: block;

    padding: 7px 0;

    color: var(--segman-text);

    font-size: 13px;
    line-height: 1.35;

    transition:
        color .2s ease,
        padding-left .2s ease;
}

.segman-solutions li:hover span {
    color: var(--segman-blue);
    padding-left: 5px;
}


/* =========================================================
   MARCAS
   ========================================================= */

.segman-brands-column {
    background: #fff;
}

.segman-brand-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 18px;
}

.segman-brand-grid a {
    display: flex;
    flex-direction: column;

    padding: 9px 10px;

    border-radius: 5px;

    transition:
        background-color .2s ease,
        transform .2s ease;

    text-decoration: none;
}

.segman-brand-grid a:hover {
    background: var(--segman-light);
    transform: translateX(3px);
}

.segman-brand-grid strong {
    color: var(--segman-text);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;

    text-transform: uppercase;
}

.segman-brand-grid small {
    margin-top: 3px;

    color: var(--segman-gray);

    font-size: 11px;
    line-height: 1.35;
}


/* =========================================================
   ROBOTS
   ========================================================= */

.segman-robots .segman-mega-menu {
    width: min(900px, calc(100vw - 30px));

    left: auto;
    right: 0;

    transform: translateY(12px);
}

.segman-robots-menu {
    padding: 28px 30px;
}

.segman-robot-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.segman-robot-grid a {
    min-width: 0;
    min-height: 130px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    padding: 18px 14px;

    border: 1px solid var(--segman-border);
    border-radius: 7px;

    background: #fff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;

    text-decoration: none;
}

.segman-robot-grid a:hover {
    border-color: var(--segman-blue);

    box-shadow:
        0 7px 20px rgba(0, 0, 0, .08);

    transform: translateY(-3px);
}

.robot-image {
    width: 100%;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    margin-bottom: 14px;

    overflow: hidden;
}

.robot-image img {
    display: block;

    width: auto;
    max-width: 100%;
    height: 65px;

    object-fit: contain;
    object-position: left center;
}

.segman-robot-grid strong {
    color: var(--segman-text);

    font-size: 13px;
    line-height: 1.3;
}

.segman-robot-grid small {
    margin-top: 5px;

    color: var(--segman-gray);

    font-size: 11px;
    line-height: 1.35;
}


/* =========================================================
   BOTÓN MENÚ MÓVIL
   ========================================================= */

.segman-menu-button {
    display: none;

    width: 42px;
    height: 42px;

    flex-direction: column;
    justify-content: center;
    gap: 5px;

    cursor: pointer;
}

.segman-menu-button span {
    display: block;

    color: #fff;
    width: 25px;
    height: 2px;

    margin: 0 auto;

    background: #fff;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


/* =========================================================
   TABLET / MÓVIL
   ========================================================= */

@media (max-width: 1050px) {

    .segman-header-inner {
        background: transparent;
    }

    .segman-logo {
        margin-right: auto;
    }

    .segman-logo img {
        height: 45px;
    }

    .segman-menu-button {
        display: flex;
    }

    .segman-nav {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        height: auto;

        background: var(--segman-white);

        border-top: 1px solid var(--segman-border);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-10px);

        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;
    }

    .segman-nav-list {
        display: block;

        height: auto;

        max-height: calc(100vh - 72px);

        overflow-y: auto;
    }

    .segman-nav-item {
        display: block;

        border-bottom: 1px solid var(--segman-border);
    }

    .segman-nav-item > a,
    .segman-nav-link {
        width: 100%;
        min-height: 52px;
        color: rgba(0, 0, 0, .8);
        display: flex;
        justify-content: space-between;
        align-items: center;

        padding: 0 22px;

        font-size: 13px;
    }

    .segman-nav-item > a:hover,
    .segman-nav-link:hover {
    color: #4e5d7a;

    }


    /* Mostrar menú */

    .segman-menu-toggle:checked ~ .segman-menu-button span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .segman-menu-toggle:checked ~ .segman-menu-button span:nth-child(2) {
        opacity: 0;
    }

    .segman-menu-toggle:checked ~ .segman-menu-button span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .segman-menu-toggle:checked ~ .segman-nav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }


    /* =====================================================
       SUBMENÚ MÓVIL
       ===================================================== */

    .segman-mega-menu {
        position: static;

        width: 100% !important;

        border-top: 0;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        display: none;
    }

    .segman-submenu-toggle:checked ~ .segman-mega-menu {
        display: block;
    }

    .segman-submenu-toggle:checked ~ .segman-mega-menu + * {
        display: block;
    }

    .segman-submenu-toggle:checked + .segman-nav-link .segman-arrow {
        transform: rotate(180deg);
    }


    /* =====================================================
       MEGA MENÚ MÓVIL
       ===================================================== */

    .segman-mega-inner {
        display: block;
        min-height: auto;
    }

    .segman-mega-column {
        padding: 22px;
    }

    .segman-mega-column:first-child {
        background: var(--segman-light);
    }

    .segman-mega-column h3,
    .segman-robots-menu h3 {
        margin-bottom: 12px;
    }


    /* SOLUCIONES */

    .segman-solutions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 20px;
    }

    .segman-solutions span {
        padding: 8px 0;
    }


    /* MARCAS */

    .segman-brand-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .segman-brand-grid a {
        padding: 10px 0;

        border-bottom: 1px solid var(--segman-border);

        border-radius: 0;
    }

    .segman-brand-grid a:hover {
        background: transparent;
        transform: none;
    }


    /* ROBOTS */

    .segman-robots-menu {
        padding: 22px;
    }

    .segman-robot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MÓVILES PEQUEÑOS
   ========================================================= */

@media (max-width: 600px) {

    .segman-header-inner {
        padding: 0 15px;
    }

    .segman-logo img {
        height: 40px;
    }

    .segman-nav-item > a,
    .segman-nav-link {
        padding-left: 18px;
        padding-right: 18px;
    }

    .segman-mega-column,
    .segman-robots-menu {
        padding: 20px 18px;
    }

    .segman-solutions {
        grid-template-columns: 1fr;
    }

    .segman-robot-grid {
        grid-template-columns: 1fr;
    }

}