/**
 * components.css — Capa GLOBAL de primitivos del sistema «Minimal refinado».
 *
 * Se encola en TODAS las páginas (inc/enqueue.php, después de main.css), para
 * que cualquier plantilla herede el look refinado del rediseño Home sin tener
 * que re-declarar los componentes en su CSS por-página.
 *
 * Fuente: estos primitivos nacieron scoped en assets/css/parts/home.css
 * (rediseño Home, 2026-06-15) y se promovieron aquí en la Ola 1 (Fundación,
 * 2026-06-15) para hacerlos compartidos. home.css conserva SOLO lo específico
 * de la Home (hero + stack 3D, trustbar, infra cards, ruta, testimonios, lead
 * magnet, últimas, CTA).
 *
 * Todos los tokens (--teal-*, --coral*, --mint-50, --color-cream, --paper,
 * --ink, --muted, --line, --line-2, --r-*, --shadow-layer-*, --font-serif)
 * viven en :root de main.css. Aquí NO se hardcodean colores/formas.
 *
 * Namespacing `dm-` para no colisionar con los componentes globales legacy
 * (.section-header, .section-label, .btn, .card) que aún usan plantillas
 * previas a la Ola 2.
 *
 * Ver DESIGN.md → «Componentes compartidos (globales)».
 * @package Datamorfosis
 */

/* ================================================
   EYEBROW — etiqueta de sección coral con guion corto
   ================================================ */
.dm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--coral-600);
}

.dm-eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--coral);
	border-radius: 2px;
}

.dm-eyebrow--ondark {
	color: #ff9d85;
}

/* ================================================
   SECTION HEAD + TÍTULOS + LEAD
   ================================================ */
.dm-section-head {
	max-width: 680px;
	margin-bottom: clamp(40px, 5vw, 64px);
}

.dm-section-head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.dm-section-head--center .dm-eyebrow::before {
	display: none;
}

.dm-title {
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--teal-700);
	margin: 16px 0 0;
}

.dm-lead {
	font-size: clamp(16px, 1.4vw, 18.5px);
	color: var(--muted);
	margin-top: 16px;
	max-width: 62ch;
	line-height: 1.6;
}

.dm-section-head--center .dm-lead {
	margin-left: auto;
	margin-right: auto;
}

.dm-section-cta {
	margin-top: 38px;
}

/* ================================================
   RITMO DE FONDOS POR SECCIÓN (bandas de color)
   ================================================ */
.dm-bg-mint {
	background: var(--mint-50);
}

.dm-bg-paper {
	background: var(--paper);
}

.dm-bg-cream {
	background: var(--color-cream);
}

.dm-bg-teal {
	background: linear-gradient(165deg, var(--teal-800), var(--teal-900));
	color: #eaf1ef;
}

.dm-bg-teal .dm-eyebrow {
	color: #ff9d85;
}

.dm-bg-teal .dm-title {
	color: #fff;
}

.dm-bg-teal .dm-lead {
	color: #c0d6d0;
}

/* ================================================
   BOTONES (pill, con disciplina coral)
   primary (coral) · ghost · ghost-dark · ondark · text-link con flecha
   ================================================ */
.dm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 15.5px;
	line-height: 1.2;
	border-radius: var(--r-pill);
	padding: 14px 24px;
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dm-btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.dm-btn--primary {
	background: var(--coral);
	color: #3a160d;
	box-shadow: 0 8px 20px -8px rgba(255, 122, 91, 0.7);
}

.dm-btn--primary:hover {
	background: var(--coral-600);
	color: #3a160d;
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -10px rgba(255, 122, 91, 0.75);
}

.dm-btn--ghost {
	background: transparent;
	color: var(--teal-700);
	border-color: var(--line-2);
}

.dm-btn--ghost:hover {
	color: var(--teal-700);
	border-color: var(--teal-300);
	background: rgba(34, 61, 59, 0.03);
	transform: translateY(-2px);
}

.dm-btn--ghost-dark {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.28);
}

.dm-btn--ghost-dark:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.45);
	transform: translateY(-2px);
}

.dm-btn--ondark {
	background: var(--coral);
	color: #3a160d;
}

.dm-btn--ondark:hover {
	background: #ff8e73;
	color: #3a160d;
	transform: translateY(-2px);
}

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

.dm-btn:disabled,
.dm-btn[disabled] {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

.dm-btn:focus-visible {
	outline: 3px solid var(--coral);
	outline-offset: 3px;
}

/* Text-link con flecha — la flecha avanza en hover (estilo Linear/Stripe).
   Variante ligera para "Ver más", "Leer artículo", etc. */
.dm-text-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 800;
	font-size: 15px;
	color: var(--coral-600);
	text-decoration: none;
	transition: gap 0.18s ease, color 0.2s ease;
}

.dm-text-link svg,
.dm-text-link .dm-arrow {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform 0.18s ease;
}

.dm-text-link:hover {
	color: var(--coral);
	gap: 10px;
}

.dm-text-link:hover svg,
.dm-text-link:hover .dm-arrow {
	transform: translateX(3px);
}

.dm-text-link--ondark {
	color: #ff9d85;
}

.dm-text-link--ondark:hover {
	color: #ffb69f;
}

/* ================================================
   CARD BASE — borde hairline + sombra en capas + hover-lift
   Tarjeta genérica reutilizable para cualquier página (Ola 2).
   La Home usa sus variantes específicas (.dm-icard, .dm-acard,
   .driver-card tratada) que NO dependen de esta base.
   ================================================ */
.dm-card {
	position: relative;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 28px 26px;
	box-shadow: var(--shadow-layer-sm);
	transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}

.dm-card--lift:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-layer-lg);
	border-color: transparent;
}

/* Acento superior que aparece en hover (coral por defecto, override con
   --accent en línea o por modificador). Activar con .dm-card--topbar. */
.dm-card--topbar {
	overflow: hidden;
}

.dm-card--topbar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--accent, var(--coral));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.dm-card--topbar:hover::before {
	transform: scaleX(1);
}

/* ================================================
   CHIPS / TAGS — etiquetas pill y de categoría
   ================================================ */
.dm-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--teal-700);
	background: rgba(34, 61, 59, 0.06);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	padding: 5px 12px;
}

.dm-chip--coral {
	color: var(--coral-600);
	background: rgba(255, 122, 91, 0.1);
	border-color: rgba(255, 122, 91, 0.22);
}

.dm-chip--ondark {
	color: #eaf1ef;
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.16);
}

/* Tag de categoría (texto suelto en mayúsculas, sin píldora) — para
   metadatos de artículos/cards. */
.dm-tag {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--coral-600);
}

/* ================================================
   CTA FINAL (sección verde profundo, textura de puntos)
   Bloque de cierre reutilizable: verde full-bleed que se funde con el footer.
   Nació scoped en home.css (rediseño Home); se promueve aquí en la Ola 2,
   Tanda B, porque CUALQUIER página de cierre lo necesita (Nosotros, Cómo
   trabajamos, Soluciones, Conocimiento…). home.css conserva su propia copia
   idéntica (carga después, sin regresión). Para fundir con el footer en una
   página, anula el margen del footer con body.<clase>: .site-footer{margin-top:0}.
   ================================================ */
.dm-cta {
	position: relative;
	background: linear-gradient(160deg, var(--teal-800), var(--teal-900));
	color: #fff;
	overflow: hidden;
}

.dm-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 30px 30px;
	-webkit-mask-image: radial-gradient(60% 80% at 50% 50%, #000, transparent);
	mask-image: radial-gradient(60% 80% at 50% 50%, #000, transparent);
	pointer-events: none;
}

.dm-cta .container {
	position: relative;
	text-align: center;
	padding: clamp(64px, 8vw, 104px) var(--space-6);
}

.dm-cta__title {
	font-size: clamp(28px, 3.8vw, 46px);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
	max-width: 18ch;
	margin: 0 auto;
	color: #fff;
}

.dm-cta__text {
	color: #bcd3cd;
	font-size: 18px;
	margin: 20px auto 32px;
	max-width: 48ch;
}

/* Placeholder genérico (sin contenido aún): caja punteada en mint. */
.dm-placeholder-block {
	border: 1px dashed var(--line-2);
	border-radius: var(--r-md);
	padding: 32px;
	text-align: center;
	color: var(--muted);
	font-style: italic;
	background: var(--mint-50);
	grid-column: 1 / -1;
}