/* ============================================================
   05 · PATRONES — header, navegación, drawer, footer, FAB
   ============================================================ */

/* ────────────────────────────────
   HEADER
   sticky + "smart header": se oculta al bajar y reaparece al subir.
   El estado lo controla yokai.js con un handler rAF (sin thrashing).
   ──────────────────────────────── */
.yk-header {
	position: sticky;
	top: 0;
	z-index: var(--yk-z-header);
	background: rgba(0, 0, 0, .95);
	border-bottom: 1px solid var(--yk-line);
	will-change: transform;

	/* Ocultarse debe costar más que reaparecer: al bajar se retira con
	   calma (.42s) y al subir vuelve rápido (.28s), que es lo que el
	   usuario está pidiendo en ese momento. La curva arranca suave en
	   lugar de salir disparada, que era lo que hacía que "desapareciera
	   de golpe". */
	transition: transform .42s cubic-bezier(.33, 0, .2, 1),
				background .3s var(--yk-ease),
				box-shadow .3s var(--yk-ease);

	/* OJO: aquí había `contain: layout paint`. Se ha quitado porque la
	   contención de pintado RECORTA a los descendientes que sobresalen,
	   y el desplegable de "Estilos" cuelga por debajo del header: se
	   volvía invisible. La contención no vale la pena a este precio. */
}
.yk-header.is-hidden {
	transition: transform .42s cubic-bezier(.33, 0, .2, 1);
}
.yk-header:not(.is-hidden) {
	transition: transform .28s cubic-bezier(.2, .7, .3, 1),
				background .3s var(--yk-ease),
				box-shadow .3s var(--yk-ease);
}
/* SIN backdrop-filter.
   El original lo llevaba, pero sobre un fondo al 92% de opacidad el
   desenfoque es prácticamente invisible: se paga el coste íntegro
   (recálculo por fotograma durante todo el scroll) por un efecto que
   nadie percibe. Se sube la opacidad al 95% y el resultado visual es
   el mismo a coste cero. */
.yk-header.is-hidden { transform: translateY(-100%); }
.yk-header.is-scrolled { box-shadow: 0 8px 30px rgba(0, 0, 0, .6); }

.yk-header__inner {
	max-width: var(--yk-container);
	margin-inline: auto;
	padding: 14px var(--yk-pad-x);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--yk-s5);
}

.yk-logo { display: inline-flex; align-items: center; flex: none; }
/* Solo en la cabecera: empuja logo + nav un poco hacia la derecha.
   El nav está centrado en el espacio libre entre logo y CTA, así que
   mover el punto de partida del logo desplaza el bloque entero con él. */
.yk-header .yk-logo { margin-left: clamp(0px, 2vw, var(--yk-s7)); }
.yk-logo__img { height: 48px; width: auto; }
.yk-logo__text {
	font-family: var(--yk-f-display);
	font-weight: 900;
	font-size: 22px;
	letter-spacing: .12em;
	color: var(--yk-paper);
}
.yk-logo__dot { color: var(--yk-neon); }
.yk-logo--footer .yk-logo__img { height: 44px; margin-bottom: var(--yk-s4); }

/* ────────────────────────────────
   NAV escritorio
   ──────────────────────────────── */
/* El nav ocupa el espacio libre y se centra en él: deja de amontonarse
   contra el CTA y de alejarse del logo. */
.yk-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.yk-nav__list { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.yk-nav__item { position: relative; }

/* Puente invisible que cierra el hueco entre el botón "Estilos" y el
   desplegable. Sin esto, bajar el ratón en línea recta atraviesa una
   franja fuera de la caja del elemento: el navegador pierde el :hover
   justo ahí y el menú se cierra antes de llegar — por eso hacía falta
   clicar. El puente extiende el área "hoverable" sin extender nada
   visible ni animado: coste cero. */
.yk-nav__item--has-dd::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 232px;
	height: 10px;
}

.yk-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 0;
	background: none;
	border: 0;
	color: var(--yk-mute);
	font-family: var(--yk-f-mono);
	font-size: var(--yk-type-meta);
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--yk-t) var(--yk-ease);
}
.yk-nav__link:hover,
.yk-nav__link.is-current,
.yk-nav__item.is-current > .yk-nav__link { color: var(--yk-neon); }

.yk-nav__caret {
	width: 8px; height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--yk-t) var(--yk-ease);
}
.yk-nav__toggle[aria-expanded="true"] .yk-nav__caret { transform: rotate(-135deg) translateY(-2px); }

/* Desplegable */
.yk-nav__dd {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	min-width: 232px;
	z-index: var(--yk-z-dropdown);
	list-style: none;
	margin: 0;
	padding: var(--yk-s2);
	background: var(--yk-card);
	border: 1px solid var(--yk-line);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--yk-t) var(--yk-ease), transform var(--yk-t) var(--yk-ease), visibility var(--yk-t);
}
.yk-nav__item--has-dd:hover > .yk-nav__dd,
.yk-nav__item--has-dd:focus-within > .yk-nav__dd,
.yk-nav__toggle[aria-expanded="true"] + .yk-nav__dd {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.yk-nav__dd a {
	display: block;
	padding: 12px var(--yk-s4);
	color: var(--yk-mute);
	font-family: var(--yk-f-mono);
	font-size: var(--yk-type-meta);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.yk-nav__dd a:hover,
.yk-nav__dd a.is-current { background: var(--yk-neon-soft); color: var(--yk-paper); }

/* ────────────────────────────────
   Acciones del header (CTA + hamburguesa)
   ──────────────────────────────── */
.yk-header__actions { display: flex; align-items: center; gap: var(--yk-s3); flex: none; margin-left: var(--yk-s5); }
.yk-header__cta { padding: 11px var(--yk-s5); font-size: 14px; }
.yk-header__cta .yk-ico { width: 18px; height: 18px; }
.yk-header__cta-short { display: none; }

.yk-burger {
	display: none;
	width: 44px; height: 44px;
	background: transparent;
	border: 1px solid var(--yk-line);
	color: var(--yk-paper);
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.yk-burger span {
	display: block; width: 18px; height: 2px;
	background: currentColor;
	transition: transform var(--yk-t) var(--yk-ease), opacity var(--yk-t) var(--yk-ease);
}
.yk-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.yk-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.yk-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
	.yk-nav { display: none; }
	.yk-burger { display: flex; }
	.yk-header__cta-full { display: none; }
	.yk-header__cta-short { display: inline; }
}
@media (max-width: 380px) {
	.yk-header__cta { padding: 10px var(--yk-s4); }
}

/* ────────────────────────────────
   DRAWER móvil
   ──────────────────────────────── */
.yk-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(88vw, 380px);
	z-index: var(--yk-z-drawer);
	background: var(--yk-card);
	border-left: 1px solid var(--yk-line);
	padding: 92px var(--yk-s5) var(--yk-s6);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform var(--yk-t-slow) var(--yk-ease);
	/* Capa propia: el cajón se compone aparte y nunca queda atrapado
	   en el contexto de apilamiento de una sección. */
	will-change: transform;
	isolation: isolate;
}

.yk-drawer__close {
	position: absolute;
	top: var(--yk-s5);
	right: var(--yk-s5);
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--yk-line);
	color: var(--yk-paper);
	cursor: pointer;
}
.yk-drawer__close:hover { border-color: var(--yk-neon); color: var(--yk-neon); }
.yk-drawer__close svg { width: 18px; height: 18px; }
.yk-drawer[hidden] { display: block; visibility: hidden; }
.yk-drawer.is-open { transform: translateX(0); visibility: visible; }

.yk-drawer__scrim {
	position: fixed;
	inset: 0;
	z-index: calc(var(--yk-z-drawer) - 1);
	background: rgba(0, 0, 0, .65);
	opacity: 0;
	transition: opacity var(--yk-t) var(--yk-ease);
}
.yk-drawer__scrim[hidden] { display: block; visibility: hidden; }
.yk-drawer__scrim.is-open { opacity: 1; visibility: visible; }

.yk-drawer__list { list-style: none; margin: 0; padding: 0; }
.yk-drawer__item { border-bottom: 1px solid var(--yk-line-2); }
.yk-drawer__item > a,
.yk-drawer__toggle {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: var(--yk-s4) 0;
	background: none;
	border: 0;
	color: var(--yk-paper);
	font-family: var(--yk-f-display);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -.01em;
	text-align: left;
	white-space: normal;
	cursor: pointer;
}
.yk-drawer__item > a.is-current { color: var(--yk-neon); }
.yk-drawer__toggle[aria-expanded="true"] .yk-nav__caret { transform: rotate(-135deg) translateY(-2px); }

.yk-drawer__sub { list-style: none; margin: 0 0 var(--yk-s4); padding: 0 0 0 var(--yk-s4); border-left: 1px solid var(--yk-line); }
.yk-drawer__sub[hidden] { display: none; }
.yk-drawer__sub a { display: block; padding: 10px 0; color: var(--yk-mute); font-size: 16px; }
.yk-drawer__sub a.is-current { color: var(--yk-neon); }

.yk-drawer__foot { margin-top: var(--yk-s6); display: grid; gap: var(--yk-s3); }

body.yk-noscroll { overflow: hidden; }

/* ────────────────────────────────
   FOOTER
   ──────────────────────────────── */
.yk-footer {
	background: var(--yk-card);
	border-top: 1px solid var(--yk-line);
	margin-top: var(--yk-s9);
}
.yk-footer__inner {
	max-width: var(--yk-container);
	margin-inline: auto;
	padding: clamp(48px, 7vw, 88px) var(--yk-pad-x) var(--yk-s7);
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 40px;
}
@media (max-width: 1024px) {
	.yk-footer__inner { grid-template-columns: 1fr 1fr; }
	.yk-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.yk-footer__inner { grid-template-columns: 1fr; gap: var(--yk-s6); }
}

.yk-footer__title {
	font-family: var(--yk-f-mono);
	font-size: var(--yk-type-meta);
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--yk-mute);
	margin: 0 0 var(--yk-s4);
}
.yk-footer__links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.yk-footer__links a { color: rgba(255, 255, 255, .8); font-size: 14px; }
.yk-footer__links a:hover { color: var(--yk-neon); }

/* NAP */
.yk-nap { font-style: normal; display: grid; gap: var(--yk-s3); margin-top: var(--yk-s5); }
.yk-nap__name { font-family: var(--yk-f-display); font-weight: 700; font-size: 17px; }
.yk-nap__row { display: flex; align-items: flex-start; gap: var(--yk-s3); color: var(--yk-mute); font-size: 15px; line-height: 1.5; }
.yk-nap__row .yk-ico { width: 18px; height: 18px; margin-top: 3px; color: var(--yk-neon); }
a.yk-nap__row:hover { color: var(--yk-paper); }
.yk-nap__note { display: block; font-style: normal; font-size: 13px; color: var(--yk-mute-2); }

/* Fila de acciones del pie: ficha de Google + Instagram, juntas.
   Ambos son "ir a un perfil externo del estudio": misma jerarquía,
   misma fila. */
.yk-footer__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--yk-s3);
	align-items: center;
	margin-top: var(--yk-s5);
}
.yk-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--yk-s2);
	min-height: 40px;
	padding: 9px var(--yk-s4);
	border: 1px solid var(--yk-line);
	font-family: var(--yk-f-mono);
	font-size: var(--yk-type-meta);
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--yk-paper);
	white-space: nowrap;
	transition: border-color var(--yk-t) var(--yk-ease),
				color var(--yk-t) var(--yk-ease),
				box-shadow var(--yk-t) var(--yk-ease);
}
.yk-pill:hover { border-color: var(--yk-neon); color: var(--yk-neon); box-shadow: var(--yk-glow-sm); }
.yk-pill .yk-ico { width: 18px; height: 18px; }

.yk-footer__bar {
	border-top: 1px solid var(--yk-line-2);
	padding: var(--yk-s5) var(--yk-pad-x);
	max-width: var(--yk-container);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--yk-s3);
	justify-content: center;
	text-align: center;
	font-family: var(--yk-f-mono);
	font-size: var(--yk-type-meta);
	letter-spacing: .1em;
	color: var(--yk-mute);
}
.yk-footer__bar p { margin: 0; }

/* ────────────────────────────────
   CTA FLOTANTES · WhatsApp + Instagram
   Pila fija abajo a la derecha. WhatsApp abajo (acción principal,
   el pulgar llega antes), Instagram encima.
   ──────────────────────────────── */
.yk-fabs {
	position: fixed;
	right: clamp(14px, 3vw, 26px);
	bottom: clamp(14px, 3vw, 26px);
	z-index: var(--yk-z-fab);
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: var(--yk-s3);
}
/* Con el cajón móvil abierto, fuera: compiten por la vista y por el
   mismo rincón donde vive el botón de cerrar. `body.yk-noscroll` ya
   lo pone el JS al abrir el cajón, así que no hace falta más lógica. */
body.yk-noscroll .yk-fabs { display: none; }

/* Ambos son cuadrados de solo icono: misma forma, distinto color.
   El tamaño (48px) manda la jerarquía, no el texto. */
.yk-fab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
	transition: transform var(--yk-t-fast) var(--yk-ease),
				box-shadow var(--yk-t-fast) var(--yk-ease);
}
.yk-fab:hover { transform: translateY(-2px); }
.yk-fab .yk-ico { width: 24px; height: 24px; }

.yk-fab--wa { background: var(--yk-whatsapp); color: #000; }
.yk-fab--wa:hover { color: #000; box-shadow: 0 0 24px rgba(37, 211, 102, .45); }

/* Instagram: fondo neutro, el color lo pone el degradado del propio
   icono (definido una vez en header.php y referenciado por id). */
.yk-fab--ig {
	background: rgba(10, 10, 12, .92);
	border: 1px solid var(--yk-line);
}
.yk-fab--ig:hover { border-color: var(--yk-neon); box-shadow: var(--yk-glow-sm); }