/* ─── Lo esencial — respuestas rápidas bajo el hero ───────────────────────
   Bloque deliberadamente sobrio: es información, no escaparate. La home ya
   tiene 11 pantallas de marca; esto es lo único que un cliente necesita leer
   para decidir si nos escribe.

   Fondo claro a propósito, para que corte con el hero oscuro y se lea de un
   vistazo. Va excluido del motor de skins en functions.php (igual que la banda
   de la llanta): si lo clasificara, le pondría su propio fondo con !important.
   ------------------------------------------------------------------------ */

.twl-esencial {
	background: #f5f6f1;
	color: #151517;
	padding: clamp(40px, 6vh, 76px) 0 clamp(36px, 5vh, 64px);
}

.twl-esencial__inner {
	width: min(92vw, 1180px);
	margin: 0 auto;
}

.twl-esencial__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	font-family: 'JetBrains Mono', monospace;
	font-size: clamp(.62rem, 1vw, .74rem);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #5d6066;              /* 5,03 sobre #f5f6f1 */
	margin: 0 0 .7rem;
}
.twl-esencial__eyebrow::before,
.twl-esencial__eyebrow::after {
	content: "";
	width: 26px;
	height: 1px;
	background: #ff6a00;
}

.twl-esencial__title {
	font-family: 'Conthrax', 'Inter', sans-serif;
	font-weight: 700;
	font-size: clamp(1.4rem, 3vw, 2.3rem);
	line-height: 1.12;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: #151517;
	margin: 0 0 clamp(24px, 4vh, 44px);
}
.twl-esencial__title b { color: #b8490a; font-weight: 700; }   /* 4,71 sobre #f5f6f1 */

.twl-esencial__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2vw, 28px);
}

.twl-esencial__item {
	border-top: 2px solid rgba(21, 21, 23, .14);
	padding-top: clamp(14px, 2vh, 20px);
}

.twl-esencial__dato {
	display: block;
	font-family: 'Conthrax', 'Inter', sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	line-height: 1;
	color: #b8490a;
	margin-bottom: 6px;
}

.twl-esencial__label {
	display: block;
	font-size: clamp(12px, 1.05vw, 14px);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #151517;
	margin-bottom: 8px;
}

.twl-esencial__nota {
	margin: 0;
	font-size: max(14px, .875rem);
	line-height: 1.55;
	color: #3d3f45;              /* 8,9 sobre #f5f6f1 */
}
.twl-esencial__nota a {
	color: #b8490a;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.twl-esencial__pie {
	margin-top: clamp(28px, 4vh, 48px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(14px, 2vw, 28px);
	border-top: 1px solid rgba(21, 21, 23, .12);
	padding-top: clamp(18px, 2.5vh, 28px);
}

.twl-esencial__envio {
	margin: 0;
	flex: 1 1 380px;
	font-size: max(14px, .875rem);
	line-height: 1.55;
	color: #3d3f45;
}

.twl-esencial__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.twl-esencial__cta {
	display: inline-flex;
	align-items: center;
	background: #ff6a00;
	color: #151517;              /* 6,4 sobre el naranja; el blanco se queda en 2,87 */
	font-family: 'Conthrax', 'Arial Narrow', sans-serif;
	font-size: clamp(12px, 1.1vw, 14px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 14px 22px;
	border-radius: 4px;
	text-decoration: none;
}
.twl-esencial__cta:hover { filter: brightness(1.06); }

.twl-esencial__tel {
	font-family: 'Conthrax', 'Inter', sans-serif;
	font-weight: 700;
	font-size: clamp(14px, 1.3vw, 17px);
	color: #151517;
	text-decoration: none;
	white-space: nowrap;
}
.twl-esencial__tel:hover { color: #b8490a; }

@media (max-width: 900px) {
	.twl-esencial__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.twl-esencial__grid { grid-template-columns: 1fr; gap: 18px; }
	.twl-esencial__pie  { flex-direction: column; align-items: flex-start; }
	.twl-esencial__acciones { width: 100%; }
	.twl-esencial__cta { flex: 1 1 auto; justify-content: center; }
}