/* ==========================================================
   KONTECA | Mobile Drawer Navigation
   v1.0.0 — Hello Theme Child + Elementor + WPML
   
   INSTALACIÓN:
   Opción A — Añadir al final de style.css del child theme
   Opción B — Encolar como hoja separada desde functions.php:
              wp_enqueue_style('konteca-drawer',
                get_stylesheet_directory_uri().'/css/konteca-mobile-drawer.css',
                [], '1.0.0');
   ========================================================== */


/* ----------------------------------------------------------
   0. Ocultar el menú móvil por defecto de Elementor
   ---------------------------------------------------------- */
@media (max-width: 1024px) {

    /* Hamburger nativo de Elementor Nav Menu widget */
    .elementor-nav-menu--toggle,
    .e-n-menu-toggle,
    button.elementor-menu-toggle {
        display: none !important;
        visibility: hidden !important;
    }

    /* Dropdown / acordeón que Elementor despliega en mobile */
    .elementor-nav-menu--mobile,
    .elementor-nav-menu--mobile-enable,
    .elementor-nav-menu__container.elementor-nav-menu--dropdown {
        display: none !important;
    }

    /* Si usas el widget Navigation Menu de Elementor (>= 3.16) */
    .e-n-menu-content {
        display: none !important;
    }
}


/* ----------------------------------------------------------
   1. Nuestro botón hamburger (inyectado vía PHP en wp_footer)
      Posicionado fixed para superponerse al header de Elementor
   ---------------------------------------------------------- */
#konteca-ham {
    position: fixed;

    /*
     * Ajusta estos valores para alinear con tu header:
     * --konteca-ham-top: distancia desde el top del viewport
     * --konteca-ham-right: distancia desde el borde derecho
     * Añade estas variables a tu :root si quieres centralizarlas.
     */
    top: var(--konteca-ham-top, 11px);
    right: var(--konteca-ham-right, 16px);

    z-index: 9000;
    width: 42px;
    height: 42px;
    display: none; /* JS lo activa solo en mobile */
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.02) 100%
        ),
        linear-gradient(135deg, #000000 0%, #0b0b0b 55%, #181818 100%);

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--konteca-radius-s, 10px);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

#konteca-ham:hover {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Las tres barras */
#konteca-ham .khb {
    position: relative;
    width: 18px;
    height: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

#konteca-ham .khb span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: #ffffff;
    border-radius: 1px;
    transform-origin: center;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease,
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tercera barra más corta — detalle premium */
#konteca-ham .khb span:nth-child(3) {
    width: 65%;
}

/* Estado abierto → transforma en X */
#konteca-ham.is-open .khb span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
}
#konteca-ham.is-open .khb span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
#konteca-ham.is-open .khb span:nth-child(3) {
    width: 100%;
    transform: translateY(-5.5px) rotate(-45deg);
}

/* Mostrar sólo en mobile */
@media (max-width: 1024px) {
    #konteca-ham {
        display: flex;
    }
}

/* Focus visible accesible */
#konteca-ham:focus-visible {
    outline: 2px solid var(--e-global-color-primary, #ff5c00);
    outline-offset: 3px;
}


/* ----------------------------------------------------------
   2. Overlay semitransparente
   ---------------------------------------------------------- */
#konteca-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 9010;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    pointer-events: none;
    transition:
        background 0.35s ease,
        backdrop-filter 0.35s ease;
}

#konteca-drawer-overlay.is-visible {
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: auto;
}

/* Bloquear scroll del body cuando el drawer está abierto */
body.konteca-drawer-open {
    overflow: hidden;
}


/* ----------------------------------------------------------
   3. Drawer principal
   ---------------------------------------------------------- */
#konteca-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9020;
    width: min(82vw, 300px);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Fondo premium — consistente con .card-konteca-dark */
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.045) 0%,
            rgba(255, 255, 255, 0.012) 100%
        ),
        linear-gradient(160deg, #000000 0%, #0b0b0b 50%, #141414 100%);

    border-right: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow:
        6px 0 40px rgba(0, 0, 0, 0.45),
        inset -1px 0 0 rgba(255, 255, 255, 0.04);

    transform: translateX(-100%);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

#konteca-drawer.is-open {
    transform: translateX(0);
}


/* ----------------------------------------------------------
   4. Header del drawer — logo + botón cerrar
   ---------------------------------------------------------- */
.konteca-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

/* Logo: si es oscuro en el sitio, se invierte para el fondo dark */
.konteca-drawer__logo img {
    height: 38px !important;
    width: auto;
    display: block;
   /* filter: brightness(0) invert(1);  Quita este filtro si tu logo ya es blanco */
}

/* Fallback texto si no hay logo */
.konteca-drawer__logo-text {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.03em;
    text-decoration: none;
    line-height: 1;
}

/* Botón ✕ cerrar */
.konteca-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.konteca-drawer__close:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.konteca-drawer__close:focus-visible {
    outline: 2px solid var(--e-global-color-primary, #ff5c00);
    outline-offset: 2px;
}


/* ----------------------------------------------------------
   5. Body scrollable
   ---------------------------------------------------------- */
.konteca-drawer__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 0;

    /* Scrollbar discreta */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

.konteca-drawer__body::-webkit-scrollbar {
    width: 3px;
}

.konteca-drawer__body::-webkit-scrollbar-track {
    background: transparent;
}

.konteca-drawer__body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

/* Eyebrow "NAVEGACIÓN" */
.konteca-drawer__eyebrow {
    display: block;
    margin: 8px 20px 12px;
    color: var(--e-global-color-primary, #ff5c00);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.80;
    user-select: none;
}


/* ----------------------------------------------------------
   6. Navegación principal — items primer nivel
   ---------------------------------------------------------- */
.konteca-drawer__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.konteca-drawer__nav ul li {
    margin: 0;
    padding: 0;
}

/* Divisor ultra-sutil entre items */
.konteca-drawer__nav > ul > li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/*
 * Estilos compartidos para <a> y <button> de primer nivel.
 * El <button> se usa en items que tienen sub-menú.
 */
.konteca-drawer__nav > ul > li > a,
.konteca-drawer__nav > ul > li > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 13px 20px;

    color: rgba(255, 255, 255, 0.76);
    font-size: 0.96rem;
    font-weight: 400;
    letter-spacing: -0.015em; /* Consistente con h1-h6 del site */
    line-height: 1.2;
    text-decoration: none;

    /* El acento naranja: sólo el borde izquierdo, nunca relleno */
    border-left: 2px solid transparent;

    background: none;
    border-top: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    font-family: inherit;

    -webkit-tap-highlight-color: transparent;
    transition:
        color 0.22s ease,
        background 0.22s ease,
        border-left-color 0.22s ease;
}

/* Hover — naranja insinuado, no gritado */
.konteca-drawer__nav > ul > li > a:hover,
.konteca-drawer__nav > ul > li > button:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
    border-left-color: rgba(255, 92, 0, 0.45);
}

/* Item activo / página actual */
.konteca-drawer__nav > ul > li.current-menu-item > a,
.konteca-drawer__nav > ul > li.current-menu-ancestor > button {
    color: #ffffff;
    font-weight: 500;
    border-left-color: var(--e-global-color-primary, #ff5c00);
}

/* Focus accesible */
.konteca-drawer__nav > ul > li > a:focus-visible,
.konteca-drawer__nav > ul > li > button:focus-visible {
    outline: 2px solid rgba(255, 92, 0, 0.55);
    outline-offset: -2px;
}

/* Icono de flecha › para items con hijos */
.konteca-drawer__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.25);
    transition: color 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}

.konteca-drawer__arrow svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

.konteca-drawer__nav > ul > li > button:hover .konteca-drawer__arrow {
    color: rgba(255, 255, 255, 0.55);
}

/* Sub-menús ocultos visualmente pero en el DOM (SEO + accesibilidad) */
.konteca-drawer__nav ul ul.sub-menu {
    display: none;
    visibility: hidden;
    position: absolute;
    pointer-events: none;
}


/* ----------------------------------------------------------
   7. Sub-panel (segundo nivel — slide interno)
   ---------------------------------------------------------- */
#konteca-sub-panel {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.03) 0%,
            rgba(255, 255, 255, 0.01) 100%
        ),
        linear-gradient(160deg, #050505 0%, #0e0e0e 50%, #181818 100%);

    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

#konteca-sub-panel.is-open {
    transform: translateX(0);
}

/* Header del sub-panel: botón ‹ + título del padre */
.konteca-sub__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.konteca-sub__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

.konteca-sub__back:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}

.konteca-sub__back:focus-visible {
    outline: 2px solid var(--e-global-color-primary, #ff5c00);
    outline-offset: 2px;
}

.konteca-sub__back svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

.konteca-sub__title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.konteca-sub__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
}

/* Items del sub-menú */
.konteca-sub__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.konteca-sub__nav ul li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.konteca-sub__nav ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;

    color: rgba(255, 255, 255, 0.70);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-decoration: none;

    border-left: 2px solid transparent;

    -webkit-tap-highlight-color: transparent;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-left-color 0.2s ease;
}

/* Punto decorativo antes de cada sub-item */
.konteca-sub__nav ul li a::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.konteca-sub__nav ul li a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
    border-left-color: rgba(255, 92, 0, 0.40);
}

.konteca-sub__nav ul li a:hover::before {
    background: var(--e-global-color-primary, #ff5c00);
}

/* Sub-item activo */
.konteca-sub__nav ul li.current-menu-item > a {
    color: #ffffff;
    font-weight: 500;
    border-left-color: var(--e-global-color-primary, #ff5c00);
}

.konteca-sub__nav ul li.current-menu-item > a::before {
    background: var(--e-global-color-primary, #ff5c00);
}

.konteca-sub__nav ul li a:focus-visible {
    outline: 2px solid rgba(255, 92, 0, 0.55);
    outline-offset: -2px;
}


/* ----------------------------------------------------------
   8. Footer del drawer — CTA + WPML
   ---------------------------------------------------------- */
.konteca-drawer__footer {
    flex-shrink: 0;
    padding: 16px 20px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* CTA — estilo coherente con .btn-servicios-elegante del site */
.konteca-drawer__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;

    background: transparent;
    border: 1px solid var(--e-global-color-primary, #ff5c00);
    border-radius: 999px;

    color: var(--e-global-color-primary, #ff5c00);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;

    -webkit-tap-highlight-color: transparent;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.konteca-drawer__cta:hover,
.konteca-drawer__cta:focus {
    background: var(--e-global-color-primary, #ff5c00);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(255, 92, 0, 0.26);
    transform: translateY(-1px);
    text-decoration: none;
}

.konteca-drawer__cta:focus-visible {
    outline: 2px solid var(--e-global-color-primary, #ff5c00);
    outline-offset: 3px;
}

/* Flecha dentro del CTA */
.konteca-drawer__cta svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.konteca-drawer__cta:hover svg {
    transform: translateX(3px);
}

/* WPML — selector de idioma */
.konteca-drawer__lang {
    display: flex;
    align-items: center;
    gap: 0;
}

.konteca-drawer__lang a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;

    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
    text-decoration: none;

    border-right: 1px solid rgba(255, 255, 255, 0.08);
    line-height: 1;
    transition: color 0.2s ease;
}

.konteca-drawer__lang a:first-child {
    padding-left: 0;
}

.konteca-drawer__lang a:last-child {
    border-right: none;
}

.konteca-drawer__lang a:hover,
.konteca-drawer__lang a.is-active {
    color: rgba(255, 255, 255, 0.82);
}

/* Banderines WPML */
.konteca-drawer__lang img {
    width: 14px;
    height: 10px;
    object-fit: cover;
    border-radius: 1px;
    opacity: 0.60;
    display: block;
}

.konteca-drawer__lang a:hover img,
.konteca-drawer__lang a.is-active img {
    opacity: 1;
}
/* ==========================================================
   KONTECA Mobile Drawer V2
   Patch premium: derecha + estética Nike/conversión
   Añadir al FINAL de konteca-mobile-drawer.css
   ========================================================== */

:root {
	--konteca-drawer-width: min(92vw, 420px);
	--konteca-drawer-accent: rgba(255, 92, 0, 0.32);
	--konteca-drawer-accent-strong: rgba(255, 92, 0, 0.92);
	--konteca-drawer-text: rgba(255, 255, 255, 0.78);
	--konteca-drawer-text-strong: #ffffff;
	--konteca-drawer-text-soft: rgba(255, 255, 255, 0.46);
	--konteca-drawer-border: rgba(255, 255, 255, 0.07);
	--konteca-drawer-border-soft: rgba(255, 255, 255, 0.04);
	--konteca-drawer-surface: rgba(255, 255, 255, 0.035);
	--konteca-drawer-surface-hover: rgba(255, 255, 255, 0.055);
	--konteca-drawer-shadow: -10px 0 40px rgba(0, 0, 0, 0.30);
	--konteca-drawer-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* ---------- Hamburger más fino ---------- */
#konteca-ham {
	top: var(--konteca-ham-top, 12px);
	right: var(--konteca-ham-right, 16px);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%),
		linear-gradient(160deg, #020202 0%, #0a0a0a 55%, #111111 100%);
	box-shadow:
		0 6px 18px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#konteca-ham .khb {
	width: 18px;
	height: 11px;
}

#konteca-ham .khb span {
	height: 1.5px;
	background: #ffffff;
}

#konteca-ham .khb span:nth-child(3) {
	width: 58%;
	margin-left: auto;
}

#konteca-ham:hover {
	border-color: rgba(255, 255, 255, 0.14);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.02) 100%),
		linear-gradient(160deg, #020202 0%, #0b0b0b 55%, #141414 100%);
}

/* ---------- Overlay más premium ---------- */
#konteca-drawer-overlay.is-visible {
	background: rgba(0, 0, 0, 0.50);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* ---------- Drawer desde la DERECHA ---------- */
#konteca-drawer {
	left: auto;
	right: 0;
	width: var(--konteca-drawer-width);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%),
		linear-gradient(165deg, #020202 0%, #0a0a0a 52%, #131313 100%);
	border-right: 0;
	border-left: 1px solid var(--konteca-drawer-border);
	box-shadow:
		var(--konteca-drawer-shadow),
		inset 1px 0 0 rgba(255, 255, 255, 0.035);
	transform: translateX(100%);
}

#konteca-drawer.is-open {
	transform: translateX(0);
}

/* ---------- Header del drawer ---------- */
.konteca-drawer__header {
	padding: 18px 20px 14px;
	border-bottom: 1px solid var(--konteca-drawer-border);
}

.konteca-drawer__logo img {
	height: 26px;
	width: auto;
}

.konteca-drawer__close {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.62);
}

.konteca-drawer__close:hover {
	background: rgba(255, 255, 255, 0.09);
	color: #ffffff;
}

/* ---------- Eyebrow más sutil ---------- */
.konteca-drawer__eyebrow {
	margin: 10px 20px 12px;
	color: rgba(255, 255, 255, 0.40);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.18em;
}

/* ---------- Primer nivel: más Nike ---------- */
.konteca-drawer__nav > ul > li + li {
	border-top: 1px solid var(--konteca-drawer-border-soft);
}

.konteca-drawer__nav > ul > li > a,
.konteca-drawer__nav > ul > li > button {
	padding: 14px 20px;
	color: var(--konteca-drawer-text);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.2;
	border-left: 0;
	border-right: 2px solid transparent;
	background: transparent;
	transition:
		color 0.22s ease,
		background-color 0.22s ease,
		border-right-color 0.22s ease,
		padding-right 0.22s ease;
}

.konteca-drawer__nav > ul > li > a:hover,
.konteca-drawer__nav > ul > li > button:hover,
.konteca-drawer__nav > ul > li > a:focus,
.konteca-drawer__nav > ul > li > button:focus {
	color: var(--konteca-drawer-text-strong);
	background: var(--konteca-drawer-surface);
	border-right-color: var(--konteca-drawer-accent);
	padding-right: 24px;
}

.konteca-drawer__nav > ul > li.current-menu-item > a,
.konteca-drawer__nav > ul > li.current-menu-ancestor > button {
	color: var(--konteca-drawer-text-strong);
	font-weight: 500;
	border-right-color: var(--konteca-drawer-accent-strong);
	background: rgba(255, 255, 255, 0.025);
}

.konteca-drawer__arrow {
	width: 20px;
	height: 20px;
	color: rgba(255, 255, 255, 0.22);
}

.konteca-drawer__nav > ul > li > button:hover .konteca-drawer__arrow {
	color: rgba(255, 255, 255, 0.55);
	transform: translateX(1px);
}

/* ---------- Subpanel ---------- */
#konteca-sub-panel {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%),
		linear-gradient(165deg, #040404 0%, #0c0c0c 52%, #161616 100%);
}

.konteca-sub__header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--konteca-drawer-border);
}

.konteca-sub__back {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.62);
}

.konteca-sub__back:hover {
	background: rgba(255, 255, 255, 0.09);
	color: #ffffff;
}

.konteca-sub__title {
	font-size: 0.92rem;
	font-weight: 500;
	color: #ffffff;
	letter-spacing: -0.01em;
}

.konteca-sub__nav ul li + li {
	border-top: 1px solid var(--konteca-drawer-border-soft);
}

.konteca-sub__nav ul li a {
	padding: 13px 20px;
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.94rem;
	font-weight: 400;
	border-left: 0;
	border-right: 2px solid transparent;
}

.konteca-sub__nav ul li a::before {
	width: 4px;
	height: 4px;
	background: rgba(255, 255, 255, 0.16);
}

.konteca-sub__nav ul li a:hover,
.konteca-sub__nav ul li a:focus {
	color: #ffffff;
	background: var(--konteca-drawer-surface);
	border-right-color: rgba(255, 92, 0, 0.38);
}

.konteca-sub__nav ul li a:hover::before,
.konteca-sub__nav ul li a:focus::before {
	background: var(--e-global-color-primary, #ff5c00);
}

.konteca-sub__nav ul li.current-menu-item > a {
	color: #ffffff;
	font-weight: 500;
	border-right-color: var(--e-global-color-primary, #ff5c00);
	background: rgba(255, 255, 255, 0.025);
}

.konteca-sub__nav ul li.current-menu-item > a::before {
	background: var(--e-global-color-primary, #ff5c00);
}

/* ---------- Footer: conversión sin gritar ---------- */
.konteca-drawer__footer {
	padding: 16px 20px 22px;
	border-top: 1px solid var(--konteca-drawer-border);
	gap: 14px;
}

.konteca-drawer__cta {
	justify-content: center;
	padding: 12px 18px;
	border: 1px solid rgba(255, 92, 0, 0.42);
	background: rgba(255, 92, 0, 0.04);
	color: #ffffff;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.10em;
	box-shadow: none;
}

.konteca-drawer__cta:hover,
.konteca-drawer__cta:focus {
	background: rgba(255, 92, 0, 0.10);
	border-color: rgba(255, 92, 0, 0.58);
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(255, 92, 0, 0.14);
	transform: translateY(-1px);
}

.konteca-drawer__cta svg {
	opacity: 0.82;
}

.konteca-drawer__cta:hover svg {
	transform: translateX(2px);
}

/* ---------- WPML más discreto ---------- */
.konteca-drawer__lang {
	align-items: center;
	gap: 0;
}

.konteca-drawer__lang a {
	padding: 4px 10px;
	color: rgba(255, 255, 255, 0.34);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.konteca-drawer__lang a:hover,
.konteca-drawer__lang a.is-active {
	color: rgba(255, 255, 255, 0.82);
}

.konteca-drawer__lang img {
	opacity: 0.70;
}

/* ---------- Mobile pequeño ---------- */
@media (max-width: 380px) {
	#konteca-drawer {
		width: 94vw;
	}

	.konteca-drawer__nav > ul > li > a,
	.konteca-drawer__nav > ul > li > button,
	.konteca-sub__nav ul li a {
		padding-left: 18px;
		padding-right: 18px;
	}
}

#konteca-drawer {
	transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

#konteca-sub-panel {
	transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.konteca-drawer__nav > ul > li > a,
.konteca-drawer__nav > ul > li > button {
	font-weight: 400;
}

.konteca-drawer__nav > ul > li.current-menu-item > a {
	font-weight: 500;
}

/* ==========================================================
   Ajuste fino real: botón close circular y centrado óptico
   ========================================================== */

/* Base común */
.konteca-drawer__close,
.konteca-sub__back {
	width: 34px;
	height: 34px;
	min-width: 34px;
	min-height: 34px;
	padding: 0;
	border-radius: 50% !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
}

/* SVG base */
.konteca-drawer__close svg,
.konteca-sub__back svg {
	display: block;
	margin: 0;
	flex: 0 0 auto;
}

/* CLOSE: ajuste óptico específico */
.konteca-drawer__close {
	padding: 0 !important;
}

.konteca-drawer__close svg {
	width: 12px;
	height: 12px;
	position: relative;
	left: 0;
	top: 0;
	transform: translate(10px, -0.5px);
}

/* BACK: lo dejamos limpio y centrado */
.konteca-sub__back svg {
	width: 12px;
	height: 12px;
	transform: translate(-5px, -0.5px);
}