/* DeMark, hero de la portada: una columna de texto y, debajo, el escenario
   donde se dibuja un sitio web en lineas de oro.
   Este CSS describe el estado final, el sitio ya construido: es lo que ve
   quien no tiene JS o pide menos movimiento. js/hero.js lo desmonta al cargar
   y lo vuelve a montar animado. Todo cuelga de body.sitio y todos los colores
   salen de los tokens de sitio.css. */

.sitio .apertura { position: relative; padding: clamp(48px, 6vw, 88px) 0 clamp(80px, 10vw, 140px); }

/* ---- texto, apilado a lo ancho ---- */
.sitio .apertura-texto { max-width: 1180px; }
.sitio .apertura h1 {
  font-size: clamp(60px, 9vw, 136px); font-weight: 500; line-height: 1; letter-spacing: -.01em;
  max-width: 16ch; margin: 0 0 .32em;
}
.sitio .apertura h1 em { font-style: italic; font-weight: 500; color: var(--oro-claro); }
.sitio .apertura-sub { font-size: 20px; line-height: 1.55; color: var(--texto-2); max-width: 60ch; margin: 0 0 40px; }
.sitio .apertura-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 32px; }
.sitio .apertura-notas { color: var(--texto-2); }
@media (max-width: 640px) {
  .sitio .apertura-sub { font-size: 18px; }
  .sitio .apertura-acciones .boton, .sitio .apertura-acciones .boton-suave { flex: 1 1 100%; justify-content: center; }
}

/* ---- escenario ---- */
.sitio .escenario {
  position: relative; margin-top: clamp(48px, 6vw, 88px);
  aspect-ratio: 16 / 8; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--halo);
}
.sitio .escenario-dibujo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.sitio .escenario-movil { display: none; }
@media (max-width: 700px) {
  .sitio .escenario { aspect-ratio: 4 / 5; }
  .sitio .escenario-escritorio { display: none; }
  .sitio .escenario-movil { display: block; }
}

/* Dibujo. Trazos finos: en movil el viewBox se reduce mas, asi que engordan. */
.sitio .escenario-dibujo { fill: none; stroke: none; }
.sitio .d-rejilla { opacity: .06; }
.sitio .d-rejilla-fina { stroke: var(--oro); stroke-width: .6; opacity: .6; }
.sitio .d-rejilla-mayor { stroke: var(--oro); stroke-width: 1.2; }
.sitio .d-trama { stroke: var(--oro); stroke-width: .8; opacity: .22; }
.sitio .d-parada-nada { stop-color: var(--oro); stop-opacity: 0; }
.sitio .d-parada-oro { stop-color: var(--oro); stop-opacity: 1; }
.sitio .d-parada-claro { stop-color: var(--oro-claro); stop-opacity: 1; }
.sitio .d-parada-estela { stop-color: var(--oro); stop-opacity: .12; }
.sitio .d-parada-luz { stop-color: var(--oro); stop-opacity: .26; }

.sitio .d-pantalla { fill: var(--fondo); }
.sitio .d-trazo, .sitio .d-contorno { fill: none; stroke-width: 1.4; stroke-linecap: round; }
.sitio .d-trazo { stroke: var(--linea); }
.sitio .d-marco { stroke: var(--oro); stroke-opacity: .7; }
.sitio .d-punto { stroke: var(--oro); stroke-opacity: .8; }
.sitio .d-contorno { stroke: var(--oro); stroke-opacity: .45; }
.sitio .d-horizonte, .sitio .d-sol { stroke: var(--oro); stroke-opacity: .55; }
.sitio .d-url-texto { fill: var(--texto-2); font-family: var(--fuente-mono); letter-spacing: .04em; }

.sitio .d-relleno-franja { fill: var(--fondo-2); }
.sitio .d-relleno-claro { fill: var(--oro-claro); }
.sitio .d-linea-claro { fill: var(--oro-claro); }
.sitio .d-linea-texto { fill: var(--texto-2); fill-opacity: .55; }
.sitio .d-linea-oro { fill: var(--oro); }
.sitio .d-linea-fondo { fill: var(--fondo); }
.sitio .d-boton { fill: var(--oro); }
.sitio .d-boton-halo { fill: var(--oro); opacity: .28; }

/* Solo se ven mientras se construye: en reposo estan apagados. */
.sitio .d-halo { fill: none; stroke-width: 2; opacity: 0; }
.sitio .d-halo-difuso { stroke-width: 8; }
.sitio .d-barrido { opacity: 0; }

.sitio .escenario-movil .d-trazo, .sitio .escenario-movil .d-contorno { stroke-width: 2.4; }
.sitio .escenario-movil .d-rejilla-fina { stroke-width: 1; }
.sitio .escenario-movil .d-rejilla-mayor { stroke-width: 2; }

/* ---- lecturas: cotas de plano ancladas a los bordes de la pantalla ----
   Cada una se apoya en un filete que llega hasta el marco del navegador
   (380 y 1220 de 1600 en el dibujo de escritorio: 23,75 % y 76,25 %). */
.sitio .lectura {
  position: absolute; z-index: 1; width: 21.25%; margin: 0; padding: 0 0 12px;
  font-family: var(--fuente-mono); font-size: 12px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-2);
}
.sitio .lectura-1 { left: 2.5%; top: 21%; }
.sitio .lectura-2 { left: 2.5%; top: 63%; }
.sitio .lectura-3 { right: 2.5%; top: 45%; text-align: right; }
.sitio .lectura-cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sitio .lectura-3 .lectura-cabeza { justify-content: flex-end; }
.sitio .lectura-punto { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--oro); }
.sitio .lectura-cifra {
  display: inline-block; overflow: hidden; height: 1.5em; vertical-align: top;
  color: var(--oro); font-size: 13px; letter-spacing: .14em; font-variant-numeric: tabular-nums;
}
.sitio .lectura-rodillo { display: inline-block; }
.sitio .lectura-texto { display: block; }
.sitio .lectura-cota { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--linea), var(--oro)); transform-origin: 100% 50%; }
.sitio .lectura-cota::after { content: ""; position: absolute; right: 0; top: -4px; width: 1px; height: 9px; background: var(--oro); }
.sitio .lectura-3 .lectura-cota { background: linear-gradient(90deg, var(--oro), var(--linea)); transform-origin: 0 50%; }
.sitio .lectura-3 .lectura-cota::after { right: auto; left: 0; }

/* ---- insignia SITE LIVE, esquina superior derecha ---- */
.sitio .insignia {
  position: absolute; z-index: 1; right: 2.5%; top: 5%; margin: 0;
  display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px;
  background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio);
  font-family: var(--fuente-mono); font-size: 12px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-claro);
}
.sitio .insignia-anillo { flex: none; width: 28px; height: 28px; overflow: visible; }
.sitio .insignia-aro { fill: none; stroke: var(--oro); stroke-width: 1.2; }
.sitio .insignia-nucleo { fill: var(--oro-claro); }
.sitio .insignia-onda { fill: none; stroke: var(--oro); stroke-width: 1; opacity: 0; }
.sitio .insignia-texto { display: inline-block; white-space: nowrap; }

@media (max-width: 700px) {
  /* En vertical el navegador ocupa la franja de 15 % a 69 %: las lecturas se
     apilan debajo, cada una sobre su filete, y la insignia queda encima. */
  .sitio .lectura { left: 6%; right: 6%; width: auto; padding-bottom: 8px; letter-spacing: .06em; text-align: left; }
  .sitio .lectura-1 { top: 72%; }
  .sitio .lectura-2 { top: 81%; }
  .sitio .lectura-3 { top: 90%; }
  .sitio .lectura-cabeza, .sitio .lectura-3 .lectura-cabeza { display: inline-flex; justify-content: flex-start; margin: 0 12px 0 0; vertical-align: top; }
  .sitio .lectura-texto { display: inline; }
  .sitio .lectura-cota, .sitio .lectura-3 .lectura-cota { background: linear-gradient(90deg, var(--oro), var(--linea) 60%, transparent); transform-origin: 0 50%; }
  .sitio .lectura-cota::after, .sitio .lectura-3 .lectura-cota::after { left: 0; right: auto; }
  .sitio .insignia { right: 6%; top: 3%; }
}