/* ═══════════════════════════════════════════════════════════════════════════
   Secciones. Cada bloque tiene su propia forma: la página no es una pila de
   tarjetas iguales, sino una secuencia con ritmo.
   ═══════════════════════════════════════════════════════════════════════════ */

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

.hero {
	min-height: calc(100dvh - var(--nav-h));
	display: flex;
	align-items: center;
	padding-top: clamp(3rem, 6vw, 5.5rem);
	padding-bottom: clamp(3rem, 7vw, 5rem);
	overflow: hidden;
}

/* Halo de señal: un solo foco, como la cabecera de la PWA. El burdeos aporta
   la profundidad; el rojo puro se reserva para la alerta. */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(90rem 45rem at 68% -10%, var(--signal-dim), transparent 58%),
		radial-gradient(60rem 34rem at 84% 22%, var(--burgundy-veil), transparent 66%),
		radial-gradient(50rem 30rem at 8% 5%, rgba(255, 255, 255, 0.045), transparent 62%);
}

.hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	align-items: center;
	gap: clamp(2.5rem, 5vw, 4rem);
}

.hero h1 {
	font-size: clamp(2.5rem, 5.4vw, 3.875rem);
	margin-block: 1.25rem 1.5rem;
	max-width: 16ch;
}

.hero .lede {
	max-width: 48ch;
	font-size: clamp(1.0625rem, 1.7vw, 1.1875rem);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin-top: 2.25rem;
}

.hero-proof {
	display: grid;
	gap: 0.75rem;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--line);
}

.hero-proof li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: 0.9375rem;
	color: var(--text-3);
}

.hero-proof .ico {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--text-2);
}

.hero-visual {
	position: relative;
	justify-self: center;
}

.phone-hero {
	rotate: 1.5deg;
}

/* Tarjeta de aviso: nace pegada al teléfono y entra desde él. */
.hero-alert {
	position: absolute;
	left: -12%;
	bottom: 30%;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.8rem 1.1rem 0.8rem 0.9rem;
	border-radius: var(--r-small);
	border: 1px solid var(--line-signal);
	background: linear-gradient(152deg, rgba(211, 21, 36, 0.28), rgba(94, 15, 25, 0.2)),
		rgba(14, 16, 21, 0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: var(--shadow-lift);
	animation: alert-in 620ms var(--ease-spring) 900ms both;
}

@keyframes alert-in {
	from {
		opacity: 0;
		transform: translate(14px, 10px) scale(0.94);
	}
}

.hero-alert strong {
	display: block;
	font-family: var(--font-instrument);
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
}

.hero-alert span {
	font-size: 0.8125rem;
	color: var(--text-3);
}

.hero-alert-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--signal-bright);
	box-shadow: 0 0 0 0 rgba(255, 89, 100, 0.55);
	animation: alert-pulse 2.2s ease-out infinite;
}

@keyframes alert-pulse {
	70% {
		box-shadow: 0 0 0 10px rgba(255, 89, 100, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 89, 100, 0);
	}
}

/* ── Coste ────────────────────────────────────────────────────────────────── */

.cost-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.cost-cell {
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--r-card);
	border: 1px solid var(--line);
	background: var(--surface-1);
}

.cost-cell.is-ours {
	background: linear-gradient(158deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 60%),
		var(--surface-2);
	border-color: var(--line-strong);
	box-shadow: var(--shadow-surface);
}

.cost-cell h3 {
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-3);
	font-weight: 600;
	margin-bottom: 1rem;
}

.cost-cell p:not(.figure) {
	color: var(--text-3);
	font-size: 0.9375rem;
	margin-top: 0.75rem;
}

/* ── Funciones (bento) ────────────────────────────────────────────────────── */

.bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.tile {
	border-radius: var(--r-card);
	border: 1px solid var(--line);
	background: var(--surface-1);
	padding: clamp(1.5rem, 3vw, 2rem);
	transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) ease;
}

@media (hover: hover) and (pointer: fine) {
	.tile:hover {
		transform: translateY(-2px);
		border-color: var(--line-strong);
	}
}

.tile > .ico {
	width: 1.75rem;
	height: 1.75rem;
	margin-bottom: 1.25rem;
	color: var(--text-2);
}

.tile h3 {
	font-size: 1.125rem;
	margin-bottom: 0.6rem;
}

.tile p {
	color: var(--text-3);
	font-size: 0.9375rem;
}

/* El beneficio va separado del qué-hace: son dos lecturas distintas. */
.tile-benefit {
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--line);
	color: var(--text-2) !important;
}

.tile-benefit strong {
	color: var(--text-1);
	font-weight: 600;
}

/* Pieza principal: texto e imagen del producto, ocupa dos columnas. */
.tile-lead {
	grid-column: span 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: 0;
	align-items: center;
	padding: 0;
	overflow: hidden;
}

.tile-lead .tile-copy {
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.tile-lead .ico {
	width: 1.75rem;
	height: 1.75rem;
	margin-bottom: 1.25rem;
	color: var(--signal-bright);
}

.tile-shot {
	margin: 0;
	height: 100%;
	min-height: 14rem;
}

.tile-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Celda de aviso: el único sitio de esta sección donde el rojo manda. */
.tile-alert {
	grid-column: span 3;
	background: linear-gradient(152deg, rgba(211, 21, 36, 0.2), rgba(94, 15, 25, 0.06) 58%),
		var(--surface-1);
	border-color: var(--line-signal);
}

.tile-alert > .ico {
	color: var(--signal-bright);
}

.tile-alert h3 {
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);
	max-width: 24ch;
}

.tile-alert p {
	color: var(--text-2);
	max-width: 58ch;
}

.tile-quiet {
	background: linear-gradient(158deg, rgba(72, 185, 139, 0.08), rgba(255, 255, 255, 0.01) 55%),
		var(--surface-1);
}

.tile-quiet > .ico {
	color: var(--success);
}

/* ── Banda de privacidad ──────────────────────────────────────────────────── */

.band {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-top-color: transparent;
	background: linear-gradient(180deg, var(--surface-0), var(--burgundy-deep) 28%, var(--surface-0) 82%);
}

.band-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: end;
}

.statement {
	font-family: var(--font-instrument);
	font-weight: 700;
	font-size: clamp(1.75rem, 4.2vw, 2.875rem);
	line-height: 1.12;
	letter-spacing: -0.025em;
	max-width: 20ch;
	margin-top: 1rem;
}

.band-points {
	display: grid;
	gap: 1.5rem;
}

.band-points li {
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	color: var(--text-3);
	font-size: 0.9375rem;
}

.band-points strong {
	display: block;
	color: var(--text-1);
	font-family: var(--font-instrument);
	font-size: 1.0625rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
	letter-spacing: -0.01em;
}

/* ── Proceso ──────────────────────────────────────────────────────────────── */

.process {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: clamp(1.75rem, 3.5vw, 2.5rem);
}

.process li {
	padding-top: 1.75rem;
	border-top: 1px solid var(--line-strong);
}

.process-num {
	font-family: var(--font-instrument);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	color: var(--signal-bright);
	display: block;
	margin-bottom: 0.75rem;
}

.process h3 {
	font-size: 1.0625rem;
	margin-bottom: 0.5rem;
}

.process p {
	color: var(--text-3);
	font-size: 0.9375rem;
	max-width: 34ch;
}

/* ── Casos de uso ─────────────────────────────────────────────────────────── */

/* Rejilla editorial, sin tarjeta dentro de tarjeta: las separa una línea. */
.cases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	overflow: hidden;
}

.case {
	background: var(--surface-0);
	padding: clamp(1.75rem, 3vw, 2.25rem);
	transition: background-color var(--t-base) ease;
}

@media (hover: hover) and (pointer: fine) {
	.case:hover {
		background: var(--surface-1);
	}
}

.case h3 {
	font-size: 1.125rem;
	margin-bottom: 0.65rem;
}

.case p {
	color: var(--text-3);
	font-size: 0.9375rem;
}

.case-note {
	/* Cierra la rejilla a ancho completo, sea cual sea el número de columnas. */
	grid-column: 1 / -1;
	background: linear-gradient(158deg, rgba(94, 15, 25, 0.35), rgba(255, 255, 255, 0.01) 60%),
		var(--surface-1);
}

/* ── Planes ───────────────────────────────────────────────────────────────── */

.plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: stretch;
}

.plan {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--r-card);
	border: 1px solid var(--line);
	background: var(--surface-1);
	transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) ease;
}

.plan.is-featured {
	background: linear-gradient(158deg, rgba(255, 255, 255, 0.09), rgba(94, 15, 25, 0.14) 62%),
		var(--surface-2);
	border-color: var(--line-strong);
	box-shadow: var(--shadow-surface);
}

@media (hover: hover) and (pointer: fine) {
	.plan:hover {
		transform: translateY(-3px);
		border-color: var(--line-strong);
	}
}

.plan-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.plan-name {
	font-size: 1.5rem;
}

.plan-badge {
	font-family: var(--font-instrument);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--surface-0);
	background: var(--text-1);
	padding: 0.25rem 0.6rem;
	border-radius: var(--r-pill);
}

.plan-tagline {
	color: var(--signal-bright);
	font-family: var(--font-instrument);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-top: 0.35rem;
}

.plan-audience {
	color: var(--text-3);
	font-size: 0.9375rem;
	margin-top: 1rem;
}

.plan-price {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.plan-price-value {
	font-family: var(--font-instrument);
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--text-1);
}

/* Sin precio definido: se dice, no se inventa una cifra. */
.plan-price-pending .plan-price-value {
	font-size: 1.25rem;
	color: var(--text-2);
}

.plan-price-note {
	font-size: 0.8125rem;
	color: var(--text-3);
	margin-top: 0.35rem;
}

.plan-features {
	display: grid;
	gap: 0.65rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.plan-features li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: 0.9375rem;
	color: var(--text-2);
}

.plan-features .ico {
	width: 1rem;
	height: 1rem;
	margin-top: 0.3rem;
	color: var(--success);
}

.plan-section-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-3);
	margin-top: 1.5rem;
	margin-bottom: 0.6rem;
}

.plan-limits li {
	position: relative;
	font-size: 0.875rem;
	color: var(--text-3);
	padding-left: 1rem;
	margin-bottom: 0.4rem;
}

.plan-limits li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 6px;
	height: 1px;
	background: var(--text-4);
}

.plan-support {
	font-size: 0.875rem;
	color: var(--text-3);
}

.plan-cta {
	margin-top: auto;
	padding-top: 1.75rem;
}

.plan-cta .btn {
	width: 100%;
}

.plan-excluded-note {
	font-size: 0.8125rem;
	color: var(--text-3);
	margin-top: 0.85rem;
	text-align: center;
}

/* ── Comparativa ──────────────────────────────────────────────────────────── */

.compare {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.compare-title {
	font-size: 1.125rem;
	margin-bottom: 1.25rem;
}

/* En móvil la tabla se desplaza dentro de su caja: el body nunca lo hace. */
.compare-scroll {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	/* Sombras laterales que solo aparecen si hay contenido oculto por desplazar. */
	background:
		linear-gradient(90deg, var(--surface-1) 30%, transparent) left / 2rem 100% no-repeat local,
		linear-gradient(270deg, var(--surface-1) 30%, transparent) right / 2rem 100% no-repeat local,
		linear-gradient(90deg, rgba(255, 255, 255, 0.07), transparent) left / 0.9rem 100% no-repeat scroll,
		linear-gradient(270deg, rgba(255, 255, 255, 0.07), transparent) right / 0.9rem 100% no-repeat scroll,
		var(--surface-1);
	-webkit-overflow-scrolling: touch;
}

.compare table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.compare th,
.compare td {
	padding: 0.85rem 1.1rem;
	text-align: left;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.compare thead th {
	background: var(--surface-2);
	font-family: var(--font-instrument);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-2);
	font-weight: 700;
}

.compare tbody th {
	font-weight: 500;
	font-family: var(--font-body);
	color: var(--text-2);
	letter-spacing: 0;
}

.compare td {
	text-align: center;
	width: 8rem;
}

.compare tr:last-child th,
.compare tr:last-child td {
	border-bottom: none;
}

.compare .ico {
	width: 1.1rem;
	height: 1.1rem;
	margin-inline: auto;
	color: var(--success);
}

.compare .is-off {
	color: var(--text-4);
	font-size: 1.125rem;
	line-height: 1;
}

/* ── Exclusiones ──────────────────────────────────────────────────────────── */

.excluded {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding: clamp(1.75rem, 3.5vw, 2.5rem);
	border-radius: var(--r-card);
	border: 1px solid var(--line-strong);
	background: linear-gradient(158deg, rgba(94, 15, 25, 0.3), rgba(255, 255, 255, 0.015) 62%),
		var(--surface-1);
}

.excluded h3 {
	font-size: 1.25rem;
	margin-bottom: 0.75rem;
}

.excluded p {
	color: var(--text-2);
	font-size: 0.9375rem;
}

.excluded-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	gap: 0.65rem 1.5rem;
}

.excluded-list li {
	display: flex;
	gap: 0.55rem;
	align-items: baseline;
	font-size: 0.9375rem;
	color: var(--text-2);
}

.excluded-list li::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--signal);
	flex: none;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.faq-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.faq-grid .section-head {
	margin-bottom: 0;
	position: sticky;
	top: calc(var(--nav-h) + 2rem);
}

.faq-list details {
	border-bottom: 1px solid var(--line);
}

.faq-list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-instrument);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	color: var(--text-1);
	transition: color var(--t-base) ease;
}

.faq-list summary::-webkit-details-marker {
	display: none;
}

.faq-list summary .ico {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--text-3);
	transition: transform var(--t-base) var(--ease-out), color var(--t-base) ease;
}

.faq-list details[open] summary .ico {
	transform: rotate(180deg);
	color: var(--signal);
}

@media (hover: hover) and (pointer: fine) {
	.faq-list summary:hover {
		color: var(--signal-bright);
	}
}

/* El cuerpo se despliega desde su cabecera, sin salto brusco. */
.faq-body {
	padding-bottom: 1.5rem;
	color: var(--text-3);
	font-size: 0.9375rem;
	max-width: 62ch;
	animation: faq-open var(--t-base) var(--ease-out);
}

@keyframes faq-open {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

/* ── Cabecera de página interior ──────────────────────────────────────────── */
/* Más contenida que el hero de portada: sitúa, no vende. */

.page-hero {
	padding-top: clamp(3.5rem, 8vw, 6rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
	overflow: hidden;
}

.page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(70rem 30rem at 12% -30%, var(--burgundy-veil), transparent 62%),
		radial-gradient(50rem 24rem at 78% -20%, var(--signal-dim), transparent 60%);
}

.page-hero .wrap {
	position: relative;
}

.page-hero h1 {
	font-size: clamp(2.25rem, 5.4vw, 3.5rem);
	margin-block: 1.25rem 1.5rem;
	max-width: 18ch;
}

.page-hero .lede {
	font-size: clamp(1.0625rem, 1.7vw, 1.1875rem);
}

/* ── Tarjetas de exploración ──────────────────────────────────────────────── */

.explore {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	overflow: hidden;
}

.explore-card {
	position: relative;
	display: block;
	background: var(--surface-0);
	padding: clamp(1.5rem, 3vw, 2rem);
	padding-bottom: 3.5rem;
	transition: background-color var(--t-base) ease;
}

.explore-num {
	font-family: var(--font-instrument);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	color: var(--signal-bright);
	display: block;
	margin-bottom: 0.9rem;
}

.explore-card h3 {
	font-size: 1.125rem;
	margin-bottom: 0.5rem;
}

.explore-card p {
	color: var(--text-3);
	font-size: 0.9375rem;
}

.explore-go {
	position: absolute;
	left: clamp(1.5rem, 3vw, 2rem);
	bottom: clamp(1.25rem, 2.5vw, 1.5rem);
	display: inline-flex;
	color: var(--text-3);
	transition: transform var(--t-base) var(--ease-out), color var(--t-base) ease;
}

@media (hover: hover) and (pointer: fine) {
	.explore-card:hover {
		background: var(--surface-1);
	}

	.explore-card:hover .explore-go {
		transform: translateX(5px);
		color: var(--text-1);
	}
}

/* ── Banda de llamada a la acción ─────────────────────────────────────────── */

.cta-band {
	padding-block: 0 var(--section-y);
}

.cta-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(2rem, 4.5vw, 3.25rem);
	border-radius: var(--r-card);
	border: 1px solid var(--line-strong);
	background: linear-gradient(152deg, rgba(94, 15, 25, 0.42), rgba(255, 255, 255, 0.02) 62%),
		var(--surface-1);
	box-shadow: var(--shadow-surface);
}

.cta-inner .h2 {
	font-size: clamp(1.625rem, 3.4vw, 2.25rem);
	max-width: 20ch;
}

.cta-inner .lede {
	margin-top: 0.9rem;
	max-width: 50ch;
}

.cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (max-width: 860px) {
	.cta-inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Pie ──────────────────────────────────────────────────────────────────── */

.foot {
	border-top: 1px solid var(--line);
	padding-block: 3rem;
	color: var(--text-3);
	font-size: 0.875rem;
}

.foot-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 3rem;
	align-items: start;
	justify-content: space-between;
}

.foot-brand p {
	margin-top: 0.85rem;
	max-width: 38ch;
}

.foot-links {
	display: grid;
	gap: 0.6rem;
}

.foot-links a {
	padding-block: 0.8rem;
	margin-block: -0.8rem;
	transition: color var(--t-base) ease;
}

@media (hover: hover) and (pointer: fine) {
	.foot-links a:hover {
		color: var(--text-1);
	}
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

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

	.faq-grid .section-head {
		position: static;
	}
}

@media (min-width: 981px) {
	.bento > .tile:nth-last-child(2) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 980px) {
	.hero-grid,
	.band-split,
	.excluded {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero {
		min-height: 0;
	}

	/* En móvil manda el mensaje: titular y CTA primero, la captura después. */
	.hero-visual {
		margin-top: 1rem;
	}

	.phone-hero {
		rotate: 0deg;
		width: min(240px, 64vw);
	}

	.hero-alert {
		left: auto;
		right: -4%;
		bottom: 30%;
	}

	.cost-grid,
	.bento {
		grid-template-columns: minmax(0, 1fr);
	}

	.tile-lead,
	.tile-alert {
		grid-column: auto;
	}

	.tile-lead {
		grid-template-columns: minmax(0, 1fr);
	}

	.tile-shot {
		min-height: 12rem;
		order: -1;
	}

	.statement {
		max-width: none;
	}
}

@media (max-width: 560px) {
	.hero-alert {
		right: 0;
		bottom: 30%;
		padding: 0.7rem 0.9rem;
	}

	.hero-alert strong {
		font-size: 0.875rem;
	}

	/* Las cuatro columnas caben a 390px sin desplazar. */
	.compare table {
		min-width: 0;
		font-size: 0.875rem;
	}

	.compare th,
	.compare td {
		padding: 0.75rem 0.5rem;
	}

	.compare thead th {
		font-size: 0.75rem;
		letter-spacing: 0.02em;
	}

	.compare td {
		width: 4.5rem;
	}
}