/* ECCE VINUM HEADER */

/* Ocultar la marca original de Cassiopeia para evitar duplicar el logo */
.container-header > .grid-child:has(> .navbar-brand) {
    display: none !important;
}

/* Contenedor superior */
.container-header .container-topbar {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding: 1rem clamp(1rem, 2vw, 2rem);
}

/* Tres columnas: logo, lema y contactos */
.ecce-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(.75rem, 2vw, 2rem);
    width: 100%;
}

.ecce-header__logo {
    grid-column: 1;
    justify-self: start;
    display: block;
}

.ecce-header__logo img {
    display: block;
    width: auto;
    max-width: min(100%, 240px);
    max-height: 110px;
    object-fit: contain;
}

.ecce-header__slogan {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    color: #fff;
    font-size: clamp(.95rem, 1.05vw, 1.05rem);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.ecce-header__slogan strong {
    font-weight: 700;
    letter-spacing: .08em;
}

.ecce-header__contacts {
    grid-column: 3;
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .45rem;
}

.ecce-header__contacts a {
    color: #fff;
    text-decoration: none;
    font-size: clamp(.8rem, 1vw, .95rem);
    line-height: 1.3;
}

.ecce-header__contacts a:hover {
    text-decoration: underline;
}

/* Adaptación para móviles */
@media (max-width: 767.98px) {
    .ecce-header {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "logo contacts"
            "slogan slogan";
        row-gap: .85rem;
    }

    .ecce-header__logo {
        grid-area: logo;
    }

    .ecce-header__logo img {
        max-width: 180px;
        max-height: 90px;
    }

    .ecce-header__slogan {
        grid-area: slogan;
        white-space: normal;
    }

    .ecce-header__contacts {
        grid-area: contacts;
    }
}

@media (max-width: 420px) {
    .ecce-header__logo img {
        max-width: 135px;
    }

    .ecce-header__contacts a {
        font-size: .74rem;
    }
}

/* FIN ECCE VINUM HEADER */



/* ECCE VINUM: OCULTAR BREADCRUMB Y TITULOS */
.mod-breadcrumbs,
.page-header,
.com-content-category__title {
    display: none !important;
}
/* FIN ECCE VINUM: OCULTAR BREADCRUMB Y TITULOS */

/* ECCE VINUM: TITULOS EN DOS LINEAS */
.ecce-split-title__main,
.ecce-split-title__sub {
    display: block;
    margin: 0;
    padding: 0;
}

.ecce-split-title__main {
    line-height: 1.15;
}

.ecce-split-title__sub {
    font-size: 0.45em;
    line-height: 1;
    text-transform: uppercase;
}
/* FIN ECCE VINUM: TITULOS EN DOS LINEAS */


/* ECCE VINUM: DOS LINEAS EN BOTONES DESPLEGABLES */
.mod-menu button[data-ecce-split-title="1"] .ecce-split-title__main,
.mod-menu button[data-ecce-split-title="1"] .ecce-split-title__sub {
    display: block !important;
    width: 100%;
}

.mod-menu button[data-ecce-split-title="1"] .ecce-split-title__sub {
    line-height: 1;
}
/* FIN ECCE VINUM: DOS LINEAS EN BOTONES DESPLEGABLES */


/* ECCE VINUM: CONTENEDOR VERTICAL DE TITULOS */
.ecce-split-title__lines {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.15;
}

.ecce-split-title__lines .ecce-split-title__main,
.ecce-split-title__lines .ecce-split-title__sub {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.ecce-split-title__lines .ecce-split-title__sub {
    font-size: 0.45em;
    line-height: 1;
}
/* FIN ECCE VINUM: CONTENEDOR VERTICAL DE TITULOS */


/* ECCE VINUM: ALINEACION IZQUIERDA DE TITULOS */
.ecce-split-title__lines {
    text-align: left !important;
}
/* FIN ECCE VINUM: ALINEACION IZQUIERDA DE TITULOS */

/* ECCE VINUM: COLOR DEL MARCADOR DE MENU */
.container-nav .mod-menu button {
    color: #000 !important;
}

.container-nav .mod-menu button:hover,
.container-nav .mod-menu button:focus-visible,
.container-nav .mod-menu li.active > button,
.container-nav .mod-menu li.current > button {
    color: #E62D33 !important;
}

.container-nav .mod-menu button::after {
    border-color: currentColor !important;
}

.container-nav .mod-menu button:hover::after,
.container-nav .mod-menu button:focus-visible::after,
.container-nav .mod-menu li.active > button::after,
.container-nav .mod-menu li.current > button::after {
    border-color: currentColor !important;
}

/* FIN ECCE VINUM: COLOR DEL MARCADOR DE MENU */


/* ECCE VINUM: COLOR UNIFICADO DE TODOS LOS ITEMS */

/* Color normal para todos los elementos */
.container-nav .mod-menu li > a,
.container-nav .mod-menu li > button,
.container-nav .mod-menu li > span,
.container-nav .mod-menu li > .mod-menu__heading,
.container-nav .mod-menu li > .mod-menu__separator {
    color: #000 !important;
}

/* Marcadores y flechas heredan el color del elemento */
.container-nav .mod-menu li > a::after,
.container-nav .mod-menu li > button::after,
.container-nav .mod-menu li > span::after,
.container-nav .mod-menu li > .mod-menu__heading::after {
    color: inherit !important;
    border-color: currentColor !important;
}

/* Hover y foco: todos los elementos interactivos */
.container-nav .mod-menu li > a:hover,
.container-nav .mod-menu li > a:focus-visible,
.container-nav .mod-menu li > button:hover,
.container-nav .mod-menu li > button:focus-visible {
    color: #E62D33 !important;
}

/* Elementos activos y seleccionados */
.container-nav .mod-menu li.active > a,
.container-nav .mod-menu li.current > a,
.container-nav .mod-menu li.active > button,
.container-nav .mod-menu li.current > button,
.container-nav .mod-menu li > a[aria-current="page"] {
    color: #E62D33 !important;
}

/* Los marcadores siguen el color de su elemento */
.container-nav .mod-menu li > a:hover::after,
.container-nav .mod-menu li > button:hover::after,
.container-nav .mod-menu li.active > a::after,
.container-nav .mod-menu li.current > a::after,
.container-nav .mod-menu li.active > button::after,
.container-nav .mod-menu li.current > button::after {
    border-color: currentColor !important;
}

/* FIN ECCE VINUM: COLOR UNIFICADO DE TODOS LOS ITEMS */




/* ECCE VINUM: ESTADO ACTIVO DEL MENU */

/* Todos los elementos superiores en negro */
.container-nav > ul.mod-menu > li > a,
.container-nav > ul.mod-menu > li > button {
    color: #000 !important;
}

/* Padre de la sección que contiene la página actual */
.container-nav > ul.mod-menu > li:has(ul li.active) > a,
.container-nav > ul.mod-menu > li:has(ul li.current) > a,
.container-nav > ul.mod-menu > li:has(ul li.active) > button,
.container-nav > ul.mod-menu > li:has(ul li.current) > button {
    color: #E62D33 !important;
}

/* Elemento superior activo, excepto Inicio/Home */
.container-nav > ul.mod-menu > li.active:not(:first-child) > a,
.container-nav > ul.mod-menu > li.current:not(:first-child) > a,
.container-nav > ul.mod-menu > li.active:not(:first-child) > button,
.container-nav > ul.mod-menu > li.current:not(:first-child) > button {
    color: #E62D33 !important;
}

/* Hover y foco */
.container-nav > ul.mod-menu > li > a:hover,
.container-nav > ul.mod-menu > li > button:hover,
.container-nav > ul.mod-menu > li > a:focus-visible,
.container-nav > ul.mod-menu > li > button:focus-visible {
    color: #E62D33 !important;
}

/* Marcadores */
.container-nav > ul.mod-menu > li > button::after {
    border-color: currentColor !important;
}

/* FIN ECCE VINUM: ESTADO ACTIVO DEL MENU */





/* ECCE VINUM: COLOR MENU POR JERARQUIA DB V5 */

/* Todos los elementos superiores: negro */
.container-nav > ul.mod-menu > li.level-1 > a,
.container-nav > ul.mod-menu > li.level-1 > button {
    color: #000 !important;
}

/* Inicio: rojo si es la página seleccionada,
   es decir, no hay otro elemento activo/current en el menú */
.container-nav > ul.mod-menu > li.item-126.current > a,
.container-nav > ul.mod-menu > li.item-126.active:not(:has(~ li.active, ~ li.current, ~ li li.active, ~ li li.current)) > a,
.container-nav > ul.mod-menu > li.item-126.current > button,
.container-nav > ul.mod-menu > li.item-126.active:not(:has(~ li.active, ~ li.current, ~ li li.active, ~ li li.current)) > button {
    color: #E62D33 !important;
}

/* Padre de una página seleccionada */
.container-nav > ul.mod-menu > li.level-1:has(ul li.current) > a,
.container-nav > ul.mod-menu > li.level-1:has(ul li.current) > button,
.container-nav > ul.mod-menu > li.level-1:has(ul li.active) > a,
.container-nav > ul.mod-menu > li.level-1:has(ul li.active) > button {
    color: #E62D33 !important;
}

/* Elemento superior seleccionado directamente, excepto Inicio */
.container-nav > ul.mod-menu > li.level-1.current:not(.default):not(.item-126) > a,
.container-nav > ul.mod-menu > li.level-1.active:not(.default):not(.item-126) > a,
.container-nav > ul.mod-menu > li.level-1.current:not(.default):not(.item-126) > button,
.container-nav > ul.mod-menu > li.level-1.active:not(.default):not(.item-126) > button {
    color: #E62D33 !important;
}

/* Hover y foco */
.container-nav > ul.mod-menu > li.level-1 > a:hover,
.container-nav > ul.mod-menu > li.level-1 > button:hover,
.container-nav > ul.mod-menu > li.level-1 > a:focus-visible,
.container-nav > ul.mod-menu > li.level-1 > button:focus-visible {
    color: #E62D33 !important;
}

/* Marcadores */
.container-nav > ul.mod-menu > li.level-1 > button::after {
    border-color: currentColor !important;
}

/* FIN ECCE VINUM: COLOR MENU POR JERARQUIA DB V5 */




/* ECCE VINUM: INDICADOR CEPA ROJA */
/* Ocultar indicadores por defecto */
.container-nav .mod-menu > li.level-1 > a::after,
.container-nav .mod-menu > li.level-1 > button.mm-toggler::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
}

/* Hover sobre los seis enlaces: ES y EN */
.container-nav .mod-menu > li.item-126:hover > a::after,
.container-nav .mod-menu > li.item-165:hover > a::after,
.container-nav .mod-menu > li.item-166:hover > a::after,
.container-nav .mod-menu > li.item-102:hover > a::after,
.container-nav .mod-menu > li.item-163:hover > a::after,
.container-nav .mod-menu > li.item-164:hover > a::after,

/* También al recibir el foco por teclado */
.container-nav .mod-menu > li.item-126 > a:focus-visible::after,
.container-nav .mod-menu > li.item-165 > a:focus-visible::after,
.container-nav .mod-menu > li.item-166 > a:focus-visible::after,
.container-nav .mod-menu > li.item-102 > a:focus-visible::after,
.container-nav .mod-menu > li.item-163 > a:focus-visible::after,
.container-nav .mod-menu > li.item-164 > a:focus-visible::after,

/* Mantener el indicador en los botones desplegables al hacer hover */
.container-nav .mod-menu > li.level-1:hover > button.mm-toggler::after,
.container-nav .mod-menu > li.level-1 > button.mm-toggler:focus-visible::after,

/* Mantenerlo en el elemento principal de la página actual */
.container-nav .mod-menu > li.level-1.current:not(.default) > a::after,
.container-nav .mod-menu > li.level-1.active:not(.default) > a::after,
.container-nav .mod-menu > li.level-1:has(ul li.current) > button.mm-toggler::after,
.container-nav .mod-menu > li.level-1:has(ul li.active:not(.default)) > button.mm-toggler::after {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin-inline-start: .5rem !important;
  border: 0 !important;
  background: url("/images/stories/logo-cepa-roja.png") center / contain no-repeat !important;
  transform: none !important;
  vertical-align: middle !important;
}

/* ECCE VINUM: CORRECCION VISUAL DEL INDICADOR */
.container-nav .mod-menu > li.level-1:hover > a::after,
.container-nav .mod-menu > li.level-1:hover > button.mm-toggler::after,
.container-nav .mod-menu > li.level-1 > a:focus-visible::after,
.container-nav .mod-menu > li.level-1 > button.mm-toggler:focus-visible::after,
.container-nav .mod-menu > li.level-1.current:not(.default) > a::after,
.container-nav .mod-menu > li.level-1.active:not(.default) > a::after,
.container-nav .mod-menu > li.level-1:has(ul li.current) > button.mm-toggler::after,
.container-nav .mod-menu > li.level-1:has(ul li.active:not(.default)) > button.mm-toggler::after {
    position: static !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    vertical-align: middle !important;
}

/* FIN ECCE VINUM: INDICADOR CEPA ROJA */



/* ECCE VINUM: ICONO EN LA MISMA LINEA QUE EL TEXTO */
.container-nav .mod-menu > li.level-1:hover > a::after,
.container-nav .mod-menu > li.level-1:hover > button.mm-toggler::after,
.container-nav .mod-menu > li.level-1 > a:focus-visible::after,
.container-nav .mod-menu > li.level-1 > button.mm-toggler:focus-visible::after,
.container-nav .mod-menu > li.level-1.current:not(.default) > a::after,
.container-nav .mod-menu > li.level-1.active:not(.default) > a::after,
.container-nav .mod-menu > li.level-1:has(ul li.current) > button.mm-toggler::after,
.container-nav .mod-menu > li.level-1:has(ul li.active:not(.default)) > button.mm-toggler::after {
    position: relative !important;
    display: inline-block !important;
    float: none !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 0 0 6px !important;
    opacity: 1 !important;
    visibility: visible !important;
    vertical-align: middle !important;
    transform: none !important;
    flex: 0 0 14px !important;
}

/* ECCE VINUM: POSICION DEFINITIVA DEL ICONO */
html body .container-header .container-nav .mod-menu > li.item-126:hover > a::after,
html body .container-header .container-nav .mod-menu > li.item-165:hover > a::after,
html body .container-header .container-nav .mod-menu > li.item-166:hover > a::after,
html body .container-header .container-nav .mod-menu > li.item-102:hover > a::after,
html body .container-header .container-nav .mod-menu > li.item-163:hover > a::after,
html body .container-header .container-nav .mod-menu > li.item-164:hover > a::after,
html body .container-header .container-nav .mod-menu > li.item-126 > a:focus-visible::after,
html body .container-header .container-nav .mod-menu > li.item-165 > a:focus-visible::after,
html body .container-header .container-nav .mod-menu > li.item-166 > a:focus-visible::after,
html body .container-header .container-nav .mod-menu > li.item-102 > a:focus-visible::after,
html body .container-header .container-nav .mod-menu > li.item-163 > a:focus-visible::after,
html body .container-header .container-nav .mod-menu > li.item-164 > a:focus-visible::after {
    position: absolute !important;
    right: -18px !important;
    bottom: 0 !important;
    top: auto !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    vertical-align: middle !important;
}

/* FIN ECCE VINUM: POSICION DEFINITIVA DEL ICONO */

/* ECCE VINUM: POSICION FIJA DEL ICONO, SIN DESPLAZAMIENTO */

html body .container-header .container-nav .mod-menu > li.item-126 > a::after,
html body .container-header .container-nav .mod-menu > li.item-165 > a::after,
html body .container-header .container-nav .mod-menu > li.item-166 > a::after,
html body .container-header .container-nav .mod-menu > li.item-102 > a::after,
html body .container-header .container-nav .mod-menu > li.item-163 > a::after,
html body .container-header .container-nav .mod-menu > li.item-164 > a::after {
    position: absolute !important;
    right: -18px !important;
    left: auto !important;
    top: auto !important;
    top: 0 !important;
 bottom: auto !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: inline-block !important;
    transform: none !important;
    transition: opacity .15s ease !important;
}

/* Mostrar sin cambiar su posición */
html body .container-header .container-nav .mod-menu > li.item-126:hover > a::after,
html body .container-header .container-nav .mod-menu > li.item-165:hover > a::after,
html body .container-header .container-nav .mod-menu > li.item-166:hover > a::after,
html body .container-header .container-nav .mod-menu > li.item-102:hover > a::after,
html body .container-header .container-nav .mod-menu > li.item-163:hover > a::after,
html body .container-header .container-nav .mod-menu > li.item-164:hover > a::after,
html body .container-header .container-nav .mod-menu > li.item-126 > a:focus-visible::after,
html body .container-header .container-nav .mod-menu > li.item-165 > a:focus-visible::after,
html body .container-header .container-nav .mod-menu > li.item-166 > a:focus-visible::after,
html body .container-header .container-nav .mod-menu > li.item-102 > a:focus-visible::after,
html body .container-header .container-nav .mod-menu > li.item-163 > a:focus-visible::after,
html body .container-header .container-nav .mod-menu > li.item-164 > a:focus-visible::after {
    opacity: 1 !important;
    visibility: visible !important;
}

/* FIN ECCE VINUM: POSICION FIJA DEL ICONO */

/* ECCE VINUM: CORRECCION RECORTE ICONO */
html body .container-header .container-nav .mod-menu > li > a {
    overflow: visible !important;
}

html body .container-header .container-nav .mod-menu > li.item-126 > a::after,
html body .container-header .container-nav .mod-menu > li.item-165 > a::after,
html body .container-header .container-nav .mod-menu > li.item-166 > a::after,
html body .container-header .container-nav .mod-menu > li.item-102 > a::after,
html body .container-header .container-nav .mod-menu > li.item-163 > a::after,
html body .container-header .container-nav .mod-menu > li.item-164 > a::after {
    right: -14px !important;
}
/* FIN ECCE VINUM: CORRECCION RECORTE ICONO */

/* ECCE VINUM: ALINEACION SUPERIOR ICONOS MENU */
html body .container-header .container-nav .mod-menu > li.item-126 > a::after,
html body .container-header .container-nav .mod-menu > li.item-165 > a::after,
html body .container-header .container-nav .mod-menu > li.item-166 > a::after,
html body .container-header .container-nav .mod-menu > li.item-102 > a::after,
html body .container-header .container-nav .mod-menu > li.item-163 > a::after,
html body .container-header .container-nav .mod-menu > li.item-164 > a::after {
    top: -10.62px !important;
    bottom: auto !important;
}
/* FIN ECCE VINUM: ALINEACION SUPERIOR ICONOS MENU */

/* ECCE VINUM: POSICION ESTABLE ICONOS MENU */
html body .container-header .container-nav .mod-menu > li.item-126 > a::after,
html body .container-header .container-nav .mod-menu > li.item-165 > a::after,
html body .container-header .container-nav .mod-menu > li.item-166 > a::after,
html body .container-header .container-nav .mod-menu > li.item-102 > a::after,
html body .container-header .container-nav .mod-menu > li.item-163 > a::after,
html body .container-header .container-nav .mod-menu > li.item-164 > a::after {
    position: absolute !important;
    display: block !important;
    top: -10.62px !important;
    bottom: auto !important;
    left: auto !important;
    right: -14px !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}
/* FIN ECCE VINUM: POSICION ESTABLE ICONOS MENU */


/* ECCE VINUM: ESTADOS UNIFICADOS ICONO */

/* Geometría fija: no participa en el flujo del texto */
html body .container-header .container-nav .mod-menu > li.item-126 > a::after,
html body .container-header .container-nav .mod-menu > li.item-165 > a::after,
html body .container-header .container-nav .mod-menu > li.item-166 > a::after,
html body .container-header .container-nav .mod-menu > li.item-102 > a::after,
html body .container-header .container-nav .mod-menu > li.item-163 > a::after,
html body .container-header .container-nav .mod-menu > li.item-164 > a::after {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    top: 7.3px !important;
    bottom: auto !important;
    left: auto !important;
    right: -14px !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: url("/images/stories/logo-cepa-roja.png") center / contain no-repeat !important;
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Mostrar al pasar el ratón */
html body .container-header .container-nav .mod-menu > li.item-126 > a:hover::after,
html body .container-header .container-nav .mod-menu > li.item-165 > a:hover::after,
html body .container-header .container-nav .mod-menu > li.item-166 > a:hover::after,
html body .container-header .container-nav .mod-menu > li.item-102 > a:hover::after,
html body .container-header .container-nav .mod-menu > li.item-163 > a:hover::after,
html body .container-header .container-nav .mod-menu > li.item-164 > a:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Mostrar únicamente en el elemento actual */
html body .container-header .container-nav .mod-menu > li.item-126.current > a::after,
html body .container-header .container-nav .mod-menu > li.item-165.current > a::after,
html body .container-header .container-nav .mod-menu > li.item-166.current > a::after,
html body .container-header .container-nav .mod-menu > li.item-102.current > a::after,
html body .container-header .container-nav .mod-menu > li.item-163.current > a::after,
html body .container-header .container-nav .mod-menu > li.item-164.current > a::after {
    opacity: 1 !important;
    visibility: visible !important;
}

/* FIN ECCE VINUM: ESTADOS UNIFICADOS ICONO */

/* ECCE VINUM: GEOMETRIA CURRENT IGUAL A HOVER */
html body .container-header .container-nav .mod-menu > li.item-126.current > a::after,
html body .container-header .container-nav .mod-menu > li.item-165.current > a::after,
html body .container-header .container-nav .mod-menu > li.item-166.current > a::after,
html body .container-header .container-nav .mod-menu > li.item-102.current > a::after,
html body .container-header .container-nav .mod-menu > li.item-163.current > a::after,
html body .container-header .container-nav .mod-menu > li.item-164.current > a::after {
    position: absolute !important;
    top: 14.15px !important;
    bottom: 0 !important;
    left: auto !important;
    right: -18px !important;
    margin: 0 !important;
}
/* FIN ECCE VINUM: GEOMETRIA CURRENT IGUAL A HOVER */


/* ECCE VINUM: FONDO NEGRO HEADER */
html body .container-header {
    background-color: #000000 !important;
    background-image: none !important;
}
/* FIN ECCE VINUM: FONDO NEGRO HEADER */


/* ECCE VINUM: FONDO NEGRO FOOTER */
html body footer,
html body .container-footer {
    background-color: #000000 !important;
    background-image: none !important;
}
/* FIN ECCE VINUM: FONDO NEGRO FOOTER */


/* ECCE VINUM: FONDO BLANCO BARRA NAVEGACION */
html body .container-header .container-nav {
    background-color: #ffffff !important;
    background-image: none !important;
}
/* FIN ECCE VINUM: FONDO BLANCO BARRA NAVEGACION */

/* ECCE VINUM: EXTENSION FONDO BLANCO NAVEGACION */
html body .container-header .container-nav {
    position: relative !important;
    isolation: isolate;
    background: transparent !important;
}

html body .container-header .container-nav::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #ffffff;
    z-index: -1;
    pointer-events: none;
}
/* FIN ECCE VINUM: EXTENSION FONDO BLANCO NAVEGACION */

/* ECCE VINUM: AJUSTE VERTICAL FOOTER */
html body .container-footer .grid-child {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
/* FIN ECCE VINUM: AJUSTE VERTICAL FOOTER */

/* ECCE VINUM: ESTILO ENCABEZADOS DE SUBMENÚ */
html body .container-header .container-nav .mod-menu
.mod-menu__heading.nav-header {
    color: #ff0000 !important;
    font-size: calc(1em + 2pt) !important;
}
/* FIN ECCE VINUM: ESTILO ENCABEZADOS DE SUBMENÚ */

/* ECCE VINUM: ICONO ELEMENTO SELECCIONADO SUBMENÚ */
html body .container-header .container-nav
.mod-menu li.level-2.current > a {
    position: relative !important;
}

html body .container-header .container-nav
.mod-menu li.level-2.current > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -18px;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background-image: url("/images/stories/logo-cepa-roja.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}
/* FIN ECCE VINUM: ICONO ELEMENTO SELECCIONADO SUBMENÚ */

/* ECCE VINUM: CORREGIR RECORTE ICONO SUBMENÚ */
html body .container-header .container-nav
.mod-menu li.level-2.current > a {
    overflow: visible !important;
}
/* FIN ECCE VINUM: CORREGIR RECORTE ICONO SUBMENÚ */

/* ECCE VINUM: ICONO A LA IZQUIERDA SUBMENÚ */

/* Reservar espacio a la izquierda en todos los enlaces */
html body .container-header .container-nav
.mod-menu li.level-2 > a {
    padding-left: 18px !important;
}

/* Mostrar el icono en el espacio reservado */
html body .container-header .container-nav
.mod-menu li.level-2.current > a::after {
    left: 0 !important;
    right: auto !important;
}

/* FIN ECCE VINUM: ICONO A LA IZQUIERDA SUBMENÚ */

/* ECCE VINUM: AJUSTE TIPOGRAFIA SUBMENU */

/* Encabezados: 2 puntos más que los elementos clicables */
html body .container-header .container-nav
.mod-menu .mod-menu__heading {
    color: #ff0000 !important;
    font-size: calc(1em + 1pt) !important;
}

/* Elementos clicables: reducir 1 punto e indentar 3 px */
html body .container-header .container-nav
.mod-menu li.level-2 > a {
    font-size: calc(1em - 1pt) !important;
    padding-left: 21px !important;
}

/* FIN ECCE VINUM: AJUSTE TIPOGRAFIA SUBMENU */

/* ECCE VINUM: AJUSTE VISUAL CABECERA CAPTURA */

/* ==================================================
   BARRA SUPERIOR
   ================================================== */

html body .container-header .container-topbar {
    background-color: #303030 !important;
    background-image: none !important;
    color: #bdbdbd !important;
    min-height: 77px;
    display: flex;
    align-items: center;
}

html body .container-header .container-topbar .ecce-header {
    position: relative;
    width: 100%;
    min-height: 77px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
}

html body .container-header .container-topbar .ecce-header__slogan {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    color: #bdbdbd;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

html body .container-header .container-topbar .ecce-header__slogan strong {
    font-weight: 700;
}

html body .container-header .container-topbar .ecce-header__contacts {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    font-size: 16px;
    line-height: 1.4;
}

html body .container-header .container-topbar .ecce-header__contacts a {
    color: #bdbdbd !important;
    text-decoration: none !important;
}

html body .container-header .container-topbar .ecce-header__contacts a:hover {
    color: #ffffff !important;
}


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

html body .container-header .container-nav {
    background-color: #ffffff !important;
    background-image: none !important;
    font-family: Arial, Helvetica, sans-serif;
}

html body .container-header .container-nav .mod-menu > li > a,
html body .container-header .container-nav .mod-menu > li > button {
    color: #333333 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.2;
}

html body .container-header .container-nav .mod-menu > li > a:hover,
html body .container-header .container-nav .mod-menu > li > button:hover {
    color: #b52b35 !important;
}


/* ==================================================
   SUBMENÚ DESPLEGABLE
   ================================================== */

html body .container-header .container-nav .mm-collapse {
    background-color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22) !important;
    min-width: 320px;
    padding: 24px 26px 26px !important;
}

html body .container-header .container-nav
.mod-menu .mod-menu__heading.nav-header {
    color: #ff5555 !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

html body .container-header .container-nav
.mod-menu li.level-2 > a {
    color: #444444 !important;
    font-size: 17.33px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    padding-left: 21px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    text-decoration: none !important;
}

html body .container-header .container-nav
.mod-menu li.level-2 > a:hover {
    color: #b52b35 !important;
}

html body .container-header .container-nav
.mod-menu li.level-2.current > a {
    overflow: visible !important;
}

/* FIN ECCE VINUM: AJUSTE VISUAL CABECERA CAPTURA */

/* ECCE VINUM: COLOR NEGRO MENU PRINCIPAL */
html body .container-header .container-nav .mod-menu > li > a,
html body .container-header .container-nav .mod-menu > li > button {
    color: #000000 !important;
}
/* FIN ECCE VINUM: COLOR NEGRO MENU PRINCIPAL */

/* ECCE VINUM: COLOR NEGRO TODOS LOS MENUS */

/* Todos los enlaces y botones de navegación: ES y EN */
html body .container-header .container-nav .mod-menu a,
html body .container-header .container-nav .mod-menu button,
html body .container-header .container-nav .mod-menu .nav-header {
    color: #000000 !important;
}

/* FIN ECCE VINUM: COLOR NEGRO TODOS LOS MENUS */

/* ECCE VINUM: RESTAURAR ROJO ENCABEZADOS */

/* Encabezados de secciones en ES y EN */
html body .container-header .container-nav .mod-menu
.mod-menu__heading.nav-header,
html body .container-header .container-nav .mod-menu
li.divider > .mod-menu__heading,
html body .container-header .container-nav .mod-menu
li.divider > span {
    color: #ff5555 !important;
}

/* FIN ECCE VINUM: RESTAURAR ROJO ENCABEZADOS */