/* ===========================================================
   SYNCROVNIC AGENCY — hoja de estilos
   Lenguaje visual: UI/UX estilo Apple. Aire, vidrio, sobriedad.
   Paleta: #0f36e7 (azul marca) · #171717 (grafito)
   =========================================================== */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

:root{
  --acento:#0f36e7;
  --verde:#25d366;
  --suave:cubic-bezier(.16,1,.3,1);
  --salto:cubic-bezier(.34,1.4,.5,1);
  --ui:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;
  --ancho:1180px;
  --lado:clamp(20px,4vw,44px);
}

html[data-tema="oscuro"]{
  --fondo:#08080a;
  --fondo-2:#0f0f11;
  --texto:#f2f3f6;
  --texto-2:rgba(242,243,246,.58);
  --texto-3:rgba(242,243,246,.32);
  --linea:rgba(255,255,255,.11);
  --acento-txt:#8ba1ff;
  --vidrio:rgba(255,255,255,.055);
  --vidrio-fuerte:rgba(18,19,25,.72);
  --btn-cara:linear-gradient(160deg,rgba(255,255,255,.115),rgba(255,255,255,.04));
  --btn-borde:rgba(255,255,255,.14);
  --sombra:0 12px 32px -16px rgba(0,0,0,.9);
  --iso-filtro:none;
  /* velo más cerrado: el fondo se intuye, no manda */
  --velo:linear-gradient(180deg,rgba(8,8,10,.88) 0%,rgba(8,8,10,.75) 40%,rgba(8,8,10,.92) 100%);
  --grano-op:.05;
  --grano-mix:overlay;
}

html[data-tema="claro"]{
  --fondo:#f4f5f8;
  --fondo-2:#e8eaf1;
  --texto:#16171a;
  --texto-2:rgba(22,23,26,.60);
  --texto-3:rgba(22,23,26,.38);
  --linea:rgba(22,23,26,.13);
  --acento-txt:#0f36e7;
  --vidrio:rgba(255,255,255,.62);
  --vidrio-fuerte:rgba(255,255,255,.80);
  --btn-cara:linear-gradient(160deg,rgba(255,255,255,.88),rgba(255,255,255,.58));
  --btn-borde:rgba(255,255,255,.92);
  --sombra:0 12px 30px -16px rgba(20,28,60,.42);
  --iso-filtro:invert(1);
  --velo:linear-gradient(180deg,rgba(244,245,248,.90) 0%,rgba(244,245,248,.82) 40%,rgba(244,245,248,.94) 100%);
  --grano-op:.028;
  --grano-mix:multiply;
}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  font-family:var(--ui);
  background:var(--fondo);
  color:var(--texto);
  min-height:100svh;
  line-height:1.5;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background .5s var(--suave),color .5s var(--suave);
}

/* ===========================================================
   FONDO
   =========================================================== */
.ambiente{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:var(--fondo) }

.fondo-foto{
  position:absolute; inset:0;
  background-image:url("assets/img/fondo.webp?v=20260828");
  background-size:cover; background-position:center right; background-repeat:no-repeat;
  animation:fondo-vivo 34s ease-in-out infinite alternate;
}
@media (max-width:900px){
  .fondo-foto{ background-image:url("assets/img/fondo-movil.webp?v=20260828") }
}
.fondo-foto::after{ content:""; position:absolute; inset:0; background:var(--velo) }
@keyframes fondo-vivo{
  from{ scale:1.03; translate:0 0 }
  to{ scale:1.11; translate:-1.6% -1.2% }
}

.grano{
  position:absolute; inset:0; opacity:var(--grano-op); mix-blend-mode:var(--grano-mix);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:190px 190px;
}

/* ===========================================================
   CURSOR
   =========================================================== */
.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; opacity:0 }
html.cursor-vivo .cursor{ opacity:1 }
html.cursor-vivo,
html.cursor-vivo body,
html.cursor-vivo a,
html.cursor-vivo button{ cursor:none }

.cursor__anillo,.cursor__punto{
  position:absolute; top:0; left:0; border-radius:50%; display:block; will-change:transform;
}
.cursor__anillo{
  width:32px; height:32px; border:1px solid var(--texto-2); background:transparent;
  transform:translate3d(var(--rx,-100px),var(--ry,-100px),0) translate(-50%,-50%);
  transition:width .4s var(--suave),height .4s var(--suave),border-color .3s,background-color .3s,opacity .3s;
}
.cursor__punto{
  width:5px; height:5px; background:var(--acento-txt);
  transform:translate3d(var(--cx,-100px),var(--cy,-100px),0) translate(-50%,-50%);
  transition:opacity .3s;
}
html.cursor-activo .cursor__anillo{
  width:58px; height:58px; border-color:var(--acento-txt); background:rgba(139,161,255,.10);
}
html.cursor-activo .cursor__punto{ opacity:0 }
html.cursor-pulsa .cursor__anillo{ width:26px; height:26px; background:rgba(139,161,255,.22) }

/* ===========================================================
   ENTRADA — desenfoque leve que se aclara
   =========================================================== */
html.con-anim .surge{ animation:surgir 1.05s var(--suave) both }
html.con-anim .surge[data-orden="1"]{ animation-delay:.05s }
html.con-anim .surge[data-orden="2"]{ animation-delay:.16s }
html.con-anim .surge[data-orden="3"]{ animation-delay:.28s }
html.con-anim .surge[data-orden="4"]{ animation-delay:.38s }
html.con-anim .surge[data-orden="5"]{ animation-delay:.48s }
html.con-anim .surge[data-orden="6"]{ animation-delay:.62s }

@keyframes surgir{
  from{ opacity:0; filter:blur(13px); transform:translateY(18px) }
  60% { opacity:1 }
  to  { opacity:1; filter:blur(0); transform:translateY(0) }
}
html.anim-lista .surge{ animation:none !important; opacity:1 !important; filter:none !important }

/* ===========================================================
   BARRA FLOTANTE
   =========================================================== */
.barra{
  position:fixed; top:max(14px,env(safe-area-inset-top)); left:0; right:0; z-index:60;
  padding-inline:var(--lado); pointer-events:none;
}
.pastilla{
  pointer-events:auto;
  width:min(100%,var(--ancho)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:9px 10px 9px 16px; border-radius:999px;
  border:1px solid var(--linea); background:var(--vidrio-fuerte);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  box-shadow:var(--sombra), inset 0 1px 0 rgba(255,255,255,.14);
}
.marca{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit }
.marca__iso{
  width:24px; height:24px; display:block; object-fit:contain; flex:0 0 auto;
  filter:var(--iso-filtro);
  transition:transform .8s var(--salto);
}
.marca:hover .marca__iso{ transform:rotate(180deg) scale(1.12) }
.marca__txt{ font-size:14px; font-weight:600; letter-spacing:-.01em; white-space:nowrap }
.marca__txt em{ font-style:normal; font-weight:400; color:var(--texto-2); margin-left:.4em; transition:color .35s }
.marca:hover .marca__txt em{ color:var(--acento-txt) }

.tema{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--linea); background:var(--vidrio);
  color:var(--texto); cursor:pointer; display:grid; place-items:center;
  transition:transform .55s var(--salto),border-color .35s,background .35s;
}
.tema:hover{ transform:rotate(30deg) scale(1.08); border-color:var(--acento-txt) }
.tema:active{ transform:scale(.92) }
.tema__cara{ position:relative; width:18px; height:18px; display:block }
.tema__icono{
  position:absolute; inset:0; width:18px; height:18px; fill:currentColor;
  transition:opacity .4s var(--suave),transform .55s var(--suave);
}
html[data-tema="oscuro"] .tema__icono--sol{ opacity:0; transform:rotate(-90deg) scale(.4) }
html[data-tema="oscuro"] .tema__icono--luna{ opacity:1 }
html[data-tema="claro"] .tema__icono--luna{ opacity:0; transform:rotate(90deg) scale(.4) }
html[data-tema="claro"] .tema__icono--sol{ opacity:1; color:var(--acento) }

/* ===========================================================
   PORTADA
   =========================================================== */
main{ position:relative; z-index:2 }

.portada{
  width:100%; max-width:var(--ancho); margin:0 auto;
  padding:clamp(104px,15vh,168px) var(--lado) clamp(30px,5vh,52px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

/* ---------- Crovnic ---------- */
.escena-crovnic{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding-bottom:64px;
}
.halo{
  position:absolute; top:46%; left:50%; transform:translate(-50%,-50%);
  width:min(88%,330px); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(15,54,231,.34), transparent 68%);
  animation:respirar 7s ease-in-out infinite;
}
@keyframes respirar{
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:1 }
  50%{ transform:translate(-50%,-50%) scale(1.09); opacity:.76 }
}

.crovnic{
  position:relative; z-index:2;
  width:clamp(168px,23vw,236px); aspect-ratio:832/1043;
  filter:drop-shadow(0 28px 44px rgba(0,0,0,.5)) drop-shadow(0 4px 40px rgba(15,54,231,.42));
  animation:flotar 6.5s ease-in-out infinite;
  transition:rotate .8s var(--suave);
}
html[data-tema="claro"] .crovnic{
  filter:drop-shadow(0 22px 34px rgba(18,28,70,.26)) drop-shadow(0 4px 36px rgba(15,54,231,.26));
}
.crovnic__img{ position:absolute; inset:0; width:100%; height:100%; display:block }
/* Se anima "translate" (no "transform") para que main.js pueda girar
   a Crovnic con "rotate" sin que las dos cosas se pisen. */
@keyframes flotar{ 0%,100%{ translate:0 0 } 50%{ translate:0 -14px } }

/* Párpados: colocados sobre la posición medida de sus ojos (832x1043) */
.parpado{
  position:absolute; display:block; background:#05070d;
  border-radius:46% / 40%; filter:blur(1px);
  top:34.6%; height:8.2%;
  transform-origin:top center; transform:scaleY(0);
  animation:parpadear 7s ease-in-out infinite;
}
.parpado--izq{ left:44.6%; width:14.1% }
.parpado--der{ left:65.0%; width:14.3% }
@keyframes parpadear{
  0%,90%{ transform:scaleY(0) }
  91.5%{ transform:scaleY(1) }
  93%{ transform:scaleY(0) }
  94.5%{ transform:scaleY(1) }
  96%,100%{ transform:scaleY(0) }
}
/* Al pasar el cursor por Crovnic, parpadea seguido y con suavidad */
.escena-crovnic:hover .parpado{ animation:parpadear-suave 2.4s ease-in-out infinite }
@keyframes parpadear-suave{
  0%,52%{ transform:scaleY(0) }
  60%{ transform:scaleY(1) }
  69%{ transform:scaleY(0) }
  78%{ transform:scaleY(1) }
  87%,100%{ transform:scaleY(0) }
}

/* ---------- Burbuja ---------- */
.burbuja{
  --pico:11px;
  --corte:polygon(0 var(--pico), 43% var(--pico), 50% 0, 57% var(--pico),
                  100% var(--pico), 100% 100%, 0 100%);
  position:absolute; z-index:4; left:0; right:0; bottom:0; margin:0 auto;
  width:max-content; max-width:min(280px,92%);
  padding:calc(10px + var(--pico)) 18px 11px;
  font-size:14px; text-align:center;
  animation:burbujear 6.5s ease-in-out infinite;
  transition:transform .6s var(--suave);
}
.burbuja::before{
  content:""; position:absolute; inset:0; z-index:0; clip-path:var(--corte);
  background:linear-gradient(140deg,rgba(139,161,255,.85),rgba(139,161,255,.30));
}
.burbuja::after{
  content:""; position:absolute; inset:1px; z-index:1; clip-path:var(--corte);
  background:var(--vidrio-fuerte);
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
}
.burbuja__txt{ position:relative; z-index:2; display:block; color:var(--texto) }
.burbuja strong{ font-weight:600; color:var(--acento-txt) }
.burbuja__mano{ display:inline-block; transform-origin:70% 80%; animation:saludar 3.6s ease-in-out infinite }
@keyframes saludar{
  0%,72%,100%{ transform:rotate(0) }
  78%{ transform:rotate(16deg) } 84%{ transform:rotate(-10deg) } 90%{ transform:rotate(12deg) }
}
@keyframes burbujear{ 0%,100%{ translate:0 0 } 50%{ translate:0 -6px } }
.escena-crovnic:hover .burbuja{ transform:scale(1.04) }

/* ---------- Tipografía de portada ---------- */
.titular{
  margin-top:clamp(20px,3vw,30px);
  font-size:clamp(34px,6.4vw,68px);
  font-weight:600; line-height:1.06; letter-spacing:-.035em;
  text-wrap:balance;
}
.titular__acento{
  background:linear-gradient(102deg,#8ba1ff,#c9d5ff 46%,#7f96ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[data-tema="claro"] .titular__acento{
  background:linear-gradient(102deg,#0f36e7,#4a6cff 48%,#0f36e7);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.subtitulo{
  margin-top:clamp(12px,1.8vw,18px);
  font-size:clamp(15px,2vw,19px); font-weight:400; color:var(--texto-2);
  letter-spacing:-.012em;
}

/* ===========================================================
   BOTONES — apilados y centrados
   =========================================================== */
.acciones{
  display:grid; gap:12px;
  width:100%; max-width:420px; margin:clamp(30px,5vh,48px) auto 0;
}

.btn{
  position:relative; display:flex; align-items:center; gap:14px;
  width:100%; min-height:60px; padding:0 18px 0 20px;
  border:1px solid var(--btn-borde); border-radius:18px;
  background:var(--btn-cara);
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--sombra), inset 0 1px 0 rgba(255,255,255,.18);
  font-family:inherit; font-size:16px; font-weight:500; letter-spacing:-.014em;
  color:var(--texto); text-decoration:none; text-align:left; cursor:pointer;
  translate:var(--imx,0px) var(--imy,0px);
  transition:translate .5s var(--suave),scale .45s var(--suave),
             background .45s var(--suave),border-color .45s var(--suave),
             box-shadow .45s var(--suave),color .4s var(--suave);
}
.btn__icono{ width:22px; height:22px; flex:0 0 auto; display:block; transition:transform .55s var(--salto) }
.btn__icono svg{ width:22px; height:22px; fill:currentColor; display:block }
.btn__txt{ flex:1 1 auto }
.btn__flecha{ width:20px; height:20px; flex:0 0 auto; color:var(--texto-3); transition:transform .5s var(--salto),color .4s }
.btn__flecha svg{ width:20px; height:20px; display:block }

.btn:hover{ scale:1.015 }
.btn:active{ scale:.99 }
.btn:hover .btn__icono{ transform:scale(1.1) }
.btn:hover .btn__flecha{ transform:translateX(4px); color:#fff }

/* WhatsApp → verde */
.btn--wa:hover,.btn--wa:focus-visible{
  color:#fff; border-color:rgba(37,211,102,.55);
  background:linear-gradient(160deg,#2fd36f,#12a24a 62%,#0c7c39);
  box-shadow:0 18px 40px -18px rgba(37,211,102,.72), inset 0 1px 0 rgba(255,255,255,.34);
}
/* Portafolio → azul de marca */
.btn--porta:hover,.btn--porta:focus-visible{
  color:#fff; border-color:rgba(91,124,255,.55);
  background:linear-gradient(160deg,#5b7cff,#2c50f7 62%,#1839d8);
  box-shadow:0 18px 40px -18px rgba(47,82,238,.75), inset 0 1px 0 rgba(255,255,255,.34);
}
/* Próximamente → se queda apagado */
.btn--pronto{ cursor:default; color:var(--texto-2) }
.btn--pronto:hover{ scale:1 }
.btn--pronto:hover .btn__icono{ transform:none }
.btn__insignia{
  flex:0 0 auto; padding:5px 11px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--acento-txt); background:rgba(139,161,255,.13); border:1px solid var(--linea);
}
.btn--pronto.niega{ animation:negar .5s ease }
@keyframes negar{
  0%,100%{ translate:0 0 } 20%{ translate:-7px 0 }
  40%{ translate:6px 0 } 60%{ translate:-4px 0 } 80%{ translate:2px 0 }
}

.btn:focus-visible,.tema:focus-visible{ outline:2px solid var(--acento-txt); outline-offset:3px }

/* ===========================================================
   SERVICIOS — pastillas en desfile
   =========================================================== */
.servicios{ margin-top:clamp(26px,5vh,48px) }

.tira{
  position:relative; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.tira__pista{
  display:flex; width:max-content;
  animation:desfilar 58s linear infinite;   /* ritmo semilento */
  will-change:transform;
}
.tira:hover .tira__pista{ animation-play-state:paused }
.tira__grupo{ display:flex; align-items:center; gap:12px; padding-right:12px; list-style:none }

.chip{
  display:inline-flex; align-items:center; gap:9px; flex:0 0 auto;
  padding:11px 20px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--linea); background:var(--vidrio);
  -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%);
  font-size:15px; font-weight:450; letter-spacing:-.012em; color:var(--texto);
  transition:transform .5s var(--salto),border-color .4s var(--suave),background .4s var(--suave);
}
.chip__punto{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--acento-txt); box-shadow:0 0 0 0 rgba(139,161,255,.4);
  transition:box-shadow .4s var(--suave),transform .5s var(--salto);
}
.chip:hover{ transform:translateY(-4px); border-color:var(--acento-txt); background:var(--vidrio-fuerte) }
.chip:hover .chip__punto{ box-shadow:0 0 0 5px rgba(139,161,255,.16); transform:scale(1.2) }

/* ===========================================================
   PROYECTOS — galería en desfile
   =========================================================== */
.proyectos{ margin-top:clamp(24px,4.5vh,44px) }

/* El degradado de los extremos hace que las piezas se desvanezcan al entrar
   y al salir, en vez de cortarse de golpe al cerrar el bucle. */
.galeria{
  position:relative; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
}
.galeria__pista{
  display:flex; width:max-content;
  animation:desfilar 120s linear infinite;
  will-change:transform;
}
.galeria:hover .galeria__pista{ animation-play-state:paused }
.galeria__grupo{ display:flex; align-items:center; gap:clamp(12px,1.6vw,20px);
  padding-right:clamp(12px,1.6vw,20px); list-style:none }

/* Altura uniforme y ancho natural: cada pieza se ve entera, sin recortar. */
.obra{ position:relative; flex:0 0 auto; line-height:0 }
.obra img{
  display:block; height:clamp(186px,24vw,300px); width:auto;
  border-radius:18px;
  border:1px solid var(--linea);
  box-shadow:var(--sombra);
  transition:transform .55s var(--salto),box-shadow .5s var(--suave),border-color .45s var(--suave);
}
.obra:hover img{
  transform:translateY(-8px) scale(1.025);
  border-color:rgba(139,161,255,.5);
  box-shadow:0 26px 50px -22px rgba(15,54,231,.6);
}

/* Distintivo de las piezas que son animación */
.obra__play{
  position:absolute; right:12px; bottom:12px; z-index:2;
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:rgba(12,14,20,.58); border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .5s var(--salto),background .4s var(--suave);
}
.obra__play svg{ width:15px; height:15px; fill:#fff; display:block; margin-left:2px }
.obra:hover .obra__play{ transform:scale(1.14); background:rgba(15,54,231,.8) }

/* ===========================================================
   CLIENTES — logos en desfile
   =========================================================== */
.clientes{ margin-top:clamp(26px,5vh,50px); padding-bottom:clamp(24px,4vh,40px) }

.marquesina{
  position:relative; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquesina__pista{
  display:flex; width:max-content;
  animation:desfilar 46s linear infinite;
  will-change:transform;
}
.marquesina:hover .marquesina__pista{ animation-play-state:paused }
.marquesina__grupo{ display:flex; align-items:center; list-style:none }
.marquesina__grupo li{ flex:0 0 auto; padding:0 clamp(22px,4vw,46px) }

/* Cada logo lleva su propio ajuste (--g-osc / --g-clr) calculado a partir de
   su brillo real, para que todos aterricen en el mismo gris sin perder su
   forma. Al pasar el cursor recuperan su color original. */
.marquesina__grupo img{
  display:block; height:clamp(26px,3.6vw,36px); width:auto;
  max-width:150px; object-fit:contain;
  filter:grayscale(1) var(--g-tema,none); opacity:.6;
  transition:filter .45s var(--suave),opacity .45s var(--suave),transform .5s var(--salto);
}
html[data-tema="oscuro"] .marquesina__grupo img{ --g-tema:var(--g-osc) }
html[data-tema="claro"]  .marquesina__grupo img{ --g-tema:var(--g-clr) }
.marquesina__grupo li:hover img{ filter:none; opacity:1; transform:scale(1.12) }

/* un solo recorrido para las tres cintas */
@keyframes desfilar{
  from{ transform:translate3d(0,0,0) }
  to{ transform:translate3d(-50%,0,0) }
}

/* ===========================================================
   PIE
   =========================================================== */
.pie{
  position:relative; z-index:2; text-align:center;
  width:100%; max-width:var(--ancho); margin:0 auto;
  padding:0 var(--lado) calc(clamp(22px,4vh,34px) + env(safe-area-inset-bottom));
}
.pie__legal{ font-size:11.5px; color:var(--texto-3); letter-spacing:0 }

/* ===========================================================
   AJUSTES POR TAMAÑO
   =========================================================== */
@media (max-width:560px){
  .portada{ padding-top:clamp(96px,14vh,130px) }
  .marca__txt{ font-size:13px }
  .btn{ min-height:56px; font-size:15.5px }
  .chip{ padding:10px 17px; font-size:14px }
}

/* ===========================================================
   MODO LIGERO — lo activa main.js si el equipo va justo
   =========================================================== */
html.ligero .fondo-foto,
html.ligero .crovnic,
html.ligero .halo,
html.ligero .burbuja,
html.ligero .burbuja__mano{ animation:none }
html.ligero .grano{ display:none }
html.ligero .pastilla,
html.ligero .burbuja::after,
html.ligero .btn,
html.ligero .chip{ -webkit-backdrop-filter:none; backdrop-filter:none }
html.ligero .pastilla{ background:var(--fondo) }

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pastilla{ background:var(--fondo) }
  html[data-tema="oscuro"] .burbuja::after{ background:rgba(26,28,36,.96) }
  html[data-tema="claro"]  .burbuja::after{ background:rgba(255,255,255,.97) }
}