/* La web de hitNote: neón sobre grafito, como la app (karaoke/Fuentes/Comun/Neon.swift).
   Ámbar para el micrófono y lo que suena, cian para la música, naranja para los efectos.
   Solo oscuro, a propósito: se mira de noche, en un karaoke.
   Sin fuentes de afuera: ui-rounded es la SF Pro Rounded de la app en iPhone, iPad y Mac;
   en lo demás, la del sistema. Así la página no le pide nada a nadie más. */

:root {
  --noche: #0F1216;
  --panel: #171B21;
  --panel2: #1E232B;
  --borde: #2A313B;
  --crema: #F3F1EC;
  --tenue: #9AA4B1;
  --ambar: #FFB321;
  --naranja: #FF7A1A;
  --cian: #31E3FF;
  --verde: #6FF0A8;
  --sala: #06242E;
  --ficha-sala: #0B3340;
  --marca: #FFEBDC;

  --redondo: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ancho: 68rem;
  --margen: 20px;

  /* El brillo de la app: dos sombras del mismo color, una cerca y otra lejos. */
  --brillo-ambar: 0 0 4px rgba(255, 179, 33, 0.75), 0 0 14px rgba(255, 179, 33, 0.45);
  --brillo-cian: 0 0 4px rgba(49, 227, 255, 0.75), 0 0 14px rgba(49, 227, 255, 0.45);
  --brillo-naranja: 0 0 4px rgba(255, 122, 26, 0.75), 0 0 14px rgba(255, 122, 26, 0.45);

  color-scheme: dark;
}

/* El idioma: se ve solo lo que tiene el lang de <html> (lo pone idioma.js). */
html[lang="es"] body [lang="en"],
html[lang="en"] body [lang="es"] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background:
    radial-gradient(56rem 30rem at 92% -6%, rgba(255, 179, 33, 0.10), transparent 62%),
    radial-gradient(44rem 28rem at -12% 34%, rgba(49, 227, 255, 0.06), transparent 62%),
    var(--noche);
  background-repeat: no-repeat;
  color: var(--crema);
  font-family: var(--redondo);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; font-weight: 800; }
p, ul, ol, figure { margin: 0; }
a { color: var(--cian); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 6px; }
img, svg { display: block; }
[hidden] { display: none !important; }

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

/* ——— Cabecera ——— */

.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 18px;
}
.marca {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--marca); text-decoration: none;
  font-weight: 900; font-size: 1.4rem; letter-spacing: -0.01em;
  text-shadow: 0 0 3px rgba(255, 122, 26, 0.9), 0 0 12px rgba(255, 122, 26, 0.6);
}
.marca svg { width: 2.1rem; height: 2.1rem; flex: none; }

.idiomas { display: flex; gap: 0.4rem; }
.idiomas a {
  font-size: 0.875rem; font-weight: 700;
  color: var(--tenue); text-decoration: none;
  border: 1.5px solid var(--borde); border-radius: 999px;
  padding: 0.3rem 0.8rem;
  transition: color 0.15s, border-color 0.15s;
}
.idiomas a:hover { color: var(--crema); border-color: var(--tenue); }
.idiomas a[aria-current] { color: var(--cian); border-color: var(--cian); box-shadow: 0 0 10px rgba(49, 227, 255, 0.25); }
@media (max-width: 359px) {
  .marca { font-size: 1.2rem; }
  .idiomas { gap: 0.3rem; }
  .idiomas a { padding: 0.3rem 0.6rem; }
}

/* ——— Portada ——— */

.portada {
  display: grid; gap: 1.75rem;
  padding-block: 2rem 3.5rem;
}
.portada-icono { display: grid; justify-items: start; gap: 0; }
.portada-icono img {
  width: 104px; height: 104px; border-radius: 23%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 36px rgba(255, 179, 33, 0.22), 0 18px 48px rgba(0, 0, 0, 0.55);
}
.antetitulo {
  font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cian); text-shadow: var(--brillo-cian);
}
.portada h1 {
  font-size: clamp(2.5rem, 10vw, 4.75rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02;
  margin-top: 0.6rem;
}
.portada h1 em {
  font-style: normal; color: var(--ambar); text-shadow: var(--brillo-ambar);
  animation: encender 1.6s ease-out 0.2s both;
}
.bajada { font-size: 1.1875rem; color: var(--tenue); max-width: 34rem; margin-top: 1.1rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.boton {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: inherit; font-weight: 800; font-size: 1rem; text-decoration: none;
  padding: 0.75rem 1.15rem; border-radius: 14px;
  border: 1.5px solid var(--ambar); color: var(--ambar);
  box-shadow: 0 0 12px rgba(255, 179, 33, 0.18);
}
.boton-lleno { background: var(--ambar); color: var(--noche); box-shadow: 0 0 6px rgba(255, 179, 33, 0.6), 0 0 22px rgba(255, 179, 33, 0.35); }
.boton-quieto { border-color: var(--borde); color: var(--tenue); box-shadow: none; cursor: default; }
.boton svg { width: 1.1rem; height: 1.1rem; }

@keyframes encender {
  0% { opacity: 0.15; text-shadow: none; }
  10% { opacity: 1; text-shadow: var(--brillo-ambar); }
  13% { opacity: 0.35; text-shadow: none; }
  18% { opacity: 1; text-shadow: var(--brillo-ambar); }
  22% { opacity: 0.6; }
  28%, 100% { opacity: 1; text-shadow: var(--brillo-ambar); }
}
@media (prefers-reduced-motion: reduce) { .portada h1 em { animation: none; } }

/* El piso del ícono: la línea cian con los dos destellos naranjos. */
.escenario { position: relative; height: 22px; width: 100%; }
.escenario::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; border-radius: 3px;
  background: var(--cian); box-shadow: var(--brillo-cian);
}
.escenario i {
  position: absolute; bottom: 10px; width: 14px; height: 3px; border-radius: 3px;
  background: var(--naranja); box-shadow: var(--brillo-naranja);
}
.escenario i:first-child { left: 5%; transform: rotate(45deg); }
.escenario i:last-child { right: 5%; transform: rotate(-45deg); }

/* ——— Secciones ——— */

.seccion { padding-block: 3.5rem; }
.seccion > h2, .titulo-seccion {
  font-size: clamp(1.75rem, 6vw, 2.5rem); letter-spacing: -0.02em;
  margin-bottom: 1.75rem;
}
.seccion > h2::after, .titulo-seccion::after {
  content: ""; display: block; width: 2.5rem; height: 3px; border-radius: 3px; margin-top: 0.7rem;
  background: var(--cian); box-shadow: var(--brillo-cian);
}

/* Cómo se usa: los tres pasos y el video. */
.uso { display: grid; gap: 2rem; }
.pasos { list-style: none; padding: 0; display: grid; gap: 0.9rem; counter-reset: paso; }
.paso {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem;
  background: var(--panel2); border: 1px solid var(--borde); border-radius: 18px;
  padding: 1.1rem 1.15rem; position: relative; overflow: hidden;
}
.paso::before {
  /* El borde de color de la ficha, como en la app. */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: var(--color); box-shadow: 0 0 8px var(--color);
}
.paso-mixer { --color: var(--cian); background: var(--ficha-sala); border-color: #12465a; }
.paso-streamer { --color: var(--verde); }
.paso-cantar { --color: var(--ambar); }
.paso-escuchar { --color: var(--naranja); }
.paso-icono {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--color); color: var(--color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--color) 35%, transparent), inset 0 0 10px color-mix(in srgb, var(--color) 18%, transparent);
}
.paso-icono svg { width: 1.6rem; height: 1.6rem; filter: drop-shadow(0 0 3px var(--color)); }
.paso p { font-size: 1.1875rem; font-weight: 700; line-height: 1.35; }
.paso-numero {
  display: block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color); margin-bottom: 0.15rem;
}

/* El video: todavía no existe. Se cambia el div .video-pronto por el <video> (ver index.html).
   Si sale horizontal, --aspecto pasa a 16 / 9. */
.video { --aspecto: 9 / 16; width: min(100%, 260px); justify-self: center; }
.video-pronto, .video video {
  width: 100%; aspect-ratio: var(--aspecto); border-radius: 22px;
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  border: 1.5px dashed #3a4350;
}
.video-pronto { display: grid; place-content: center; justify-items: center; gap: 0.8rem; color: var(--tenue); text-align: center; padding: 1rem; }
.video-pronto svg { width: 3.5rem; height: 3.5rem; color: var(--cian); filter: drop-shadow(0 0 6px rgba(49, 227, 255, 0.5)); }
.video-pronto span { font-weight: 700; font-size: 0.9375rem; }
.video video { border-style: solid; border-color: var(--borde); object-fit: cover; }

/* Recomendaciones: el dibujo de las dos maneras de conectar el mixer y los ajustes. */
.sub { font-size: 1.25rem; margin: 2.5rem 0 1rem; }
.seccion > h2 + .sub { margin-top: 0; }
.conexiones { display: grid; gap: 1rem; }
.conexion {
  margin: 0; background: var(--panel); border: 1px solid var(--borde); border-radius: 22px;
  padding: 1.25rem 1.25rem 1rem; display: grid; gap: 1rem; align-content: start;
}
.conexion figcaption { display: grid; gap: 0.2rem; }
.conexion figcaption b { font-size: 1.125rem; }
.conexion figcaption span { color: var(--tenue); font-size: 0.9375rem; }
.diagrama { width: 100%; max-width: 420px; height: auto; justify-self: center; overflow: visible; }
.diagrama text { font-family: var(--redondo); font-size: 13px; font-weight: 700; fill: var(--tenue); text-anchor: middle; }
.diagrama .t-mixer { fill: var(--cian); }
.diagrama .t-chica { font-size: 10px; font-weight: 600; }
.diagrama .t-fin { text-anchor: end; }
.diagrama .t-inicio { text-anchor: start; }
.diagrama .aparato { stroke-width: 2.2; fill: var(--panel2); }
.diagrama .mixer { stroke: var(--cian); fill: var(--ficha-sala); }
.diagrama .cantante { stroke: var(--ambar); }
.diagrama .streamer { stroke: var(--verde); }
.diagrama .neutro { stroke: var(--crema); }
.diagrama circle.neutro { fill: none; }
.diagrama .cable { fill: none; stroke: var(--crema); stroke-width: 2.5; stroke-linecap: round; opacity: 0.8; }
.diagrama .wifi { fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 0.1 6.5; }
.diagrama .senal { fill: none; stroke: var(--cian); stroke-width: 2.2; stroke-linecap: round; }
.diagrama .antena { fill: none; stroke: var(--crema); stroke-width: 2.2; stroke-linecap: round; }
.diagrama .punto { fill: var(--cian); }
.diagrama .punto-verde { fill: var(--verde); }
.leyenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; color: var(--tenue); font-size: 0.9375rem; margin-top: 1rem; }
.leyenda > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.leyenda i { display: inline-block; width: 30px; border-top: 2.5px solid var(--crema); }
.leyenda i.l-wifi { border-top: 3px dotted var(--ambar); }
.ajustes { max-width: 46rem; }

/* Precio. */
.planes { display: grid; gap: 1rem; }
.plan {
  background: var(--panel2); border: 1px solid var(--borde); border-radius: 22px;
  padding: 1.5rem 1.35rem; display: grid; gap: 1.1rem; align-content: start;
}
.plan h3 { font-size: 1.5rem; }
.plan-sub { color: var(--tenue); margin-top: 0.25rem; }
.plan-completo {
  border: 1.5px solid var(--ambar);
  box-shadow: 0 0 6px rgba(255, 179, 33, 0.35), 0 0 30px rgba(255, 179, 33, 0.12);
  background: linear-gradient(180deg, rgba(255, 179, 33, 0.07), transparent 40%), var(--panel2);
}
.plan-completo h3 { color: var(--ambar); text-shadow: var(--brillo-ambar); }
.precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.6rem; margin-top: 0.35rem; }
.precio b { font-size: 2.25rem; font-weight: 900; letter-spacing: -0.02em; }
.precio span { color: var(--tenue); font-weight: 700; }

.lista { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.lista li { display: grid; grid-template-columns: 1.35rem 1fr; gap: 0.6rem; align-items: start; }
.lista svg { width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; color: var(--cian); filter: drop-shadow(0 0 3px rgba(49, 227, 255, 0.6)); }
.plan-completo .lista svg { color: var(--ambar); filter: drop-shadow(0 0 3px rgba(255, 179, 33, 0.6)); }
.lista-no svg { color: var(--tenue) !important; filter: none !important; }
.lista-no { color: var(--tenue); }
.nota { color: var(--tenue); font-size: 0.9375rem; margin-top: 1.25rem; max-width: 46rem; }

/* Preguntas. */
.preguntas { display: grid; gap: 0.6rem; max-width: 50rem; }
.preguntas details {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 16px;
  transition: border-color 0.15s;
}
.preguntas details[open] { border-color: #3a4350; background: var(--panel2); }
.preguntas summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;
  padding: 1rem 1.15rem; font-weight: 800; font-size: 1.0625rem; line-height: 1.35;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; width: 0.75rem; height: 0.75rem; flex: none;
  border-right: 2.5px solid var(--cian); border-bottom: 2.5px solid var(--cian);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s;
  filter: drop-shadow(0 0 3px rgba(49, 227, 255, 0.6));
}
.preguntas details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.respuesta { padding: 0 1.15rem 1.15rem; display: grid; gap: 0.7rem; color: #d3d8de; }
.respuesta b { color: var(--crema); }

/* Contacto. */
.contacto {
  background: var(--panel2); border: 1px solid var(--borde); border-radius: 22px;
  padding: 1.5rem 1.35rem; display: grid; gap: 1rem; max-width: 50rem;
}
.contacto p { font-size: 1.125rem; }

/* Lo que falta llenar: que se vea, para no publicarlo así. */
.pendiente {
  display: inline-block; font-weight: 800; font-size: 0.95em; line-height: 1.3;
  color: var(--ambar); border: 1.5px dashed var(--ambar); border-radius: 8px;
  padding: 0.05rem 0.5rem; background: rgba(255, 179, 33, 0.08);
}

/* Pie. */
.pie {
  padding-block: 2.5rem 3rem; margin-top: 2rem;
  color: var(--tenue); font-size: 0.9375rem;
  display: grid; gap: 1.25rem;
}
.pie nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }
.pie .marca { font-size: 1.125rem; }
.pie .marca svg { width: 1.6rem; height: 1.6rem; }

/* ——— Privacidad: una sola columna de lectura ——— */

.hoja { width: min(100% - 2 * var(--margen), 42rem); margin-inline: auto; display: grid; gap: 2.5rem; padding-bottom: 2rem; }
.hoja h1 { font-size: clamp(2rem, 8vw, 2.75rem); font-weight: 900; letter-spacing: -0.02em; }
.hoja h3 { font-size: 1.125rem; color: var(--ambar); text-shadow: 0 0 10px rgba(255, 179, 33, 0.35); }
.hoja ul { padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.hoja li::marker { color: var(--cian); }
.documento { display: grid; gap: 1.9rem; }
.bloque { display: grid; gap: 0.5rem; }
.fecha { color: var(--tenue); font-size: 0.9375rem; }
.entrada { font-size: 1.1875rem; line-height: 1.55; }
.volver { font-weight: 700; text-decoration: none; display: inline-flex; gap: 0.35rem; align-items: center; }
.volver:hover { text-decoration: underline; }

.tabla { overflow-x: auto; border: 1px solid var(--borde); border-radius: 16px; background: var(--panel); }
.tabla table { width: 100%; border-collapse: collapse; font-size: 0.96875rem; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 0.75rem 1rem; }
.tabla thead th {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue);
  font-weight: 800; border-bottom: 1px solid var(--borde);
}
.tabla tbody tr + tr td, .tabla tbody tr + tr th { border-top: 1px solid var(--borde); }
.tabla tbody th { font-weight: 800; color: var(--crema); white-space: nowrap; }
.tabla td { color: var(--tenue); }

.nada { border-left: 3px solid var(--cian); padding: 0.25rem 0 0.25rem 1rem; box-shadow: -6px 0 12px -8px rgba(49, 227, 255, 0.8); }

@media (max-width: 420px) {
  .tabla tbody th { white-space: normal; }
  .tabla th, .tabla td { padding: 0.65rem 0.75rem; }
}

/* ——— Computador ——— */

@media (min-width: 760px) {
  :root { --margen: 40px; }
  .cabecera { padding-block: 26px; }
  .portada { grid-template-columns: 1fr auto; align-items: center; gap: 3rem; padding-block: 4rem 5rem; }
  .portada-icono { order: 2; justify-items: center; }
  .portada-icono img { width: 232px; height: 232px; }
  .portada-icono .escenario { width: 300px; margin-top: 1.25rem; }
  .seccion { padding-block: 4rem; }
  .uso { grid-template-columns: 1fr 240px; align-items: start; gap: 3rem; }
  .video { width: 100%; }
  .paso { padding: 1.35rem 1.5rem; gap: 1.25rem; }
  .paso p { font-size: 1.375rem; }
  .conexiones { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .planes { grid-template-columns: 1fr 1.25fr; align-items: stretch; gap: 1.25rem; }
  .plan { padding: 2rem 1.9rem; }
  .pie { grid-template-columns: auto 1fr; align-items: center; }
  .pie nav { justify-content: flex-end; }
}
@media (max-width: 759px) {
  /* En el teléfono el ícono va chico y ya trae su propio piso. */
  .portada-icono .escenario { display: none; }
}