/**
 * Cuponia — Sistema editorial.
 * Sin gradientes, sin glows, sin sombras, sin pills, sin blur, sin rebotes.
 * La jerarquía se construye con tipografía, espacio y filete.
 */

/* ── Reset ─────────────────────────────────────────────── */

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

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--cp-bg);
	color: var(--cp-ink);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.021em;
	margin: 0 0 0.5em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--cp-blue); outline-offset: 2px; }

.cp-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ── Layout ────────────────────────────────────────────── */

.cp-wrap {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 24px;
}

.cp-section { padding-block: clamp(56px, 8vw, 96px); }
.cp-section + .cp-section { padding-top: 0; }

.cp-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 14px;
	margin-bottom: 32px;
	border-bottom: 2px solid currentColor;
	flex-wrap: wrap;
}

.cp-section__title {
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.028em;
	margin: 0;
}

/* El énfasis se hace con peso, no con color ni gradiente. */
.cp-section__title em { font-style: normal; }
.cp-section__title svg { display: none; }

.cp-section__link {
	color: var(--cp-ink-mid);
	font-size: 0.85rem;
	white-space: nowrap;
	border-bottom: 1px solid var(--cp-rule);
	transition: border-color 0.15s, color 0.15s;
}

.cp-section__link:hover { color: var(--cp-ink); border-color: var(--cp-ink); }

/* ── Botones ───────────────────────────────────────────── */

.cp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: var(--cp-radius-sm);
	font-weight: 500;
	font-size: 0.92rem;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.cp-btn--primary { background: var(--cp-ink); color: #fff; border-color: var(--cp-ink); }
.cp-btn--primary:hover { background: #000; border-color: #000; }

.cp-btn--ghost { background: transparent; color: var(--cp-ink); border-color: var(--cp-rule-strong); }
.cp-btn--ghost:hover { background: var(--cp-bg-alt); }

/* Único uso del acento en un botón: la acción que copia el código. */
.cp-btn--accent { background: var(--cp-accent); color: var(--cp-accent-ink); border-color: var(--cp-accent); }
.cp-btn--accent:hover { background: var(--cp-accent-hover); border-color: var(--cp-accent-hover); }

.cp-btn--block { width: 100%; }

/* ── Header ────────────────────────────────────────────── */

.cp-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--cp-bg);
	border-bottom: 1px solid var(--cp-rule);
}

.cp-header__inner { display: flex; align-items: center; gap: 28px; min-height: 116px; }

.cp-logo { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.03em; }
.cp-logo span { color: var(--cp-accent); }

.cp-nav { display: flex; gap: 26px; margin-left: auto; }

.cp-nav a {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 600;
	color: var(--cp-ink-mid);
	padding-block: 4px;
	border-bottom: 1px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}

.cp-nav a:hover { color: var(--cp-ink); border-color: var(--cp-ink); }

/* Solo la lupa: botón cuadrado, sin texto. */
.cp-header__search {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--cp-rule);
	border-radius: var(--cp-radius-sm);
	color: var(--cp-ink-mid);
	transition: border-color 0.15s, color 0.15s;
}

.cp-header__search:hover { border-color: var(--cp-ink); color: var(--cp-ink); }

@media (max-width: 860px) {
	.cp-nav { display: none; }
	.cp-header__search { margin-left: auto; }
}

/* ── Hero ──────────────────────────────────────────────── */

/* Bloque a sangre con la imagen de marca. Los cupones viven a la derecha de la
   imagen, así que el texto va a la izquierda, sobre la zona despejada. Un velo
   oscuro del lado del texto garantiza el contraste pase lo que pase con la
   imagen. */
.cp-hero {
	position: relative;
	background: var(--cp-ink);
	color: var(--cp-on-dark);
	padding-block: clamp(80px, 10vw, 130px) clamp(64px, 8vw, 100px);
	overflow: hidden;
}

.cp-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url('../img/hero-bg.jpg');
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
}

/* Velo: opaco a la izquierda (donde va el texto), transparente a la derecha
   (donde están los cupones). Así el texto siempre tiene fondo oscuro y los
   cupones no se apagan. */
.cp-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--cp-ink) 0%,
		rgba(25, 27, 46, 0.86) 34%,
		rgba(25, 27, 46, 0.32) 62%,
		rgba(25, 27, 46, 0.12) 100%
	);
}

.cp-hero > .cp-wrap { position: relative; z-index: 1; }

@media (max-width: 720px) {
	/* En móvil los cupones estorban al texto: se oscurece todo parejo. */
	.cp-hero__bg::after {
		background: rgba(25, 27, 46, 0.82);
	}
}

.cp-hero__eyebrow {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 26px;
	background: var(--cp-accent);
	border: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
}

.cp-hero__eyebrow svg { display: none; }

.cp-hero__title {
	font-size: clamp(2.6rem, 6.5vw, 5rem);
	font-weight: 800;
	max-width: 14ch;
	margin-bottom: 22px;
	letter-spacing: -0.042em;
	line-height: 1.02;
}

/* Sobre oscuro, el acento tiene que aclararse o se pierde contra el fondo. */
.cp-hero__title em { font-style: normal; color: var(--cp-violet-light); }

.cp-hero__sub { color: var(--cp-on-dark-mid); font-size: 1.1rem; max-width: 46ch; margin: 0 0 34px; }

.cp-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* El buscador del hero vive sobre oscuro. */
.cp-hero .cp-search__box { border-color: var(--cp-on-dark-rule); background: rgba(255, 255, 255, 0.06); }
.cp-hero .cp-search__box:focus-within { border-color: #fff; }
.cp-hero .cp-search__input { color: #fff; }
.cp-hero .cp-search__input::placeholder { color: var(--cp-on-dark-dim); }
.cp-hero .cp-search__box > svg { color: var(--cp-on-dark-dim); }
.cp-hero .cp-search__panel { border-color: var(--cp-ink); }

/* Botones sobre oscuro: se invierten. */
.cp-hero .cp-btn--primary { background: #fff; color: var(--cp-ink); border-color: #fff; }
.cp-hero .cp-btn--primary:hover { background: var(--cp-violet-light); border-color: var(--cp-violet-light); }
.cp-hero .cp-btn--ghost { color: #fff; border-color: var(--cp-on-dark-rule); }
.cp-hero .cp-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }

/* ── Buscador ──────────────────────────────────────────── */

.cp-search { position: relative; max-width: 640px; z-index: 20; }

.cp-search__box {
	display: flex;
	align-items: stretch;
	gap: 12px;
	padding-left: 16px;
	border: 1px solid var(--cp-rule-strong);
	border-radius: var(--cp-radius-sm);
	background: var(--cp-bg);
	transition: border-color 0.15s;
}

.cp-search__box > svg { align-self: center; color: var(--cp-ink-dim); flex: none; }
.cp-search__box .cp-btn { border-radius: 0; }

.cp-search__input {
	flex: 1;
	background: none;
	border: 0;
	color: var(--cp-ink);
	font-size: 1rem;
	padding: 15px 0;
	min-width: 0;
}

.cp-search__input:focus { outline: none; }
.cp-search__input::placeholder { color: var(--cp-ink-dim); }

.cp-search__panel {
	position: absolute;
	top: calc(100% - 1px);
	left: 0;
	right: 0;
	background: var(--cp-bg);
	border: 1px solid var(--cp-rule-strong);
	text-align: left;
	max-height: 60vh;
	overflow-y: auto;
	display: none;
}

.cp-search__panel[data-open='true'] { display: block; }

.cp-search__group-title {
	padding: 14px 16px 4px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cp-ink-dim);
}

.cp-search__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 16px;
	border-top: 1px solid var(--cp-rule);
	transition: background-color 0.12s;
}

.cp-search__item:hover,
.cp-search__item[aria-selected='true'] { background: var(--cp-bg-alt); }

.cp-search__item strong { font-weight: 500; font-size: 0.94rem; }

.cp-search__item-tag {
	margin-left: auto;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--cp-accent);
	font-size: 0.9rem;
}

.cp-search__empty { padding: 24px 16px; color: var(--cp-ink-dim); font-size: 0.9rem; text-align: center; }

/* ── Card ──────────────────────────────────────────────── */

/* Rejilla continua: las cards comparten filete en vez de flotar sueltas. */
.cp-grid {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	border-top: 1px solid var(--cp-rule);
	border-left: 1px solid var(--cp-rule);
}

.cp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--cp-surface);
	border-right: 1px solid var(--cp-rule);
	border-bottom: 1px solid var(--cp-rule);
	transition: background-color 0.15s;
}

.cp-card:hover { background: var(--cp-bg-alt); }

.cp-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--cp-bg-alt);
	overflow: hidden;
	border-bottom: 1px solid var(--cp-rule);
}

.cp-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* El descuento es el dato más importante. Bloque sólido, sin adorno. */
.cp-card__discount {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px 14px;
	background: var(--cp-accent);
	color: var(--cp-accent-ink);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.cp-card__fav {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 1px solid var(--cp-rule);
	background: var(--cp-bg);
	color: var(--cp-ink-dim);
	transition: color 0.15s, border-color 0.15s;
}

.cp-card__fav:hover { color: var(--cp-ink); border-color: var(--cp-ink); }
.cp-card__fav[aria-pressed='true'] { color: var(--cp-accent); border-color: var(--cp-accent); }
.cp-card__fav[aria-pressed='true'] svg { fill: currentColor; }

.cp-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px; flex: 1; }

.cp-card__brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--cp-ink-dim);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.cp-card__brand img { width: 20px; height: 20px; object-fit: contain; }

.cp-card__title {
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
	letter-spacing: -0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cp-card__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
	font-size: 0.78rem;
	color: var(--cp-ink-dim);
	font-variant-numeric: tabular-nums;
}

.cp-card__expiry { display: flex; align-items: center; gap: 5px; }
.cp-card__expiry--urgent { color: var(--cp-alerta); font-weight: 600; }
.cp-card__trust { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.cp-card__trust--high { color: var(--cp-ok); }
.cp-card__trust--low { color: var(--cp-warn); }

.cp-card__link { position: absolute; inset: 0; z-index: 1; }

/* ── Badges ────────────────────────────────────────────── */

.cp-badges { position: absolute; bottom: 8px; left: 8px; display: flex; gap: 4px; flex-wrap: wrap; }

.cp-badge {
	padding: 3px 8px;
	border-radius: 0;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--cp-bg);
	color: var(--cp-ink);
	border: 1px solid var(--cp-rule-strong);
}

.cp-badge--exclusiva { background: var(--cp-ink); color: #fff; }

/* Deliberadamente sobria: no debe parecer un sello de calidad. */
.cp-badge--patrocinada {
	background: var(--cp-bg-alt);
	color: var(--cp-ink-dim);
	border-color: var(--cp-rule);
	font-weight: 500;
}

/* ── Destacadas ────────────────────────────────────────── */

.cp-slider { position: relative; }

.cp-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border: 1px solid var(--cp-rule);
}

.cp-slider__track::-webkit-scrollbar { display: none; }

.cp-slide {
	flex: 0 0 min(100%, 680px);
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: 1fr 240px;
	gap: 32px;
	align-items: center;
	padding: 36px;
	background: var(--cp-surface);
	border-right: 1px solid var(--cp-rule);
}

.cp-slide__discount {
	font-size: clamp(2.6rem, 6vw, 3.6rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--cp-accent);
	font-variant-numeric: tabular-nums;
	margin-bottom: 12px;
}

.cp-slide__title { font-size: 1.25rem; font-weight: 500; margin-bottom: 8px; }
.cp-slide__meta { color: var(--cp-ink-dim); font-size: 0.85rem; margin-bottom: 24px; }

.cp-slide__media { aspect-ratio: 4 / 3; overflow: hidden; }
.cp-slide__media img { width: 100%; height: 100%; object-fit: cover; }

.cp-slider__nav { display: flex; gap: 6px; margin-top: 16px; }

.cp-slider__dot {
	width: 28px;
	height: 2px;
	border: 0;
	padding: 0;
	background: var(--cp-rule);
	transition: background-color 0.15s;
}

.cp-slider__dot[aria-current='true'] { background: var(--cp-ink); }

@media (max-width: 640px) {
	.cp-slide { grid-template-columns: 1fr; padding: 24px; }
	.cp-slide__media { display: none; }
}

/* ── Categorías ────────────────────────────────────────── */

/* Cada categoría es un bloque de color. La rejilla usa columnas iguales para
   que todo cuadre fila y columna aunque el número de categorías no sea múltiplo
   exacto. */
.cp-cats {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
}

@media (max-width: 1080px) { .cp-cats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px)  { .cp-cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .cp-cats { grid-template-columns: repeat(2, 1fr); } }

/* Tile de color sólido, contenido centrado y en blanco. Sin sombra ni
   gradiente: la profundidad la da la masa de color, como en el resto de la
   dirección "Bloques". */
.cp-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	aspect-ratio: 1 / 1;
	padding: 18px 12px;
	background: var(--cp-cat-color, var(--cp-ink));
	color: #fff;
	border-radius: var(--cp-radius);
	transition: transform 0.15s, filter 0.15s;
}

/* El hover no cambia el color (rompería la identidad de la categoría): la
   aclara apenas y la levanta un pelo. */
.cp-cat:hover { filter: brightness(1.08); transform: translateY(-2px); }

.cp-cat:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.cp-cat__icon {
	display: grid;
	place-items: center;
	color: #fff;
	margin-bottom: 2px;
}

.cp-cat__name { font-weight: 600; font-size: 1rem; color: #fff; line-height: 1.2; }

.cp-cat__count {
	font-size: 0.76rem;
	color: rgba(255, 255, 255, 0.75);
	font-variant-numeric: tabular-nums;
}

/* Botón "Ver todas las categorías" */
.cp-cats-more {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.cp-cats-more .cp-btn {
	padding-inline: 32px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.82rem;
	font-weight: 600;
}

/* ── Filtros ───────────────────────────────────────────── */

.cp-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	padding-bottom: 16px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--cp-rule);
}

.cp-chip {
	padding: 7px 14px;
	border: 1px solid var(--cp-rule);
	border-radius: var(--cp-radius-sm);
	background: transparent;
	color: var(--cp-ink-mid);
	font-size: 0.85rem;
	transition: border-color 0.15s, color 0.15s;
}

.cp-chip:hover { color: var(--cp-ink); border-color: var(--cp-ink); }
.cp-chip[aria-pressed='true'] { background: var(--cp-ink); border-color: var(--cp-ink); color: #fff; }

.cp-select {
	margin-left: auto;
	padding: 8px 12px;
	border: 1px solid var(--cp-rule);
	border-radius: var(--cp-radius-sm);
	background: var(--cp-bg);
	color: var(--cp-ink);
	font-size: 0.85rem;
}

/* ── Cabecera de archivo ───────────────────────────────── */

.cp-archive-head {
	padding-block: clamp(40px, 6vw, 72px);
	border-bottom: 1px solid var(--cp-rule-strong);
}

.cp-archive-head__title { font-size: clamp(1.9rem, 4.5vw, 2.8rem); letter-spacing: -0.03em; }
.cp-archive-head__title em { font-style: normal; color: var(--cp-accent); }
.cp-archive-head__desc { color: var(--cp-ink-mid); max-width: 60ch; margin: 0; }

.cp-breadcrumbs {
	display: flex;
	gap: 8px;
	font-size: 0.78rem;
	color: var(--cp-ink-dim);
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.cp-breadcrumbs a { border-bottom: 1px solid transparent; }
.cp-breadcrumbs a:hover { color: var(--cp-ink); border-color: var(--cp-ink); }

.cp-brand-head { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }

.cp-brand-head__logo {
	width: 80px;
	height: 80px;
	border: 1px solid var(--cp-rule);
	padding: 10px;
	object-fit: contain;
	flex: none;
}

/* ── Paginación ────────────────────────────────────────── */

.cp-pagination { display: flex; gap: 4px; justify-content: center; margin-top: 48px; flex-wrap: wrap; }

.cp-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	border: 1px solid var(--cp-rule);
	border-radius: var(--cp-radius-sm);
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.15s;
}

.cp-pagination .page-numbers:hover { border-color: var(--cp-ink); }
.cp-pagination .page-numbers.current { background: var(--cp-ink); border-color: var(--cp-ink); color: #fff; }

/* ── Estados ───────────────────────────────────────────── */

.cp-empty { padding: 72px 20px; text-align: center; color: var(--cp-ink-dim); border: 1px solid var(--cp-rule); }
.cp-empty h3 { color: var(--cp-ink); }

/* Sin shimmer: un bloque quieto comunica lo mismo y no distrae. */
.cp-skeleton { background: var(--cp-bg-alt); border: 1px solid var(--cp-rule); height: 300px; }

/* ── Footer ────────────────────────────────────────────── */

/* ── Toast ─────────────────────────────────────────────── */

.cp-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translate(-50%, 200%);
	z-index: 200;
	padding: 13px 20px;
	background: var(--cp-ink);
	color: #fff;
	font-size: 0.88rem;
	transition: transform 0.2s ease-out;
}

.cp-toast[data-show='true'] { transform: translate(-50%, 0); }

/* ── Publicidad ────────────────────────────────────────── */

.cp-ad { position: relative; margin-block: 32px; border: 1px solid var(--cp-rule); }
.cp-ad img { width: 100%; height: auto; display: block; }

/* La etiqueta no se negocia: separa un portal confiable de uno que engaña. */
.cp-ad__label {
	display: block;
	padding: 4px 10px;
	border-bottom: 1px solid var(--cp-rule);
	background: var(--cp-bg-alt);
	color: var(--cp-ink-dim);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.cp-ad--between { grid-column: 1 / -1; margin: 0; border-inline: 0; }

.cp-ad--sticky_mobile {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 95;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--cp-rule-strong);
	background: var(--cp-bg);
	display: none;
}

@media (max-width: 860px) {
	.cp-ad--sticky_mobile { display: block; }
	body { padding-bottom: 90px; }
}

.cp-ad--sticky_mobile[data-closed='true'] { display: none; }

.cp-ad__close {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 3;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border: 1px solid var(--cp-rule);
	background: var(--cp-bg);
	color: var(--cp-ink);
	font-size: 16px;
	line-height: 1;
}

/* ── Alertas ───────────────────────────────────────────── */

.cp-alert-form {
	margin-block: 48px;
	padding: 36px;
	border: 1px solid var(--cp-rule-strong);
	background: var(--cp-bg-alt);
}

.cp-alert-form h3 { font-size: 1.3rem; margin-bottom: 6px; }
.cp-alert-form p { color: var(--cp-ink-mid); font-size: 0.9rem; margin: 0 0 24px; max-width: 48ch; }

.cp-alert-form__row { display: flex; gap: 8px; max-width: 460px; flex-wrap: wrap; }

.cp-alert-form__input {
	flex: 1;
	min-width: 200px;
	padding: 13px 16px;
	border: 1px solid var(--cp-rule-strong);
	border-radius: var(--cp-radius-sm);
	background: var(--cp-bg);
	color: var(--cp-ink);
	font-size: 0.95rem;
}

.cp-alert-form__input:focus { outline: none; border-color: var(--cp-ink); }

.cp-alert-form__msg { margin-top: 16px !important; font-weight: 500; color: var(--cp-ok) !important; }
.cp-alert-form__msg[data-error='true'] { color: var(--cp-alerta) !important; }

.cp-alert-form__legal { margin-top: 14px !important; font-size: 0.75rem !important; color: var(--cp-ink-dim); }

/* Honeypot: fuera de pantalla, no display:none — algunos bots lo detectan. */
.cp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Popup ─────────────────────────────────────────────── */

.cp-popup {
	position: relative;
	width: min(92vw, 460px);
	padding: 0;
	border: 1px solid var(--cp-rule-strong);
	background: var(--cp-bg);
	color: var(--cp-ink);
}

.cp-popup::backdrop { background: rgba(25, 27, 46, 0.45); }
.cp-popup .cp-alert-form { margin: 0; border: 0; }

.cp-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 1px solid var(--cp-rule);
	background: var(--cp-bg);
	color: var(--cp-ink);
	font-size: 18px;
	line-height: 1;
}

/* ── Campañas ──────────────────────────────────────────── */

/* Franja superior. Solo aparece si hay campaña en curso o a menos de 21 días:
   una franja permanente se vuelve invisible en tres días. */
.cp-strip {
	background: var(--cp-ink);
	color: #fff;
	border-bottom: 1px solid var(--cp-ink);
}

.cp-strip--proxima { background: var(--cp-bg-alt); color: var(--cp-ink); border-bottom-color: var(--cp-rule-strong); }

.cp-strip__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 46px;
	flex-wrap: wrap;
	font-size: 0.85rem;
}

.cp-strip__state {
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 3px 8px;
	border: 1px solid currentColor;
}

.cp-strip__name { font-weight: 600; }
.cp-strip__range { opacity: 0.7; }

.cp-strip__timer {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.cp-strip__link { border-bottom: 1px solid currentColor; white-space: nowrap; }

@media (max-width: 720px) {
	.cp-strip__range { display: none; }
	.cp-strip__timer { margin-left: 0; }
}

/* Cabecera del archivo de campaña */
.cp-cmp-state {
	display: inline-block;
	margin-bottom: 12px;
	padding: 3px 9px;
	border: 1px solid var(--cp-rule-strong);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cp-cmp-state--activa { background: var(--cp-ink); color: #fff; }
.cp-cmp-state--terminada { color: var(--cp-ink-dim); border-color: var(--cp-rule); }

.cp-cmp-range { font-size: 1.05rem; color: var(--cp-ink); margin: 0 0 8px; font-variant-numeric: tabular-nums; }

.cp-count {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 24px;
	padding: 12px 18px;
	border: 1px solid var(--cp-rule-strong);
}

.cp-count--urgente { border-color: var(--cp-alerta); color: var(--cp-alerta); }

.cp-count__label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cp-ink-dim);
}

.cp-count--urgente .cp-count__label { color: var(--cp-alerta); }

.cp-count__value { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Selector de año */
.cp-years { display: flex; gap: 0; margin-top: 24px; border: 1px solid var(--cp-rule-strong); width: max-content; }

.cp-year {
	padding: 8px 18px;
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.15s;
}

.cp-year + .cp-year { border-left: 1px solid var(--cp-rule); }
.cp-year:hover { background: var(--cp-bg-alt); }
.cp-year.is-on { background: var(--cp-ink); color: #fff; }

/* El calendario se lee como un año, no como una lista suelta. */
.cp-calendar { list-style: none; padding: 0; margin: 0; }

.cp-calendar__month { margin-bottom: 40px; }

.cp-calendar__mes {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cp-ink-dim);
	padding-bottom: 8px;
	margin-bottom: 0;
	border-bottom: 1px solid var(--cp-rule-strong);
}

.cp-calendar__list { list-style: none; padding: 0; margin: 0; }

.cp-cmp {
	display: grid;
	grid-template-columns: 150px 1fr 130px 90px;
	gap: 20px;
	align-items: baseline;
	padding-block: 20px;
	border-bottom: 1px solid var(--cp-rule);
	transition: background-color 0.15s;
}

.cp-cmp:hover { background: var(--cp-bg-alt); }

.cp-cmp__dates {
	font-size: 0.88rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--cp-ink);
}

.cp-cmp__name { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; }
.cp-cmp__name:hover { color: var(--cp-accent); }

.cp-cmp__desc { margin: 4px 0 0; font-size: 0.85rem; color: var(--cp-ink-mid); max-width: 60ch; }

.cp-cmp__state {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cp-ink-dim);
	text-align: right;
}

.cp-cmp__count { font-size: 0.8rem; color: var(--cp-ink-dim); text-align: right; font-variant-numeric: tabular-nums; }

/* La campaña en curso se destaca con filete, no con color de fondo. */
.cp-cmp--activa { border-left: 3px solid var(--cp-accent); padding-left: 16px; }
.cp-cmp--activa .cp-cmp__state { color: var(--cp-accent); }

.cp-cmp--terminada { opacity: 0.55; }

@media (max-width: 800px) {
	.cp-cmp { grid-template-columns: 1fr; gap: 4px; }
	.cp-cmp__state, .cp-cmp__count { text-align: left; }
}

.cp-badge--campana { background: var(--cp-accent); color: #fff; border-color: var(--cp-accent); }

/* ── Vuelos ────────────────────────────────────────────── */

/* Buscador de ruta */
.cp-route {
	display: flex;
	align-items: flex-end;
	gap: 0;
	margin-top: 28px;
	border: 1px solid var(--cp-rule-strong);
	max-width: 780px;
}

.cp-route__field { position: relative; flex: 1; padding: 10px 16px; min-width: 0; }
.cp-route__field + .cp-route__field { border-left: 1px solid var(--cp-rule); }
.cp-route__field--narrow { flex: 0 0 170px; border-left: 1px solid var(--cp-rule); }

.cp-route__field label {
	display: block;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cp-ink-dim);
	margin-bottom: 2px;
}

.cp-route__field input,
.cp-route__field select {
	width: 100%;
	border: 0;
	padding: 4px 0;
	background: none;
	color: var(--cp-ink);
	font-size: 1rem;
	font-weight: 500;
}

.cp-route__field input:focus,
.cp-route__field select:focus { outline: none; }
.cp-route__field input::placeholder { color: var(--cp-ink-dim); font-weight: 400; }

.cp-route__swap { align-self: center; padding-inline: 4px; color: var(--cp-ink-dim); }

.cp-route .cp-btn { border-radius: 0; align-self: stretch; flex: none; border-left: 1px solid var(--cp-rule-strong); }

.cp-route__panel {
	position: absolute;
	top: 100%;
	left: -1px;
	right: -1px;
	z-index: 30;
	background: var(--cp-bg);
	border: 1px solid var(--cp-rule-strong);
	display: none;
	max-height: 260px;
	overflow-y: auto;
}

.cp-route__panel[data-open='true'] { display: block; }

.cp-route__opt {
	display: flex;
	align-items: baseline;
	gap: 10px;
	width: 100%;
	padding: 10px 14px;
	border: 0;
	border-top: 1px solid var(--cp-rule);
	background: transparent;
	text-align: left;
	font-size: 0.9rem;
}

.cp-route__opt:first-child { border-top: 0; }
.cp-route__opt:hover, .cp-route__opt[aria-selected='true'] { background: var(--cp-bg-alt); }

.cp-route__opt code {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--cp-ink-dim);
	margin-left: auto;
}

.cp-route__opt span { color: var(--cp-ink-dim); font-size: 0.8rem; }

@media (max-width: 780px) {
	.cp-route { flex-wrap: wrap; }
	.cp-route__field, .cp-route__field--narrow { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--cp-rule); }
	.cp-route__swap { display: none; }
	.cp-route .cp-btn { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--cp-rule-strong); }
}

/* Card de vuelo. La ruta manda; el precio, después. */
.cp-flies {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	border-top: 1px solid var(--cp-rule);
	border-left: 1px solid var(--cp-rule);
}

.cp-fly {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px;
	border-right: 1px solid var(--cp-rule);
	border-bottom: 1px solid var(--cp-rule);
	transition: background-color 0.15s;
}

.cp-fly:hover { background: var(--cp-bg-alt); }

.cp-fly__route { display: flex; align-items: baseline; gap: 10px; }

.cp-fly__iata {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.cp-fly__arrow { color: var(--cp-ink-dim); font-size: 1.1rem; }

.cp-fly__cities { font-size: 0.88rem; color: var(--cp-ink-mid); }

.cp-fly__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 0.74rem;
	color: var(--cp-ink-dim);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cp-rule);
}

/* Sin equipaje se dice fuerte: es la mitad del precio real. */
.cp-fly__warn { color: var(--cp-warn); font-weight: 600; }

.cp-fly__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 4px;
}

.cp-fly__price { display: grid; gap: 3px; }

.cp-fly__amount {
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.cp-fly__signal {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.cp-fly__signal--excelente { color: var(--cp-ok); }
.cp-fly__signal--bueno { color: var(--cp-ok); }
.cp-fly__signal--normal { color: var(--cp-ink-dim); }
.cp-fly__signal--caro { color: var(--cp-alerta); }

.cp-fly__when { display: grid; gap: 2px; text-align: right; font-size: 0.76rem; color: var(--cp-ink-dim); }
.cp-fly__urgent { color: var(--cp-alerta); font-weight: 600; }

.cp-fly__fav {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 1px solid var(--cp-rule);
	background: var(--cp-bg);
	color: var(--cp-ink-dim);
	transition: color 0.15s, border-color 0.15s;
}

.cp-fly__fav:hover { color: var(--cp-ink); border-color: var(--cp-ink); }
.cp-fly__fav[aria-pressed='true'] { color: var(--cp-accent); border-color: var(--cp-accent); }
.cp-fly__fav[aria-pressed='true'] svg { fill: currentColor; }

/* Single de vuelo */
.cp-fly-hero { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; }

.cp-fly-hero__city { display: grid; gap: 2px; }

.cp-fly-hero__iata {
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.04em;
}

.cp-fly-hero__name { font-size: 0.82rem; color: var(--cp-ink-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.cp-fly-hero__arrow { font-size: 1.5rem; color: var(--cp-ink-dim); }

/* Las dos fechas, separadas y explicadas: confundirlas es la mentira más
   común de los portales de vuelos. */
.cp-fly-dates {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin-top: 24px;
	border-top: 1px solid var(--cp-rule-strong);
	border-left: 1px solid var(--cp-rule);
}

.cp-fly-dates__item {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border-right: 1px solid var(--cp-rule);
	border-bottom: 1px solid var(--cp-rule);
}

.cp-fly-dates__item strong { font-size: 1rem; font-weight: 600; }

@media (max-width: 560px) {
	.cp-fly-dates { grid-template-columns: 1fr; }
}

.cp-fly-price { display: grid; gap: 6px; padding-bottom: 18px; border-bottom: 1px solid var(--cp-rule); }

.cp-fly-price__amount {
	font-size: 2.4rem;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.cp-fly-price__ref { margin: 6px 0 0; font-size: 0.8rem; color: var(--cp-ink-dim); }

/* ── Bancos ────────────────────────────────────────────── */

.cp-banks {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--cp-rule);
	flex-wrap: wrap;
}

.cp-banks__label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cp-ink-dim);
	flex: none;
}

.cp-banks__list { display: flex; gap: 6px; flex-wrap: wrap; }

.cp-chip__n {
	margin-left: 6px;
	font-size: 0.72rem;
	color: var(--cp-ink-dim);
	font-variant-numeric: tabular-nums;
}

.cp-chip[aria-pressed='true'] .cp-chip__n { color: rgba(255, 255, 255, 0.6); }

/* Banco y días en la card. "Hoy sirve" es la única respuesta que la gente
   realmente busca en un beneficio bancario. */
.cp-card__bank {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 0.74rem;
}

.cp-card__bank-name {
	padding: 2px 7px;
	border: 1px solid var(--cp-rule);
	color: var(--cp-ink-mid);
	font-weight: 500;
}

.cp-card__days { padding: 2px 7px; color: var(--cp-ink-dim); border: 1px solid transparent; }

.cp-card__days.is-hoy {
	color: var(--cp-ok);
	border-color: var(--cp-ok);
	font-weight: 600;
}

/* ── Landings ──────────────────────────────────────────── */

.cp-siblings { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--cp-rule-strong); }

.cp-siblings h2 { font-size: 1.1rem; margin-bottom: 16px; }

.cp-siblings ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0;
	border-top: 1px solid var(--cp-rule);
	border-left: 1px solid var(--cp-rule);
}

.cp-siblings li {
	border-right: 1px solid var(--cp-rule);
	border-bottom: 1px solid var(--cp-rule);
}

.cp-siblings a {
	display: block;
	padding: 12px 16px;
	font-size: 0.88rem;
	color: var(--cp-ink-mid);
	transition: background-color 0.15s, color 0.15s;
}

.cp-siblings a:hover { background: var(--cp-bg-alt); color: var(--cp-ink); }

/* ── Hoy y WhatsApp ────────────────────────────────────── */

.cp-hoy-date {
	display: inline-block;
	margin-bottom: 12px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cp-ink-dim);
}

.cp-wa {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding: 12px 20px;
	border: 1px solid var(--cp-rule-strong);
	font-size: 0.9rem;
	font-weight: 500;
	transition: background-color 0.15s, color 0.15s;
}

.cp-wa:hover { background: var(--cp-ink); color: #fff; }
.cp-wa__icon { display: grid; place-items: center; }

/* ── Logo ──────────────────────────────────────────────── */

.cp-logo--img { display: block; flex: none; }

.cp-logo--img img {
	height: 100px;
	width: auto;
	max-width: 340px;
	object-fit: contain;
}


@media (max-width: 480px) {
	.cp-logo--img img { height: 64px; }
}

/* ══════════════════════════════════════════════════════════
 * Bloques de color
 *
 * La profundidad la da la masa, no la sombra. Regla que me impongo:
 * UNA sola sección en violeta pleno por página. Si el violeta aparece tres
 * veces, deja de significar nada y vuelve a ser decoración.
 * ══════════════════════════════════════════════════════════ */

.cp-section--violet {
	background: var(--cp-accent-block);
	color: var(--cp-on-dark);
}

.cp-section--ink {
	background: var(--cp-ink);
	color: var(--cp-on-dark);
}

/* El sistema entero tiene que saber comportarse sobre fondo pleno, no solo
   el fondo. Esto es lo que separa "bloque de color" de "sección pintada". */
.cp-section--violet .cp-section__link,
.cp-section--ink .cp-section__link { color: var(--cp-on-dark-mid); border-color: var(--cp-on-dark-rule); }

.cp-section--violet .cp-section__link:hover,
.cp-section--ink .cp-section__link:hover { color: #fff; border-color: #fff; }

.cp-section--violet .cp-grid,
.cp-section--ink .cp-grid,
.cp-section--violet .cp-cats,
.cp-section--ink .cp-cats,
.cp-section--violet .cp-flies,
.cp-section--ink .cp-flies {
	border-top-color: var(--cp-on-dark-rule);
	border-left-color: var(--cp-on-dark-rule);
}

.cp-section--violet .cp-card,
.cp-section--ink .cp-card,
.cp-section--violet .cp-cat,
.cp-section--ink .cp-cat,
.cp-section--violet .cp-fly,
.cp-section--ink .cp-fly {
	background: transparent;
	color: var(--cp-on-dark);
	border-right-color: var(--cp-on-dark-rule);
	border-bottom-color: var(--cp-on-dark-rule);
}

.cp-section--violet .cp-card:hover,
.cp-section--ink .cp-card:hover,
.cp-section--violet .cp-cat:hover,
.cp-section--ink .cp-cat:hover,
.cp-section--violet .cp-fly:hover,
.cp-section--ink .cp-fly:hover { background: rgba(255, 255, 255, 0.08); }

/* Sobre violeta pleno, el descuento se invierte: violeta sobre violeta no se ve. */
.cp-section--violet .cp-card__discount { background: #fff; color: var(--cp-accent-block); }
.cp-section--ink .cp-card__discount { background: var(--cp-violet-light); color: var(--cp-ink); }

.cp-section--violet .cp-card__media,
.cp-section--ink .cp-card__media {
	background: rgba(255, 255, 255, 0.08);
	border-bottom-color: var(--cp-on-dark-rule);
}

.cp-section--violet .cp-card__brand,
.cp-section--ink .cp-card__brand,
.cp-section--violet .cp-card__foot,
.cp-section--ink .cp-card__foot,
.cp-section--violet .cp-cat__count,
.cp-section--ink .cp-cat__count,
.cp-section--violet .cp-fly__cities,
.cp-section--ink .cp-fly__cities,
.cp-section--violet .cp-fly__when,
.cp-section--ink .cp-fly__when { color: var(--cp-on-dark-mid); }

.cp-section--violet .cp-cat__icon,
.cp-section--ink .cp-cat__icon { color: #fff; }

/* La confianza y la urgencia tienen que seguir leyéndose sobre pleno. */
.cp-section--violet .cp-card__trust--high,
.cp-section--ink .cp-card__trust--high { color: var(--cp-ok-light); }

.cp-section--violet .cp-card__expiry--urgent,
.cp-section--ink .cp-card__expiry--urgent { color: var(--cp-alerta-light); }

.cp-section--violet .cp-card__days.is-hoy,
.cp-section--ink .cp-card__days.is-hoy { color: var(--cp-ok-light); border-color: var(--cp-ok-light); }

.cp-section--violet .cp-card__bank-name,
.cp-section--ink .cp-card__bank-name { color: #fff; border-color: var(--cp-on-dark-rule); }

.cp-section--violet .cp-badge,
.cp-section--ink .cp-badge { background: transparent; color: #fff; border-color: var(--cp-on-dark-rule); }

.cp-section--violet .cp-badge--exclusiva,
.cp-section--ink .cp-badge--exclusiva { background: #fff; color: var(--cp-ink); border-color: #fff; }

.cp-section--violet .cp-card__fav,
.cp-section--ink .cp-card__fav,
.cp-section--violet .cp-fly__fav,
.cp-section--ink .cp-fly__fav {
	background: transparent;
	border-color: var(--cp-on-dark-rule);
	color: var(--cp-on-dark-mid);
}

.cp-section--violet .cp-card__fav:hover,
.cp-section--ink .cp-card__fav:hover { color: #fff; border-color: #fff; }

.cp-section--violet .cp-btn--primary,
.cp-section--ink .cp-btn--primary { background: #fff; color: var(--cp-ink); border-color: #fff; }

.cp-section--violet .cp-btn--ghost,
.cp-section--ink .cp-btn--ghost { color: #fff; border-color: var(--cp-on-dark-rule); }

.cp-section--violet .cp-btn--ghost:hover,
.cp-section--ink .cp-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }

.cp-section--violet .cp-empty,
.cp-section--ink .cp-empty { border-color: var(--cp-on-dark-rule); color: var(--cp-on-dark-mid); }

.cp-section--violet .cp-empty h3,
.cp-section--ink .cp-empty h3 { color: #fff; }

/* Los bloques van pegados: el corte entre uno y otro ES el borde. */
.cp-section--violet + .cp-section,
.cp-section--ink + .cp-section { padding-top: clamp(56px, 8vw, 96px); }

/* ── Redes del pie ─────────────────────────────────────── */

.cp-social {
	display: flex;
	gap: 0;
	flex-wrap: wrap;
	margin-bottom: 32px;
	border-top: 1px solid var(--cp-rule);
	border-left: 1px solid var(--cp-rule);
}

.cp-social a {
	padding: 12px 20px;
	font-size: 0.85rem;
	color: var(--cp-ink-mid);
	border-right: 1px solid var(--cp-rule);
	border-bottom: 1px solid var(--cp-rule);
	transition: background-color 0.15s, color 0.15s;
}

.cp-social a:hover { background: var(--cp-bg-alt); color: var(--cp-ink); }


/* ── Accesibilidad ─────────────────────────────────────────
 * El overlay que hace clicable toda la card es cómodo con el mouse y un
 * problema con el teclado: se lleva el foco antes que el título y tapa los
 * botones. Acá se ordena.
 * ─────────────────────────────────────────────────────────── */

.cp-card__link:focus-visible,
.cp-fly .cp-card__link:focus-visible {
	outline: 2px solid var(--cp-blue);
	outline-offset: -3px;
}

/* El foco visible en la card entera, no solo en el enlace invisible. */
.cp-card:focus-within,
.cp-fly:focus-within { background: var(--cp-bg-alt); }

/* Los controles quedan por encima del overlay y son alcanzables por teclado. */
.cp-card__fav,
.cp-fly__fav { position: absolute; z-index: 3; }

/* Áreas táctiles: 44px es el mínimo recomendado. Los botones de 34px se
   agrandan con un pseudo-elemento invisible en vez de cambiar el diseño. */
.cp-card__fav::after,
.cp-fly__fav::after {
	content: '';
	position: absolute;
	inset: -5px;
}

/* El canvas del raspado no debe recibir foco: quien navega con teclado usa el
   botón de escape, que sí es un control real. */
.cp-scratch { pointer-events: auto; }
.cp-scratch[data-done='true'] { pointer-events: none; }

/* Los íconos decorativos nunca se anuncian. */
.cp-icon { flex: none; }

@media (forced-colors: active) {
	.cp-card,
	.cp-fly,
	.cp-chip,
	.cp-btn { border: 1px solid; }
}


/* ── Grilla de marcas ──────────────────────────────────────
 * Las marcas NO llevan color de categoría: sus logos viven sobre blanco. Se
 * quedan con el estilo de rejilla clara con filete.
 * ─────────────────────────────────────────────────────────── */
.cp-brands {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	border-top: 1px solid var(--cp-rule);
	border-left: 1px solid var(--cp-rule);
}

.cp-brand-cell {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	border-right: 1px solid var(--cp-rule);
	border-bottom: 1px solid var(--cp-rule);
	transition: background-color 0.15s;
}

.cp-brand-cell:hover { background: var(--cp-bg-alt); }
.cp-brand-cell__icon { color: var(--cp-ink); margin-bottom: 6px; }
.cp-brand-cell__logo { width: 40px; height: 40px; object-fit: contain; margin-bottom: 6px; }
.cp-brand-cell__name { font-weight: 600; font-size: 0.98rem; }
.cp-brand-cell__count { font-size: 0.78rem; color: var(--cp-ink-dim); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════
 * Navegación móvil, buscador del header y favoritos
 * ══════════════════════════════════════════════════════════ */

/* Hamburguesa: oculta en escritorio, visible en móvil. */
.cp-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	flex: none;
}

.cp-burger span {
	display: block;
	width: 20px;
	height: 2px;
	margin-inline: auto;
	background: var(--cp-ink);
	transition: transform 0.2s, opacity 0.2s;
}

.cp-burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cp-burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.cp-burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Acceso a favoritos con contador. */
.cp-header__fav {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--cp-ink-mid);
	border: 1px solid var(--cp-rule);
	border-radius: var(--cp-radius-sm);
	flex: none;
	transition: color 0.15s, border-color 0.15s;
}

.cp-header__fav:hover { color: var(--cp-accent); border-color: var(--cp-accent); }

.cp-header__fav-count {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	display: grid;
	place-items: center;
	background: var(--cp-accent);
	color: #fff;
	font-size: 0.66rem;
	font-weight: 700;
	border-radius: 9px;
	font-variant-numeric: tabular-nums;
}

/* Panel de búsqueda que baja del header. Se anima con opacidad y un
   desplazamiento corto (8px), no un salto. No lleva velo: es una acción
   liviana, no un modal. */
.cp-header__search-panel {
	border-top: 1px solid var(--cp-rule);
	background: var(--cp-bg);
	padding-block: 20px;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.cp-header__search-panel.is-open {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.cp-header__search-panel { transition: none; }
}

.cp-header__search-panel .cp-search { max-width: none; }

/* Navegación móvil: panel lateral. */
.cp-mobile-nav {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 120;
	width: min(80vw, 320px);
	background: var(--cp-bg);
	border-right: 1px solid var(--cp-rule-strong);
	padding: 80px 8px 24px;
	overflow-y: auto;
	transform: translateX(0);
}

.cp-mobile-nav[hidden] { display: none; }

.cp-mobile-nav a {
	display: block;
	padding: 14px 20px;
	font-size: 1rem;
	color: var(--cp-ink);
	border-bottom: 1px solid var(--cp-rule);
	transition: background-color 0.15s;
}

.cp-mobile-nav a:hover { background: var(--cp-bg-alt); }

/* Velo detrás del menú y del buscador. */
.cp-overlay {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: rgba(25, 27, 46, 0.45);
}

.cp-overlay[hidden] { display: none; }

@media (max-width: 860px) {
	.cp-burger { display: flex; }
	.cp-header__inner { gap: 14px; }
	/* El logo al centro entre la hamburguesa y las acciones. */
	.cp-header__inner .cp-logo { margin-right: auto; }
}

/* ── Placeholder de card sin imagen ────────────────────────
 * Un rectángulo gris vacío grita "roto". La inicial de la marca sobre el color
 * de su categoría se ve intencional. */
.cp-card__ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--cp-ph, var(--cp-ink));
	color: #fff;
}

.cp-card__ph-ini {
	font-size: 3rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	opacity: 0.9;
}

.cp-card__ph svg { opacity: 0.85; }

/* ── Categorías vacías ─────────────────────────────────────
 * Apagadas y sin enlace: no prometen lo que no hay. */
.cp-cat--empty {
	filter: grayscale(0.55) brightness(0.92);
	opacity: 0.55;
	cursor: default;
	pointer-events: none;
}

.cp-cat--empty .cp-cat__count { color: rgba(255, 255, 255, 0.85); font-weight: 600; }

/* ── Barra de filtros pegajosa ─────────────────────────────
 * En listados largos, los filtros se quedan a mano al hacer scroll. */
.cp-filters {
	position: sticky;
	top: 116px;
	z-index: 40;
	background: var(--cp-bg);
	margin-inline: calc(-1 * var(--cp-gap));
	padding-inline: var(--cp-gap);
	padding-top: 12px;
}

@media (max-width: 860px) {
	.cp-filters { top: 74px; }
}

/* La barra de bancos también se pega, justo bajo la de filtros. */
.cp-banks { background: var(--cp-bg); }

/* ── Skeletons de carga ────────────────────────────────────
 * Mientras el AJAX trae resultados, un esqueleto quieto evita el salto y la
 * sensación de trabado. Sin shimmer: un bloque estable comunica lo mismo. */
.cp-grid[data-loading='true'],
.cp-flies[data-loading='true'] { position: relative; min-height: 300px; }

.cp-grid[data-loading='true'] > *,
.cp-flies[data-loading='true'] > * { opacity: 0.4; pointer-events: none; }

.cp-loading {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 5;
	place-items: center;
	background: rgba(255, 255, 255, 0.6);
}

[data-loading='true'] > .cp-loading { display: grid; }

.cp-spinner {
	width: 30px;
	height: 30px;
	border: 3px solid var(--cp-rule);
	border-top-color: var(--cp-accent);
	border-radius: 50%;
	animation: cp-spin 0.7s linear infinite;
}

@keyframes cp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.cp-spinner { animation-duration: 2s; }
}

/* Skeleton para el autocompletado del buscador. */
.cp-search__panel[data-loading='true'] { min-height: 80px; }

.cp-search__skeleton {
	padding: 14px 16px;
	display: grid;
	gap: 10px;
}

.cp-search__skeleton span {
	height: 14px;
	background: var(--cp-bg-alt);
	border-radius: 2px;
}

.cp-search__skeleton span:nth-child(1) { width: 70%; }
.cp-search__skeleton span:nth-child(2) { width: 50%; }
.cp-search__skeleton span:nth-child(3) { width: 60%; }

/* ══════════════════════════════════════════════════════════
 * Pie violeta con trama
 *
 * El footer es el único bloque de color pleno de la parte baja de la página.
 * Sobre el violeta, una trama de íconos (el ticket como isotipo + las
 * categorías) en blanco muy tenue le da textura sin ruido. La regla "un solo
 * bloque violeta por página" se mantiene: el footer es ese bloque.
 * ══════════════════════════════════════════════════════════ */

.cp-footer {
	position: relative;
	margin-top: 72px;
	background: var(--cp-accent-block);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

/* Capa de trama: detrás del contenido, tenue, sin capturar clics. */
.cp-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url('../img/footer-pattern.svg');
	background-size: 560px auto;
	background-repeat: repeat;
	opacity: 0.07;
	pointer-events: none;
}

/* Un velo suave arriba para fundir el corte con el contenido claro de encima. */
.cp-footer::after {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 120px;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent);
	pointer-events: none;
}

.cp-footer .cp-wrap { position: relative; }

/* Tres columnas alineadas arriba. align-items: start es lo que arregla que el
   newsletter empezara más abajo que las otras dos columnas. */
.cp-footer__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1.4fr;
	align-items: start;
	gap: 48px;
	padding-block: 64px 44px;
}

@media (max-width: 900px) {
	.cp-footer__grid { grid-template-columns: 1fr 1fr; gap: 44px 32px; }
	.cp-footer__news { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.cp-footer__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* El logo del footer, si trae fondo blanco horneado, se asienta en una pastilla
   clara para no chocar con el violeta. */
/* Logotipo de texto blanco del pie (SVG vectorizado, sin isotipo). */
.cp-footer__logo { display: inline-block; }
.cp-footer__logo img { height: 40px; width: auto; display: block; }

.cp-footer__desc {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.92rem;
	line-height: 1.6;
	max-width: 34ch;
	margin: 18px 0 20px;
}

.cp-footer__brand .cp-social { margin-bottom: 0; border: 0; }
.cp-footer__brand .cp-social a {
	color: rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.2);
}
.cp-footer__brand .cp-social a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Encabezados de columna. */
.cp-footer__nav h4,
.cp-footer__news h3 {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.62);
	margin: 0 0 18px;
	font-weight: 700;
}

.cp-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.cp-footer__nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.94rem;
	transition: color 0.15s, transform 0.15s;
}

.cp-footer__nav a:hover { color: #fff; transform: translateX(2px); }
.cp-footer__nav a .cp-icon { flex: none; color: rgba(255, 255, 255, 0.55); }
.cp-footer__nav a:hover .cp-icon { color: #fff; }

/* Newsletter: sobre violeta, una tarjeta translúcida con las clases reales
   del formulario de alertas. Se resetea el margen para que se alinee arriba
   con las otras dos columnas. */
.cp-footer__news .cp-alert-form {
	margin: 0;
	padding: 28px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.cp-footer__news .cp-alert-form h3 { color: #fff; }
.cp-footer__news .cp-alert-form p { color: rgba(255, 255, 255, 0.8); }
.cp-footer__news .cp-alert-form__input {
	background: rgba(255, 255, 255, 0.96);
	border-color: transparent;
	color: var(--cp-ink);
}
.cp-footer__news .cp-alert-form__input:focus { border-color: #fff; }
.cp-footer__news .cp-alert-form__legal { color: rgba(255, 255, 255, 0.62); }

/* Barra inferior. */
.cp-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 28px;
	padding-block: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.65);
}

.cp-footer__made {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cp-footer__made a { color: #fff; font-weight: 600; }
.cp-footer__made a:hover { text-decoration: underline; }

.cp-flag-cl {
	border-radius: 2px;
	vertical-align: middle;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.cp-footer__note { margin-left: auto; }

@media (max-width: 700px) {
	.cp-footer__note { margin-left: 0; flex-basis: 100%; }
}

/* ── Bloque SEO de ancho completo ──────────────────────────
 * Texto de posicionamiento antes del footer. Ancho completo, tono discreto:
 * es para buscadores y para quien de verdad quiera leer de qué va el sitio, sin
 * competir con las promos. */
.cp-seo {
	border-top: 1px solid var(--cp-rule);
	background: var(--cp-bg-alt);
	padding-block: 48px;
}

.cp-seo__inner { max-width: 900px; }

.cp-seo h2 {
	font-size: 1.15rem;
	margin: 0 0 14px;
	color: var(--cp-ink);
}

.cp-seo p {
	color: var(--cp-ink-mid);
	font-size: 0.92rem;
	line-height: 1.7;
	margin: 0 0 12px;
}

.cp-seo p:last-child { margin-bottom: 0; }
.cp-seo a { color: var(--cp-accent); }
.cp-seo strong { color: var(--cp-ink); font-weight: 600; }