/* ==========================================================================
   Almacén Ibérico — HOME (styles/home.css)
   Port 1:1 del diseño React/Tailwind de /project a CSS plano.
   La encolan front-page.php y el resto de plantillas del sistema.

   Paleta (tailwind.config.js):
     iberico-50 #faf7f2 · 100 #f1ebe0 · 200 #e3d6bf · 400 #b6935f ·
     500 #a07a44 · 600 #87632f · 700 #6e4f27 · 800 #4f3820
     accent-50 #f7f1ec · 300 #c9a584 · 500 #9a6b3f · 600 #7f5630 · 700 #654224
     ink-900 #1c1814 · 800 #2a241d · parchment #faf7f2
   Tipos: Lora (serif, títulos) · Inter (sans, texto)
   Breakpoints: sm 640px · lg 1024px
   ========================================================================== */

.aih {
	--ib-50: #faf7f2;
	--ib-100: #f1ebe0;
	--ib-200: #e3d6bf;
	--ib-400: #b6935f;
	--ib-500: #a07a44;
	--ib-600: #87632f;
	--ib-700: #6e4f27;
	--ib-800: #4f3820;
	--ac-50: #f7f1ec;
	--ac-300: #c9a584;
	--ac-500: #9a6b3f;
	--ac-600: #7f5630;
	--ac-700: #654224;
	--ink: #1c1814;
	--ink-800: #2a241d;
	--parchment: #faf7f2;
	--serif: 'Lora', Georgia, serif;
	--sans: 'Inter', system-ui, sans-serif;
	--sh-soft: 0 1px 3px rgba(28,24,20,.04), 0 1px 2px rgba(28,24,20,.03);
	--sh-lift: 0 12px 32px rgba(28,24,20,.08);
	--sh-accent: 0 8px 24px rgba(154,107,63,.18);

	font-family: var(--sans);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	line-height: 1.5;
}
.aih ::selection { background: rgba(154,107,63,.2); color: var(--ink); }

/* Ocultar título/cabecera de página del tema (el H1 vive en el hero) */
body.home.page .ct-page-title,
body.home.page .entry-header,
body.home.page .hero-section { display: none; }
body.home.page .ct-container > article > .entry-content,
body.home.page article .entry-content { margin: 0; }

/* ── Layout base ── */
.aih-wrap { margin-inline: auto; width: 100%; max-width: 1240px; padding-inline: 20px; }
.aih section, .aih-sec { width: 100vw; margin-left: calc(50% - 50vw); } /* full-bleed dentro del contenedor del tema */
.aih-sec { padding-block: 3.5rem; }
.aih-sec--white { background: #fff; }
.aih-sec--parchment { background: rgba(250,247,242,.4); }
.aih-sec--brands { background: #fff; border-block: 1px solid var(--ib-100); padding-block: 3.5rem; }

/* ── Tipografía ── */
.aih h1, .aih h2, .aih h3, .aih h4 { font-family: var(--serif); margin: 0; }
.aih p { margin: 0; }
.aih a { text-decoration: none; }

.aih-eyebrow {
	display: block;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .22em;
	color: var(--ac-600);
	font-weight: 500;
}
.aih-head { text-align: center; margin-bottom: 2.5rem; }
.aih-head--tight { margin-bottom: 2rem; }
.aih-head h2, .aih-head .aih-h3-as-h2 {
	margin-top: .75rem;
	font-size: 1.875rem;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.1;
	text-wrap: balance;
}
.aih-head p {
	margin: 1rem auto 0;
	max-width: 42rem;
	color: var(--ib-700);
	font-size: 1rem;
	line-height: 1.625;
}
.aih-head--left { text-align: center; margin-bottom: 0; }
.aih .aih-h2-sm { font-size: 1.5rem; }
.aih .aih-h2-md { font-size: 1.875rem; }

/* ── Iconos ── */
.aih-i-xs { width: .875rem; height: .875rem; flex: none; }
.aih-i-sm { width: 1rem;   height: 1rem;    flex: none; }
.aih-i-md { width: 1.25rem; height: 1.25rem; flex: none; }

/* ── Botones ── */
.aih-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .875rem 1.75rem;
	border-radius: 9999px;
	font-family: var(--sans);
	font-weight: 600;
	font-size: .875rem;
	letter-spacing: .025em;
	line-height: 1.25;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	cursor: pointer;
}
.aih-btn__arrow { transition: transform .2s ease; }
.aih-btn:hover .aih-btn__arrow { transform: translateX(4px); }
.aih-btn--accent { background: var(--ac-500); color: #fff; box-shadow: var(--sh-accent); }
.aih-btn--accent:hover { background: var(--ac-600); color: #fff; }
.aih-btn--ghost { border: 1px solid rgba(255,255,255,.4); color: #fff; }
.aih-btn--ghost:hover { background: #fff; color: var(--ink); }
.aih-btn--ink { background: var(--ink); color: #fff; }
.aih-btn--ink:hover { background: var(--ink-800); color: #fff; }
.aih-btn--outline { border: 1px solid var(--ib-200); color: var(--ink); }
.aih-btn--outline:hover { background: var(--ib-50); color: var(--ink); }

.aih-cta-row { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; }

/* ── Animaciones de entrada ── */
@keyframes aih-fade-up {
	0%   { opacity: 0; transform: translateY(24px); }
	100% { opacity: 1; transform: translateY(0); }
}
.aih-fade-up { animation: aih-fade-up .7s ease-out both; }
.aih-d1 { animation-delay: .05s; }
.aih-d2 { animation-delay: .12s; }
.aih-d3 { animation-delay: .18s; }

/* ==========================================================================
   HERO
   ========================================================================== */
.aih-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.aih-hero__bg { position: absolute; inset: 0; z-index: -1; }
.aih-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.aih-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(28,24,20,.85), rgba(28,24,20,.7) 50%, rgba(28,24,20,.9));
}
/* Altura del hero: compacto en móvil, ~600px en escritorio (ver media queries) */
.aih-hero__content {
	padding-block: 2rem;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
}

.aih-hero__rating {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .375rem 1rem;
	border-radius: 9999px;
	border: 1px solid rgba(201,165,132,.5);
	background: rgba(28,24,20,.3);
	backdrop-filter: blur(4px);
	margin-bottom: 1rem;
	font-size: .75rem;
	letter-spacing: .025em;
	color: rgba(255,255,255,.9);
}
.aih-hero__stars { display: inline-flex; gap: .125rem; color: var(--ac-300); }

.aih-hero h1 {
	font-size: 1.875rem;
	font-weight: 600;
	line-height: 1.1;
	text-wrap: balance;
	color: #fff;
}
.aih-hero h1 span { display: block; color: var(--ac-300); margin-top: .25rem; }

.aih-hero__lead {
	margin: .875rem auto 0;
	max-width: 42rem;
	font-size: .875rem;
	line-height: 1.55;
	color: rgba(255,255,255,.85);
	text-wrap: balance;
}
/* El lead puede venir como HTML (<p>) desde seo-category.php */
.aih-hero__lead p { margin: 0 0 .625rem; font-size: inherit; line-height: inherit; color: inherit; }
.aih-hero__lead p:last-child { margin-bottom: 0; }
.aih-hero__lead strong { color: #fff; }
.aih-hero__ctas {
	margin-top: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
}
.aih-hero__ctas .aih-btn { width: 100%; }

/* Barra de confianza bajo el hero */
.aih-trust { position: relative; background: #fff; border-top: 1px solid var(--ib-100); }
.aih-trust__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aih-trust__item { display: flex; align-items: center; gap: .875rem; padding: 1.25rem 1rem; min-width: 0; }
.aih-trust__item:nth-child(-n+2) { border-bottom: 1px solid var(--ib-100); }
.aih-trust__icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background: var(--ib-50);
	color: var(--ac-600);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.aih-trust__item strong { display: block; font-size: .875rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.aih-trust__item small { display: block; font-size: .75rem; color: var(--ib-600); margin-top: .125rem; line-height: 1.25; }

/* ==========================================================================
   CATEGORÍAS (círculos)
   ========================================================================== */
.aih-cats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}
.aih-cat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.aih-cat__img {
	position: relative;
	width: 5rem;
	height: 5rem;
	border-radius: 9999px;
	overflow: hidden;
	box-shadow: var(--sh-soft), 0 0 0 1px var(--ib-200);
	transition: box-shadow .5s ease, transform .5s ease;
}
.aih-cat:hover .aih-cat__img {
	box-shadow: var(--sh-lift), 0 0 0 1px rgba(154,107,63,.6);
	transform: translateY(-4px);
}
.aih-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.aih-cat:hover .aih-cat__img img { transform: scale(1.1); }
.aih-cat__title {
	margin-top: .75rem;
	font-family: var(--serif);
	font-size: .875rem;
	font-weight: 500;
	color: var(--ink);
	transition: color .2s ease;
}
.aih-cat:hover .aih-cat__title { color: var(--ac-600); }

/* ==========================================================================
   CARRUSELES (drag + snap; JS en home.js)
   ========================================================================== */
.aih-head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}
.aih-head-row .aih-head--left { width: 100%; }

.aih-nav-btns { display: none; align-items: center; gap: .5rem; flex: none; }
.aih-nav-btns--end { justify-content: flex-end; margin-bottom: 1rem; }
.aih-nav-btn {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 9999px;
	border: 1px solid var(--ib-200);
	background: transparent;
	color: var(--ink-800);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.aih-nav-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.aih-car { overflow: hidden; }
.aih-car__track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0 .25rem .5rem;
	margin-inline: -.25rem;
	cursor: grab;
	touch-action: pan-x pan-y;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.aih-car__track::-webkit-scrollbar { display: none; }
.aih-car__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.aih-car__item { scroll-snap-align: start; flex: none; }
.aih-car__item--product { width: 46%; }
.aih-car__item--review { width: 80%; }

/* Barrita de progreso (móvil): aparece al desplazar, se desvanece al parar.
   La crea home.js; en escritorio (con flechas) queda oculta. */
.aih-car__bar {
	height: 3px;
	margin-top: .5rem;
	border-radius: 9999px;
	background: var(--ib-100);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
.aih-car.is-scrolling .aih-car__bar { opacity: 1; }
.aih-car__bar-thumb {
	height: 100%;
	width: 20%;
	border-radius: 9999px;
	background: var(--ac-500);
	transform: translateX(0);
	will-change: transform;
}

/* ==========================================================================
   TARJETAS (producto / viral / blog)
   ========================================================================== */
.aih-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border-radius: 1rem;
	overflow: hidden;
	border: 1px solid var(--ib-100);
	box-shadow: var(--sh-soft);
	transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.aih-card:hover {
	box-shadow: var(--sh-lift);
	border-color: rgba(154,107,63,.4);
	transform: translateY(-4px);
}
.aih-card__media { position: relative; display: block; overflow: hidden; background: var(--parchment); }
.aih-card__media--sq   { aspect-ratio: 1; }
.aih-card__media--43   { aspect-ratio: 4 / 3; }
.aih-card__media--1610 { aspect-ratio: 16 / 10; }
.aih-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.aih-card:hover .aih-card__media img { transform: scale(1.05); }

.aih-chip {
	position: absolute;
	top: .75rem;
	left: .75rem;
	padding: .25rem .625rem;
	border-radius: 9999px;
	font-size: .625rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
}
/* Fondos SÓLIDOS: con transparencia sobre foto, Lighthouse no puede
   garantizar el contraste y lo marca como error. */
.aih-chip--dark { background: #1c1814; color: #ffffff; }
.aih-chip--light { background: #ffffff; color: var(--ink); }
/* La etiqueta "Directo del productor" solo se muestra en escritorio:
   en móvil tapaba la foto de la tarjeta. */
.aih-chip--dark { display: none; }

.aih-card__body { display: flex; flex-direction: column; flex: 1; padding: 1rem; }
/* Contraste AA (Lighthouse): etiquetas pequeñas en --ib-700 (7:1), no --ib-500 */
.aih-card__cat { font-size: .625rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ib-700); font-weight: 600; }
.aih-card__cat + .aih-card__title { margin-top: .25rem; }
.aih-card__title {
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 500;
	color: var(--ink);
	line-height: 1.375;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .2s ease;
}
.aih-card:hover .aih-card__title { color: var(--ac-600); }
.aih-card__meta { font-size: .75rem; color: var(--ib-700); margin-bottom: .5rem; }
.aih-card__excerpt {
	margin-top: .5rem;
	font-size: .875rem;
	color: var(--ib-700);
	line-height: 1.625;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.aih-card__link {
	margin-top: 1rem;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .875rem;
	font-weight: 500;
	color: var(--ac-600);
	transition: gap .2s ease;
}
.aih-card:hover .aih-card__link { gap: .5rem; }

.aih-card__foot {
	margin-top: auto;
	padding-top: 1rem;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
.aih-card__from { display: block; font-size: .625rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ib-700); font-weight: 600; }
.aih-card__price { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.aih-card__go {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	background: var(--ib-50);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s ease, color .2s ease;
}
.aih-card:hover .aih-card__go { background: var(--ac-500); color: #fff; }

.aih-card__badges {
	margin-top: .75rem;
	padding-top: .75rem;
	border-top: 1px solid var(--ib-100);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}
.aih-pill {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .25rem .625rem;
	border-radius: 9999px;
	font-size: .625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.aih-pill--tag { background: var(--ac-50); color: var(--ac-700); }

/* Grid de virales */
.aih-viral {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
/* Fotos de virales SIN recortar: el producto entero, encajado en la tarjeta */
.aih-viral .aih-card__media img {
	object-fit: contain;
	padding: .625rem;
}
.aih-viral .aih-card:hover .aih-card__media img { transform: scale(1.03); }

/* ==========================================================================
   SECCIONES PARTIDAS (cestas / jamón bridge / artesanos)
   ========================================================================== */
.aih-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
	margin-top: .5rem;
}
.aih-split--top { align-items: center; }
.aih-split__media { position: relative; }
.aih-split__frame { display: block; border-radius: 1.5rem; overflow: hidden; box-shadow: var(--sh-lift); }
/* Cestas de regalo. En móvil el marco ocupa el ancho completo: con la
   proporción vertical 4/5 que había antes, en una pantalla de 390px la foto
   medía ~490px de alto y se comía la pantalla entera de golpe. 4/3 la deja
   en ~290px, se ve completa y el texto de al lado entra sin scroll extra.
   A partir de 640px vuelve a 5/4 (ver bloque responsive). */
.aih-split__frame--basket { aspect-ratio: 4 / 3; }
.aih-split__frame--43 { aspect-ratio: 4 / 3; }
.aih-split__frame img { width: 100%; height: 100%; object-fit: cover; }
/* Foto a proporción natural (jamón bridge): sin recorte alguno */
.aih-split__frame--natural { aspect-ratio: auto; }
.aih-split__frame--natural img { height: auto; object-fit: unset; display: block; }

.aih-badge-float {
	position: absolute;
	bottom: -1.25rem;
	right: -.75rem;
	background: #fff;
	border-radius: 1rem;
	box-shadow: var(--sh-lift);
	border: 1px solid var(--ib-100);
	padding: 1rem 1.25rem;
}
.aih-badge-float__num { display: block; font-family: var(--serif); font-size: 1.875rem; color: var(--ac-600); font-weight: 600; line-height: 1; }
.aih-badge-float__txt { display: block; font-size: .75rem; color: var(--ib-700); margin-top: .25rem; line-height: 1.35; }

.aih-checklist { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .875rem; }
.aih-checklist li { display: flex; align-items: flex-start; gap: .75rem; color: var(--ink-800); font-size: .875rem; }
.aih-checklist li::before {
	content: '';
	margin-top: .375rem;
	width: .375rem;
	height: .375rem;
	border-radius: 9999px;
	background: var(--ac-500);
	flex: none;
}
.aih-prose { color: var(--ib-700); font-size: 1rem; line-height: 1.625; }

/* Mosaico de artesanos */
.aih-mosaic-wrap { position: relative; }
.aih-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.aih-mosaic__col { display: grid; gap: .75rem; align-content: start; }
.aih-mosaic__col--pad { padding-top: 1.5rem; }
.aih-mosaic img { width: 100%; border-radius: 1rem; box-shadow: var(--sh-soft); object-fit: cover; display: block; }
.aih-mosaic__tall { aspect-ratio: 3 / 4; }
.aih-mosaic__sq { aspect-ratio: 1; }
.aih-mosaic__tag {
	position: absolute;
	bottom: -1rem;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	color: var(--ink);
	border-radius: 9999px;
	padding: .625rem 1.25rem;
	font-size: .75rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	font-weight: 500;
	box-shadow: var(--sh-lift);
	white-space: nowrap;
	border: 1px solid var(--ib-100);
}

.aih-pillars { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.aih-pillar { display: flex; gap: .875rem; }
.aih-pillar__icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background: var(--ib-50);
	color: var(--ac-600);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.aih-pillar h3 { font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--ink); }
.aih-pillar p { margin-top: .25rem; font-size: .875rem; color: var(--ib-700); line-height: 1.625; }

/* ==========================================================================
   OPINIONES
   ========================================================================== */
.aih-rating-pill-wrap { text-align: center; margin-bottom: 2rem; }
.aih-rating-pill {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	padding: .625rem 1.25rem;
	border-radius: 9999px;
	background: var(--ac-50);
	border: 1px solid rgba(201,165,132,.4);
	font-size: .875rem;
	font-weight: 500;
	color: var(--ink);
}
.aih-rating-pill__stars { display: inline-flex; gap: .25rem; color: var(--ac-500); }

.aih-review {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	background: #fff;
	border-radius: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--ib-100);
	box-shadow: var(--sh-soft);
}
.aih-review__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.aih-review__avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background: var(--ink);
	color: #fff;
	font-family: var(--serif);
	font-size: 1.125rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.aih-review__who { min-width: 0; }
.aih-review__who strong { display: block; font-size: .875rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aih-review__who small { font-size: .75rem; color: var(--ib-600); }
.aih-review__stars { margin-left: auto; display: inline-flex; gap: .125rem; color: var(--ac-500); flex: none; }
.aih-review blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--ink-800);
	font-size: .875rem;
	line-height: 1.625;
	flex: 1;
}
.aih-review__quote { display: inline; color: rgba(154,107,63,.6); margin-right: .25rem; vertical-align: -2px; }
.aih-review__foot {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ib-100);
	display: flex;
	align-items: center;
	gap: .75rem;
}
.aih-review__foot img { width: 2.5rem; height: 2.5rem; border-radius: .5rem; object-fit: cover; }
.aih-review__foot a { font-size: .75rem; color: var(--ib-700); text-underline-offset: 2px; transition: color .2s ease; }
.aih-review__foot a:hover { color: var(--ac-600); text-decoration: underline; }

.aih-note {
	margin: 1.5rem auto 0;
	max-width: 48rem;
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	color: var(--ib-500);
}
.aih-note svg { margin-top: .125rem; }
.aih-note p { font-size: .75rem; color: var(--ib-600); line-height: 1.625; }

/* ==========================================================================
   MARCAS — MARQUEE
   ========================================================================== */
@keyframes aih-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.aih-marquee-clip {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
	mask-image: linear-gradient(to right, black 80%, transparent 100%);
}
.aih-marquee {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	width: max-content;
	animation: aih-marquee 40s linear infinite;
}
.aih-brand {
	flex: none;
	width: 7rem;
	height: 7rem;
	border-radius: 1rem;
	background: #fff;
	border: 1px solid var(--ib-100);
	box-shadow: var(--sh-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	filter: grayscale(1);
	transition: filter .5s ease;
}
.aih-brand:hover { filter: grayscale(0); }
.aih-brand img { width: 100%; height: 100%; object-fit: contain; }

/* ==========================================================================
   CONTENIDO SEO + BLOG
   ========================================================================== */
.aih-seo-text { max-width: 56rem; margin-inline: auto; display: grid; gap: 1.25rem; }
.aih-seo-text p { color: var(--ib-800, #4f3820); font-size: .9375rem; line-height: 1.625; }
.aih-seo-text strong { color: var(--ink); }
.aih-blog { margin-top: 3rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.aih-faq { display: grid; grid-template-columns: 1fr; column-gap: 3rem; }
.aih-faq__item { border-bottom: 1px solid var(--ib-100); }
.aih-faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
}
.aih-faq__q > span:first-child {
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 500;
	color: var(--ink);
	transition: color .2s ease;
}
.aih-faq__q:hover > span:first-child { color: var(--ac-600); }
.aih-faq__toggle {
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	background: var(--ib-50);
	color: var(--ink-800);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s ease, color .2s ease;
}
.aih-faq__item.is-open .aih-faq__toggle { background: var(--ac-500); color: #fff; }
.aih-faq__plus  { display: block; }
.aih-faq__minus { display: none; }
.aih-faq__item.is-open .aih-faq__plus  { display: none; }
.aih-faq__item.is-open .aih-faq__minus { display: block; }

.aih-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows .3s ease, opacity .3s ease, padding-bottom .3s ease;
}
.aih-faq__item.is-open .aih-faq__a { grid-template-rows: 1fr; opacity: 1; padding-bottom: 1.25rem; }
.aih-faq__a-inner { overflow: hidden; }
.aih-faq__a p { color: var(--ib-700); font-size: .875rem; line-height: 1.625; padding-right: 3rem; }

/* ==========================================================================
   MARKETPLACES
   ========================================================================== */
.aih-markets {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	max-width: 56rem;
	margin-inline: auto;
}
.aih-market {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	border-radius: 1rem;
	background: #fff;
	border: 1px solid var(--ib-100);
	box-shadow: var(--sh-soft);
	transition: box-shadow .3s ease, border-color .3s ease;
}
.aih-market:hover { box-shadow: var(--sh-lift); border-color: rgba(154,107,63,.4); }
.aih-market__icon {
	width: 3rem;
	height: 3rem;
	border-radius: .75rem;
	background: var(--ink);
	color: #fff;
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.aih-market__body { flex: 1; min-width: 0; }
.aih-market__body strong { display: block; font-family: var(--serif); font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.aih-market__body small { display: block; font-size: .75rem; color: var(--ib-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aih-market__arrow { color: var(--ib-400); transition: color .2s ease; }
.aih-market:hover .aih-market__arrow { color: var(--ac-600); }

/* ==========================================================================
   RESPONSIVE — sm ≥640px
   ========================================================================== */
@media (min-width: 640px) {
	.aih-wrap { padding-inline: 24px; }
	.aih-sec { padding-block: 5rem; }
	.aih-sec--brands { padding-block: 4rem; }

	.aih-head h2 { font-size: 2.25rem; }
	.aih .aih-h2-sm { font-size: 1.875rem; }
	.aih .aih-h2-md { font-size: 2.25rem; }
	.aih-head p { font-size: 1.125rem; }

	.aih-hero__content { padding-block: 3rem; min-height: 420px; }
	.aih-hero h1 { font-size: 3rem; }
	.aih-hero__lead { font-size: 1.0625rem; margin-top: 1.25rem; }
	.aih-hero__rating { margin-bottom: 1.5rem; }
	.aih-hero__ctas { flex-direction: row; margin-top: 2rem; }
	.aih-hero__ctas .aih-btn { width: auto; }
	.aih-trust__item { padding-block: 1.5rem; }

	/* Etiqueta "Directo del productor": solo escritorio/tablet */
	.aih-chip--dark { display: inline-block; }

	/* La barrita de scroll solo aporta en móvil */
	.aih-car__bar { display: none; }

	.aih-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
	.aih-cat__img { width: 7rem; height: 7rem; }
	.aih-cat__title { font-size: 1rem; margin-top: 1rem; }

	.aih-nav-btns { display: flex; }
	.aih-head-row .aih-head--left { width: auto; text-align: left; }
	.aih-car__track { gap: 1.25rem; }
	.aih-car__item--product { width: 31%; }
	.aih-car__item--review { width: 45%; }

	.aih-card__body { padding: 1.25rem; }
	.aih-card__title { font-size: 1.125rem; }
	.aih-card__price { font-size: 1.5rem; }
	.aih-viral { gap: 1.25rem; }

	.aih-split { gap: 2rem; }
	.aih-split__frame--basket { aspect-ratio: 5 / 4; }
	.aih-badge-float { right: -1.25rem; }
	.aih-checklist li { font-size: 1rem; }
	.aih-prose { font-size: 1.125rem; }
	.aih-mosaic { gap: 1rem; }
	.aih-mosaic__col { gap: 1rem; }
	.aih-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.aih-review { padding: 1.5rem; }
	.aih-review blockquote { font-size: .9375rem; }

	.aih-marquee { gap: 2.5rem; }
	.aih-brand { width: 9rem; height: 9rem; }

	.aih-seo-text p { font-size: 1rem; }
	.aih-faq__q > span:first-child { font-size: 1.125rem; }
	.aih-faq__a p { font-size: 1rem; }

	.aih-markets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   RESPONSIVE — lg ≥1024px
   ========================================================================== */
@media (min-width: 1024px) {
	.aih-wrap { padding-inline: 32px; }
	.aih-sec { padding-block: 6rem; }
	.aih-sec--brands { padding-block: 5rem; }

	.aih-head h2 { font-size: 3rem; }
	.aih .aih-h2-sm { font-size: 2.25rem; }

	/* Hero ≈600px de alto total en escritorio */
	.aih-hero__content { padding-block: 3.5rem; min-height: 600px; }
	.aih-hero h1 { font-size: 4rem; }
	.aih-hero__lead { font-size: 1.1875rem; }
	.aih-trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.aih-trust__item:nth-child(-n+2) { border-bottom: 0; }
	.aih-trust__item:not(:last-child) { border-right: 1px solid var(--ib-100); }

	.aih-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2rem; }
	.aih-cat__img { width: 9rem; height: 9rem; }
	.aih-cat__title { font-size: 1.125rem; }

	.aih-car__item--product { width: 23.5%; }
	.aih-car__item--review { width: 31%; }

	.aih-viral { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	/* FAQ a dos columnas (4 + 4) en escritorio */
	.aih-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.aih-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
	.aih-split--top { gap: 4rem; }
	.aih-pillars { margin-top: 0; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.aih *, .aih *::before, .aih *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.aih-marquee { animation: none; }
}

/* ==========================================================================
   PANTALLAS TÁCTILES — NEUTRALIZAR EL :hover PEGADO
   ==========================================================================
   En un móvil no existe "pasar el ratón por encima": al tocar una tarjeta el
   navegador aplica igualmente el estado :hover y lo DEJA PUESTO hasta que se
   toca en otro sitio. Con las transiciones del diseño (la imagen hace zoom en
   .7s y la tarjeta se eleva) el resultado era que, al pulsar, se veía una
   animación lenta antes de que la página cambiara: parecía que la web tardaba
   en responder. En escritorio no pasa y por eso allí se veía perfecto.

   Aquí no se toca ninguna regla original: solo se anulan sus efectos cuando
   el dispositivo NO tiene puntero capaz de hover, y se sustituyen por una
   respuesta inmediata al pulsar (:active, 120ms). Para revertir, basta con
   borrar este bloque entero.
   ========================================================================== */
@media (hover: none) {

	/* — Tarjetas (producto, viral, blog, cross-sell) — */
	.aih-card:hover {
		box-shadow: var(--sh-soft);
		border-color: var(--ib-100);
		transform: none;
	}
	.aih-card:hover .aih-card__media img { transform: none; }
	.aih-viral .aih-card:hover .aih-card__media img { transform: none; }
	.aih-card:hover .aih-card__title { color: var(--ink); }
	.aih-card:hover .aih-card__link { gap: .25rem; }
	.aih-card:hover .aih-card__go { background: transparent; color: inherit; }

	/* Respuesta inmediata al dedo, en lugar del hover pegado. */
	.aih-card { transition: transform .12s ease, box-shadow .12s ease; }
	.aih-card:active { transform: scale(.985); box-shadow: var(--sh-soft); }
	.aih-card__media img { transition: none; }

	/* — Círculos de categoría — */
	.aih-cat:hover .aih-cat__img {
		box-shadow: var(--sh-soft), 0 0 0 1px var(--ib-200);
		transform: none;
	}
	.aih-cat:hover .aih-cat__img img { transform: none; }
	.aih-cat:hover .aih-cat__title { color: var(--ink); }
	.aih-cat__img { transition: transform .12s ease; }
	.aih-cat:active .aih-cat__img { transform: scale(.96); }
	.aih-cat__img img { transition: none; }

	/* — Marketplaces — */
	.aih-market:hover { box-shadow: var(--sh-soft); border-color: var(--ib-100); }
	.aih-market:hover .aih-market__arrow { color: inherit; }

	/* — Marcas del marquee: en móvil se quedaban a color al tocarlas — */
	.aih-brand:hover { filter: grayscale(1); }

	/* — FAQ: el color de hover se quedaba fijo en la pregunta pulsada — */
	.aih-faq__q:hover > span:first-child { color: inherit; }

	/* — Botones: la flecha se quedaba desplazada tras pulsar — */
	.aih-btn:hover .aih-btn__arrow { transform: none; }
}