/* LITTLETAPE — its product page (2026-11-02): BACKTAPE's product page (Backtape/Web/sitio/producto.css, see why there) in
   LITTLETAPE's own typeface, LittleTape Display, for headings, names, labels and prices (it has capitals only, so lower-case
   letters show as capitals). Keep the parts in step with BACKTAPE's file: the next products' pages are built from it too. */
@font-face { font-family: "Geist"; src: url("fonts/geist.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "LittleTape Display"; src: url("fonts/littletape-display.woff") format("woff"); font-weight: 400; font-display: swap; }

:root {
  --fondo: #08090b;
  --panel: #0e0f12;
  --panel-2: #131418;
  --blanco: #e4e5e3;
  --texto: #c4c5c2;
  --gris: #8a8b88;
  --gris-oscuro: #55575a;
  --linea: rgba(228, 229, 227, .12);
  --linea-fuerte: rgba(228, 229, 227, .3);
  --azul: #7cc0ec;
  --rojo: #ff4b3a;
  --rojo-hondo: #d93a2b;
  --tinta: #120706;
  --ui: "Geist", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --rotulo: "LittleTape Display", "Geist", "Segoe UI", system-ui, sans-serif;
  --margen: clamp(16px, 4vw, 56px);
  --ancho: 1120px;
  --ancho-grande: 1240px;
  --curva: cubic-bezier(.19, 1, .22, 1);
}
* { box-sizing: border-box; }
html { background: var(--fondo); overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 70px; }
body { margin: 0; color: var(--blanco); background: var(--fondo); font: 400 16px/1.6 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--azul); outline-offset: 4px; }
br.movil { display: none; }
.oculta-vista { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.envoltura { width: min(var(--ancho), 100% - 2 * var(--margen)); margin-inline: auto; position: relative; }
.envoltura.ancho { width: min(var(--ancho-grande), 100% - 2 * var(--margen)); }
.subrayado { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .8s var(--curva); }
.subrayado:hover { background-size: 0 1px; background-position: 100% 100%; }

/* film grain over everything; it never takes a click */
body::after { content: ""; position: fixed; inset: -60px; z-index: 90; pointer-events: none; background: url("img/grano.png") repeat; opacity: .08;
  mix-blend-mode: overlay; animation: grano .45s steps(5) infinite; }
@keyframes grano { 0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-23px, 17px, 0); } 40% { transform: translate3d(31px, -9px, 0); }
  60% { transform: translate3d(-11px, -29px, 0); } 80% { transform: translate3d(19px, 27px, 0); } }

/* ── what moves with the scroll (producto.js sets the numbers every frame: --h in the hero, --e as a block arrives and --s as it
   leaves, --p while a background passes). His Windows has animations off, so none of this asks prefers-reduced-motion. ── */
/* headings: each word rises out of its own mask, then the heading drifts sideways with the scroll */
.m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.js [data-palabras] .w { display: inline-block; transform: translate3d(0, 112%, 0) rotate(5deg); transform-origin: 0 100%;
  transition: transform 1.35s var(--curva) calc(var(--i) * 70ms); }
.js [data-palabras].visible .w { transform: none; }
/* blocks come out of the dark, and leave into it */
.js .mueve { opacity: calc(min(1, var(--e, 1) * 1.5) * (1 - var(--s, 0) * .75));
  transform: translate3d(0, calc((1 - var(--e, 1)) * 110px - var(--s, 0) * 50px), 0); will-change: transform, opacity; }
/* the plugin's screens stand up as they arrive, like a lid opening toward you */
.js .ventana.mueve { transform-origin: 50% 0;
  transform: perspective(1700px) translate3d(0, calc((1 - var(--e, 1)) * 140px), 0) rotateX(calc((1 - var(--e, 1)) * 26deg)) scale(calc(.84 + var(--e, 1) * .16 - var(--s, 0) * .06)); }
/* the ring cursor (a fine pointer only) */
.cursor { position: fixed; left: 0; top: 0; z-index: 95; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid #fff; border-radius: 50%;
  pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: width .6s var(--curva), height .6s var(--curva), margin .6s var(--curva), opacity .5s ease; }
.cursor.visible { opacity: 1; }
.cursor.grande { width: 72px; height: 72px; margin: -36px 0 0 -36px; }

/* ── words that work as buttons, and the one filled button ─────────────────────────────────────────────────────── */
.enlace { font: 400 13px/1 var(--rotulo); letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .6em;
  padding: 10px 0; color: var(--blanco); transition: color .4s ease; }
.enlace i { font-style: normal; transition: transform .6s var(--curva); }
.enlace:hover i { transform: translateX(5px); }
.enlace.rojo { color: var(--rojo); }
.enlace:hover { color: #fff; }
.enlace.rojo:hover { color: #ff6a5b; }

.boton-compra { display: flex; align-items: center; justify-content: center; gap: 22px; width: 100%; min-height: 62px; padding: 0 24px; white-space: nowrap;
  background: var(--rojo); color: var(--tinta); font: 400 19px/1 var(--rotulo); letter-spacing: .16em; text-transform: uppercase;
  transition: background .35s ease, transform .35s var(--curva), translate .7s var(--curva); position: relative; overflow: hidden; }
.boton-compra:hover { background: #ff624f; }
.boton-compra:active { transform: scale(.985); }
.boton-compra .bc-precio { padding-left: 22px; border-left: 1px solid rgba(18, 7, 6, .35); }
.boton-compra.hueco { background: transparent; color: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.boton-compra.hueco:hover { box-shadow: inset 0 0 0 1px var(--blanco); background: rgba(255, 255, 255, .03); }
.boton-compra.chico { width: auto; min-height: 44px; font-size: 14px; padding: 0 22px; }
.ahorro { display: inline-block; font: 400 11px/1 var(--rotulo); letter-spacing: .14em; text-transform: uppercase; padding: 6px 8px 5px;
  background: var(--blanco); color: var(--fondo); vertical-align: middle; }

/* ── the strip on top and the header ──────────────────────────────────────────────────────────────────────────────── */
.aviso { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 30px); flex-wrap: wrap; min-height: 42px; padding: 8px var(--margen);
  background: #000; border-bottom: 1px solid var(--linea); font-size: 13px; color: var(--texto); position: relative; z-index: 30; }
.aviso-etq { font: 400 12px/1 var(--rotulo); letter-spacing: .22em; text-transform: uppercase; color: var(--blanco); }
.aviso-precio b { color: var(--blanco); font-weight: 600; }
.aviso s, .opcion-precio s, .tira-precio s, .plan-precio s, .barra-movil s { color: var(--gris-oscuro); margin-left: .4em; }
.aviso-cuenta b { color: var(--azul); font-weight: 500; font-variant-numeric: tabular-nums; }
.aviso-enlace { color: var(--blanco); border-bottom: 1px solid var(--linea-fuerte); padding-bottom: 2px; }
.aviso-enlace:hover { border-color: var(--blanco); }

.cabecera { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 28px; height: 66px; padding: 0 var(--margen);
  transition: background .5s ease, border-color .5s ease; border-bottom: 1px solid transparent; }
.cabecera.solida { background: rgba(8, 9, 11, .94); border-color: var(--linea); }
.marca { display: inline-flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.marca b { font: 400 18px/1 var(--rotulo); letter-spacing: .2em; }
.marca span { font-size: 12px; color: var(--gris); letter-spacing: .02em; }
.menu { display: flex; gap: clamp(16px, 2.2vw, 34px); margin-left: auto; }
.menu a { font-size: 14px; color: var(--texto); transition: color .3s ease; }
.menu a:hover, .menu a.encendida { color: var(--blanco); }
.menu a.encendida { text-shadow: 0 0 14px rgba(124, 192, 236, .55); }
.derecha { display: flex; align-items: center; gap: 22px; }
@media (max-width: 980px) { .menu { display: none; } .derecha { margin-left: auto; } .marca span { display: none; } }

/* ── the hero: the plugin and the buy box ─────────────────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(30px, 5vw, 64px) var(--margen) clamp(70px, 9vw, 120px); margin-top: -66px; padding-top: calc(66px + clamp(30px, 5vw, 64px)); isolation: isolate; }
.hero-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .95; transform: translate3d(0, calc(var(--h, 0) * 160px), 0) scale(calc(1.04 + var(--h, 0) * .14)); }
.hero-fondo::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(95% 75% at 50% 30%, rgba(8, 9, 11, .2), rgba(8, 9, 11, .8) 80%), linear-gradient(rgba(8, 9, 11, .35), rgba(8, 9, 11, 0) 30%, rgba(8, 9, 11, 0) 60%, var(--fondo)); }
.hero-cabeza { text-align: center; max-width: 980px; margin: 0 auto; transform: translate3d(0, calc(var(--h, 0) * -180px), 0); opacity: calc(1 - var(--h, 0) * 1.25); }
.hero-marca { font: 400 clamp(20px, 2.4vw, 30px)/1 var(--rotulo); letter-spacing: .5em; margin-right: -.5em; color: var(--blanco); opacity: .9; }
.hero-titulo { font: 400 clamp(40px, 6.3vw, 92px)/1 var(--rotulo); white-space: nowrap; word-spacing: calc(var(--h, 0) * .5em); text-transform: uppercase; letter-spacing: .015em; color: #dcdedd; margin-top: 18px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
.hero-linea { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--texto); max-width: 560px; margin: 20px auto 0; }
.hero-cuerpo { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  width: min(var(--ancho-grande), 100%); margin: clamp(34px, 5vw, 60px) auto 0; }
.hero-plugin { perspective: 2000px; }
.hero-plugin img { width: 100%; transform-origin: 70% 50%;
  transform: rotateY(calc(11deg * (1 - var(--h2, 0)))) rotateX(calc(4deg * (1 - var(--h2, 0)))) rotateZ(calc(-.6deg * (1 - var(--h2, 0)))) scale(calc(1 + var(--h2, 0) * .07));
  filter: drop-shadow(0 40px 46px rgba(0, 0, 0, .75)); -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }

.compra { position: relative; transform: translate3d(0, calc(var(--h, 0) * -70px), 0); }
.compra-etq, .reloj-etq, .etq { font: 400 12px/1 var(--rotulo); letter-spacing: .3em; text-transform: uppercase; color: var(--gris); text-align: center; }
.opciones { display: grid; gap: 12px; margin-top: 16px; }
.opcion { position: relative; display: grid; grid-template-columns: 22px 1fr auto; grid-template-areas: "punto nombre precio" "punto sub precio"; column-gap: 16px;
  align-items: center; text-align: left; padding: 18px 20px; background: rgba(10, 11, 13, .82); box-shadow: inset 0 0 0 1px var(--linea);
  transition: box-shadow .4s ease, background .4s ease; }
.opcion:hover { box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.opcion.activa { box-shadow: inset 0 0 0 1px rgba(228, 229, 227, .62); background: rgba(16, 17, 20, .92); }
.punto { grid-area: punto; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linea-fuerte); position: relative; }
.opcion.activa .punto { box-shadow: inset 0 0 0 1px var(--blanco); }
.opcion.activa .punto::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 10px rgba(255, 75, 58, .8); }
.opcion-nombre { grid-area: nombre; font: 400 17px/1.1 var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--blanco); }
.opcion-sub { grid-area: sub; font-size: 13px; color: var(--gris); margin-top: 4px; line-height: 1.4; }
.opcion-precio { grid-area: precio; text-align: right; display: grid; justify-items: end; }
.opcion-precio b { font: 400 30px/1 var(--rotulo); color: var(--blanco); font-weight: 400; }
.opcion-precio s { margin: 4px 0 0; font: 400 14px/1 var(--rotulo); }
.opcion-sello { position: absolute; right: 14px; top: 0; transform: translateY(-50%); font: 400 10.5px/1 var(--rotulo); letter-spacing: .2em;
  text-transform: uppercase; padding: 6px 9px 5px; background: var(--blanco); color: var(--fondo); }

.reloj { margin-top: 22px; }
.reloj-etq { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--blanco); }
.reloj-cajas { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.reloj-cajas div { width: 66px; padding: 10px 0 8px; text-align: center; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--linea); }
.reloj-cajas b { display: block; font: 400 30px/1 var(--rotulo); color: var(--azul); font-variant-numeric: tabular-nums; font-weight: 400;
  text-shadow: 0 0 16px rgba(124, 192, 236, .35); }
.reloj-cajas small { display: block; margin-top: 7px; font: 400 9.5px/1 var(--rotulo); letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.compra .boton-compra { margin-top: 22px; }
.compra-pie { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-size: 13px; color: var(--texto); }
.compra-nota { text-align: center; font-size: 12px; color: var(--gris); margin-top: 6px; }

/* ── a section ────────────────────────────────────────────────────────────────────────────────────────────────────── */
.bloque { position: relative; padding: clamp(84px, 11vw, 160px) 0 0; }
.titulo { font: 400 clamp(34px, 5.6vw, 76px)/1.02 var(--rotulo); text-transform: uppercase; letter-spacing: .01em; color: #dcdedd; text-align: center;
  text-wrap: balance; }
.titulo.izq { text-align: left; font-size: clamp(28px, 2.9vw, 42px); }
.titulo.segundo { margin-top: 56px; }
.intro { font-size: clamp(16px, 1.4vw, 18px); color: var(--texto); text-align: center; max-width: 640px; margin: 20px auto 0; text-wrap: pretty; }
.intro.izq { text-align: left; margin-left: 0; }
.etq { display: block; }
.mas { text-align: center; margin-top: 30px; }
.mas.izq { text-align: left; }

/* the real screen, framed as the plugin window it is */
.ventana { position: relative; margin-top: clamp(36px, 5vw, 64px); }
.ventana img { width: 100%; }
.ventana.cara img { filter: drop-shadow(0 36px 44px rgba(0, 0, 0, .7)); -webkit-mask-image: linear-gradient(#000 90%, transparent); mask-image: linear-gradient(#000 90%, transparent); }
.ventana.pantalla img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 9%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 9%, #000 88%, transparent);
  mask-composite: intersect; }
.ventana.grande { max-width: 1040px; margin-inline: auto; }
.ventana.cambia img { transition: opacity .45s ease; }
.ventana.cambia img.saliendo { opacity: .15; }

/* tabs under a screen: a line on top, a plus, a name, one sentence */
.pestanas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 clamp(14px, 2vw, 28px); margin: clamp(30px, 4vw, 48px) auto 0; max-width: 1120px; }
.pestana { text-align: left; padding: 16px 0 0; border-top: 1px solid var(--linea); color: var(--gris); transition: color .4s ease, border-color .4s ease; display: block; }
.pestana b { display: block; font: 400 14px/1.2 var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); transition: color .4s ease; }
.pestana b::before { content: "+"; display: inline-block; margin-right: 10px; transition: transform .5s var(--curva); }
.pestana span { display: block; font-size: 13.5px; line-height: 1.5; margin-top: 8px; }
.pestana:hover b, .pestana.activa b { color: var(--blanco); }
.pestana.activa { border-color: var(--blanco); color: var(--texto); }
.pestana.activa b::before { transform: rotate(45deg); color: var(--rojo); }
.pestanas.fijas .pestana { color: var(--texto); border-top: 0; padding-top: 0; }
.pestanas.fijas .pestana b { color: var(--blanco); margin-top: 12px; }
.pestanas.fijas .pestana b::before { content: none; }
.pestanas.fijas canvas { display: block; width: 100%; height: 56px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
@media (max-width: 860px) {
  .pestanas { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
  .pestana { padding: 14px 0; }
  .pestanas:not(.fijas) .pestana:not(.activa) span { display: none; }
  .pestanas.fijas { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
}

/* ── the player: a row for every preset ──────────────────────────────────────────────────────────────────────────── */
.escuchar-ventana { max-width: 1100px; margin-inline: auto; }
.escuchar-ventana img { transition: opacity .5s ease; }
.escuchar-ventana img.saliendo { opacity: .2; }
.escuchar-pie { display: flex; align-items: baseline; gap: 14px; margin-top: 16px; }
.escuchar-cat { font: 400 11px/1 var(--rotulo); letter-spacing: .24em; text-transform: uppercase; color: var(--gris); }
.escuchar-nombre { font: 400 18px/1 var(--rotulo); letter-spacing: .12em; text-transform: uppercase; font-weight: 400; }
.pestanas-loop { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 26px; margin: 40px auto 6px; }
.pestanas-loop button { font: 400 12.5px/1 var(--rotulo); letter-spacing: .2em; text-transform: uppercase; color: var(--gris); padding: 10px 0;
  border-bottom: 1px solid transparent; transition: color .3s ease, border-color .3s ease; }
.pestanas-loop button small { color: var(--gris-oscuro); margin-left: .5em; font: inherit; }
.pestanas-loop button:hover { color: var(--blanco); }
.pestanas-loop button.activo { color: var(--blanco); border-color: var(--azul); }
.filas-demo { max-width: 920px; margin: 10px auto 0; border-top: 1px solid var(--linea); }
.fila { display: grid; grid-template-columns: minmax(150px, 220px) 34px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 4px;
  border-bottom: 1px solid var(--linea); transition: background .4s ease; }
.fila.elegida { background: rgba(255, 255, 255, .025); }
.fila-nombre { min-width: 0; }
.fila-nombre b { display: block; font: 400 14px/1.2 var(--rotulo); letter-spacing: .14em; text-transform: uppercase; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-cadena { display: flex; gap: 3px; margin-top: 8px; }
.fila-cat { display: block; margin-top: 7px; font: 400 10.5px/1 var(--rotulo); letter-spacing: .22em; text-transform: uppercase; color: var(--gris); }
.fila-cadena i { height: 2px; flex: 1; max-width: 26px; background: rgb(var(--c)); opacity: .85; }

/* play: a mark, no disc, no box */
.tocar { width: 34px; height: 34px; display: grid; place-items: center; color: var(--rojo); }
.tocar i { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; transition: transform .3s var(--curva); }
.tocar:hover i { transform: scale(1.15); }
.tocar.sonando i { width: 12px; height: 14px; border: 0; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px); }
.onda { display: block; width: 100%; height: 38px; cursor: pointer; }

/* Dry / BACKTAPE: two words, the one you hear is lit */
.ab { display: flex; gap: 2px; font: 400 11.5px/1 var(--rotulo); letter-spacing: .16em; text-transform: uppercase; }
.ab button { text-transform: inherit; letter-spacing: inherit; padding: 9px 10px 8px; color: var(--gris-oscuro); box-shadow: inset 0 -1px 0 transparent; transition: color .3s ease, box-shadow .3s ease; }
.ab button:hover { color: var(--texto); }
.ab button.activo { color: var(--blanco); box-shadow: inset 0 -1px 0 var(--blanco); }
.ab button.activo[data-ab="fx"] { color: var(--azul); box-shadow: inset 0 -1px 0 var(--azul); }
@media (max-width: 700px) {
  .fila { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "nombre nombre nombre" "tocar onda ab"; gap: 10px 12px; }
  .fila-nombre { grid-area: nombre; } .fila .tocar { grid-area: tocar; } .fila .onda { grid-area: onda; } .fila .ab { grid-area: ab; }
}

/* ── the hosts ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.daw { padding-top: clamp(60px, 7vw, 100px); }
.daw-panel { max-width: 920px; margin: 0 auto; padding: 26px clamp(18px, 3vw, 40px) 22px; box-shadow: inset 0 0 0 1px var(--linea);
  background: radial-gradient(rgba(228, 229, 227, .09) 1px, transparent 1.3px) 0 0 / 14px 14px, var(--panel); text-align: center; }
.daw-logos { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 22px clamp(28px, 4.4vw, 58px); margin-top: 24px; }
.daw-logos li { opacity: .82; transition: opacity .4s ease; }
.daw-logos li:hover { opacity: 1; }
.daw-logos img { width: auto; height: 30px; }
.daw-logos .l-ableton img { height: 26px; }
.daw-logos .l-cubase img { height: 26px; }
.daw-logos .l-reaper img { height: 34px; }
.daw-logos .l-bitwig img { height: 42px; }
@media (max-width: 600px) { .daw-logos { gap: 20px 26px; } .daw-logos img { height: 23px; } .daw-logos .l-ableton img { height: 20px; }
  .daw-logos .l-cubase img { height: 20px; } .daw-logos .l-reaper img { height: 27px; } .daw-logos .l-bitwig img { height: 34px; } }
.daw-pie { font-size: 12.5px; color: var(--gris); margin-top: 16px; }

/* ── the pedals: one on the stage, big, in its own light; the whole row underneath to choose ─────────────────────── */
.escenario { --c: 224, 72, 76; position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center;
  gap: clamp(20px, 4vw, 60px); margin-top: clamp(30px, 4vw, 50px); min-height: clamp(380px, 40vw, 560px); isolation: isolate; }
.escenario::before { content: attr(data-nombre); position: absolute; left: 50%; top: 50%; z-index: -2; white-space: nowrap; pointer-events: none;
  font: 400 clamp(110px, 19vw, 300px)/1 var(--rotulo); letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1px rgba(var(--c), .16);
  transform: translate(calc(-50% + var(--deriva, 0px)), -50%); transition: -webkit-text-stroke-color .8s ease; }
.escenario-foto { position: relative; }
.escenario-foto::before { content: ""; position: absolute; inset: -6% -4%; z-index: -1; background: radial-gradient(closest-side, rgba(var(--c), .34), rgba(var(--c), .08) 55%, transparent);
  transition: background .9s ease; }
.escenario-img { width: 100%; filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .7)); transition: opacity .55s ease, transform 1s var(--curva), filter .7s ease; }
.escenario-img.saliendo { opacity: 0; transform: translate3d(-40px, 0, 0) scale(.96) rotate(-2deg); filter: blur(6px); }
.escenario-img.entrando { opacity: 0; transform: translate3d(50px, 0, 0) scale(.96) rotate(2deg); filter: blur(6px); transition: none; }
.escenario-texto { transition: opacity .45s ease, transform .7s var(--curva); }
.escenario-texto.cambia { opacity: 0; transform: translate3d(0, 14px, 0); transition: none; }
.escenario-tipo { font: 400 12px/1 var(--rotulo); letter-spacing: .3em; text-transform: uppercase; color: var(--gris); }
.escenario-nombre { font: 400 clamp(46px, 6.4vw, 96px)/1 var(--rotulo); letter-spacing: .06em; color: rgb(var(--c)); margin-top: 14px; font-weight: 400;
  text-shadow: 0 0 40px rgba(var(--c), .35); transition: color .6s ease; }
.escenario-desc { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--texto); margin-top: 18px; max-width: 460px; }
.escenario-demo { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 30px; padding: 14px 0;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); max-width: 520px; }
.escenario-demo .onda { height: 46px; }
.escenario-nota { font-size: 12.5px; color: var(--gris); margin-top: 12px; }
.selector { display: flex; justify-content: center; gap: 6px; margin: clamp(30px, 4vw, 50px) auto 0; padding: 18px 4px 6px; overflow-x: auto; scrollbar-width: none; }
.selector::-webkit-scrollbar { display: none; }
.sel { --c: 228, 229, 227; position: relative; flex: 0 0 auto; width: 58px; padding: 0 0 12px; opacity: .42; filter: saturate(.55);
  transition: opacity .4s ease, filter .4s ease, transform .6s var(--curva); }
.sel img { width: 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.sel::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px; background: rgb(var(--c)); box-shadow: 0 0 10px rgba(var(--c), .9);
  transform: scaleX(0); transition: transform .6s var(--curva); }
.sel:hover { opacity: .85; filter: none; transform: translateY(-6px); }
.sel.activa { opacity: 1; filter: none; transform: translateY(-12px) scale(1.08); }
.sel.activa::after { transform: none; }
@media (max-width: 900px) {
  .escenario { grid-template-columns: minmax(0, 1fr); min-height: 0; text-align: center; }
  .escenario-desc, .escenario-demo { margin-left: auto; margin-right: auto; }
  .escenario-demo { text-align: left; }
  .selector { justify-content: flex-start; }
}

/* ── the short buy strip between chapters ─────────────────────────────────────────────────────────────────────────── */
.tira { padding-top: clamp(84px, 10vw, 140px); }
.tira-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px clamp(24px, 5vw, 70px); max-width: 920px; margin: 0 auto;
  padding: 28px clamp(20px, 4vw, 48px); box-shadow: inset 0 0 0 1px var(--linea);
  background: radial-gradient(rgba(228, 229, 227, .08) 1px, transparent 1.3px) 0 0 / 14px 14px, var(--panel); }
.tira-izq { text-align: center; padding-right: clamp(0px, 3vw, 40px); border-right: 1px solid var(--linea); }
.tira-marca { font: 400 22px/1 var(--rotulo); letter-spacing: .3em; }
.tira-marca span { display: block; font-size: 10.5px; letter-spacing: .3em; color: var(--gris); margin-top: 8px; text-transform: uppercase; }
.tira-precio { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.tira-precio b { font: 400 40px/1 var(--rotulo); font-weight: 400; }
.tira-precio s { font: 400 16px/1 var(--rotulo); margin: 0; }
.tira-cuenta { font-size: 13px; color: var(--gris); margin-top: 12px; }
.tira-cuenta b { color: var(--azul); font-weight: 500; font-variant-numeric: tabular-nums; }
.tira-der { display: grid; justify-items: center; gap: 8px; }
@media (max-width: 760px) { .tira-panel { grid-template-columns: 1fr; } .tira-izq { border-right: 0; padding-right: 0; } }

/* ── a screen beside a list ───────────────────────────────────────────────────────────────────────────────────────── */
.partido { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.partido .ventana { margin-top: 0; }
.partido.al-reves { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
.partido-texto .intro { margin-top: 18px; }
.filas { margin-top: 26px; border-top: 1px solid var(--linea); }
.filas li { padding: 15px 0; border-bottom: 1px solid var(--linea); color: var(--texto); font-size: 15px; line-height: 1.55; }
.filas b { color: var(--blanco); font-weight: 600; }
.dibujo img { width: 100%; opacity: .9; }
@media (max-width: 900px) { .partido, .partido.al-reves { grid-template-columns: minmax(0, 1fr); } .dibujo { max-width: 520px; margin: 0 auto; } }

/* ── the plans ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.precio { isolation: isolate; padding-bottom: clamp(30px, 4vw, 60px); }
.precio-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.precio-fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .32; transform: translate3d(0, calc(var(--p, 0) * 90px), 0) scale(1.14); }
.precio-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--fondo), rgba(8, 9, 11, .55) 30%, rgba(8, 9, 11, .7) 70%, var(--fondo)); }
.precio .hero-marca { text-align: center; font-size: clamp(16px, 1.8vw, 22px); margin-bottom: 14px; }
.planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); max-width: 920px; margin-top: clamp(40px, 5vw, 64px); }
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 3vw, 34px); background: rgba(14, 15, 18, .9); box-shadow: inset 0 0 0 1px var(--linea); }
.plan.principal { box-shadow: inset 0 0 0 1px rgba(255, 75, 58, .55); background: linear-gradient(rgba(255, 75, 58, .06), rgba(255, 75, 58, 0) 40%), rgba(14, 15, 18, .94); }
.plan figure img { width: 100%; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .7)); -webkit-mask-image: linear-gradient(#000 90%, transparent); mask-image: linear-gradient(#000 90%, transparent); }
.plan h3 { font: 400 clamp(24px, 2.6vw, 32px)/1 var(--rotulo); letter-spacing: .12em; text-transform: uppercase; margin-top: 26px; font-weight: 400; }
.plan-sub { color: var(--gris); font-size: 14px; margin-top: 8px; }
.plan-precio { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.plan-precio b { font: 400 46px/1 var(--rotulo); font-weight: 400; }
.plan-precio s { font: 400 18px/1 var(--rotulo); margin: 0; }
.plan-nota { font-size: 13px; color: var(--gris); margin-top: 12px; line-height: 1.5; }
.plan-nota b { color: var(--azul); font-weight: 500; font-variant-numeric: tabular-nums; }
.plan-sello { position: absolute; right: 20px; top: 0; transform: translateY(-50%); font: 400 11px/1 var(--rotulo); letter-spacing: .22em; text-transform: uppercase;
  padding: 7px 10px 6px; background: var(--rojo); color: var(--tinta); z-index: 1; }
.incluye { margin: 22px 0 26px; border-top: 1px solid var(--linea); flex: 1; }
.incluye li { position: relative; padding: 11px 0 11px 24px; border-bottom: 1px solid var(--linea); font-size: 14px; color: var(--texto); line-height: 1.45; }
.incluye li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 9px; height: 5px; border-left: 1px solid var(--azul); border-bottom: 1px solid var(--azul); transform: rotate(-45deg); }
.plan .boton-compra { margin-top: auto; }
@media (max-width: 760px) { .planes { grid-template-columns: minmax(0, 1fr); } }

.lista { max-width: 620px; margin: 46px auto 0; text-align: center; }
.lista-texto { font-size: 14px; color: var(--texto); }
.lista-campo { display: flex; gap: 18px; align-items: center; margin-top: 14px; border-bottom: 1px solid var(--linea-fuerte); }
.lista-campo input[type="email"] { flex: 1; min-width: 0; background: none; border: 0; color: var(--blanco); font: 400 16px/1 var(--ui); padding: 14px 0; outline: none; }
.lista-campo input::placeholder { color: var(--gris); }
.trampa { position: absolute; left: -9999px; }
.lista-estado { min-height: 1.5em; font-size: 13px; color: var(--azul); margin-top: 10px; }
.lista.en-lista .lista-campo { display: none; }

.garantias { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 0; margin: 50px auto 0; max-width: 1180px; }
.garantias li { display: inline-flex; align-items: center; gap: 10px; padding: 0 clamp(10px, 1.4vw, 18px); font-size: 13.5px; color: var(--texto); border-left: 1px solid var(--linea); }
.garantias li:first-child { border-left: 0; }
.garantias svg { width: 18px; height: 18px; fill: none; stroke: var(--azul); stroke-width: 1.4; stroke-linecap: square; }

/* ── questions and the spec sheet ─────────────────────────────────────────────────────────────────────────────────── */
.faq-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.faq { margin-top: 28px; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; font-size: 15px; font-weight: 500; color: var(--blanco); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gris); font-weight: 300; font-size: 20px; line-height: 1; transition: transform .5s var(--curva), color .3s ease; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--rojo); }
.faq details p { padding: 0 0 20px; color: var(--texto); font-size: 14.5px; max-width: 560px; }
.ficha { padding: clamp(22px, 3vw, 32px); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--linea);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.ficha-titulo { font: 400 clamp(26px, 2.8vw, 36px)/1 var(--rotulo); text-transform: uppercase; letter-spacing: .04em; font-weight: 400; }
.ficha-so { margin-top: 22px; font-size: 13.5px; color: var(--texto); line-height: 1.7; }
.ficha-so-nombre { font: 400 13px/1 var(--rotulo); letter-spacing: .2em; text-transform: uppercase; color: var(--blanco); margin-bottom: 8px; }
.ficha-filas { margin-top: 22px; border-top: 1px solid var(--linea); }
.ficha-filas div { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--linea); font-size: 13.5px; }
.ficha-filas div:last-child { border-bottom: 0; }
.ficha-filas dt { color: var(--gris); }
.ficha-filas dd { color: var(--blanco); text-align: right; }
.faq-col .ficha + .faq { margin-top: 34px; }
@media (max-width: 900px) { .faq-rejilla { grid-template-columns: minmax(0, 1fr); } }

/* ── the footer ────────────────────────────────────────────────────────────────────────────────────────────────────── */
.pie { position: relative; isolation: isolate; margin-top: clamp(90px, 12vw, 170px); padding: clamp(90px, 12vw, 160px) 0 40px; overflow: hidden; }
.pie-fondo-img { position: absolute; inset: 0; z-index: -1; }
.pie-fondo-img img { width: 100%; height: 100%; object-fit: cover; opacity: .5; transform: translate3d(0, calc(var(--p, 0) * 110px), 0) scale(calc(1.16 - var(--e, 1) * .06)); }
.pie-fondo-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--fondo), rgba(8, 9, 11, .5) 45%, rgba(8, 9, 11, .92)); }
.pie-grande { display: block; text-align: center; font: 400 clamp(38px, 7vw, 100px)/1 var(--rotulo); text-transform: uppercase; letter-spacing: .01em; color: #dcdedd;
  transition: color .4s ease; }
.pie-grande:hover { color: #fff; }
.pie-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 26px; margin-top: clamp(70px, 9vw, 120px); padding-top: 30px; border-top: 1px solid var(--linea); }
.pie-grid div { display: grid; gap: 8px; align-content: start; }
.pie-grid div a { font-size: 14px; color: var(--texto); }
.pie-grid div a:hover { color: var(--blanco); }
.pie-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 46px; font-size: 12px; color: var(--gris-oscuro); }
@media (max-width: 760px) { .pie-grid { grid-template-columns: 1fr 1fr; } }

/* ── the phone's buy bar ───────────────────────────────────────────────────────────────────────────────────────────── */
.barra-movil { display: none; }
@media (max-width: 760px) {
  .barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom)); background: #000; border-top: 1px solid var(--linea);
    transform: translateY(110%); transition: transform .6s var(--curva); }
  .barra-movil.visible { transform: none; }
  .bm-texto b { font: 400 14px/1 var(--rotulo); letter-spacing: .2em; font-weight: 400; margin-right: 8px; }
  .bm-texto { font-size: 15px; }
  body { padding-bottom: 66px; }
}

/* ── the hero on narrow screens ───────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-cuerpo { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .hero-plugin img { transform: none; }
  .aviso { font-size: 12px; gap: 6px 14px; }
  .aviso-precio, .aviso-enlace { display: none; }
}

/* ── the cable down the page: a hairline that leaves the plugin and runs between the chapters, a light on it with the scroll ── */
.cable { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.cable-linea { fill: none; stroke: rgba(228, 229, 227, .16); stroke-width: 1; }
.cable-luz { fill: none; stroke: var(--azul); stroke-width: 1.4; filter: drop-shadow(0 0 4px rgba(124, 192, 236, .9)); }
@media (max-width: 1180px) { .cable { display: none; } }

/* a gift link: the band on top */
.regalo { position: relative; z-index: 31; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 14px var(--margen);
  background: #10141a; border-bottom: 1px solid rgba(124, 192, 236, .35); font-size: 14px; color: var(--texto); }
.regalo b { color: var(--blanco); }

/* ── phones ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  br.movil { display: inline; }
  .derecha .enlace:not(.rojo) { display: none; }
  .derecha .enlace { white-space: nowrap; }
  .boton-compra { font-size: 15px; letter-spacing: .12em; gap: 14px; padding: 0 16px; }
  .boton-compra .bc-precio { padding-left: 14px; }
  .garantias { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .garantias li { border-left: 0; padding: 0; }
}

/* ── the "Every pedal" page: the same stage for every pedal (alternating sides), then its knobs as rows and its switches beside ── */
.intro-fichas { text-align: center; padding-top: clamp(50px, 7vw, 100px); }
.intro-fichas .hero-marca { font-size: clamp(16px, 1.8vw, 22px); margin-bottom: 16px; }
.intro-fichas h1.titulo { font-size: clamp(36px, 5.6vw, 80px); }
.intro-enlaces { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 34px; margin-top: 24px; }
.selector.indice { width: min(var(--ancho-grande), 100% - 2 * var(--margen)); margin-top: clamp(30px, 4vw, 48px); }
.selector.indice .sel { display: block; }
.pedal-ficha { padding-top: clamp(90px, 10vw, 150px); }
.escenario.al-reves .escenario-foto { order: 2; }
.pedal-ficha h2.escenario-nombre { font-size: clamp(46px, 6.4vw, 96px); }
.ficha-datos { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(30px, 5vw, 70px); align-items: start; margin-top: clamp(40px, 5vw, 70px); }
.ficha-datos .etq { text-align: left; color: rgb(var(--c)); font-weight: 400; }
.ficha-datos .nota { font-size: 13px; color: var(--gris); margin-top: 8px; }
.perillas-lista { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--linea); }
.perillas-lista li { display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 26px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.perillas-lista .num { font: 400 22px/1 var(--rotulo); color: rgb(var(--c)); padding-top: 2px; }
.perillas-lista b { display: block; font: 400 14px/1.2 var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--blanco); font-weight: 400; }
.perillas-lista .shift b { color: var(--gris); }
.perillas-lista p { font-size: 14px; line-height: 1.55; color: var(--texto); margin-top: 8px; }
.lado { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.bloque-ficha { padding: 20px 0; border-bottom: 1px solid var(--linea); }
.bloque-ficha > p { font-size: 14px; line-height: 1.55; color: var(--texto); margin-top: 10px; }
.opciones-lista { display: flex; flex-wrap: wrap; gap: 4px 0; font: 400 12px/1.6 var(--rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--blanco); }
.opciones-lista span + span::before { content: "·"; margin: 0 .7em; color: var(--gris-oscuro); }
.lista-ficha { margin-top: 10px; }
.lista-ficha li { position: relative; padding: 6px 0 6px 16px; font-size: 14px; line-height: 1.55; color: var(--texto); }
.lista-ficha li::before { content: ""; position: absolute; left: 0; top: 15px; width: 6px; height: 1px; background: rgb(var(--c)); }
.lista-ficha b { color: var(--blanco); font-weight: 600; }
@media (max-width: 900px) {
  .escenario.al-reves .escenario-foto { order: 0; }
  .ficha-datos { grid-template-columns: minmax(0, 1fr); }
  .perillas-lista li { grid-template-columns: 30px minmax(0, 1fr); }
  .perillas-lista .shift { grid-column: 2; }
}

/* LITTLETAPE has one plan: the card stands alone in the middle */
.planes.solo { grid-template-columns: minmax(0, 480px); justify-content: center; }
.mas { color: var(--texto); font-size: 15px; }
.mas .enlace { margin-left: 10px; }
/* LITTLETAPE's face has its cables going up out of the picture: they fade upward instead of the bottom edge */
.hero-plugin img, .ventana.cara img { -webkit-mask-image: linear-gradient(transparent, #000 16%); mask-image: linear-gradient(transparent, #000 16%); }
.hero-plugin img { transform-origin: 50% 60%; }

/* the live face in the hero: the plugin's plate and, over it in its own perspective, what the plugin draws (pantalla.js) */
.hero-plugin .cara-viva { position: relative; max-width: 600px; margin-inline: auto; transform-origin: 50% 60%;
  transform: rotateY(calc(9deg * (1 - var(--h2, 0)))) rotateX(calc(4deg * (1 - var(--h2, 0)))) scale(calc(1 + var(--h2, 0) * .05)); }
.hero-plugin .cara-viva img.cara-placa { transform: none; filter: drop-shadow(0 40px 46px rgba(0, 0, 0, .75)); }
.cara-viva > canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.cara-pantalla, .cara-nombre, .cara-valor { mix-blend-mode: screen; }
.cara-medidor, .cara-ranura, .cara-capuchon { position: absolute; pointer-events: none; }
.cara-medidor { background: url("img/medidor.png") 0 0 / 100% 100% no-repeat; clip-path: inset(0 100% 0 0); }
.cara-ranura { background: url("img/ranura.png") 0 0 / 100% 100% no-repeat; }
.cara-capuchon { background-image: url("img/capuchon.png"); background-repeat: no-repeat; }

/* the playable face beside the demo rows: press its screen for the next sound, BYPASS to hear the dry loop */
.demo-viva { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 60px); align-items: center; margin-top: clamp(30px, 4vw, 50px); }
.demo-viva .filas-demo { max-width: none; margin-top: 0; }
.demo-viva .pestanas-loop { margin-top: 0; }
.cara-demo { margin: 0; }
.cara-demo .cara-viva { position: relative; max-width: 560px; margin-inline: auto; }
.cara-demo .cara-placa { width: 100%; filter: drop-shadow(0 36px 44px rgba(0, 0, 0, .75));
  -webkit-mask-image: linear-gradient(transparent, #000 16%); mask-image: linear-gradient(transparent, #000 16%); }
.cara-boton { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: transparent; border: 0; cursor: pointer; }
.cara-boton:focus-visible { outline: 1px solid var(--azul); }
.cara-viva .cara-pantalla, .cara-viva .cara-nombre { transition: opacity .35s ease; }
.cara-viva.en-bypass .cara-pantalla, .cara-viva.en-bypass .cara-nombre, .cara-viva.en-bypass .cara-ranura { opacity: .28; }
.cara-mandos { display: flex; justify-content: center; align-items: center; gap: 34px; margin-top: 14px; }
.cara-pista { font: 400 12px/1 var(--rotulo); letter-spacing: .3em; text-transform: uppercase; color: var(--rojo); animation: pista 2.4s ease-in-out infinite; }
@keyframes pista { 50% { opacity: .35; } }
.bypass { display: inline-flex; align-items: center; gap: 10px; padding: 10px 0; font: 400 13px/1 var(--rotulo); letter-spacing: .24em; text-transform: uppercase;
  color: var(--gris); transition: color .3s ease; }
.bypass i { width: 9px; height: 9px; border-radius: 50%; background: #3a1512; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background .3s ease, box-shadow .3s ease; }
.bypass:hover { color: var(--blanco); }
.bypass[aria-pressed="true"] { color: var(--blanco); }
.bypass[aria-pressed="true"] i { background: var(--rojo); box-shadow: 0 0 10px rgba(255, 75, 58, .9); }
@media (max-width: 900px) { .demo-viva { grid-template-columns: minmax(0, 1fr); } .cara-demo .cara-viva { max-width: 480px; } }

/* the way back to the company's page: "by LABSICK EMPIRE" in the header, on phones too (under the product's name) */
.marca-casa { font-size: 12px; color: var(--gris); letter-spacing: .02em; border-bottom: 1px solid transparent; transition: color .3s ease, border-color .3s ease; }
.marca-casa:hover { color: var(--blanco); border-color: var(--linea-fuerte); }
@media (max-width: 980px) { .cabecera .marca { flex-direction: column; align-items: flex-start; gap: 5px; } .cabecera .marca-casa { font-size: 11px; } }