/* =====================================================================
   ritloop.app — la landing (/ en inglés, /es/ en español)

   LA FRASE: «La web es la pantalla del reproductor de RitLoop en Nocturno,
   sonando "Quedo en la mar": todo lo que se mueve va al pulso medido de
   esa canción.»

   PROCEDENCIA: web/direccion-nocturno-a-tempo-2026-10-08.md, §1-§3 (paso 0
   de no-web-slop, 8-oct-2026), y la frase de Ignacio del mismo día: «la web
   tiene que tener la estética de la app, la estética de Nocturno». Los
   valores salen de ios/LoopMaster/LoopMaster/Vistas/TemaApp.swift y de
   WaveformView.swift. El tempo, de «Quedo en la mar»: 24 pulsos a 165 BPM
   entre A = 6,5156 s y B = 15,2429 s del máster, en 3/4 (notas/fragmento
   de la Ruta, medido el 8-oct).

   Lo que se deduce:
   - Color. El FondoNocturno exacto, a sangre y quieto detrás de todo, como
     en la app. Un solo acento, #1A9EFF, para lo que suena, el «1» y el
     botón; #B3E0FF para el texto que lleva acento. A en verde y B en
     naranja, solo donde haya un bucle.
   - Letra. La del sistema, como la app. Rounded en el nombre y en las
     cifras que cuentan tiempo; cifras tabulares donde la app usa
     monospacedDigit.
   - Retícula. La rejilla en 3/4 vive en la onda del héroe, como en la app.
     Entre secciones no hay rayas: Ignacio no las entendía (8-oct).
   - Movimiento. Nada lleva duración propia: todo cuelga del reloj de la
     canción al 75 %, el estado de la demo (Tempo 75 % en las capturas):
     123,75 BPM reales. Lo que entra lo hace en la siguiente corchea, dura
     una corchea y se escalona a semicorcheas (a-tempo.js).
   Si se cae la app, se cae la paleta; si se cae la canción, el reloj.
   ===================================================================== */

/* PROCEDENCIA fuente: la app no tiene ni una Font.custom en todo ios/; su letra es SF Pro del
   sistema, y Rounded en el nombre (VeloLanzamiento.swift:26) y en las cifras que cuentan tiempo
   (BloqueRitmoView.swift:1530, MetronomoView.swift:767 y :893, PlayerView.swift:3103). Fuera de
   Apple cae a la del sistema de cada equipo: la web no carga ninguna letra. */
:root{
  color-scheme:dark;
  /* FondoNocturno, TemaApp.swift:80-99: (0.09, 0.14, 0.28) → (0.05, 0.07, 0.15) → (0.03, 0.04, 0.10) */
  --noche-alto:#172447;
  --noche:#0D1226;
  --noche-bajo:#080A1A;
  /* Su resplandor: Color.cyan al 26 % y Color.blue al 12 %, radio 8 → 480 en (50 %, 30 %).
     En oscuro son el cian (100, 210, 255) y el azul (10, 132, 255) del sistema. */
  --resplandor-cian:rgb(100 210 255 / .26);
  --resplandor-azul:rgb(10 132 255 / .12);
  /* acentoVivo, TemaApp.swift:33: (0.10, 0.62, 1.0) */
  --acento:rgb(25.5 158.1 255);
  /* hieloNocturno, TemaApp.swift:35 */
  --hielo:#B3E0FF;
  /* La rejilla, WaveformView.swift:30-31: el pulso en blanco al 20 %, el «1» en el acento al 70 % */
  --pulso:rgb(255 255 255 / .2);
  --uno:rgb(25.5 158.1 255 / .7);
  /* A y B, WaveformView.swift:18-19: el verde y el naranja del sistema en oscuro */
  --marca-a:#30D158;
  --marca-b:#FF9F0A;
  /* El texto: blanco, como textoValor en Nocturno (TemaApp.swift:58). El suave es el gris más
     bajo que da AA encima del centro del resplandor: 4,7:1 calculado sobre su color más claro. */
  --tinta:#FFFFFF;
  --tinta-suave:rgb(235 235 245 / .75);
  /* El reloj de la página: «Quedo en la mar» al 75 %, 165 × 0,75 = 123,75 BPM */
  --corchea:242.424ms;
  --semicorchea:121.212ms;
  --curva:cubic-bezier(.22, 1, .36, 1);
  --letra:-apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --letra-redonda:ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ancho:1160px;
  --margen:clamp(16px, 4vw, 40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:100px;background:var(--noche-bajo)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;color:var(--tinta-suave);font:400 17px/1.55 var(--letra);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto}
h1,h2,h3{margin:0;color:var(--tinta);text-wrap:balance}
p,figure,blockquote,ol,ul{margin:0}
small{font-size:inherit}

/* PROCEDENCIA resplandor: es el RadialGradient del propio FondoNocturno (TemaApp.swift:92-97), el
   único de la página, quieto detrás del contenido como en la app. */
.fondo{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle 480px at 50% 30%, var(--resplandor-cian) 8px, var(--resplandor-azul) 244px, transparent 480px),
    linear-gradient(to bottom right, var(--noche-alto), var(--noche) 50%, var(--noche-bajo))}

a{color:var(--hielo);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgb(179 224 255 / .4)}
a:hover{text-decoration-color:var(--hielo)}
:focus-visible{outline:2px solid var(--hielo);outline-offset:3px;border-radius:4px}

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

.saltar{position:absolute;left:var(--margen);top:-80px;z-index:30;padding:12px 18px;background:var(--noche-bajo);color:var(--tinta);text-decoration:none;border-radius:8px}
.saltar:focus{top:12px}

.aviso-idioma{padding:10px var(--margen);text-align:center;font-size:15px;border-bottom:1px solid var(--pulso)}

/* PROCEDENCIA cristal: la barra de arriba es la de la app, de cristal (Liquid Glass: 50 usos de
   glassEffect/.glass en ios/). Es el único cristal de la página. Debajo se desplaza el contenido:
   se mide en el iPhone 11 en la fase 4, y si da tirones va sólida
   (web/direccion-nocturno-a-tempo-2026-10-08.md §5). El fundido de debajo es la rampa de la app
   bajo sus barras (fundidoScrollTema, TemaApp.swift), con las paradas de fundido-suavizado.css. */
.cabecera{position:sticky;top:0;z-index:20;background:rgb(8 10 26 / .58);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4)}
.cabecera::after{content:"";position:absolute;left:0;right:0;top:100%;height:24px;pointer-events:none;background:rgb(8 10 26 / .58);-webkit-mask-image:linear-gradient(to top, var(--fundido-paradas));mask-image:linear-gradient(to top, var(--fundido-paradas))}
.cabecera .marco{display:flex;align-items:center;gap:28px;min-height:76px}
.nombre{display:inline-flex;align-items:center;gap:10px;color:var(--tinta);text-decoration:none;font:650 20px/1 var(--letra-redonda);letter-spacing:-.01em}
.nombre img{width:30px;height:30px}
.cabecera .nombre{gap:16px;font-size:40px}
.cabecera .nombre img{width:60px;height:60px}
.secciones{display:flex;gap:26px;margin-left:auto}
.secciones a,.idioma{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta-suave);text-decoration:none;font-size:15px;white-space:nowrap}
.secciones a:hover,.idioma:hover{color:var(--tinta)}

/* PROCEDENCIA pildora: las cápsulas van solo donde la app las pone (28 Capsule() en ios/): el botón
   principal y la marca de Pro. La marca copia el borde del candado de Pro, el acento al 45 %
   (BadgeCandadoPro, CandadoPro.swift:90-92), con la palabra en vez del candado, como la ficha. */
/* PROCEDENCIA cristal, sombra: el botón «Descargar» es el de las hojas de la app en Nocturno, BotonHoja
   con .buttonStyle(.glass) en cápsula (TemaApp.swift:629-630). Copiado de su «Hecho», que Ignacio
   capturó en la app: «el Tipico alo de loquid glass de la app o qie sea exactamente como ese» (8-oct).
   Medido: el relleno es el azul de detrás aclarado ((23,41,77) → (46,69,113); aquí sale (47,70,109)), y
   el halo, una luz de 1 px arriba y abajo que se apaga hacia los lados, con un filo oscuro por fuera. Lo
   de detrás se ve casi nítido y con el contraste bajado, como en las píldoras de Safari: con texto blanco
   detrás, el rótulo queda a 5,2:1. La refracción del borde no se copia: Safari no admite filtros SVG en
   backdrop-filter. Para que no pase desapercibido, el filo en el azul hielo de Nocturno al 30 % y un
   resplandor del acento muy bajo, como la cápsula de Pro destacada de la app (FondoProDestacado, .halo:
   filo y luz en el acento y el hielo). Ignacio, 11-oct: «el borde a lo mejor del azul plateado de
   nocturno o algo, no sé, noq ueiro anda exageraro». */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;color:var(--tinta);font:600 16px/1 var(--letra);text-decoration:none;background:rgb(179 224 255 / .17);-webkit-backdrop-filter:blur(3px) saturate(3) contrast(.7) brightness(.55);backdrop-filter:blur(3px) saturate(3) contrast(.7) brightness(.55);box-shadow:inset 0 1px 0 rgb(200 225 255 / .2), inset 0 -1px 0 rgb(200 225 255 / .18), inset 0 2px 3px -1px rgb(200 225 255 / .1), inset 0 -2px 3px -1px rgb(200 225 255 / .12), inset 0 8px 10px -8px rgb(200 225 255 / .05), inset 0 -8px 10px -8px rgb(200 225 255 / .07), inset 0 0 0 1px rgb(179 224 255 / .3), 0 0 0 .5px rgb(0 0 0 / .45), 0 10px 24px -10px rgb(0 0 0 / .5), 0 0 14px rgb(25.5 158.1 255 / .16);transition:transform 120ms var(--curva), background-color 120ms linear}
.boton:hover{background-color:rgb(179 224 255 / .24)}
.boton:active{transform:scale(.97)}
.pro{display:inline-block;margin-inline-start:.2em;padding:.24em .6em .26em;border:1px solid rgb(25.5 158.1 255 / .45);border-radius:999px;color:var(--hielo);font:600 13px/1 var(--letra);letter-spacing:.01em;vertical-align:.18em;white-space:nowrap}
p > .pro:first-child{margin-inline:0 .35em}
h2 .pro,h3 .pro{font-size:max(13px, .3em);vertical-align:.5em}

.sin-corte{white-space:nowrap}
.cifra{font-variant-numeric:tabular-nums}
.cifra-tiempo{font-family:var(--letra-redonda);font-variant-numeric:tabular-nums}

/* La retícula en 3/4: cada bloque, un pulso; cada tres, un «1». */
.bloque{padding-block:clamp(72px, 9vw, 128px)}

h1{font-size:clamp(40px, 6.2vw, 76px);line-height:1.03;letter-spacing:-.02em;font-weight:700}
h2{font-size:clamp(30px, 4.4vw, 52px);line-height:1.08;letter-spacing:-.015em;font-weight:700}
h3{font-size:20px;line-height:1.3;letter-spacing:-.005em;font-weight:650}
.entradilla{font-size:clamp(19px, 1.9vw, 22px);line-height:1.45}

.iphone{display:block;width:min(330px, 74vw);border-radius:12% / 5.5%;outline:1px solid rgb(255 255 255 / .12);outline-offset:-1px;box-shadow:0 2px 6px rgb(0 0 0 / .25), 0 32px 64px -24px rgb(0 0 0 / .65)}
.mac{display:block;width:100%;filter:drop-shadow(0 28px 40px rgb(0 0 0 / .45))}
.tienda{display:inline-block;line-height:0;padding:12px 0}
.tienda img{height:48px;width:auto}

/* Héroe */
.heroe{border-top:0;padding-block:clamp(24px, 4vw, 56px) clamp(40px, 5vw, 72px)}
.heroe .marco{display:grid;grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr);align-items:center;gap:clamp(40px, 6vw, 88px)}
.heroe h1{font-size:clamp(40px, 4.8vw, 60px)}
.heroe h1 .linea{display:block}
.heroe .entradilla{margin-top:24px;max-width:34ch}
.heroe .tienda{margin-top:20px}
.condiciones{font-size:15px}
.oferta{margin-top:6px;font-size:15px}
.confianza{margin-top:28px;font-size:15px}
.pantalla{justify-self:center}
.pantalla figcaption{margin-top:18px;text-align:center;font-size:15px;color:var(--hielo);font-variant-numeric:tabular-nums}

/* PROCEDENCIA onda: el único momento animado de la página (dirección §3, «Movimiento»). Es la envolvente
   real de «Quedo en la mar», que corre bajo el cabezal quieto en el centro, como el reproductor de la app
   (WaveformView.swift: el desplazamiento, las capas y colores, A y B con su barra verde y naranja; el
   dibujo, en a-tempo.js). Suena al 75 %, el tempo de la demo, y al llegar a B la onda salta a A como un
   bucle de verdad; con movimiento reducido, quieta en el «1». En el escritorio va de donde arrancan las
   letras a donde empieza el iPhone (Ignacio, 8-oct, con dos marcas sobre una captura) y se funde por los
   cuatro lados: entra y sale con --fundido-onda y se apaga arriba y abajo, que a escuadra quedaba estática. */
.heroe{overflow-x:clip}
.heroe .marco{grid-template-rows:auto auto;row-gap:clamp(20px, 2.5vw, 36px)}
.heroe .marco > div:first-child{grid-column:1;grid-row:1;align-self:end}
.heroe .pantalla{grid-column:2;grid-row:1 / span 2}
.heroe .iphone{width:min(300px, 74vw)}
.onda{--fundido-onda:48px;grid-column:1;grid-row:2;align-self:start;height:clamp(150px, 14vw, 230px);margin-left:calc(var(--fundido-onda) / -2);margin-right:calc(24px - clamp(40px, 6vw, 88px));-webkit-mask-image:linear-gradient(90deg, transparent, #000 var(--fundido-onda), #000 calc(100% - var(--fundido-onda)), transparent);mask-image:linear-gradient(90deg, transparent, #000 var(--fundido-onda), #000 calc(100% - var(--fundido-onda)), transparent)}
.onda canvas{display:block;width:100%;height:100%}

/* Pilares: una lámina partida por la rejilla, no cuatro tarjetas */
.pilares{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));margin-top:48px;border-top:1px solid var(--pulso)}
.pilares > div{padding:28px 0 32px;border-bottom:1px solid var(--pulso)}
.pilares > div:nth-child(odd){padding-right:clamp(24px, 4vw, 48px);border-right:1px solid var(--pulso)}
.pilares > div:nth-child(even){padding-left:clamp(24px, 4vw, 48px)}
.pilares h3{margin-bottom:10px}

/* Método */
.metodo .marco,.biblioteca .marco{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);align-items:center;gap:clamp(40px, 6vw, 96px)}
.pasos{list-style:none;padding:0;margin-top:36px;counter-reset:paso;border-bottom:1px solid var(--pulso)}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:40px minmax(0, 1fr);gap:12px;padding:18px 0;border-top:1px solid var(--pulso);font-size:19px;line-height:1.45;color:var(--tinta)}
.pasos li::before{content:counter(paso);color:var(--hielo);font-weight:600;font-variant-numeric:tabular-nums}
.escuchalo{margin-top:24px}

/* Ritmo */
.ritmo h2{max-width:18ch}
.ritmo-par{display:grid;grid-template-columns:minmax(0, 1.9fr) minmax(0, 1fr);column-gap:clamp(32px, 5vw, 72px);row-gap:28px;margin-top:56px}
.ritmo-par > div{display:contents}
.ritmo-par > div:first-child > .ritmo-imagen{grid-column:1;grid-row:1}
.ritmo-par > div:first-child > .ritmo-texto{grid-column:1;grid-row:2}
.ritmo-par > div:last-child > .ritmo-imagen{grid-column:2;grid-row:1;justify-self:center}
.ritmo-par > div:last-child > .ritmo-texto{grid-column:2;grid-row:2}
.ritmo-imagen{align-self:end}
.ritmo-imagen .iphone{width:min(230px, 62vw)}
.ritmo-texto h3{margin-bottom:10px}
.datos{list-style:none;padding:0;margin:0}
.datos li{position:relative;padding:5px 0 5px 18px;line-height:1.45}
.datos li::before{content:"";position:absolute;left:2px;top:.95em;width:5px;height:5px;border-radius:50%;background:var(--hielo)}

/* Bucles y exportación */
.bucles .marco{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);align-items:center;gap:clamp(40px, 6vw, 88px)}
.bucles h2{max-width:14ch}
.bucles .marco > div > p{margin-top:24px;max-width:46ch}
.pareja{display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px, 3vw, 32px)}
.pareja .iphone{width:min(270px, 42vw)}
.pareja .iphone:last-child{margin-top:56px}

/* Biblioteca */
.biblioteca h2{max-width:20ch}
.biblioteca p{margin-top:24px;max-width:60ch}

/* Continuidad */
.continuidad h2{max-width:22ch}
.continuidad .marco > p{margin-top:20px}
.continuidad figure{margin-top:48px;max-width:960px}

/* Precio */
.precio h2{max-width:18ch}
.precio .entradilla{margin-top:20px;max-width:46ch}
.precio .oferta{margin-top:16px;color:var(--hielo)}
.precios{list-style:none;padding:0;margin-top:40px;border-top:1px solid var(--pulso)}
.precios li{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:6px 24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--pulso)}
.producto{color:var(--tinta);font-size:19px;font-weight:600}
.producto small{display:block;margin-top:4px;color:var(--tinta-suave);font-size:15px;font-weight:400}
.importe{color:var(--tinta);font-size:clamp(26px, 3vw, 34px);font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-align:right}
.importe small{display:block;margin-top:2px;color:var(--tinta-suave);font-size:15px;font-weight:400;letter-spacing:0}
.tras-oferta{display:none}
.oferta-acabada .en-oferta{display:none}
.oferta-acabada .tras-oferta{display:inline}
.planes{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:24px clamp(32px, 5vw, 64px);margin-top:48px}
.planes h3{margin-bottom:8px}
.precio .tienda{margin-top:36px}
.nota{font-size:15px}

/* Manifiesto */
.manifiesto h2{max-width:16ch}
.manifiesto p{margin-top:24px;max-width:44ch;font-size:clamp(19px, 1.9vw, 22px);line-height:1.45}

/* Preguntas */
.preguntas h2{margin-bottom:32px}
.preguntas details{border-top:1px solid var(--pulso)}
.preguntas details:last-of-type{border-bottom:1px solid var(--pulso)}
.preguntas summary{display:flex;justify-content:space-between;align-items:baseline;gap:20px;min-height:44px;padding:20px 0;cursor:pointer;list-style:none;color:var(--tinta);font-size:19px;font-weight:600}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"";flex:none;width:9px;height:9px;border-right:1.5px solid var(--tinta-suave);border-bottom:1.5px solid var(--tinta-suave);transform:translateY(-3px) rotate(45deg);transition:transform var(--corchea) var(--curva)}
.preguntas details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.preguntas details p{max-width:64ch;padding-bottom:24px}
.solo-oferta{display:none}
.oferta-en-curso .solo-oferta{display:block}

/* Cierre y pie */
.cierre h2{max-width:16ch}
.cierre .entradilla{margin-top:16px}
.cierre .tienda{margin-top:20px}
.pie{padding-block:48px 72px;font-size:15px}
.pie .marco{display:grid;grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);gap:28px clamp(32px, 6vw, 96px)}
.pie .nombre{font-size:18px}
.pie blockquote{margin-top:16px;color:var(--tinta);font-size:17px;max-width:46ch}
.pie figcaption{margin-top:6px}
.pie nav{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:4px}
.pie nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta-suave)}
.pie nav a:hover{color:var(--tinta)}
.copia{margin-top:12px}

/* El botón al alcance del pulgar en el móvil (Fitts, web/notas-lawsofux-2026-09-05.md): sale cuando
   la insignia del héroe ya ha pasado y se va cuando hay otra a la vista. */
.barra-movil{display:none}

@media (max-width:860px){
  .heroe .marco,.metodo .marco,.bucles .marco,.biblioteca .marco{grid-template-columns:minmax(0, 1fr)}
  .metodo .pantalla,.biblioteca .pantalla{order:2}
  .pantalla{margin-top:8px}
  .heroe .marco > div:first-child,.onda,.heroe .pantalla{grid-column:1}
  .onda{--fundido-onda:28px;grid-row:2;align-self:start;margin-inline:calc(var(--margen) * -1)}
  .heroe .pantalla{grid-row:3}
  .ritmo-par{display:block}
  .ritmo-par > div{display:block}
  .ritmo-par > div + div{margin-top:64px}
  .ritmo-imagen{display:flex;justify-content:center}
  .ritmo-texto{margin-top:24px}
}
/* Con el logo de 60 px, las secciones no caben en la barra por debajo de unos 950 px (a 780 «RitLoop» pisaba «Funciones»). */
@media (max-width:959px){
  .secciones{display:none}
  .idioma{margin-left:auto}
}
@media (max-width:760px){
  .secciones,.cabecera .boton{display:none}
  .idioma{margin-left:auto}
  .cabecera .marco{min-height:64px}
  .cabecera .nombre{gap:14px;font-size:34px}
  .cabecera .nombre img{width:52px;height:52px}
  .pilares,.planes,.pie .marco{grid-template-columns:minmax(0, 1fr)}
  .pilares > div:nth-child(odd),.pilares > div:nth-child(even){padding-inline:0;border-right:0}
  .barra-movil{display:block;position:fixed;left:50%;bottom:20px;z-index:25;visibility:hidden;transform:translate(-50%, 160%);transition:transform var(--corchea) var(--curva), visibility 0s linear var(--corchea)}
  .ver-barra .barra-movil{visibility:visible;transform:translate(-50%, 0);transition:transform var(--corchea) var(--curva), visibility 0s}
  .barra-movil .boton{min-width:220px;min-height:52px;font-size:17px}
}

/* PROCEDENCIA revelado: lo que entra lo hace a tempo, en la siguiente corchea del reloj de la canción al 75 %
   (a-tempo.js), y dura una corchea: es la segunda mitad de la frase de arriba. El héroe no entra,
   ya está. Con movimiento reducido entra solo con opacidad, sin desplazarse. */
.js-tempo [data-entra]{opacity:0;transform:translateY(12px);transition:opacity var(--corchea) var(--curva), transform var(--corchea) var(--curva)}
.js-tempo [data-entra].dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-tempo [data-entra]{transform:none;transition:opacity var(--corchea) linear}
  .preguntas summary::after,.boton,.barra-movil{transition:none}
}

@media print{
  .fondo,.cabecera,.barra-movil,.aviso-idioma{display:none}
  body{color:#111;background:#fff}
  h1,h2,h3,.producto,.importe{color:#111}
}