/* ── Utility bar (Figma 23:333) ── */
.utility { background: var(--c-footer); color: var(--c-inverse); font-size: var(--fs-small); }
.utility .container { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-lg); min-height: var(--utility-h); }
.utility__left, .utility__right { display: flex; gap: var(--sp-lg); align-items: center; }
.utility a { color: inherit; text-decoration: none; }
.utility a:hover { text-decoration: underline; color: inherit; }
.utility__es { color: var(--c-brand); font-weight: 700; font-size: 1rem; }
@media (max-width: 1023px) { .utility { display: none; } }

/* ── Header (Figma 23:341) ── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--c-white);
	box-shadow: var(--sh-header);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-lg); min-height: var(--nav-h); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-ink); }
.logo__symbol { width: 44px; height: 46px; }
.logo__word { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.25; letter-spacing: 0; white-space: nowrap; }
.logo__word span { color: var(--c-brand); }
.logo--inverse { color: var(--c-inverse); }

.nav { display: flex; align-items: center; gap: var(--sp-xl); }
.nav__item { position: relative; }
.nav__link, .nav__trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 2px;
	background: none;
	border: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1rem;
	color: var(--c-ink);
	text-decoration: none;
	cursor: pointer;
	position: relative;
}
.nav__link::after, .nav__trigger::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 6px;
	height: 2px;
	background: var(--c-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.16s var(--ease);
}
.nav__item--current > .nav__link::after,
.nav__item--current > .nav__trigger::after,
.nav__trigger[aria-expanded="true"]::after { transform: scaleX(1); }
.nav__link:hover, .nav__trigger:hover { color: var(--c-brand-dark); }
.nav__chevron { width: 12px; height: 12px; transition: transform 0.16s var(--ease); }
.nav__trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.header-cta { display: flex; align-items: center; gap: var(--sp-md); }
.header-cta__phone { font-family: var(--font-display); font-weight: 600; text-decoration: none; color: var(--c-ink); white-space: nowrap; }
.header-cta__phone:hover { color: var(--c-brand-dark); }

.burger {
	display: none;
	width: 48px; height: 48px;
	border: 0; background: none; cursor: pointer;
	align-items: center; justify-content: center;
	margin-right: -8px;
}
.burger span { display: block; width: 24px; height: 2px; background: var(--c-ink); position: relative; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: var(--c-ink); }
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }

@media (max-width: 1023px) {
	:root { --nav-h: 72px; }
	.nav, .header-cta .btn--outline, .header-cta__phone { display: none; }
	.burger { display: inline-flex; }
	.header-cta { gap: var(--sp-xs); }
}
@media (max-width: 719px) {
	.header-cta .btn--primary { display: none; }
	.logo__word { font-size: 1.25rem; }
	.logo__symbol { width: 36px; height: 38px; }
}

/* ── Megamenú (Figma 64:470 / 64:471). Doc 19 §2.4: 160 ms al abrir, 120 al cerrar ── */
.megamenu {
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	background: var(--c-white);
	box-shadow: var(--sh-menu);
	border-top: 1px solid var(--c-grey);
	opacity: 0;
	transform: translateY(-4px);
	visibility: hidden;
	transition: opacity 0.12s var(--ease), transform 0.12s var(--ease), visibility 0s linear 0.12s;
	z-index: 40;
}
.megamenu.is-open {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0s;
}
.megamenu__inner { padding: 36px var(--sp-gutter) 28px; display: grid; gap: var(--sp-xl); grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--container); margin-inline: auto; }
.megamenu__col { display: flex; flex-direction: column; gap: 18px; }
.megamenu__label { padding-bottom: 10px; border-bottom: 1px solid var(--c-border); margin: 0; }
.megamenu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.megamenu__item { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; padding: 4px 0; border-radius: var(--r-sm); }
.megamenu__item:hover .megamenu__title, .megamenu__item:focus-visible .megamenu__title { color: var(--c-brand-dark); }
.megamenu__title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.2; display: block; }
.megamenu__line { font-size: var(--fs-label); line-height: 18px; color: var(--c-muted); display: block; margin-top: 3px; }
.megamenu__help { background: var(--c-grey-light); border-radius: var(--r-md); padding: 22px; display: flex; flex-direction: column; gap: 14px; align-self: start; }
.megamenu__help .megamenu__help-title { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--c-ink); margin: 0; }
.megamenu__help p { font-size: var(--fs-small); color: var(--c-muted); margin: 0; }
.megamenu__help .link-arrow { font-size: 0.9375rem; }
.megamenu__rescue { background: var(--c-grey-light); }
.megamenu__rescue .container { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-lg); padding-block: 18px; }
.megamenu__rescue p { margin: 0; color: var(--c-muted); }

/* ── Móvil (Figma 64:472-474): overlay a pantalla completa ── */
.mnav {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--c-white);
	display: none;
	flex-direction: column;
}
.mnav.is-open { display: flex; }
body.mnav-open { overflow: hidden; }
.mnav__head { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--sp-gutter); border-bottom: 1px solid var(--c-grey); flex: 0 0 auto; }
.mnav__close { width: 48px; height: 48px; border: 0; background: none; cursor: pointer; margin-right: -8px; position: relative; }
.mnav__close::before, .mnav__close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; background: var(--c-ink); transform: translate(-50%, -50%) rotate(45deg); }
.mnav__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mnav__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 0; background: none; cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--c-muted); padding: 0; }
.mnav__back::before { content: '‹'; font-size: 1.5rem; line-height: 1; }
.mnav__panel-title { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }
/* La lista es un área con scroll de altura fija: es lo que mantiene la barra pegada abajo (doc 19 §3) */
.mnav__scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: clip; -webkit-overflow-scrolling: touch; height: calc(100dvh - var(--nav-h) - var(--bar-h)); position: relative; }
.mnav__panel { position: absolute; inset: 0; overflow-y: auto; padding: var(--sp-sm) var(--sp-gutter) var(--sp-xl); transform: translateX(100%); transition: transform 0.2s var(--ease); visibility: hidden; background: var(--c-white); }
.mnav__panel--root { transform: none; visibility: visible; }
.mnav__panel.is-active { transform: none; visibility: visible; }
.mnav__panel--root.is-behind { transform: translateX(-25%); visibility: hidden; }
.mnav__list { list-style: none; margin: 0; padding: 0; }
.mnav__link, .mnav__trigger {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%; min-height: 56px; padding: 0;
	border: 0; background: none; text-align: left; cursor: pointer;
	font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--c-ink); text-decoration: none;
}
.mnav__trigger::after { content: '›'; font-size: 1.5rem; color: var(--c-ink); }
.mnav__sep { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-md) 0; }
.mnav__secondary a { display: flex; align-items: center; min-height: 48px; color: var(--c-muted); text-decoration: none; font-size: 1rem; }
.mnav__group { margin: var(--sp-md) 0 var(--sp-xs); }
.mnav__item { display: flex; align-items: center; gap: 12px; min-height: 52px; text-decoration: none; color: var(--c-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.mnav__bar {
	flex: 0 0 auto;
	height: var(--bar-h);
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-sm);
	padding: var(--sp-md) var(--sp-gutter);
	border-top: 1px solid var(--c-grey);
	background: var(--c-white);
}
.mnav__bar .btn { min-height: 48px; }
@media (min-width: 1024px) { .mnav { display: none !important; } }

/* ── Footer (Figma 23:360): 6 columnas ── */
.site-footer { background: var(--c-footer); color: var(--c-inverse); padding: 72px 0 32px; }
.site-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.site-footer a:hover { color: var(--c-inverse); text-decoration: underline; }
.footer__brand { max-width: 560px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.footer__brand p { margin: 0; opacity: 0.85; }
.footer__brand address { font-style: normal; font-size: var(--fs-label); line-height: 19px; color: rgba(255, 255, 255, 0.55); }
.footer__slogans { display: flex; flex-wrap: wrap; gap: var(--sp-md); font-size: var(--fs-small); color: var(--c-brand); }
.footer__cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-lg); }
.footer__col h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.06em; color: var(--c-inverse); margin: 0 0 16px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-small); line-height: 20px; }
.footer__legal { border-top: 1px solid var(--c-muted); margin-top: 40px; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-md); font-size: var(--fs-small); opacity: 0.7; }
.footer__legal p { margin: 0; }
@media (max-width: 1023px) { .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer { padding-top: 48px; } }

/* ── Barra de teléfono/CTA fija en móvil (fuera del menú) ── */
.sticky-bar { display: none; }
@media (max-width: 719px) {
	.sticky-bar {
		display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-sm);
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
		padding: 12px var(--sp-gutter);
		background: var(--c-white);
		border-top: 1px solid var(--c-grey);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
	}
	body { padding-bottom: 76px; }
}

/* ── Aviso de cookies: discreto, abajo, nunca modal ── */
.consent {
	position: fixed; left: var(--sp-gutter); right: var(--sp-gutter); bottom: var(--sp-md); z-index: 46;
	max-width: 720px; margin-inline: auto;
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm) var(--sp-md);
	padding: var(--sp-sm) var(--sp-md);
	background: var(--c-white); color: var(--c-ink);
	border: 1px solid var(--c-grey); border-radius: var(--r-md);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
	font-size: var(--fs-small);
}
.consent p { margin: 0; flex: 1 1 320px; }
.consent__actions { display: flex; gap: var(--sp-xs); flex: 0 0 auto; }
@media (max-width: 719px) {
	.consent { bottom: 84px; }
}