/* Escalamiento SMART Concierge — hoja de estilos compartida (Parte 3 y 4 del prompt) */
:root{
  --fondo:#0B0C0E;
  --superficie:#16181C;
  --linea:#2A2E35;
  --texto:#ECEEF1;
  --texto-2:#A3A9B3;
  --platino:#C9CED6;
  --zafiro:#2F5BD3;
  --zafiro-luz:#5B8CFF;
  --cobalto:#0E1522;
  --platino-grad:linear-gradient(115deg,#9AA1AC 0%,#E6E9EE 45%,#C9CED6 60%,#9AA1AC 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  background:var(--fondo);
  color:var(--texto);
  font-family:Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}

.contenedor{max-width:1160px;margin:0 auto;padding:0 20px;position:relative;isolation:isolate}
@media (min-width:900px){.contenedor{padding:0 32px}}

/* barra de progreso de lectura, fija arriba de todo */
.progreso{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--zafiro-luz);z-index:70;pointer-events:none}

/* partículas de fondo: red de puntos a la deriva, en bucle, detrás de todo el contenido */
#particulas{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* cifra fantasma detrás del titular de sección: numera los "capítulos" del sitio, muy tenue */
.cifra-fantasma{
  position:absolute;top:-.4em;left:0;z-index:-1;
  font-size:clamp(120px,20vw,260px);font-weight:700;line-height:1;
  color:var(--platino);opacity:.05;pointer-events:none;user-select:none;
}

/* separador entre capítulos: la llave en miniatura, como firma de marca */
.separador{display:flex;align-items:center;justify-content:center;gap:16px;max-width:1160px;margin:0 auto;padding:0 20px;opacity:.6}
.separador-linea{flex:1;height:1px;background:var(--linea);max-width:120px}
.separador-llave{flex-shrink:0;color:var(--zafiro-luz)}

/* fondo de plano técnico (cuadrícula fina), para la sección de instalación del sistema */
.plano{
  background-image:
    linear-gradient(rgba(201,206,214,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,206,214,.05) 1px,transparent 1px);
  background-size:40px 40px;
}

section{padding:64px 0}
@media (min-width:900px){section{padding:112px 0}}

h1,h2,h3{font-weight:600;text-wrap:balance}
h2{font-size:clamp(28px,4vw,48px);line-height:1.1;letter-spacing:-0.015em}
h3{font-size:clamp(19px,2vw,24px);letter-spacing:-0.01em}
h1{font-size:clamp(38px,6.5vw,76px);line-height:1.05;letter-spacing:-0.02em}
p{line-height:1.6;max-width:65ch}
.ceja{font-size:12px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--texto-2)}
.grande-platino{color:var(--platino);font-weight:500;font-size:clamp(22px,3vw,34px);line-height:1.3;max-width:32ch}

/* estilo apple.com/macbook-pro: parte del titular en degradado sutil platino → zafiro-luz (uso permitido: 3.2 dice que zafiro-luz sí puede ir en "palabras de acento dentro del texto") */
.acento-degrade{
  background:linear-gradient(100deg,var(--platino) 20%,var(--zafiro-luz) 90%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brillo-lento 9s ease-in-out infinite;
}

.filete{width:56px;height:1px;background:var(--zafiro);opacity:.9;border:0}
.filete-dibuja{width:0;animation:dibuja-filete .5s ease .45s forwards}
@keyframes dibuja-filete{to{width:56px}}

/* ---------- botones ---------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:14px 24px;border-radius:10px;position:relative;
  font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;
  transition:background .2s ease,box-shadow .2s ease,color .2s ease,transform .2s ease;
}
.boton:active{transform:scale(.97)}
.flecha{display:inline-block;transition:transform .25s ease}
.boton:hover .flecha{transform:translateX(4px)}

.boton-principal{background:var(--zafiro);color:#fff;border:0;overflow:hidden}
.boton-principal:hover{background:#3A68E0;box-shadow:0 0 0 8px rgba(47,91,211,.2),0 10px 28px -8px rgba(47,91,211,.55);transform:scale(1.03)}
/* barrido de luz: una vez al aparecer en pantalla (clase .brillo) y cada vez que se pasa el cursor */
.boton-principal::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-130%);
}
.boton-principal:hover::after{animation:boton-brillo .7s ease}
.boton-principal.brillo::after{animation:boton-brillo 1s ease .15s}
@keyframes boton-brillo{to{transform:translateX(130%)}}

.boton-secundario{background:transparent;color:var(--platino);border:1px solid var(--platino)}
.boton-secundario:hover{background:var(--superficie)}
:focus-visible{outline:2px solid var(--zafiro-luz);outline-offset:2px}

.sello{
  display:inline-block;margin-top:16px;padding:10px 16px;border-radius:10px;
  border:1px solid rgba(201,206,214,.4);font-size:13px;color:var(--texto-2);
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:64px;
  display:flex;align-items:center;border-bottom:1px solid var(--linea);
  background:rgba(11,12,14,.72);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.nav .contenedor{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-marca{font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.nav-derecha{display:flex;align-items:center;gap:28px}
@media (max-width:480px){
  .nav-marca{font-size:10px;letter-spacing:.1em}
  .nav-derecha{gap:10px}
}
.nav-links{display:none;align-items:center;gap:28px;list-style:none}
.nav-links a{text-decoration:none;font-size:14px;color:var(--texto-2)}
.nav-links a:hover{color:var(--texto)}
@media (min-width:760px){.nav-links{display:flex}}
.nav-hamb{display:flex;flex-direction:column;gap:4px;background:none;border:0;padding:8px;cursor:pointer}
.nav-hamb span{width:20px;height:1px;background:var(--texto)}
@media (min-width:760px){.nav-hamb{display:none}}
.nav-movil{
  display:none;position:fixed;top:64px;left:0;right:0;background:var(--superficie);
  border-bottom:1px solid var(--linea);padding:16px 20px;
}
.nav-movil.abierto{display:block}
.nav-movil a{display:block;padding:12px 0;text-decoration:none;color:var(--texto);border-bottom:1px solid var(--linea)}
.nav-movil a:last-child{border-bottom:0}
main{padding-top:64px}

/* ---------- tarjetas y recuadros ---------- */
/* hover estilo bento-grid: el contenido sube un poco y aparece una flecha, sin romper "nada que grite" (Parte 2.6) */
.tarjeta{background:var(--superficie);border:1px solid var(--linea);border-radius:16px;padding:28px;padding-bottom:44px;position:relative;overflow:hidden;transition:border-color .25s ease,transform .25s ease}
.tarjeta:hover{border-color:rgba(91,140,255,.5);transform:translateY(-2px)}
.tarjeta>*{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.tarjeta:hover>*{transform:translateY(-4px)}
.tarjeta::after{
  content:"→";position:absolute;right:20px;bottom:16px;color:var(--zafiro-luz);font-size:18px;
  opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;
}
.tarjeta:hover::after{opacity:1;transform:translateY(0)}
.recuadro-noble{border:1px solid rgba(201,206,214,.4);border-radius:16px;padding:28px}
.rejilla-3{display:grid;gap:24px}
@media (min-width:760px){.rejilla-3{grid-template-columns:repeat(3,1fr)}}
.numero{font-size:clamp(40px,6vw,64px);font-weight:600;color:var(--platino)}
.etiqueta{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--texto-2)}
.cita{font-size:clamp(20px,2.5vw,28px);color:var(--platino);font-weight:500;line-height:1.4}
@media (min-width:900px){.seccion7-layout{grid-template-columns:1fr 420px}}
.hero-visual{perspective:1000px}

/* stagger de entrada para rejillas */
.rejilla-3 .reveal{transition-delay:calc(var(--i,0) * 60ms)}

/* ---------- enlaces en texto ---------- */
.enlace{color:var(--zafiro-luz);text-decoration:underline;text-underline-offset:3px}

/* ---------- franja de confianza ---------- */
.franja{background:var(--superficie);text-align:center}
.franja .nombres{color:var(--platino);font-size:15px;letter-spacing:.02em;margin-top:16px}

/* ---------- lineas guion ---------- */
.lista-guion{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:32px}
.lista-guion li{padding-left:20px;position:relative;font-size:18px;line-height:1.6;max-width:56ch}
.lista-guion li::before{content:"";position:absolute;left:0;top:.75em;width:10px;height:1px;background:var(--zafiro)}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--linea)}
.faq-p{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;color:inherit;text-align:left;font:inherit;font-weight:500;font-size:17px;padding:20px 0;cursor:pointer}
.faq-mas{position:relative;width:16px;height:16px;flex-shrink:0;transition:transform .25s ease}
.faq-mas::before,.faq-mas::after{content:"";position:absolute;background:var(--platino)}
.faq-mas::before{left:0;top:50%;width:100%;height:1px;transform:translateY(-50%)}
.faq-mas::after{top:0;left:50%;width:1px;height:100%;transform:translateX(-50%)}
.faq-p[aria-expanded="true"] .faq-mas{transform:rotate(45deg)}
.faq-r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.faq-r>div{overflow:hidden}
.faq-r>div>p{padding-bottom:20px;color:var(--texto-2);max-width:60ch}
.faq-item.abierto .faq-r{grid-template-rows:1fr}

/* ---------- reveal on scroll (4.3: nunca desde opacidad 0) ---------- */
.reveal{opacity:.6;transform:translateY(12px);filter:blur(6px);transition:opacity .6s ease-out,transform .6s cubic-bezier(.2,.8,.2,1),filter .6s ease-out}
.reveal.visible{opacity:1;transform:none;filter:blur(0)}
/* estilo apple.com: el titular de sección pasa de atenuado a brillante al entrar (contraste, no opacidad) */
.reveal h2{color:var(--texto-2);transition:color .6s ease-out}
.reveal.visible h2{color:var(--texto)}

/* texto que se revela palabra por palabra, para los dos momentos de declaración (sección 6 y cierre) */
.palabra{display:inline-block;overflow:hidden;vertical-align:top}
.palabra>span{display:inline-block;transform:translateY(110%);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .5s ease-out}
.reveal-palabras.visible .palabra>span{transform:translateY(0);opacity:1}

/* brillo metálico lento sobre texto platino (misma paleta que el grabado de la tarjeta) */
.cita,.grande-platino{
  background:var(--platino-grad);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brillo-lento 9s ease-in-out infinite;
}
@keyframes brillo-lento{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* grano sutil en toda la página, igual textura que la tarjeta (Anexo A), para unificar el material */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* halo magnético que sigue al cursor dentro del botón principal */
.boton-principal{position:relative;overflow:hidden}
.boton-principal::before{
  content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);width:160px;height:160px;
  background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.boton-principal:hover::before{opacity:1}

/* banda --superficie (grafito): usada a propósito en Garantías y FAQ para dar capas, como el negro/#1d1d1f de Apple */
.superficie-fondo{background:var(--superficie)}

/* tarjeta de la sección 7 fija en escritorio mientras el texto pasa al lado (scrollytelling, como Apple) */
/* .hero-visual.seccion7-sticky: dos clases para ganarle en especificidad a "position:relative" de .hero-visual, sin importar el orden en el archivo */
@media (min-width:900px){
  .hero-visual.seccion7-sticky{position:sticky;top:96px}
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--linea);padding:48px 0 32px;font-size:13px;color:var(--texto-2)}
.footer-links{display:flex;flex-wrap:wrap;gap:20px;list-style:none;margin-bottom:20px}
.footer-links a{text-decoration:none;color:var(--texto-2)}
.footer-links a:hover{color:var(--texto)}
.footer-legal{margin-top:16px;padding-top:16px;border-top:1px solid var(--linea)}
.footer-legal a{text-decoration:underline;text-underline-offset:2px}
.footer-nota{margin-top:16px;font-size:12px;color:#6B717B;max-width:70ch}

/* ---------- banner de cookies ---------- */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--superficie);
  border-top:1px solid var(--linea);padding:20px;display:none;
}
.cookies.visible{display:block}
.cookies-fila{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;max-width:1160px;margin:0 auto}
.cookies-texto{font-size:14px;color:var(--texto-2);max-width:60ch}
.cookies-botones{display:flex;gap:12px;flex-wrap:wrap}
.cookies-panel{display:none;max-width:1160px;margin:16px auto 0;border-top:1px solid var(--linea);padding-top:16px}
.cookies-panel.visible{display:block}
.cookies-opcion{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--linea)}
.interruptor{position:relative;width:40px;height:22px;border-radius:11px;background:var(--linea);border:0;cursor:pointer;flex-shrink:0}
.interruptor::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--texto-2);transition:transform .2s ease}
.interruptor[aria-checked="true"]{background:var(--zafiro)}
.interruptor[aria-checked="true"]::after{transform:translateX(18px);background:#fff}

/* ---------- páginas legales ---------- */
.legal main .contenedor{max-width:720px}
.legal h2{margin-top:48px;font-size:26px}
.legal h3{margin-top:28px;font-size:19px}
.legal p,.legal li{color:var(--texto-2);font-size:17px;margin-top:12px}
.legal table{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px}
.legal th,.legal td{border:1px solid var(--linea);padding:10px;text-align:left;color:var(--texto-2)}
.legal .fecha{color:var(--texto-2);font-size:14px}

/* ============================================================
   TARJETA CONCIERGE — Anexo A, reutilizada tal cual (no redibujar)
   ============================================================ */
.card{
  width:min(420px,88vw);aspect-ratio:1.586;border-radius:18px;position:relative;overflow:hidden;
  container-type:inline-size;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),
    linear-gradient(160deg,#16213A 0%,var(--cobalto) 55%,#121B2C 100%);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(201,206,214,.10) inset,0 1px 0 rgba(255,255,255,.05) inset;
  opacity:0;transform:translateY(12px);
  animation:card-aparece 1.4s cubic-bezier(.2,.7,.2,1) .2s forwards;
  transform-style:preserve-3d;will-change:transform;
  transition:box-shadow .4s ease;
}
/* más presencia al pasar el cursor (junto con la inclinación 3D que ya pone main.js) */
.card:hover{box-shadow:0 40px 90px -20px rgba(47,91,211,.35),0 0 0 1px rgba(201,206,214,.16) inset,0 1px 0 rgba(255,255,255,.07) inset}
.card::before{
  content:"";position:absolute;inset:10px;border-radius:12px;
  border:1px solid transparent;
  background:var(--platino-grad) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.35;
}
.card::after{
  content:"";position:absolute;inset:-50%;
  background:linear-gradient(105deg,transparent 42%,rgba(230,233,238,.09) 50%,transparent 58%);
  transform:translateX(-60%);animation:card-reflejo 2.6s ease-in-out 4.6s forwards;
}
.card-grande{width:min(480px,90vw)}
.grabado{
  background:var(--platino-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.card .marca{position:absolute;top:6.2cqw;left:6.7cqw;font:500 2.4cqw/1.5 Inter,sans-serif;letter-spacing:.32em;text-transform:uppercase}
.card .nombre{position:absolute;left:6.7cqw;bottom:6.4cqw;font:600 6.6cqw/1 Inter,sans-serif;letter-spacing:.02em}
.card .leyenda{position:absolute;right:6.7cqw;bottom:7cqw;font:500 2cqw/1.6 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase}
.card .llave{position:absolute;top:16%;right:11%;height:50%;transform:rotate(-90deg);transform-origin:50% 50%;animation:card-gira 1.2s cubic-bezier(.3,.6,.2,1) 3.4s forwards}
.llave path,.llave circle{fill:none;stroke:url(#zafiroTrazo);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:320;stroke-dashoffset:320;animation:card-traza 2.2s ease-in-out 1s forwards}

@keyframes card-aparece{to{opacity:1;transform:none}}
@keyframes card-traza{to{stroke-dashoffset:0}}
@keyframes card-gira{to{transform:rotate(0deg)}}
@keyframes card-reflejo{to{transform:translateX(60%)}}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:56px}
.hero .contenedor{display:grid;gap:48px;align-items:center}
@media (min-width:900px){.hero .contenedor{grid-template-columns:55% 1fr}}
.hero-luz{
  position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 45% at 70% 40%,rgba(47,91,211,.10),transparent 70%);
  animation:respira 12s ease-in-out infinite alternate;
}
@keyframes respira{from{transform:scale(1) translate(0,0)}to{transform:scale(1.06) translate(-2%,2%)}}
.hero-texto>*{opacity:0}
.hero-ceja{animation:sube-8 .4s ease forwards}
.hero-titular{animation:sube-12 .6s cubic-bezier(.2,.8,.2,1) .12s forwards}
.hero-filete{animation:dibuja-filete .5s ease .45s forwards}
.hero-bajada,.hero-linea2,.hero-cta{animation:sube-8 .4s ease .6s forwards}
@keyframes sube-8{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sube-12{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero-visual{display:flex;justify-content:center;position:relative;z-index:0;animation:flota 6s ease-in-out infinite}
/* aureola detrás de toda tarjeta Concierge (hero, sección 7, Christian): la hace destacar más del fondo */
.hero-visual::before{
  content:"";position:absolute;z-index:-1;inset:-15%;pointer-events:none;
  background:radial-gradient(55% 55% at 50% 45%,rgba(47,91,211,.16),transparent 70%);
  animation:respira 10s ease-in-out infinite alternate;
}
/* esquinas de precisión alrededor de la tarjeta, como un visor de diagnóstico */
.hero-visual::after{
  content:"";position:absolute;inset:-16px;pointer-events:none;opacity:.55;
  background:
    linear-gradient(var(--zafiro-luz),var(--zafiro-luz)) top left/18px 1px no-repeat,
    linear-gradient(var(--zafiro-luz),var(--zafiro-luz)) top left/1px 18px no-repeat,
    linear-gradient(var(--zafiro-luz),var(--zafiro-luz)) top right/18px 1px no-repeat,
    linear-gradient(var(--zafiro-luz),var(--zafiro-luz)) top right/1px 18px no-repeat,
    linear-gradient(var(--zafiro-luz),var(--zafiro-luz)) bottom left/18px 1px no-repeat,
    linear-gradient(var(--zafiro-luz),var(--zafiro-luz)) bottom left/1px 18px no-repeat,
    linear-gradient(var(--zafiro-luz),var(--zafiro-luz)) bottom right/18px 1px no-repeat,
    linear-gradient(var(--zafiro-luz),var(--zafiro-luz)) bottom right/1px 18px no-repeat;
}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- ambiente de fondo por sección (zonas destacadas del sitio) ---------- */
.ambiente{position:relative;isolation:isolate}
.ambiente::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(45% 45% at var(--amb-x,50%) var(--amb-y,40%),var(--amb-color,rgba(47,91,211,.09)),transparent 70%);
  animation:respira 11s ease-in-out infinite alternate;
}

/* ---------- utilidades de visibilidad ---------- */
.oculto{display:none !important}
[hidden]{display:none !important}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;animation-delay:0s !important;transition-duration:0.01ms !important}
  .card,.card::before{opacity:1;transform:none}
  .card::after{display:none}
  .card .llave{transform:rotate(0deg)}
  .llave path,.llave circle{stroke-dashoffset:0}
  .hero-texto>*{opacity:1;transform:none}
  .hero-filete,.filete-dibuja{width:56px}
  .hero-luz{animation:none}
  .hero-visual,.hero-visual::before,.ambiente::before{animation:none}
  .reveal{opacity:1;transform:none;filter:none}
  .palabra>span{transform:none;opacity:1}
  .acento-degrade,.cita,.grande-platino{animation:none}
  #particulas{display:none}
  html{scroll-behavior:auto}
}