/* ==========================================================================
   EMAI — estilos del tema
   Réplica 1:1 de la maquetación de Bricks (tokens de Core Framework / Brixies).
   Breakpoints de Bricks: 991px (tablet), 767px (móvil horizontal), 478px (móvil).
   ========================================================================== */

/* Fuentes (alojadas en el tema)
   ========================================================================== */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/outfit-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens
   ========================================================================== */

:root {
	--max-screen-width: 1366px;

	--font-body: "Inter", system-ui, sans-serif;
	--font-accent: "Outfit", system-ui, sans-serif;

	/* Colores */
	--primary: #ad9b83;

	/* Botón de cita: blanco sobre #7d6c57 = 5,05:1 (WCAG AA). Reposo y pulsado/hover más oscuros: 6,6:1 */
	--btn-cita-bg: #7d6c57;
	--btn-cita-bg-hover: #6a5b48;
	--primary-5: #ad9b830d;
	--primary-10: #ad9b831a;
	--primary-20: #ad9b8333;
	--primary-50: #ad9b8380;
	--primary-90: #ad9b83e6;
	--primary-d-1: #877a68;
	--primary-d-2: #655b4e;
	--primary-d-3: #423c34;
	--primary-d-4: #24221e;
	--primary-l-1: #bdad99;
	--primary-l-2: #cdc1b2;
	--primary-l-3: #ddd5ca;
	--primary-l-4: #efebe6;

	--light: #fff;
	--light-10: #ffffff1a;
	--light-60: #ffffff99;
	--light-90: #ffffffe6;

	--dark: #000;
	--dark-5: #0000000d;
	--dark-10: #0000001a;
	--dark-20: #00000033;
	--dark-40: #00000066;
	--dark-50: #00000080;
	--dark-80: #000000cc;
	--dark-90: #000000e6;

	--text-body: hsl(0, 0%, 25%);
	--text-title: hsl(0, 0%, 0%);

	/* Espaciado fluido (320–1366px) */
	--space-4xs: clamp(0.52rem, calc(-0.03vw + 0.53rem), 0.49rem);
	--space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
	--space-2xs: clamp(0.82rem, calc(0.16vw + 0.77rem), 0.99rem);
	--space-xs: clamp(1.02rem, calc(0.36vw + 0.91rem), 1.4rem);
	--space-s: clamp(1.28rem, calc(0.67vw + 1.07rem), 1.98rem);
	--space-m: clamp(1.6rem, calc(1.15vw + 1.23rem), 2.8rem);
	--space-l: clamp(2rem, calc(1.87vw + 1.4rem), 3.96rem);
	--space-xl: clamp(2.5rem, calc(2.96vw + 1.55rem), 5.6rem);
	--space-2xl: clamp(3.13rem, calc(4.58vw + 1.66rem), 7.92rem);
	--space-3xl: clamp(3.91rem, calc(6.97vw + 1.68rem), 11.19rem);
	--space-4xl: clamp(4.88rem, calc(10.46vw + 1.53rem), 15.83rem);

	/* Tipografía fluida */
	--text-xs: clamp(1.26rem, calc(-0.24vw + 1.34rem), 1.01rem);
	--text-s: clamp(1.42rem, calc(-0.07vw + 1.44rem), 1.35rem);
	--text-m: clamp(1.6rem, calc(0.19vw + 1.54rem), 1.8rem);
	--text-l: clamp(1.8rem, calc(0.57vw + 1.62rem), 2.4rem);
	--text-xl: clamp(2.02rem, calc(1.12vw + 1.67rem), 3.2rem);
	--text-2xl: clamp(2.28rem, calc(1.9vw + 1.67rem), 4.26rem);
	--text-3xl: clamp(2.56rem, calc(2.98vw + 1.61rem), 5.68rem);
	--text-4xl: clamp(2.88rem, calc(4.49vw + 1.45rem), 7.58rem);

	/* Radios */
	--radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
	--radius-s: clamp(0.6rem, calc(0.19vw + 0.54rem), 0.8rem);
	--radius-m: clamp(1rem, calc(0.19vw + 0.94rem), 1.2rem);
	--radius-l: clamp(1.6rem, calc(0.38vw + 1.48rem), 2rem);
	--radius-xl: clamp(2.6rem, calc(0.57vw + 2.42rem), 3.2rem);
	--radius-full: 999rem;

	/* Movimiento */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	/* Entradas al estilo de apple.com (medido en /iphone-duo/): 30px, ease-in-out,
	   el desplazamiento acaba hacia los 700ms y la opacidad hacia los 900ms */
	--ease-apple: cubic-bezier(0.42, 0, 0.58, 1);
	--reveal-distance: 30px;
}

/* Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
	background-color: var(--primary-l-3);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-m);
	line-height: 1.5;
	color: var(--text-body);
	background: none;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.no-scroll {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-body);
	line-height: 1.2;
	color: var(--text-title);
	text-rendering: optimizelegibility;
}

h1 { font-size: 2.4em; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.3em; }
h6 { font-size: 1.1em; }

:where(h1, h2, h3, h4, h5, h6) a {
	color: currentcolor;
}

:where(p) {
	margin: 0 0 1.2em;
}

:where(p:last-of-type) {
	margin-bottom: 0;
}

:where(a) {
	color: currentcolor;
	text-decoration: none;
	cursor: pointer;
}

:where(ul, ol) {
	margin: 0;
}

figure {
	margin: 0;
}

img,
video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

address {
	font-style: normal;
}

small {
	font-size: 80%;
}

button {
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: inherit;
	text-transform: none;
	background: none;
	border: 0;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--primary);
}

.icon {
	display: block;
	width: auto;
	height: 1em;
	flex-shrink: 0;
}

.skip-link {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	padding: 5px 10px;
	font-weight: 700;
	color: #fff;
	background: #000;
	border-bottom-right-radius: 8px;
	transform: translateY(-102%);
	transition: transform 0.3s;
}

.skip-link:focus {
	transform: translateY(0);
}

/* Estructura: sección, contenedor y bloque (equivalentes de Bricks)
   ========================================================================== */

.section {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-inline: auto;
	padding: var(--space-3xl) var(--space-m);
}

.container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: var(--max-screen-width);
	max-width: 100%;
	margin-inline: auto;
}

:where(
	.offcanvas-Header-bot__content,
	.pain-point__container-info,
	.pain-point__grid,
	.card-pain-point__wrapper,
	.manifiesto__container-info,
	.manifiesto__inner-container-info,
	.manifiesto__description-wrapper,
	.services__container-info,
	.services__list,
	.card-services__wrapper,
	.card-services__heading-wrapper,
	.card-services__img-wrapper,
	.card-services__description-wrapper,
	.about__container-wrapper,
	.about__container-info,
	.purpose__container-info,
	.purpose__img-wrapper,
	.purpose__feature,
	.purpose__feature-item,
	.purpose__feature-container,
	.final-cta__img-wrapper,
	.final-cta__container-info,
	.final-cta__inner-container-info,
	.final-cta__container-btn,
	.emai-footer__container-top,
	.emai-footer__container-left,
	.emai-footer__container-logos,
	.emai-footer__container-bot
) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

/* Como en Bricks: en móvil, secciones, contenedores y bloques pasan a flex-wrap: wrap */
@media (max-width: 767px) {
	.section,
	.container,
	:where(
		.offcanvas-Header-bot__content,
		.pain-point__container-info,
		.pain-point__grid,
		.card-pain-point__wrapper,
		.manifiesto__container-info,
		.manifiesto__inner-container-info,
		.manifiesto__description-wrapper,
		.services__container-info,
		.services__list,
		.card-services__wrapper,
		.card-services__heading-wrapper,
		.card-services__img-wrapper,
		.card-services__description-wrapper,
		.about__container-wrapper,
		.about__container-info,
		.purpose__container-info,
		.purpose__img-wrapper,
		.purpose__feature,
		.purpose__feature-item,
		.purpose__feature-container,
		.final-cta__img-wrapper,
		.final-cta__container-info,
		.final-cta__inner-container-info,
		.final-cta__container-btn,
		.emai-footer__container-top,
		.emai-footer__container-left,
		.emai-footer__container-logos,
		.emai-footer__container-bot
	) {
		flex-wrap: wrap;
	}
}

/* Listas usadas como rejilla: sin viñetas */
.pain-point__grid,
.services__list,
.purpose__feature,
.nav-menu {
	list-style: none;
}

/* Botones
   ========================================================================== */

.btn {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: var(--space-xs) var(--space-m);
	font-size: var(--text-s);
	font-weight: 600;
	line-height: 150%;
	text-align: center;
	letter-spacing: 0.5px;
	border-width: 0;
	border-radius: var(--radius-xs);
	transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}

.btn:active {
	transform: scale(0.97);
}

.btn--primary {
	color: var(--light);
	background-color: var(--btn-cita-bg);
}

.btn--primary:hover,
.btn--primary:active {
	background-color: var(--btn-cita-bg-hover);
}

.btn--dark {
	color: var(--light);
	background-color: var(--dark);
}

.btn--dark:hover {
	background-color: var(--dark-90);
}

/* Contorno claro (sobre fondo oscuro) */
.btn--outline {
	color: var(--light);
	background-color: transparent;
	border: 1px solid;
}

@media (hover: hover) and (pointer: fine) {
	.btn--outline:hover {
		background-color: var(--light-10);
	}
}

@media (max-width: 767px) {
	.btn {
		padding-top: var(--space-s);
		padding-bottom: var(--space-s);
	}
}

/* Etiqueta sobre los títulos */
.tagline {
	font-family: var(--font-accent);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 5px;
}

/* Cabecera
   ========================================================================== */

.site-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 998;
	width: 100%;
	transition: background-color 0.2s, transform 0.4s;
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.site-header > .section,
.site-header .nav-menu > li > a {
	transition: inherit;
}

/* Se oculta al bajar a partir de 300px y vuelve al subir (salvo con el menú abierto) */
.site-header.slide-up:not(:has(.offcanvas-Header-bot.is-open)) {
	overflow-x: hidden;
	scrollbar-width: none;
	transform: translateY(-101%);
}

.site-header:has(.offcanvas-Header-bot.is-open) {
	transition: none;
}

/* Fuera de la portada no hay hero oscuro debajo: la barra lleva fondo */
body:not(.home) .Header-bot {
	background-color: var(--primary-d-4);
}

/* Barra superior */
.Header-top {
	padding: var(--space-xs) var(--space-m);
	color: var(--light);
	background-color: var(--primary);
}

.Header-top__container {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.Header-top__address {
	font-size: var(--text-s);
	font-weight: 500;
	font-style: normal;
}

.Header-top__social-container {
	display: flex;
	flex-direction: row;
	column-gap: var(--space-xs);
	align-items: center;
	width: auto;
	margin-left: auto;
}

.Header-top__icon {
	font-size: 26px;
}

.Header-top__social-container a:hover .Header-top__icon {
	color: var(--dark);
}

@media (max-width: 767px) {
	.Header-top__container {
		justify-content: flex-end;
	}

	.Header-top__address {
		display: none;
	}
}

/* Barra principal */
.Header-bot {
	position: sticky;
	top: 0;
	padding: var(--space-xs) var(--space-m);
	border-top: 1px solid var(--dark-10);
	transition: background-color 300ms ease;
}

/* Pasado el hero, la barra toma fondo para que el menú blanco se lea */
.site-header.is-solid .Header-bot {
	background-color: rgb(36 34 30 / 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.Header-bot__container {
	flex-direction: row;
	column-gap: var(--space-m);
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.Header-bot__logo {
	display: block;
	width: clamp(9.5rem, 6.7263rem + 5.8027vw, 15.5rem);
	line-height: 1;
}

.Header-bot__logo img {
	display: block;
	width: auto;
	height: auto;
}

@media (max-width: 767px) {
	.Header-bot {
		padding-top: var(--space-s);
		padding-bottom: var(--space-s);
	}
}

/* Menú de escritorio */
.Header-bot__menu {
	margin-left: auto;
}

.Header-bot__menu .nav-menu {
	display: flex;
	flex-direction: row;
	gap: var(--space-m);
	margin: 0;
	padding: 0;
}

.Header-bot__menu .nav-menu > li {
	position: relative;
	margin-top: auto;
	margin-bottom: auto;
}

.Header-bot__menu .nav-menu > li > a {
	display: flex;
	font-family: var(--font-accent);
	font-size: var(--text-s);
	font-weight: 500;
	color: var(--light);
	text-transform: uppercase;
}

.Header-bot__menu .nav-menu > li:hover > a {
	color: var(--primary-l-2);
}

.Header-bot__menu .nav-menu .current-menu-item > a,
.Header-bot__menu .nav-menu > .current-menu-parent > a,
.Header-bot__menu .nav-menu > .current-menu-ancestor > a {
	color: var(--primary);
}

/* Submenú (por si se añaden subniveles) */
.Header-bot__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 998;
	min-width: 150px;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	list-style: none;
	background-color: var(--light);
	border: 1px solid var(--dark-20);
	border-radius: var(--radius-xs);
	box-shadow: 4px 4px 12px 0 var(--dark-5);
	opacity: 0;
	visibility: hidden;
	transform: translateY(var(--space-xs));
	transition: opacity 200ms ease, visibility 200ms;
}

.Header-bot__menu li:hover > .sub-menu,
.Header-bot__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.Header-bot__menu .sub-menu a {
	display: flex;
	padding: var(--space-xs) var(--space-s);
	font-size: var(--text-s);
	font-weight: 600;
	line-height: 120%;
	color: var(--dark);
}

.Header-bot__menu .sub-menu .menu-item:hover {
	background-color: var(--dark-5);
}

/* Teléfono / WhatsApp */
.Header-bot__btn {
	display: flex;
	flex-direction: row;
	column-gap: var(--space-xs);
	align-items: center;
	justify-content: center;
	padding: 8px 0 8px var(--space-m);
	color: var(--dark);
	border-left: 1px solid var(--light-10);
}

.Header-bot__btn-icon {
	font-size: var(--text-s);
	color: var(--light);
}

.Header-bot__btn-info {
	font-size: var(--text-s);
	font-style: normal;
	font-weight: 600;
	color: var(--light);
}

@media (max-width: 991px) {
	.Header-bot__menu {
		display: none;
	}

	/* En móvil el teléfono se queda junto al menú: logo · teléfono · menú */
	.Header-bot__btn {
		margin-left: auto;
		padding-left: 0;
		border-left: 0;
	}

	.Header-bot__toggle-menu {
		order: 2;
	}
}

/* Botón hamburguesa */
.Header-bot__toggle-menu {
	--toggle-scale: 0.6;
	z-index: 910;
	display: none;
	line-height: 1;
	transform: scale(var(--toggle-scale));
}

.hamburger__box {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 24px;
	color: var(--light);
}

.hamburger__inner,
.hamburger__inner::before,
.hamburger__inner::after {
	position: absolute;
	width: 40px;
	height: 4px;
	background-color: currentcolor;
	border-radius: 0;
	transition-timing-function: ease;
	transition-duration: 0.15s;
	transition-property: transform;
}

.hamburger__inner {
	top: 50%;
	display: block;
	margin-top: -2px;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition-duration: 0.22s;
}

.hamburger__inner::before,
.hamburger__inner::after {
	display: block;
	content: "";
}

.hamburger__inner::before {
	top: -10px;
	transition: top 0.1s ease-in 0.25s, opacity 0.1s ease-in;
}

.hamburger__inner::after {
	bottom: -10px;
	transition: bottom 0.1s ease-in 0.25s, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger.is-active .hamburger__inner {
	transform: rotate(225deg);
	transition-delay: 0.12s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger.is-active .hamburger__inner::before {
	top: 0;
	opacity: 0;
	transition: top 0.1s ease-out, opacity 0.1s ease-out 0.12s;
}

.hamburger.is-active .hamburger__inner::after {
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom 0.1s ease-out, transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
}

@media (max-width: 991px) {
	.Header-bot__toggle-menu {
		display: flex;
	}
}

/* Menú lateral (móvil) */
.offcanvas-Header-bot {
	z-index: 900;
	visibility: hidden;
}

.offcanvas-Header-bot.is-open {
	visibility: visible;
}

.offcanvas-Header-bot__content {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
	flex-wrap: nowrap;
	row-gap: var(--space-2xl);
	justify-content: flex-start;
	width: 400px;
	max-width: 100vw;
	height: 100svh;
	min-height: max-content;
	padding: var(--space-l);
	overflow-x: hidden;
	background-color: #fff;
	transform: translateX(-100%);
	transition: transform 300ms var(--ease-drawer);
}

.offcanvas-Header-bot.is-open .offcanvas-Header-bot__content {
	transform: translateX(0);
}

.offcanvas-Header-bot__backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: var(--dark-40);
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms ease, visibility 300ms;
}

.offcanvas-Header-bot.is-open .offcanvas-Header-bot__backdrop {
	z-index: 998;
	opacity: 1;
	visibility: visible;
}

.offcanvas-Header-bot__logo {
	display: block;
	width: 155px;
}

.offcanvas-Header-bot__menu .nav-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	margin: 0;
	padding: 0;
}

.offcanvas-Header-bot__menu .nav-menu a {
	display: flex;
	font-size: var(--text-m);
	font-weight: 500;
	color: var(--dark);
}

.offcanvas-Header-bot__menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.offcanvas-Header-bot__menu .sub-menu a {
	padding: var(--space-s) var(--space-xs) 0;
}

@media (max-width: 767px) {
	.offcanvas-Header-bot__content {
		width: 300px;
	}
}

/* Hero
   ========================================================================== */

.hero-14 {
	position: relative;
	z-index: 1;
	align-items: flex-start;
	justify-content: center;
	min-height: 90svh;
}

:where(.hero-14 > *) {
	position: relative;
}

.hero-14::before {
	position: absolute;
	inset: 0;
	pointer-events: none;
	content: "";
	background-image: linear-gradient(var(--dark-50), var(--dark-50));
}

.hero-14__video {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.hero-14__video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-14__container {
	flex-direction: column;
	align-items: flex-start;
	width: 810px;
	margin-left: 0;
}

.hero-14__heading {
	font-size: var(--text-2xl);
	color: var(--light);
	text-align: left;
}

.hero-14__description {
	margin-top: var(--space-xs);
	font-size: var(--text-m);
	color: var(--light-90);
	text-align: left;
}

.hero-14__btn-container {
	display: flex;
	gap: var(--space-m);
}

.hero-14__btn {
	margin-top: var(--space-l);
}

/* Identificación: «Quizá has llegado aquí porque…»
   ========================================================================== */

.pain-point__container {
	flex-direction: column;
	align-items: center;
}

.pain-point__container-info {
	row-gap: var(--space-xs);
	align-items: center;
	max-width: 1080px;
}

.pain-point__heading {
	font-size: var(--text-2xl);
	text-align: center;
}

.pain-point__grid {
	display: grid;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-gap: var(--space-m);
	align-items: initial;
	margin-top: var(--space-xl);
	margin-bottom: 0;
	padding-left: 0;
}

.card-pain-point__wrapper {
	height: 100%;
	aspect-ratio: 1 / 1;
}

.card-pain-point__wrapper:nth-of-type(1) {
	grid-row: span 2;
	grid-column: span 2;
}

.card-pain-point__wrapper:nth-of-type(4) {
	grid-column: span 2;
	aspect-ratio: 2 / 1;
}

.card-pain-point {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	padding: var(--space-m);
	overflow: hidden;
	isolation: isolate;
	background-color: var(--primary-d-3);
	border-radius: var(--radius-l);
}

.card-pain-point__img {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
}

/* Degradado superior: el título siempre se lee sobre la foto */
.card-pain-point__img::after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(to bottom, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0) 45%);
}

.card-pain-point__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50%;
	transition: transform 700ms var(--ease-out);
}

/* Cortinilla que sube desde abajo y deja el texto sobre un fondo liso */
.card-pain-point::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background-color: rgb(66 60 52 / 0.94);
	transform: translateY(101%);
	transition: transform 300ms var(--ease-out);
}

.card-pain-point__heading {
	font-size: var(--text-l);
	font-weight: 700;
	color: var(--light);
}

.card-pain-point__description {
	margin-top: var(--space-xs);
	margin-bottom: auto;
	color: var(--primary-l-3);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 150ms ease, transform 150ms ease;
}

.card-pain-point__description ul {
	padding-left: 40px;
}

.card-pain-point__description li + li {
	margin-top: 0.2em;
}

/* Estado abierto: al pasar el ratón, con foco o (en táctil) al pasar por el centro de la pantalla */
.card-pain-point__wrapper.is-active .card-pain-point::after,
.card-pain-point__wrapper:focus-within .card-pain-point::after {
	transform: translateY(0);
	transition: transform 500ms var(--ease-drawer);
}

.card-pain-point__wrapper.is-active .card-pain-point__description,
.card-pain-point__wrapper:focus-within .card-pain-point__description {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 300ms ease 150ms, transform 400ms var(--ease-out) 150ms;
}

.card-pain-point__wrapper.is-active .card-pain-point__img img,
.card-pain-point__wrapper:focus-within .card-pain-point__img img {
	transform: scale(1.04);
}

@media (hover: hover) and (pointer: fine) {
	.card-pain-point__wrapper:hover .card-pain-point::after {
		transform: translateY(0);
		transition: transform 500ms var(--ease-drawer);
	}

	.card-pain-point__wrapper:hover .card-pain-point__description {
		opacity: 1;
		transform: translateY(0);
		transition: opacity 300ms ease 150ms, transform 400ms var(--ease-out) 150ms;
	}

	.card-pain-point__wrapper:hover .card-pain-point__img img {
		transform: scale(1.04);
	}
}

@media (max-width: 991px) {
	.pain-point__grid {
		grid-template-rows: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-gap: var(--space-s);
	}

	.card-pain-point__wrapper:nth-of-type(1) {
		grid-row: auto;
	}
}

@media (max-width: 767px) {
	.pain-point__grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.card-pain-point__wrapper:nth-of-type(1) {
		grid-column: auto;
	}

	.card-pain-point__wrapper:nth-of-type(4) {
		grid-column: auto;
		aspect-ratio: 1 / 1;
	}
}

/* Cómo trabajamos (manifiesto)
   ========================================================================== */

.manifiesto__container {
	display: grid;
	grid-template-rows: repeat(1, minmax(0, 1fr));
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-gap: var(--space-xl);
	align-items: center;
}

.manifiesto__container-info {
	row-gap: var(--space-m);
	align-items: flex-start;
}

.manifiesto__inner-container-info {
	row-gap: var(--space-xs);
	align-items: flex-start;
}

.manifiesto__heading {
	margin-top: 0;
	font-size: var(--text-2xl);
}

.manifiesto__img {
	display: inline-block;
	max-width: 440px;
	aspect-ratio: 9 / 16;
	border-radius: var(--radius-full);
}

.manifiesto__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50%;
	border-radius: inherit;
}

.manifiesto__description-wrapper {
	flex-flow: column nowrap;
	row-gap: var(--space-m);
}

@media (max-width: 991px) {
	.manifiesto__container {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		justify-items: center;
	}

	.manifiesto__container-info,
	.manifiesto__description-wrapper {
		align-items: center;
	}

	.manifiesto__inner-container-info {
		align-items: center;
		text-align: center;
	}

	.manifiesto__description {
		text-align: center;
	}
}

/* Tratamientos (services)
   ========================================================================== */

.services__container {
	flex-direction: column;
	row-gap: var(--space-xl);
	align-items: center;
}

.services__container-info {
	flex-direction: column;
	row-gap: var(--space-xs);
	align-items: center;
	width: 810px;
	max-width: 100%;
}

.services__heading {
	font-size: var(--text-2xl);
	text-align: center;
}

.services__list {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	grid-gap: var(--space-m);
	align-items: initial;
	margin-top: 0;
	margin-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}

.card-services {
	position: relative;
	display: grid;
	grid-template-rows: repeat(1, minmax(0, 1fr));
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-gap: var(--space-l);
	place-content: center;
	align-items: center;
	justify-items: flex-start;
	width: 100%;
	padding: var(--space-l);
	isolation: isolate;
	border: 1px solid var(--dark-20);
	border-radius: var(--radius-l);
	transition: background-color 300ms ease, border-color 300ms ease;
}

.card-services__heading-wrapper {
	flex-flow: column nowrap;
	gap: var(--space-xs);
	grid-column: span 4;
	align-items: flex-start;
	justify-content: flex-start;
}

.card-services__heading {
	font-size: var(--text-xl);
	transition: color 0.3s ease;
}

.card-services__heading a {
	transition: inherit;
}

/* Si la tarjeta tiene enlace, toda la tarjeta es clicable */
.card-services__heading a::before {
	position: absolute;
	inset: 0;
	cursor: pointer;
	content: "";
}

.card-services__img-wrapper {
	position: relative;
	grid-column: span 3;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.card-services__img {
	position: absolute;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	object-fit: cover;
	object-position: 50%;
	border-radius: var(--radius-l);
	opacity: 0;
	transition: opacity 300ms ease, transform 400ms var(--ease-out);
}

.card-services__description-wrapper {
	flex-flow: row nowrap;
	column-gap: var(--space-m);
	grid-column: span 5;
	align-items: center;
}

.card-services__description {
	transition: color 0.3s ease;
}

.card-services:focus-within {
	background-color: var(--primary);
	border-color: var(--primary);
}

.card-services:focus-within .card-services__heading,
.card-services:focus-within .card-services__description {
	color: var(--light);
}

.card-services:focus-within .card-services__img {
	opacity: 1;
	transform: rotateZ(-3deg) scale(1.2);
}

@media (hover: hover) and (pointer: fine) {
	.card-services:hover {
		background-color: var(--primary);
		border-color: var(--primary);
	}

	.card-services:hover .card-services__heading,
	.card-services:hover .card-services__description {
		color: var(--light);
	}

	.card-services:hover .card-services__img {
		opacity: 1;
		transform: rotateZ(-3deg) scale(1.2);
	}
}

@media (max-width: 991px) {
	.services__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.card-services {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		grid-gap: var(--space-xs);
		align-items: flex-start;
		padding: var(--space-xs);
	}

	.card-services__heading-wrapper {
		flex-direction: column;
		grid-column: auto;
		padding: var(--space-xs) var(--space-xs) 0;
	}

	.card-services__img-wrapper {
		grid-row: auto;
		grid-column: auto;
		order: -1;
	}

	.card-services__img {
		position: static;
		opacity: 1;
	}

	.card-services .card-services__img,
	.card-services:hover .card-services__img,
	.card-services:focus-within .card-services__img {
		transform: none;
	}

	.card-services__description-wrapper {
		grid-row: auto;
		grid-column: auto;
		padding: 0 var(--space-xs) var(--space-xs);
	}
}

@media (max-width: 767px) {
	.services__list {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

/* Sobre EMAI
   ========================================================================== */

.about {
	padding-top: var(--space-m);
	padding-bottom: var(--space-m);
}

.about__container-wrapper {
	position: relative;
	padding: var(--space-xl);
	overflow: hidden;
	isolation: isolate;
	background-color: var(--dark-5);
	border-radius: var(--radius-l);
}

.about__img {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: 40%;
	height: 100%;
}

.about__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50%;
}

.about__container {
	row-gap: var(--space-m);
}

.about__container-info {
	row-gap: var(--space-xs);
	width: 50%;
}

.about__heading {
	margin-top: 0;
	font-size: var(--text-2xl);
}

.about__description {
	width: 540px;
	max-width: 100%;
}

@media (max-width: 991px) {
	.about__container-wrapper {
		padding: 0;
	}

	.about__img {
		position: static;
		width: 100%;
		height: 300px;
	}

	.about__container {
		padding: var(--space-m);
	}
}

@media (max-width: 767px) {
	.about__container-info {
		width: 100%;
	}
}

@media (max-width: 478px) {
	.about__container {
		align-items: stretch;
	}
}

/* Propósito
   ========================================================================== */

.purpose__container {
	row-gap: var(--space-xl);
	align-items: center;
}

.purpose__container-info {
	row-gap: var(--space-xs);
	align-items: center;
	align-self: center;
	width: 1080px;
	max-width: 100%;
}

.purpose__heading {
	font-size: var(--text-2xl);
	text-align: center;
}

.purpose__description {
	width: 540px;
	max-width: 100%;
	text-align: center;
}

.purpose__img-wrapper {
	position: relative;
	align-items: flex-end;
	justify-content: center;
	min-height: 759px;
	/* En Bricks el padding vertical usaba una variable inexistente (--space-xxl): queda a 0. */
	padding: 0 var(--space-xl);
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--radius-l);
}

.purpose__img {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
}

.purpose__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50%;
}

.purpose__feature {
	row-gap: var(--space-m);
	width: 540px;
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	padding: var(--space-xl);
	background-color: var(--light);
	border-radius: var(--radius-l);
}

.purpose__feature-item {
	flex-direction: row;
	gap: var(--space-xs);
}

.purpose__feature-icon {
	font-size: 2.4rem;
	color: var(--primary);
}

.purpose__feature-container {
	row-gap: calc(var(--space-xs) / 2);
}

.purpose__feature-heading {
	font-size: var(--text-l);
}

/* En móvil la foto va arriba, completa y encuadrada en la figura,
   y la tarjeta se monta sobre su parte inferior */
@media (max-width: 767px) {
	.purpose__img-wrapper {
		align-items: stretch;
		justify-content: flex-start;
		min-height: 0;
		padding: 0 var(--space-s) var(--space-s);
	}

	.purpose__img {
		position: relative;
		top: auto;
		right: auto;
		z-index: 0;
		width: calc(100% + 2 * var(--space-s));
		height: 520px;
		margin: 0 calc(-1 * var(--space-s));
	}

	.purpose__img img {
		object-position: 17% 50%;
	}

	.purpose__feature {
		position: relative;
		width: 100%;
		margin-top: -64px;
	}
}

@media (max-width: 478px) {
	.purpose__feature {
		padding-right: var(--space-m);
		padding-left: var(--space-m);
	}

	.purpose__feature-item {
		flex-direction: column;
	}
}

/* Llamada final
   ========================================================================== */

.final-cta__container {
	display: grid;
	grid-template-rows: repeat(1, minmax(0, 1fr));
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-gap: var(--space-m);
	place-content: stretch space-between;
	align-items: initial;
	padding: var(--space-xl);
	background-color: var(--dark-5);
	border-radius: var(--radius-l);
}

.final-cta__img-wrapper {
	position: relative;
	align-items: center;
	justify-content: center;
}

.final-cta__img {
	position: absolute;
	left: 0;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-full);
}

.final-cta__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50%;
	border-radius: inherit;
}

.final-cta__container-info {
	flex-direction: column;
	row-gap: var(--space-m);
}

.final-cta__inner-container-info {
	flex-direction: column;
	row-gap: var(--space-xs);
	align-items: flex-start;
	justify-content: flex-start;
}

.final-cta__heading {
	font-size: var(--text-2xl);
}

.final-cta__container-btn {
	flex-flow: row nowrap;
	gap: var(--space-m) var(--space-s);
	align-items: stretch;
	width: fit-content;
}

@media (max-width: 991px) {
	.final-cta__container {
		grid-gap: var(--space-s);
	}

	.final-cta__img {
		aspect-ratio: 3 / 4;
	}
}

@media (max-width: 767px) {
	.final-cta__container {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		grid-gap: 0;
		padding: 0;
		overflow: hidden;
	}

	.final-cta__img {
		position: static;
		height: auto;
		aspect-ratio: 1;
	}

	.final-cta__container-info {
		padding: var(--space-l);
	}
}

@media (max-width: 478px) {
	.final-cta__container-info {
		align-items: center;
	}

	.final-cta__container-btn {
		flex-direction: column;
		width: 100%;
	}
}

/* Pie
   ========================================================================== */

.emai-footer {
	padding: var(--space-l) var(--space-m) var(--space-s);
	color: var(--light);
	background-color: var(--primary-d-4);
}

.emai-footer__container {
	row-gap: var(--space-m);
}

.emai-footer__container-top {
	flex-direction: row;
	row-gap: var(--space-l);
	justify-content: space-between;
}

.emai-footer__container-left {
	row-gap: var(--space-s);
	max-width: 540px;
}

.emai-footer__logo {
	display: block;
	width: 155px;
	line-height: 1;
}

.emai-footer__logo img {
	display: block;
	width: auto;
	height: auto;
}

.emai-footer__description {
	font-size: var(--text-s);
}

.emai-footer__divider {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--light-10);
}

.emai-footer__container-logos {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 2fr;
	grid-gap: var(--space-s);
	flex-direction: row;
	align-items: initial;
}

.eu-logo {
	width: auto;
	max-height: 50px;
	object-fit: contain;
}

.eu-text {
	font-size: var(--text-s);
}

.emai-footer__container-bot {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.emai-footer__credit-name {
	font-size: var(--text-s);
}

.emai-footer__credit {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}

.emai-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px var(--space-s);
	padding: 0;
	margin: 0;
	list-style: none;
}

.emai-footer__legal a,
.emai-footer__legal-btn {
	padding: 0;
	font: inherit;
	font-size: var(--text-xs);
	color: var(--light-60);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	background: none;
	border: 0;
	transition: color 200ms ease;
}

.emai-footer__legal a:hover,
.emai-footer__legal-btn:hover {
	color: var(--light);
}

.emai-footer__social-container {
	display: flex;
	flex-direction: row;
	column-gap: var(--space-xs);
	align-items: center;
	width: auto;
}

/* El icono va en línea: la caja mide lo que una línea de texto (como en Bricks) */
.emai-footer__social-container a {
	display: flex;
	align-items: center;
	min-height: 1.5em;
}

.emai-footer__icon {
	font-size: 20px;
	color: var(--light-60);
}

.emai-footer__icon {
	transition: color 200ms ease;
}

.emai-footer__social-container a:hover .emai-footer__icon {
	color: var(--light);
}

@media (max-width: 767px) {
	.emai-footer__container-top {
		flex-flow: column nowrap;
	}

	/* Logos en una fila y el texto de financiación debajo, a todo el ancho */
	.emai-footer__container-logos {
		grid-template-columns: repeat(3, auto);
		gap: var(--space-s) var(--space-m);
		align-items: center;
		justify-content: start;
	}

	.eu-logo {
		max-height: 40px;
	}

	.eu-text {
		grid-column: 1 / -1;
		font-size: var(--text-xs);
		opacity: 0.8;
	}

	.emai-footer__container-bot {
		flex-wrap: nowrap;
		gap: var(--space-s);
	}

	.emai-footer__credit-name {
		font-size: var(--text-xs);
	}

	.emai-footer__container-left {
		width: 100%;
		max-width: 100%;
	}
}

/* Páginas genéricas
   ========================================================================== */

.page-content {
	padding-top: calc(var(--space-3xl) + 120px);
}

.entry {
	width: 100%;
	max-width: 810px;
}

.entry__title {
	margin-bottom: var(--space-m);
	font-size: var(--text-2xl);
}

.entry__content a {
	color: var(--primary);
}

.entry__content :where(h2, h3, h4) {
	margin: 1.2em 0 0.6em;
}

/* Movimiento: animaciones de entrada (al estilo de apple.com)
   El estado oculto solo existe con html.js-motion (lo añade un script en el <head>),
   así que sin JavaScript todo se ve. main.js añade .is-in al entrar en pantalla
   (y cuando las fotos ya están cargadas) y reparte el escalonado en --reveal-delay.
   ========================================================================== */

/* Hero: entra al cargar, escalonado */
@keyframes emai-rise {
	from {
		opacity: 0;
		transform: translateY(var(--reveal-distance));
	}
}

.js-motion .hero-14__heading,
.js-motion .hero-14__description,
.js-motion .hero-14__btn-container {
	animation: emai-rise 900ms var(--ease-apple) both;
}

.js-motion .hero-14__description {
	animation-delay: 150ms;
}

.js-motion .hero-14__btn-container {
	animation-delay: 300ms;
}

/* El vídeo funde desde negro en cuanto empieza a reproducirse */
.js-motion .hero-14__video video {
	opacity: 0;
	transition: opacity 1200ms ease;
}

.js-motion .hero-14__video.is-playing video {
	opacity: 1;
}

/* Textos, tarjetas y fotos: suben 30px y aparecen */
.js-motion :is(
	.tagline,
	.pain-point__heading,
	.manifiesto__heading,
	.manifiesto__description,
	.services__heading,
	.about__heading,
	.about__description,
	.purpose__heading,
	.purpose__description,
	.purpose__feature,
	.final-cta__heading,
	.final-cta__container-btn,
	.card-pain-point__wrapper,
	.card-services__wrapper,
	.manifiesto__img,
	.about__img,
	.purpose__img,
	.final-cta__img
) {
	opacity: 0;
	translate: 0 var(--reveal-distance);
	transition:
		opacity 900ms var(--ease-apple) var(--reveal-delay, 0ms),
		translate 700ms var(--ease-apple) var(--reveal-delay, 0ms);
}

.js-motion :is(
	.tagline,
	.pain-point__heading,
	.manifiesto__heading,
	.manifiesto__description,
	.services__heading,
	.about__heading,
	.about__description,
	.purpose__heading,
	.purpose__description,
	.purpose__feature,
	.final-cta__heading,
	.final-cta__container-btn,
	.card-pain-point__wrapper,
	.card-services__wrapper,
	.manifiesto__img,
	.about__img,
	.purpose__img,
	.final-cta__img
).is-in {
	opacity: 1;
	translate: none;
}

/* Movimiento reducido: solo fundidos, sin desplazamientos */
@media (prefers-reduced-motion: reduce) {
	.js-motion .hero-14__heading,
	.js-motion .hero-14__description,
	.js-motion .hero-14__btn-container {
		animation: none;
	}

	.js-motion :is(
		.tagline,
		.pain-point__heading,
		.manifiesto__heading,
		.manifiesto__description,
		.services__heading,
		.about__heading,
		.about__description,
		.purpose__heading,
		.purpose__description,
		.purpose__feature,
		.final-cta__heading,
		.final-cta__container-btn,
		.card-pain-point__wrapper,
		.card-services__wrapper,
		.manifiesto__img,
		.about__img,
		.purpose__img,
		.final-cta__img
	) {
		translate: none;
		transition: opacity 400ms ease;
	}

	.card-pain-point__img img,
	.card-pain-point::after,
	.card-pain-point__description {
		transform: none !important;
	}

	.card-pain-point::after {
		opacity: 0;
		transition: opacity 300ms ease;
	}

	.card-pain-point__wrapper:is(.is-active, :hover, :focus-within) .card-pain-point::after {
		opacity: 1;
	}
}