* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-family: Arial, Helvetica, sans-serif;
    }

    :root {
        --titulo-importante-mobile: 2.5em;
        --titulo-principal-mobile: 1.5em;
        --titulo-secundario-mobile: 1.2em;
        --padding-principal-mobile: 2em 1.5em;
        --movile-p: .9em;

        --titulo-importante-tablet: 3.2em;
        --titulo-principal-tablet: 2.5em;
        --titulo-secundario-tablet: 2em;
        --tablet-p: 1.2em;
        --margen-principal: 1.5em;



        --color-principal: rgb(0, 0, 128);
        --shadow-fondo: 0 0 0 100vmax rgba(0, 0, 0, .5);
        --shadow-sencillo: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    html {
        scroll-behavior: smooth;
        scroll-padding-top: 50px;
    }

    .logo-whats {
        max-width: 3.5em;
        position: fixed;
        z-index: 999;
        bottom: 0;
        right: 0;
        margin: 1em;
        padding: .5em;
        background-color: white;
        border-radius: 50%;
        animation: pulse 1s ease-in-out infinite;
    }

    @keyframes pulse {
        0% {
            scale: 1;
        }

        50% {
            scale: .9;
        }

        100% {
            scale: 1;
        }
    }

    .no-scroll {
        overflow: hidden;
        /* Desactiva el scroll */
        height: 100%;
        /* Asegura que no haya espacio para desplazarse */
    }

    header {
        position: relative;
        min-height: 30em;
    }

    video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        top: 0;
        left: 0;
        z-index: 20;
    }

    .capa {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(26, 26, 110, 0.445);
        z-index: 500;
    }

    .btn-dron {
        position: relative;
        bottom: 0;
        padding: 1em 2em;
        border: none;
        border-radius: 10px;
        background-color: var(--color-principal);
        color: white;
        font-size: .8em;
    }

    .header {
        position: relative;
        z-index: 998;
        display: flex;
        align-items: center;
        padding: 1.5em;
        justify-content: space-between;
    }


    .header .logo {
        max-width: 7rem;
    }

    .header .logo-2 {
        display: none;
    }

    .btn-abrir {
        border: none;
    }

    .nav {
        opacity: 0;
        visibility: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
        position: absolute;
        top: 0;
        text-align: left;
        right: 0;
        background-color: rgb(255, 255, 255);
        bottom: 0;
        box-shadow: var(--shadow-fondo);
        height: 100vh;
        width: 100%;
    }

    #nav {
        display: none;
        transition: opacity 0.3s ease;
    }

    #nav.visible {
        display: block;
        opacity: 1;
    }



    .logo-bar-mov {
        max-width: 7rem;
    }

    .logos-nav-res {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 2em 2em 0 2em;
    }

    .nav.visible {
        opacity: 1;
        visibility: visible;
    }

    .nav-list {
        width: 100%;
    }

    .nav ul {
        list-style-type: none;
        display: flex;
        flex-direction: column;
    }

    .nav li {
        padding: 1em 2em;
    }

    .nav-list .li-1 {
        background-color: rgba(236, 236, 236, 0.527);
    }

    .nav-list a {
        text-decoration: none;
        color: var(--color-principal);
        font-size: 1.4rem;
        font-weight: 700;
    }

    .abrir-menu,
    .cerrar-menu {
        border: none;
        background-color: rgba(255, 255, 255, 0);
    }

    .abrir-menu img,
    .cerrar-menu img {
        width: 2.5em;
    }

    .txt-header {
        text-align: center;
        color: white;
        position: absolute;
        z-index: 600;
        top: 50%;
        transform: translateY(-50%);
        margin: var(--padding-principal-mobile);
    }

    .txt-header h1 {
        font-size: var(--titulo-importante-mobile);
        padding: .2em;
        color: var(--color-principal);
    }

    .txt-header p {
        font-size: var(--movile-p);
        padding: 1em;
        line-height: 1.5;
        color: black;
    }

    /*Informacion*/
    .informacion {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--padding-principal-mobile);
        text-align: center;
    }

    .informacion h2 {
        font-size: 2em;
        color: var(--color-principal);
        position: relative;
    }

    .informacion h2::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: var(--color-principal);
        left: 0;
        bottom: -10px;
    }

    .informacion p {
        font-size: var(--movile-p);
        padding: 1em;
        line-height: 1.5;
        color: black;
    }

    .informacion-grid,
    .informacion-grid-2,.informacion-grid-3 {
        display: grid;
        grid-auto-columns: 15em;
        grid-auto-rows: 22em;
        gap: 1em;
        grid-auto-flow: column;
        overflow-x: auto;
        padding: 1.2em 3em;
    }

    .info-grid,
    .info-grid-2,.info-grid-3 {
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        border-radius: 10px;
        position: relative;
    }

    .info-grid:first-child {
        background: url(../img/Ingenieros\ eventos.webp) no-repeat center/cover;
    }

    .info-grid:nth-child(2) {
        background: url(../img/Todos-Evento.webp) no-repeat center/cover;
    }

    .info-grid:nth-child(3) {
        background: url(../img/TODOS.webp) no-repeat center/cover;
    }

    .info-grid:nth-child(4) {
        background: url(../img/Flayer-Cebolla.webp) no-repeat top center/cover;

    }

    .info-grid-2:first-child {
        background: url(../img/haifa-1.webp) no-repeat center/cover;
    }

    .info-grid-2:nth-child(2) {
        background: url(../img/foto-evento-H.webp) no-repeat center/cover;
    }

    .info-grid-2:nth-child(3) {
        background: url(../img/haifa-2.webp) no-repeat center/cover;
    }

    .info-grid-2:nth-child(4) {
        background: url(../img/Flayer-Haifa.webp) no-repeat center/cover;
    }

    .info-grid-3:first-child {
        background: url(../img/Gente-VA.webp) no-repeat center/cover;
    }

    .info-grid-3:nth-child(2) {
        background: url(../img/Equipo-VA.webp) no-repeat center/cover;
    }

    .info-grid-3:nth-child(3) {
        background: url(../img/Direccion-VA.webp) no-repeat top/cover;
    }

    .info-grid-3:nth-child(4) {
        background: url(../img/invv.webp) no-repeat center/cover;
    }

    .btn-info {
        position: relative;
        bottom: 0;
        padding: 1em 2em;
        border: none;
        border-radius: 10px;
        background-color: var(--color-principal);
        color: white;
        font-size: .8em;
        margin: 3em auto;
        left: 50%;
        transform: translateX(-50%);
    }


    /*Footer*/

    footer {
        background-color: var(--color-principal);
        padding: var(--padding-principal-mobile);
        margin: 5em 0 0;
    }

    .header-footer {
        background: url(../img/paisaje-evento.webp) no-repeat top center/cover;
        border-radius: 10px;
        height: 25em;
        position: relative;

    }

    .header-footer-txt {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
    }

    .capa-footer {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.26);
        border-radius: 10px;
    }

    .header-footer-txt h1 {
        font-size: var(--titulo-principal-mobile);
        color: white;
    }

    .header-footer-txt small {
        font-size: var(--movile-p);
        color: white;
    }

    .header-footer-txt button {
        padding: 1em 2em;
        border-radius: 10px;
        border: none;
        margin: 1em 0 0 0;
        color: var(--color-principal);
    }

    .footer-content {
        position: relative;
        display: flex;
        flex-direction: column;
        margin: 1.5em 0;
        gap: 1em;
    }

    .footer-content-logo img {
        max-width: 12em;
    }

    .footer-content h3 {
        font-size: var(--titulo-principal-mobile);
        color: white;

    }

    .footer-content p {
        font-size: var(--movile-p);
        color: white;
        margin: .5em 0 1em;
        line-height: 1.5;
    }

    .footer-content-txt {
        position: relative;
        margin: 2em 0 1em;
    }

    .footer-content-txt::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: white;
        top: -10px;
        left: 0;
    }

    .footer-content-txt button {
        padding: .8em 1em;
        border-radius: 10px;
        border: none;
        color: var(--color-principal);
        font-size: var(--movile-p);
        left: 50%;
    }

    .footer-content-info {
        position: relative;
        margin: 1em 0;
    }

    .footer-content-info::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: white;
        top: -10px;
        left: 0;
    }

    .footer-content-info ul {
        list-style: none;
        display: flex;
        gap: 1em;

    }

    .footer-content-info img {
        max-width: 2em;
    }

    @media screen and (min-width:750px) {

        .logo-whats {
            max-width: 4em;
            margin: 2em;
        }

        .txt-header h1 {
            font-size: var(--titulo-importante-tablet);
        }

        .txt-header p {
            font-size: var(--tablet-p);
            max-width: 80%;
            left: 50%;
            position: relative;
            transform: translateX(-50%);
            line-height: 1.5;
        }

        /*Eventos*/

        .informacion h2 {
            font-size: var(--titulo-principal-tablet);
            color: var(--color-principal);
            position: relative;
        }

        .informacion p {
            font-size: var(--tablet-p);
            padding: 1em;
            line-height: 1.5;
            color: black;
        }

        .informacion-grid,
        .informacion-grid-2,.informacion-grid-3 {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: 14em repeat(2, 13em);
            overflow-x: none;
            max-width: 850px;
            margin: 0 auto;
        }

        .info-grid:nth-child(1),
        .info-grid-2:first-child,.info-grid-3:first-child {
            grid-column: 1/3;
        }

        .info-grid:nth-child(4),
        .info-grid-2:nth-child(4),.info-grid-2:nth-child(4) {
            grid-column: 2/3;
            grid-row: 2/4;
            background-position: center top;
            position: relative;
        }

        .info-grid-4 img {
            display: block;
        }

        /*Footer*/

        .header-footer h1 {
            font-size: var(--titulo-importante-tablet);
        }


        .footer-content {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            align-items: center;
        }

        .footer-content-logo {
            display: grid;
            justify-content: center;
            align-items: center;
        }

        .footer-content-logo img {
            max-width: 13em;
        }

        .footer-content-logo:first-child {
            grid-row: 1/3;
        }

        .footer-content-txt::after {
            content: "";
            position: absolute;
            width: 2px;
            height: 10em;
            background-color: white;
            top: 50%;
            left: -15px;
            transform: translateY(-50%);
        }

        .footer-content-txt button {
            border: .1em solid;
            transition: .4s ease-in-out all;
        }

        .footer-content-txt button:hover {
            background-color: var(--color-principal);
            color: white;
            border: .1em solid white;
        }

        .footer-content-info::after {
            content: "";
            position: absolute;
            width: 2px;
            height: 10em;
            background-color: white;
            top: 50%;
            left: -15px;
            transform: translateY(-50%);
        }
    }

    @media screen and (min-width:990px) {

        .txt-header {
            top: 60%;
        }

        .txt-header h1 {
            font-size: 5em;
        }

        .txt-header p {
            left: 50%;
            position: relative;
            transform: translateX(-50%);
        }

        .txt-header .btn-dron {
            font-size: 1em;
            position: relative;
            top: 20px;
            transition: .4s ease-in-out all;
            border: .1em solid var(--color-principal);
        }

        .txt-header .btn-dron:hover {
            background-color: white;
            color: var(--color-principal);
            border: .1em solid var(--color-principal);
        }

        .header.sticky .nav-list a {
            color: var(--color-principal);
            font-size: 1.2em;
        }

        /*Grid-Eventos*/

        .informacion-txt {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 1100px;
            text-align: center;
        }

        .informacion-txt h2 {
            font-size: var(--titulo-principal-tablet);
            color: var(--color-principal);
            position: relative;
        }

        .informacion-grid,
        .informacion-grid-2,.informacion-grid-3 {
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 9em);
            overflow-x: none;
            max-width: 1100px;
            margin: 0 auto;
            padding: .5em;
        }

        .info-grid,
        .info-grid-2,.info-grid-3 {
            transition: .4s ease-in-out all;
        }

        .info-grid:hover,
        .info-grid-2:hover,.info-grid-3:hover {
            scale: 1.02;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 16px 24px;
        }

        .info-grid:nth-child(1),
        .info-grid-2:first-child,.info-grid-3:first-child {
            grid-column: 1/2;
            grid-row: 1/4;
        }

        .info-grid:nth-child(2),
        .info-grid-2:nth-child(2),.info-grid-3:nth-child(2) {
            grid-column: 2/4;
            grid-row: 1/3;
        }

        .info-grid:nth-child(3) {
            grid-column: 2/4;
            grid-row: 3/4;
            background-position: top;
        }

        .info-grid-2:nth-child(3) {
            grid-column: 2/4;
            grid-row: 3/4;
            background-position: center;
        }

        .info-grid-3:nth-child(3) {
            grid-column: 2/4;
            grid-row: 3/4;
            background-position: center;
        }

        .info-grid:nth-child(4),
        .info-grid-2:nth-child(4),.info-grid-3:nth-child(4) {
            grid-column: 4/5;
            grid-row: 1/4;
            background-position: center top;
            position: relative;
        }

        .btn-info {
            border: .1em solid rgb(0, 0, 128);
            transition: .4s ease-in-out all;
        }

        .btn-info:hover {
            background-color: white;
            color: var(--color-principal);
            border: .1em solid var(--color-principal);
        }

        /*Footer*/
        .header-footer button {
            transition: .4s ease-in-out;
        }

        .header-footer button:hover {
            background-color: var(--color-principal);
            color: white;
        }

        .header-footer-txt small {
            font-size: var(--tablet-p);
        }

        .footer-content {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr;
            max-width: 1250px;
            margin: 3em auto;
        }

        .footer-content-logo:first-child {
            grid-row: 1/2;
        }

        .footer-content-logo img {
            max-width: 17em;
        }

    }

    @media screen and (min-width:1200px) {
        .header {
            padding: 1em 2em;
            justify-content: space-evenly;
            gap: 4em;
        }

        .header-center p {
            padding: 0em 5em;
        }

        .abrir-menu,
        .cerrar-menu,
        .logo-bar-mov,
        .logos-nav-res {
            display: none;
        }

        #nav {
            display: flex;
            /* Mostrar siempre en desktop */
            opacity: 1;
            /* Mantener visible */
            visibility: visible;
            /* Mantener visible */
            position: static;
            /* Cambiar posición para que no sea absoluta */
            height: auto;
            /* Ajustar altura */
            background-color: rgba(255, 255, 255, 0);
            box-shadow: none;
            flex-direction: row;
        }

        .nav ul {
            flex-direction: row;
            align-items: center;
            justify-content: space-evenly;
        }

        .nav li {
            padding: 0 1em;
            /* Espaciado en horizontal */
            background-color: rgba(255, 255, 255, 0);
        }

        .nav-list li a {
            font-size: 1.4em;
            color: var(--color-principal);
        }

        .nav-list .li-1 {
            background-color: rgba(236, 236, 236, 0);
        }

        .header.sticky {
            background-color: rgb(0, 0, 128);
            position: fixed;
            width: 100%;
            color: var(--color-principal);
            padding: 0 0;
            gap: 0;
            justify-content: space-between;
        }

        .header.sticky .logo {
            display: none;
        }

        .header.sticky .logo-2 {
            display: block;
            max-width: 8em;
            margin-left: 4em;
        }

        .header.sticky #nav {
            width: auto;
        }

        .header .nav-list li {
            color: rgb(0, 0, 128);
        }


        .header.sticky .nav-list li {
            color: white;
        }

        .header.sticky .nav ul {
            padding: 1em;
            justify-content: end;
        }

        .header .logo {
            max-width: 10rem;
        }

        .header {
            transition: .4s ease-in-out all;
        }

        /*Footer*/
        .header-footer {
            max-width: 1250px;
            margin: 0 auto;
            height: 30em;
        }
    }