/* LA ENTRADA, CON LA CARA DE orquesta.pro (1 oct 2026, Carlos: "inluyendo la pagina
   de log in... necesita ser con el estilo de la pagina web https://orquesta.pro/").

   Sale de las hojas del sitio (orquesta-sitio\public\curso\assets\mc.css y
   mc-hero.css): fondo negro, la nube de puntos blanca a la derecha, Inter para el
   título y Roboto Mono para todo lo demás, las palabras clave en mono itálica azul
   dentro de su caja blanca con sombra, el renglón de tres etiquetas con su línea
   abajo y los botones cuadrados en mayúsculas. El azul #2f66ff va con cuentagotas,
   como allá. Estos colores son del sitio, no del tema de la app: por eso viven
   aquí y no usan las variables de estilos.css. */

.ent {
  --e-negro: #000000;
  --e-tinta: #111318;
  --e-azul: #2f66ff;
  --e-pelo: rgba(255, 255, 255, .16);
  --e-display: "Inter", Helvetica, Arial, sans-serif;
  --e-mono: "Roboto Mono", Consolas, monospace;
  --e-gut: clamp(1.25rem, 5vw, 4rem);
  position: fixed; inset: 0; z-index: 3000;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--e-negro); color: #fff;
  font-family: var(--e-display); font-weight: 400; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* La nube de puntos, quieta detrás de todo (graph-mono.js del sitio, en 2D). */
.ent-nube { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
@media (max-width: 760px) { .ent-nube { opacity: .55; } }

/* La barra de arriba del sitio: blanca casi opaca, el logo y el nombre. */
.ent-nav {
  position: sticky; top: 0; z-index: 3;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(17, 19, 24, .12);
}
.ent-nav-in { display: flex; align-items: center; height: 70px; padding: 0 var(--e-gut); }
.ent-marca { display: inline-flex; align-items: center; gap: .5rem; color: #000; text-decoration: none; }
.ent-marca img { height: 30px; width: auto; display: block; }
.ent-marca span { font-family: var(--e-display); font-weight: 500; font-size: 1.15rem; letter-spacing: .02em; line-height: 1; }
@media (max-width: 760px) { .ent-marca img { height: 26px; } .ent-marca span { font-size: 1.05rem; } }

/* El cuerpo, pegado abajo como el hero del sitio: la nube se ve arriba. */
.ent-hero {
  position: relative; z-index: 2;
  min-height: calc(100dvh - 71px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 48px var(--e-gut) clamp(2rem, 5vw, 3.5rem);
}
.ent-ceja {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;
  font-family: var(--e-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .22em;
  color: rgba(255, 255, 255, .72);
  padding-bottom: clamp(1.4rem, 4vw, 2.4rem); margin-bottom: clamp(1.4rem, 4vw, 2.4rem);
  border-bottom: 1px solid var(--e-pelo);
}
.ent-ceja span:nth-child(2) { text-align: center; }
.ent-ceja span:nth-child(3) { text-align: right; }
@media (max-width: 760px) {
  .ent-ceja { grid-template-columns: 1fr; gap: .3rem; }
  .ent-ceja span:nth-child(2), .ent-ceja span:nth-child(3) { text-align: left; }
}

.ent-titulo {
  font-family: var(--e-display); font-weight: 400; letter-spacing: -.03em; line-height: 1.12;
  font-size: clamp(2.6rem, 8vw, 7rem); max-width: 15ch; margin: 0;
}
/* La palabra clave: mono itálica azul en su caja blanca con sombra, como en el sitio. */
.ent-hl {
  color: var(--e-azul); font-family: var(--e-mono); font-style: italic; font-weight: 400;
  background: #fff; padding: .02em .16em; box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.ent-forma { display: flex; flex-direction: column; gap: .9rem; margin-top: clamp(1.6rem, 4vw, 2.6rem); max-width: 420px; }
.ent-campo { display: flex; flex-direction: column; gap: .45rem; }
.ent-campo span {
  font-family: var(--e-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .22em;
  color: rgba(255, 255, 255, .72);
}
/* 16 px o el teléfono hace zoom al tocar el campo. */
.ent-campo input {
  font-family: var(--e-mono); font-size: 16px; color: #fff;
  padding: .95rem 1rem; background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .32); outline: none;
  transition: border-color .18s;
}
.ent-campo input::placeholder { color: rgba(255, 255, 255, .38); }
.ent-campo input:focus { border-color: #fff; }

/* El botón principal del sitio: blanco con letra negra; al tocarlo se invierte. */
.ent-boton {
  align-self: flex-start; margin-top: .5rem;
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--e-mono); font-weight: 400; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  padding: 1rem 1.7rem; border: 1px solid #fff; background: #fff; color: var(--e-tinta); cursor: pointer;
  transition: background .18s, color .18s, transform .12s;
}
.ent-boton .flecha { transition: transform .2s; }
.ent-boton:hover:not(:disabled) { background: transparent; color: #fff; transform: translateY(-2px); }
.ent-boton:hover:not(:disabled) .flecha { transform: translateX(5px); }
.ent-boton:disabled { opacity: .6; cursor: default; }

.ent-error { margin: 0; font-family: var(--e-mono); font-size: .8rem; line-height: 1.5; color: #ff8a7a; }
.ent-error[hidden] { display: none; }

/* El renglón de abajo, como el "/// baja para ver cómo funciona" del sitio. */
.ent-pie {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  font-family: var(--e-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .2em;
  color: rgba(255, 255, 255, .6);
}
.ent-pie b { color: var(--e-azul); background: #fff; font-weight: 400; padding: .02em .16em; }

@media (prefers-reduced-motion: reduce) {
  .ent-boton, .ent-boton .flecha { transition: none; }
}