/* ==========================================================================
   HackDevNet · Inicio (versión E). Base clara como el resto del sitio; dos acentos en carbón:
   la terminal de la portada y la franja «Hoy en Manta, pronto en Guayaquil», que se une al pie.
   Usa los tokens y componentes de hdn.css y paginas.css.
   ========================================================================== */

.hdn-pagina.hdn-inicio {
	--hdn-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--hdn-negro: #0F0F0F;
	--hdn-cuadricula: linear-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .05) 1px, transparent 1px);
}
.hdn-inicio .hdn-inicio__codigo { font: 400 var(--hdn-t-xs)/1.4 var(--hdn-mono); letter-spacing: .04em; color: var(--hdn-gris); }
.hdn-inicio .hdn-inicio__h2 { font: 600 clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem)/1.04 var(--hdn-fuente); letter-spacing: -.03em; color: var(--hdn-tinta); }
.hdn-inicio .hdn-inicio__texto { font: 400 clamp(1rem, .95rem + .3vw, 1.125rem)/1.6 var(--hdn-fuente); color: var(--hdn-gris); }

/* --- Portada: panel claro con cuadrícula técnica y la terminal en carbón ------ */
.hdn-inicio .hdn-inicio__portada {
	padding-block: clamp(4rem, 2rem + 6vw, 7rem) var(--hdn-e8);
	background-color: var(--hdn-panel); background-image: var(--hdn-cuadricula); background-size: 48px 48px;
	border-bottom: 1px solid var(--hdn-linea);
}
.hdn-inicio .hdn-inicio__portada-fila {
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--hdn-e8); align-items: center;
}
.hdn-inicio .hdn-inicio__portada-texto { display: grid; gap: var(--hdn-e5); }
.hdn-inicio .hdn-inicio__titulo {
	font: 600 clamp(2.5rem, 1.4rem + 3.8vw, 4.25rem)/1.02 var(--hdn-fuente); letter-spacing: -.03em; color: var(--hdn-tinta);
}
.hdn-inicio .hdn-inicio__bajada { max-width: 34em; font: 400 clamp(1.0625rem, 1rem + .3vw, 1.1875rem)/1.6 var(--hdn-fuente); color: var(--hdn-texto); }
.hdn-inicio .hdn-inicio__portada-texto .hdn-acciones { margin-top: var(--hdn-e2); }
.hdn-inicio .hdn-inicio__portada .hdn-boton--contorno { background: var(--hdn-blanco); }
.hdn-inicio .hdn-inicio__portada .hdn-boton--contorno:hover { background: var(--hdn-tinta); }

/* Terminal: las líneas aparecen una tras otra al cargar. */
.hdn-inicio .hdn-terminal {
	margin: 0; overflow: hidden; background: var(--hdn-negro);
	border: 1px solid var(--hdn-tinta); border-radius: 6px; box-shadow: 0 30px 70px rgba(0, 0, 0, .22);
}
.hdn-inicio .hdn-terminal__barra { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.hdn-inicio .hdn-terminal__barra span { width: 11px; height: 11px; border-radius: 50%; background: #5A5A5A; }
.hdn-inicio .hdn-terminal__barra em { margin-left: 12px; font: normal 400 12px/1 var(--hdn-mono); color: var(--hdn-gris2); }
.hdn-inicio .hdn-terminal__cuerpo { display: grid; padding: var(--hdn-e5) var(--hdn-e5) var(--hdn-e6); }
.hdn-inicio .hdn-terminal__linea {
	font: 400 clamp(.75rem, .7rem + .25vw, .875rem)/2 var(--hdn-mono); color: var(--hdn-sobre-oscuro); white-space: pre-wrap;
	opacity: 0; animation: hdn-aparece .35s ease forwards; animation-delay: calc(var(--i, 0) * .45s + .2s);
}
.hdn-inicio .hdn-terminal__linea strong { font-weight: 500; color: var(--hdn-blanco); }
.hdn-inicio .hdn-terminal__tenue { color: var(--hdn-gris2); }
.hdn-inicio .hdn-terminal__cursor {
	display: inline-block; width: 9px; height: 1.1em; vertical-align: -.2em; background: var(--hdn-blanco);
	animation: hdn-parpadeo 1.1s steps(1) infinite;
}
@keyframes hdn-aparece { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes hdn-parpadeo { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* --- Asistente ----------------------------------------------------------------- */
.hdn-inicio .hdn-inicio__asistente { padding-block: var(--hdn-e9); background: var(--hdn-blanco); }
.hdn-inicio .hdn-inicio__estrecho { max-width: calc(880px + 2 * var(--hdn-margen)); display: grid; gap: var(--hdn-e6); }
.hdn-inicio .hdn-inicio__centro { display: grid; justify-items: center; gap: var(--hdn-e4); text-align: center; }
.hdn-inicio .hdn-inicio__centro .hdn-inicio__texto { max-width: 34em; }
.hdn-inicio .hdn-inicio__insignia {
	display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px;
	border: 1px solid var(--hdn-linea); border-radius: 999px; background: var(--hdn-blanco);
	font: 500 var(--hdn-t-xs)/1 var(--hdn-fuente); color: var(--hdn-texto);
}
.hdn-inicio .hdn-inicio__pulso {
	display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--hdn-tinta);
	animation: hdn-pulso 2.4s ease-out infinite;
}
@keyframes hdn-pulso {
	0% { box-shadow: 0 0 0 0 rgba(26, 26, 26, .45); }
	70% { box-shadow: 0 0 0 14px rgba(26, 26, 26, 0); }
	100% { box-shadow: 0 0 0 0 rgba(26, 26, 26, 0); }
}

.hdn-inicio .hdn-chat { display: grid; gap: var(--hdn-e5); }
.hdn-inicio .hdn-chat__etiqueta { justify-self: center; font: 600 .6875rem/1 var(--hdn-fuente); letter-spacing: .14em; text-transform: uppercase; color: var(--hdn-gris); }
.hdn-inicio .hdn-chat__persona {
	justify-self: end; max-width: min(72%, 560px); padding: var(--hdn-e4) var(--hdn-e5);
	background: var(--hdn-carbon); border-radius: 18px 18px 4px 18px;
	font: 400 var(--hdn-t-m)/1.55 var(--hdn-fuente); color: var(--hdn-blanco);
}
.hdn-inicio .hdn-chat__respuesta { display: flex; gap: var(--hdn-e4); align-items: flex-start; max-width: 86%; }
.hdn-inicio .hdn-chat__respuesta > div { display: grid; gap: var(--hdn-e4); padding-top: 6px; }
.hdn-inicio .hdn-chat__respuesta p { font: 400 var(--hdn-t-m)/1.65 var(--hdn-fuente); color: var(--hdn-texto); }
.hdn-inicio .hdn-chat__respuesta strong { color: var(--hdn-tinta); }
.hdn-inicio .hdn-chat__respuesta .hdn-boton { min-height: 42px; font-size: var(--hdn-t-xs); }
.hdn-inicio .hdn-chat__avatar {
	flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
	background: var(--hdn-tinta); font: 500 12px/1 var(--hdn-mono); color: var(--hdn-blanco);
}

.hdn-inicio .hdn-consulta {
	display: grid; gap: var(--hdn-e2); padding: var(--hdn-e4) var(--hdn-e4) var(--hdn-e3) var(--hdn-e5);
	background: var(--hdn-blanco); border: 1px solid #A8A8A8; border-radius: 18px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 18px 48px rgba(0, 0, 0, .10); transition: border-color var(--hdn-transicion);
}
.hdn-inicio .hdn-consulta:focus-within { border-color: var(--hdn-tinta); }
.hdn-inicio .hdn-consulta textarea {
	width: 100%; min-height: 3.2em; margin: 0; padding: 6px 0; resize: none;
	background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none;
	font: 400 var(--hdn-t-m)/1.5 var(--hdn-fuente); color: var(--hdn-tinta);
}
.hdn-inicio .hdn-consulta textarea::placeholder { color: var(--hdn-gris); }
.hdn-inicio .hdn-consulta__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--hdn-e3); }
.hdn-inicio .hdn-consulta__pie span { font: 400 var(--hdn-t-xs)/1.4 var(--hdn-fuente); color: var(--hdn-gris); }
.hdn-inicio button.hdn-consulta__enviar {
	flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
	border: 0; border-radius: 10px; background: var(--hdn-carbon); color: var(--hdn-blanco); cursor: pointer;
	transition: background var(--hdn-transicion);
}
.hdn-inicio button.hdn-consulta__enviar:hover { background: var(--hdn-tinta); color: var(--hdn-blanco); }
.hdn-inicio .hdn-consulta__enviar .hdn-ico { width: 20px; height: 20px; transform: rotate(-90deg); }

.hdn-inicio .hdn-atajos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hdn-e2); list-style: none; }
.hdn-inicio .hdn-atajos a {
	display: inline-flex; min-height: 44px; align-items: center; padding: 0 16px;
	border: 1px solid var(--hdn-linea); border-radius: 999px; background: var(--hdn-blanco);
	font: 400 var(--hdn-t-s)/1.2 var(--hdn-fuente); color: var(--hdn-texto); text-decoration: none;
	transition: border-color var(--hdn-transicion), color var(--hdn-transicion);
}
.hdn-inicio .hdn-atajos a:hover { border-color: var(--hdn-tinta); color: var(--hdn-tinta); }

/* --- Módulos y productos ------------------------------------------------------ */
.hdn-inicio .hdn-inicio__modulos { padding-block: var(--hdn-e9); background: var(--hdn-panel); border-top: 1px solid var(--hdn-linea); }
.hdn-inicio .hdn-modulos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hdn-e4); list-style: none; }
.hdn-inicio .hdn-modulos > li { display: flex; }
.hdn-inicio .hdn-modulo {
	display: grid; align-content: start; gap: var(--hdn-e3); width: 100%; padding: var(--hdn-e6) var(--hdn-e5);
	background: var(--hdn-blanco); border: 1px solid var(--hdn-linea); border-radius: var(--hdn-radio); text-decoration: none;
	transition: border-color var(--hdn-transicion), box-shadow var(--hdn-transicion), transform var(--hdn-transicion);
}
.hdn-inicio .hdn-modulo:hover { border-color: var(--hdn-tinta); box-shadow: var(--hdn-sombra); transform: translateY(-2px); }
.hdn-inicio .hdn-modulo__numero { font: 400 12px/1 var(--hdn-mono); color: var(--hdn-gris); }
.hdn-inicio .hdn-modulo__titulo { font: 600 var(--hdn-t-l)/1.2 var(--hdn-fuente); color: var(--hdn-tinta); }
.hdn-inicio .hdn-modulo__texto { font: 400 var(--hdn-t-s)/1.7 var(--hdn-fuente); color: var(--hdn-gris); }

.hdn-inicio .hdn-inicio__productos { background: var(--hdn-blanco); border-top: 1px solid var(--hdn-linea); }
.hdn-inicio .hdn-productos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hdn-e5); padding-block: var(--hdn-e8); list-style: none; }
.hdn-inicio .hdn-productos > li { display: flex; }
.hdn-inicio .hdn-producto {
	display: grid; align-content: start; gap: var(--hdn-e3); width: 100%; padding-top: var(--hdn-e4);
	border-top: 2px solid var(--hdn-carbon); text-decoration: none;
}
.hdn-inicio .hdn-producto__titulo { font: 600 clamp(1.5rem, 1.2rem + 1vw, 1.75rem)/1.15 var(--hdn-fuente); color: var(--hdn-tinta); }
.hdn-inicio .hdn-producto:hover .hdn-producto__titulo { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.hdn-inicio .hdn-producto__texto { font: 400 var(--hdn-t-s)/1.6 var(--hdn-fuente); color: var(--hdn-gris); }

/* --- Manta hoy, Guayaquil pronto: en carbón, se une al pie --------------------- */
.hdn-inicio .hdn-inicio__ubicacion {
	position: relative; overflow: hidden; padding-top: var(--hdn-e8);
	background-color: var(--hdn-carbon); color: var(--hdn-sobre-oscuro);
	background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.2px); background-size: 28px 28px;
	border-bottom: 1px solid var(--hdn-linea-oscura);
}
.hdn-inicio .hdn-inicio__ubicacion .hdn-inicio__h2 { color: var(--hdn-blanco); }
.hdn-inicio .hdn-inicio__ubicacion .hdn-inicio__codigo { text-transform: uppercase; color: var(--hdn-gris2); }
.hdn-inicio .hdn-inicio__ubicacion-fila { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--hdn-e6); }
.hdn-inicio .hdn-inicio__ubicacion-fila > div:first-child { display: grid; gap: var(--hdn-e4); }
.hdn-inicio .hdn-inicio__ubicacion-cta { display: grid; justify-items: start; gap: var(--hdn-e4); max-width: 340px; }
.hdn-inicio .hdn-inicio__ubicacion-cta .hdn-inicio__texto { color: var(--hdn-sobre-oscuro); }

.hdn-inicio .hdn-ecuador { position: relative; display: block; height: 240px; margin-top: var(--hdn-e6); }
.hdn-inicio .hdn-ecuador__linea { position: absolute; left: 0; right: 0; top: 40px; height: 1px; background: rgba(255, 255, 255, .7); }
.hdn-inicio .hdn-ecuador__rotulo {
	position: absolute; right: var(--hdn-margen); top: 14px;
	font: 400 12px/1 var(--hdn-mono); text-transform: uppercase; color: var(--hdn-sobre-oscuro);
}
.hdn-inicio .hdn-ecuador__punto { position: absolute; display: grid; grid-template-columns: 12px auto; column-gap: 12px; align-items: center; }
.hdn-inicio .hdn-ecuador__punto i { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; }
.hdn-inicio .hdn-ecuador__punto .hdn-inicio__pulso { background: var(--hdn-blanco); animation-name: hdn-pulso-claro; }
@keyframes hdn-pulso-claro {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
	70% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.hdn-inicio .hdn-ecuador__punto b { font: 500 12px/1.5 var(--hdn-mono); text-transform: uppercase; color: var(--hdn-blanco); }
.hdn-inicio .hdn-ecuador__punto small { font: 400 12px/1.5 var(--hdn-mono); color: var(--hdn-gris2); }
.hdn-inicio .hdn-ecuador__punto--manta { left: 34%; top: 92px; }
.hdn-inicio .hdn-ecuador__punto--guayaquil { left: 41%; top: 176px; }
.hdn-inicio .hdn-ecuador__punto--guayaquil i { border: 1.5px dashed var(--hdn-blanco); }
.hdn-inicio .hdn-ecuador__tramo {
	position: absolute; left: calc(34% + 6px); top: 106px; width: 1px; height: 74px;
	background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .45) 0 4px, transparent 4px 8px);
	transform-origin: top; transform: rotate(-5deg);
}
.hdn-pagina.hdn-inicio + .hdn-llamado { display: none; }

/* --- Responsive y movimiento reducido ------------------------------------- */
@media (max-width: 1023px) {
	.hdn-inicio .hdn-inicio__portada-fila { grid-template-columns: 1fr; gap: var(--hdn-e7); }
	.hdn-inicio .hdn-modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hdn-inicio .hdn-inicio__asistente, .hdn-inicio .hdn-inicio__modulos { padding-block: var(--hdn-e8); }
}
@media (max-width: 640px) {
	.hdn-inicio .hdn-modulos, .hdn-inicio .hdn-productos { grid-template-columns: 1fr; }
	.hdn-inicio .hdn-chat__persona { max-width: 88%; }
	.hdn-inicio .hdn-chat__respuesta { max-width: 100%; }
	.hdn-inicio .hdn-consulta__pie span { display: none; }
	.hdn-inicio .hdn-consulta__pie { justify-content: flex-end; }
	.hdn-inicio .hdn-terminal__puntos { display: none; }
	.hdn-inicio .hdn-terminal__cuerpo { padding: var(--hdn-e4); }
	.hdn-inicio .hdn-ecuador__punto--manta { left: var(--hdn-margen); }
	.hdn-inicio .hdn-ecuador__punto--guayaquil { left: calc(var(--hdn-margen) + 28px); }
	.hdn-inicio .hdn-ecuador__tramo { left: calc(var(--hdn-margen) + 6px); }
}
@media (prefers-reduced-motion: reduce) {
	.hdn-inicio .hdn-terminal__linea { opacity: 1; animation: none; }
	.hdn-inicio .hdn-terminal__cursor, .hdn-inicio .hdn-inicio__pulso { animation: none; }
	.hdn-inicio .hdn-modulo:hover { transform: none; }
}