/* ==========================================================================
   VALVEX - la web.

   Los colores NO se eligieron aqui: son los del propio programa, sacados de
   Source/ui/Theme.h de la edicion Valvex. El naranja es el filamento de una
   valvula, y por eso aqui nunca es un relleno plano: siempre es luz.

   Una hoja para todas las paginas. Lo que es de una sola pagina va al final,
   con el nombre de la pagina en el titulo de la seccion.
   ========================================================================== */

:root {
  color-scheme: dark;

  --void:        #08080A;
  --panel:       #141416;
  --raised:      #1C1C1F;
  --inset:       #101012;
  --line:        #2E2E33;
  --line-lit:    #46464D;

  --text:        #ECECF0;
  --text-2:      #B5B5BC;
  --text-3:      #8A8A92;
  --text-4:      #6A6A72;

  --silver:      #C2C6CC;
  --silver-dim:  #7E838A;
  --silver-hi:   #E7EAEF;

  --filament:    #F48329;
  --filament-hi: #FFBE84;
  --ember:       #C0641C;
  --ember-deep:  #5A1E08;

  --live-green:  #3DDC84;

  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --plate:   "Michroma", "Eurostile", "Arial", sans-serif;
  --body:    "Archivo", "Segoe UI", system-ui, sans-serif;

  --ancho: 1240px;
  --radio: 10px;
  --cabecera: 68px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera) + 16px); }

body {
  margin: 0;
  background: var(--void);
  color: var(--text-2);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-inline: 20px;
  /* clip y no hidden: hidden convierte el body en contenedor de scroll y
     entonces la cabecera deja de pegarse arriba en algunos navegadores. */
  overflow-x: clip;
}

a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

/* Lo que sitio.js esconde - la oferta de lanzamiento cuando acaba - se
   esconde aunque su clase le ponga display: un hidden que no esconde es una
   oferta caducada a la vista. */
[hidden] { display: none !important; }
::selection { background: var(--filament); color: #120800; }

:focus-visible {
  outline: 2px solid var(--filament-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; }

/* Para quien navega con teclado: saltar el menu */
.saltar {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--filament);
  color: #1A0B00;
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: 12px; }

/* En la pagina de pedales, la barra de filtros tambien esta pegada arriba:
   un enlace a un pedal no puede dejarlo debajo de ella. */
html:has(.filtros:not([hidden])) { scroll-padding-top: calc(var(--cabecera) + 84px); }

/* La serigrafia del frontal: etiquetas anchas y espaciadas */
.placa {
  font-family: var(--plate);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin: 0;
}

/* Los titulares: el mismo lenguaje que el del hero. Blanco calido solido - el
   plateado en degradado parecia plastico - y la parte encendida en ambar.

   Se llama .metal por la placa del cabezal, que es de donde venia. */
.metal {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0.005em;
  color: #F2F0EC;
  text-wrap: balance;
  margin: 0;
  /* Aire para las tildes de la primera linea: con este interlineado tan justo
     quedan por encima de la caja, y cuando el titular llevaba degradado no se
     pintaban ("DINAMICA", "BAJALO"). */
  padding-top: 0.16em;
}

/* La parte encendida: ambar de filamento, en degradado como el cristal de una
   valvula, y sin halo. El neon en cada titular era lo que mas abarataba la
   pagina. En un elemento en linea el fondo cubre la caja de la letra entera,
   tildes incluidas, asi que aqui el degradado no se las come. */
.brilla {
  color: var(--filament);
  background: linear-gradient(180deg, #FFD7AE 0%, #F9A04C 42%, #E06D1C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.boton {
  --b-alto: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--b-alto);
  padding-inline: 30px;
  border-radius: 999px;
  font-family: var(--plate);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.2s ease;
}

.boton-luz {
  color: #1A0B00;
  background: linear-gradient(180deg, #FFA45A 0%, #F48329 55%, #E2701C 100%);
  box-shadow:
    0 1px 0 rgba(255, 235, 215, 0.55) inset,
    0 -1px 0 rgba(120, 50, 10, 0.35) inset,
    0 10px 28px -12px rgba(244, 131, 41, 0.75);
}

.boton-luz:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #FFB06A 0%, #F78D35 55%, #E77722 100%);
  box-shadow:
    0 1px 0 rgba(255, 235, 215, 0.6) inset,
    0 -1px 0 rgba(120, 50, 10, 0.35) inset,
    0 14px 34px -12px rgba(244, 131, 41, 0.85);
}

/* El secundario: un contorno, nada mas. */
.boton-sutil {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}

.boton-sutil:hover { color: #fff; background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.32) inset; }

.boton-metal {
  color: var(--silver-hi);
  background: linear-gradient(180deg, #232327, #161618);
  box-shadow: 0 0 0 1px var(--line-lit) inset, 0 8px 22px -12px #000;
}

.boton-metal:hover { color: #fff; box-shadow: 0 0 0 1px var(--silver-dim) inset, 0 10px 26px -12px #000; }

.boton svg { width: 18px; height: 18px; flex: none; }

.acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.acciones.centro { justify-content: center; }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--plate);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--filament-hi);
}
.enlace-flecha::after { content: "\2192"; font-family: var(--body); font-size: 16px; letter-spacing: 0; transition: transform 0.2s; }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* ==========================================================================
   CABECERA Y MENU
   ========================================================================== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  margin-inline: -20px;
  padding-inline: 20px;
  background: linear-gradient(180deg, rgba(8, 8, 10, 0.95), rgba(8, 8, 10, 0.82));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(46, 46, 51, 0.7);
}

.cabecera > .envoltura { display: flex; align-items: center; gap: 28px; min-height: var(--cabecera); }

.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.marca img { width: 30px; height: 30px; border-radius: 7px; }
.marca span { font-family: var(--plate); font-size: 14px; letter-spacing: 0.32em; color: var(--silver-hi); }

.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a {
  position: relative;
  font-family: var(--plate);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-3);
  padding-block: 8px;
  white-space: nowrap;
  transition: color 0.2s;
}
.menu a:hover { color: var(--silver-hi); }
/* Con "Por que Valvex" el menu tiene siete entradas: en las pantallas de
   escritorio estrechas se aprietan un poco en vez de partirse en dos lineas. */
@media (max-width: 1320px) and (min-width: 1081px) {
  .cabecera > .envoltura { gap: 20px; }
  .menu { gap: 18px; }
  .menu a { letter-spacing: 0.14em; }
}
@media (max-width: 1240px) and (min-width: 1081px) {
  .cabecera > .envoltura { gap: 14px; }
  .menu { gap: 13px; }
  .menu a { letter-spacing: 0.08em; }
  .cabecera .boton { padding-inline: 14px; letter-spacing: 0.1em; }
}
@media (max-width: 1140px) and (min-width: 1081px) { .menu { gap: 10px; } }
.menu a[aria-current="page"] { color: var(--filament-hi); }
.menu a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--filament);
  box-shadow: 0 0 10px var(--filament);
}

.cabecera .boton { --b-alto: 42px; padding-inline: 20px; font-size: 11px; }

.menu-boton {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 0;
  border-radius: 10px;
  background: var(--raised);
  box-shadow: 0 0 0 1px var(--line-lit) inset;
  color: var(--silver-hi);
  cursor: pointer;
}
.menu-boton svg { width: 22px; height: 22px; margin: auto; }

/* La oferta de lanzamiento, arriba de todo y en todas las paginas. Es lo
   primero que lee quien llega, y dice tres cosas: precio, precio de antes y
   hasta cuando. Se va sola cuando acaba (sitio.js). */
.lanzamiento {
  position: relative;
  z-index: 51;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-inline: -20px;
  padding: 9px 20px;
  background: linear-gradient(90deg, #22130A 0%, #3A1E09 50%, #22130A 100%);
  border-bottom: 1px solid rgba(244, 131, 41, 0.32);
  font-size: 14px;
  line-height: 1.4;
  color: #EBD3BE;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s;
}
.lanzamiento:hover { background: linear-gradient(90deg, #2A170B 0%, #46250B 50%, #2A170B 100%); }
.lanzamiento b { color: var(--filament-hi); font-weight: 600; }
.lanzamiento-punto { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--filament); box-shadow: 0 0 0 3px rgba(244, 131, 41, 0.25); animation: lanzamiento-late 2.4s ease-in-out infinite; }
.lanzamiento-ir { flex: none; font-family: var(--plate); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--filament-hi); }
.lanzamiento-ir::after { content: " \2192"; font-family: var(--body); letter-spacing: 0; }
.lanzamiento:hover .lanzamiento-ir { color: #fff; }
.lanzamiento-corto { display: none; }
@keyframes lanzamiento-late { 50% { box-shadow: 0 0 0 6px rgba(244, 131, 41, 0); } }

/* El selector de idioma: un <details>, que se abre y se cierra sin
   JavaScript. sitio.js solo lo cierra al pulsar fuera o con Escape. */
.idioma { position: relative; flex: none; margin-right: -10px; }
.idioma summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 9px 0 10px;
  border-radius: 9px;
  list-style: none;
  font-family: var(--plate);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--text-3);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
.idioma summary::-webkit-details-marker { display: none; }
.idioma summary:hover, .idioma[open] summary { color: var(--silver-hi); background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 0 1px var(--line) inset; }
.idioma summary:focus-visible { outline: 2px solid var(--filament); outline-offset: 2px; }
.idioma-globo { width: 17px; height: 17px; }
.idioma-flecha { width: 13px; height: 13px; margin-left: -2px; opacity: 0.7; transition: transform 0.2s; }
.idioma[open] .idioma-flecha { transform: rotate(180deg); }
.idioma-lista {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 196px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 12px;
  background: rgba(22, 22, 25, 0.98);
  box-shadow: 0 0 0 1px var(--line-lit) inset, 0 24px 48px -16px rgba(0, 0, 0, 0.85);
  animation: idioma-abre 0.16s ease-out both;
}
.idioma-lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--text-2);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.idioma-lista a:hover { background: rgba(255, 255, 255, 0.05); color: var(--silver-hi); }
.idioma-lista a[aria-current] { color: var(--filament-hi); }
.idioma-lista small { font-family: var(--plate); font-size: 9.5px; letter-spacing: 0.16em; color: var(--text-4); }
.idioma-lista a[aria-current] small { color: var(--filament); }
@keyframes idioma-abre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   SECCIONES COMUNES
   ========================================================================== */
.seccion { padding-block: clamp(72px, 10vw, 128px); }
.seccion.pegada { padding-top: 0; }

.titulo { max-width: 820px; }
.titulo h2 { font-size: clamp(44px, 6.8vw, 96px); margin-top: 14px; }
.titulo p { margin: 22px 0 0; max-width: 640px; font-size: 18.5px; text-wrap: pretty; }
.titulo.centro { margin-inline: auto; text-align: center; }
.titulo.centro p { margin-inline: auto; }

.franja {
  margin-inline: -20px;
  padding-inline: 20px;
  border-block: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(192, 100, 28, 0.10), transparent 70%),
    linear-gradient(180deg, var(--void), #0C0C0E 30%, var(--void));
}

/* La foto de la pantalla del programa, en su marco */
.pantalla {
  position: relative;
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line), 0 40px 80px -30px #000, 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.pantalla img { width: 100%; }

/* La cabecera de las paginas interiores */
.cabeza-pagina {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px) clamp(32px, 5vw, 56px);
}
.cabeza-pagina::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(1100px, 120%, 100vw);
  height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 30%, rgba(244, 131, 41, 0.12), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.cabeza-pagina h1 { font-size: clamp(52px, 8vw, 116px); margin-top: 14px; }
.cabeza-pagina .bajada { margin: 22px 0 0; max-width: 700px; font-size: clamp(17px, 2vw, 20px); text-wrap: pretty; }

/* Dos columnas: texto y foto */
.lado { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.lado.al-reves { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.lado.al-reves > :first-child { order: 2; }
.lado-texto { display: grid; gap: 16px; }
.lado-texto h2, .lado-texto h3 { font-size: clamp(36px, 4.8vw, 60px); }
.lado-texto p { margin: 0; text-wrap: pretty; }

/* Listas con un punto de luz */
.puntos { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.puntos li { position: relative; padding-left: 24px; }
.puntos li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--filament);
  box-shadow: 0 0 8px var(--filament);
}
.puntos b { color: var(--text); font-weight: 600; }
.puntos.grandes { gap: 16px; font-size: 17px; line-height: 1.5; }

/* ==========================================================================
   TARJETAS
   ========================================================================== */
.rejilla { display: grid; gap: 18px; margin-top: clamp(40px, 5vw, 64px); }
.rejilla.dos    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.tres   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tarjeta {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 28px 26px 30px;
  border-radius: var(--radio);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
    linear-gradient(180deg, #19191C, #121214);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -34px #000;
}
.tarjeta h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--silver-hi);
  letter-spacing: 0.01em;
}
.tarjeta p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.tarjeta .icono {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 10px;
  background: var(--inset);
  box-shadow: 0 0 0 1px var(--line) inset;
  color: var(--filament);
}

/* Una tarjeta que lleva a otra pagina */
a.tarjeta { text-decoration: none; transition: box-shadow 0.3s, transform 0.3s; }
a.tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(244, 131, 41, 0.5), 0 30px 70px -30px #000, 0 0 60px -24px rgba(244, 131, 41, 0.45);
}
a.tarjeta .enlace-flecha { margin-top: 6px; }

/* ==========================================================================
   INICIO
   ========================================================================== */
/* ==========================================================================
   HERO (inicio)

   Una foto de producto, no una captura con un resplandor encima. El cabezal es
   la foto del programa, y la escena esta hecha para que se funda con ella: el
   fondo tiene el mismo negro calido que rodea al cabezal en la foto, con la luz
   de las valvulas cayendo al suelo, y la foto se deshace en el con mascaras
   lineales en los cuatro bordes - no con un ovalo, que es lo que la hacia
   parecer recortada con tijera.

   El orden manda: el titular y una sola fila de texto con los botones, y el
   cabezal entero casi en la primera pantalla. Los numeros van debajo, en una
   franja apoyada en el suelo del cabezal. Con todo encima, el cabezal - que es
   lo que vende - se quedaba debajo del pliegue.

   El titular va en blanco solido. El brillo de neon en cada palabra era lo que
   mas abarataba la pagina vieja.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  margin-inline: -20px;
  padding: clamp(32px, 4.2vw, 64px) 20px clamp(44px, 5vw, 72px);
  overflow: hidden;
  background:
    radial-gradient(58% 40% at 50% 74%, rgba(255, 136, 46, 0.12), transparent 72%),
    radial-gradient(100% 56% at 50% 96%, #17140F 0%, rgba(23, 20, 15, 0) 64%),
    radial-gradient(60% 50% at 12% -6%, rgba(255, 255, 255, 0.045), transparent 70%),
    linear-gradient(180deg, #0B0B0B 0%, #0A0A09 52%, #0C0B0A 100%);
}

/* Grano: lo justo para que el negro no parezca un relleno plano de pantalla. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
}

.hero-arriba { position: relative; z-index: 2; }

.hero-aviso {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--text-2);
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
}
.hero-aviso:hover { background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 1px rgba(244, 131, 41, 0.5) inset; }
.hero-aviso-punto { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--filament); box-shadow: 0 0 0 3px rgba(244, 131, 41, 0.2); }
.hero-aviso svg { width: 15px; height: 15px; flex: none; color: var(--filament-hi); transition: transform 0.2s; }
.hero-aviso:hover svg { transform: translateX(3px); }

.hero-titulo {
  margin: 22px 0 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(46px, 6.4vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.003em;
  text-transform: uppercase;
  color: #F5F3EF;
}
.hero-linea { display: block; }
.hero-acento {
  /* Ambar de filamento, en degradado como el cristal de una valvula
     encendida - y sin halo. */
  color: #F48329;
  background: linear-gradient(180deg, #FFD7AE 0%, #F9A04C 42%, #E06D1C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* El degradado solo pinta dentro de la caja de la linea, y las tildes de
     las mayusculas (LLEVATE con E acentuada) asoman por encima: sin este
     relleno se cortaban. El margen negativo deja la linea donde estaba. */
  padding-top: 0.12em;
  margin-top: -0.12em;
}

.hero-texto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 40px;
  margin-top: clamp(22px, 2.4vw, 32px);
}
.hero-bajada { margin: 0; max-width: 560px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: #BAB6B0; text-wrap: pretty; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-ampli {
  position: relative;
  z-index: 1;
  width: min(1480px, 100%);
  margin: clamp(4px, 1vw, 14px) auto 0;
}
.hero-ampli::before {
  /* La luz de las valvulas sobre la escena, por detras de la foto. */
  content: "";
  position: absolute;
  inset: 18% 22% 30%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 140, 50, 0.22), transparent 72%);
  filter: blur(40px);
}
.hero-ampli img {
  width: 100%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 6.5%, #000 93.5%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 7%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 6.5%, #000 93.5%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 7%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

/* Los numeros: una franja de cristal ahumado apoyada en el suelo. */
.hero-datos {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(-40px, -2.6vw, -12px) 0 0;
  padding: 0;
  list-style: none;
  border-radius: 14px;
  background: rgba(14, 13, 12, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 30px 60px -30px #000;
}
.hero-datos li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;
  padding: 20px 24px;
}
.hero-datos li + li { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.08); }
.hero-datos b {
  grid-row: 1 / 3;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 46px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 46px;
  line-height: 0.9;
  color: #F5F3EF;
  font-variant-numeric: tabular-nums;
}
.hero-datos b i { margin-top: 6px; font-style: normal; font-family: var(--plate); font-size: 9px; letter-spacing: 0.14em; color: var(--filament-hi); }
.hero-datos span { align-self: end; font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--text); }
.hero-datos small { align-self: start; font-size: 13px; line-height: 1.4; color: var(--text-3); }

/* Al cargar: el texto sube y el cabezal se enciende, una vez y sin rebotes. */
.hero-arriba > *, .hero-texto > * { animation: hero-sube 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-arriba > :nth-child(2) { animation-delay: 0.06s; }
.hero-texto > :nth-child(1) { animation-delay: 0.12s; }
.hero-texto > :nth-child(2) { animation-delay: 0.18s; }
.hero-ampli { animation: hero-enciende 1.6s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-datos { animation: hero-sube 0.9s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

@keyframes hero-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hero-enciende { from { opacity: 0; transform: translateY(24px) scale(0.985); filter: brightness(0.6); } to { opacity: 1; transform: none; filter: none; } }

@media (max-width: 1080px) {
  .hero-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-datos li:nth-child(3) { box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08); }
  .hero-datos li:nth-child(4) { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.08), 0 -1px 0 rgba(255, 255, 255, 0.08); }
}

@media (max-width: 720px) {
  .hero-texto { flex-direction: column; align-items: stretch; }
  .hero-acciones .boton { flex: 1 1 100%; }
  .hero-ampli { width: 132%; margin: 6px -16% 0; }
  .hero-datos { margin-top: 0; }
  .hero-datos li { padding: 16px; column-gap: 12px; }
  .hero-datos b { font-size: 36px; min-width: 34px; }
  .hero-datos span { font-size: 14px; }
  .hero-datos small { font-size: 12px; }
}

/* El cabezal fuera del hero: el mismo trato, sin marco de captura. */
.foto-producto { position: relative; margin: 0; isolation: isolate; }
.foto-producto::after {
  /* El suelo: la foto lo trae un poco mas claro que el fondo de la pagina, y
     sin esto su borde se adivinaba como un rectangulo. */
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -8%;
  height: 46%;
  z-index: -1;
  background: radial-gradient(55% 62% at 50% 62%, rgba(26, 23, 19, 0.95), transparent 74%);
}
.foto-producto::before {
  content: "";
  position: absolute;
  inset: 16% 20% 28%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 140, 50, 0.2), transparent 72%);
  filter: blur(40px);
}
.foto-producto img {
  width: 100%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 7%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 7%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

/* La ficha de version y tamano: la usa la pagina de descargar. */
.ficha {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 22px 0 0;
  font-size: 13.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.ficha span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 9px; border-radius: 50%; background: var(--filament); vertical-align: middle; }

/* Lo que te llevas gratis: cuatro columnas en una franja */
.verdad {
  margin-inline: -20px;
  padding-inline: 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0D0C0A, var(--void));
}
.verdad .envoltura { display: grid; grid-template-columns: repeat(4, 1fr); }
.verdad div { padding: 28px 24px; border-left: 1px solid var(--line); }
.verdad div:first-child { border-left: 0; }
.verdad strong { display: block; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--silver-hi); letter-spacing: 0.01em; }
.verdad p { margin: 10px 0 0; font-size: 14.5px; color: var(--text-3); line-height: 1.5; }

/* La cadena: cuatro paradas de la senal, cada una a su pagina */
.recorrido { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(40px, 5vw, 64px); counter-reset: parada; }
.recorrido .tarjeta { counter-increment: parada; padding-top: 0; overflow: hidden; }
.recorrido .foto {
  margin: 0 -26px 6px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #0B0B0D;
}
.recorrido .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.recorrido a.tarjeta:hover .foto img { transform: scale(1.04); }
.recorrido .placa::before { content: counter(parada, decimal-leading-zero) "  "; color: var(--filament); }

/* Recetas de sonido */
.recetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(40px, 5vw, 64px); }
.receta { gap: 14px; }
.receta .estilo { font-family: var(--plate); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--filament-hi); }
.receta ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.receta ol li {
  font-family: var(--plate);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--inset);
  box-shadow: 0 0 0 1px var(--line) inset;
  color: var(--text-2);
}
.receta ol li + li::before { content: "\2192"; margin-right: 6px; color: var(--text-4); font-family: var(--body); letter-spacing: 0; }

/* La tira de pedales de la portada */
.vitrina {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 18px);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: end;
}
.vitrina a { display: block; transition: transform 0.3s ease, filter 0.3s; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.6)); }
.vitrina a:hover { transform: translateY(-10px); filter: drop-shadow(0 26px 22px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 24px rgba(244, 131, 41, 0.25)); }
.vitrina img { width: 100%; }

/* Un aviso con fondo: Live en la portada, las capturas */
.bloque {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 18px;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(244, 131, 41, 0.16), transparent 70%),
    linear-gradient(180deg, #17120C, #0E0B08);
  box-shadow: 0 0 0 1px rgba(244, 131, 41, 0.35), 0 50px 100px -50px #000;
}
.bloque h2 { font-size: clamp(40px, 5.6vw, 76px); margin-top: 12px; }
.bloque p { margin: 18px 0 0; font-size: 17.5px; text-wrap: pretty; }
.bloque .placa { color: var(--filament-hi); }

.cierre { text-align: center; padding-block: clamp(90px, 12vw, 150px); position: relative; }
.cierre::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 110%, 100vw);
  height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(244, 131, 41, 0.18), transparent 70%);
  filter: blur(30px);
  z-index: -1;
}
.cierre h2 { font-size: clamp(56px, 10vw, 140px); margin-top: 12px; }
.cierre p { margin: 18px auto 0; max-width: 560px; }
.cierre .acciones { justify-content: center; margin-top: 36px; }

/* ==========================================================================
   SONIDO
   ========================================================================== */
.amplis { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(40px, 5vw, 64px); }

.ampli {
  position: relative;
  padding: 30px 30px 32px;
  border-radius: var(--radio);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 40%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #1E1E21, #141416);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -34px #000;
}
.ampli header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ampli h3 { margin: 0; font-family: var(--plate); font-size: 18px; font-weight: 400; letter-spacing: 0.24em; color: var(--silver-hi); }
.ampli .piloto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--filament-hi), var(--filament) 55%, var(--ember));
  box-shadow: 0 0 12px var(--filament), 0 0 28px rgba(244, 131, 41, 0.5);
}
.ampli .para { margin: 6px 0 0; font-family: var(--plate); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--filament-hi); }
.ampli p { margin: 16px 0 0; font-size: 16px; }
.ampli .puntos { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }

.mandos { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; padding: 0; list-style: none; }
.mandos li {
  font-family: var(--plate);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--inset);
  box-shadow: 0 0 0 1px var(--line) inset;
  color: var(--text-3);
}

/* ==========================================================================
   PEDALES
   ========================================================================== */
.filtros {
  position: sticky;
  top: var(--cabecera);
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline: -20px;
  padding: 14px 20px;
  background: rgba(8, 8, 10, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.filtros[hidden] { display: none; }
.filtros .envoltura { display: flex; flex-wrap: wrap; gap: 8px; }

.filtro {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line) inset;
  color: var(--text-2);
  font-family: var(--plate);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, box-shadow 0.2s, background 0.2s;
}
.filtro:hover { color: var(--silver-hi); box-shadow: 0 0 0 1px var(--silver-dim) inset; }
.filtro[aria-pressed="true"] {
  color: #1A0B00;
  background: radial-gradient(120% 160% at 50% 0%, var(--filament-hi), var(--filament) 50%, var(--ember));
  box-shadow: 0 0 22px -6px rgba(244, 131, 41, 0.8);
}
.filtro small { margin-left: 6px; opacity: 0.6; font-family: var(--body); letter-spacing: 0; }

.familia { padding-top: clamp(48px, 6vw, 80px); }
.familia[hidden] { display: none; }
.familia-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.familia-cabeza h2 { font-size: clamp(36px, 4.6vw, 58px); }
.familia-cabeza p { margin: 0; max-width: 560px; font-size: 15.5px; color: var(--text-3); }

.pedales { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; margin-top: 28px; }

.pedal {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #151517, #101012);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px #000;
  transition: box-shadow 0.3s, transform 0.3s;
}
.pedal:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line-lit), 0 36px 70px -34px #000; }

.pedal-foto {
  position: relative;
  display: grid;
  place-items: center;
  padding: 26px 0 20px;
  background:
    radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--tinte, #F48329) 26%, transparent), transparent 75%),
    linear-gradient(180deg, #1A1A1D, #0F0F11);
}
.pedal-foto img { width: auto; height: 236px; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.65)); transition: transform 0.4s ease; }
.pedal:hover .pedal-foto img { transform: translateY(-6px) scale(1.03); }

.pedal-texto { display: grid; align-content: start; gap: 8px; padding: 20px 22px 24px; border-top: 1px solid var(--line); }
.pedal-texto h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 0.95; text-transform: uppercase; color: var(--silver-hi); letter-spacing: 0.01em; }
.pedal-texto .tipo { font-family: var(--plate); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--filament-hi); }
.pedal-texto p { margin: 2px 0 0; font-size: 15px; line-height: 1.55; }
.pedal-texto .mandos { margin-top: 8px; }

/* ==========================================================================
   LIVE
   ========================================================================== */
.funciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(40px, 5vw, 64px); }

.comparar {
  width: 100%;
  margin-top: clamp(40px, 5vw, 64px);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 40px 90px -40px #000;
  font-size: 15.5px;
}
.comparar th, .comparar td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--line); background: #111113; }
.comparar tr:last-child td, .comparar tr:last-child th { border-bottom: 0; }
.comparar thead th { background: #17171A; font-family: var(--plate); font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver-hi); }
.comparar thead th.live { color: var(--filament-hi); }
.comparar tbody th { font-weight: 500; color: var(--text); }
.comparar td { width: 150px; text-align: center; }
.comparar thead th:not(:first-child) { text-align: center; }
.comparar .si, .comparar .no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.comparar .si { background: rgba(244, 131, 41, 0.14); color: var(--filament-hi); box-shadow: 0 0 0 1px rgba(244, 131, 41, 0.45) inset; }
.comparar .no { color: var(--text-4); }
.comparar .si svg, .comparar .no svg { width: 14px; height: 14px; }
.comparar .grupo th { background: #0D0D0F; font-family: var(--plate); font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-4); padding-block: 12px; }

/* ==========================================================================
   POR QUE VALVEX
   Las ventajas de dejar el ampli en casa y los escenarios donde ayuda. Cada
   escenario lleva su etiqueta de version, Gratis o Live, para que nadie
   compre esperando algo que la gratis ya hace, ni al reves.
   ========================================================================== */
.ventajas, .escenarios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.escenarios { margin-top: clamp(40px, 5vw, 64px); }
.ventaja .placa, .escenario .placa { color: var(--filament-hi); }
.escenario .problema { color: var(--text-3); font-style: italic; }
.escenario .version {
  justify-self: start;
  margin-top: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-family: var(--plate);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--filament-hi);
  background: rgba(244, 131, 41, 0.08);
  box-shadow: 0 0 0 1px rgba(244, 131, 41, 0.4) inset;
}
.comparar.texto td { width: 36%; text-align: left; color: var(--text-2); line-height: 1.5; }
.comparar.texto td:last-child { color: var(--text); }
.comparar.texto thead th:not(:first-child) { text-align: left; }

.precio {
  position: relative;
  padding: 34px 30px;
  border-radius: 18px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(244, 131, 41, 0.2), transparent 70%),
    linear-gradient(180deg, #1A1208, #0F0B07);
  box-shadow: 0 0 0 1px rgba(244, 131, 41, 0.45), 0 0 80px -30px rgba(244, 131, 41, 0.6), 0 40px 80px -40px #000;
  text-align: center;
}
.precio .placa { color: var(--filament-hi); }
.cifra {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 900;
  line-height: 0.85;
  color: var(--silver-hi);
  font-variant-numeric: tabular-nums;
}
.cifra .moneda { font-size: 34px; margin-top: 10px; color: var(--silver); }
.cifra .num { font-size: clamp(92px, 11vw, 124px); }
.cifra s { align-self: center; font-size: 34px; color: var(--text-4); text-decoration-thickness: 3px; text-decoration-color: var(--ember); }
.precio .condicion { margin: 12px 0 0; font-size: 14.5px; color: var(--text-3); }
.precio .boton { width: 100%; margin-top: 22px; }
.precio .letra { margin: 14px 0 0; font-size: 13.5px; color: var(--text-3); line-height: 1.5; }

.live-arriba { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: center; }

/* Lo que quita el miedo a pagar, debajo del boton: tres cosas ciertas. */
.garantias { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-2); }
.garantias li { display: inline-flex; align-items: center; gap: 6px; }
.garantias li::before,
.plan-lista li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(244, 131, 41, 0.14) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBE84' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>") center / 10px no-repeat;
  box-shadow: 0 0 0 1px rgba(244, 131, 41, 0.45) inset;
}

/* ==========================================================================
   LAS DOS VERSIONES (inicio): la gratis y Live, lado a lado y con precio.
   Antes el precio solo salia en la pagina de Live, y en todo el sitio no
   habia un solo boton de comprar: quien llegaba solo veia "gratis".
   ========================================================================== */
.planes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 1000px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 40px);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
    linear-gradient(180deg, #18181B, #111113);
  box-shadow: 0 0 0 1px var(--line) inset, 0 40px 80px -44px #000;
}
.plan h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(36px, 3.6vw, 44px); line-height: 0.95; text-transform: uppercase; color: var(--silver-hi); letter-spacing: 0.01em; }
.plan-para { margin: 8px 0 0; font-size: 15px; color: var(--text-3); }
.plan-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 26px 0 0; font-family: var(--display); font-weight: 900; color: var(--silver-hi); font-variant-numeric: tabular-nums; }
.plan-precio .num { font-size: clamp(64px, 6vw, 80px); line-height: 0.85; }
.nota-legal { margin: 28px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-3); }
.plan-despues { margin: 10px 0 0; font-size: 14.5px; color: var(--text-3); }
.plan-despues b, .precio .condicion b { color: var(--silver-hi); font-weight: 700; }
.plan-precio s { font-size: 30px; line-height: 1; color: var(--text-4); text-decoration-thickness: 3px; text-decoration-color: var(--ember); }
.plan-nota { font-family: var(--body); font-weight: 500; font-size: 14px; color: var(--text-3); }
.plan-lista { display: grid; align-content: start; gap: 12px; flex: 1; margin: 26px 0 30px; padding: 26px 0 0; list-style: none; border-top: 1px solid var(--line); }
/* La marca va suelta a la izquierda y el texto corre seguido: con flex, cada
   <b> se volvia una pieza aparte y la coma quedaba lejos ("pisoton   , en"). */
.plan-lista li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.45; }
.plan-lista li::before { position: absolute; left: 0; top: 2px; }
.plan-lista b { color: var(--text); font-weight: 600; }
.plan-lista .plan-todo { padding-left: 0; font-weight: 600; color: var(--text); }
.plan-lista .plan-todo::before { display: none; }
/* En la gratis las marcas van en plata: el ambar es de Live. */
.plan:not(.plan-live) .plan-lista li::before { background-color: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 1px var(--line-lit) inset; filter: grayscale(1) brightness(1.3); }
.plan .boton { width: 100%; }
.plan-letra { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-3); text-align: center; }

.plan-live {
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(244, 131, 41, 0.2), transparent 70%),
    linear-gradient(180deg, #1B1309, #0F0B07);
  box-shadow: 0 0 0 1px rgba(244, 131, 41, 0.5) inset, 0 0 90px -40px rgba(244, 131, 41, 0.75), 0 40px 80px -40px #000;
}
.plan-live h3 { color: #FFF4EA; }
.plan-live .plan-lista { border-top-color: rgba(244, 131, 41, 0.25); }
.plan-cinta {
  position: absolute;
  top: -13px;
  right: 28px;
  padding: 6px 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFA45A, #E2701C);
  color: #1A0B00;
  font-family: var(--plate);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -8px rgba(244, 131, 41, 0.85);
}

/* ==========================================================================
   DESCARGAR
   ========================================================================== */
.descarga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: clamp(26px, 4vw, 44px);
  border-radius: 18px;
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(244, 131, 41, 0.15), transparent 70%),
    linear-gradient(180deg, #17120C, #0E0B08);
  box-shadow: 0 0 0 1px rgba(244, 131, 41, 0.35), 0 50px 100px -50px #000;
}
.descarga h2 { font-size: clamp(34px, 4.4vw, 56px); margin-top: 10px; }
.descarga .ficha { justify-content: flex-start; }
.descarga .alternativa { grid-column: 1 / -1; margin: 0; font-size: 15px; color: var(--text-3); }
.descarga .alternativa a { color: var(--silver); text-underline-offset: 3px; }

.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { counter-increment: paso; position: relative; padding: 30px 28px; border-radius: var(--radio); background: var(--panel); box-shadow: 0 0 0 1px var(--line) inset; }
.pasos li::before { content: counter(paso); display: block; font-family: var(--display); font-weight: 900; font-size: 64px; line-height: 0.8; color: var(--filament); }
.pasos h3 { margin: 18px 0 0; font-family: var(--plate); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver-hi); font-weight: 400; }
.pasos p { margin: 10px 0 0; font-size: 15.5px; }
.pasos code, .tecla { font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; color: var(--filament-hi); background: var(--inset); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }

.requisitos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.requisitos .tarjeta h3 { font-size: 22px; }

/* Si Windows avisa: las dos pantallas de SmartScreen, DIBUJADAS y no
   capturadas, para que salgan en el idioma de cada pagina y con el nombre del
   instalador de la version. Lo que hay que pulsar va marcado en naranja.
   Mientras el instalador no vaya firmado, esto es lo primero que ve quien lo
   abre (ver Docs\FIRMAR-EL-EJECUTABLE.txt). */
.aviso { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 48px); align-items: center; margin-top: 18px; padding: clamp(24px, 3.5vw, 40px); border-radius: 18px; background: var(--panel); box-shadow: 0 0 0 1px var(--line) inset; }
.aviso .placa { color: var(--filament-hi); }
.aviso h3 { margin: 12px 0 0; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; color: var(--text); }
.aviso-texto p:not(.placa) { margin: 14px 0 0; font-size: 16px; line-height: 1.6; }
.pantallas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.aviso-paso { margin: 0; }
.ventana { display: flex; flex-direction: column; min-height: 200px; padding: 18px 18px 16px; border-radius: 4px; background: #0B5CAD; color: #FFFFFF; font-family: "Segoe UI", system-ui, sans-serif; box-shadow: 0 24px 50px -28px #000; }
.ventana p { margin: 0; }
.ventana-titulo { font-size: 19px; line-height: 1.2; }
.ventana .ventana-texto { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.92); }
.ventana-enlace { text-decoration: underline; text-underline-offset: 2px; }
.ventana .ventana-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 14px; }
.ventana-boton { padding: 5px 12px; border: 1px solid rgba(255, 255, 255, 0.85); font-size: 12px; white-space: nowrap; }
.marca-clic { border-radius: 2px; outline: 2px solid var(--filament); outline-offset: 3px; box-shadow: 0 0 0 7px rgba(244, 131, 41, 0.28); }
.aviso-paso figcaption { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.aviso-paso figcaption b { margin-right: 6px; font-family: var(--display); font-size: 22px; font-weight: 900; color: var(--filament); }

/* Lo que se puede comprobar antes de abrirlo. La tarjeta de VirusTotal sale
   solo cuando ArmarWeb se corre con -VirusTotal (sitio.js le quita el hidden),
   y por eso la rejilla se ajusta a las que haya. */
.confianza { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; }
.confianza li { padding: 24px 22px; border-radius: var(--radio); background: var(--panel); box-shadow: 0 0 0 1px var(--line) inset; }
.confianza h3 { margin: 0; font-family: var(--plate); font-size: 12px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver-hi); }
.confianza p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; }
.confianza a { color: var(--filament-hi); text-underline-offset: 3px; overflow-wrap: anywhere; }
.huella { display: block; margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: var(--inset); font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.5; color: var(--filament-hi); word-break: break-all; }

/* ==========================================================================
   PREGUNTAS
   ========================================================================== */
.preguntas { display: grid; gap: 12px; margin-top: clamp(32px, 4vw, 48px); }
.preguntas details { border-radius: var(--radio); background: var(--panel); box-shadow: 0 0 0 1px var(--line) inset; transition: box-shadow 0.2s; }
.preguntas details[open] { box-shadow: 0 0 0 1px var(--line-lit) inset; }
.preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; font-weight: 600; font-size: 17px; color: var(--text); }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 2px solid var(--filament); border-bottom: 2px solid var(--filament); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s; }
.preguntas details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.preguntas details > div { padding: 0 22px 22px; font-size: 16px; line-height: 1.65; }
.preguntas details > div p { margin: 0; }
.preguntas details > div p + p { margin-top: 10px; }
.preguntas details a { color: var(--filament-hi); text-underline-offset: 3px; }

.tema { padding-top: clamp(40px, 5vw, 64px); }
.tema h2 { font-size: clamp(32px, 4vw, 48px); }

/* ==========================================================================
   PIE
   ========================================================================== */
.pie {
  margin-inline: -20px;
  padding: 56px 20px calc(44px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: #060607;
  font-size: 14px;
  color: var(--text-4);
}
.pie .envoltura { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px 40px; }
.pie .marca + p { margin: 14px 0 0; max-width: 340px; color: var(--text-3); line-height: 1.55; }
.pie h2 { margin: 0 0 14px; font-family: var(--plate); font-size: 10.5px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver-dim); }
.pie ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pie a { color: var(--text-3); text-decoration: none; }
.pie a:hover { color: var(--silver-hi); }
.pie .legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 6px 0 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; }

/* El ancla del precio: lo que cuestan los de las marcas grandes, junto al de
   Live. Las cifras y de donde salen, en Docs\PRECIO-Y-CANAL.txt. */
.precio .ancla { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.plan-ancla { margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-2); text-align: center; }

/* La franja de ASIO, al final del contenido de cada pagina. La piden las
   pautas del logo de Steinberg (ver ArmarWeb.ps1): en el pie solo no vale. El
   logo va tal cual viene en el SDK, blanco sobre transparente; no se tine. */
.compat { padding-block: 28px; border-top: 1px solid var(--line); }
.compat .envoltura { display: flex; align-items: center; gap: 22px; }
.compat-logo { flex: none; width: 76px; height: auto; }
.compat p { margin: 0; max-width: 640px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.compat-marca { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-3); }

/* La barra de comprar. La saca sitio.js: en el movil en todas las paginas
   menos la de gracias, y en el ordenador solo en la de Live; siempre pasada la
   primera pantalla y nunca a la vez que otro boton de comprar a la vista. */
.barra-compra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(14, 10, 8, 0.94);
  border-top: 1px solid rgba(244, 131, 41, 0.38);
  box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  transform: translateY(0);
  transition: transform 0.25s ease;
}
.barra-compra.fuera { transform: translateY(110%); visibility: hidden; transition: transform 0.25s ease, visibility 0s 0.25s; }
.barra-compra .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.barra-compra p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 15px; line-height: 1.3; color: var(--text); }
.barra-compra s { color: var(--text-4); text-decoration-color: var(--ember); }
.barra-precio { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--filament-hi); }
.barra-nota { flex-basis: 100%; font-size: 12.5px; color: var(--text-3); }
.barra-compra .boton { --b-alto: 46px; flex: none; padding-inline: 22px; }

/* ==========================================================================
   ANCHOS PEQUENOS
   ========================================================================== */
@media (max-width: 1080px) {
  .cabecera > .envoltura { gap: 10px; }
  .menu-boton { display: grid; order: 2; margin-left: 0; }
  .idioma { order: 1; margin: 0 0 0 auto; }
  .cabecera .boton { display: none; }
  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px 20px 18px;
    background: rgba(8, 8, 10, 0.98);
    border-bottom: 1px solid var(--line);
  }
  .menu.abierto { display: flex; }
  .menu a { padding: 15px 4px; font-size: 12px; border-bottom: 1px solid #1A1A1D; }
  .menu a[aria-current="page"]::after { display: none; }
  .menu .boton { display: inline-flex; margin-top: 16px; border-bottom: 0; color: #1A0B00; }
  .recorrido { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vitrina { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vitrina a:nth-child(n + 5) { display: none; }
  .rejilla.cuatro, .requisitos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recetas, .rejilla.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ventajas, .escenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lado, .lado.al-reves, .bloque, .live-arriba, .aviso { grid-template-columns: 1fr; }
  .lado.al-reves > :first-child { order: 0; }
  .verdad .envoltura { grid-template-columns: repeat(2, 1fr); }
  .verdad div:nth-child(3) { border-left: 0; }
  .verdad div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* En escritorio el boton de descargar del menu desplegable no se ve: el de
   la cabecera ya esta. */
@media (min-width: 1081px) { .menu .boton { display: none; } }

/* En una columna, Live va primero: es la que tiene algo que contar, y debajo
   de la gratis quedaba a dos pantallas de distancia. */
@media (max-width: 860px) {
  .planes { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 34px; }
  .plan-live { order: -1; }
}

@media (max-width: 720px) {
  /* El suelo de la foto no pasa del margen de la pagina: mas alla empuja la
     pagina de lado. */
  .foto-producto::after { left: max(-6%, -20px); right: max(-6%, -20px); }
  body { font-size: 16px; }
  .lanzamiento { font-size: 13px; gap: 10px; }
  .lanzamiento-largo { display: none; }
  .lanzamiento-corto { display: inline; }
  .amplis, .pasos, .funciones, .recetas, .rejilla.dos, .rejilla.tres, .recorrido { grid-template-columns: 1fr; }
  .descarga { grid-template-columns: minmax(0, 1fr); }
  .pantallas { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
  .descarga .boton { width: 100%; white-space: normal; text-align: center; line-height: 1.35; padding-block: 12px; }
  .acciones .boton { width: 100%; }
  .pie .envoltura { grid-template-columns: 1fr 1fr; }
  .pie .envoltura > div:first-child { grid-column: 1 / -1; }
  .comparar { font-size: 14px; }
  .comparar th, .comparar td { padding: 13px 12px; }
  .comparar td { width: 64px; }
  .ventajas, .escenarios { grid-template-columns: minmax(0, 1fr); }
  .comparar.texto thead { display: none; }
  .comparar.texto tr { display: grid; grid-template-columns: 1fr 1fr; }
  .comparar.texto th[scope="row"] { grid-column: 1 / -1; padding-bottom: 4px; border-bottom: 0; color: var(--silver-hi); }
  .comparar.texto td { width: auto; padding-top: 6px; }
  .comparar.texto td::before { content: attr(data-col); display: block; margin-bottom: 4px; font-family: var(--plate); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4); }
  .comparar.texto td:last-child::before { color: var(--filament-hi); }
  .pedales { grid-template-columns: 1fr; }
  .filtros { top: var(--cabecera); overflow-x: auto; flex-wrap: nowrap; }
  .filtros .envoltura { flex-wrap: nowrap; width: max-content; }
}

@media (max-width: 460px) {
  .verdad .envoltura, .rejilla.cuatro, .requisitos { grid-template-columns: 1fr; }
  .verdad div { border-left: 0; }
  .verdad div + div { border-top: 1px solid var(--line); }
  .boton { padding-inline: 22px; letter-spacing: 0.14em; }
  .vitrina { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vitrina a:nth-child(n + 4) { display: none; }
  /* En la barra, el boton ya dice Live: el nombre sobra y el precio manda. */
  .barra-compra { padding-inline: 16px; }
  .barra-compra .envoltura { gap: 10px; }
  .barra-compra p b { display: none; }
  .barra-compra .boton { padding-inline: 16px; letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }

}

/* Los telefonos mas estrechos (320 px): que nada empuje la pagina de lado. */
@media (max-width: 360px) {
  .cabeza-pagina h1 { font-size: 36px; }
  .cierre h2 { font-size: 40px; }
  .plan .boton, .cierre .boton { white-space: normal; text-align: center; line-height: 1.35; padding-block: 12px; }
}

/* ==========================================================================
   MOVIMIENTO (03/11/2026)

   El dueno: "mas dinamico, impactante". Todo esto lo enciende sitio.js
   poniendo .con-movimiento en <html>: sin JavaScript, o con "reducir
   movimiento" en el sistema, la pagina es la de siempre, quieta y entera.
   La regla: nada gira ni se inclina. Lo que se mueve, sube, respira o brilla,
   como un ampli que se enciende.
   ========================================================================== */

/* Cuanto queda de pagina: un filamento arriba del todo. */
.progreso {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(var(--avance, 0));
  background: linear-gradient(90deg, #E06D1C, #F9A04C 60%, #FFE2C4);
  box-shadow: 0 0 14px rgba(244, 131, 41, 0.75);
  pointer-events: none;
}

/* Lo que llega a la pantalla, sube y aparece; lo de al lado, un poco despues. */
.con-movimiento .revela {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.95s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.95s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.con-movimiento .revela.visto { opacity: 1; transform: none; }

/* El titular entra linea a linea, desde debajo de su propia linea. */
.con-movimiento .hero-titulo .hero-linea { animation: linea-sube 1.1s cubic-bezier(0.16, 0.9, 0.2, 1) both; }
.con-movimiento .hero-titulo .hero-linea + .hero-linea { animation-delay: 0.14s; }
@keyframes linea-sube {
  from { opacity: 0; transform: translateY(0.55em); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(-0.3em 0 -0.3em 0); }
}

/* Las valvulas respiran detras del cabezal. */
.con-movimiento .hero-ampli::before { animation: valvulas 4.6s ease-in-out infinite; }
@keyframes valvulas {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.07); }
}
.con-movimiento .hero-ampli img { will-change: transform; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }

/* Las chispas que suben del cabezal, por detras de el y del texto. */
.con-movimiento .hero > .envoltura { position: relative; z-index: 1; }
.chispas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

/* Una luz que pasa por lo encendido de cada titular, de vez en cuando. */
.con-movimiento .brilla,
.con-movimiento .hero-acento {
  background-image:
    linear-gradient(105deg, transparent 0 42%, rgba(255, 249, 240, 0.95) 50%, transparent 58% 100%),
    linear-gradient(180deg, #FFD7AE 0%, #F9A04C 42%, #E06D1C 100%);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 160% 0, 0 0;
  animation: destello 7.5s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 1.2s) infinite;
}
@keyframes destello {
  0%, 64% { background-position: 160% 0, 0 0; }
  100%    { background-position: -60% 0, 0 0; }
}

/* El boton que se pulsa: una luz que lo cruza al pasar por encima, y en el
   de arriba de la portada, sola de vez en cuando. */
.con-movimiento .boton-luz { position: relative; overflow: hidden; isolation: isolate; }
.con-movimiento .boton-luz::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.con-movimiento .boton-luz:hover::after { transform: translateX(130%); }
.con-movimiento .hero-acciones .boton-luz::after { animation: boton-brilla 6s 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes boton-brilla {
  0%, 78% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}

/* Live: un filamento que recorre el borde de su tarjeta. */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.con-movimiento .plan-live::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(from var(--giro), transparent 0deg 240deg, rgba(244, 131, 41, 0.9) 305deg, #FFE2C4 332deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: filamento 5.5s linear infinite;
}
@keyframes filamento { to { --giro: 360deg; } }

/* El raton lleva una luz de valvula por la pagina (solo con raton). */
.foco {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s;
  mix-blend-mode: screen;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(244, 131, 41, 0.075), transparent 62%);
}
.foco.encendido { opacity: 1; }

/* ==========================================================================
   PORTADA: EL SIMULADOR DEL MODO LIVE Y TU PROPIO SONIDO (04/11/2026)

   El simulador (sitio.js, EL SIMULADOR DEL MODO LIVE) dibuja la ventana del
   modo Live a 1000 x 660 y la escala entera: dentro de .sim-app los tamanos
   son los de esa ventana, no los de la pagina. Los paneles de .sim-capa van
   fuera de la escala, a su tamano de verdad. --c es el color del sonido que
   suena; los colores son los de la paleta de Live (Source/ui/LiveView.cpp).
   ========================================================================== */
.sim { --c: #8B5CF6; position: relative; max-width: 1080px; margin: clamp(30px, 4vw, 46px) auto 0; }
.sim[hidden] { display: none; }

/* La guia de arriba: lo que hay que probar, y se va marcando. */
.sim-guia { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 0 0 22px; }
.sim-guia > b { font-family: var(--plate); font-size: 10px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--filament-hi); }
.sim-guia ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sim-guia li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 7px; border-radius: 999px;
  font-size: 13px; color: var(--text-3);
  background: rgba(255, 255, 255, 0.03); box-shadow: 0 0 0 1px var(--line) inset;
  transition: color 0.3s, background 0.3s, box-shadow 0.3s;
}
.sim-guia li i {
  position: relative; display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%;
  font-style: normal; font-family: var(--plate); font-size: 9px; color: var(--text-3);
  box-shadow: 0 0 0 1px var(--line-lit) inset; transition: background 0.3s;
}
.sim-guia li.hecho { color: var(--text); background: rgba(61, 220, 132, 0.08); box-shadow: 0 0 0 1px rgba(61, 220, 132, 0.4) inset; }
.sim-guia li.hecho i { font-size: 0; background: var(--live-green); box-shadow: 0 0 12px rgba(61, 220, 132, 0.6); }
.sim-guia li.hecho i::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #06120B; border-bottom: 2px solid #06120B; transform: translateY(-1px) rotate(-45deg); }
.sim-guia-fin { display: none; flex-basis: 100%; margin: 4px 0 0; text-align: center; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--live-green); }
.sim-guia.completa .sim-guia-fin { display: block; animation: sim-entra 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* La ventana, con la barra de titulo oscura de Windows. */
.sim-ventana {
  position: relative; margin-inline: auto; border-radius: 10px; overflow: hidden; background: #0A090D;
  box-shadow: 0 0 0 1px #2A2830, 0 60px 120px -50px #000, 0 0 170px -60px color-mix(in srgb, var(--c) 65%, transparent);
  transition: box-shadow 0.6s ease;
}
.sim-titulo { display: flex; align-items: center; gap: 9px; height: 32px; padding-left: 12px; background: #1A1920; font-size: 12px; color: #A9A8B3; user-select: none; }
.sim-logo { width: 14px; height: 14px; border-radius: 4px; background: radial-gradient(circle at 50% 42%, var(--filament-hi), var(--filament) 45%, var(--ember-deep)); }
.sim-controles { display: flex; height: 100%; margin-left: auto; }
.sim-controles span { display: grid; place-items: center; width: 44px; color: #8E8D98; }
.sim-controles svg { width: 13px; height: 13px; stroke-width: 1.5; }

.sim-pantalla { position: relative; }
.sim-lienzo { position: relative; overflow: hidden; }

/* -- Dentro de la ventana: medidas de la ventana de 1000 x 660 ---------------- */
.sim-app {
  position: absolute; left: 0; top: 0; width: 1000px; height: 660px; transform-origin: 0 0;
  font-family: var(--body); color: #ECECF0; outline: none;
  background:
    radial-gradient(70% 55% at 50% 4%, color-mix(in srgb, var(--c) 13%, transparent), transparent 70%),
    linear-gradient(180deg, #121018, #09080C);
  transition: background 0.6s;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.sim-app button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.sh { position: absolute; left: 24px; right: 24px; top: 14px; height: 40px; display: flex; align-items: center; }
.sh-marca { font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: 0.1em; color: var(--filament); }
.sh-centro { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); display: flex; gap: 14px; }
.sh-modos { display: flex; padding: 3px; border-radius: 999px; box-shadow: 0 0 0 1px #34323B inset; }
.sh-modos button, .sh-afinador { height: 30px; padding: 0 18px; border-radius: 999px; font-family: var(--plate); font-size: 9px; letter-spacing: 0.22em; color: #8F8D99; transition: background 0.2s, color 0.2s; }
.sh-modos button[aria-pressed="true"] { background: #2A2830; color: #FFFFFF; }
.sh-afinador { display: inline-flex; align-items: center; gap: 8px; height: 36px; box-shadow: 0 0 0 1px #34323B inset; }
.sh-afinador[aria-pressed="true"] { background: var(--live-green); color: #06120B; box-shadow: none; }
.sh-afinador svg { width: 15px; height: 15px; }
.sh-midi { display: flex; align-items: center; gap: 9px; margin-left: auto; font-family: var(--plate); font-size: 9px; letter-spacing: 0.2em; color: #8F8D99; }
.sh-led { width: 8px; height: 8px; border-radius: 50%; background: #3A3942; transition: background 0.12s, box-shadow 0.12s; }
.sh-led.on { background: var(--live-green); box-shadow: 0 0 9px var(--live-green); }
.sh-pantalla { display: grid; place-items: center; width: 34px; height: 34px; margin-left: 16px; border-radius: 8px; color: #B5B3BE; box-shadow: 0 0 0 1px #34323B inset; }
.sh-pantalla svg { width: 16px; height: 16px; }
.sim-app .sh button:hover, .sim-app .sh-pantalla:hover { color: #FFFFFF; }

.sim-cuerpo { position: absolute; left: 24px; right: 24px; top: 68px; bottom: 34px; }
.sf { position: absolute; left: 0; right: 0; bottom: 11px; margin: 0; text-align: center; font-size: 12.5px; color: #6F6D78; white-space: nowrap; }
.sf span { margin: 0 4px; color: #45434D; }

/* Arriba, lo que suena. */
.sn {
  position: relative; height: 150px; display: grid; grid-template-columns: 210px minmax(0, 1fr) 210px; align-items: center;
  padding: 0 22px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(60% 130% at 50% 0%, color-mix(in srgb, var(--c) 17%, transparent), transparent 70%), #0D0C11;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 45%, #2A2830) inset;
  transition: box-shadow 0.5s;
}
.sn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--c), transparent); }
.sn-lado { display: grid; justify-items: start; gap: 7px; min-width: 0; text-align: left; }
.sn-sig { justify-items: end; text-align: right; }
.sn-lado small { font-family: var(--plate); font-size: 8px; letter-spacing: 0.24em; color: #7D7B87; white-space: nowrap; }
.sn-mini { display: flex; align-items: center; gap: 9px; max-width: 100%; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; color: #BDBBC6; transition: color 0.2s; }
.sn-mini b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-mini svg { width: 21px; height: 21px; flex: none; color: var(--cc); }
.sim-app .sn-lado:hover .sn-mini { color: #FFFFFF; }
.sn-centro { display: grid; justify-items: center; gap: 11px; min-width: 0; }
.sn-ahora { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-family: var(--plate); font-size: 8.5px; letter-spacing: 0.26em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 55%, #FFFFFF); white-space: nowrap; }
.sn-nombre { display: flex; align-items: center; gap: 14px; max-width: 100%; }
.sn-icono {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 13px; color: var(--c);
  background: color-mix(in srgb, var(--c) 16%, #0D0C11);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent) inset, 0 0 26px -6px var(--c);
}
.sn-icono svg { width: 26px; height: 26px; }
.sn-nombre b { font-family: var(--display); font-weight: 900; font-size: 64px; line-height: 0.9; text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--c) 12%, #FFFFFF); text-shadow: 0 0 2px var(--c), 0 0 28px color-mix(in srgb, var(--c) 70%, transparent); }
.nuevo { animation: sim-entra 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes sim-entra { from { opacity: 0; transform: translateY(10px); filter: blur(8px); } }

.sim-chips { display: flex; justify-content: center; gap: 6px; max-width: 100%; }
.sim-chips span { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-family: var(--plate); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: #D6D4DE; box-shadow: 0 0 0 1px #34323B inset; }
.sim-chips span i { width: 8px; height: 8px; border-radius: 50%; background: var(--p); box-shadow: 0 0 6px var(--p); }
.sim-chips .canal { background: var(--c); color: #0B0A0F; box-shadow: none; }

/* La rejilla: cinco bancos de cinco. */
.sg { display: grid; grid-template-columns: 118px repeat(5, minmax(0, 1fr)); grid-auto-rows: 72px; gap: 9px 10px; margin-top: 16px; }
.sb { display: grid; align-content: center; gap: 5px; min-width: 0; }
.sb b { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 0.85; color: #4A4853; }
.sb span { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #6E6C78; }
.sb.vivo b, .sb.vivo span { color: color-mix(in srgb, var(--c) 72%, #FFFFFF); }
.sb input { width: 100%; padding: 3px 6px; border: 1px solid var(--filament); border-radius: 4px; outline: none; font: 700 14px var(--display); letter-spacing: 0.05em; text-transform: uppercase; color: #FFFFFF; background: #08080A; }

.sc {
  position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; padding: 11px 12px 8px; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, #19181E, #121116); box-shadow: 0 0 0 1px #25242B inset;
  transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
}
.sc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); opacity: 0.5; }
.sc:hover { box-shadow: 0 0 0 1px #3D3B45 inset; }
.sc-cab { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-cab svg { width: 17px; height: 17px; flex: none; color: var(--c); opacity: 0.8; }
.sc-cab b { font-family: var(--display); font-weight: 800; font-size: 23px; line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #BDBBC6; }
.sc-fila { display: flex; align-items: center; gap: 7px; }
.sc-canal { padding: 3px 6px; border-radius: 4px; font-style: normal; font-family: var(--plate); font-size: 7px; letter-spacing: 0.16em; color: #8F8D99; box-shadow: 0 0 0 1px #34323B inset; }
.sc-puntos { display: flex; gap: 4px; }
.sc-puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--p, #34333B); opacity: 0.75; }
.sc-pc { position: absolute; right: 10px; bottom: 7px; font-family: var(--plate); font-size: 7px; letter-spacing: 0.16em; color: #5E5C68; pointer-events: none; }
.sc-lapiz { position: absolute; right: 7px; top: 9px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: #C9C7D2; background: #26252C; opacity: 0; transition: opacity 0.2s; }
.sc-lapiz svg { width: 13px; height: 13px; }
.sc:hover .sc-lapiz { opacity: 1; }
.sc-lapiz:hover { background: #34323B; color: #FFFFFF; }
.sc[aria-current="true"] {
  transform: translateY(-2px);
  background: radial-gradient(120% 120% at 50% 100%, color-mix(in srgb, var(--c) 40%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, #19181E), #141218);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent) inset, 0 0 32px -8px var(--c);
}
.sc[aria-current="true"]::before { height: 4px; opacity: 1; }
.sc[aria-current="true"] .sc-cab b { color: #FFFFFF; }
.sc[aria-current="true"] .sc-cab svg, .sc[aria-current="true"] .sc-puntos i { opacity: 1; }
.sc[aria-current="true"] .sc-canal { color: #FFFFFF; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent) inset; }
.sc.edita { box-shadow: 0 0 0 2px var(--c) inset, 0 0 32px -8px var(--c); }
.sc-vacia { display: flex; gap: 0; padding: 0; background: transparent; box-shadow: 0 0 0 1px #24232A inset; }
.sc-vacia::before { display: none; }
.sc-mitad { display: grid; place-items: center; flex: 1; font-family: var(--plate); font-size: 7.5px; letter-spacing: 0.2em; color: #77757F; transition: background 0.2s, color 0.2s; }
.sc-mitad + .sc-mitad { color: color-mix(in srgb, var(--filament) 75%, #555555); box-shadow: 1px 0 0 #24232A inset; }
.sc-mitad:hover { background: rgba(255, 255, 255, 0.045); color: #FFFFFF; }

/* La vista de escenario. */
.se { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.se-bancos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.se-bancos button { display: flex; align-items: center; gap: 10px; justify-self: start; text-align: left; color: #8F8D99; }
.se-bancos button:last-child { justify-self: end; flex-direction: row-reverse; text-align: right; }
.se-bancos button[disabled] { visibility: hidden; }
.se-bancos button svg { width: 24px; height: 24px; }
.se-bancos small, .se-banco small { display: block; font-family: var(--plate); font-size: 8px; letter-spacing: 0.26em; color: #6E6C78; }
.se-bancos b { display: block; margin-top: 3px; font-family: var(--display); font-weight: 800; font-size: 25px; line-height: 1; text-transform: uppercase; color: #8F8D99; }
.sim-app .se-bancos button:hover, .sim-app .se-bancos button:hover b { color: #FFFFFF; }
.se-banco { text-align: center; }
.se-banco small { color: color-mix(in srgb, var(--c) 60%, #FFFFFF); }
.se-banco b { display: block; margin-top: 4px; font-family: var(--display); font-weight: 900; font-size: 40px; line-height: 1; text-transform: uppercase; color: #FFFFFF; }
.se-ahora { display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 0; }
.se-icono { width: 64px; height: 64px; border-radius: 16px; }
.se-icono svg { width: 30px; height: 30px; }
.se-nombre { max-width: 100%; font-family: var(--display); font-weight: 900; font-size: 136px; line-height: 0.82; text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--c) 10%, #FFFFFF); text-shadow: 0 0 3px var(--c), 0 0 42px color-mix(in srgb, var(--c) 70%, transparent), 0 0 90px color-mix(in srgb, var(--c) 40%, transparent); }
.se-pies { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 16px; height: 152px; }
.st {
  position: relative; display: grid; align-content: start; gap: 10px; height: 132px; padding: 14px 16px; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, #19181E, #111015); box-shadow: 0 0 0 1px #25242B inset;
  transition: height 0.25s, box-shadow 0.25s, background 0.3s;
}
.st::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); opacity: 0.55; }
.st small { display: flex; justify-content: space-between; align-items: center; font-family: var(--plate); font-size: 8px; letter-spacing: 0.24em; color: #6E6C78; }
.st small i { padding: 2px 6px; border-radius: 4px; font-style: normal; letter-spacing: 0.14em; box-shadow: 0 0 0 1px #34323B inset; }
.st svg { width: 22px; height: 22px; color: var(--c); }
.st b { font-family: var(--display); font-weight: 900; font-size: 38px; line-height: 0.9; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #8F8D99; }
.st:hover { box-shadow: 0 0 0 1px #3D3B45 inset; }
.st[aria-current="true"] { height: 152px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #1A1820), color-mix(in srgb, var(--c) 42%, #141218)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent) inset, 0 0 44px -10px var(--c); }
.st[aria-current="true"]::before { opacity: 1; }
.st[aria-current="true"] b { color: #FFFFFF; }
.st[aria-current="true"] small { color: #E7E5EE; }
.st-vacia { cursor: default; }
.st-vacia::before { display: none; }
.st-vacia b { color: #3E3C46; }

/* El afinador. */
.sa { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: 24px; }
.sa-mudo { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 15px; border-radius: 999px; font-family: var(--plate); font-size: 9px; letter-spacing: 0.24em; color: #FF9A9A; background: rgba(229, 72, 77, 0.08); box-shadow: 0 0 0 1px rgba(229, 72, 77, 0.45) inset; }
.sa-mudo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 8px #E5484D; }
.sa-nota { display: flex; align-items: flex-end; font-family: var(--display); font-weight: 900; line-height: 0.8; color: #FFFFFF; transition: color 0.3s, text-shadow 0.3s; }
.sa-nota b { font-weight: 900; font-size: 200px; }
.sa-nota sub { margin: 0 0 8px 8px; font-size: 38px; color: #77757F; }
.sa-escala { position: relative; width: 640px; height: 58px; }
.sa-escala::before { content: ""; position: absolute; left: 20px; right: 20px; top: 20px; height: 18px; background: repeating-linear-gradient(90deg, #3A3942 0 2px, transparent 2px 30px); }
.sa-escala::after { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--live-green); opacity: 0.55; }
.sa-aguja { position: absolute; left: 50%; top: 0; bottom: 0; z-index: 1; width: 5px; margin-left: -2.5px; border-radius: 3px; background: #FFFFFF; box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); transition: opacity 0.3s, background 0.2s; }
.sa-estado { margin: 0; font-family: var(--plate); font-size: 12px; letter-spacing: 0.3em; color: #8F8D99; font-variant-numeric: tabular-nums; }
.sa.callado .sa-aguja { opacity: 0.18; }
.sa.callado .sa-nota { color: #4A4853; }
.sa.afinada .sa-nota { color: #EFFFF5; text-shadow: 0 0 4px var(--live-green), 0 0 54px rgba(61, 220, 132, 0.7); }
.sa.afinada .sa-aguja { background: var(--live-green); box-shadow: 0 0 16px var(--live-green); }
.sa.afinada .sa-estado { color: var(--live-green); }

/* -- Fuera de la escala: paneles, preguntas y avisos, a tamano de pagina ------ */
.sim-capa { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sim-capa > * { pointer-events: auto; }

.sim-editor {
  --c: #8B5CF6;
  position: absolute; width: 300px; display: grid; gap: 10px; padding: 16px; border-radius: 14px;
  background: #18171D; box-shadow: 0 0 0 1px #3A3842, 0 28px 60px -12px rgba(0, 0, 0, 0.9);
  animation: sim-pop 0.16s ease-out; user-select: none;
}
@keyframes sim-pop { from { opacity: 0; transform: scale(0.97); } }
.sim-editor header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sim-editor header b { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: 0.05em; white-space: nowrap; color: color-mix(in srgb, var(--c) 55%, #FFFFFF); }
.sim-editor header small { white-space: nowrap; }
.sim-editor header small, .sim-editor .rot { font-family: var(--plate); font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #77757F; }
.sim-editor .rot { margin: 2px 0 0; }
.sim-editor input { width: 100%; padding: 8px 11px; border: 1px solid #3A3842; border-radius: 8px; outline: none; font: 800 21px var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: #FFFFFF; background: #0B0A0F; user-select: text; }
.sim-editor input:focus { border-color: var(--c); }
.sim-editor button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sim-colores { display: flex; justify-content: space-between; }
.sim-colores button { width: 20px; height: 20px; border-radius: 50%; background: var(--p); transition: transform 0.15s, box-shadow 0.15s; }
.sim-colores button:hover { transform: scale(1.15); }
.sim-colores button[aria-pressed="true"] { box-shadow: 0 0 0 3px #18171D, 0 0 0 5px var(--p); }
.sim-iconos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.sim-iconos button { display: grid; place-items: center; height: 36px; border-radius: 8px; color: #B5B3BE; background: rgba(255, 255, 255, 0.035); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset; }
.sim-iconos button:hover { background: rgba(255, 255, 255, 0.07); }
.sim-iconos button[aria-pressed="true"] { color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: 0 0 0 1.5px var(--c) inset; }
.sim-iconos svg { width: 16px; height: 16px; }
.sim-acciones { display: grid; padding-top: 6px; border-top: 1px solid #2A2830; }
.sim-acciones button { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; border-radius: 8px; text-align: left; font-size: 14px; color: #D6D4DE; }
.sim-acciones button:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
.sim-acciones svg { width: 16px; height: 16px; flex: none; color: #77757F; }
.sim-acciones small { margin-left: auto; font-family: var(--plate); font-size: 8px; letter-spacing: 0.1em; color: #77757F; }
.sim-acciones .peligro, .sim-acciones .peligro svg { color: #F07171; }
.sim-editor .sim-listo { height: 36px; border-radius: 999px; font-family: var(--plate); font-size: 9.5px; letter-spacing: 0.2em; color: #0B0B0C; background: var(--c); }

.sim-menu { position: absolute; min-width: 250px; padding: 5px; border-radius: 9px; background: #1D1C22; box-shadow: 0 0 0 1px #3A3842, 0 20px 44px -10px rgba(0, 0, 0, 0.9); animation: sim-pop 0.14s ease-out; }
.sim-menu p { margin: 0; padding: 7px 10px 5px; font-size: 12px; font-weight: 600; color: #8F8D99; }
.sim-menu button { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; text-align: left; font: inherit; font-size: 14px; color: #E7E5EE; background: none; cursor: pointer; }
.sim-menu button:hover { background: color-mix(in srgb, var(--filament) 22%, transparent); color: #FFFFFF; }
.sim-menu hr { height: 1px; margin: 4px 6px; border: 0; background: #34323B; }

.sim-dialogo { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(4, 4, 6, 0.62); animation: sim-aparece 0.16s ease-out; }
@keyframes sim-aparece { from { opacity: 0; } }
.sim-caja { width: min(440px, 100%); display: grid; gap: 12px; padding: 22px; border-radius: 12px; background: #1A1920; box-shadow: 0 0 0 1px #3A3842, 0 30px 70px -10px rgba(0, 0, 0, 0.9); animation: sim-pop 0.18s ease-out; }
.sim-caja b { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; color: #FFFFFF; }
.sim-caja p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #B5B3BE; }
.sim-caja input { width: 100%; padding: 9px 11px; border: 1px solid #3A3842; border-radius: 8px; outline: none; font: 500 15px var(--body); color: #FFFFFF; background: #0B0A0F; }
.sim-caja input:focus { border-color: var(--filament); }
.sim-botones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.sim-botones button { height: 38px; padding: 0 18px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; color: #D6D4DE; background: none; box-shadow: 0 0 0 1px #3A3842 inset; }
.sim-botones button:hover { color: #FFFFFF; box-shadow: 0 0 0 1px #5A5862 inset; }
.sim-botones .si { color: #160A02; background: var(--filament); box-shadow: none; }
.sim-botones .peligro { color: #FFFFFF; background: #C93C41; box-shadow: none; }
.sim-botones .si:hover, .sim-botones .peligro:hover { filter: brightness(1.1); box-shadow: none; color: inherit; }

.sim-aprende { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: min(460px, calc(100% - 24px)); display: grid; justify-items: center; gap: 8px; padding: 20px 22px; border-radius: 14px; text-align: center; background: rgba(12, 22, 16, 0.94); box-shadow: 0 0 0 1px rgba(61, 220, 132, 0.5), 0 0 60px -10px rgba(61, 220, 132, 0.5); animation: sim-pop 0.18s ease-out; }
.sim-aprende b { font-family: var(--plate); font-size: 10.5px; font-weight: 400; letter-spacing: 0.2em; color: var(--live-green); }
.sim-aprende p { margin: 0; font-size: 14.5px; color: #D6D4DE; }
.sim-aprende button { margin-top: 4px; padding: 6px 14px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; color: #B5B3BE; background: none; box-shadow: 0 0 0 1px #3A3842 inset; cursor: pointer; }

.sim-toast { position: absolute; left: 50%; bottom: 46px; z-index: 4; transform: translate(-50%, 12px); max-width: calc(100% - 24px); padding: 9px 16px 9px 34px; border-radius: 999px; font-size: 14px; color: #EFFFF5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(12, 22, 16, 0.95); box-shadow: 0 0 0 1px rgba(61, 220, 132, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
.sim-toast::before { content: ""; position: absolute; left: 15px; top: 50%; width: 8px; height: 4px; border-left: 2px solid var(--live-green); border-bottom: 2px solid var(--live-green); transform: translateY(-70%) rotate(-45deg); }
.sim-toast.ve { opacity: 1; transform: translate(-50%, 0); }

/* -- La pedalera de debajo ------------------------------------------------- */
.sim-mandos { display: none; }
.sim-suelo { max-width: 780px; margin: 20px auto 0; padding: 14px clamp(10px, 2vw, 20px) 18px; border-radius: 18px; background: linear-gradient(180deg, #1B1B1E, #0E0E10); box-shadow: 0 0 0 1px var(--line), 0 40px 70px -40px #000; }
.sim-suelo-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; font-family: var(--plate); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
.sim-suelo-cab > span:first-child { white-space: nowrap; }
.sim-suelo-banco { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-2); }
.sim-suelo-banco [data-sim-banco] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-pies { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: clamp(6px, 1.4vw, 14px); }
.sim-banco-btn { display: grid; place-items: center; width: 32px; height: 32px; flex: none; padding: 0; border: 0; border-radius: 50%; color: var(--text-3); background: #151518; box-shadow: 0 0 0 1px var(--line) inset; cursor: pointer; }
.sim-banco-btn:hover:not([disabled]) { color: var(--text); }
.sim-banco-btn[disabled] { opacity: 0.35; cursor: default; }
.sim-banco-btn svg { width: 16px; height: 16px; }
.sim-suelo.aprende .pulsador { animation: sim-late 1.1s ease-in-out infinite; }
@keyframes sim-late { 50% { box-shadow: 0 0 0 1px var(--live-green), 0 0 28px -6px var(--live-green); } }

.pulsador {
  display: grid; justify-items: center; gap: 10px; min-width: 0; padding: 14px 4px 18px; border: 0; border-radius: 12px;
  font: inherit; color: var(--text-3); cursor: pointer;
  background: linear-gradient(180deg, #212125, #141416); box-shadow: 0 0 0 1px var(--line), 0 14px 26px -16px #000;
  transition: box-shadow 0.3s, color 0.3s; -webkit-tap-highlight-color: transparent;
}
.pulsador:hover { color: var(--text); box-shadow: 0 0 0 1px var(--line-lit), 0 14px 26px -16px #000; }
.pulsador[aria-pressed="true"] { color: #FFFFFF; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 65%, transparent), 0 0 44px -14px var(--c), 0 14px 26px -16px #000; }
.pulsador-luz { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in srgb, var(--c) 26%, #101012); box-shadow: 0 0 0 2px #0A0A0B; transition: background 0.25s, box-shadow 0.25s; }
.pulsador[aria-pressed="true"] .pulsador-luz { background: var(--c); box-shadow: 0 0 0 2px #0A0A0B, 0 0 12px var(--c), 0 0 28px var(--c); }
.pulsador-nombre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--plate); font-size: clamp(8px, 1.05vw, 10.5px); letter-spacing: 0.12em; text-transform: uppercase; }
.pulsador-pie { width: clamp(34px, 5.4vw, 56px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #F4F6F9, #A6ABB2 42%, #50535A 72%, #26272A); box-shadow: 0 0 0 3px #0B0B0C, 0 0 0 5px #2E2E33, 0 9px 14px -4px #000; transition: transform 0.1s ease, box-shadow 0.1s ease; }
.pulsador:active .pulsador-pie, .pulsador.pisado .pulsador-pie { transform: translateY(2px) scale(0.93); box-shadow: 0 0 0 3px #0B0B0C, 0 0 0 5px #2E2E33, 0 3px 6px -2px #000; }

.sim-nota { max-width: 640px; margin: 16px auto 0; font-size: 13.5px; text-align: center; color: var(--text-4); text-wrap: pretty; }
.sim-nota a { color: var(--text-2); }

/* Pantalla completa: la ventana y la pedalera, solas. */
.sim:fullscreen { display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: none; margin: 0; padding: 16px; background: #050507; overflow: auto; }
.sim:fullscreen .sim-guia { display: none; }
.sim:fullscreen .sim-suelo { width: min(780px, 100%); margin-top: 16px; }
.sim:-webkit-full-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: none; width: 100%; height: 100%; margin: 0; padding: 16px; background: #050507; }

/* -- Lo que trae Live, debajo del simulador ---------------------------------- */
.sim-cierre { margin-top: clamp(56px, 7vw, 96px); }
.live-ventajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.live-ventajas li { padding: 22px 22px 24px; border-radius: var(--radio); background: linear-gradient(180deg, #17171A, #111113); box-shadow: 0 0 0 1px var(--line); }
.live-ventajas b { display: block; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; color: var(--silver-hi); }
.live-ventajas span { display: block; margin-top: 8px; font-size: 15px; color: var(--text-3); text-wrap: pretty; }
.sim-cierre .acciones { margin-top: 34px; }
.sim-cierre.encendido .boton-luz { animation: sim-llama 1.8s ease-in-out 2; }
@keyframes sim-llama { 50% { box-shadow: 0 0 0 1px var(--filament-hi), 0 0 60px -6px var(--filament); } }
/* .seguros y no .confianza: ese nombre ya es el de las tarjetas de descarga. */
.seguros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--text-3); }
.seguros li { display: inline-block; }
.seguros li[hidden] { display: none; }
.seguros li::before { content: ""; display: inline-block; width: 7px; height: 4px; margin-right: 9px; vertical-align: 0.25em; border-left: 2px solid var(--live-green); border-bottom: 2px solid var(--live-green); transform: rotate(-45deg); }
.seguros b { color: var(--text); font-weight: 600; }
.seguros a { color: var(--text-2); text-underline-offset: 3px; }

@media (max-width: 900px) {
  .live-ventajas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .sim-guia li { font-size: 12px; }
  .sim-ventana { border-radius: 8px; }
  .sim-titulo { height: 26px; font-size: 11px; }
  .sim-controles span { width: 34px; }

  /* En el telefono la ventana se ve entera pero pequena: los botones de modo
     y los paneles van a tamano de dedo. */
  .sim-mandos { display: flex; justify-content: center; gap: 8px; margin: 14px 0 0; }
  .sim-mandos button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; font-family: var(--plate); font-size: 9px; letter-spacing: 0.16em; color: var(--text-3); background: #151518; box-shadow: 0 0 0 1px var(--line) inset; cursor: pointer; }
  .sim-mandos button svg { width: 14px; height: 14px; }
  .sim-mandos button[aria-pressed="true"] { color: #FFFFFF; background: #26252C; box-shadow: 0 0 0 1px var(--line-lit) inset; }
  .sim-mandos [data-accion="afinador"][aria-pressed="true"] { color: #06120B; background: var(--live-green); box-shadow: none; }

  .sim-capa.abierta { position: fixed; z-index: 90; background: rgba(4, 4, 6, 0.62); }
  .sim-editor { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 86vh; overflow: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; }
  .sim-colores button { width: 24px; height: 24px; }
  .sim-iconos button { height: 42px; }
  .sim-acciones button { min-height: 44px; }
  .sim-menu { left: 12px !important; right: 12px; bottom: 12px; top: auto !important; }
  .sim-menu button { padding: 12px 10px; }
  .sim-dialogo { position: fixed; z-index: 91; background: transparent; }
  .sim-toast { bottom: 10px; font-size: 12.5px; }
  .sim-aprende { top: auto; bottom: 12px; position: fixed; z-index: 91; }
  .sim-capa:has(.sim-aprende) { background: transparent; pointer-events: none; }

  .live-ventajas { grid-template-columns: 1fr; }
  .live-ventajas li { padding: 18px; }
}

@media (max-width: 460px) {
  .pulsador { padding: 12px 2px 14px; gap: 8px; border-radius: 10px; }
  .pulsador-nombre { font-size: 8px; letter-spacing: 0.04em; }
  .sim-suelo-cab { font-size: 8px; letter-spacing: 0.1em; }
  .sim-suelo-cab > span:first-child { display: none; }
  .sim-suelo-banco { width: 100%; justify-content: space-between; }
}

/* Tus amplis, tus pedales, tus IR: tres tarjetas debajo del texto. */
.fuentes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.fuentes .tarjeta { background: linear-gradient(180deg, rgba(20, 15, 10, 0.92), rgba(12, 10, 8, 0.92)); box-shadow: 0 0 0 1px rgba(244, 131, 41, 0.22); }
.fuentes .tarjeta p { margin: 0; font-size: 15.5px; }
.fuentes .tarjeta .placa { font-size: 9.5px; line-height: 1.5; }

@media (max-width: 1080px) {
  .fuentes { grid-template-columns: 1fr; }
  .bloque-fuentes > img { display: none; }
}

/* Debajo de los botones de la portada. */
.hero-seguros { flex-basis: 100%; justify-content: flex-start; margin-top: 2px; }
@media (max-width: 900px) { .hero-seguros { justify-content: center; } }