/* ==========================================================================
   EM Landing — estilos
   Traducido del diseño EM Landing.dc.html (Design Composer).
   ========================================================================== */

:root {
	/* Paleta */
	--em-cream: #f3ebe3;
	--em-ink: #0A0A0A;
	--em-ink-soft: #3D3D3D;
	--em-white: #FFFFFF;
	--em-paper: #FAF9F8;
	--em-mute: #6E6E6E;
	--em-rule: #A3A3A3;
	--em-border-cream: #E4DBCE;
	--em-card-bg: #F2F0EE;

	/* Degradados del diseño */
	--em-hero-gradient: linear-gradient(160deg, #33302b, #4a453d 55%, #2c2925);
	--em-tile-women: linear-gradient(150deg, #2c2925, #413c34);
	--em-tile-men: linear-gradient(150deg, #29261f, #413c34);

	/* Tipografía */
	--em-serif: 'Newsreader', Georgia, serif;
	--em-display: 'Inter Tight', system-ui, sans-serif;
	--em-sans: 'Inter', system-ui, sans-serif;

	/* Layout */
	--em-shell: 1720px;
	--em-gutter: clamp(20px, 5vw, 96px);
	--em-nav-h: 72px;
}

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

html,
body {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--em-nav-h);
}

body {
	background: var(--em-cream);
	color: var(--em-ink);
	font-family: var(--em-sans);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--em-ink);
	text-decoration: none;
}

a:hover {
	color: var(--em-ink-soft);
}

img {
	max-width: 100%;
}

/* Accesibilidad ---------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.em-skip {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 100;
	padding: 12px 20px;
	background: var(--em-ink);
	color: var(--em-white);
	font: 500 13px/1 var(--em-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: top 160ms ease-out;
}

.em-skip:focus {
	top: 16px;
	color: var(--em-white);
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Utilidades ------------------------------------------------------------- */

.em-shell {
	max-width: var(--em-shell);
	margin: 0 auto;
	width: 100%;
}

.em-eyebrow {
	margin: 0;
	font: 500 11px/14px var(--em-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.em-h2 {
	margin: 0;
	font-family: var(--em-display);
	font-weight: 400;
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.02;
	letter-spacing: -.03em;
}

.em-link-underline {
	font: 500 13px/16px var(--em-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--em-ink);
	padding-bottom: 4px;
}

/* Animaciones ------------------------------------------------------------ */

@keyframes lpUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

@keyframes lpFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ==========================================================================
   NAV STICKY
   ========================================================================== */

.em-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	height: var(--em-nav-h);
	display: flex;
	align-items: center;
	background: transparent;
	color: var(--em-white);
	border-bottom: 1px solid transparent;
	transition: background 260ms ease, color 260ms ease, border-color 260ms ease;
}

.em-nav[data-scrolled="true"] {
	background: rgba(243, 235, 227, .94);
	-webkit-backdrop-filter: saturate(1.2) blur(12px);
	backdrop-filter: saturate(1.2) blur(12px);
	border-bottom-color: var(--em-border-cream);
	color: var(--em-ink);
}

/* Con sesión iniciada, la barra de admin ocupa los primeros 32px (46 en
   móvil): se baja la nav fija para que no quede debajo. */
body.admin-bar .em-nav,
body.admin-bar .em-menu {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .em-nav,
	body.admin-bar .em-menu {
		top: 46px;
	}
}

.em-nav__inner {
	max-width: var(--em-shell);
	margin: 0 auto;
	width: 100%;
	padding: 0 var(--em-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	color: inherit;
}

/* El logo cambia de versión papel (sobre el hero) a tinta (al hacer scroll). */
.em-nav__logo {
	display: block;
	height: 26px;
	width: 35.6px;
	background-image: url('../img/em-mark-paper.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: opacity 260ms ease;
}

.em-nav[data-scrolled="true"] .em-nav__logo {
	background-image: url('../img/em-mark-ink.png');
}

.em-nav__links {
	display: flex;
	gap: clamp(20px, 2.4vw, 36px);
	align-items: center;
	color: inherit;
}

.em-nav__link {
	font: 500 12px/16px var(--em-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: inherit;
}

.em-nav__link:hover {
	color: inherit;
	opacity: .7;
}

.em-nav__cta {
	height: 40px;
	padding: 0 22px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, .12);
	color: var(--em-white);
	border: 1px solid rgba(255, 255, 255, .55);
	font: 500 12px/1 var(--em-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: background 200ms, border-color 200ms, color 200ms;
}

.em-nav__cta:hover {
	background: rgba(255, 255, 255, .22);
	border-color: var(--em-white);
	color: var(--em-white);
}

.em-nav[data-scrolled="true"] .em-nav__cta {
	background: var(--em-ink);
	color: var(--em-white);
	border-color: var(--em-ink);
}

.em-nav[data-scrolled="true"] .em-nav__cta:hover {
	background: var(--em-ink-soft);
	border-color: var(--em-ink-soft);
}

/* ==========================================================================
   1 · HERO
   ========================================================================== */

.em-hero {
	position: relative;
	min-height: 100vh;
	width: 100%;
	overflow: hidden;
	background: var(--em-hero-gradient);
	display: flex;
	flex-direction: column;
}

.em-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.em-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 10, .82), rgba(10, 10, 10, .42) 45%, rgba(10, 10, 10, .5));
	pointer-events: none;
}

.em-hero__inner {
	position: relative;
	flex: 1;
	max-width: var(--em-shell);
	width: 100%;
	margin: 0 auto;
	padding: clamp(88px, 10vw, 120px) var(--em-gutter) clamp(48px, 7vw, 88px);
	display: flex;
	flex-direction: column;
	color: var(--em-white);
}

.em-hero__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	max-width: 920px;
}

.em-hero__eyebrow {
	color: rgba(255, 255, 255, .72);
	margin-bottom: 24px;
	animation: lpUp 700ms ease-out both;
}

.em-hero__title {
	margin: 0;
	font-family: var(--em-serif);
	font-weight: 400;
	font-size: clamp(44px, 7vw, 104px);
	line-height: .98;
	letter-spacing: -.02em;
	text-wrap: balance;
	animation: lpUp 800ms ease-out both;
	animation-delay: 60ms;
}

.em-hero__lede {
	margin: 28px 0 0;
	max-width: 560px;
	font: 400 clamp(16px, 1.5vw, 19px)/1.6 var(--em-sans);
	color: rgba(255, 255, 255, .82);
	text-wrap: pretty;
	animation: lpUp 800ms ease-out both;
	animation-delay: 140ms;
}

.em-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 44px;
	animation: lpUp 800ms ease-out both;
	animation-delay: 220ms;
}

/* Botones ---------------------------------------------------------------- */

.em-btn {
	height: 60px;
	display: inline-flex;
	align-items: center;
	font: 500 13px/1 var(--em-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.em-btn--solid {
	padding: 0 44px;
	gap: 14px;
	background: var(--em-paper);
	color: var(--em-ink);
	transition: transform 200ms cubic-bezier(.2, 0, 0, 1), background 200ms;
}

.em-btn--solid:hover {
	background: var(--em-white);
	color: var(--em-ink);
	transform: translateY(-2px);
}

.em-btn--ghost {
	padding: 0 28px;
	border: 1px solid rgba(255, 255, 255, .5);
	color: var(--em-white);
	transition: border-color 200ms, background 200ms;
}

.em-btn--ghost:hover {
	border-color: var(--em-white);
	background: rgba(255, 255, 255, .08);
	color: var(--em-white);
}

/* ==========================================================================
   2 · MANIFESTO
   ========================================================================== */

.em-manifesto {
	background: var(--em-cream);
	padding: clamp(88px, 13vw, 180px) var(--em-gutter);
}

.em-manifesto__inner {
	max-width: 980px;
	margin: 0 auto;
	text-align: center;
}

.em-manifesto__text {
	margin: 0;
	font-family: var(--em-serif);
	font-weight: 400;
	font-size: clamp(28px, 4.2vw, 52px);
	line-height: 1.1;
	letter-spacing: -.02em;
	text-wrap: pretty;
}

/* ==========================================================================
   3 · FEATURED
   ========================================================================== */

.em-featured {
	background: var(--em-white);
	padding: clamp(72px, 10vw, 128px) var(--em-gutter);
}

.em-featured__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 40px;
	gap: 24px;
	flex-wrap: wrap;
}

.em-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* Tarjeta de producto ---------------------------------------------------- */

.em-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-family: var(--em-sans);
}

.em-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	background: var(--em-card-bg);
	overflow: hidden;
}

.em-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.em-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	font: 500 11px/14px var(--em-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 6px 10px;
}

.em-card__wish {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	background: rgba(255, 255, 255, .86);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.em-card:hover .em-card__wish,
.em-card__wish:focus-visible {
	opacity: 1;
	transform: translateY(0);
}

.em-card__wish[aria-pressed="true"] svg {
	fill: var(--em-ink);
}

.em-card__meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.em-card__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.em-card__name {
	font: 400 15px/24px var(--em-sans);
	color: var(--em-ink);
}

.em-card__price {
	font: 400 15px/24px var(--em-sans);
	color: var(--em-mute);
	white-space: nowrap;
}

.em-card__swatches {
	display: flex;
	gap: 8px;
	align-items: center;
	height: 16px;
	opacity: .55;
	transition: opacity 280ms ease-out;
}

.em-card:hover .em-card__swatches {
	opacity: 1;
}

.em-swatch {
	width: 14px;
	height: 14px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .14);
}

.em-card__extra {
	font: 500 11px/14px var(--em-sans);
	letter-spacing: .06em;
	color: var(--em-mute);
}

/* ==========================================================================
   4 · CATEGORY SPLIT
   ========================================================================== */

.em-split {
	background: var(--em-white);
	padding: 0 var(--em-gutter) clamp(72px, 10vw, 128px);
}

.em-split__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.em-split__tile {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	color: var(--em-white);
}

.em-split__tile:hover {
	color: var(--em-white);
}

.em-split__tile--women { background: var(--em-tile-women); }
.em-split__tile--men   { background: var(--em-tile-men); }

.em-split__tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(.2, 0, 0, 1);
}

.em-split__tile:hover img {
	transform: scale(1.03);
}

.em-split__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 10, .5), transparent 60%);
	pointer-events: none;
}

.em-split__copy {
	position: relative;
	padding: clamp(24px, 3vw, 44px);
	display: block;
}

.em-split__copy .em-eyebrow {
	display: block;
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .72);
	margin-bottom: 10px;
}

.em-split__title {
	display: block;
	font-family: var(--em-display);
	font-weight: 400;
	font-size: clamp(28px, 3vw, 44px);
	line-height: 1;
	letter-spacing: -.02em;
}

/* ==========================================================================
   5 · PILLARS
   ========================================================================== */

.em-pillars {
	background: var(--em-ink);
	color: var(--em-white);
	padding: clamp(72px, 10vw, 128px) var(--em-gutter);
}

.em-pillars__eyebrow {
	color: rgba(255, 255, 255, .6);
	margin-bottom: 48px;
}

.em-pillars__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(32px, 4vw, 64px);
}

.em-pillar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.em-pillar__title {
	margin: 0;
	font-family: var(--em-display);
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.1;
	letter-spacing: -.015em;
}

.em-pillar__body {
	margin: 0;
	font: 400 15px/24px var(--em-sans);
	color: rgba(255, 255, 255, .7);
	text-wrap: pretty;
}

/* ==========================================================================
   6 · EDITORIAL FULL-BLEED
   ========================================================================== */

.em-editorial {
	position: relative;
	width: 100%;
	height: 70vh;
	min-height: 480px;
	overflow: hidden;
	background: var(--em-tile-women);
}

.em-editorial__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.em-editorial__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(10, 10, 10, .5), transparent 60%);
	pointer-events: none;
}

.em-editorial__inner {
	position: relative;
	max-width: var(--em-shell);
	height: 100%;
	margin: 0 auto;
	padding: 0 var(--em-gutter);
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--em-white);
}

.em-editorial__quote {
	margin: 0;
	max-width: 620px;
	font-family: var(--em-serif);
	font-weight: 400;
	font-size: clamp(24px, 3.2vw, 40px);
	line-height: 1.16;
	letter-spacing: -.01em;
	text-wrap: pretty;
}

/* ==========================================================================
   7 · NEWSLETTER
   ========================================================================== */

.em-newsletter {
	background: var(--em-cream);
	padding: clamp(88px, 12vw, 160px) var(--em-gutter);
}

.em-newsletter__inner {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.em-newsletter__title {
	margin: 0 0 32px;
	font-family: var(--em-display);
	font-weight: 400;
	font-size: clamp(22px, 2.6vw, 28px);
	line-height: 1.2;
	letter-spacing: -.015em;
}

.em-newsletter__form {
	display: flex;
	align-items: center;
	gap: 16px;
	border-bottom: 1px solid var(--em-rule);
	padding-bottom: 12px;
	max-width: 440px;
	margin: 0 auto;
}

.em-newsletter__input {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	outline: none;
	font: 400 15px/24px var(--em-sans);
	color: var(--em-ink);
}

.em-newsletter__input::placeholder {
	color: var(--em-mute);
}

.em-newsletter__submit {
	background: none;
	border: none;
	cursor: pointer;
	font: 500 13px/1 var(--em-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--em-ink);
	white-space: nowrap;
	border-bottom: 1px solid var(--em-ink);
	padding: 0 0 2px;
}

.em-newsletter__notice {
	margin: 20px 0 0;
	font: 400 14px/20px var(--em-sans);
	color: var(--em-ink-soft);
	animation: lpFade 300ms ease-out both;
}

.em-newsletter__notice.is-error {
	color: #8A2B2B;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.em-footer {
	background: var(--em-ink);
	color: var(--em-white);
	padding: clamp(64px, 8vw, 96px) var(--em-gutter) 40px;
}

.em-footer__inner {
	max-width: var(--em-shell);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	flex-wrap: wrap;
}

.em-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 280px;
}

.em-footer__logo {
	display: block;
	height: 32px;
	width: 43.8px;
	background-image: url('../img/em-mark-paper.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.em-footer__tagline {
	margin: 0;
	font: 400 13px/20px var(--em-sans);
	color: rgba(255, 255, 255, .6);
}

.em-footer__cta {
	font: 500 12px/1 var(--em-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--em-white);
	border-bottom: 1px solid rgba(255, 255, 255, .5);
	padding-bottom: 3px;
	align-self: flex-start;
}

.em-footer__cta:hover {
	color: var(--em-white);
	border-bottom-color: var(--em-white);
}

.em-footer__cols {
	display: flex;
	gap: clamp(32px, 5vw, 72px);
	flex-wrap: wrap;
}

.em-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* wp_nav_menu imprime <li>; los aplanamos para igualar el diseño. */
.em-footer__col li {
	list-style: none;
	margin: 0;
}

.em-footer__heading {
	font: 500 10px/12px var(--em-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 4px;
}

.em-footer__col a {
	font: 400 14px/20px var(--em-sans);
	color: rgba(255, 255, 255, .82);
}

.em-footer__col a:hover {
	color: var(--em-white);
}

.em-footer__legal {
	max-width: var(--em-shell);
	margin: 56px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 20px;
}

.em-footer__legal span {
	font: 500 10px/12px var(--em-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

.em-footer__social {
	display: flex;
	align-items: center;
	gap: 18px;
}

.em-footer__social a {
	display: inline-flex;
	color: rgba(255, 255, 255, .55);
	transition: color 180ms ease-out;
}

.em-footer__social a:hover,
.em-footer__social a:focus-visible {
	color: var(--em-white);
}

/* ==========================================================================
   MENÚ MÓVIL (overlay a pantalla completa)
   Medidas tomadas de EM Mobile.dc.html · sección "02 · Menu — full-screen".
   ========================================================================== */

/* Hamburguesa y bolsa: solo existen en móvil. */
.em-nav__burger,
.em-nav__bag {
	display: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: inherit;
	align-items: center;
}

.em-menu {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--em-white);
	color: var(--em-ink);
	overflow-y: auto;
	overscroll-behavior: contain;
	animation: lpFade 200ms ease-out both;
}

.em-menu[hidden] {
	display: none;
}

.em-menu__bar {
	height: 52px;
	margin-top: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
}

.em-menu__logo {
	display: block;
	height: 22px;
	width: 30px;
	background-image: url('../img/em-mark-ink.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.em-menu__close {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--em-ink);
	display: flex;
}

.em-menu__primary {
	padding: 32px 24px 0;
	display: flex;
	flex-direction: column;
}

.em-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #E4E1DE;
	padding: 22px 0;
	font-family: var(--em-display);
	font-weight: 400;
	font-size: 32px;
	letter-spacing: -.025em;
	color: var(--em-ink);
}

.em-menu__secondary {
	padding: 40px 24px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.em-menu__secondary a {
	font: 400 15px/24px var(--em-sans);
	color: var(--em-ink-soft);
}

.em-menu__social {
	padding: 0 24px 40px;
	display: flex;
	gap: 24px;
}

.em-menu__social a {
	font: 500 11px/14px var(--em-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--em-mute);
}

/* Bloquea el scroll del fondo mientras el menú está abierto. */
body.em-menu-open {
	overflow: hidden;
}

/* ==========================================================================
   RESPONSIVE
   El layout móvil sigue los patrones de EM Mobile.dc.html · "01 · Home":
   categorías apiladas a 360px, grid de producto a 2 columnas
   (column-gap 12px / row-gap 32px), gutter de 20-24px y botones a ancho
   completo de 52px.
   ========================================================================== */

@media (max-width: 1100px) {
	.em-grid-4 {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.em-pillars__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	/* La nav pasa a: hamburguesa · logo · bolsa. */
	.em-nav__links,
	.em-nav__cta {
		display: none;
	}

	.em-nav__burger,
	.em-nav__bag {
		display: flex;
	}

	.em-nav__inner {
		height: 56px;
		padding: 0 20px;
	}

	/* Categorías apiladas, alto fijo — no aspect-ratio. */
	.em-split__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.em-split {
		padding-left: 0;
		padding-right: 0;
	}

	.em-split__tile {
		aspect-ratio: auto;
		height: 360px;
	}

	.em-split__copy {
		padding: 24px 20px;
	}
}

@media (max-width: 560px) {
	/* 2 columnas en móvil, como el bloque "best sellers 2-col". */
	.em-grid-4 {
		grid-template-columns: 1fr 1fr;
		column-gap: 12px;
		row-gap: 32px;
	}

	/* Sin hover en táctil: fuera la wishlist. */
	.em-card__wish {
		display: none;
	}

	/* Nombre y precio apilados, no en la misma fila. */
	.em-card__meta {
		gap: 6px;
	}

	.em-card__row {
		flex-direction: column;
		gap: 6px;
	}

	.em-card__name,
	.em-card__price {
		font: 400 13px/18px var(--em-sans);
	}

	.em-card__badge {
		top: 8px;
		left: 8px;
		font: 500 9px/12px var(--em-sans);
		letter-spacing: .1em;
		padding: 4px 7px;
	}

	.em-card__swatches {
		opacity: 1;
		gap: 6px;
		margin-top: 2px;
	}

	.em-manifesto {
		padding: 80px 24px;
	}

	.em-manifesto__text {
		font-size: 28px;
		line-height: 1.12;
	}

	.em-hero__actions {
		gap: 12px;
	}

	.em-hero__actions .em-btn {
		width: 100%;
		height: 52px;
		padding: 0 20px;
		justify-content: center;
	}

	.em-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}