/*
 * COMPONENTES — piezas que se repiten en varias secciones.
 *
 * Navbar, botones, enlaces, etiqueta de sección, hairlines animadas, acordeón y pie.
 * Lo específico de una sección concreta vive en sections.css.
 */

/* ══ Navbar ══════════════════════════════════════════════════════════════════
 * Tres estados de la píldora, gobernados por dos clases que pone el JS sobre el
 * <header>:  .is-light  (hay fondo claro debajo)  ·  .is-scrolled
 */

.em-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: var(--z-navbar);
}

.em-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-24);
	margin-inline: auto;
	max-width: var(--nav-max);
	padding-inline: var(--space-16);
	padding-block: var(--space-20);
	transition: padding 700ms var(--ease-out-expo);
}

.em-header.is-scrolled .em-header__inner {
	padding-block: var(--space-12);
}

.em-nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-16);
	width: 100%;
	padding: var(--space-10) var(--space-16);
	border: 1px solid color-mix(in oklab, var(--paper) 10%, transparent);
	border-radius: 999px;
	background: color-mix(in oklab, var(--paper) 5%, transparent);
	backdrop-filter: blur(12px);
	transition:
		background-color 700ms var(--ease-out-expo),
		border-color 700ms var(--ease-out-expo);
}

.em-header.is-scrolled .em-nav {
	border-color: color-mix(in oklab, var(--paper) 12%, transparent);
	background: color-mix(in oklab, var(--ink) 40%, transparent);
	backdrop-filter: blur(24px) saturate(1.5);
}

.em-header.is-light .em-nav {
	border-color: var(--border);
	background: color-mix(in oklab, var(--paper) 70%, transparent);
	backdrop-filter: blur(24px) saturate(1.5);
}

.em-nav__brand {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	min-width: 0;
	font-size: var(--text-0-9);
	letter-spacing: -0.025em;
	color: color-mix(in oklab, var(--paper) 95%, transparent);
	transition: color var(--transicion-media);
}

.em-header.is-light .em-nav__brand {
	color: var(--foreground);
}

.em-nav__dot {
	flex-shrink: 0;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 999px;
	background: var(--primary);
}

/* El logo va donde iba el punto: alto fijo para que la pildora no crezca, ancho el que
 * pida la marca. Si no hay logo subido, esta regla no la usa nadie. */
.em-nav__logo {
	flex-shrink: 0;
	width: auto;
	height: 1.5rem;
	max-width: 9rem;
	object-fit: contain;
}

.em-nav__name {
	font-weight: var(--weight-500);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.em-nav__menu {
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--space-28);
}

.em-nav__link {
	font-size: var(--text-0-85);
	color: color-mix(in oklab, var(--paper) 70%, transparent);
	transition: color var(--transicion-media);
}

.em-nav__link:hover {
	color: var(--paper);
}

.em-header.is-light .em-nav__link {
	color: var(--muted-foreground);
}

.em-header.is-light .em-nav__link:hover {
	color: var(--foreground);
}

.em-nav__actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-12);
}

.em-nav__cta {
	display: none;
	border-radius: 999px;
	padding: var(--space-8) var(--space-16);
	font-size: var(--text-0-8);
	font-weight: var(--weight-500);
	background: var(--primary);
	color: var(--primary-foreground);
	transition: opacity var(--transicion-rapida);
}

.em-nav__cta:hover {
	opacity: 0.9;
}

.em-nav__toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	width: 2rem;
	height: 2rem;
}

/* El color depende SOLO del tono del fondo, nunca de si el menú está abierto: las barras
   van sobre la píldora, y con la condición ligada a "abierto" se volvían claras sobre
   fondo claro, o sea invisibles. */
.em-nav__bar {
	display: block;
	width: 1.25rem;
	height: 1px;
	background: var(--paper);
	transition:
		transform var(--transicion-rapida),
		background-color var(--transicion-media);
}

.em-header.is-light .em-nav__bar {
	background: var(--foreground);
}

.em-header.is-open .em-nav__bar:first-child {
	transform: translateY(3px) rotate(45deg);
}

.em-header.is-open .em-nav__bar:last-child {
	transform: translateY(-3px) rotate(-45deg);
}

/* --- Panel móvil --- */

.em-nav__panel {
	overflow: hidden;
	margin-inline: var(--space-16);
	max-height: 0;
	opacity: 0;
	border: 1px solid transparent;
	border-radius: 1rem;
	backdrop-filter: blur(24px) saturate(1.5);
	background: color-mix(in oklab, var(--ink) 70%, transparent);
	transition:
		max-height var(--transicion-media),
		opacity var(--transicion-media),
		background-color var(--transicion-media),
		border-color var(--transicion-media);
}

.em-header.is-open .em-nav__panel {
	max-height: 18rem;
	opacity: 1;
	border-color: color-mix(in oklab, var(--paper) 10%, transparent);
}

.em-header.is-light .em-nav__panel {
	background: color-mix(in oklab, var(--paper) 85%, transparent);
}

.em-header.is-light.is-open .em-nav__panel {
	border-color: var(--border);
}

.em-nav__panel-list {
	display: flex;
	flex-direction: column;
	padding: var(--space-24);
}

.em-nav__panel-link {
	padding-block: var(--space-16);
	font-size: var(--text-1-125);
	letter-spacing: -0.025em;
	color: color-mix(in oklab, var(--paper) 90%, transparent);
	border-bottom: 1px solid color-mix(in oklab, var(--paper) 10%, transparent);
	transition: color var(--transicion-media);
}

/* El último enlace del menú va sin raya: la separa del CTA, no de otra opción.
   Ojo con `:last-of-type`: el <a> del CTA es el último de su tipo dentro del panel, así
   que ese selector no casaba con ningún enlace y la raya sobraba. */
.em-nav__panel-link:has(+ .em-nav__panel-cta) {
	border-bottom: 0;
}

.em-header.is-light .em-nav__panel-link {
	color: var(--foreground);
	border-bottom-color: var(--border);
}

.em-nav__panel-cta {
	align-self: flex-start;
	margin-top: var(--space-20);
	border-radius: 999px;
	padding: var(--space-8) var(--space-16);
	font-size: var(--text-0-875);
	font-weight: var(--weight-500);
	background: var(--primary);
	color: var(--primary-foreground);
}

@media (width >= 40rem) {
	.em-header__inner {
		padding-inline: var(--space-24);
	}

	.em-nav__cta {
		display: inline-flex;
	}

	.em-nav__panel {
		margin-inline: var(--space-24);
	}
}

@media (width >= 48rem) {
	.em-nav {
		grid-template-columns: 1fr auto 1fr;
		padding-inline: var(--space-20);
	}

	.em-nav__menu {
		display: flex;
	}

	.em-nav__toggle,
	.em-nav__panel {
		display: none;
	}
}

/* ══ Botones y enlaces ═══════════════════════════════════════════════════════ */

.em-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-10);
	width: fit-content;
	border-radius: 999px;
	padding: var(--space-14) var(--space-24);
	font-size: var(--text-0-9);
	font-weight: var(--weight-500);
	transition: opacity var(--transicion-rapida);
}

.em-btn:hover {
	opacity: 0.9;
}

.em-btn--ink {
	background: var(--ink);
	color: var(--paper);
}

.em-btn--primary {
	background: var(--primary);
	color: var(--primary-foreground);
}

.em-btn--paper {
	background: var(--paper);
	color: var(--ink);
}

.em-arrow {
	display: inline-block;
	transform: translateY(0.5px);
	transition: transform var(--transicion-media);
}

.em-btn:hover .em-arrow,
.em-textlink:hover .em-arrow {
	transform: translate(0.25rem, 0.5px);
}

.em-textlink {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--text-0-95);
	font-weight: var(--weight-500);
}

.em-textlink--primary {
	color: var(--primary);
	gap: var(--space-10);
}

/* Subrayado que se dibuja al pasar por encima */
.em-underline {
	position: relative;
}

.em-underline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transicion-media);
}

a:hover .em-underline::after,
.em-underline:hover::after {
	transform: scaleX(1);
}

/* ══ Etiqueta de sección ═════════════════════════════════════════════════════
 * La voz de las etiquetas de la página: la sans del cuerpo, en caja normal y sin
 * espaciado extra. Empezó en la etiqueta de sección el 2026-09-05 y el 2026-09-08 se la
 * quedaron también el rótulo del Hero y el del formulario, que seguían en la manuscrita en
 * versales. Están las tres juntas a propósito: si esta tipografía cambia, cambia entera.
 *
 * El punto coral NO viaja con ella. Es la marca de "aquí empieza una sección", y ni el
 * rótulo del Hero ni el del formulario abren una.
 *
 * El color lo pone cada zona: gris sobre papel, papel translúcido sobre el iris del Hero,
 * coral sobre el cristal del formulario. */

.em-section-label,
.em-hero__eyebrow,
.em-form__label {
	font-family: var(--font-sans);
	font-size: var(--text-0-95);
	font-weight: var(--weight-400);
	letter-spacing: 0;
	text-transform: none;
}

.em-section-label {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	color: var(--muted-foreground);
}

.em-section-label::before {
	content: "";
	flex-shrink: 0;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: var(--radius-pill);
	background: var(--primary);
}

/* ══ Hairlines que se dibujan solas ══════════════════════════════════════════ */

.em-rule {
	display: block;
	width: 100%;
	height: 1px;
	overflow: hidden;
}

.em-rule__line {
	display: block;
	width: 100%;
	height: 1px;
	background: var(--hairline);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1200ms var(--ease-out-expo);
}

.em-rule[data-shown="true"] .em-rule__line {
	transform: scaleX(1);
}

/* Sin JS no hay observer: la línea debe verse igual. */
html:not([data-js-reveal]) .em-rule__line {
	transform: scaleX(1);
}

/* ══ Firma de la marea ═══════════════════════════════════════════════════════ */

.em-tide {
	display: block;
	width: 100%;
	height: 4rem;
	color: var(--hairline);
}

.em-tide path {
	transition: stroke-dashoffset 2200ms var(--ease-out-expo);
}

.em-tide__dot {
	opacity: 0;
	transition: opacity 900ms ease 1600ms;
}

.em-tide[data-shown="true"] .em-tide__dot {
	opacity: 1;
}

html:not([data-js-reveal]) .em-tide__dot {
	opacity: 1;
}

/* El punto que recorre la curva. La curva la pone el JS como offset-path para no
   duplicar la definición del trazo. Muy lento y de ida y vuelta: es señal de vida, no
   una animación que pida atención. El bloque global de prefers-reduced-motion lo
   congela sin código extra. */
.em-tide__dot {
	offset-rotate: 0deg;
	animation: em-tide-travel 14s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}

@keyframes em-tide-travel {
	from {
		offset-distance: 6%;
	}
	to {
		offset-distance: 94%;
	}
}

/* ══ Acordeón ════════════════════════════════════════════════════════════════ */

.em-accordion__item + .em-accordion__item {
	margin-top: 0;
}

.em-accordion__trigger {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-24);
	width: 100%;
	padding-block: var(--space-28);
	text-align: left;
}

.em-accordion__question {
	min-width: 0;
	font-size: var(--text-1-05);
	letter-spacing: -0.025em;
}

.em-accordion__icon {
	position: relative;
	flex-shrink: 0;
	width: 0.75rem;
	height: 0.75rem;
}

.em-accordion__icon::before,
.em-accordion__icon::after {
	content: "";
	position: absolute;
	background: var(--foreground);
}

.em-accordion__icon::before {
	top: 50%;
	left: 0;
	width: 0.75rem;
	height: 1px;
	transform: translateY(-50%);
}

.em-accordion__icon::after {
	top: 0;
	left: 50%;
	width: 1px;
	height: 0.75rem;
	transform: translateX(-50%);
	transition: transform var(--transicion-media);
}

.em-accordion__trigger[aria-expanded="true"] .em-accordion__icon::after {
	transform: translateX(-50%) scaleY(0);
}

.em-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	opacity: 0;
	transition:
		grid-template-rows var(--transicion-media),
		opacity var(--transicion-media);
}

.em-accordion__panel[data-open="true"] {
	grid-template-rows: 1fr;
	opacity: 1;
}

.em-accordion__answer {
	overflow: hidden;
	max-width: 34rem;
	padding-bottom: var(--space-32);
	font-size: var(--text-0-98);
	line-height: 1.625;
	color: var(--muted-foreground);
}

@media (width >= 48rem) {
	.em-accordion__question {
		font-size: var(--text-1-25);
	}
}

/* ══ Páginas internas ════════════════════════════════════════════════════════
 * Respaldo para page.php, single.php, index.php y 404.php. Heredan el sistema visual
 * para que cualquier página publicada hoy sea coherente; no sustituyen a los templates
 * de recursos, guía y producto que vendrán con su propio diseño.
 */

/* La navbar va fija por encima de todo: con el `em-beat-sm` de la plantilla el titular
   arrancaba a 100 px y salía DETRÁS de la píldora. Mismo aire que el índice de recursos,
   que es la otra página que empieza pegada a la navbar. */
.em-page {
	max-width: 46rem;
	padding-top: var(--space-144);
}

.em-page__title {
	font-size: var(--text-2-4);
}

.em-page__meta,
.em-page__figure {
	margin-top: var(--space-24);
	color: var(--muted-foreground);
}

.em-page__lead {
	margin-top: var(--space-24);
	line-height: 1.625;
	color: var(--muted-foreground);
}

.em-page__cta {
	margin-top: var(--space-40);
}

/* Texto largo de las páginas internas. No sale del prototipo —ahí no hay páginas de
   contenido— y conserva el interlineado amplio: un aviso legal se lee mejor así. */
.em-prose {
	margin-top: var(--space-48);
	line-height: 1.625;
}

.em-prose > * + * {
	margin-top: var(--space-24);
}

.em-prose h2 {
	margin-top: var(--space-48);
	font-size: var(--text-1-8);
	font-weight: var(--weight-500);
	letter-spacing: -0.02em;
}

.em-prose h3 {
	margin-top: var(--space-40);
	font-size: var(--text-1-3);
	font-weight: var(--weight-500);
}

.em-prose ul,
.em-prose ol {
	padding-left: var(--space-20);
	list-style: revert;
}

.em-prose a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* La tabla de cookies es el único sitio del tema donde hay una tabla. En móvil no cabe:
   scroll horizontal solo dentro de ella, para que la página no se descuadre entera. */
.em-prose table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--text-0-9);
}

.em-prose th,
.em-prose td {
	padding: var(--space-12) var(--space-16);
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}

.em-prose th {
	font-weight: var(--weight-500);
	color: var(--muted-foreground);
	white-space: nowrap;
}

.em-page__pagination {
	margin-top: var(--space-48);
	color: var(--muted-foreground);
}

.em-list {
	margin-top: var(--space-48);
}

.em-list__item {
	padding-block: var(--space-40);
}

.em-list__title {
	margin-top: var(--space-32);
	font-size: var(--text-1-8);
}

.em-list__date {
	display: block;
	margin-top: var(--space-12);
	color: var(--muted-foreground);
}

.em-list__excerpt {
	margin-top: var(--space-16);
	line-height: 1.625;
	color: var(--muted-foreground);
}

@media (width >= 48rem) {
	.em-page {
		padding-top: var(--space-176);
	}

	.em-page__title {
		font-size: var(--text-3-2);
	}
}

/* ══ Formulario de contacto ══════════════════════════════════════════════════
 * Vive sobre la sección oscura del cierre, pero la superficie es CLARA: un cristal de
 * --paper (#F9F7F6) translúcido con desenfoque detrás, no un panel plano. Por eso el fondo
 * se mezcla con transparente en vez de escribirse opaco — el iris de debajo tiene que
 * seguir viéndose a través.
 *
 * Al girar de cristal oscuro a cristal claro cambia TODO lo que va dentro: el texto es
 * tinta, no papel. Un color de aquí que salga de --paper es un resto del tratamiento
 * anterior, no una decisión.
 */

/*
 * En móvil el formulario llega al borde de la pantalla. Sumaba el aire lateral de la
 * sección y su propio relleno —72 px por lado en un teléfono de 390—, y los campos, que son
 * lo único que hay que rellenar, se quedaban con 246 px. A sangre conserva el cristal, que
 * es lo que separa el formulario de la foto del iris; lo que pierde es el margen. El
 * margen negativo es exactamente lo que mete `.em-shell-inset`, que es su contenedor.
 */
.em-form {
	margin-inline: calc(-1 * (var(--frame) + var(--shell-pad)));
	padding: var(--space-28) var(--space-24);
	border-block: 1px solid color-mix(in oklab, var(--paper-pure) 60%, transparent);
	background: color-mix(in oklab, var(--paper) 92%, transparent);
	backdrop-filter: blur(18px) saturate(1.4);
	color: var(--ink);
}

@media (width >= 48rem) {
	.em-form {
		margin-inline: 0;
		padding: var(--space-32);
		border: 1px solid color-mix(in oklab, var(--paper-pure) 60%, transparent);
		border-radius: var(--radius-surface);
	}
}

.em-form__label {
	color: var(--primary);
}

.em-form__aviso {
	margin-top: var(--space-20);
	padding: var(--space-14) var(--space-16);
	border-radius: var(--radius-card);
	font-size: var(--text-0-92);
	line-height: 1.5;
	color: var(--ink);
}

.em-form__aviso--ok {
	border: 1px solid color-mix(in oklab, var(--primary) 45%, transparent);
	background: color-mix(in oklab, var(--primary) 16%, transparent);
}

.em-form__aviso--error {
	border: 1px solid var(--border);
	background: color-mix(in oklab, var(--ink) 6%, transparent);
}

.em-form__form {
	margin-top: var(--space-28);
}

/* Fuera de pantalla, no `display: none`: algunos bots rellenan solo lo que "existe". */
.em-form__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.em-form__row {
	display: grid;
	gap: var(--space-20);
}

/* Solo entre campos hermanos del formulario: dentro de .em-form__row la separacion la
   pone el `gap` de la rejilla, y este margen desalineaba el segundo campo. */
.em-form__form > .em-form__campo + .em-form__campo,
.em-form__row + .em-form__campo {
	margin-top: var(--space-20);
}

.em-form__campo-label {
	display: block;
	margin-bottom: var(--space-8);
	font-size: var(--text-0-85);
	color: var(--muted-strong);
}

.em-form__input {
	display: block;
	width: 100%;
	padding: var(--space-12) var(--space-14);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	background: color-mix(in oklab, var(--paper-pure) 88%, transparent);
	color: var(--ink);
	font-size: var(--text-0-95);
	transition: border-color var(--transicion-rapida);
}

.em-form__input:hover {
	border-color: color-mix(in oklab, var(--ink) 30%, transparent);
}

.em-form__textarea {
	resize: vertical;
	min-height: 7rem;
	line-height: 1.5;
}

/* El asterisco de obligatorio. Coral y pegado a la etiqueta: es una marca, no una palabra
   más. Va con aria-hidden en la plantilla porque quien usa lector de pantalla ya lo sabe
   por el `required` del campo, y oírlo dos veces sobra. */
.em-form__req {
	margin-left: 0.2em;
	color: var(--primary);
}

/* La casilla y su texto, en dos columnas para que la segunda línea no caiga debajo del
   cuadro. `accent-color` pinta la marca de verificación con el coral de la marca sin
   sustituir el control nativo: un checkbox dibujado a mano pierde el teclado, el foco y el
   comportamiento que el navegador ya trae bien. */
.em-form__consentimiento {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--space-12);
	margin-top: var(--space-24);
}

.em-form__check {
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.15rem;
	accent-color: var(--primary);
}

.em-form__check-label {
	font-size: var(--text-0-85);
	line-height: 1.5;
	color: var(--muted-strong);
}

.em-form__enlace {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--transicion-rapida);
}

.em-form__enlace:hover {
	color: var(--primary);
}

.em-form__submit {
	margin-top: var(--space-28);
}

.em-form__privacidad {
	margin-top: var(--space-20);
	font-size: var(--text-0-8);
	line-height: 1.5;
	color: var(--muted-foreground);
}

@media (width >= 40rem) {
	.em-form {
		padding: var(--space-40);
	}

	.em-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ══ Pie ═════════════════════════════════════════════════════════════════════
 * Cuatro columnas: la marca —con su descriptor, su ubicación, sus redes y la firma— y
 * tres listas de enlaces. La onda va detrás, anclada abajo a la derecha y recortada por
 * el propio pie: es decorativa y nunca debe crear scroll horizontal.
 */

.em-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--ink);
	color: var(--paper);
}

.em-footer__wave {
	pointer-events: none;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: min(60%, 52rem);
	height: auto;
	aspect-ratio: 800 / 420;
	color: color-mix(in oklab, var(--paper) 45%, transparent);
	opacity: 0.55;
}

.em-footer__inner {
	position: relative;
	padding-top: 4.5rem;
	padding-bottom: var(--space-40);
}

.em-footer__grid {
	display: grid;
	gap: var(--space-48);
}

/* Hijos de la rejilla del pie: `min-width: 0` evita que un enlace largo ensanche su
   columna y descuadre las otras tres. */
.em-footer__marca,
.em-footer__col {
	min-width: 0;
}

/* El logo y el nombre, en una fila. El logo se alinea al centro del nombre, no a su línea
   base: son dos piezas de la misma marca, no un texto con una viñeta. */
.em-footer__marca-top {
	display: flex;
	align-items: center;
	gap: var(--space-16);
}

/* Cuadrado a la altura exacta que ocupa «Efecto Marea.»: dos líneas por su interlineado.
   Atado al cuerpo del nombre para que los dos crezcan juntos si el nombre cambia de tamaño. */
.em-footer__logo {
	flex: none;
	width: auto;
	height: calc(var(--text-2-1) * 2.04);
}

.em-footer__brand {
	font-size: var(--text-2-1);
	line-height: 1.02;
	font-weight: var(--weight-600);
}

.em-footer__brand-dot {
	color: var(--primary);
}

.em-footer__tagline {
	margin-top: var(--space-20);
	max-width: 22rem;
	font-size: var(--text-0-95);
	line-height: 1.5;
	color: color-mix(in oklab, var(--paper) 80%, transparent);
}

.em-footer__text {
	margin-top: var(--space-20);
	max-width: 24rem;
	font-size: var(--text-0-95);
	line-height: 1.55;
	color: color-mix(in oklab, var(--paper) 62%, transparent);
}

.em-footer__hairline {
	display: block;
	margin-top: var(--space-32);
	width: 2.5rem;
	height: 1px;
	background: color-mix(in oklab, var(--paper) 25%, transparent);
}

.em-footer__location {
	margin-top: var(--space-28);
	font-size: var(--text-0-9);
	color: color-mix(in oklab, var(--paper) 70%, transparent);
}

.em-footer__social {
	display: flex;
	gap: var(--space-12);
	margin-top: var(--space-28);
}

.em-social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid color-mix(in oklab, var(--paper) 22%, transparent);
	border-radius: var(--radius-pill);
	color: color-mix(in oklab, var(--paper) 85%, transparent);
	transition:
		border-color var(--transicion-rapida),
		color var(--transicion-rapida);
}

.em-social:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.em-social__icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* La firma es lo único manuscrito de toda la web. La raya coral de debajo es parte del
   gesto, no el subrayado de un enlace. */
.em-footer__signature {
	position: relative;
	margin-top: var(--space-40);
	padding-bottom: var(--space-12);
	max-width: 17rem;
	font-family: var(--font-script);
	font-size: var(--text-1-45);
	line-height: 1.35;
	color: color-mix(in oklab, var(--paper) 78%, transparent);
}

.em-footer__signature::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3.25rem;
	height: 2px;
	border-radius: var(--radius-pill);
	background: var(--primary);
}

.em-footer__col-title {
	color: color-mix(in oklab, var(--paper) 55%, transparent);
}

.em-footer__list {
	display: grid;
	gap: var(--space-20);
	margin-top: var(--space-28);
}

.em-footer__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--text-1);
	color: color-mix(in oklab, var(--paper) 88%, transparent);
	transition: color var(--transicion-rapida);
}

.em-footer__link:hover {
	color: var(--paper);
}

.em-footer__external {
	font-size: 0.85em;
	opacity: 0.7;
}

.em-footer__rule {
	margin-top: var(--space-56);
	width: 100%;
	height: 1px;
	background: color-mix(in oklab, var(--paper) 12%, transparent);
}

.em-footer__legal {
	display: grid;
	gap: var(--space-16);
	padding-top: var(--space-28);
	font-size: var(--text-0-85);
}

.em-footer__copy {
	color: color-mix(in oklab, var(--paper) 60%, transparent);
}

.em-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12) var(--space-32);
}

.em-footer__legal-links .em-footer__link {
	font-size: var(--text-0-85);
	color: color-mix(in oklab, var(--paper) 62%, transparent);
}

@media (width >= 48rem) {
	.em-footer__inner {
		padding-top: var(--space-96);
		padding-bottom: var(--space-48);
	}

	.em-footer__grid {
		grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
		gap: var(--space-64) var(--space-48);
	}

	.em-footer__brand {
		font-size: var(--text-2-5);
	}

	.em-footer__logo {
		height: calc(var(--text-2-5) * 2.04);
	}

	.em-footer__legal {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	.em-footer__legal-links {
		justify-content: flex-end;
	}
}