/* ============================================================
   Astra Creative Audio — casa.css
   Componentes NUEVOS de la home de marca. Se carga DESPUES de
   estilos.css y reutiliza sus variables: nada de colores sueltos.
   ============================================================ */

/* ---------- Tarjeta de producto ---------- */
.productos {
  display: grid;
  gap: 28px;
}

.producto {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

@media (max-width: 860px) {
  .producto { grid-template-columns: 1fr; }
}

.producto-info {
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}

.producto-etiqueta {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.producto-etiqueta::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.producto h3 {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  margin: 0;
  line-height: 1.15;
}

.producto h3 .fx {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.producto p {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
}

.producto-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.producto-datos span {
  font-size: 0.76rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  background: rgba(140, 160, 255, 0.05);
}

.producto-precio {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}

.producto-precio b {
  font-size: 1.45rem;
  color: var(--text);
}

.producto-precio.gratis b {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.producto-precio small { color: var(--muted); font-size: 0.85rem; }

.producto-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.producto-media {
  position: relative;
  background: var(--bg);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 22px;
}

@media (max-width: 860px) {
  .producto-media { border-left: 0; border-top: 1px solid var(--line); }
}

.producto-media img,
.producto-media video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--line);
}

/* 21-sep-2026 — el panel VIVO. La columna derecha de la tarjeta existia en el
   CSS desde el principio y estaba vacia en las cinco fichas. Lo que va dentro no
   es un pantallazo: son 24 fotogramas renderizados por el BANCO DE PRUEBAS del
   propio plugin con la reduccion de ganancia siguiendo un patron de beat, asi
   que la aguja que se mueve es la de verdad. Pesa 30-47 KB porque lo unico que
   cambia entre fotogramas es el medidor. */
.producto-media figure { margin: 0; }
.producto-media figcaption {
  margin-top: 10px;
  font-family: "Astra Etiquetas", system-ui, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ---------- Reproductor de demo ---------- */
.reproductor {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 12px 14px;
  background: rgba(140, 160, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.reproductor > button {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--grad);
  color: #05060f;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease;
}

.reproductor > button:hover { transform: scale(1.06); }
.reproductor > button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.reproductor-cuerpo { flex: 1; min-width: 0; }

.reproductor-titulo {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 7px;
  letter-spacing: 0.03em;
}

.onda {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  cursor: pointer;
}

.onda i {
  flex: 1;
  min-width: 1px;
  background: var(--violeta);
  opacity: 0.3;
  border-radius: 1px;
  display: block;
  transition: opacity 0.1s linear, background 0.1s linear;
}

.onda i.sonando { opacity: 1; background: var(--cyan); }

.reproductor-tiempo {
  flex: none;
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Bloque "la familia crece" ---------- */
.crece {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 30px 32px;
  text-align: center;
  background: rgba(140, 160, 255, 0.03);
}

.crece h3 { margin: 0 0 8px; font-size: 1.25rem; }
.crece p { margin: 0 auto; color: var(--muted); max-width: 56ch; }

.orbitas {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.orbitas i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--violeta);
  opacity: 0.28;
  display: block;
  animation: latido 3.2s ease-in-out infinite;
}

.orbitas i:nth-child(2) { animation-delay: 0.4s; }
.orbitas i:nth-child(3) { animation-delay: 0.8s; }
.orbitas i:nth-child(4) { animation-delay: 1.2s; }
.orbitas i:nth-child(5) { animation-delay: 1.6s; }

@keyframes latido {
  0%, 100% { opacity: 0.22; transform: scale(1); }
  50%      { opacity: 0.7;  transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .orbitas i { animation: none; }
}

/* ---------- Medidas (por qué suenan bien) ---------- */
.medidas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.medida {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}

.medida b {
  display: block;
  font-size: 1.9rem;
  line-height: 1.1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 4px;
}

.medida span {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.medida p { margin: 0; color: var(--muted); font-size: 0.92rem; }

.medidas-nota {
  margin: 18px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 62ch;
}

/* ---------- Captura de correo ---------- */
.correo {
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 34px;
  text-align: center;
}

.correo h2 { margin: 0 0 10px; }
.correo > p { color: var(--muted); max-width: 54ch; margin: 0 auto 22px; }

.correo form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.correo input {
  flex: 1 1 300px;
  max-width: 380px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 13px 20px;
  color: var(--text);
  font-family: var(--fuente);
  font-size: 0.95rem;
}

.correo input::placeholder { color: var(--muted); }
.correo input:focus { outline: 2px solid var(--cyan); outline-offset: 2px; }

.correo .letra-pequena {
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto;
}

.correo .letra-pequena a { color: var(--violeta-claro); }

/* ---------- Quiénes somos ---------- */
.nosotros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: start;
}

@media (max-width: 760px) { .nosotros { grid-template-columns: 1fr; } }

.nosotros p { color: var(--muted); margin: 0 0 14px; }
.nosotros p:last-child { margin-bottom: 0; }
.nosotros strong { color: var(--text); }

/* ---------- Carrusel de capturas ---------- */
.carrusel { position: relative; }

.carrusel-pista {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 10px;
}

.carrusel-pista::-webkit-scrollbar { display: none; }

.carrusel-pista figure {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
}

.carrusel-pista img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.carrusel-pista figcaption {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

.carrusel-flechas {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  padding: 0 8px;
}

.carrusel-flechas button {
  pointer-events: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(5, 6, 15, 0.72);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease;
}

.carrusel-flechas button:hover { background: rgba(77, 227, 255, 0.18); }
.carrusel-flechas button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.carrusel-puntos {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}

.carrusel-puntos i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--violeta);
  opacity: 0.3;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.carrusel-puntos i.activo { opacity: 1; transform: scale(1.25); background: var(--cyan); }

/* ---------- Cinta de features (marquee) ---------- */
.cinta {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(140, 160, 255, 0.03);
  padding: 13px 0;
}

.cinta-rodillo {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  animation: rodar 42s linear infinite;
}

.cinta-rodillo span {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.cinta-rodillo i {
  color: var(--cyan);
  font-style: normal;
  font-size: 0.7rem;
  opacity: 0.7;
}

.cinta:hover .cinta-rodillo { animation-play-state: paused; }

@keyframes rodar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .cinta-rodillo { animation: none; }
}

/* ---------- Selector de pistas del reproductor ---------- */
.pistas { display: flex; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; }

/* Los chips van en su propia linea, debajo del play y la onda. */
.reproductor { flex-wrap: wrap; }
.reproductor > .pistas { width: 100%; margin: 4px 0 0; }

.pistas button {
  width: auto;
  height: auto;
  border-radius: 999px;
  background: transparent;
  font-family: var(--fuente);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.pistas button:hover { color: var(--text); }
.pistas button.activa { color: var(--text); border-color: var(--cyan); background: rgba(77, 227, 255, 0.08); }
.pistas button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- Astrini: burbuja y chat ---------- */
#astrini-burbuja {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  box-shadow: 0 6px 24px rgba(5, 6, 15, 0.6), 0 0 0 2px rgba(77, 227, 255, 0.12);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#astrini-burbuja img,
#astrini-burbuja video {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}
#astrini-burbuja:hover { transform: scale(1.07); box-shadow: 0 8px 28px rgba(5, 6, 15, 0.7), 0 0 0 3px rgba(77, 227, 255, 0.25); }
#astrini-burbuja:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

#astrini-chat {
  position: fixed;
  right: 20px;
  bottom: 94px;
  z-index: 60;
  width: min(92vw, 340px);
}

.astrini-panel {
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(5, 6, 15, 0.75);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.astrini-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.astrini-cabecera img { border-radius: 50%; }
.astrini-cabecera b { display: block; font-size: 0.95rem; }
.astrini-cabecera span { display: block; font-size: 0.72rem; color: var(--muted); }

.astrini-cerrar {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 4px 6px;
}

.astrini-cerrar:hover { color: var(--text); }

.astrini-mensajes {
  height: 260px;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.astrini-msg {
  max-width: 86%;
  align-self: flex-end;
  background: var(--grad);
  color: #05060f;
  font-size: 0.87rem;
  line-height: 1.45;
  padding: 9px 12px;
  border-radius: 13px 13px 3px 13px;
}

.astrini-msg.de-astrini {
  align-self: flex-start;
  background: rgba(140, 160, 255, 0.09);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 13px 13px 13px 3px;
}

.astrini-msg.pensando { color: var(--muted); letter-spacing: 2px; }

.astrini-sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 10px;
}

.astrini-sugerencias button {
  font-family: var(--fuente);
  font-size: 0.74rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
}

.astrini-sugerencias button:hover { color: var(--text); border-color: var(--cyan); }

.astrini-entrada {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
}

.astrini-entrada input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--text);
  font-family: var(--fuente);
  font-size: 0.86rem;
}

.astrini-entrada input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }


/* Logo: Saira Expanded Black Italic (OFL, servida como "Astra Logo").
   Sustituye a Airstrike (Iconian, solo uso no comercial) desde el 5-sep-2026.
   Ver fonts/LICENCIAS.md. */
.logo {
  font-family: "Astra Logo", "Arial Black", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* La O final de "AUDIO" es itálica y se sale de la caja del texto; con
   background-clip:text lo que queda fuera no recibe degradado y se ve
   cortada. El padding le da caja a la parte que sobresale. */
.logo .fx { padding-right: 0.16em; margin-right: -0.16em; }

/* El h1 del hero vuelve a la sans de sistema en bold (la del sitio original,
   que es la que gusta): Goldman Bold (OFL, servida como "Astra Titulos")
   queda para los titulos de seccion. Ver fonts/LICENCIAS.md. */
h2, .producto h3, .crece h3, .correo h2,
.seccion h2, .cta-final h2, .rejilla-titulo {
  font-family: "Astra Titulos", "Arial Black", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.035em;
  /* Paladins ponia las minusculas en versalitas; Goldman no, asi que las
     mayusculas se fuerzan por CSS para conservar el aspecto aprobado. */
  text-transform: uppercase;
}

/* Titulo de sub-bloque (features, medidas, FAQ) */
.rejilla-titulo {
  text-align: center;
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  margin: 56px 0 22px;
  color: var(--text);
}

/* ---------- FAQ (preguntas rapidas) ---------- */
.faq {
  max-width: 720px;
  margin: 0 auto;
}

.faq details {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 18px;
  font-weight: 600;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cyan);
  font-size: 1.15rem;
}

.faq details[open] summary::after { content: "−"; }

.faq summary:hover { color: var(--cyan); }

.faq details p {
  margin: 0;
  padding: 0 18px 16px;
  color: var(--muted);
}

.faq details a { color: var(--violeta-claro); }

/* El clamp de .seccion h2 estaba pensado para la fuente de sistema en bold;
   Paladins es mas ancha, asi que un punto menos de cuerpo. */
.seccion h2 { font-size: clamp(1.4rem, 4.2vw, 2rem); line-height: 1.22; }

.producto-etiqueta, .hero-tarjeta .et, .medida span {
  font-family: "Astra Etiquetas", system-ui, sans-serif;
}

.cinta-rodillo span {
  font-family: "Astra Cinta", "Arial Narrow", sans-serif;
  letter-spacing: 0.14em;
  /* Airstrike Cond era cursiva; Saira Condensed no tiene cursiva, asi que la
     inclinacion de 12 grados va por transform: identica en todos los
     navegadores y sin cursiva sintetica. */
  display: inline-block;
  transform: skewX(-12deg);
}

/* ---------- Badge del hero (referencia GenTune) ---------- */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: rgba(140, 160, 255, 0.06);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

.hero-badge b { color: var(--cyan); font-weight: 600; }

/* Ecualizador animado incrustado en el titular */
.eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 0.62em;
  vertical-align: baseline;
  margin: 0 0.08em;
}

.eq i {
  width: 0.09em;
  min-width: 4px;
  background: var(--grad);
  border-radius: 2px;
  animation: eqsalta 1.1s ease-in-out infinite;
}

.eq i:nth-child(1) { height: 45%; animation-delay: 0s; }
.eq i:nth-child(2) { height: 90%; animation-delay: 0.18s; }
.eq i:nth-child(3) { height: 60%; animation-delay: 0.36s; }
.eq i:nth-child(4) { height: 100%; animation-delay: 0.54s; }

@keyframes eqsalta {
  0%, 100% { transform: scaleY(0.55); }
  50%      { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) { .eq i { animation: none; } }

/* ---------- Tarjetas flotantes bajo el hero (referencia GenTune) ---------- */
.hero-tarjetas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 34px;
  text-align: left;
}

@media (max-width: 820px) { .hero-tarjetas { grid-template-columns: 1fr; } }

.hero-tarjeta {
  background: rgba(13, 17, 38, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}

.hero-tarjeta .et {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.hero-stats {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.hero-stats div b {
  display: block;
  font-size: 1.25rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-stats div span { font-size: 0.72rem; color: var(--muted); }

.hero-tarjeta .reproductor { margin-top: 0; padding: 8px 10px; }
.hero-tarjeta .reproductor > button { width: 34px; height: 34px; }

/* Pila de caratulas de Planets en el hero */
.hero-tarjeta .hero-planetas {
  display: flex;
  align-items: center;
  text-decoration: none;
  /* en anchos intermedios la tarjeta encoge: el "+6 mundos" baja de linea
     entero en vez de salirse del recuadro */
  flex-wrap: wrap;
  row-gap: 6px;
}

.hero-tarjeta .hero-planetas img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(13, 17, 38, 0.9);
  object-fit: cover;
  margin-left: -12px;
  max-height: none;
}

.hero-tarjeta .hero-planetas img:first-child { margin-left: 0; }

.hero-tarjeta .hero-planetas span {
  margin-left: 12px;
  font-size: 0.82rem;
  color: var(--violeta-claro);
  white-space: nowrap;
}

.hero-tarjeta .hero-planetas:hover span { color: var(--cyan); }

.hero-tarjeta img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: block;
}

/* ---------- Planets con la foto de su pack ---------- */
.planeta { display: flex; align-items: center; gap: 14px; }

.planeta-foto {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(5, 6, 15, 0.5);
}

.planeta > div { min-width: 0; }
.planeta h3 { margin-bottom: 2px; }
.planeta::after { display: none; }


/* Tarjetas del hero a la misma altura visual */
.hero-tarjeta img { max-height: 150px; object-fit: cover; object-position: top; }
.hero-tarjeta { display: flex; flex-direction: column; justify-content: center; }
.hero-tarjeta .et { margin-top: 0; }

/* ---------- Tocalo (probador con perilla de mix) ---------- */
.tocalo-rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 860px) { .tocalo-rejilla { grid-template-columns: 1fr; } }

.tk-panel {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.tk-panel .producto-etiqueta { width: 100%; }

.tk-titulo { font-size: 1.3rem; margin: 0; }

.tk-titulo .fx {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tk-presets { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }

.tk-presets button {
  border: 1px solid var(--line);
  background: rgba(140, 160, 255, 0.05);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: var(--fuente);
}

.tk-presets button:hover { color: var(--text); }
.tk-presets button.activa { color: var(--text); border-color: var(--cyan); background: rgba(77, 227, 255, 0.08); }
.tk-presets button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.tk-fuente { font-size: 0.8rem; color: var(--muted); margin: 0; min-height: 1.2em; }

.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 26px; }

.tk-chips span {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: "Astra Etiquetas", system-ui, sans-serif;
}

.tk-centro { display: flex; align-items: center; gap: 26px; margin-top: 4px; }

.tk-play {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--grad);
  color: #05060f;
  font-size: 1rem;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease;
}

.tk-play:hover { transform: scale(1.07); }
.tk-play:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.tk-knob {
  position: relative;
  width: 158px;
  height: 158px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.tk-knob:active { cursor: grabbing; }

.tk-knob svg { width: 100%; height: 100%; transform: rotate(135deg); }

.tk-arco-pista, .tk-arco-valor {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 245 326.7;
}

.tk-arco-pista { stroke: var(--line); }
.tk-arco-valor { stroke: url(#tkgrad); transition: stroke-dashoffset 0.05s linear; }

.tk-aguja {
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--panel-2), var(--bg) 72%);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(5, 6, 15, 0.6);
}

.tk-aguja::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 26px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(77, 227, 255, 0.7);
}

.tk-knob > b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: var(--muted);
  font-family: "Astra Etiquetas", system-ui, sans-serif;
  font-weight: 400;
}

.tk-extremos {
  display: flex;
  justify-content: space-between;
  width: 236px;
  max-width: 100%;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-family: "Astra Etiquetas", system-ui, sans-serif;
}

.tk-rango {
  width: 236px;
  max-width: 100%;
  accent-color: #4de3ff;
}

.tk-sube { margin-top: 8px; }

.tk-sube input { position: absolute; width: 0; height: 0; opacity: 0; }

.tk-sube span {
  display: inline-block;
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.8rem;
  color: var(--violeta-claro);
  cursor: pointer;
}

.tk-sube span:hover { color: var(--cyan); border-color: var(--cyan); }
.tk-sube input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }

.tk-nota {
  font-size: 0.75rem;
  color: var(--muted);
  max-width: 40ch;
  margin: 0;
}

/* ---------- Titular del hero: CREATED ATTACHED (ELEGIDA por Pablo, 26-ago) ----------
   Redonda espacial con espirales de galaxia en las O (177studio). Trae los
   acentos de fabrica. Corre ancha: cuerpo contenido. Unicase: sin transform. */
.hero h1 {
  font-family: "Audiowide", "Arial Black", system-ui, sans-serif;
  font-weight: 400;
  /* Audiowide tiene caja alta y baja de verdad; el render aprobado va en versales */
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.24;
  font-size: clamp(1.35rem, 3.9vw, 2.35rem);
  max-width: 21ch;
}

.hero h1 .degradado { padding-right: 0.08em; margin-right: -0.08em; }

/* Aviso pequeno de instalacion (macOS sin notarizar). Discreto a proposito:
   informa sin robar protagonismo ni asustar antes de tiempo. */
.nota-instalacion {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
  border-left: 2px solid var(--line);
  padding-left: 12px;
  margin: 14px 0 0;
  max-width: 58ch;
}

.nota-instalacion a { color: var(--violeta-claro); }
.correo .nota-instalacion,
.cta-final .nota-instalacion { margin-inline: auto; text-align: left; }

/* ---------- Entrega del A-2A en la pagina de gracias (6-sept-2026) ----------
   Hasta hoy la pagina prometia un correo que no mandaba nadie: los secretos de
   Mailchimp no estan puestos. Ahora el instalador se sirve desde la propia web
   (/descargas/), que es gratis en Pages y no depende de nadie. El 14-sept estos
   botones se caen solos con cambiar_a_precio.py. */
.descarga-a2a {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 18px 0 10px;
}
.cta-final .letra-pequena { margin-bottom: 14px; }
.volver {
  display: inline-block;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: underline;
}
.volver:hover { color: var(--text); }

/* ===================================================================
   LANZAMIENTO EN PORTADA — 15-sep-2026, A-Vocal FX
   Regla de la casa (direccion-visual.md): la portada es el escaparate
   del producto vivo y va con mas artilleria que su propia landing.
   Cuando salga el siguiente producto, hereda estas clases y el
   anterior se repliega a su ficha.
   El laton (#f0b267) marca UNA sola cosa: donde estas en la cadena.
   =================================================================== */

.hero-badge.es-lanzamiento{
  background:linear-gradient(90deg,rgba(240,178,103,.18),rgba(167,139,250,.14));
  border:1px solid rgba(240,178,103,.38);color:#f0b267}
.hero-badge.es-lanzamiento b{color:#f0b267}

/* La novedad, en la barra de arriba */
.nav-nuevo{position:relative;color:#f0b267 !important;display:inline-flex;align-items:center;gap:.4rem}
.et-nuevo{font-family:"Astra Etiquetas",system-ui,sans-serif;font-size:.6rem;letter-spacing:.11em;
  text-transform:uppercase;background:#f0b267;color:#120a22;border-radius:999px;padding:.12rem .38rem;
  line-height:1;transform:translateY(-1px)}

/* ---- LA CADENA ---- */
.cadena{margin:1.6rem 0 .5rem}
.cadena-mando{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1.2rem}
.cadena-estado{font-size:.85rem;color:#9aa2bd}
.cadena-ruta{position:relative;display:flex;gap:.5rem;justify-content:space-between;
  padding:1.6rem 0 .3rem;overflow-x:auto}
.cadena-linea{position:absolute;left:0;right:0;top:1.72rem;height:2px;
  background:linear-gradient(90deg,rgba(77,227,255,.22),rgba(167,139,250,.5));pointer-events:none}
.cadena-parada{flex:1 1 0;min-width:8.5rem;background:none;border:0;padding:0;cursor:pointer;
  text-align:left;color:#9aa2bd;font:inherit;position:relative}
.cadena-punto{display:block;width:13px;height:13px;border-radius:50%;margin-bottom:.8rem;
  background:#10142a;border:2px solid rgba(167,139,250,.55);transition:all .18s ease}
.cadena-et{display:block;font-family:"Astra Etiquetas",system-ui,sans-serif;letter-spacing:.06em;
  font-size:.88rem;color:#e6e8f2;transition:color .18s ease}
.cadena-sub{display:block;font-size:.76rem;line-height:1.45;margin-top:.18rem;color:#6f7899}
.cadena-parada:hover .cadena-punto{border-color:#4de3ff}
.cadena-parada.es-actual .cadena-punto{background:#f0b267;border-color:#f0b267;
  box-shadow:0 0 0 5px rgba(240,178,103,.16)}
.cadena-parada.es-actual .cadena-et{color:#f0b267}
.cadena-parada:focus-visible{outline:2px solid #4de3ff;outline-offset:4px;border-radius:.3rem}
.cadena-pie{font-size:.83rem;color:#9aa2bd;margin:.2rem 0 1.4rem;max-width:56ch}

/* En portada pesa mas: la ruta va sobre placa, los puntos son mayores
   y el que suena late. Es la diferencia con la version de la ficha. */
.cadena-hero{background:linear-gradient(180deg,rgba(30,16,54,.55),rgba(18,10,34,.25));
  border:1px solid rgba(109,77,168,.32);border-radius:.8rem;padding:1.3rem 1.4rem .9rem;
  margin:1.8rem 0 .6rem}
.cadena-hero .cadena-punto{width:16px;height:16px}
.cadena-hero .cadena-linea{top:1.85rem}
.cadena-hero .cadena-et{font-size:.95rem}
.cadena-hero.esta-sonando .cadena-parada.es-actual .cadena-punto{animation:cadenaLate 1.9s ease-in-out infinite}
@keyframes cadenaLate{0%,100%{box-shadow:0 0 0 5px rgba(240,178,103,.16)}
  50%{box-shadow:0 0 0 11px rgba(240,178,103,.04)}}

@media (prefers-reduced-motion:reduce){
  .cadena-hero.esta-sonando .cadena-parada.es-actual .cadena-punto{animation:none}
  .cadena-punto,.cadena-et{transition:none}
}
@media (max-width:640px){
  .cadena-ruta{gap:1.1rem}
  .cadena-parada{min-width:10rem}
  .cadena-hero{padding:1rem 1rem .7rem}
}

/* La tarjeta del producto en novedad, dentro del catalogo */
.producto.es-novedad{border-color:rgba(240,178,103,.32)}
.producto.es-novedad .producto-etiqueta{color:#f0b267}
.producto.es-novedad .et-nuevo{margin-left:.35rem}

/* ===================================================================
   EL DESPERTAR DE ASTRINI — sello creativo del A-Vocal FX (15-sep)
   Los 10 fotogramas salen del propio astrini.mp4 del plugin, en sus
   anclas exactas. Lo que se ve aqui es lo que se vera en el DAW.
   =================================================================== */
.despertar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:1.8rem 2.2rem;
  align-items:start;margin:1.6rem 0 .6rem}
.desp-escena{position:relative;grid-row:span 3;border-radius:1rem;overflow:hidden;
  background:#0a0616;border:1px solid rgba(109,77,168,.3);aspect-ratio:440/787}
.desp-astrini{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease}
.desp-astrini.es-visible{opacity:1}
/* El aura crece con el nivel: es el mismo gesto que hace el plugin. */
.despertar.es-maximo .desp-escena{box-shadow:0 0 44px rgba(167,139,250,.34);
  border-color:rgba(167,139,250,.55)}

.desp-medidor{position:absolute;left:50%;bottom:.85rem;transform:translateX(-50%);
  display:flex;gap:5px}
.desp-medidor i{width:14px;height:3px;border-radius:2px;background:rgba(230,232,242,.16);
  transition:background .25s ease}
.desp-medidor i.on{background:#c4a0ff;box-shadow:0 0 7px rgba(196,160,255,.85)}

.desp-nivel{font-family:"Astra Etiquetas",system-ui,sans-serif;letter-spacing:.05em;
  font-size:.82rem;color:#9aa2bd;margin:0}
.desp-mando{margin:0}

.desp-racks{display:grid;gap:.42rem;margin:0}
.desp-rack{display:flex;align-items:flex-start;gap:.7rem;text-align:left;width:100%;
  background:rgba(16,20,42,.5);border:1px solid rgba(109,77,168,.24);border-radius:.55rem;
  padding:.6rem .8rem;cursor:pointer;color:inherit;font:inherit;transition:all .18s ease}
.desp-rack:hover{border-color:rgba(77,227,255,.45)}
.desp-led{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:.32rem;
  background:#1b1436;border:1px solid rgba(167,139,250,.5);transition:all .18s ease}
.desp-txt b{display:block;font-family:"Astra Etiquetas",system-ui,sans-serif;letter-spacing:.07em;
  font-size:.8rem;color:#e6e8f2}
.desp-txt span{display:block;font-size:.78rem;line-height:1.45;color:#8d96b5;margin-top:.1rem}
.desp-rack.es-on{background:rgba(124,90,240,.13);border-color:rgba(167,139,250,.55)}
.desp-rack.es-on .desp-led{background:#c4a0ff;box-shadow:0 0 9px rgba(196,160,255,.9);
  border-color:#c4a0ff}
.desp-rack.es-on .desp-txt b{color:#c4a0ff}
.desp-rack:focus-visible{outline:2px solid #4de3ff;outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .desp-astrini,.desp-led,.desp-medidor i,.desp-rack{transition:none}
}
@media (max-width:820px){
  .despertar{grid-template-columns:1fr}
  .desp-escena{grid-row:auto;max-width:330px;margin:0 auto}
}

/* En portada el despertar va a lo ancho y con la escena mayor: es el
   escaparate del lanzamiento, y tiene que pesar mas que la ficha. */
.desp-intro{font-size:.9rem;color:#9aa2bd;max-width:60ch;margin:1.6rem 0 0}
.despertar-hero{margin-top:.9rem}
.despertar-hero .desp-escena{border-color:rgba(167,139,250,.4)}
.despertar-hero .desp-txt b{font-size:.84rem}

/* ASTRINI EN EL HERO (15-sep) — el anuncio del producto vivo.
   Tres intentos hasta dar con esto, y el porque importa para no repetirlos:
     1º una tarjeta de 300 px con marco: un 9:16 de manual.
     2º el video enmascarado con elipses: el fotograma trae nebulosa de borde
        a borde, asi que los cantos seguian viendose y el conjunto quedaba
        translucido y barato.
     3º una copia del video ampliada de fondo: el origen son 500x894, y a x2,9
        para llenar un hero de 1440 se ve blando. Se nota.
   Lo que funciona: el sujeto RECORTADO con canal alfa (el recorte se hizo con
   el Vision de macOS, en local), flotando sobre el cielo de la propia web, y
   la expansion del efecto hecha con luz CSS. La luz es vectorial: se estira a
   la pantalla que sea sin perder un pixel, que es justo lo que el video no
   podia hacer.
   Encuadre de busto (decision de Pablo, 15-sep): el fotograma original ya
   corta las alas por los lados, asi que se recorta por encima de ellas y la
   barbilla se funde con la luz. Provisional hasta el re-render de Izan.
   El texto no se tapa nunca: todos los hijos del hero son position:relative,
   pintan en el mismo nivel y manda el orden del DOM — la escena va primera. */
.hero{position:relative}
.hero > *{position:relative}
/* El hero que lleva a Astrini respira menos por arriba: la escena ya es aire. */
.hero.hero-astrini{padding-block:.5rem 3rem}

.astrini-escena{position:relative;display:grid;place-items:center;
  /* Con el busto ya no sobra aire abajo: el margen negativo que valia para
     el cuerpo entero clavaba la etiqueta «Nuevo» en el hocico. */
  margin:0 auto -.3rem;pointer-events:none}
.astrini-escena > *{grid-area:1/1}

/* La luz. Va en absoluto, NO como celda de la rejilla: si es celda, la
   rejilla se dimensiona a sus 100vw y el documento entero se ensancha (paso:
   1620 px de documento en una ventana de 1440). Y 100vw como techo, ni un
   pixel mas, por lo mismo — un aura a 132vw dejaba 510 px de documento en un
   movil de 375 y el canvas de estrellas se dibujaba un 36 % mas grande.
   El latido usa la propiedad `scale`, no `transform`, para no pisar el
   translate que centra la capa. */
.astrini-luz{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:100vw;height:230%;pointer-events:none;
  background:
    radial-gradient(38% 42% at 50% 44%, rgba(167,139,250,.40), transparent 70%),
    radial-gradient(64% 38% at 50% 50%, rgba(124,58,237,.24), transparent 74%),
    radial-gradient(92% 30% at 50% 46%, rgba(56,189,248,.09), transparent 80%);
  animation:astriniLatido 9s ease-in-out infinite}
@keyframes astriniLatido{
  0%,100%{opacity:.82;scale:1}
  50%    {opacity:1;  scale:1.07}
}

/* La figura. Sin mascara, sin borde y sin fondo: el alfa ya hace el trabajo. */
.astrini-figura{display:block;width:clamp(280px,32vw,420px);height:auto;
  filter:drop-shadow(0 0 34px rgba(167,139,250,.34))}
/* TRAMPA DE ESPECIFICIDAD (15-sep): `display:block` de una clase le gana al
   `[hidden]{display:none}` de la hoja del navegador, asi que poner
   imagen.hidden = true NO la escondia: la imagen fija se quedaba pintando
   debajo del video y se veian los dos a la vez. Como los dos tienen alfa, por
   los huecos del video asomaba el fotograma maximo congelado — parecia que la
   animacion se superponia consigo misma y que al llegar arriba se paraba.
   Hace falta una regla propia, y con la misma especificidad o mas. */
.astrini-figura[hidden]{display:none}

.astrini-pie{max-width:52ch;margin:.9rem auto 0;font-size:.82rem;color:#8d96b5;line-height:1.55}

@media (max-width:640px){
  .astrini-escena{margin:0 auto -.3rem}
  .astrini-figura{width:clamp(236px,74vw,300px)}
  .astrini-luz{height:200%}
}
@media (prefers-reduced-motion:reduce){
  .astrini-luz{animation:none;opacity:.9}
}

/* BANCO DE EJEMPLOS (15-sep) — los modulos y los modos, uno a uno.
   Hermano visual de .cadena pero en rejilla: la cadena es un RECORRIDO en
   orden (por eso es una linea con paradas) y esto es un MUESTRARIO donde no
   hay orden, asi que se dibuja como botones sueltos. Se reutiliza la misma
   paleta y la misma tipografia de etiquetas para que no parezcan dos webs. */
.banco{margin:1.2rem 0 .4rem}
.banco-play{margin-bottom:1rem}
.banco-play.esta-sonando{background:none;border:1px solid rgba(167,139,250,.55);color:#cfd4e8}
.banco-fila{display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr))}
.banco-boton{background:rgba(13,17,38,.55);border:1px solid rgba(167,139,250,.22);
  border-radius:.7rem;padding:.7rem .8rem;cursor:pointer;text-align:left;font:inherit;
  color:#9aa2bd;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.banco-boton:hover{border-color:rgba(77,227,255,.6);transform:translateY(-1px)}
.banco-boton:focus-visible{outline:2px solid #4de3ff;outline-offset:3px}
.banco-et{display:block;font-family:"Astra Etiquetas",system-ui,sans-serif;letter-spacing:.06em;
  font-size:.86rem;color:#e6e8f2;transition:color .18s ease}
.banco-sub{display:block;font-size:.74rem;line-height:1.45;margin-top:.22rem;color:#6f7899}
.banco-boton.es-actual{background:rgba(240,178,103,.09);border-color:#f0b267}
.banco-boton.es-actual .banco-et{color:#f0b267}
.banco-estado{font-size:.8rem;color:#9aa2bd;margin:.7rem 0 0;min-height:1.1em}
.banco.esta-cargando .banco-fila{opacity:.72}
.banco-pie{font-size:.83rem;color:#9aa2bd;margin:.9rem 0 1.8rem;max-width:62ch;line-height:1.6}
.banco-pie b{color:#cfd4e8;font-weight:600}
.vfx-q h3{margin:2.2rem 0 .3rem;font-size:1.05rem}
@media (prefers-reduced-motion:reduce){ .banco-boton{transition:none} .banco-boton:hover{transform:none} }

/* Tablas del apartado de mediciones (15-sep). Cifras a la derecha y en
   tabulares para que las comas decimales queden en columna: una tabla de
   medidas con los numeros bailando no se lee, se adivina. */
.tabla-medidas{margin:.9rem 0 1.6rem;overflow-x:auto}
.tabla-medidas table{border-collapse:collapse;width:100%;max-width:34rem;font-size:.88rem}
.tabla-medidas th{text-align:left;font-family:"Astra Etiquetas",system-ui,sans-serif;
  letter-spacing:.06em;font-size:.76rem;color:#9aa2bd;font-weight:500;
  padding:.5rem .7rem;border-bottom:1px solid rgba(167,139,250,.28)}
.tabla-medidas th:last-child,.tabla-medidas td:last-child{text-align:right}
.tabla-medidas td{padding:.45rem .7rem;border-bottom:1px solid rgba(167,139,250,.1);color:#c7cde3;
  font-variant-numeric:tabular-nums}
.tabla-medidas tr:last-child td{border-bottom:0}
.pie-medidas code{font-size:.85em;color:#cfd4e8;background:rgba(13,17,38,.7);
  padding:.1em .38em;border-radius:.3rem}

/* ===================================================================
   BARRA DE NAVEGACION EN UNA SOLA LINEA (21-sep-2026)
   Con los tres compresores dentro son diez enlaces en un contenedor de
   1080 px, y se partia: "A-3A" salia como "A-" / "3A" y "Try it" en dos
   lineas. Un nombre de producto partido se lee como otro producto, asi
   que lo primero es no partir nunca; lo segundo, encoger hueco y cuerpo
   en vez de quitar enlaces.
   =================================================================== */
@media (min-width: 760px) {
  .cabecera-inner { gap: .9rem; }
  .cabecera-inner .logo,
  .cabecera-inner .btn-mini { flex: 0 0 auto; white-space: nowrap; }

  .cabecera-inner .nav-secciones {
    flex-wrap: nowrap;
    gap: .78rem;
    min-width: 0;          /* sin esto un hijo flex no baja de su ancho minimo */
  }
  .cabecera-inner .nav-secciones a {
    white-space: nowrap;
    font-size: .82rem;
  }
  .cabecera-inner .et-nuevo { font-size: .55rem; padding: .1rem .32rem; }
}

/* Franja intermedia: el contenedor ya no crece (tope 1080) pero la ventana
   si es mas estrecha, asi que aqui se aprieta un punto mas. */
@media (min-width: 760px) and (max-width: 1099px) {
  .cabecera-inner { gap: .7rem; }
  .cabecera-inner .logo { font-size: .92rem; }
  .cabecera-inner .nav-secciones { gap: .55rem; }
  .cabecera-inner .nav-secciones a { font-size: .74rem; }
  .cabecera-inner .btn-mini { padding: .5rem .8rem; font-size: .8rem; }
}

/*  Por debajo de ~830 px los diez enlaces ya no caben ni apretados: medido en
    768, la barra seguia en una linea pero EMPUJABA el ancho del documento y
    aparecia scroll horizontal en toda la pagina. Aqui la barra se desliza
    dentro de si misma: sigue siendo una sola linea, no se pierde ningun
    enlace y la pagina no se ensancha. La barra de desplazamiento se oculta
    porque en la cabecera es ruido.  */
@media (min-width: 760px) and (max-width: 1023px) {
  .cabecera-inner .nav-secciones {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .cabecera-inner .nav-secciones::-webkit-scrollbar { display: none; }
}