/**
 * SemiConecta — Sistema visual semiconductor (transversal).
 *
 * Vocabulario gráfico reutilizable en todo el landing, inspirado en la
 * industria de semiconductores: wafer/die, routing/traces, capas, nodos,
 * markers técnicos y coordenadas. Más un motion system de 4 familias:
 * TRACE (líneas que se dibujan), SCAN (reveal por máscara),
 * ASSEMBLE (montaje por partes) y SIGNAL (pulsos en nodos).
 *
 * Todo es decorativo salvo indicación: usar aria-hidden en los elementos
 * puramente gráficos. Respeta prefers-reduced-motion.
 *
 * Paleta: negro/grafito + amarillo + grises. Sin azul.
 */

/* =========================================================
   0. TOKENS DEL SISTEMA
   ========================================================= */
:root {
	--sc-line: rgba(14, 14, 17, .12);      /* líneas técnicas sobre claro */
	--sc-line-strong: rgba(14, 14, 17, .28);
	--sc-line-light: rgba(255, 255, 255, .16); /* líneas sobre oscuro */
	--sc-line-light-strong: rgba(255, 255, 255, .32);
	--sc-node: var(--yellow);
	--sc-trace: var(--yellow);
	--sc-grid-size: 64px;
	--sc-ease-tech: cubic-bezier(.22, .61, .36, 1);
	--sc-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* =========================================================
   1. GRIDS TÉCNICOS  (.sc-grid--*)
   Fondos sutiles. El contenido siempre manda: opacidad baja.
   Se aplican a un contenedor con position: relative.
   ========================================================= */
.sc-grid { position: relative; }
.sc-grid > * { position: relative; z-index: 1; }
.sc-grid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* Macrogrid ortogonal (líneas) */
.sc-grid--macro::before {
	background-image:
		linear-gradient(var(--sc-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--sc-line) 1px, transparent 1px);
	background-size: var(--sc-grid-size) var(--sc-grid-size);
	mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 55%, transparent 100%);
}

/* Microgrid fino */
.sc-grid--micro::before {
	background-image:
		linear-gradient(var(--sc-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--sc-line) 1px, transparent 1px);
	background-size: 16px 16px;
	opacity: .6;
}

/* Dot matrix (puntos = vias/pads) */
.sc-grid--dots::before {
	background-image: radial-gradient(var(--sc-line-strong) 1px, transparent 1.4px);
	background-size: 26px 26px;
	mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
}

/* Variante sobre fondo oscuro */
.sc-grid--dark.sc-grid--macro::before {
	background-image:
		linear-gradient(var(--sc-line-light) 1px, transparent 1px),
		linear-gradient(90deg, var(--sc-line-light) 1px, transparent 1px);
}
.sc-grid--dark.sc-grid--dots::before {
	background-image: radial-gradient(var(--sc-line-light-strong) 1px, transparent 1.4px);
}

/* =========================================================
   2. SECTION LABEL  (etiqueta técnica de sección)
   Ej: <span class="sc-label">SYSTEM · 01</span>
   ========================================================= */
.sc-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.sc-label::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--yellow);
}
.sc-label--light { color: rgba(255, 255, 255, .66); }

/* Índice de sección grande, tipo numeración editorial */
.sc-index {
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--sc-line-strong);
}

/* =========================================================
   3. NODO  (.sc-node)  — punto de conexión / via / pad
   ========================================================= */
.sc-node {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--yellow);
	box-shadow: 0 0 0 4px rgba(255, 213, 0, .22);
}
.sc-node--sm { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(255, 213, 0, .2); }
.sc-node--ring {
	background: transparent;
	border: 2px solid var(--yellow);
	box-shadow: none;
}

/* =========================================================
   4. TRACE  (.sc-trace)  — pista de circuito (línea)
   Horizontal/vertical. Con .is-in se dibuja (motion TRACE).
   ========================================================= */
.sc-trace {
	position: relative;
	background: var(--sc-line-strong);
	pointer-events: none;
}
.sc-trace--h { height: 2px; width: 100%; }
.sc-trace--v { width: 2px; height: 100%; }
.sc-trace--yellow { background: var(--yellow); }

/* =========================================================
   5. CORNER MARKERS  (.sc-frame)  — marco técnico con esquinas
   Envolver un bloque: <div class="sc-frame">…</div>
   ========================================================= */
.sc-frame { position: relative; }
.sc-frame::before,
.sc-frame::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border: 2px solid var(--ink-strong);
	pointer-events: none;
}
.sc-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.sc-frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.sc-frame--light::before,
.sc-frame--light::after { border-color: rgba(255, 255, 255, .5); }
.sc-frame--yellow::before,
.sc-frame--yellow::after { border-color: var(--yellow); }

/* Crosshair técnico junto a un título */
.sc-crosshair {
	position: relative;
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.sc-crosshair::before,
.sc-crosshair::after {
	content: "";
	position: absolute;
	background: var(--yellow);
}
.sc-crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.sc-crosshair::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }

/* =========================================================
   6. CHIP MODULE  (.sc-chip)  — bloque tipo die/encapsulado
   Con pads en los bordes y clipping angular de encapsulado.
   ========================================================= */
.sc-chip {
	position: relative;
	background: var(--white);
	border: 1px solid var(--sc-line-strong);
	/* Esquina biselada como un chip con pin 1 */
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.sc-chip--dark {
	background: var(--grafito);
	border-color: rgba(255, 255, 255, .16);
	color: var(--white);
}
/* Pads laterales (decorativos) */
.sc-chip--pads::before,
.sc-chip--pads::after {
	content: "";
	position: absolute;
	top: 22%;
	bottom: 22%;
	width: 3px;
	background-image: linear-gradient(var(--sc-line-strong) 0 8px, transparent 8px 16px);
	background-size: 3px 16px;
}
.sc-chip--pads::before { left: -3px; }
.sc-chip--pads::after { right: -3px; }

/* =========================================================
   7. SECTION DIVIDERS  (.sc-divider--*)
   Formas distintas de pasar de una sección a otra.
   ========================================================= */
.sc-divider { position: relative; height: 0; }
/* Línea técnica con nodo y coordenada */
.sc-divider--trace {
	height: 1px;
	background: var(--sc-line);
	margin: 0 auto;
	max-width: var(--container, 1200px);
}
.sc-divider--trace::after {
	content: "";
	position: absolute;
	left: 12%;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--yellow);
	transform: translateY(-50%);
}
/* Clipping angular (encapsulado) para secciones oscuras */
.sc-clip-top { clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 100%); }
.sc-clip-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%); }

/* Coordenadas laterales (engineering guides) */
.sc-coords {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--sc-line);
	pointer-events: none;
}
.sc-coords--left { left: 24px; }
.sc-coords--right { right: 24px; }
.sc-coords span {
	position: absolute;
	left: 8px;
	font-family: var(--font-mono, monospace);
	font-size: .62rem;
	color: var(--sc-line-strong);
	letter-spacing: .1em;
}

/* =========================================================
   8. MOTION SYSTEM — 4 familias
   Se activan al entrar en viewport con la clase .is-in
   (la añade main.js vía IntersectionObserver).
   ========================================================= */

/* 01 / TRACE — la línea se dibuja de un extremo a otro */
.m-trace { transform-origin: left center; transform: scaleX(0); transition: transform .8s var(--sc-ease-tech); }
.m-trace.is-in { transform: scaleX(1); }
.m-trace--v { transform-origin: top center; transform: scaleY(0); }
.m-trace--v.is-in { transform: scaleY(1); }
/* Para paths SVG: usar dashoffset */
.m-draw { stroke-dasharray: var(--sc-len, 1000); stroke-dashoffset: var(--sc-len, 1000); transition: stroke-dashoffset 1.2s var(--sc-ease-tech); }
.m-draw.is-in { stroke-dashoffset: 0; }

/* 02 / SCAN — reveal por máscara que barre */
.m-scan { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--sc-ease-out); }
.m-scan.is-in { clip-path: inset(0 0 0 0); }

/* 03 / ASSEMBLE — la pieza entra y encaja */
.m-assemble { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .6s var(--sc-ease-out), transform .6s var(--sc-ease-out); }
.m-assemble.is-in { opacity: 1; transform: none; }
/* Escalonado por índice --i (0,1,2…) */
.m-assemble[style*="--i"] { transition-delay: calc(var(--i) * 90ms); }

/* 04 / SIGNAL — pulso mínimo en un nodo/conexión */
.m-signal { animation: sc-signal 2.6s var(--sc-ease-tech) infinite; }
@keyframes sc-signal {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}
/* Señal que recorre una trace (dash en movimiento) */
.m-flow { stroke-dasharray: 6 12; animation: sc-flow 3.5s linear infinite; }
@keyframes sc-flow { to { stroke-dashoffset: -180; } }

/* =========================================================
   9. REDUCED MOTION — todo estático, contenido visible
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.m-trace, .m-trace--v, .m-draw, .m-scan, .m-assemble {
		transition: none !important;
		transform: none !important;
		clip-path: none !important;
		stroke-dashoffset: 0 !important;
		opacity: 1 !important;
	}
	.m-signal, .m-flow { animation: none !important; }
}

/* =========================================================
   10. SEPARADOR ENTRE SECCIONES DEL LANDING
   Línea técnica con coordenada de sistema y nodo. Se dibuja al entrar.
   ========================================================= */
.sc-section-sep {
	position: relative;
	max-width: var(--container, 1200px);
	margin: 0 auto;
	padding: 0 24px;
	height: 1px;
	display: flex;
	align-items: center;
}
.sc-section-sep-line {
	flex: 1;
	height: 1px;
	background: var(--sc-line);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform .8s var(--sc-ease-tech);
}
.sc-section-sep.is-in .sc-section-sep-line { transform: scaleX(1); }
.sc-section-sep-code {
	font-family: var(--font-mono, monospace);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--sc-line-strong);
	padding: 0 14px;
	white-space: nowrap;
}
.sc-section-sep-node {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--yellow);
	flex-shrink: 0;
	box-shadow: 0 0 0 4px rgba(255,213,0,.16);
}
@media (prefers-reduced-motion: reduce) {
	.sc-section-sep-line { transform: scaleX(1) !important; }
}

/* =========================================================
   11. ACABADO FINO (punto 27)
   Detalles tipográficos y de ritmo que elevan la percepción.
   ========================================================= */
/* Evitar huérfanas/viudas en titulares y balancear líneas */
h1, h2, h3, .section-head h2, .hero h1 { text-wrap: balance; }
p, .hero-lead, .section-head p { text-wrap: pretty; }

/* Ligaduras y kerning en titulares grandes */
h1, h2 { font-feature-settings: "kern" 1, "liga" 1; letter-spacing: -0.01em; }

/* Selección con la marca */
::selection { background: var(--yellow); color: var(--ink); }

/* Foco visible coherente en todo el sitio (accesibilidad) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--yellow);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Imágenes nunca desbordan y cargan con transición suave */
img { max-width: 100%; height: auto; }

/* Ritmo vertical: micro-ajuste del aire de las cabeceras de sección */
.section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p { max-width: 52ch; }

/* Los enlaces de texto dentro de prose con subrayado de marca al hover */
.prose a { color: var(--ink-strong); text-decoration-color: var(--yellow); text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }

/* Botones: transición y "press" consistente */
.button { transition: transform .12s var(--sc-ease-tech), background .2s, box-shadow .2s, color .2s; }
.button:active { transform: translateY(1px); }

/* Sin JS: el motion system se muestra estático */
html:not(.js) .m-trace, html:not(.js) .m-trace--v, html:not(.js) .m-scan,
html:not(.js) .m-assemble, html:not(.js) .m-draw, html:not(.js) .hero-trace {
	transform: none !important; clip-path: none !important;
	stroke-dashoffset: 0 !important; opacity: 1 !important;
}