/* ==========================================================
CONCELLO DE LOBIOS — WEB V2 CONSOLIDADA
========================================================== */
/* ==========================================================
LMCO / NORA — ELEMENTOR CLÁSICO
SECCIONES + COLUMNAS
========================================================== */
/* ==========================================================
RESET BÁSICO DEL COMPONENTE
========================================================== */
.nk-header *,
.nk-menu-panel *,
.nk-burger-btn *,
.nk-hero * {
box-sizing: border-box;
}
/* ==========================================================
CABECERA GLOBAL
La cabecera SIEMPRE queda superpuesta.
En páginas interiores compensamos con padding en #content.
========================================================== */
.elementor-location-header {
position: absolute !important;
top: 0;
left: 0;
width: 100% !important;
background: transparent !important;
z-index: 10000;
}
.nk-header {
position: relative;
z-index: 10000;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
/* La clase puede seguir puesta en la misma sección.
No cambia la geometría; solo asegura transparencia. */
.nk-header-global {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
z-index: 10000;
}
.nk-header > .elementor-container,
.nk-header-global > .elementor-container {
width: 100% !important;
max-width: none !important;
}
.nk-header-global > .elementor-container,
.nk-header-global .elementor-column,
.nk-header-global .elementor-widget-wrap {
background: transparent !important;
}
/* La página marcada como nk-web-kit-home contiene el HERO y no necesita compensación. */
body:not(.nk-web-kit-home) #content {
padding-top: 110px;
}
/* ==========================================================
BURGER
IMPORTANTE: no usar nk-burger-widget.
El propio botón queda fijado al viewport.
========================================================== */
.nk-burger-btn {
position: fixed;
top: 27px;
right: 40px;
z-index: 10003;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 59px;
height: 59px;
min-width: 59px;
margin: 0;
padding: 0;
border: none;
outline: none;
border-radius: 50%;
background: #F4F1E8;
box-shadow: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: background 0.4s ease;
}
.nk-burger-btn .nk-bar {
display: block;
width: 24px;
height: 2px;
flex: 0 0 2px;
margin: 0;
padding: 0;
border: 0;
background: #111111;
transform-origin: center center;
transition:
transform 0.3s ease,
background-color 0.3s ease;
}
/* ==========================================================
HOVER BURGER
Solo en dispositivos con ratón real
========================================================== */
@media (hover: hover) and (pointer: fine) {
.nk-burger-btn:hover {
background: #0B0B0B;
}
.nk-burger-btn:hover .nk-bar {
background: #F4F1E8;
}
}
/* ==========================================================
BURGER EN DISPOSITIVOS TÁCTILES
Evita que el hover quede "pegado"
========================================================== */
@media (hover: none), (pointer: coarse) {
.nk-burger-btn:not(.open) {
background: #F4F1E8 !important;
}
.nk-burger-btn:not(.open) .nk-bar {
background: #111111 !important;
}
}
.nk-burger-btn.open {
background: #0B0B0B;
}
.nk-burger-btn.open .nk-bar {
background: #F4F1E8;
}
.nk-burger-btn.open .nk-bar:first-child {
transform: rotate(45deg) translate(2px, 2px);
}
.nk-burger-btn.open .nk-bar:last-child {
transform: rotate(-45deg) translate(2px, -2px);
}
.nk-burger-btn:focus-visible {
outline: 2px solid #75C5DE;
outline-offset: 3px;
}
/* ==========================================================
PANEL DEL MENÚ — ESCRITORIO
========================================================== */
.nk-menu-panel {
position: fixed !important;
top: calc(-100vh - 30px) !important;
right: 7px !important;
left: auto !important;
z-index: 10002;
width: 420px !important;
min-width: 420px !important;
max-width: 420px !important;
height: auto !important;
margin: 0 !important;
padding: 60px !important;
border: 0 !important;
border-radius: 20px !important;
background: rgba(17, 17, 17, 0.95) !important;
backdrop-filter: blur(26px);
-webkit-backdrop-filter: blur(26px);
opacity: 0;
pointer-events: none;
max-height: calc(100vh - 14px);
overflow-x: hidden;
overflow-y: auto;
transform: none !important;
transition:
top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.4s ease !important;
}
.nk-menu-panel > .elementor-container {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.nk-menu-panel .nk-menu-column {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.nk-menu-panel .nk-menu-column > .elementor-widget-wrap {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.nk-menu-panel.open {
top: 7px !important;
opacity: 1;
pointer-events: auto;
}
/* ==========================================================
ENLACES PRINCIPALES DEL MENÚ
========================================================== */
.nk-menu-link {
margin: 0 0 8px 0 !important;
padding: 0 !important;
}
.nk-menu-link .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.nk-menu-link .elementor-heading-title {
margin: 0 !important;
padding: 0 !important;
color: #F4F1E8 !important;
font-family: "Inter", sans-serif !important;
font-size: 30px !important;
font-weight: 500 !important;
line-height: 130% !important;
letter-spacing: normal !important;
text-decoration: none !important;
}
.nk-menu-link .elementor-heading-title a {
color: #F4F1E8 !important;
text-decoration: none !important;
transition: opacity 0.3s ease;
}
.nk-menu-link .elementor-heading-title a:hover {
color: #F4F1E8 !important;
opacity: 0.7;
}
/* ==========================================================
CONTACTO DEL MENÚ — RESERVA DE COMPATIBILIDAD / FUTURO
========================================================== */
.nk-menu-contact {
display: block;
margin-top: 24px;
}
.nk-menu-email {
color: #9A9590 !important;
font-family: "Inter", sans-serif !important;
font-size: 20px;
font-weight: 400;
line-height: normal;
text-decoration: none !important;
transition: color 0.3s ease;
}
.nk-menu-email:hover {
color: #F4F1E8 !important;
}
/* ==========================================================
REDES DEL MENÚ — RESERVA DE COMPATIBILIDAD / FUTURO
========================================================== */
.nk-menu-socials {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-top: 20px;
}
.nk-menu-socials a {
color: #9A9590 !important;
font-family: "Inter", sans-serif !important;
font-size: 14px;
font-weight: 400;
line-height: normal;
text-decoration: underline !important;
text-underline-offset: 2px;
transition: color 0.3s ease;
}
.nk-menu-socials a:hover {
color: #F4F1E8 !important;
}
/* ==========================================================
CTA DEL MENÚ
========================================================== */
.nk-menu-cta-wrapper {
margin-top: 32px;
}
.nk-menu-cta-btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px;
border: none;
border-radius: 9999px;
background: none;
cursor: pointer;
text-decoration: none !important;
}
.nk-menu-cta-bg {
position: absolute;
top: 5px;
bottom: 5px;
left: 8px;
z-index: 0;
width: calc(100% - 8px - 8px - 38px - 8px);
border-radius: 9999px;
background: #FFFFFF;
transition:
width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nk-menu-cta-text {
position: relative;
z-index: 1;
padding: 8px 40px;
color: #111111;
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
}
.nk-menu-cta-circle {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: 0 0 38px;
border-radius: 50%;
background: #75C5DE;
transition: transform 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
.nk-menu-cta-btn:hover .nk-menu-cta-bg {
width: calc(100% - 12px);
}
.nk-menu-cta-btn:hover .nk-menu-cta-circle {
transform: translateX(-4px);
}
}
/* ==========================================================
MENÚ + CABECERA — MÓVIL
========================================================== */
@media (max-width: 767px) {
body:not(.nk-web-kit-home) #content {
padding-top: 90px;
}
.nk-burger-btn {
top: 16px;
right: 20px;
}
.nk-menu-panel {
top: calc(-100vh - 30px) !important;
max-height: calc(100vh - 16px);
left: 8px !important;
right: 8px !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 90px 32px 32px 32px !important;
box-sizing: border-box !important;
border-radius: 20px !important;
}
.nk-menu-panel.open {
top: 8px !important;
}
.nk-menu-link .elementor-heading-title {
font-size: 24px !important;
}
.nk-menu-email {
font-size: 18px;
}
}
/* ==========================================================
ACCESIBILIDAD MENÚ
========================================================== */
@media (prefers-reduced-motion: reduce) {
.nk-menu-panel,
.nk-burger-btn,
.nk-bar,
.nk-menu-link a,
.nk-menu-email,
.nk-menu-socials a,
.nk-menu-cta-bg,
.nk-menu-cta-circle {
transition: none !important;
}
}
/* ==========================================================
HERO
========================================================== */
.nk-hero {
position: relative !important;
width: 100% !important;
min-height: 100vh;
margin: 0 !important;
padding: 0 !important;
background: #E4E4E4 !important;
overflow: hidden;
}
.nk-hero > .elementor-container {
width: 100% !important;
max-width: none !important;
min-height: inherit;
margin: 0 !important;
padding: 0 !important;
}
.nk-hero-column {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.nk-hero-column > .elementor-widget-wrap {
position: relative;
min-height: 100vh;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
BOTONES HERO — ICONOS
========================================================= */
.nk-hero-button-icon {
display: block;
width: 16px;
height: 16px;
flex: 0 0 16px;
fill: currentColor;
}
/* ==========================================================
SPLASH
========================================================== */
.nk-splash {
position: fixed;
inset: 0;
z-index: 999999;
width: 100vw;
height: 100vh;
pointer-events: none;
overflow: hidden;
animation: nkSplashHide 0.3s ease forwards;
animation-delay: 1.35s;
}
.nk-splash-row {
display: flex;
width: 100%;
height: 50%;
}
.nk-splash-box {
display: block;
width: 20%;
height: 100%;
background: #75C5DE;
}
.nk-splash-row-top .nk-splash-box {
animation:
nkSplashTop 1s
cubic-bezier(0.96, -0.02, 0.38, 1.01)
forwards;
}
.nk-splash-row-bottom .nk-splash-box {
animation:
nkSplashBottom 1s
cubic-bezier(0.96, -0.02, 0.38, 1.01)
forwards;
}
.nk-splash-box:nth-child(1) {
animation-delay: 0s;
}
.nk-splash-box:nth-child(2) {
animation-delay: 0.05s;
}
.nk-splash-box:nth-child(3) {
animation-delay: 0.10s;
}
.nk-splash-box:nth-child(4) {
animation-delay: 0.15s;
}
.nk-splash-box:nth-child(5) {
animation-delay: 0.20s;
}
@keyframes nkSplashTop {
from {
transform: translateY(0%);
}
to {
transform: translateY(-100%);
}
}
@keyframes nkSplashBottom {
from {
transform: translateY(0%);
}
to {
transform: translateY(100%);
}
}
@keyframes nkSplashHide {
to {
opacity: 0;
visibility: hidden;
}
}
/* ==========================================================
SPLASH — DESACTIVADO
========================================================== */
.nk-splash {
// display: none !important;
}
/* La fotografía empieza inmediatamente al cargar. */
.nk-hero-image-animate {
// animation-delay: 0s;
}
/* ==========================================================
IMÁGENES HERO
========================================================== */
.nk-hero-base-img {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 5;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
.nk-hero-base-img .elementor-widget-container {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.nk-hero-base-img img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center center !important;
}
/* ==========================================================
ENTRADA DE LA IMAGEN BASE
========================================================== */
@keyframes nkHeroImageIn {
from {
opacity: 0;
transform:
scale(1.5)
rotate(3deg);
}
to {
opacity: 1;
transform:
scale(1)
rotate(0deg);
}
}
.nk-hero-image-animate {
opacity: 0;
animation:
nkHeroImageIn
1.2s
cubic-bezier(0.25, 0.46, 0.45, 0.94)
forwards;
animation-delay: 1s;
}
/* ==========================================================
VISUALS
========================================================== */
.nk-hero-big-text {
position: absolute !important;
left: 0;
right: 0;
bottom: 20px;
z-index: 8;
width: 100% !important;
margin: 0 !important;
padding: 0 20px !important;
pointer-events: none;
text-align: center;
transform: translateY(120px);
animation:
nkCreatorSlideUp
0.45s
cubic-bezier(0.16, 1, 0.3, 1)
forwards;
animation-delay: 0.08s;
}
.nk-hero-big-text .elementor-widget-container {
width: 100%;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.nk-hero-big-text .elementor-heading-title {
display: block;
width: 100%;
margin: 0 !important;
padding: 0 !important;
color: rgba(255, 255, 255, 0.89) !important;
font-family: "Inter", sans-serif !important;
font-size: clamp(60px, 23vw, 360px) !important;
font-weight: 500 !important;
line-height: 90% !important;
letter-spacing: -0.04em !important;
white-space: nowrap;
text-align: center;
}
@keyframes nkCreatorSlideUp {
from {
transform: translateY(120px);
}
to {
transform: translateY(0);
}
}
/* =========================================================
KICKER SUPERIOR DEL HERO — TRADUCIBLE CON POLYLANG
========================================================= */
.nk-hero-big-text .elementor-heading-title {
position: relative !important;
overflow: visible !important;
}
/* Grupo superior. Vive en el HTML del propio título para que
cada traducción de Elementor/Polylang pueda editar el texto.
El logotipo se inyecta mediante --nk-web-kit-hero-logo para que sea configurable por instalación. */
.nk-hero-big-text .elementor-heading-title .nk-hero-kicker {
position: absolute;
left: 50%;
bottom: 84%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 0.14em;
color: #FFFFFF !important;
font-family: inherit;
font-weight: inherit;
/* La frase es bastante más larga que el antiguo CONCELLO DE.
Se conserva la relación .33em, con un límite por viewport
para evitar desbordes en escritorio y móvil. */
font-size: min(0.33em, 5.5vw);
line-height: 90%;
letter-spacing: -0.04em;
white-space: nowrap;
text-transform: uppercase;
text-align: center;
pointer-events: none;
}
.nk-hero-kicker-logo {
display: block;
width: clamp(42px, 4.5vw, 72px);
aspect-ratio: 292.8 / 327;
flex: 0 0 auto;
margin: 0;
padding: 0;
background-image: var(--nk-web-kit-hero-logo, none);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.nk-hero-kicker-text {
display: block;
color: inherit;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
white-space: nowrap;
}
/* ==========================================================
CONTENIDO DEL HERO — SECCIÓN INTERIOR CLÁSICA
========================================================== */
.nk-hero-content {
position: absolute !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none;
}
.nk-hero-content > .elementor-container {
position: relative;
width: 100% !important;
max-width: 1600px !important;
height: 100% !important;
min-height: 100% !important;
margin: 0 auto !important;
padding: 160px 40px 100px 40px !important;
}
.nk-hero-content .nk-hero-content-inner {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: auto;
}
.nk-hero-content
.nk-hero-content-inner
> .elementor-widget-wrap {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
justify-content: flex-start !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.nk-hero-content
.nk-hero-content-inner
> .elementor-widget-wrap
> .elementor-element {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: auto !important;
max-width: 100%;
flex: 0 0 auto;
align-self: flex-start;
}
/* ==========================================================
HEADLINE PRINCIPAL
========================================================== */
.nk-hero-headline {
position: relative !important;
max-width: 447px;
margin: 0 !important;
padding: 0 !important;
color: #111111;
font-family: "Inter", sans-serif;
font-size: 28px;
font-weight: 500;
line-height: 120%;
letter-spacing: -0.02em;
}
/* ==========================================================
REVELADO DE PALABRAS
========================================================== */
.nk-word-reveal {
display: inline-block;
margin-right: 0.3em;
opacity: 0;
animation:
nkWordReveal
0.4s
ease
forwards;
}
@keyframes nkWordReveal {
from {
opacity: 0;
transform: translateY(10px);
filter: blur(10px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
/* ==========================================================
TEXTOS SECUNDARIOS DEL HERO
========================================================== */
.nk-hero-subtext {
width: auto !important;
max-width: 447px !important;
margin: 8px 0 0 0 !important;
padding: 0 !important;
align-self: flex-start !important;
}
.nk-hero-subtext > .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.nk-hero-subtext p {
margin: 0 !important;
padding: 0 !important;
color: #111111;
font-family: "Inter", sans-serif !important;
font-size: 26px !important;
font-weight: 500;
line-height: 120%;
letter-spacing: -0.02em;
}
/* ==========================================================
HERO — ESCRITORIO
========================================================== */
@media (min-width: 768px) {
.nk-hero {
height: 100vh !important;
min-height: 100vh !important;
}
}
/* ==========================================================
HERO — MÓVIL
========================================================== */
@media (max-width: 767px) {
.nk-hero-headline {
max-width: 447px;
font-size: 22px;
}
.nk-hero-subtext p {
font-size: 20px !important;
}
}
/* ==========================================================
REDUCIR MOVIMIENTO
========================================================== */
@media (prefers-reduced-motion: reduce) {
.nk-splash {
animation:
nkSplashHide
0.01s
linear
forwards;
}
.nk-splash-box {
animation: none !important;
}
.nk-hero-image-animate,
.nk-word-reveal,
.nk-hero-big-text {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
/* =========================================================
FOOTER MINIMAL
========================================================= */
.nk-footer {
width: 100% !important;
margin: 0 !important;
padding:
32px
40px
36px
40px !important;
background: #E4E4E4;
border-top: 1px solid rgba(17, 17, 17, 0.12);
}
/* Quitar límites de Elementor */
.nk-footer > .elementor-container {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ENLACES */
.nk-footer-links {
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
margin: 0;
padding: 0;
width: 100%;
}
.nk-footer-links a {
color: #111111;
font-family: "Inter", sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.2;
text-decoration: none;
opacity: 0.62;
transition:
opacity 0.25s ease;
}
.nk-footer-links a:hover {
opacity: 1;
}
/* =========================================================
FOOTER MÓVIL
========================================================= */
@media (max-width: 767px) {
.nk-footer {
padding:
24px
20px
28px
20px !important;
}
.nk-footer-links {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: nowrap;
margin: 0;
padding: 0;
}
.nk-footer-links a {
font-size: 12px;
white-space: nowrap;
}
}
/* ==========================================================
HERO MÓVIL — TODO VISIBLE EN PRIMERA PANTALLA
========================================================== */
@media (max-width: 767px) {
/* Hero = exactamente una pantalla */
.nk-hero {
height: 100vh !important;
height: 100svh !important;
min-height: 100vh !important;
min-height: 100svh !important;
overflow: hidden !important;
}
.nk-hero > .elementor-container,
.nk-hero-column,
.nk-hero-column > .elementor-widget-wrap {
height: 100% !important;
min-height: 100% !important;
}
/*
* El contenido NO aumenta la altura del hero.
* Flota por encima de las imágenes.
*/
.nk-hero-content {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.nk-hero-content > .elementor-container {
width: 100% !important;
height: 100% !important;
padding:
110px
16px
24px
16px !important;
}
/* VISUALS queda dentro de la primera pantalla */
.nk-hero-big-text {
left: 0 !important;
right: 0 !important;
bottom: max(
16px,
env(safe-area-inset-bottom, 0px)
) !important;
padding:
0
12px !important;
}
.nk-hero-big-text .elementor-heading-title {
font-size: 20vw !important;
line-height: 90% !important;
white-space: nowrap;
}
}
/* ==========================================================
IMÁGENES RESPONSIVE DEL HERO
Solo se muestra la imagen base correspondiente al dispositivo.
========================================================== */
/* Escritorio */
.nk-hero-desktop {
display: block !important;
}
.nk-hero-mobile {
display: none !important;
}
/* Móvil */
@media (max-width: 767px) {
.nk-hero-desktop {
display: none !important;
}
.nk-hero-mobile {
display: block !important;
}
}
/* ==========================================================
HERO · SLIDER DE IMÁGENES
3 escritorio + 3 móvil · cambio automático cada 5 s
========================================================== */
.nk-hero-slide {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.9s ease,
visibility 0s linear 0.9s;
}
/* La imagen activa queda visible. La primera conserva
nk-hero-image-animate para mantener la entrada cinematográfica. */
.nk-hero-slide.is-active {
visibility: visible;
transition:
opacity 0.9s ease,
visibility 0s linear 0s;
}
.nk-hero-slide.is-active:not(.nk-hero-image-animate) {
opacity: 1;
}
/* El zoom + blur de scroll continúa aplicándose al ![]()
mediante las variables WEB V2 ya existentes. */
.nk-hero-slide img {
will-change:
filter,
transform;
}
@media (prefers-reduced-motion: reduce) {
.nk-hero-slide {
transition: none !important;
}
}
/* ==========================================================
CONTENIDO DESPUÉS DEL HERO
La sección entra parcialmente sobre el hero todavía sticky.
Su fondo pasa de transparente a crema para conservar durante
la entrada el fondo fotográfico ya desenfocado.
========================================================== */
.nk-after-hero {
position: relative;
z-index: 10;
width: 100%;
/*
* La sección recorre una pantalla completa mientras el hero
* permanece sticky. En escritorio usamos 90px de padding superior
* para dejar aire bajo el menú fijo; en móvil se mantienen 60px.
*/
margin: -100vh 0 0 0 !important;
background:
linear-gradient(
to bottom,
rgba(244, 241, 232, 0) 0,
rgba(244, 241, 232, 0.14) 10vh,
rgba(244, 241, 232, 0.58) 24vh,
/* #F4F1E8 42vh */
#FFFFFF 42vh
);
padding: 90px 40px 100px;
}
@media (max-width: 767px) {
.nk-after-hero {
margin-top: -100svh !important;
padding-top: 60px;
background:
linear-gradient(
to bottom,
rgba(244, 241, 232, 0) 0,
rgba(244, 241, 232, 0.16) 8svh,
rgba(244, 241, 232, 0.62) 20svh,
/* #F4F1E8 42vh */
#FFFFFF 42vh
);
}
}
/* =========================================================
BOTONES HERO — INSTITUCIONAL / MINIMAL
TODOS IGUALES
========================================================= */
.nk-hero-buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: auto;
margin: 20px 0 0 0;
padding: 0;
}
/* =========================================================
BOTONES
========================================================= */
.nk-hero-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
padding: 11px 18px;
color: #111111;
background: #FFFFFF;
border: 1px solid rgba(17, 17, 17, 0.22);
border-radius: 6px;
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
white-space: nowrap;
text-decoration: none !important;
cursor: pointer;
transition:
background-color 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.15s ease;
}
/* =========================================================
HOVER — SOLO RATÓN
========================================================= */
@media (hover: hover) and (pointer: fine) {
.nk-hero-button:hover {
color: #111111;
background: #F4F1E8;
border-color: #111111;
}
}
/* =========================================================
PULSACIÓN
========================================================= */
.nk-hero-button:active {
transform: translateY(1px);
}
/* =========================================================
ACCESIBILIDAD TECLADO
========================================================= */
.nk-hero-button:focus-visible {
outline: 2px solid #75C5DE;
outline-offset: 3px;
}
/* =========================================================
MÓVIL
========================================================= */
@media (max-width: 767px) {
.nk-hero-buttons {
gap: 8px;
margin-top: 18px;
}
.nk-hero-button {
min-height: 40px;
padding: 10px 14px;
font-size: 13px;
}
}
/* ==========================================================
MENÚ — ITEMS CON SUBMENÚ
========================================================== */
.nk-menu-item {
margin: 0 0 8px 0 !important;
padding: 0 !important;
}
/* ==========================================================
BOTÓN PRINCIPAL DEL SUBMENÚ
Visualmente equivalente a .nk-menu-link
========================================================== */
.nk-menu-submenu-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0;
border: 0 !important;
outline: 0;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
color: #F4F1E8 !important;
font-family: "Inter", sans-serif !important;
font-size: 30px !important;
font-weight: 500 !important;
line-height: 130% !important;
letter-spacing: normal !important;
text-align: left;
text-decoration: none !important;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
/* Evita estilos globales de Elementor/tema sobre button */
.nk-menu-submenu-toggle:hover,
.nk-menu-submenu-toggle:focus,
.nk-menu-submenu-toggle:active {
background: transparent !important;
background-color: transparent !important;
color: #F4F1E8 !important;
border-color: transparent !important;
box-shadow: none !important;
}
/* ==========================================================
TEXTO DEL ITEM PRINCIPAL
Mismo hover que .nk-menu-link
========================================================== */
.nk-menu-submenu-toggle > span:first-child {
color: #F4F1E8 !important;
opacity: 1;
transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
.nk-menu-submenu-toggle:hover > span:first-child {
color: #F4F1E8 !important;
opacity: 0.7;
}
}
/* ==========================================================
ICONO + / -
========================================================== */
.nk-menu-submenu-icon {
position: relative;
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
margin-left: 20px;
opacity: 1;
}
.nk-menu-submenu-icon::before,
.nk-menu-submenu-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
border-radius: 2px;
background: #F4F1E8;
transform: translate(-50%, -50%);
transition:
transform 0.3s ease,
opacity 0.3s ease;
}
/* Línea vertical del + */
.nk-menu-submenu-icon::after {
transform:
translate(-50%, -50%)
rotate(90deg);
}
/* ==========================================================
ITEM ABIERTO
+ pasa a ser -
========================================================== */
.nk-menu-has-submenu.open
.nk-menu-submenu-icon::after {
transform:
translate(-50%, -50%)
rotate(0deg);
opacity: 0;
}
/* ==========================================================
SUBMENÚ
========================================================== */
.nk-menu-submenu {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.3s ease;
}
.nk-menu-has-submenu.open
.nk-menu-submenu {
grid-template-rows: 1fr;
opacity: 1;
}
.nk-menu-submenu-inner {
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 8px;
padding-left: 2px;
}
/* Espaciado solo cuando está abierto */
.nk-menu-has-submenu.open
.nk-menu-submenu-inner {
padding-top: 6px;
padding-bottom: 14px;
}
/* ==========================================================
ENLACES DEL SUBMENÚ
========================================================== */
.nk-menu-submenu a {
display: block;
color: #9A9590 !important;
font-family: "Inter", sans-serif !important;
font-size: 16px;
font-weight: 400;
line-height: 140%;
text-decoration: none !important;
transition:
color 0.3s ease,
transform 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
.nk-menu-submenu a:hover {
color: #F4F1E8 !important;
transform: translateX(5px);
}
}
/* ==========================================================
ACCESIBILIDAD — FOCO DE TECLADO
========================================================== */
.nk-menu-submenu-toggle:focus-visible,
.nk-menu-submenu a:focus-visible {
outline: 2px solid #75C5DE !important;
outline-offset: 3px;
}
/* ==========================================================
MÓVIL
========================================================== */
@media (max-width: 767px) {
.nk-menu-submenu-toggle {
font-size: 24px !important;
}
.nk-menu-submenu a {
font-size: 16px;
}
}
/* ==========================================================
REDUCIR MOVIMIENTO
========================================================== */
@media (prefers-reduced-motion: reduce) {
.nk-menu-submenu,
.nk-menu-submenu-toggle > span:first-child,
.nk-menu-submenu-icon::before,
.nk-menu-submenu-icon::after,
.nk-menu-submenu a {
transition: none !important;
}
}
/* PÁGINAS GENERALES */
/* ==========================================================
PÁGINAS INTERIORES — SECCIÓN BASE GLOBAL
Elementor clásico:
SECCIÓN [nk-page-section]
└── COLUMNA
└── contenido libre
========================================================== */
/* ==========================================================
SECCIÓN EXTERIOR
========================================================== */
.nk-page-section {
position: relative;
width: 100% !important;
margin:
-110px
0
0
0 !important;
padding:
190px
0
100px
0 !important;
background: #F4F1E8;
overflow: hidden;
box-sizing: border-box;
}
/* Todo dentro del componente usa border-box */
.nk-page-section *,
.nk-page-section *::before,
.nk-page-section *::after {
box-sizing: border-box;
}
/* ==========================================================
MOTIVO DECORATIVO SUPERIOR
========================================================== */
.nk-page-section::before {
content: "CONCELLO DE LOBIOS";
position: absolute;
top: 15px;
left: 50%;
z-index: 0;
transform: translateX(-50%);
display: block;
width: max-content;
color: rgba(17, 17, 17, 0.055);
font-family: "Inter", sans-serif;
font-size: clamp(72px, 10vw, 180px);
font-weight: 500;
line-height: 0.9;
letter-spacing: -0.07em;
white-space: nowrap;
pointer-events: none;
user-select: none;
}
/* ==========================================================
CONTENEDOR INTERIOR
Mismo máximo de 1600px usado en el hero
========================================================== */
.nk-page-section > .elementor-container {
position: relative;
z-index: 1;
width: 100% !important;
max-width: 1600px !important;
margin:
0
auto !important;
padding:
0
40px !important;
}
/* ==========================================================
COLUMNAS
========================================================== */
.nk-page-section .elementor-column {
min-width: 0;
}
.nk-page-section .elementor-widget-wrap {
align-content: flex-start;
}
/* ==========================================================
ESPACIADO GENERAL ENTRE WIDGETS
========================================================== */
.nk-page-section
.elementor-widget:not(:last-child) {
margin-bottom: 26px;
}
/* Encabezados seguidos de contenido algo más compactos */
.nk-page-section
.elementor-widget-heading:not(:last-child) {
margin-bottom: 18px;
}
/* ==========================================================
TIPOGRAFÍA BASE
========================================================== */
.nk-page-section {
color: #111111;
font-family: "Inter", sans-serif;
}
.nk-page-section p,
.nk-page-section li {
color: #111111;
font-family: "Inter", sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 1.65;
}
/* Párrafos */
.nk-page-section p {
margin-top: 0;
margin-bottom: 1.2em;
}
.nk-page-section p:last-child {
margin-bottom: 0;
}
/* ==========================================================
ENCABEZADOS
========================================================== */
.nk-page-section h1,
.nk-page-section h2,
.nk-page-section h3,
.nk-page-section h4,
.nk-page-section h5,
.nk-page-section h6 {
margin-top: 0;
color: #111111;
font-family: "Inter", sans-serif;
letter-spacing: -0.035em;
}
.nk-page-section h1 {
font-size: clamp(52px, 6vw, 92px);
font-weight: 500;
line-height: 0.98;
}
.nk-page-section h2 {
font-size: clamp(34px, 4vw, 52px);
font-weight: 500;
line-height: 1.05;
}
.nk-page-section h3 {
font-size: clamp(24px, 2.5vw, 32px);
font-weight: 500;
line-height: 1.15;
}
.nk-page-section h4 {
font-size: 20px;
font-weight: 500;
line-height: 1.25;
}
/* ==========================================================
ENLACES DE TEXTO
No afecta a botones de Elementor
========================================================== */
.nk-page-section
a:not(.elementor-button) {
color: #111111;
text-decoration-line: underline;
text-decoration-color: #75C5DE;
text-decoration-thickness: 1.5px;
text-underline-offset: 4px;
transition:
color 0.25s ease,
opacity 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.nk-page-section
a:not(.elementor-button):hover {
color: #4A9DB8;
}
}
/* ==========================================================
LISTAS
========================================================== */
.nk-page-section ul,
.nk-page-section ol {
margin:
0
0
1.5em
0;
padding-left: 1.4em;
}
.nk-page-section li {
margin-bottom: 0.45em;
}
.nk-page-section li:last-child {
margin-bottom: 0;
}
/* Marcador de listas */
.nk-page-section li::marker {
color: #75C5DE;
}
/* ==========================================================
BOTONES ELEMENTOR
========================================================== */
.nk-page-section .elementor-button {
padding:
12px
20px;
border:
1px
solid
#111111;
border-radius: 999px;
background: #111111;
color: #F4F1E8 !important;
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1;
box-shadow: none;
transition:
background-color 0.25s ease,
color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.nk-page-section .elementor-button:hover {
background: transparent;
color: #111111 !important;
}
}
/* ==========================================================
DIVISORES
========================================================== */
.nk-page-section
.elementor-divider-separator {
border-color:
rgba(17, 17, 17, 0.16) !important;
}
/* ==========================================================
IMÁGENES DE CONTENIDO
========================================================== */
.nk-page-section
.elementor-widget-image img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
}
/* ==========================================================
BLOCKQUOTE
========================================================== */
.nk-page-section blockquote {
margin:
40px
0;
padding:
8px
0
8px
24px;
border-left:
3px
solid
#75C5DE;
font-size: 22px;
line-height: 1.45;
}
/* ==========================================================
SELECCIÓN DE TEXTO
========================================================== */
.nk-page-section ::selection {
background: #75C5DE;
color: #111111;
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 1024px) {
.nk-page-section {
padding-bottom: 80px !important;
}
.nk-page-section > .elementor-container {
padding:
0
28px !important;
}
}
/* ==========================================================
MÓVIL
#content usa 90px en lugar de 110px
========================================================== */
@media (max-width: 767px) {
.nk-page-section {
margin-top:
-90px !important;
padding:
145px
0
64px
0 !important;
}
.nk-page-section::before {
top: 20px;
left: 50%;
width: calc(100% - 40px);
transform: translateX(-50%);
font-size: clamp(28px, 8.5vw, 42px);
line-height: 0.9;
letter-spacing: -0.07em;
text-align: center;
white-space: nowrap;
}
.nk-page-section > .elementor-container {
padding:
0
20px !important;
}
.nk-page-section
.elementor-widget:not(:last-child) {
margin-bottom: 22px;
}
.nk-page-section
.elementor-widget-heading:not(:last-child) {
margin-bottom: 14px;
}
.nk-page-section p,
.nk-page-section li {
font-size: 16px;
line-height: 1.6;
}
.nk-page-section h1 {
font-size: clamp(44px, 13vw, 58px);
}
.nk-page-section h2 {
font-size: clamp(30px, 9vw, 40px);
}
.nk-page-section h3 {
font-size: 24px;
}
.nk-page-section blockquote {
margin:
30px
0;
padding-left: 18px;
font-size: 19px;
}
}
/* ==========================================================
REDUCIR MOVIMIENTO
========================================================== */
@media (prefers-reduced-motion: reduce) {
.nk-page-section a,
.nk-page-section .elementor-button {
transition: none !important;
}
}
/* ==========================================================
PÁGINAS INTERIORES — VARIANTES
----------------------------------------------------------
Base:
nk-page-section
Fotografía:
nk-page-section nk-page-section-image
Landing azul:
nk-page-section nk-page-section-blue
========================================================== */
/* ==========================================================
VARIANTE — IMAGEN
========================================================== */
.nk-page-section-image {
background: #F4F1E8 !important;
}
/*
* En la variante fotográfica reutilizamos ::before.
*
* En la versión normal contiene:
*
* CONCELLO DE LOBIOS
*
* Aquí pasa a convertirse en la franja fotográfica.
*/
.nk-page-section-image::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
z-index: 0;
width: 100%;
height: 190px;
transform: none;
/*
* Primera capa:
* suaviza la fotografía y la funde con el fondo crema.
*
* Segunda capa:
* imagen asignada mediante --nk-page-image.
*/
background-image:
linear-gradient(
to bottom,
rgba(244, 241, 232, 0.28) 0%,
rgba(244, 241, 232, 0.16) 55%,
#F4F1E8 100%
),
var(--nk-page-image, none);
background-position:
center center,
center center;
background-size:
cover,
cover;
background-repeat:
no-repeat,
no-repeat;
pointer-events: none;
}
/*
* El container debe quedar siempre por encima
* de la decoración.
*/
.nk-page-section-image > .elementor-container {
position: relative;
z-index: 1;
}
/* ==========================================================
VARIANTE — AZUL
========================================================== */
.nk-page-section-blue {
background: #75C5DE !important;
color: #111111;
}
/*
* Conservamos el watermark, pero ligeramente
* más visible sobre azul.
*/
.nk-page-section-blue::before {
color: rgba(17, 17, 17, 0.10);
}
/* ==========================================================
AZUL — TIPOGRAFÍA
========================================================== */
.nk-page-section-blue h1,
.nk-page-section-blue h2,
.nk-page-section-blue h3,
.nk-page-section-blue h4,
.nk-page-section-blue h5,
.nk-page-section-blue h6,
.nk-page-section-blue p,
.nk-page-section-blue li {
color: #111111;
}
/* ==========================================================
AZUL — ENLACES
========================================================== */
.nk-page-section-blue
a:not(.elementor-button) {
color: #111111;
text-decoration-color:
rgba(17, 17, 17, 0.45);
}
@media (hover: hover) and (pointer: fine) {
.nk-page-section-blue
a:not(.elementor-button):hover {
color: #111111;
opacity: 0.65;
}
}
/* ==========================================================
AZUL — LISTAS
========================================================== */
.nk-page-section-blue li::marker {
color: #111111;
}
/* ==========================================================
AZUL — DIVISORES
========================================================== */
.nk-page-section-blue
.elementor-divider-separator {
border-color:
rgba(17, 17, 17, 0.22) !important;
}
/* ==========================================================
AZUL — BLOCKQUOTE
========================================================== */
.nk-page-section-blue blockquote {
border-left-color:
rgba(17, 17, 17, 0.65);
}
/* ==========================================================
AZUL — SELECCIÓN
========================================================== */
.nk-page-section-blue ::selection {
background: #F4F1E8;
color: #111111;
}
/* ==========================================================
MÓVIL — VARIANTE IMAGEN
========================================================== */
@media (max-width: 767px) {
/*
* En móvil el contenido empieza a 145px,
* por eso la fotografía termina exactamente ahí.
*/
.nk-page-section-image::before {
height: 145px;
}
}
/* ==========================================================
HERO — CARTELES TEMPORALES
========================================================== */
.nk-hero-posters-widget > .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.nk-hero-posters {
display: flex;
margin: 0;
padding: 0;
}
.nk-hero-poster {
display: block;
flex: 0 0 auto;
margin: 0;
padding: 0;
border: 0;
background: transparent;
line-height: 0;
text-decoration: none !important;
overflow: hidden;
}
.nk-hero-poster img {
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 0;
border: 0;
object-fit: contain;
}
/* ==========================================================
ESCRITORIO
----------------------------------------------------------
El widget completo sale del flujo.
Su referencia es el widget-wrap de nk-hero-content-inner,
cuyo comienzo coincide con el primer elemento de la
izquierda.
========================================================== */
@media (min-width: 768px) {
.nk-hero-content
.nk-hero-content-inner
> .elementor-widget-wrap {
position: relative !important;
}
.nk-hero-content
.nk-hero-content-inner
> .elementor-widget-wrap
> .nk-hero-posters-widget {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: auto !important;
left: auto !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
align-self: auto !important;
z-index: 3;
}
.nk-hero-posters {
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-end;
gap: 12px;
}
.nk-hero-poster {
width: clamp(190px, 12vw, 235px);
}
}
/* ==========================================================
HOVER — SOLO SI EL CARTEL ES ENLACE
========================================================== */
@media (hover: hover) and (pointer: fine) {
a.nk-hero-poster img {
transition:
transform 0.3s ease,
opacity 0.3s ease;
}
a.nk-hero-poster:hover img {
transform: scale(1.025);
opacity: 0.92;
}
}
/* ==========================================================
FOCO TECLADO
========================================================== */
a.nk-hero-poster:focus-visible {
outline: 2px solid #75C5DE;
outline-offset: 4px;
}
/* ==========================================================
MÓVIL
----------------------------------------------------------
Vuelve al flujo normal de Elementor.
Queda debajo de los botones, exactamente como antes.
========================================================== */
@media (max-width: 767px) {
.nk-hero-posters-widget {
margin-top: 33px !important;
}
.nk-hero-posters {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 10px;
}
.nk-hero-poster {
width: clamp(80px, 25vw, 110px);
}
}
/* ==========================================================
REDUCIR MOVIMIENTO
========================================================== */
@media (prefers-reduced-motion: reduce) {
a.nk-hero-poster img {
transition: none !important;
}
a.nk-hero-poster:hover img {
transform: none !important;
}
}
/* ==========================================================
HEADER V2 · NAVEGACIÓN HORIZONTAL EDITORIAL
- Desktop >=768px: barra totalmente transparente y conjunto
de navegación enmarcado por un borde de 1px.
- Móvil <=767px: conserva burger/panel y mueve burger a izquierda.
- No altera la altura ni la geometría del hero.
========================================================== */
@media (min-width: 768px) {
/* El burger no participa en escritorio. El mismo panel existente
se reutiliza como navegación horizontal para no duplicar menús. */
.nk-burger-btn {
display: none !important;
}
.nk-menu-panel,
.nk-menu-panel.open {
/* Desktop: navegación persistente durante todo el scroll.
Se usa fixed (equivalente visual a sticky en esta cabecera
superpuesta) para no introducir 50px en el flujo del hero. */
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 50px !important;
margin: 0 !important;
padding: 0 32px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 1 !important;
pointer-events: auto !important;
max-height: none !important;
overflow: visible !important;
transform: none !important;
transition: none !important;
}
.nk-menu-panel > .elementor-container {
width: 100% !important;
max-width: 1600px !important;
height: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
}
.nk-menu-panel .nk-menu-column {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.nk-menu-panel .nk-menu-column > .elementor-widget-wrap {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
/* La fila principal ocupa la parte superior de una única
cápsula que también contiene la información municipal. */
align-items: center !important;
justify-content: center !important;
gap: clamp(18px, 1.6vw, 30px) !important;
width: fit-content !important;
max-width: 100% !important;
height: 83px !important;
margin: 15px auto 0 !important;
/* Conservamos intacta la geometría de la fila superior y
añadimos 15px reales de aire antes de la fila informativa. */
padding: 3px 8px 40px 8px !important;
border: 1px solid rgba(17, 17, 17, 0.08);
border-radius: 9999px;
/* Una sola superficie blanca para las dos filas. */
background: #FFFFFF !important;
overflow: visible !important;
}
.nk-menu-panel .nk-menu-column > .elementor-widget-wrap > .elementor-element {
width: auto !important;
max-width: none !important;
flex: 0 0 auto !important;
margin: 0 !important;
}
/* Primer nivel */
.nk-menu-link,
.nk-menu-item {
position: relative;
margin: 0 !important;
padding: 0 !important;
}
.nk-menu-link .elementor-heading-title,
.nk-menu-submenu-toggle {
color: #111111 !important;
font-family: "Inter", sans-serif !important;
font-size: clamp(11.5px, 0.82vw, 13px) !important;
font-weight: 500 !important;
line-height: 1.2 !important;
letter-spacing: -0.01em !important;
white-space: nowrap;
}
.nk-menu-link .elementor-heading-title a,
.nk-menu-submenu-toggle,
.nk-menu-submenu-toggle > span:first-child {
color: #111111 !important;
}
/* Escritorio: navegación completa en mayúsculas sin alterar
el texto fuente ni el comportamiento móvil. */
.nk-menu-link .elementor-heading-title,
.nk-menu-submenu-toggle,
.nk-menu-submenu a,
.nk-menu-cta-text {
text-transform: uppercase;
}
.nk-menu-link .elementor-heading-title a,
.nk-menu-submenu-toggle {
position: relative;
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0;
opacity: 1;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
/* Subrayado editorial claro: nace desde el centro. */
.nk-menu-link .elementor-heading-title a::after,
.nk-menu-submenu-toggle::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 100%;
height: 2px;
background: #111111;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
transition: transform 0.24s ease;
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.nk-menu-link .elementor-heading-title a:hover,
.nk-menu-submenu-toggle:hover {
color: #111111 !important;
opacity: 1;
transform: translateY(-1px);
}
.nk-menu-link .elementor-heading-title a:hover::after,
.nk-menu-submenu-toggle:hover::after {
transform: translateX(-50%) scaleX(1);
}
}
/* Estado activo / página actual cuando el markup lo exponga. */
.nk-menu-link .elementor-heading-title a[aria-current="page"]::after,
.nk-menu-link.current-menu-item .elementor-heading-title a::after,
.nk-menu-link.current_page_item .elementor-heading-title a::after,
.nk-menu-has-submenu.open .nk-menu-submenu-toggle::after {
transform: translateX(-50%) scaleX(1);
}
.nk-menu-submenu-toggle {
justify-content: flex-start;
gap: 7px;
width: auto;
}
.nk-menu-submenu-toggle > span:first-child {
opacity: 1;
}
/* En escritorio, el texto del item con submenú permanece claro
también en hover/focus/active. */
.nk-menu-submenu-toggle:hover > span:first-child,
.nk-menu-submenu-toggle:focus > span:first-child,
.nk-menu-submenu-toggle:active > span:first-child {
color: #111111 !important;
opacity: 1;
}
.nk-menu-submenu-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
margin-left: 0;
}
.nk-menu-submenu-icon::before,
.nk-menu-submenu-icon::after {
width: 9px;
height: 1px;
background: #111111;
}
/* Segundo nivel: dropdown del mismo acordeón existente. */
.nk-menu-submenu,
.nk-menu-has-submenu.open .nk-menu-submenu {
position: absolute;
top: calc(100% + 8px);
left: -18px;
z-index: 10004;
display: block;
grid-template-rows: none;
width: max-content;
min-width: 226px;
max-width: min(330px, calc(100vw - 32px));
margin: 0;
padding: 9px 0;
border: 1px solid rgba(244, 241, 232, 0.12);
border-top: 2px solid #75C5DE;
border-radius: 3px;
background: rgba(11, 11, 11, 0.92);
backdrop-filter: blur(26px);
-webkit-backdrop-filter: blur(26px);
box-shadow: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-6px);
transition:
opacity 0.2s ease,
transform 0.2s ease,
visibility 0.2s ease;
}
.nk-menu-has-submenu.open .nk-menu-submenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.nk-menu-submenu-inner,
.nk-menu-has-submenu.open .nk-menu-submenu-inner {
display: flex;
flex-direction: column;
gap: 0;
min-height: 0;
padding: 0;
overflow: visible;
}
.nk-menu-submenu a {
display: block;
padding: 10px 18px;
color: #F4F1E8 !important;
font-size: 14px;
line-height: 1.35;
white-space: normal;
}
@media (hover: hover) and (pointer: fine) {
.nk-menu-submenu a:hover {
color: #75C5DE !important;
opacity: 1;
transform: translateX(3px);
}
}
/* CTA existente: se adapta al ritmo horizontal si está presente. */
.nk-menu-cta-wrapper {
margin: 0 0 0 2px;
}
/* El CTA no puede perderse sobre la cápsula blanca.
Se usa gris neutro solo en escritorio; móvil conserva
exactamente el estado validado anterior. */
.nk-menu-cta-bg {
background: #E4E4E4;
}
.nk-menu-cta-text {
padding: 4px 14px;
font-size: 12px;
}
.nk-menu-cta-circle {
width: 26px;
height: 26px;
flex-basis: 26px;
}
.nk-menu-cta-bg {
width: calc(100% - 8px - 8px - 26px - 8px);
}
/* Foco visible específico del modo horizontal. */
.nk-menu-link .elementor-heading-title a:focus-visible,
.nk-menu-submenu-toggle:focus-visible,
.nk-menu-submenu a:focus-visible {
outline: 2px solid #75C5DE !important;
outline-offset: 3px;
}
}
@media (max-width: 767px) {
/* El burger móvil pasa a la izquierda. El resto del panel conserva
la geometría y comportamiento WEB V2 existente. */
.nk-burger-btn {
left: 20px;
right: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.nk-menu-link .elementor-heading-title a,
.nk-menu-link .elementor-heading-title a::after,
.nk-menu-submenu-toggle,
.nk-menu-submenu-toggle::after,
.nk-menu-submenu,
.nk-menu-has-submenu.open .nk-menu-submenu {
transition: none !important;
}
}
/* ==========================================================
HEADER V2 · MARCA PNG DEL MENÚ · CANDIDATO STAGING 30/08/2026
Widget Imagen normal de Elementor con la clase:
nk-menu-brandmark
Desktop:
- primer elemento del conjunto de navegación;
- 99px de alto en todo escritorio;
- se desplaza 12px hacia arriba respecto a su posición natural para
repartir el desbordamiento de forma simétrica: ~8px arriba y ~8px abajo
de la cápsula de 83px; con el margen superior de 15px queda a ~7px del
límite superior del viewport y no lo sobrepasa.
Móvil:
- pasa a ser el último elemento visual del panel, después de la
información y del botón PWA;
- tamaño reducido un 20% respecto al candidato anterior: 51.2px.
========================================================== */
@media (min-width: 768px) {
.nk-menu-brandmark {
position: relative !important;
top: -12px !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
z-index: 2;
order: -999;
width: auto !important;
height: auto !important;
max-width: none !important;
flex: 0 0 auto !important;
align-self: flex-start !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
overflow: visible !important;
}
.nk-menu-brandmark .elementor-widget-container {
display: flex;
align-items: center;
justify-content: center;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.nk-menu-brandmark img {
display: block;
width: auto !important;
height: 99px !important;
max-width: none !important;
max-height: none !important;
object-fit: contain;
}
}
@media (min-width: 1200px) {
.nk-menu-brandmark img {
height: 99px !important;
}
}
@media (max-width: 767px) {
.nk-menu-brandmark {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
/* Último elemento visual del panel móvil: queda después de
.nk-menu-meta-widget (1000) y .nk-menu-pwa-widget (1001). */
order: 1100;
width: 100% !important;
max-width: 100% !important;
margin: 34px 0 8px 0 !important;
padding: 0 !important;
text-align: center;
line-height: 0;
}
.nk-menu-brandmark .elementor-widget-container {
display: flex;
justify-content: center;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.nk-menu-brandmark img {
display: block;
width: 51.2px !important;
height: auto !important;
max-width: 51.2px !important;
}
}
@media (max-width: 767px) {
.nk-menu-cta-wrapper {
margin-top: 9px !important;
}
}
/* ==========================================================
HERO · TRANSICIÓN CINEMATOGRÁFICA POR SCROLL · STAGING
Técnica:
- scroll natural, sin bloquear wheel/touch;
- JS crea .nk-hero-scroll-scene alrededor de .nk-hero;
- .nk-hero queda sticky mientras dura la escena;
- los widgets de .nk-hero-content desaparecen como un bloque;
- LOBIOS sube y CONCELLO DE baja hasta encontrarse;
- la fotografía hace un zoom mínimo + blur;
- .nk-after-hero recorre una pantalla completa sobre el hero sticky;
- su contenido asciende hasta quedar a ~90px del borde superior en
escritorio; móvil conserva ~60px;
- durante ese recorrido deja ver el fondo desenfocado antes de
fundirse gradualmente con #F4F1E8.
No cambia la geometría interna de .nk-hero-content-inner.
========================================================== */
.nk-hero {
--nk-hero-content-opacity: 1;
--nk-hero-content-y: 0px;
--nk-hero-title-y: 0px;
--nk-hero-kicker-y: 0px;
--nk-hero-title-scale: 1;
--nk-hero-title-opacity: 1;
--nk-hero-image-blur: 0px;
--nk-hero-image-scale: 1;
}
.nk-hero-scroll-scene {
position: relative;
width: 100%;
height: 200vh;
margin: 0;
padding: 0;
}
.nk-hero-scroll-scene > .nk-hero {
position: sticky !important;
top: 0 !important;
z-index: 1;
width: 100% !important;
}
/* La antigua capa crema sobre el hero queda desactivada.
La transición de color vive ahora en .nk-after-hero, de forma
que el listado puede entrar todavía sobre la fotografía con blur. */
.nk-hero-scroll-ready::after {
display: none !important;
}
/* Todos los widgets HTML/contenido del hero salen juntos:
headline, subtextos, botones y carteles actuales o futuros. */
.nk-hero-scroll-ready .nk-hero-content {
opacity: var(--nk-hero-content-opacity);
transform: translate3d(
0,
var(--nk-hero-content-y),
0
);
will-change: opacity, transform;
}
.nk-hero-scroll-ready.nk-hero-content-inert
.nk-hero-content-inner {
pointer-events: none !important;
}
/* LOBIOS se desplaza hacia arriba. El kicker traducible
recibe un desplazamiento contrario adicional. */
.nk-hero-scroll-ready
.nk-hero-big-text
.elementor-heading-title {
opacity: var(--nk-hero-title-opacity);
transform: translate3d(
0,
var(--nk-hero-title-y),
0
) scale(var(--nk-hero-title-scale));
transform-origin: 50% 100%;
will-change: opacity, transform;
}
.nk-hero-scroll-ready
.nk-hero-big-text
.elementor-heading-title
.nk-hero-kicker {
transform: translate3d(
-50%,
var(--nk-hero-kicker-y),
0
);
will-change: transform;
}
/* El transform se aplica al ![]()
, no al widget
.nk-hero-image-animate, para conservar su animación de entrada. */
.nk-hero-scroll-ready .nk-hero-base-img img {
filter: blur(var(--nk-hero-image-blur));
transform: scale(var(--nk-hero-image-scale));
transform-origin: 50% 50%;
will-change: filter, transform;
}
@media (max-width: 767px) {
/* En touch el recorrido es algo más corto que en escritorio. */
.nk-hero-scroll-scene {
height: 200vh;
height: 200svh;
}
}
/* Accesibilidad: con movimiento reducido no hay escena fijada,
aproximación, blur progresivo ni capa de transición. */
@media (prefers-reduced-motion: reduce) {
.nk-after-hero {
margin-top: 0 !important;
background: #F4F1E8 !important;
}
.nk-hero-scroll-scene {
height: auto !important;
}
.nk-hero-scroll-scene > .nk-hero {
position: relative !important;
top: auto !important;
}
.nk-hero-scroll-ready::after {
display: none !important;
}
.nk-hero-scroll-ready .nk-hero-content,
.nk-hero-scroll-ready
.nk-hero-big-text
.elementor-heading-title,
.nk-hero-scroll-ready
.nk-hero-big-text
.elementor-heading-title
.nk-hero-kicker,
.nk-hero-scroll-ready .nk-hero-base-img img {
opacity: 1 !important;
transform: none !important;
filter: none !important;
will-change: auto !important;
}
.nk-hero-scroll-ready
.nk-hero-big-text
.elementor-heading-title
.nk-hero-kicker {
transform: translateX(-50%) !important;
}
}
/* ==========================================================
ACTUALIDADE / CONTENIDO TRAS HERO — MÓVIL
Alinear margen lateral con el resto de secciones
========================================================== */
@media (max-width: 767px) {
.nk-after-hero {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
/* ==========================================================
MENÚ MÓVIL · RITMO UNIFORME ENTRE ITEMS
Normaliza widgets HTML que contienen submenús.
========================================================== */
@media (max-width: 767px) {
/* El widget HTML que contiene un item con submenú
usa exactamente el mismo espacio que un nk-menu-link. */
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap
> .elementor-widget-html:not(.nk-menu-meta-widget):has(.nk-menu-item) {
margin: 0 0 8px 0 !important;
}
/* El margen lo controla el widget exterior,
no el HTML interior. La línea informativa queda excluida
porque puede contener su propio acordeón secundario. */
.nk-menu-panel
.elementor-widget-html:not(.nk-menu-meta-widget):has(.nk-menu-item)
.nk-menu-item {
margin: 0 !important;
}
}
/* ==========================================================
HEADER V2 · SEGUNDA LÍNEA DE INFORMACIÓN MUNICIPAL
Candidato staging · 06/09/2026
Elementor clásico:
- Widget HTML dentro de .nk-menu-column
- Clase del widget: nk-menu-meta-widget
- Contenido interior: .nk-menu-meta
Escritorio:
- una única cápsula exterior para navegación + información;
- sin hueco entre filas ni segunda cápsula independiente;
- la marca PNG actúa como eje visual de los dos niveles.
Móvil:
- el mismo widget queda al final, después de .nk-menu-brandmark;
- sin fondo propio, sobre el panel negro;
- texto del mismo tamaño base que .nk-menu-cta-text (14px).
========================================================== */
@media (min-width: 768px) {
/* El wrapper fit-content es la única cápsula exterior.
La información queda dentro de esa misma superficie, pegada
a la fila principal y sin alterar el ancho dinámico del menú. */
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap {
position: relative !important;
}
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap
> .nk-menu-meta-widget {
position: absolute !important;
top: auto !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 1;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: auto;
}
.nk-menu-meta-widget > .elementor-widget-container {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.nk-menu-meta {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: clamp(6px, 0.7vw, 10px);
width: 100%;
min-height: 24px;
margin: 0;
/* El inicio de la información se sincroniza con el primer
item real de la fila superior. La variable la calcula el
JS a partir de la geometría renderizada, por lo que no
presupone que el ancho de la marca coincida con su altura. */
padding:
4px
14px
4px
var(--nk-menu-meta-left, 8px);
border: 0;
border-radius: 0;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
color: #111111;
font-family: "Inter", sans-serif;
font-size: clamp(10.5px, calc(0.68vw + 1px), 12px);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.005em;
text-align: left;
white-space: nowrap;
box-shadow: none;
}
.nk-menu-meta a {
color: #111111 !important;
text-decoration: none !important;
opacity: 0.78;
transition:
opacity 0.2s ease,
color 0.2s ease;
}
.nk-menu-meta > span:not(.nk-menu-meta-separator) {
opacity: 0.72;
}
.nk-menu-meta-separator {
opacity: 0.28;
}
.nk-menu-meta a:focus-visible {
outline: 2px solid #75C5DE;
outline-offset: 2px;
opacity: 1;
}
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
.nk-menu-meta a:hover {
color: #111111 !important;
opacity: 1;
}
}
@media (max-width: 767px) {
/* La información mantiene order:1000. La marca usa order:1100
y queda al final de todo el panel móvil. */
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap
> .nk-menu-meta-widget {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
order: 1000;
width: 100% !important;
max-width: 100% !important;
margin: 12px 0 0 0 !important;
padding: 0 !important;
}
.nk-menu-meta-widget > .elementor-widget-container {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.nk-menu-meta {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 6px 10px;
width: 100%;
margin: 0;
padding: 16px 0 0 0;
border: 0;
border-top: 1px solid rgba(244, 241, 232, 0.16);
border-radius: 0;
background: transparent;
color: #F4F1E8;
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
text-align: left;
}
.nk-menu-meta a,
.nk-menu-meta > span:not(.nk-menu-meta-separator) {
color: #F4F1E8 !important;
opacity: 0.88;
}
.nk-menu-meta a {
text-decoration: none !important;
}
.nk-menu-meta-separator {
color: #F4F1E8;
opacity: 0.28;
}
.nk-menu-meta a:focus-visible {
color: #75C5DE !important;
outline: 2px solid #75C5DE;
outline-offset: 3px;
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.nk-menu-meta a {
transition: none !important;
}
}
/* ==========================================================
HEADER V2 · DESPLEGABLE DENTRO DE LA LÍNEA INFORMATIVA
Candidato staging · 06/09/2026
Reutiliza el mismo contrato accesible del menú:
.nk-menu-has-submenu / .nk-menu-submenu-toggle /
.nk-menu-submenu / aria-expanded / aria-hidden / inert.
No añade un segundo sistema JavaScript.
========================================================== */
@media (min-width: 768px) {
.nk-menu-meta .nk-menu-meta-dropdown {
position: relative;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
margin: 0 !important;
padding: 0 !important;
}
/* Variante secundaria: conserva el ritmo tipográfico de
.nk-menu-meta y no adopta el aspecto de primer nivel. */
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
width: auto;
min-height: 0;
margin: 0;
padding: 0;
color: #111111 !important;
font-family: "Inter", sans-serif !important;
font-size: inherit !important;
font-weight: 400 !important;
line-height: inherit !important;
letter-spacing: inherit !important;
text-transform: none !important;
white-space: nowrap;
opacity: 0.78;
transform: none !important;
transition: opacity 0.2s ease;
}
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle > span:first-child,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle:hover,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle:focus,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle:active,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle:hover > span:first-child,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle:focus > span:first-child,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle:active > span:first-child {
color: #111111 !important;
}
/* Sin subrayado de navegación principal. */
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle::after {
display: none !important;
content: none !important;
}
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-icon {
width: 9px;
height: 9px;
flex: 0 0 9px;
margin-left: 0;
}
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-icon::before,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-icon::after {
width: 7px;
height: 1px;
background: #111111;
}
/* Dropdown visualmente coherente con los de primer nivel,
pero más compacto por pertenecer a información auxiliar. */
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu,
.nk-menu-meta .nk-menu-meta-dropdown.open .nk-menu-submenu {
top: calc(100% + 9px);
left: 0;
min-width: 190px;
max-width: min(280px, calc(100vw - 32px));
padding: 7px 0;
}
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu a {
padding: 8px 14px;
color: #F4F1E8 !important;
font-size: 12px;
line-height: 1.35;
text-transform: none;
opacity: 1;
}
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle:focus-visible {
outline: 2px solid #75C5DE !important;
outline-offset: 2px;
opacity: 1;
}
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle:hover {
opacity: 1;
transform: none !important;
}
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu a:hover {
color: #75C5DE !important;
opacity: 1;
}
}
@media (max-width: 767px) {
/* En móvil el mismo componente se convierte en acordeón vertical
dentro del bloque informativo, sin caja flotante nueva. */
.nk-menu-meta .nk-menu-meta-dropdown {
display: block;
flex: 0 0 100%;
width: 100%;
margin: 2px 0 0 0 !important;
padding: 0 !important;
}
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 7px;
width: auto;
margin: 0;
padding: 0;
color: #F4F1E8 !important;
font-family: "Inter", sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
text-transform: none !important;
opacity: 0.88;
}
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle > span:first-child,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle:hover,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle:focus,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle:active,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle:hover > span:first-child,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle:focus > span:first-child,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle:active > span:first-child {
color: #F4F1E8 !important;
}
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
margin-left: 0;
}
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-icon::before,
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-icon::after {
width: 9px;
height: 1px;
background: #F4F1E8;
}
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-inner {
padding-left: 0;
}
.nk-menu-meta .nk-menu-meta-dropdown.open .nk-menu-submenu-inner {
padding-top: 7px;
padding-bottom: 2px;
}
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu a {
color: #9A9590 !important;
font-size: 14px;
line-height: 1.4;
text-transform: none;
}
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle:focus-visible {
color: #75C5DE !important;
outline: 2px solid #75C5DE !important;
outline-offset: 3px;
opacity: 1;
}
/* El separador inmediatamente anterior al acordeón no debe quedar
colgando al final de la fila informativa en móvil. */
.nk-menu-meta-separator:has(+ .nk-menu-meta-dropdown) {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle {
transition: none !important;
}
}
/* ==========================================================
HEADER V2 · PWA AISLADA DE LA LÍNEA INFORMATIVA
Candidato staging · 07/09/2026
Elementor clásico:
- Widget HTML independiente dentro de .nk-menu-column.
- Clase del widget: nk-menu-pwa-widget
- El botón conserva data-nk-pwa-install / hide-installed / fallback.
- Los textos visibles viven en HTML para que Polylang pueda traducirlos.
Escritorio:
- queda visualmente en la segunda fila, anclado a la derecha;
- position:absolute lo saca del flex que calcula la navegación;
- por tanto no puede ensanchar, desplazar ni romper el menú.
Móvil:
- vuelve al flujo normal y queda después de .nk-menu-meta-widget.
========================================================== */
@media (min-width: 768px) {
/* El JS mide el ancho renderizado del botón PWA y reserva exactamente
ese espacio en la segunda fila. Así una traducción más larga no
invade la información ni obliga a usar un ancho fijo. */
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap:has(> .nk-menu-pwa-widget)
.nk-menu-meta {
padding-right: var(--nk-menu-pwa-space, 14px);
}
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap
> .nk-menu-pwa-widget {
position: absolute !important;
top: auto !important;
right: 28px !important;
bottom: 0 !important;
left: auto !important;
z-index: 3;
width: max-content !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto !important;
pointer-events: auto;
}
.nk-menu-pwa-widget > .elementor-widget-container {
width: max-content !important;
margin: 0 !important;
padding: 0 !important;
}
.nk-menu-pwa-install {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
width: auto !important;
min-width: 0 !important;
min-height: 0 !important;
height: 24px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #111111 !important;
font-family: "Inter", sans-serif !important;
font-size: clamp(10.5px, calc(0.68vw + 1px), 12px) !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: none !important;
white-space: nowrap !important;
opacity: 0.82;
cursor: pointer;
appearance: none !important;
-webkit-appearance: none !important;
transition: opacity 0.2s ease;
}
.nk-menu-pwa-install[hidden] {
display: none !important;
}
.nk-menu-pwa-install-icon {
display: block !important;
width: 11px !important;
height: 11px !important;
flex: 0 0 11px !important;
fill: currentColor !important;
}
.nk-menu-pwa-label {
color: inherit;
font: inherit;
line-height: 1.2;
letter-spacing: -0.005em;
white-space: nowrap;
}
.nk-menu-pwa-label--desktop {
display: inline !important;
}
.nk-menu-pwa-label--mobile {
display: none !important;
}
.nk-menu-pwa-install:focus-visible {
outline: 2px solid #75C5DE !important;
outline-offset: 2px;
opacity: 1;
}
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
.nk-menu-pwa-install:hover {
color: #111111 !important;
background: transparent !important;
opacity: 1;
}
}
@media (max-width: 767px) {
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap
> .nk-menu-pwa-widget {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
order: 1001;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.nk-menu-pwa-widget > .elementor-widget-container {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.nk-menu-pwa-install {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 7px;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
margin: 10px 0 0 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #F4F1E8 !important;
font-family: "Inter", sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: none !important;
text-align: left !important;
white-space: normal !important;
opacity: 0.92;
cursor: pointer;
appearance: none !important;
-webkit-appearance: none !important;
}
.nk-menu-pwa-install[hidden] {
display: none !important;
}
.nk-menu-pwa-install-icon {
display: block !important;
width: 14px !important;
height: 14px !important;
flex: 0 0 14px !important;
fill: currentColor !important;
}
.nk-menu-pwa-label {
color: inherit;
font: inherit;
line-height: 1.4;
letter-spacing: 0;
}
.nk-menu-pwa-label--desktop {
display: none !important;
}
.nk-menu-pwa-label--mobile {
display: inline !important;
white-space: normal;
}
.nk-menu-pwa-install:focus-visible {
color: #75C5DE !important;
outline: 2px solid #75C5DE !important;
outline-offset: 3px;
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.nk-menu-pwa-install {
transition: none !important;
}
}
/* ==========================================================
HEADER V2 · ACCESO + REGISTRO EN SEGUNDA FILA
Candidato staging · 07/09/2026
- Se integran al inicio de .nk-menu-meta.
- No reutilizan .nk-hero-button para no heredar su geometría.
- Iconos compactos y texto real en HTML, compatible con Polylang.
- No cambia el cálculo dinámico del botón PWA aislado.
========================================================== */
@media (min-width: 768px) {
.nk-menu-meta-auth {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
gap: clamp(8px, 0.75vw, 12px);
margin: 0;
padding: 0;
white-space: nowrap;
}
.nk-menu-meta .nk-menu-meta-auth-link {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
margin: 0;
padding: 4px 10px;
border: 1px solid rgba(17, 17, 17, 0.04);
border-radius: 9999px;
background: #E4E4E4;
color: #111111 !important;
font-family: "Inter", sans-serif !important;
font-size: inherit !important;
font-weight: 600 !important;
line-height: inherit !important;
letter-spacing: inherit !important;
text-transform: none !important;
text-decoration: none !important;
white-space: nowrap;
opacity: 1;
transition: none !important;
transform: none !important;
}
.nk-menu-meta-auth-icon {
display: block;
width: 11px;
height: 11px;
flex: 0 0 11px;
color: currentColor;
}
.nk-menu-meta .nk-menu-meta-auth-link:focus-visible {
outline: 2px solid #75C5DE;
outline-offset: 2px;
opacity: 1;
}
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
.nk-menu-meta .nk-menu-meta-auth-link:hover {
color: #111111 !important;
background: #E4E4E4;
opacity: 1;
transform: none !important;
}
}
@media (max-width: 767px) {
.nk-menu-meta-auth {
display: flex;
align-items: center;
justify-content: flex-start;
flex: 0 0 100%;
width: 100%;
gap: 18px;
margin: 0 0 4px 0;
padding: 0;
}
.nk-menu-meta .nk-menu-meta-auth-link {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 7px;
color: #F4F1E8 !important;
font-family: "Inter", sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
text-decoration: none !important;
opacity: 0.92;
}
.nk-menu-meta-auth-icon {
display: block;
width: 14px;
height: 14px;
flex: 0 0 14px;
color: currentColor;
}
.nk-menu-meta .nk-menu-meta-auth-link:focus-visible {
color: #75C5DE !important;
outline: 2px solid #75C5DE;
outline-offset: 3px;
opacity: 1;
}
/* El separador que sigue al grupo Acceso/Registro no debe abrir
una nueva línea móvil con un punto aislado. */
.nk-menu-meta-auth + .nk-menu-meta-separator {
display: none;
}
}
/* Registro conserva el mismo tamaño y color, pero sin el realce semibold. */
.nk-menu-meta .nk-menu-meta-auth-link.nk-menu-meta-auth-link--register {
font-weight: 400 !important;
}
@media (prefers-reduced-motion: reduce) {
.nk-menu-meta-auth-link {
transition: none !important;
}
}
/* ==========================================================
HEADER V2 · DIVISOR CENTRAL + AIRE INFERIOR · STAGING 07/09/2026
Escritorio únicamente:
- divisor horizontal muy tenue en el centro exacto de la cápsula;
- queda contenido 1px dentro del borde exterior;
- 6px de aire real entre la segunda fila y el borde inferior;
- se conserva el aire previo entre filas ampliando la cápsula y
su reserva inferior en la misma medida;
- marca 99px reequilibrada para mantener desbordamiento similar
arriba/abajo sin alcanzar el límite superior del viewport.
========================================================== */
@media (min-width: 768px) {
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap {
height: 89px !important;
padding: 3px 8px 46px 8px !important;
}
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap::after {
content: "";
position: absolute;
top: 50%;
right: 1px;
left: 1px;
z-index: 0;
height: 1px;
background: rgba(17, 17, 17, 0.045);
pointer-events: none;
transform: translateY(-0.5px);
}
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap
> .nk-menu-meta-widget {
bottom: 6px !important;
}
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap
> .nk-menu-pwa-widget {
bottom: 6px !important;
}
.nk-menu-brandmark {
top: -8px !important;
}
}
/* ==========================================================
HEADER V2 · BANDA SUPERIOR PARCIAL + SEGUNDA FILA LIBRE
Candidato staging · 07/09/2026
Escritorio únicamente:
- la superficie blanca ocupa SOLO la primera fila;
- la banda llega también al extremo izquierdo del conjunto y
pasa por debajo de la marca;
- ambos extremos quedan redondeados de forma simétrica;
- la banda se alinea con la caja real de la primera fila para
centrar verticalmente los textos sin mover los widgets;
- navegación principal negra, como en el estado previo;
- se elimina totalmente el divisor horizontal entre filas;
- segunda fila queda sobre la fotografía/fondo de página;
- ACCESO / REGISTRO conservan sus píldoras;
- PWA adopta exactamente el mismo lenguaje de píldora;
- el contraste adaptativo se usa solo para el texto libre de la
segunda fila en la home; interiores permanecen oscuros;
- móvil no cambia.
========================================================== */
@media (min-width: 768px) {
/* El wrapper conserva toda su geometría, pero deja de pintar
una cápsula alrededor de las dos filas. */
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
/* Banda blanca únicamente detrás de la fila superior.
Ocupa todo el ancho del conjunto, incluida la zona bajo la marca.
Su top coincide con el padding superior real del wrapper (3px),
de modo que la banda de 40px y la caja flex de la primera fila
comparten exactamente el mismo centro vertical. */
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap::before {
content: "";
position: absolute;
top: 3px;
right: 0;
left: 0;
z-index: 0;
height: 40px;
border: 0;
border-radius: 9999px;
background: #FFFFFF;
pointer-events: none;
}
/* El antiguo divisor central desaparece por completo. */
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap::after,
.nk-menu-panel::after {
content: none !important;
display: none !important;
}
/* Widgets principales por encima de la banda. */
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap
> .elementor-element:not(.nk-menu-meta-widget):not(.nk-menu-pwa-widget) {
position: relative;
z-index: 1;
}
/* Primera fila: negro, sin depender de la fotografía. */
.nk-menu-link .elementor-heading-title,
.nk-menu-link .elementor-heading-title a,
.nk-menu-submenu-toggle,
.nk-menu-submenu-toggle > span:first-child {
color: #111111 !important;
text-shadow: none !important;
}
.nk-menu-link .elementor-heading-title a::after,
.nk-menu-submenu-toggle::after {
background: #111111 !important;
}
.nk-menu-submenu-icon {
filter: none !important;
}
.nk-menu-submenu-icon::before,
.nk-menu-submenu-icon::after {
background: #111111 !important;
}
/* INSTALAR APP: misma píldora visual que ACCESO / REGISTRO.
Mantiene el ancho dinámico y el aislamiento del flex. */
.nk-menu-pwa-install {
justify-content: flex-start !important;
height: auto !important;
min-height: 0 !important;
padding: 4px 10px !important;
border: 1px solid rgba(17, 17, 17, 0.04) !important;
border-radius: 9999px !important;
background: #E4E4E4 !important;
box-shadow: none !important;
color: #111111 !important;
text-shadow: none !important;
font-weight: 600 !important;
opacity: 1 !important;
transition: none !important;
transform: none !important;
}
.nk-menu-pwa-install-icon {
color: #111111 !important;
filter: none !important;
}
.nk-menu-pwa-label {
color: #111111 !important;
text-shadow: none !important;
}
/* En la home, mientras el menú sigue sobre el HERO, el texto libre
de la segunda fila permanece crema. Las píldoras no cambian. */
body.nk-web-kit-home
.nk-menu-panel:not(.nk-menu-theme-dark)
.nk-menu-meta > a,
body.nk-web-kit-home
.nk-menu-panel:not(.nk-menu-theme-dark)
.nk-menu-meta > span:not(.nk-menu-meta-auth),
body.nk-web-kit-home
.nk-menu-panel:not(.nk-menu-theme-dark)
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle,
body.nk-web-kit-home
.nk-menu-panel:not(.nk-menu-theme-dark)
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle > span:first-child {
color: rgba(244, 241, 232, 0.88) !important;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.55),
0 0 6px rgba(0, 0, 0, 0.18);
}
body.nk-web-kit-home
.nk-menu-panel:not(.nk-menu-theme-dark)
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-icon::before,
body.nk-web-kit-home
.nk-menu-panel:not(.nk-menu-theme-dark)
.nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-icon::after {
background: rgba(244, 241, 232, 0.88) !important;
}
/* En interiores y en home fuera del HERO se usa negro. */
body:not(.nk-web-kit-home) .nk-menu-meta > a,
body:not(.nk-web-kit-home) .nk-menu-meta > span:not(.nk-menu-meta-auth),
body:not(.nk-web-kit-home) .nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle,
body:not(.nk-web-kit-home) .nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle > span:first-child,
body.nk-web-kit-home .nk-menu-panel.nk-menu-theme-dark .nk-menu-meta > a,
body.nk-web-kit-home .nk-menu-panel.nk-menu-theme-dark .nk-menu-meta > span:not(.nk-menu-meta-auth),
body.nk-web-kit-home .nk-menu-panel.nk-menu-theme-dark .nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle,
body.nk-web-kit-home .nk-menu-panel.nk-menu-theme-dark .nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-toggle > span:first-child {
color: rgba(17, 17, 17, 0.78) !important;
text-shadow: none !important;
}
body:not(.nk-web-kit-home) .nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-icon::before,
body:not(.nk-web-kit-home) .nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-icon::after,
body.nk-web-kit-home .nk-menu-panel.nk-menu-theme-dark .nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-icon::before,
body.nk-web-kit-home .nk-menu-panel.nk-menu-theme-dark .nk-menu-meta .nk-menu-meta-dropdown .nk-menu-submenu-icon::after {
background: rgba(17, 17, 17, 0.78) !important;
}
/* ACCESO / REGISTRO permanecen siempre oscuros sobre su fondo. */
.nk-menu-meta .nk-menu-meta-auth-link,
.nk-menu-meta .nk-menu-meta-auth-link:hover {
color: #111111 !important;
text-shadow: none !important;
}
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
.nk-menu-pwa-install:hover,
.nk-menu-pwa-install:hover .nk-menu-pwa-label {
color: #111111 !important;
background: #E4E4E4 !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ==========================================================
HEADER V2 · BANDA SUPERIOR FULLWIDTH + T90 · STAGING 07/09/2026
Escritorio únicamente:
- la banda blanca de la primera fila cruza de lado a lado;
- desaparecen los redondeos laterales de esa banda;
- se mantiene la segunda fila libre sobre el fondo;
- transparencia ligera del 10% (blanco al 90% de opacidad).
========================================================== */
@media (min-width: 768px) {
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap::before {
top: 3px !important;
right: auto !important;
left: 50% !important;
width: 100vw !important;
max-width: 100vw !important;
height: 40px !important;
border: 0 !important;
border-radius: 0 !important;
background: rgba(255, 255, 255, 0.90) !important;
transform: translateX(-50%) !important;
}
}
/* ==========================================================
HEADER V2 · ITEM DESTACADO "ENVIAR INCIDENCIA"
Preservado en combinación con banda superior fullwidth T90.
Elementor: mantener ambas clases en el widget:
nk-menu-link nk-menu-link-incidencia
========================================================== */
.nk-menu-panel
.nk-menu-link.nk-menu-link-incidencia
.elementor-heading-title,
.nk-menu-panel
.nk-menu-link.nk-menu-link-incidencia
.elementor-heading-title a,
.nk-menu-panel
.nk-menu-link.nk-menu-link-incidencia
.elementor-heading-title a:hover,
.nk-menu-panel
.nk-menu-link.nk-menu-link-incidencia
.elementor-heading-title a:focus,
.nk-menu-panel
.nk-menu-link.nk-menu-link-incidencia
.elementor-heading-title a:active {
color: #A86258 !important;
}
.nk-menu-panel
.nk-menu-link.nk-menu-link-incidencia
.elementor-heading-title a::after {
background: #A86258 !important;
}
@media (max-width: 767px) {
.nk-menu-panel
.nk-menu-link.nk-menu-link-incidencia
.elementor-heading-title,
.nk-menu-panel
.nk-menu-link.nk-menu-link-incidencia
.elementor-heading-title a,
.nk-menu-panel
.nk-menu-link.nk-menu-link-incidencia
.elementor-heading-title a:hover,
.nk-menu-panel
.nk-menu-link.nk-menu-link-incidencia
.elementor-heading-title a:focus,
.nk-menu-panel
.nk-menu-link.nk-menu-link-incidencia
.elementor-heading-title a:active {
color: #C47A72 !important;
}
}
/* ==========================================================
HEADER V2 · INFORMACIÓN EN PÍLDORA COMO ACCESO / REGISTRO
Candidato staging · 07/09/2026
Escritorio únicamente:
- el trigger del desplegable adopta la misma superficie neutra;
- mismo borde, radio y padding que Acceso / Registro;
- conserva el contrato accesible y el icono del desplegable;
- móvil no cambia.
========================================================== */
@media (min-width: 768px) {
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-toggle {
padding: 4px 10px !important;
border: 1px solid rgba(17, 17, 17, 0.04) !important;
border-radius: 9999px !important;
background: #E4E4E4 !important;
color: #000000 !important;
opacity: 1 !important;
text-shadow: none !important;
transition: none !important;
transform: none !important;
}
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-toggle > span:first-child {
color: #000000 !important;
text-shadow: none !important;
}
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-icon::before,
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-icon::after {
background: #111111 !important;
}
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-toggle:hover {
background: #E4E4E4 !important;
color: #000000 !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ==========================================================
HEADER V2 · INFORMACIÓN EN PÍLDORA · TEXTO NEGRO FORZADO
Corrección de especificidad · staging · 07/09/2026
La regla adaptativa de contraste del HERO tiene mayor
especificidad. Este bloque final la supera únicamente para
el trigger de Información en escritorio.
========================================================== */
@media (min-width: 768px) {
body.nk-web-kit-home
.nk-menu-panel:not(.nk-menu-theme-dark)
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-toggle,
body.nk-web-kit-home
.nk-menu-panel:not(.nk-menu-theme-dark)
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-toggle > span:first-child,
body.nk-web-kit-home
.nk-menu-panel.nk-menu-theme-dark
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-toggle,
body.nk-web-kit-home
.nk-menu-panel.nk-menu-theme-dark
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-toggle > span:first-child,
body:not(.nk-web-kit-home)
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-toggle,
body:not(.nk-web-kit-home)
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-toggle > span:first-child {
color: #000000 !important;
text-shadow: none !important;
}
body.nk-web-kit-home
.nk-menu-panel:not(.nk-menu-theme-dark)
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-icon::before,
body.nk-web-kit-home
.nk-menu-panel:not(.nk-menu-theme-dark)
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-icon::after,
body.nk-web-kit-home
.nk-menu-panel.nk-menu-theme-dark
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-icon::before,
body.nk-web-kit-home
.nk-menu-panel.nk-menu-theme-dark
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-icon::after,
body:not(.nk-web-kit-home)
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-icon::before,
body:not(.nk-web-kit-home)
.nk-menu-meta
.nk-menu-meta-dropdown
.nk-menu-submenu-icon::after {
background: #111111 !important;
}
}
/* ==========================================================
HERO · TEXTOS PRINCIPALES -30% SOLO ESCRITORIO
Candidato staging · 08/09/2026
- PUXEDO: reduce 30% el tamaño del Heading principal.
- Asociación de vecinos de: reduce 30% solo el texto.
- El logotipo mantiene su tamaño actual.
- Móvil <=767px no cambia.
========================================================== */
@media (min-width: 768px) {
.nk-hero-big-text .elementor-heading-title {
font-size: clamp(42px, 16.1vw, 252px) !important;
}
/* Conserva la escala base previa del kicker en escritorio,
independiente de la reducción aplicada al Heading principal. */
.nk-hero-big-text
.elementor-heading-title
.nk-hero-kicker {
font-size: min(5.5vw, 118.8px);
}
.nk-hero-big-text
.elementor-heading-title
.nk-hero-kicker-text {
font-size: 70% !important;
}
}
/* ==========================================================
HEADER · DESKTOP · EVITAR QUE LA SEGUNDA FILA
INTERCEPTE CLICS DE LA NAVEGACIÓN PRINCIPAL
Validado por el usuario · 11/09/2026
========================================================== */
@media (min-width: 768px) {
.nk-menu-panel
.nk-menu-column
> .elementor-widget-wrap
> .nk-menu-meta-widget,
.nk-menu-meta-widget
> .elementor-widget-container,
.nk-menu-meta {
pointer-events: none !important;
}
/* Solo los controles reales de la segunda fila
vuelven a recibir interacción. */
.nk-menu-meta a,
.nk-menu-meta button {
pointer-events: auto !important;
}
}