/* =========================================================
   ESENCIA DIGITAL — ESTILOS GENERALES
========================================================= */

:root {
    --ed-azul: #062b4f;
    --ed-azul-oscuro: #041f3a;
    --ed-dorado: #d4af37;
    --ed-crema: #fff9f0;
    --ed-blanco: #ffffff;
    --ed-texto: #252525;
    --ed-texto-suave: #626262;
    --ed-ancho: 1180px;
}


/* =========================================================
   AJUSTES GENERALES
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--ed-crema);
    color: var(--ed-texto);
    font-family: Arial, Helvetica, sans-serif;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

.ed-pagina {
    width: 100%;
    margin: 0;
    padding: 0;
}

.ed-contenedor {
    width: min(100% - 40px, var(--ed-ancho));
    margin-right: auto;
    margin-left: auto;
}


/* =========================================================
   BOTONES GENERALES
========================================================= */

.ed-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 14px 28px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.ed-boton:hover {
    transform: translateY(-3px);
}

.ed-boton-principal {
    background: var(--ed-dorado);
    color: var(--ed-azul-oscuro);
}

.ed-boton-principal:hover {
    background: #e1bd45;
    color: var(--ed-azul-oscuro);
}

.ed-boton-secundario {
    border-color: rgba(255, 255, 255, 0.75);
    background: transparent;
    color: var(--ed-blanco);
}

.ed-boton-secundario:hover {
    border-color: var(--ed-blanco);
    background: rgba(255, 255, 255, 0.08);
    color: var(--ed-blanco);
}


/* =========================================================
   ENCABEZADO
========================================================= */

.ed-header {
    position: sticky;
    top: 0;
    z-index: 999;
    width: 100%;
    background: rgba(4, 31, 58, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.admin-bar .ed-header {
    top: 32px;
}

.ed-header-interior {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 82px;
    gap: 30px;
}

.ed-marca {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    color: var(--ed-blanco);
    text-decoration: none;
    white-space: nowrap;
}

.ed-marca:hover {
    color: var(--ed-blanco);
}

.ed-marca-esencia {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.7px;
}

.ed-marca-digital {
    color: var(--ed-dorado);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


/* =========================================================
   MENÚ PRINCIPAL
========================================================= */

.ed-menu {
    display: flex;
    align-items: center;
    gap: 27px;
}

.ed-menu a {
    position: relative;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}

.ed-menu a:hover {
    color: var(--ed-dorado);
}

.ed-menu-contacto {
    padding: 11px 20px;
    border: 1px solid var(--ed-dorado);
    border-radius: 999px;
}

.ed-menu-contacto:hover {
    background: var(--ed-dorado);
    color: var(--ed-azul-oscuro) !important;
}


/* =========================================================
   BOTÓN DEL MENÚ PARA CELULAR
========================================================= */

.ed-menu-boton {
    display: none;
    width: 45px;
    height: 45px;
    padding: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ed-menu-boton span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    background: var(--ed-blanco);
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


/* =========================================================
   PIE DE PÁGINA COMPACTO
========================================================= */

.ed-footer {
    background: var(--ed-azul-oscuro);
    color: var(--ed-blanco);
}

.ed-footer-interior {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 35px;
    padding-top: 34px;
    padding-bottom: 28px;
}

.ed-footer-marca {
    max-width: 500px;
}

.ed-footer-marca strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ed-blanco);
    font-size: 23px;
    line-height: 1.2;
}

.ed-footer-marca p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.55;
}

.ed-footer-enlaces {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px 28px;
}

.ed-footer-enlaces a {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.25s ease;
}

.ed-footer-enlaces a:hover {
    color: var(--ed-dorado);
}

.ed-footer-inferior {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ed-footer-inferior p {
    margin: 0;
    padding: 13px 0;
    color: rgba(255, 255, 255, 0.52);
    font-size: 12px;
}


/* =========================================================
   TABLET Y MENÚ RESPONSIVO
========================================================= */

@media (max-width: 860px) {

    body.admin-bar .ed-header {
        top: 46px;
    }

    .ed-header-interior {
        min-height: 72px;
    }

    .ed-menu-boton {
        display: block;
    }

    .ed-menu {
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 18px;
        background: var(--ed-azul-oscuro);
        border-radius: 0 0 18px 18px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    }

    .ed-menu.is-open {
        display: flex;
    }

    .ed-menu a {
        padding: 14px 12px;
    }

    .ed-menu-contacto {
        margin-top: 8px;
        text-align: center;
    }

    .ed-footer-interior {
        flex-direction: column;
        gap: 22px;
        padding-top: 30px;
        padding-bottom: 25px;
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 767px) {

    .ed-contenedor {
        width: min(100% - 28px, var(--ed-ancho));
    }

    .ed-boton {
        width: 100%;
    }
}

@media (max-width: 480px) {

    .ed-marca {
        gap: 5px;
    }

    .ed-marca-esencia {
        font-size: 23px;
    }

    .ed-marca-digital {
        font-size: 13px;
        letter-spacing: 1px;
    }

    .ed-footer-enlaces {
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 10px 22px;
    }

    .ed-footer-inferior p {
        text-align: center;
    }
}


/* =========================================================
   AJUSTE DE BARRA DE WORDPRESS EN CELULARES
========================================================= */

@media screen and (max-width: 782px) {

    body.admin-bar .ed-header {
        top: 46px;
    }
}