/**
 * CHANGE-ORDER-01 § Parte B — "Pantalla de Inicio" (¿Cómo quieres
 * empezar?). Valores tomados literal del change order (no hay referencia
 * en Editor 2026.dc.html, esta pantalla es nueva — ver la nota grande en
 * frontend/templates/screen-intro.php).
 *
 * DISTILL (auditoría /impeccable critique): este archivo evadía el
 * sistema de tokens casi por completo — todo color en hex crudo
 * (incluidos 2 acentos inventados, #0E8C81/#5A3DAE, que no existen en
 * wccd-tokens.css) y espaciado fuera de la escala oficial
 * (4/6/8/10/14/18/22/24/34). Pasada completa acá: cada color se mapeó al
 * var(--wccd-*) exacto donde existe uno, o al más cercano semánticamente
 * correcto donde no hay un match exacto (documentado caso por caso abajo);
 * cada margin/padding suelto se ajustó al escalón más cercano de la
 * escala vía var(--wccd-space-N) — en empates entre dos escalones
 * igual de cerca, se redondeó hacia arriba (más aire, no menos).
 *
 * TYPESET (pase de cierre, mismo día): las 4 etiquetas DM Mono de este
 * archivo (.wccd-intro__steps, .wccd-intro__model-kicker,
 * .wccd-intro-card__kicker, .wccd-intro-card__preview--free) tenían cada
 * una su propio letter-spacing suelto (.1/.12/.14/.06em) en vez de
 * var(--wccd-label-letter-spacing) (.16em) — la misma inconsistencia de
 * tracking que el pase de Distill había encontrado pero dejado fuera de
 * alcance. Unificadas acá: las 4 quedan en el tracking oficial de
 * cualquier etiqueta mono del sistema.
 */

#wccd-intro-screen[hidden] { display: none; }

#wccd-intro-screen {
	max-width: 1040px;
	margin: var(--wccd-space-9) auto;
	background: var(--wccd-panel);
	border: 1px solid var(--wccd-line);
	border-radius: 20px;
	/* 40/42/44 → todos por encima del escalón más alto de la escala (34) —
	   colapsan al mismo var(--wccd-space-9), así que un solo valor alcanza. */
	padding: var(--wccd-space-9);
	/* Duplicaba --wccd-shadow-shell literal en vez de referenciarlo —
	   mismo valor exacto, encontrado por el propio detector de la
	   auditoría. */
	box-shadow: var(--wccd-shadow-shell);
}

#wccd-intro-screen .wccd-intro__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wccd-space-7); /* 20 → 22, empate 18/22, redondeado arriba */
	flex-wrap: wrap;
	margin-bottom: var(--wccd-space-8); /* 28 → 24 */
}
#wccd-intro-screen .wccd-intro__steps {
	display: flex;
	gap: var(--wccd-space-5);
	font-family: var(--wccd-font-mono);
	font-size: 11px;
	letter-spacing: var(--wccd-label-letter-spacing);
	color: var(--wccd-label);
	margin-bottom: var(--wccd-space-5);
}
#wccd-intro-screen .wccd-intro__step.is-active { color: var(--wccd-ink); font-weight: 500; }
/* #wccd-intro-screen ancla el selector a propósito — mismo bug real que
   .wccd-review__title (review.css): un <h2> nativo pierde el empate de
   especificidad contra el H2 global del Kit de Elementor del theme
   (.elementor-kit-XXX h2{...}), verificado en vivo contra
   cellphonecase.co (Rey + Elementor). color explícito porque la regla
   del theme también fija color en el propio h2. */
#wccd-intro-screen .wccd-intro__title {
	font-family: var(--wccd-font-ui);
	font-size: 30px;
	font-weight: 600;
	color: var(--wccd-ink);
	letter-spacing: -.025em;
	margin: 0 0 var(--wccd-space-3);
}
#wccd-intro-screen .wccd-intro__subtitle {
	font-size: 14px;
	color: var(--wccd-ink-soft);
	max-width: 480px;
	line-height: 1.6;
	margin: 0;
}
#wccd-intro-screen .wccd-intro__model-chip {
	flex: 0 0 auto;
	border: 1px solid var(--wccd-line);
	border-radius: 12px;
	padding: var(--wccd-space-4) var(--wccd-space-5); /* 9→10, 14 exacto */
	display: flex;
	flex-direction: column;
	gap: var(--wccd-space-1); /* 3 → 4 */
}
#wccd-intro-screen .wccd-intro__model-kicker {
	font-family: var(--wccd-font-mono);
	font-size: 10px;
	letter-spacing: var(--wccd-label-letter-spacing);
	color: var(--wccd-label);
}
#wccd-intro-screen .wccd-intro__model-name { font-size: 13.5px; font-weight: 500; color: var(--wccd-ink); }

#wccd-intro-screen .wccd-intro__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--wccd-space-7); /* 20 → 22, mismo criterio que .wccd-intro__head */
}

#wccd-intro-screen .wccd-intro-card {
	padding: var(--wccd-space-7);
	border-radius: 18px;
	border: 1px solid var(--wccd-line);
	background: var(--wccd-panel);
	display: flex;
	flex-direction: column;
	gap: var(--wccd-space-6); /* 16 → 18, empate 14/18, redondeado arriba */
	transition: .15s;
	cursor: pointer;
	text-align: left;
	font-family: var(--wccd-font-ui);
}
#wccd-intro-screen .wccd-intro-card:disabled { cursor: not-allowed; opacity: .5; }

#wccd-intro-screen .wccd-intro-card--free.is-selected,
#wccd-intro-screen .wccd-intro-card--free:focus-visible {
	border-color: var(--wccd-menta);
	/* rgba literal, no var() — mismo patrón ya establecido en el resto del
	   sistema para anillos de foco semitransparentes (.wccd-swatch.is-active
	   en editor-panels.css hace lo mismo con violeta): un custom property
	   guarda un color completo, no sus 3 canales sueltos para componer un
	   rgba(), así que este valor no tiene una forma var() posible sin
	   agregar una infraestructura de tokens nueva que ningún otro archivo
	   usa todavía. Los canales sí son exactamente los de --wccd-menta. */
	box-shadow: 0 0 0 3px rgba(18, 206, 189, .18);
	/* Sin token exacto para este mint casi blanco — el más cercano
	   semánticamente correcto es --wccd-ok-bg (ya documentado como "aviso
	   menta", el mismo significado "elegiste bien" que esta tarjeta
	   seleccionada comunica), en vez de inventar un --wccd-menta-soft
	   nuevo que ningún otro archivo necesita hoy. */
	background: var(--wccd-ok-bg);
}
#wccd-intro-screen .wccd-intro-card--tpl.is-selected,
#wccd-intro-screen .wccd-intro-card--tpl:focus-visible {
	border-color: var(--wccd-violeta);
	box-shadow: 0 0 0 3px rgba(107, 75, 192, .16); /* mismo criterio que el rgba de menta arriba — canales de --wccd-violeta. */
	/* --wccd-violeta-soft: mismo token que ya representa "activo/
	   seleccionado" en tiles/swatches/chips en todo el resto del editor —
	   no un one-off nuevo para esta única tarjeta. */
	background: var(--wccd-violeta-soft);
}

#wccd-intro-screen .wccd-intro-card__icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
}
#wccd-intro-screen .wccd-intro-card--free .wccd-intro-card__icon { background: var(--wccd-menta); color: var(--wccd-menta-ink); }
#wccd-intro-screen .wccd-intro-card--tpl .wccd-intro-card__icon--tpl {
	background: var(--wccd-violeta);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wccd-space-2); /* 5 → 6 */
	padding: var(--wccd-space-4);
}
/* --wccd-violeta-layer-line (#D8CDF3) — a 1 unidad por canal de #D9CEF5,
   indistinguible a la vista; el valor exacto no es un token propio en
   ningún lado, esto era ya una aproximación a mano del autor original. */
#wccd-intro-screen .wccd-intro-card__icon--tpl span { background: var(--wccd-violeta-layer-line); border-radius: 3px; }

#wccd-intro-screen .wccd-intro-card__kicker {
	font-family: var(--wccd-font-mono);
	font-size: 10px;
	letter-spacing: var(--wccd-label-letter-spacing);
	text-transform: uppercase;
	color: var(--wccd-label);
}

#wccd-intro-screen .wccd-intro-card__preview {
	height: 158px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#wccd-intro-screen .wccd-intro-card__preview--free {
	/* #CFC7E4 no es un var(--wccd-*) en ningún lado del sistema — se usa
	   literal, idéntico, también en .wccd-dropzone (editor-panels.css) para
	   el mismo propósito (borde punteado de zona de carga). Sin una
	   variable real que referenciar, no hay una sustitución "correcta"
	   posible acá sin inventar un token que el resto del sistema tampoco
	   tiene todavía. */
	border: 1px dashed #CFC7E4;
	background: repeating-linear-gradient(135deg, var(--wccd-field) 0 9px, var(--wccd-row) 9px 18px);
	font-family: var(--wccd-font-mono);
	font-size: 11px;
	letter-spacing: var(--wccd-label-letter-spacing);
	color: var(--wccd-label);
	text-align: center;
	padding: 0 var(--wccd-space-5); /* 12 → 14 */
}
#wccd-intro-screen .wccd-intro-card__preview--tpl {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wccd-space-3);
}
/* Previsualizaciones reales de las primeras plantillas (screen-intro.js::
   fillTemplatePreviews()) — cuadradas, centradas, con spinner mientras se
   dibujan. Reemplazan a las 3 muestras de color. */
#wccd-intro-screen .wccd-intro-card__preview--tpl.has-thumbs {
	display: flex;
	justify-content: center;
}
#wccd-intro-screen .wccd-intro-card__thumb {
	position: relative;
	display: block;
	flex: 0 1 158px;
	min-width: 0;
	height: 100%;
	padding: 8px;
	border-radius: 12px;
	border: 1px solid var(--wccd-line);
	background-color: var(--wccd-field);
	background-origin: content-box;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
#wccd-intro-screen .wccd-intro-card__thumb.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border: 3px solid var(--wccd-violeta-soft);
	border-top-color: var(--wccd-violeta);
	border-radius: 50%;
	animation: wccd-intro-spin .8s linear infinite;
}
@keyframes wccd-intro-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	#wccd-intro-screen .wccd-intro-card__thumb.is-loading::after { animation-duration: 2.4s; }
}

#wccd-intro-screen .wccd-intro-card__body { font-size: 13.5px; color: var(--wccd-ink); line-height: 1.55; margin: 0; }

#wccd-intro-screen .wccd-intro-card__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wccd-space-2);
	font-size: 12.5px;
	color: var(--wccd-ink-soft);
}
#wccd-intro-screen .wccd-intro-card__bullets li { padding-left: var(--wccd-space-5); position: relative; }
#wccd-intro-screen .wccd-intro-card__bullets li::before {
	content: '·';
	position: absolute;
	left: 0;
	font-weight: 700;
}

#wccd-intro-screen .wccd-intro-card__cta {
	margin-top: auto; /* empuje flex, no un valor de la escala — no es un "margin suelto", es la técnica para anclar la CTA al fondo de la tarjeta. */
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: var(--wccd-space-2); /* 5 → 6 */
}
#wccd-intro-screen .wccd-intro-card__cta svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* Sin token exacto para ninguno de los dos — el más cercano
   semánticamente correcto en cada familia: --wccd-menta-dark (texto
   legible en mint sobre fondo claro, mismo rol que ya cumple en
   "guardado"/"resolución suficiente") y --wccd-info-ink (violeta oscuro
   pensado para texto, no decorativo — el mismo "aviso violeta" que ya usa
   el resto del sistema), en vez de mantener 2 acentos sueltos que no
   existen en ningún otro lado de wccd-tokens.css. */
#wccd-intro-screen .wccd-intro-card--free .wccd-intro-card__cta { color: var(--wccd-menta-dark); }
#wccd-intro-screen .wccd-intro-card--tpl .wccd-intro-card__cta { color: var(--wccd-info-ink); }

#wccd-intro-screen .wccd-intro__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wccd-space-5);
	margin-top: var(--wccd-space-9); /* 30 → 34 */
	padding-top: var(--wccd-space-7); /* 20 → 22 */
	border-top: 1px solid var(--wccd-line-soft);
}
#wccd-intro-screen .wccd-intro__autosave { font-size: 12.5px; color: var(--wccd-label); }

@media (max-width: 700px) {
	#wccd-intro-screen {
		padding: var(--wccd-space-8) var(--wccd-space-7) var(--wccd-space-8); /* 26→24, 20→22, 28→24 */
		margin: var(--wccd-space-6) auto; /* 16 → 18, empate 14/18, redondeado arriba */
	}
	#wccd-intro-screen .wccd-intro__cards { grid-template-columns: 1fr; }
	#wccd-intro-screen .wccd-intro-card__preview { height: auto; min-height: 120px; }
}