/* =========================================================================
   Premio Clase de Química del 2026 — ITCC
   Hoja de estilo comun a la portada y a la experiencia de realidad aumentada.
   ========================================================================= */

:root {
  --fondo:        #070a10;
  --fondo-2:      #0d121c;
  --superficie:   rgba(19, 26, 39, 0.86);
  --superficie-solida: rgba(14, 19, 29, 0.985);
  --borde:        rgba(122, 214, 255, 0.16);
  --borde-fuerte: rgba(122, 214, 255, 0.38);
  --texto:        #e8edf5;
  --texto-2:      #96a3b8;
  --texto-3:      #5f6d84;
  --si:           #7ad6ff;   /* azul silicio */
  --valencia:     #ffb454;   /* ambar: electrones de valencia */
  --n:            #5ee6a8;
  --p:            #ff7a8a;
  --radio:        14px;
  --sombra:       0 18px 50px rgba(0, 0, 0, 0.55);
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body { line-height: 1.55; }

h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.021em; font-weight: 700; }

a { color: var(--si); text-decoration: none; }
a:hover { text-decoration: underline; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* --------------------------------------------------------------- tipografia
   Escalas fluidas: la misma hoja sirve para un movil en vertical y para el
   proyector del aula sin puntos de ruptura intermedios. */
.kicker {
  font-size: clamp(0.66rem, 1.7vw, 0.76rem);
  text-transform: uppercase;
  letter-spacing: 0.19em;
  font-weight: 700;
  color: var(--si);
  margin-bottom: 0.55rem;
}
.titulo   { font-size: clamp(1.55rem, 6.2vw, 2.9rem); }
.entradilla {
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  color: var(--texto-2);
  margin: 0.75rem 0 0;
  max-width: 62ch;
}

/* ------------------------------------------------------------------ atomos
   Componentes reutilizados por las dos vistas. */

.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.dato {
  background: rgba(122, 214, 255, 0.05);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
}
.dato b {
  display: block;
  font-size: clamp(1.15rem, 4.2vw, 1.6rem);
  font-weight: 700;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.dato b span { font-size: 0.55em; color: var(--texto-2); margin-left: 0.18em; font-weight: 600; }
.dato small { display: block; color: var(--texto-3); font-size: 0.71rem; margin-top: 0.1rem; }

.puntos { margin: 1.05rem 0 0; padding: 0; list-style: none; }
.puntos li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.55rem;
  color: var(--texto-2);
  font-size: clamp(0.88rem, 2.4vw, 0.97rem);
}
.puntos li::before {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--si);
  box-shadow: 0 0 10px rgba(122, 214, 255, 0.75);
}

/* cronologia ------------------------------------------------------------- */
.cronologia { margin: 1.15rem 0 0; padding: 0 0 0 1.1rem; list-style: none; border-left: 1px solid var(--borde); }
.cronologia li { position: relative; padding: 0 0 0.85rem 1rem; }
.cronologia li::before {
  content: "";
  position: absolute; left: -1.42rem; top: 0.45em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--fondo); border: 2px solid var(--borde-fuerte);
}
.cronologia li.hito::before { background: var(--si); border-color: var(--si); box-shadow: 0 0 14px var(--si); }
.cronologia .ano {
  font-family: var(--mono);
  font-size: 0.82rem; font-weight: 700; color: var(--si);
  letter-spacing: 0.02em;
}
.cronologia .ano.hito { color: var(--valencia); }
.cronologia p { margin: 0.12rem 0 0; color: var(--texto-2); font-size: 0.9rem; }

/* capas electronicas ----------------------------------------------------- */
.capas { margin-top: 1.15rem; display: grid; gap: 0.5rem; }
.capa {
  display: grid;
  grid-template-columns: 4.4rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: rgba(122, 214, 255, 0.04);
}
.capa.destacada { border-color: rgba(255, 180, 84, 0.5); background: rgba(255, 180, 84, 0.08); }
.capa .nombre { font-weight: 700; font-size: 0.9rem; }
.capa .orbitales { font-family: var(--mono); font-size: 0.8rem; color: var(--texto-2); }
.capa .bolitas { display: flex; gap: 3px; flex-wrap: wrap; max-width: 8.5rem; justify-content: flex-end; }
.capa .bolita { width: 9px; height: 9px; border-radius: 50%; background: var(--si); box-shadow: 0 0 8px rgba(122,214,255,0.8); }
.capa.destacada .bolita { background: var(--valencia); box-shadow: 0 0 8px rgba(255,180,84,0.85); }

/* barras de abundancia --------------------------------------------------- */
.barras { margin-top: 1.15rem; display: grid; gap: 0.5rem; }
.barra { display: grid; grid-template-columns: 5.4rem 1fr 3rem; align-items: center; gap: 0.6rem; font-size: 0.86rem; }
.barra .pista { height: 9px; border-radius: 99px; background: rgba(255,255,255,0.07); overflow: hidden; }
.barra .relleno {
  height: 100%; border-radius: 99px; background: linear-gradient(90deg, #35618f, #7ad6ff);
  width: 0; transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.barra.destacada .relleno { background: linear-gradient(90deg, #b06a1c, var(--valencia)); }
.barra .pct { text-align: right; color: var(--texto-2); font-variant-numeric: tabular-nums; }

/* pasos del proceso ------------------------------------------------------ */
.pasos { margin-top: 1.15rem; display: grid; gap: 0.6rem; }
.paso {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.8rem;
  padding: 0.7rem 0.8rem; border: 1px solid var(--borde); border-radius: 10px;
  background: rgba(122,214,255,0.04);
}
.paso .n { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--si); }
.paso h4 { margin: 0 0 0.15rem; font-size: 0.92rem; }
.paso p { margin: 0; color: var(--texto-2); font-size: 0.86rem; }

/* usos ------------------------------------------------------------------- */
.usos { margin-top: 1.15rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.uso { padding: 0.75rem; border: 1px solid var(--borde); border-radius: 10px; background: rgba(122,214,255,0.04); }
.uso .icono { font-size: 1.3rem; color: var(--si); line-height: 1; }
.uso h4 { margin: 0.35rem 0 0.18rem; font-size: 0.9rem; }
.uso p { margin: 0; font-size: 0.82rem; color: var(--texto-2); }

/* comparativa ------------------------------------------------------------ */
.comparativa { margin-top: 1.15rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.7rem; }
.comp { padding: 0.85rem; border: 1px solid var(--borde); border-radius: 10px; background: rgba(122,214,255,0.04); }
.comp:nth-child(2) { border-color: rgba(255,122,138,0.3); background: rgba(255,122,138,0.06); }
.comp h4 { margin: 0; font-size: 1.02rem; }
.comp .formula { font-family: var(--mono); color: var(--si); font-size: 0.85rem; margin: 0.2rem 0 0.4rem; }
.comp:nth-child(2) .formula { color: var(--p); }
.comp p { margin: 0; font-size: 0.85rem; color: var(--texto-2); }

/* --------------------------------------------------------------- animacion
   El contenido es visible por defecto. Solo si el script esta vivo se le pone
   .entrada (que lo esconde) y acto seguido .dentro (que lo trae). Asi, si el
   modulo falla o el navegador no soporta algo, el texto sigue leyendose: nunca
   depende de que una animacion termine. */
.entrada > * { opacity: 0; transform: translateY(14px); }
.entrada.dentro > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.entrada.dentro > *:nth-child(1) { transition-delay: 0.02s; }
.entrada.dentro > *:nth-child(2) { transition-delay: 0.08s; }
.entrada.dentro > *:nth-child(3) { transition-delay: 0.14s; }
.entrada.dentro > *:nth-child(4) { transition-delay: 0.20s; }
.entrada.dentro > *:nth-child(5) { transition-delay: 0.26s; }
.entrada.dentro > *:nth-child(6) { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .entrada > * { opacity: 1; transform: none; }
}

/* ========================================================================
   MODO AR
   ======================================================================== */

body.ar { overflow: hidden; height: 100dvh; background: #000; }

#lienzo-ar { position: fixed; inset: 0; }
#lienzo-ar canvas, #lienzo-ar video { display: block; }

/* capa de interfaz por encima del video: solo los controles reciben toques,
   asi el usuario puede seguir moviendo el movil sin pelearse con la interfaz */
#capa {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#capa > * { pointer-events: auto; }

/* --- estado: buscando el marcador -------------------------------------- */
#buscando {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  text-align: center; gap: 1rem; padding: 1.5rem;
  background: radial-gradient(ellipse at center, rgba(7,10,16,0.35), rgba(7,10,16,0.82));
  transition: opacity 0.45s ease, visibility 0.45s;
  pointer-events: none;
}
#buscando.oculto { opacity: 0; visibility: hidden; }
.mira {
  width: min(70vw, 300px); aspect-ratio: 54 / 30;
  border-radius: 10px; position: relative;
}
.mira i {
  position: absolute; width: 26px; height: 26px;
  border: 2.5px solid var(--si); border-radius: 4px;
}
.mira i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.mira i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.mira i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.mira i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.mira::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--si), transparent);
  animation: barrido 2.4s ease-in-out infinite;
}
@keyframes barrido {
  0%, 100% { transform: translateY(-46%); opacity: 0.25; }
  50%      { transform: translateY(46%);  opacity: 1; }
}
#buscando p { margin: 0; color: var(--texto-2); font-size: 0.95rem; max-width: 30ch; }
#buscando strong { color: var(--texto); display: block; font-size: 1.12rem; margin-bottom: 0.3rem; }

/* --- barra de control ---------------------------------------------------
   Mínima a propósito: el texto de la presentación vive en las pantallas
   flotantes en 3D, así que aquí abajo solo van los botones y la cámara se
   queda con toda la pantalla. */
#barra {
  margin-top: auto;
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(7, 10, 16, 0.82) 45%);
  opacity: 0; transform: translateY(1.2rem);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#barra.visible { opacity: 1; transform: none; }

#estado-sup {
  position: absolute; top: calc(0.7rem + env(safe-area-inset-top));
  right: 0.9rem; display: flex; align-items: center; gap: 0.5rem;
  pointer-events: none;
}
#estado-sup .num {
  font-family: var(--mono); font-size: 0.78rem; color: var(--texto-2);
  background: rgba(7, 10, 16, 0.55); border-radius: 99px; padding: 0.2rem 0.6rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#estado-sup .pastilla { font-size: 0.62rem; }

/* --- controles ---------------------------------------------------------- */
.btn {
  appearance: none; border: 1px solid var(--borde-fuerte);
  background: rgba(10, 16, 26, 0.72); color: var(--texto);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 99px; padding: 0.6rem 1.05rem;
  font: inherit; font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: background 0.18s ease, transform 0.12s ease;
  min-height: 44px;                      /* objetivo tactil comodo */
}
.btn:hover  { background: rgba(122, 214, 255, 0.17); }
.btn:active { transform: scale(0.97); }
.btn.primario { background: var(--si); color: #04121c; border-color: var(--si); }
.btn.icono { padding: 0.6rem 0.9rem; min-width: 44px; }
.btn[disabled] { opacity: 0.38; pointer-events: none; }

#progreso { display: flex; gap: 5px; flex: 1; justify-content: center; }
#progreso i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.28); transition: all 0.3s ease;
}
#progreso i.activo { background: var(--si); width: 20px; border-radius: 99px; }
#progreso i.visto { background: rgba(122,214,255,0.5); }

/* --- avisos ------------------------------------------------------------- */
#aviso {
  position: fixed; inset: 0; z-index: 50;
  display: none; place-content: center; justify-items: center;
  padding: 1.6rem; text-align: center; gap: 0.9rem;
  background: var(--fondo);
}
#aviso.visible { display: grid; }
#aviso h2 { font-size: 1.3rem; }
#aviso p { color: var(--texto-2); max-width: 38ch; margin: 0; font-size: 0.95rem; }
#aviso .detalle {
  font-family: var(--mono); font-size: 0.75rem; color: var(--texto-3);
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: 8px; padding: 0.6rem 0.8rem; max-width: 90vw;
  overflow-x: auto; text-align: left;
}

#cargando {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-content: center; justify-items: center; gap: 1rem;
  background: var(--fondo); transition: opacity 0.5s ease, visibility 0.5s;
}
#cargando.oculto { opacity: 0; visibility: hidden; }
.anillo {
  width: 54px; height: 54px; border-radius: 50%;
  border: 3px solid rgba(122,214,255,0.18); border-top-color: var(--si);
  animation: girar 0.9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
#cargando .pct { font-family: var(--mono); font-size: 0.8rem; color: var(--texto-3); }

/* ========================================================================
   PORTADA
   ======================================================================== */

.envoltorio { max-width: 1080px; margin: 0 auto; padding: 0 1.15rem; }

/* Dos columnas en pantallas anchas: el texto a un lado y el átomo al otro.
   Antes el lienzo iba en posición absoluta detrás del texto y en un monitor
   grande quedaba medio pantallazo negro vacío arriba. */
#hero {
  display: grid;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vh, 3.5rem) 1.15rem clamp(2rem, 5vh, 4rem);
  /* Un tope en píxeles además de la altura de pantalla: en un monitor muy alto
     el 100svh estira el bloque y separa el texto del átomo sin motivo. */
  min-height: min(100svh, 860px);
}
#lienzo-hero { width: 100%; min-width: 0; }
#hero .contenido { min-width: 0; }

@media (min-width: 900px) {
  #hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  #lienzo-hero { height: min(72svh, 620px); }
}
@media (max-width: 899px) {
  #lienzo-hero { order: -1; height: clamp(240px, 38svh, 380px); }
  #hero { padding-top: 1rem; }
}
#hero h1 { font-size: clamp(2rem, 5.4vw, 3.5rem); max-width: 13ch; text-wrap: balance; }
#hero .entradilla { max-width: 44ch; }
#hero .simbolo {
  font-size: clamp(3rem, 10vw, 5.6rem);
  font-weight: 800; letter-spacing: -0.05em; color: var(--si);
  line-height: 0.9; margin-bottom: 0.2rem;
  text-shadow: 0 0 60px rgba(122, 214, 255, 0.35);
}
.acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }

.seccion { padding: 3.2rem 0; border-top: 1px solid rgba(255,255,255,0.06); }
.seccion .cabecera { margin-bottom: 0.4rem; }

.pie {
  padding: 2.4rem 0 3.2rem; border-top: 1px solid rgba(255,255,255,0.06);
  color: var(--texto-3); font-size: 0.8rem;
}
.pie ul { margin: 0.6rem 0 0; padding-left: 1.1rem; }
.pie li { margin-bottom: 0.25rem; }

.tarjeta-qr {
  display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: rgba(122,214,255,0.04); padding: 1rem;
}
.tarjeta-qr img { width: 132px; height: 132px; border-radius: 8px; background: #fff; padding: 6px; }

/* ========================================================================
   VISTA DE PROYECTOR  (presentar.html)
   ======================================================================== */

body.proyector { background: var(--fondo); }

#emparejar {
  position: fixed; inset: 0; z-index: 20;
  display: grid; align-content: center; justify-items: center;
  gap: 0.9rem; padding: clamp(1.2rem, 4vw, 3rem); text-align: center;
  background: var(--fondo);
  transition: opacity 0.5s ease, visibility 0.5s;
}
#emparejar.oculto { opacity: 0; visibility: hidden; }
#emparejar .entradilla { margin-inline: auto; }

.fila-qr {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem);
  flex-wrap: wrap; justify-content: center; margin-top: 1rem;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: rgba(122, 214, 255, 0.04); padding: clamp(1rem, 2.5vw, 1.6rem);
}
.fila-qr canvas {
  width: clamp(180px, 26vw, 300px); height: auto;
  border-radius: 10px; background: #fff; padding: 8px;
  image-rendering: pixelated;                 /* nada de QR borroso al escalar */
}
.fila-qr > div { text-align: left; }
.codigo {
  font-family: var(--mono); font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700; letter-spacing: 0.14em; color: var(--si); line-height: 1.1;
}
#enlace-texto { color: var(--texto-3); font-size: 0.8rem; margin: 0.3rem 0 0; word-break: break-all; max-width: 34ch; }
.estado { color: var(--texto-3); font-size: 0.82rem; margin: 0.7rem 0 0; }
.estado.ok { color: var(--n); }
.estado.mal { color: var(--p); }

/* Rótulo del proyector: tipografía grande, pensada para verse desde el fondo
   del aula, y anclado abajo para no tapar la escena 3D. */
#rotulo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: clamp(0.7rem, 2vh, 1.4rem) clamp(1.5rem, 5vw, 4rem) clamp(1rem, 2.5vh, 1.8rem);
  background: linear-gradient(transparent, rgba(7, 10, 16, 0.93) 28%);
  pointer-events: none;
}
#rotulo .cabecera { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.4rem; }
#rotulo .titulo:empty, #rotulo .entradilla:empty { display: none; }
#rotulo #r-indice {
  position: absolute; right: clamp(1.5rem, 5vw, 4rem); bottom: clamp(1.4rem, 4vh, 3rem);
  font-family: var(--mono); font-size: clamp(0.9rem, 1.6vw, 1.3rem); color: var(--texto-3);
}
.pastilla {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
  padding: 0.24rem 0.6rem; border-radius: 99px;
  background: rgba(94, 230, 168, 0.14); color: var(--n); border: 1px solid rgba(94, 230, 168, 0.35);
}
.pastilla.solo { background: rgba(122,214,255,0.12); color: var(--si); border-color: var(--borde-fuerte); }

/* Espejo del teléfono en la vista de proyector. object-fit: contain para no
   recortar nada: lo que se proyecta tiene que ser lo mismo que ve quien sujeta
   el teléfono, con bandas si hace falta. */
#espejo {
  position: fixed; inset: 0; z-index: 5;
  width: 100%; height: 100%;
  object-fit: contain; background: #000;
}
#espejo[hidden] { display: none; }
body.proyector.espejando #lienzo-ar { visibility: hidden; }

/* --- aviso de girar el teléfono ----------------------------------------- */
#gira {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-content: center; justify-items: center;
  gap: 0.9rem; padding: 2rem; text-align: center;
  background: var(--fondo);
}
#gira[hidden] { display: none; }
#gira .icono-gira { color: var(--si); animation: girar-aviso 2.4s ease-in-out infinite; }
#gira strong { font-size: 1.2rem; }
#gira p { color: var(--texto-2); max-width: 30ch; margin: 0; font-size: 0.92rem; }
@keyframes girar-aviso {
  0%, 45%   { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}