/* AIReceptionistGo — megamenú de cabecera, menú móvil en acordeón y rejilla del pie.
   Estructura de la web de referencia que pidió David (19-10); tokens, tipografía y textos nuestros.
   Paneles ocultos desde el primer pintado (display:none): ni saltos al cargar ni contenido tapado. */

/* ---------- Entradas con panel (≥ 1100 px; por debajo, menú móvil) ---------- */
.cabecera__nivel { background: none; border: 0; font: inherit; font-size: var(--fs-16); font-weight: 500; cursor: pointer; }
.cabecera__nivel svg { width: 16px; height: 16px; flex: none; transition: transform .15s ease; }
.cabecera__nivel[hidden] { display: none; }
.cabecera__nivel[aria-expanded="true"] { color: var(--arg-link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.cabecera__nivel[aria-expanded="true"] svg { transform: rotate(180deg); }

/* El panel se cuelga de .cabecera (sticky = bloque contenedor): ancho completo, bajo la barra. */
.mega {
	display: none; position: absolute; left: 0; right: 0; top: 100%;
	background: var(--arg-surface-card); border-top: 1px solid var(--arg-border); border-bottom: 1px solid var(--arg-border);
	box-shadow: var(--shadow-pop);
	max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain;
}
/* La entrada ocupa todo el alto de la barra: el ratón no sale de ella al bajar al panel. */
@media (min-width: 1100px) {
	.cabecera__nav { align-self: stretch; display: flex; }
	.cabecera__nav > ul { align-items: stretch; }
	.cabecera__nav > ul > li { display: flex; align-items: center; }
}
/* Sin JS: se abre al pasar el ratón o al llegar con el tabulador. Con JS manda aria-expanded. */
.cabecera__nav:not(.cabecera__nav--js) .cabecera__desplegable:is(:hover, :focus-within) > .mega,
.cabecera__desplegable--abierto > .mega { display: block; animation: mega-entra .16s ease-out; }
@keyframes mega-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.mega__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-24) var(--sp-32); padding-block: var(--sp-32) var(--sp-32); }
.mega__rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega__rejilla--1 { grid-template-columns: minmax(0, 1fr); }
.mega__titulo {
	font-family: var(--arg-font-mono); font-size: var(--fs-14); font-weight: 500; letter-spacing: var(--ls-caps);
	text-transform: uppercase; color: var(--arg-text-weak); line-height: 1.4;
	padding-bottom: var(--sp-12); border-bottom: 1px solid var(--arg-border); margin-bottom: var(--sp-8);
}
.mega__lista, .movil-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mega__item, .movil-grupo__item {
	display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--sp-12); align-items: start;
	min-height: var(--target); padding: var(--sp-8); margin-inline: calc(-1 * var(--sp-8));
	border-radius: var(--radius-sm); color: var(--arg-ink); text-decoration: none;
}
.mega__item:hover { background: var(--arg-neutral-100); }
.mega__item:hover .mega__nombre { text-decoration: underline; }
.mega__icono { display: grid; place-items: center; width: 24px; height: 22px; color: var(--arg-leaf); }
.mega__icono svg { width: 20px; height: 20px; }
.mega__nombre { display: block; font-size: var(--fs-16); font-weight: 600; line-height: 1.35; }
.mega__desc { display: block; font-size: var(--fs-14); line-height: 1.4; color: var(--arg-text-weak); margin-top: 2px; }
.mega__todos, .movil-grupo__todos, .mega__barra-enlace {
	display: inline-flex; align-items: center; gap: var(--sp-4); min-height: var(--target);
	color: var(--arg-link); font-size: var(--fs-16); font-weight: 600; text-decoration: none;
}
.mega__todos svg, .movil-grupo__todos svg, .mega__barra-enlace svg { width: 16px; height: 16px; flex: none; transition: transform .15s ease; }
.mega__todos:hover, .movil-grupo__todos:hover, .mega__barra-enlace:hover { text-decoration: underline; }
.mega__todos:hover svg, .mega__barra-enlace:hover svg { transform: translateX(2px); }
.mega__grupo > .mega__todos { margin-top: var(--sp-4); }

.mega__tarjeta { align-self: start; background: var(--arg-neutral-100); border-radius: var(--radius-md); padding: var(--sp-24); }
.mega__tarjeta-titulo { font-size: var(--fs-18); font-weight: 600; line-height: 1.3; color: var(--arg-ink); }
.mega__tarjeta-texto { font-size: var(--fs-16); line-height: 1.5; color: var(--arg-text-weak); margin: var(--sp-8) 0 var(--sp-8); }
.mega__tarjeta .mega__todos { display: flex; }

.mega__barra { background: var(--arg-neutral-100); border-top: 1px solid var(--arg-border); }
.mega__barra-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); min-height: 64px; }
.mega__barra p { font-size: var(--fs-16); line-height: 1.4; color: var(--arg-text-weak); }

@media (prefers-reduced-motion: reduce) {
	.cabecera__desplegable--abierto > .mega,
	.cabecera__nav:not(.cabecera__nav--js) .cabecera__desplegable:is(:hover, :focus-within) > .mega { animation: none; }
	.cabecera__nivel svg, .mega__todos svg, .mega__barra-enlace svg, .movil-grupo summary svg { transition: none; }
}

/* ---------- Menú móvil (< 1100 px): los paneles pasan a acordeón ---------- */
.cabecera__movil { max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
.movil-grupo summary {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); min-height: 48px;
	list-style: none; cursor: pointer; color: var(--arg-ink); font-size: var(--fs-18); font-weight: 500;
	border-bottom: 1px solid var(--arg-border);
}
.movil-grupo summary::-webkit-details-marker { display: none; }
.movil-grupo summary svg { width: 20px; height: 20px; flex: none; transition: transform .15s ease; }
.movil-grupo[open] summary svg { transform: rotate(180deg); }
.movil-grupo__cuerpo { padding: var(--sp-8) 0 var(--sp-16); border-bottom: 1px solid var(--arg-border); }
.movil-grupo__titulo {
	font-family: var(--arg-font-mono); font-size: var(--fs-14); font-weight: 500; letter-spacing: var(--ls-caps);
	text-transform: uppercase; color: var(--arg-text-weak); line-height: 1.4; margin-top: var(--sp-16);
}
.movil-grupo__item { margin-inline: 0; padding-inline: 0; align-items: center; }
/* En el móvil, solo el nombre: la lista abierta mide ~40 % menos y los enlaces son los mismos. */
.movil-grupo .mega__desc { display: none; }
.movil-grupo__todos { display: flex; }
.movil-grupo__todos--fuerte { margin-top: var(--sp-8); }

/* ---------- Pie ---------- */
.pie__arriba { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
.pie__tarjeta {
	background: var(--arg-neutral-800); border: 1px solid var(--arg-neutral-700); border-radius: var(--radius-lg);
	padding: var(--sp-32) var(--sp-24);
}
.pie__tarjeta-titulo { font-family: var(--arg-font-display); font-weight: 600; font-size: var(--fs-28); line-height: 1.15; color: var(--arg-white); }
.pie__tarjeta-texto { color: var(--arg-on-dark-weak); font-size: var(--fs-16); line-height: 1.5; margin: var(--sp-12) 0 var(--sp-24); }
.pie__columnas {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-32) var(--sp-24);
	margin-top: var(--sp-48); padding-top: var(--sp-48); border-top: 1px solid var(--arg-neutral-700);
}
/* Lista larga (Industries): ocupa dos huecos y se reparte en dos columnas. */
.pie__columna--ancha { grid-column: span 2; }
.pie__columna--ancha ul { display: block; columns: 2; column-gap: var(--sp-24); }
.pie__columna--ancha li { break-inside: avoid; margin-bottom: var(--sp-4); }
/* Móvil: la lista de funciones también se reparte en dos columnas (sin media pantalla vacía al lado). */
@media (max-width: 767px) {
	.pie__columna:first-child { grid-column: span 2; }
	.pie__columna:first-child ul { display: block; columns: 2; column-gap: var(--sp-24); }
	.pie__columna:first-child li { break-inside: avoid; margin-bottom: var(--sp-4); }
}
.pie .enlace-mas { gap: var(--sp-4); color: var(--arg-white); font-weight: 600; }
.pie .enlace-mas svg { width: 16px; height: 16px; flex: none; }

/* 768–1099: fila 1 Features + Industries (dos huecos); fila 2 Resources, Company, Legal. Sin huecos vacíos. */
@media (min-width: 768px) {
	.pie__columnas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.pie__arriba { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: start; gap: var(--sp-48); }
	.pie__tarjeta { padding: var(--sp-32); }
}
@media (min-width: 1100px) {
	.pie__columnas { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: var(--sp-64); }
}
/* Con ratón, filas más juntas (objetivo ≥ 32 px, por encima de los 24 de WCAG 2.5.8); al tacto, 44. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
	.pie__columna a { min-height: 32px; }
	.pie__columna ul { gap: 0; }
	.pie__columna--ancha li { margin-bottom: 0; }
}