/* ==========================================================================
   AKYO S.R.L. — sistema de diseño
   Superficie oscura de punta a punta, azul eléctrico y cyan de marca.
   La única isla clara del sitio es la foto del producto: va sobre blanco
   para que el fondo blanco de la fotografía se funda con su contenedor y no
   quede "un cuadrado blanco dentro de otro cuadrado".
   El arco del logo es el motivo recurrente.
   ========================================================================== */

:root {
  --ink-900:#04070E;
  --ink-850:#060B16;
  --ink-800:#070E1B;
  --ink-700:#0D1728;
  --ink-600:#16243C;

  --cyan:#12C8F0;
  --cyan-claro:#5FE0FF;
  --azul:#0A6FD4;
  --azul-hondo:#064B96;
  --brand:linear-gradient(100deg,var(--azul) 0%,var(--cyan) 100%);
  --brand-suave:linear-gradient(100deg,rgba(10,111,212,.16),rgba(18,200,240,.16));

  /* Antes estos tokens eran blancos: el sitio era oscuro arriba y claro abajo.
     Ahora la superficie es oscura entera y los nombres se mantienen para no
     tocar 600 reglas. --papel = superficie base; --papel-2 = banda; --papel-3 =
     relieve dentro de una tarjeta. */
  --papel:#070C16;
  --papel-2:#0A1320;
  --papel-3:#101B2D;
  --borde:rgba(255,255,255,.085);
  --borde-fuerte:rgba(255,255,255,.18);
  --vidrio:rgba(255,255,255,.035);
  --vidrio-alto:rgba(255,255,255,.065);

  --tx:#EDF3FA;
  --tx-2:#A9BDD6;
  --tx-3:#8095B1;
  --tx-inv:#EAF2FB;
  --tx-inv-2:#9DB3CE;

  --radio:14px;
  --radio-lg:22px;
  --radio-xl:32px;
  --sombra:0 1px 2px rgba(0,0,0,.35),0 10px 28px -14px rgba(0,0,0,.7);
  --sombra-alta:0 2px 6px rgba(0,0,0,.4),0 30px 66px -26px rgba(0,0,0,.9);
  --ancho:1200px;
  --nav-h:122px;
  --nav-h-scroll:96px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-suave:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
/* El atributo hidden tiene que ganarle a cualquier display de clase. Sin esto,
   una tarjeta con display:flex que el filtro marca como oculta se seguía
   viendo: el filtro del catálogo y el buscador parecían no hacer nada. */
[hidden]{display:none !important}
/* Al saltar desde el menú, la sección arranca justo debajo de la barra; el
   aire hasta el título lo da el padding de arriba de la sección, que es el
   mismo que se ve al bajar con la rueda. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h-scroll)}
/* "Inicio" vuelve arriba de todo, no a media barra */
#inicio{scroll-margin-top:var(--nav-h)}
body{
  margin:0;color:var(--tx);
  /* sin background-attachment:fixed — en móvil obliga a repintar en cada scroll */
  background:var(--papel);
  font:400 17px/1.65 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:Sora,Inter,sans-serif;font-weight:800;line-height:1.08;letter-spacing:-.028em;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}

.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:24px}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:12px;top:12px;z-index:200;background:var(--papel);color:var(--tx);
  padding:12px 18px;border-radius:10px;box-shadow:var(--sombra-alta)}

/* ==========================================================================
   MOVIMIENTO — todo lo animado se apaga junto si el sistema lo pide
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .blob,.hero__canvas,.rejilla-viva{display:none!important}
}

@keyframes flotar-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(6%,-8%,0) scale(1.12)}
  66%{transform:translate3d(-5%,6%,0) scale(.94)}
}
@keyframes flotar-b{
  0%,100%{transform:translate3d(0,0,0) scale(1.05)}
  50%{transform:translate3d(-8%,-6%,0) scale(.9)}
}
@keyframes deriva{ from{background-position:0 0} to{background-position:64px 64px} }
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(18,200,240,.55)}
  70%{box-shadow:0 0 0 9px rgba(18,200,240,0)}
  100%{box-shadow:0 0 0 0 rgba(18,200,240,0)}
}
@keyframes brillo{ from{transform:translateX(-120%) skewX(-18deg)} to{transform:translateX(320%) skewX(-18deg)} }
@keyframes subir{ from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes kenburns{ from{transform:scale(1)} to{transform:scale(1.09)} }

/* aparición al hacer scroll. Por defecto TODO es visible: el estado oculto solo
   existe si el script marcó <html class="js">. Sin JS nada queda en blanco. */
html.js .rev{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
html.js .rev.dentro{opacity:1;transform:none}
html.js .rev-hijos > *{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .rev-hijos.dentro > *{opacity:1;transform:none}
html.js .rev-hijos.dentro > *:nth-child(1){transition-delay:.02s}
html.js .rev-hijos.dentro > *:nth-child(2){transition-delay:.07s}
html.js .rev-hijos.dentro > *:nth-child(3){transition-delay:.12s}
html.js .rev-hijos.dentro > *:nth-child(4){transition-delay:.17s}
html.js .rev-hijos.dentro > *:nth-child(5){transition-delay:.22s}
html.js .rev-hijos.dentro > *:nth-child(6){transition-delay:.27s}
html.js .rev-hijos.dentro > *:nth-child(7){transition-delay:.32s}
html.js .rev-hijos.dentro > *:nth-child(8){transition-delay:.37s}
@media (prefers-reduced-motion:reduce){
  html.js .rev,html.js .rev-hijos > *{opacity:1;transform:none}
}

/* blobs de fondo reutilizables */
.blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.blob--cyan{background:radial-gradient(circle,rgba(18,200,240,.42),transparent 70%);animation:flotar-a 19s var(--ease-suave) infinite}
.blob--azul{background:radial-gradient(circle,rgba(10,111,212,.40),transparent 70%);animation:flotar-b 24s var(--ease-suave) infinite}
.rejilla-viva{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  animation:deriva 26s linear infinite;
  -webkit-mask-image:radial-gradient(78% 66% at 30% 34%,#000 30%,transparent 100%);
          mask-image:radial-gradient(78% 66% at 30% 34%,#000 30%,transparent 100%);
}

/* ---------- utilidades de sección ---------- */
/* Aire entre el menú y el título: ~75px en toda la web, la mitad de antes.
   Secciones de la home: 76px arriba (antes 120). Primera sección de las
   páginas internas: 24px, porque arriba ya están las migas (~50px).
   Abajo se deja más, para que las secciones no se peguen entre sí. */
.seccion{padding:clamp(48px,6vw,76px) 0 clamp(64px,8vw,110px);position:relative}
.seccion--ajustada{padding:clamp(18px,2vw,24px) 0 clamp(48px,5vw,76px)}
/* Toda la superficie es oscura: el ritmo entre secciones lo marca el tono, no
   el contraste claro/oscuro. .oscura es la banda más profunda, .suave la
   intermedia, y la base queda en el medio. */
.oscura{background:var(--ink-900);color:var(--tx-inv);position:relative;overflow:hidden;isolation:isolate}
.oscura > .contenedor{position:relative;z-index:2}
.oscura h1,.oscura h2,.oscura h3{color:#fff}
.oscura p{color:var(--tx-inv-2)}
.suave{background:var(--papel-2);border-block:1px solid var(--borde)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font:600 12px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan-claro);margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--brand)}

.titulo{font-size:clamp(30px,4.4vw,52px)}
.titulo-xl{font-size:clamp(38px,5.6vw,70px);line-height:1.03;letter-spacing:-.038em}
.bajada{margin-top:18px;font-size:clamp(16px,1.5vw,19px);color:var(--tx-2);max-width:62ch}
.oscura .bajada{color:var(--tx-inv-2)}
/* Sin degradado: los títulos van en un solo color, blanco. La clase queda
   para poder volver atrás tocando solo esta regla. */
.acento{color:inherit}

.cab-seccion{max-width:70ch;margin-bottom:clamp(34px,4vw,56px)}
.cab-seccion--fila{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;max-width:none}
@media (max-width:760px){.cab-seccion--fila{flex-direction:column;align-items:flex-start}}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font:600 15.5px/1 Inter,sans-serif;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),
             background .25s,color .25s,border-color .25s;
}
.btn > *{position:relative;z-index:1}
.btn svg{width:18px;height:18px;flex:none}
/* El botón no se mueve al pasar el mouse: cambia el color y pasa el reflejo,
   nada más. Solo se hunde un poco al apretarlo, que es respuesta al clic. */
.btn:active{transform:translateY(1px)}
/* Reflejo que, al pasar el mouse, cruza el botón y vuelve: ida y vuelta de
   una sola vez (Gonzalo no lo quería "ida al entrar, vuelta al salir").
   En reposo queda bien afuera del botón: la primera versión descansaba
   pegada al borde izquierdo y sobre el redondeado asomaban pixeles celestes. */
.btn::after{
  content:"";position:absolute;top:-40%;left:0;width:40%;height:180%;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-175%) skewX(-18deg);
}
.btn:hover::after{animation:reflejo-ida-vuelta .9s ease-in-out}
@keyframes reflejo-ida-vuelta{
  0%,100%{transform:translateX(-175%) skewX(-18deg)}
  50%{transform:translateX(345%) skewX(-18deg)}
}
.btn--primario{background:var(--brand);color:#fff;
  box-shadow:0 10px 30px -10px rgba(10,111,212,.7)}
.btn--primario:hover{filter:saturate(1.12) brightness(1.06);
  box-shadow:0 20px 44px -12px rgba(18,200,240,.72)}
.btn--wa{background:#25D366;color:#06331A;box-shadow:0 10px 30px -12px rgba(37,211,102,.6)}
.btn--wa:hover{background:#22c760;box-shadow:0 20px 42px -14px rgba(37,211,102,.75)}
.btn--fantasma{
  background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.2);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--fantasma:hover{background:rgba(255,255,255,.11);border-color:var(--cyan);color:#fff;
  box-shadow:0 16px 34px -18px rgba(18,200,240,.6)}
.btn--sm{padding:11px 20px;font-size:14px}

.enlace-flecha{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--cyan-claro)}
.enlace-flecha svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.enlace-flecha:hover svg{transform:translateX(5px)}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:100;height:var(--nav-h);
  background:rgba(6,11,22,.72);backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .35s var(--ease-suave),box-shadow .35s var(--ease-suave),
             border-color .35s;
}
.nav[data-scroll="true"]{
  height:var(--nav-h-scroll);
  background:rgba(5,9,18,.93);box-shadow:0 12px 34px -18px rgba(0,0,0,.9);
  border-bottom-color:rgba(255,255,255,.11);
}
/* La barra y el logo se achican juntos y despacio al bajar: la transición es más
   larga y con una curva pareja, sin el arranque de golpe de la anterior. */
.nav,.nav__placa,.nav__placa img{transition:height .6s var(--ease-suave),padding .6s var(--ease-suave),
  background .35s var(--ease-suave),box-shadow .35s var(--ease-suave),border-color .35s}
.nav__in{height:100%;display:flex;align-items:center;gap:26px}

/* El logo original es tinta oscura: va sobre una placa clara con aire, que es
   como se integra sin recolorearlo ni encajonarlo. */
.nav__logo{display:flex;align-items:center;flex:none}
.nav__placa{
  display:grid;place-items:center;padding:4px 18px;border-radius:16px;
  background:#fff;border:1px solid rgba(18,200,240,.55);
  /* el brillo celeste que tenía el logo en la web de Antigravity */
  box-shadow:0 4px 22px rgba(18,200,240,.34),0 0 0 1px rgba(10,111,212,.18);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s,
             padding .35s var(--ease);
}
.nav__placa img{height:96px;width:auto;display:block}
.nav__placa{position:relative;overflow:hidden}
.nav__placa::after{
  content:"";position:absolute;top:-40%;left:0;width:40%;height:180%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-175%) skewX(-18deg);
}
.nav__placa.brilla::after,
.nav__logo:hover .nav__placa::after{animation:reflejo-ida-vuelta .9s ease-in-out}
.nav[data-scroll="true"] .nav__placa{padding:3px 15px;border-radius:13px}
.nav[data-scroll="true"] .nav__placa img{height:72px}
@media (max-width:600px){
  :root{--nav-h:96px;--nav-h-scroll:80px}
  .nav__placa img{height:70px}
  .nav[data-scroll="true"] .nav__placa img{height:56px}
}
.nav__logo:hover .nav__placa{
  transform:translateY(-1px);border-color:var(--cyan);
  box-shadow:0 6px 28px rgba(18,200,240,.58),0 0 0 1px rgba(18,200,240,.45);
}

.nav__menu{display:flex;align-items:center;gap:2px;margin-left:auto;position:relative}
/* Con el logo más grande, los ítems se achicaban y el texto quedaba corrido
   hacia arriba: ahora no se encogen ni cortan línea. */
.nav__menu > li{flex:none}
.nav__menu a:not(.btn){
  position:relative;padding:10px 13px;border-radius:999px;color:#C3D5EC;white-space:nowrap;
  font:500 15px/1 Inter,sans-serif;transition:color .25s;z-index:1;
}
.nav__menu a:not(.btn)::after{              /* subrayado que crece desde el centro */
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:2px;
  background:var(--brand);transform:scaleX(0);transform-origin:center;
  transition:transform .4s var(--ease);
}
.nav__menu a:not(.btn):hover{color:#fff}
.nav__menu a:not(.btn):hover::after{transform:scaleX(1)}
.nav__menu a[aria-current="page"]{color:#fff}
.nav__menu a[aria-current="page"]::after{transform:scaleX(1)}
/* píldora que se desliza siguiendo al mouse */
.nav__pildora{
  position:absolute;top:50%;left:0;height:38px;border-radius:999px;z-index:0;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);
  transform:translateY(-50%);opacity:0;pointer-events:none;
  transition:width .42s var(--ease),transform .42s var(--ease),opacity .3s;
}
.nav__menu[data-pildora="true"] .nav__pildora{opacity:1}

.nav__cta{flex:none;margin-left:8px}
/* El botón del menú en el celular: antes eran tres rayitas finas sueltas que se
   perdían contra la barra oscura. Ahora van en una placa con borde celeste,
   más gruesas, para que se vea de un vistazo que ahí está el menú. */
.nav__burger{display:none;margin-left:auto;cursor:pointer;
  width:48px;height:48px;padding:0;place-items:center;border-radius:14px;
  background:rgba(18,200,240,.12);border:1px solid rgba(18,200,240,.55);
  box-shadow:0 0 18px -4px rgba(18,200,240,.55);
  transition:background .25s,border-color .25s}
.nav__burger:hover,.nav__burger[aria-expanded="true"]{background:rgba(18,200,240,.22);border-color:var(--cyan)}
.nav__burger span{display:block;width:24px;height:3px;background:#fff;border-radius:3px;margin:0 auto;
  transition:transform .35s var(--ease),opacity .2s}
.nav__burger span+span{margin-top:5px}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* con el logo más grande, el botón de presupuesto deja lugar antes */
@media (max-width:1180px){.nav__cta{display:none}}
@media (max-width:960px){
  .nav__burger{display:grid;align-content:center}
  .nav__pildora{display:none}
  .nav__menu{
    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(6,11,22,.98);backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.1);padding:14px 20px 26px;margin:0;
    transform:translateY(-10px);opacity:0;pointer-events:none;
    transition:opacity .3s,transform .3s var(--ease);
    max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
  }
  .nav__menu[data-abierto="true"]{transform:none;opacity:1;pointer-events:auto}
  .nav__menu a:not(.btn){padding:15px 12px;border-radius:12px;font-size:17px}
  .nav__menu a:not(.btn)::after{display:none}
  .nav__menu a:not(.btn):hover{background:rgba(255,255,255,.07)}
  .nav__menu .nav__cta{display:block;margin:12px 0 0}
  .nav__menu .btn{width:100%}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;background:var(--ink-900);color:var(--tx-inv);
  padding:clamp(56px,7vw,92px) 0 clamp(64px,8vw,104px);
  overflow:hidden;isolation:isolate;
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.75}
.hero .blob--cyan{width:min(640px,80vw);height:min(640px,80vw);top:-24%;right:-14%}
.hero .blob--azul{width:min(560px,70vw);height:min(560px,70vw);bottom:-30%;left:-16%}
.hero__arco{position:absolute;inset:-28% -12% auto auto;width:min(1000px,100vw);z-index:1;opacity:.4;pointer-events:none}
.hero__in{position:relative;z-index:3;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,5vw,60px);align-items:center}
@media (max-width:980px){.hero__in{grid-template-columns:1fr}}

.chip{
  display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;
  background:rgba(18,200,240,.1);border:1px solid rgba(18,200,240,.3);
  font:600 12.5px/1 Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:var(--cyan-claro);
}
.chip__punto{width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:pulso 2.4s infinite}

.hero h1{margin:22px 0 0;color:#fff}
html.js .hero h1,html.js .hero__sub,html.js .hero__acciones,
html.js .hero__pie,html.js .hero .chip{animation:subir .9s var(--ease) both}
html.js .hero h1{animation-delay:.06s}
html.js .hero__sub{animation-delay:.14s}
html.js .hero__acciones{animation-delay:.22s}
html.js .hero__pie{animation-delay:.3s}

.hero__sub{margin-top:20px;font-size:clamp(16.5px,1.7vw,20px);color:#A9C0DC;max-width:56ch}
/* Palabra que rota en la bajada. Va posicionada en absoluto dentro de una caja
   que reserva el ancho de la variante mas larga: asi no salta el texto de al lado
   ni se despega de la linea base. */
.rotador{position:relative;display:inline-block;vertical-align:bottom;
  min-width:min(18.5ch,100%);height:1.55em;overflow:hidden}
.rotador b{
  position:absolute;left:0;top:0;white-space:nowrap;line-height:1.55;
  font-weight:700;color:var(--cyan-claro);
  opacity:0;transform:translateY(85%);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.rotador b[data-activo="true"]{opacity:1;transform:none}

.hero__acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__pie{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;
  gap:14px 44px;margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1)}
.hero__pie div{display:flex;flex-direction:column;gap:3px}
.hero__pie b{font:800 27px/1.1 Sora,sans-serif;color:#fff;letter-spacing:-.03em;white-space:nowrap}
.hero__pie span{font-size:13px;color:#8FA6C4;line-height:1.3}
@media (max-width:560px){.hero__pie{grid-template-columns:1fr 1fr;gap:20px 24px}}

/* --- vitrina rotativa de equipos --- */
.vitrina{position:relative}
.vitrina__marco{
  position:relative;background:linear-gradient(170deg,#fff,#EDF3FA);
  border-radius:var(--radio-xl);padding:clamp(20px,3vw,34px);
  box-shadow:0 44px 96px -34px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.16);
  aspect-ratio:1/.86;display:grid;place-items:center;overflow:hidden;
}
.vitrina__marco::before{                    /* halo de marca por detrás */
  content:"";position:absolute;inset:auto -10% -46% -10%;height:60%;z-index:0;
  background:var(--brand);opacity:.5;filter:blur(52px);border-radius:50%;
}
.vitrina__foto{grid-area:1/1;position:relative;z-index:1;width:100%;height:100%;
  display:grid;place-items:center;opacity:0;transition:opacity .9s var(--ease-suave)}
.vitrina__foto[data-activo="true"]{opacity:1}
.vitrina__foto img{max-height:100%;width:auto;object-fit:contain}
html.js .vitrina__foto[data-activo="true"] img{animation:kenburns 7s linear both}
.vitrina__etiqueta{
  position:absolute;left:clamp(-12px,-1vw,0px);bottom:24px;z-index:4;
  background:rgba(13,23,40,.94);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:13px 20px;box-shadow:0 20px 44px -20px rgba(0,0,0,.9);
  backdrop-filter:blur(6px);
}
.vitrina__etiqueta b{display:block;font:700 16px/1.2 Sora,sans-serif;color:#fff}
.vitrina__etiqueta span{font-size:12.5px;color:var(--cyan-claro)}
.vitrina__puntos{display:flex;gap:7px;justify-content:center;margin-top:18px}
.vitrina__puntos button{
  width:26px;height:4px;border-radius:2px;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.22);transition:background .3s,width .3s var(--ease);
}
.vitrina__puntos button[aria-selected="true"]{background:var(--brand);width:42px}

/* --- credencial Kyocera --- */
.oficial{
  display:inline-flex;align-items:center;gap:16px;padding:14px 22px 14px 16px;
  border-radius:18px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);
  transition:border-color .35s,background .35s,transform .4s var(--ease);
}
.oficial:hover{background:rgba(255,255,255,.09);border-color:rgba(18,200,240,.5)}
/* el wordmark blanco va directo sobre el vidrio oscuro: sin placa no se ensucia */
.oficial__logo{flex:none;display:grid;place-items:center;padding-right:16px;
  border-right:1px solid rgba(255,255,255,.16)}
.oficial__logo img{height:30px;width:auto}
.oficial__txt b{display:block;font:700 15.5px/1.25 Sora,sans-serif;color:#fff;letter-spacing:-.015em}
.oficial__txt > span{font-size:13px;color:var(--tx-inv-2)}
/* Antes habia una variante para fondo claro. Con el sitio oscuro entero, no
   hace falta: se deja igual a la normal para no romper las llamadas viejas. */
.oficial--claro{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14)}
/* variante de una sola línea: sin subtítulo, el bloque se achica */
.oficial--simple{padding:12px 20px 12px 14px}
.oficial--simple .oficial__txt b{font-size:14.5px}
/* En el celular el sello no entra de una: se acomoda en dos líneas en vez
   de salirse del pie y quedar cortado. */
@media (max-width:560px){
  .oficial{flex-wrap:wrap;gap:8px}
  .oficial__logo{padding-right:12px}
  .oficial--simple .oficial__txt b{font-size:13.5px}
}

/* ==========================================================================
   CATEGORÍAS
   ========================================================================== */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px}
/* con cinco tarjetas, tres columnas dejan 3+2 en vez de 4+1 huerfana */
.cats--anchas{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.cat{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:26px 24px 24px;border-radius:var(--radio-lg);
  background:var(--vidrio);border:1px solid var(--borde);overflow:hidden;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s;
}
.cat::before{                                /* barra de marca que se despliega */
  content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.cat::after{                                 /* resplandor que sigue al mouse */
  content:"";position:absolute;width:300px;height:300px;border-radius:50%;z-index:0;
  left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(18,200,240,.16),transparent 68%);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.cat:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta);
  background:var(--vidrio-alto);border-color:transparent}
.cat:hover::before{transform:scaleX(1)}
.cat:hover::after{opacity:1}
.cat > *{position:relative;z-index:1}
.cat__ico{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:var(--brand-suave);color:var(--cyan-claro);border:1px solid rgba(18,200,240,.24);
  transition:transform .45s var(--ease),background .35s,color .35s;
}
.cat__ico svg{width:24px;height:24px}
.cat:hover .cat__ico{transform:scale(1.08) rotate(-4deg);background:var(--brand);color:#fff;border-color:transparent}
.cat h3{font-size:17.5px;letter-spacing:-.02em}
.cat p{font-size:14.5px;color:var(--tx-2);line-height:1.55}
.cat__n{margin-top:auto;padding-top:12px;font:600 13px/1 Inter,sans-serif;color:var(--cyan-claro);
  display:flex;align-items:center;gap:7px}
.cat__n svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.cat:hover .cat__n svg{transform:translateX(4px)}

/* ==========================================================================
   CATÁLOGO
   ========================================================================== */
.filtros{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px}
.filtro{
  position:relative;padding:10px 18px;border-radius:999px;border:1px solid var(--borde);
  background:var(--vidrio);font:500 14.5px/1 Inter,sans-serif;color:var(--tx-2);cursor:pointer;
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease),box-shadow .3s;
}
.filtro:hover{background:var(--vidrio-alto);border-color:var(--borde-fuerte);
  color:var(--tx);transform:translateY(-2px);box-shadow:var(--sombra)}
.filtro[aria-pressed="true"]{background:var(--brand);border-color:transparent;color:#fff;
  box-shadow:0 12px 26px -12px rgba(18,200,240,.6)}
.filtro span{opacity:.55;margin-left:5px}

.interruptor{
  display:inline-flex;align-items:center;gap:11px;margin:0 0 30px;cursor:pointer;
  font:500 14.5px/1 Inter,sans-serif;color:var(--tx-2);user-select:none;
}
.interruptor input{position:absolute;opacity:0;width:0;height:0}
.interruptor__pista{
  width:44px;height:25px;border-radius:999px;background:var(--papel-3);
  border:1px solid var(--borde-fuerte);position:relative;transition:background .3s,border-color .3s;
  flex:none;
}
.interruptor__pista::after{
  content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(11,18,32,.28);transition:transform .32s var(--ease);
}
.interruptor input:checked + .interruptor__pista{background:var(--brand);border-color:transparent}
.interruptor input:checked + .interruptor__pista::after{transform:translateX(19px)}
.interruptor input:focus-visible + .interruptor__pista{outline:3px solid var(--cyan);outline-offset:3px}

.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:20px}
.tarjeta{
  position:relative;display:flex;flex-direction:column;background:var(--vidrio);
  border:1px solid var(--borde);border-radius:var(--radio-lg);overflow:hidden;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s;
}
.tarjeta::before{                            /* borde degradado al pasar el mouse */
  content:"";position:absolute;inset:0;border-radius:var(--radio-lg);padding:1px;z-index:2;
  background:var(--brand);opacity:0;transition:opacity .4s;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* Al pasar el mouse la tarjeta NO se mueve: se enciende el borde de marca, la
   sombra gana un poco de profundidad y la foto respira apenas. El salto de
   7 px y la inclinación 3D quedaron afuera: eran demasiado. */
.tarjeta:hover{box-shadow:0 20px 46px -28px rgba(0,0,0,.85);border-color:transparent}
.tarjeta:hover::before{opacity:1}
.tarjeta__img{position:relative;aspect-ratio:4/3;background:#fff;
  display:grid;place-items:center;padding:22px;overflow:hidden}
/* El resplandor de marca al pasar el mouse va como sombra del contenedor, no
   como mancha dentro del blanco de la foto. */
.tarjeta__img{box-shadow:inset 0 0 0 1px rgba(11,18,32,.05);
  transition:box-shadow .45s var(--ease)}
.tarjeta:hover .tarjeta__img{box-shadow:inset 0 0 0 1px rgba(18,200,240,.35),
  0 14px 34px -18px rgba(18,200,240,.55)}
.tarjeta__img img{position:relative;z-index:1;max-height:100%;width:auto;object-fit:contain;
  transition:transform .55s var(--ease-suave)}
.tarjeta:hover .tarjeta__img img{transform:scale(1.035)}
.tarjeta__cuerpo{padding:18px 20px 22px;border-top:1px solid var(--borde);
  display:flex;flex-direction:column;gap:7px;flex:1}
.tarjeta__marca{font:600 11.5px/1 Inter,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-3)}
.tarjeta h3{font-size:18px;letter-spacing:-.025em}
.tarjeta__desc{font-size:14px;color:var(--tx-2);line-height:1.5}
.tarjeta__pie{margin-top:auto;padding-top:14px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;font:600 13.5px/1 Inter,sans-serif;color:var(--cyan-claro)}
.tarjeta__pie svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.tarjeta:hover .tarjeta__pie svg{transform:translateX(5px)}
.tarjeta a::after{content:"";position:absolute;inset:0;z-index:3}
.tarjeta--disc{background:rgba(255,255,255,.02)}
.tarjeta--disc .tarjeta__img{background:#F2F5F9}
.tarjeta--disc .tarjeta__pie{color:var(--tx-3)}

.insignia{
  position:absolute;top:12px;left:12px;z-index:4;padding:5px 11px;border-radius:999px;
  font:600 11px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;
}
.insignia--disc{background:rgba(7,12,22,.88);color:#CBD9EC;border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px)}
.insignia--vig{background:var(--brand);color:#fff}
.vacio{padding:56px 0;text-align:center;color:var(--tx-2)}

/* ==========================================================================
   BANDAS
   ========================================================================== */
.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(32px,5vw,64px);align-items:center}
.beneficios{display:grid;gap:14px;margin-top:30px}
.beneficio{display:flex;gap:15px;align-items:flex-start}
.beneficio__ico{
  flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(18,200,240,.12);border:1px solid rgba(18,200,240,.26);color:var(--cyan-claro);
  transition:transform .4s var(--ease),background .3s;
}
.beneficio:hover .beneficio__ico{transform:scale(1.1) rotate(-5deg);background:rgba(18,200,240,.22)}
.beneficio__ico svg{width:20px;height:20px}
.beneficio b{display:block;font:700 16px/1.35 Sora,sans-serif;color:#fff;margin-bottom:3px;letter-spacing:-.015em}
.beneficio p{font-size:14.5px;color:var(--tx-inv-2);line-height:1.55}

.panel{
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.13);border-radius:var(--radio-xl);
  padding:clamp(26px,3.4vw,40px);backdrop-filter:blur(8px);
}

.legado{
  background:linear-gradient(140deg,var(--ink-700),var(--ink-850) 62%);
  border-radius:var(--radio-xl);padding:clamp(30px,4vw,52px);color:var(--tx-inv);
  position:relative;overflow:hidden;isolation:isolate;
}
.legado .blob--cyan{width:420px;height:420px;top:-40%;right:-10%;filter:blur(80px);opacity:.5}
.legado > *:not(.blob){position:relative;z-index:1}
.legado h2{color:#fff;font-size:clamp(25px,3.2vw,38px)}
.legado__lista{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.legado__lista a{
  padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);font:500 14px/1 Inter,sans-serif;color:#D3E3F7;
  transition:background .28s,border-color .28s,color .28s,transform .35s var(--ease);
}
.legado__lista a:hover{background:rgba(18,200,240,.18);border-color:var(--cyan);color:#fff;transform:translateY(-3px)}

/* ==========================================================================
   FICHA DE PRODUCTO
   ========================================================================== */
.migas{padding:13px 0;font-size:14px;color:var(--tx-3);border-bottom:1px solid var(--borde)}
.migas ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.migas li{display:flex;align-items:center;gap:8px}
.migas li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--borde-fuerte)}
.migas a{transition:color .25s}
.migas a:hover{color:var(--cyan-claro)}
.migas [aria-current]{color:var(--tx);font-weight:500}

.ficha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,64px);align-items:start;padding:clamp(18px,2vw,24px) 0 clamp(36px,5vw,64px)}
@media (max-width:900px){.ficha{grid-template-columns:1fr}}
.ficha__visual{position:sticky;top:calc(var(--nav-h) + 24px)}
@media (max-width:900px){.ficha__visual{position:static}}
.ficha__marco{
  /* Blanco plano, no degradado: la foto del equipo TAMBIÉN es blanca, y con un
     degradado detrás se marcaba el borde del JPG — el cuadrado blanco dentro
     del cuadrado blanco que hay que evitar. */
  position:relative;background:#fff;
  border:1px solid var(--borde);border-radius:var(--radio-xl);
  padding:clamp(26px,4vw,52px);display:grid;place-items:center;min-height:330px;overflow:hidden;
}
/* La profundidad va POR FUERA del marco. Antes había un resplandor de marca
   dentro, que teñía el blanco del panel y dejaba ver el borde de la foto. */
.ficha__marco{
  box-shadow:0 26px 60px -28px rgba(0,0,0,.9),0 0 46px -18px rgba(18,200,240,.28);
}
/* En las fichas de archivo la foto acompaña, no manda: marco más chico. */
.ficha__marco--chico{max-width:420px;min-height:0;margin:26px 0 30px;
  padding:clamp(18px,3vw,30px)}
.ficha__marco--chico img{max-height:280px}
.ficha__marco img{position:relative;max-height:400px;width:auto;object-fit:contain;
  transition:transform .6s var(--ease)}
.ficha__marco:hover img{transform:scale(1.04)}
.ficha__marco--vacio{color:#6B7C96;font-size:14.5px;text-align:center}
.ficha__cab h1{font-size:clamp(30px,4.2vw,46px);margin-top:12px}
.ficha__tag{margin-top:14px;font-size:18px;color:var(--tx-2)}
.ficha__acciones{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.ficha__bloque{margin-top:38px}
.ficha__bloque h2{font-size:19px;letter-spacing:-.02em;margin-bottom:16px}
.ficha__parr p+p{margin-top:14px}
.ficha__parr p{color:var(--tx-2)}

.puntos{display:grid;gap:11px}
.puntos li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--tx-2);line-height:1.55}
.puntos svg{flex:none;width:19px;height:19px;margin-top:2px;color:var(--cyan)}

.specs{width:100%;border-collapse:collapse;font-size:15px}
.specs th,.specs td{padding:13px 2px;text-align:left;border-bottom:1px solid var(--borde);vertical-align:top}
.specs th{font-weight:500;color:var(--tx-3);width:44%}
.specs td{font-weight:600;color:var(--tx)}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}

.aviso{
  display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:var(--radio);
  background:linear-gradient(135deg,rgba(214,158,46,.14),rgba(214,158,46,.06));
  border:1px solid rgba(232,180,72,.34);margin-bottom:26px;
}
.aviso svg{flex:none;width:22px;height:22px;color:#F0BE5C;margin-top:1px}
.aviso b{display:block;font:700 15.5px/1.4 Sora,sans-serif;color:#FBE0A6;margin-bottom:5px}
.aviso p{font-size:14.5px;color:#DCC79A;line-height:1.55}
.aviso a{color:#FBE0A6;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,60px);align-items:start}
@media (max-width:900px){.contacto{grid-template-columns:1fr}}
.vias{display:grid;gap:12px;margin-top:32px}
.via{
  display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:var(--radio);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  transition:background .3s,border-color .3s,transform .38s var(--ease);
}
.via:hover{background:rgba(255,255,255,.09);border-color:var(--cyan);transform:translateX(5px)}
.via__ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(18,200,240,.13);color:var(--cyan-claro)}
.via__ico svg{width:20px;height:20px}
.via b{display:block;font:700 16px/1.3 Sora,sans-serif;color:#fff}
.via span{font-size:14px;color:var(--tx-inv-2)}

.campo{display:block;margin-bottom:16px}
.campo span{display:block;font:600 13.5px/1 Inter,sans-serif;color:var(--tx-2);margin-bottom:8px}
.campo input,.campo textarea{
  width:100%;padding:13px 15px;border-radius:11px;border:1px solid var(--borde-fuerte);
  background:rgba(255,255,255,.05);color:var(--tx);font:400 15.5px/1.5 Inter,sans-serif;
  transition:border-color .25s,box-shadow .25s;
}
.campo textarea{min-height:120px;resize:vertical}
.form-aviso{
  margin-top:14px;padding:12px 15px;border-radius:12px;font-size:13.5px;line-height:1.5;
  background:rgba(18,200,240,.1);border:1px solid rgba(18,200,240,.3);color:#CFEFFB;
}
.form-aviso[hidden]{display:none}
.form-aviso a{color:var(--cyan-claro);font-weight:600}
.campo input:focus,.campo textarea:focus{
  outline:0;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(18,200,240,.16)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.pie{background:#02040A;color:var(--tx-inv-2);border-top:1px solid var(--borde);
  padding:clamp(48px,6vw,78px) 0 0;position:relative;overflow:hidden;isolation:isolate}
.pie > .contenedor{position:relative;z-index:1}

/* fila de arriba: la marca dice quién es y se calla */
.pie__alto{display:flex;align-items:center;gap:clamp(18px,3vw,34px);flex-wrap:wrap;
  padding-bottom:clamp(30px,4vw,44px)}
.pie__placa{display:inline-grid;place-items:center;padding:12px 18px;border-radius:15px;
  background:#fff;box-shadow:0 14px 34px -22px rgba(0,0,0,.9)}
.pie__placa img{height:42px;width:auto;display:block}
.pie__lema{flex:1 1 280px;min-width:240px;font-size:14.5px;line-height:1.6;max-width:46ch;margin:0}
.pie__sello{flex:none}

/* tira de datos: rótulo chico arriba, dato abajo. Nada más. */
.pie__tira{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px);
  padding:clamp(28px,4vw,40px) 0;border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08)}
.pie__rotulo{display:block;margin-bottom:12px;font:600 11px/1 Inter,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.pie__celda p{margin:0;font-size:14.5px;line-height:1.7;color:var(--tx-inv-2)}
.pie__celda a{transition:color .25s}
.pie__celda a:hover{color:var(--cyan-claro)}
@media (max-width:860px){.pie__tira{grid-template-columns:1fr 1fr}}
.pie__domicilio{font-size:12px;color:var(--tx-3);opacity:.8}
@media (max-width:520px){.pie__tira{grid-template-columns:1fr}}

/* los enlaces en una sola línea, no en cuatro listas que compiten */
.pie__enlaces{display:flex;flex-wrap:wrap;gap:10px 26px;padding:clamp(24px,3vw,32px) 0}
.pie__enlaces a{font-size:14px;color:var(--tx-2);transition:color .25s}
.pie__enlaces a:hover{color:#fff}

.pie__legal{padding:20px 0 24px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--tx-3)}

/* ==========================================================================
   WHATSAPP FLOTANTE
   Entra desde la derecha unos instantes después de cargar y late en silencio:
   se hace notar sin taparle nada a nadie.
   ========================================================================== */
@keyframes wa-entrada{ from{opacity:0;transform:translateX(96px)} to{opacity:1;transform:none} }
@keyframes wa-latido{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.5),0 12px 30px -8px rgba(37,211,102,.6)}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0),0 12px 30px -8px rgba(37,211,102,.6)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0),0 12px 30px -8px rgba(37,211,102,.6)}
}
.wa{
  position:fixed;right:20px;bottom:20px;z-index:90;width:60px;height:60px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;color:#fff;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.65);
  transition:transform .38s var(--ease),background .25s linear,box-shadow .38s var(--ease);
  animation:wa-entrada 1s var(--ease) .6s both,wa-latido 2.6s infinite 2.2s;
}
.wa:hover{transform:translateY(-4px) scale(1.06);background:#128C7E;
  box-shadow:0 20px 44px -10px rgba(37,211,102,.8)}
.wa svg{width:31px;height:31px}
/* globo con el texto, al estilo del botón que ya tenía el sitio anterior */
.wa__globo{
  position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);
  height:32px;line-height:32px;padding:0 15px;border-radius:16px;white-space:nowrap;
  background:#fff;color:rgba(0,0,0,.82);font:400 15px/32px Inter,sans-serif;
  opacity:0;visibility:hidden;pointer-events:none;
  filter:drop-shadow(0 1px 5px rgba(0,0,0,.45));
  transition:opacity .3s ease-out .35s,visibility .3s ease-out .35s;
}
.wa__globo::after{
  content:"";position:absolute;top:50%;right:-7px;margin-top:-6px;
  border:6px solid transparent;border-width:6px 0 6px 8px;border-left-color:#fff;
}
.wa:hover .wa__globo,.wa:focus-visible .wa__globo{opacity:1;visibility:visible;transition:opacity .2s}
@media (max-width:560px){
  .wa{width:54px;height:54px;right:16px;bottom:16px}
  .wa svg{width:28px;height:28px}
  .wa__globo{display:none}
}

@media print{
  .nav,.wa,.hero__canvas,.blob,.rejilla-viva,.hero__arco,.hero__flechas,.lupa{display:none}
  body{color:#000;background:#fff}
}

/* ==========================================================================
   HERO CON SLIDES
   Cuatro placas, una por cada mundo de AKYO. La foto va de fondo, el texto
   encima sobre un velo que garantiza contraste sin depender de la foto.
   ========================================================================== */
.hero--slider{padding:0;min-height:min(80vh,700px);display:grid}
.hero--slider .hero__placas{grid-area:1/1;position:relative;display:grid;isolation:isolate}
.hero__placa{
  grid-area:1/1;position:relative;display:grid;align-items:center;
  opacity:0;visibility:hidden;z-index:1;
  transition:opacity .7s var(--ease-suave),visibility .7s var(--ease-suave);
}
.hero__placa[data-activo="true"]{opacity:1;visibility:visible;z-index:2}
/* La foto cruza despacio, pero el texto se va rápido: si los dos tardaran lo
   mismo, durante casi un segundo se leerían dos titulares encimados. */
.hero__texto{opacity:0;transition:opacity .22s linear}
.hero__placa[data-activo="true"] .hero__texto{opacity:1;transition:opacity .3s linear .25s}
.hero__fondo{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__fondo img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  transition:transform 7s linear}
.hero__placa[data-activo="true"] .hero__fondo img{transform:scale(1)}
.hero__velo{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(4,7,14,.95) 0%,rgba(4,7,14,.78) 42%,rgba(4,7,14,.30) 78%,rgba(4,7,14,.62) 100%),
    linear-gradient(180deg,rgba(4,7,14,.55) 0%,transparent 30%,rgba(4,7,14,.85) 100%);
}
/* El título arranca a una distancia fija de la barra (antes: 120-180 px de
   relleno más el centrado vertical, que en pantallas altas sumaba casi 200 px
   vacíos arriba del rótulo). El aire que sobra queda abajo, sobre la foto. */
.hero--slider .hero__placa{align-items:start}
.hero__texto{
  position:relative;z-index:2;max-width:min(820px,100%);
  padding-block:clamp(56px,8vh,84px) clamp(120px,14vh,150px);
}
/* Solo la primera placa lleva <h1>; las otras son <p>. Comparten esta clase
   para que se vean idénticas sin repetir cuatro encabezados en la página. */
.hero__titular{
  margin:22px 0 0;color:#fff;font-family:Sora,Inter,sans-serif;font-weight:800;
  /* el mínimo baja a 29px: a 34px un titular largo ocupaba cinco líneas en el
     celular y empujaba los botones fuera de la primera pantalla */
  font-size:clamp(29px,4.9vw,62px);line-height:1.06;letter-spacing:-.035em;max-width:17ch;
}
.hero__texto .hero__sub{max-width:60ch}
html.js .hero__placa[data-activo="true"] .chip,
html.js .hero__placa[data-activo="true"] .hero__titular,
html.js .hero__placa[data-activo="true"] .hero__sub,
html.js .hero__placa[data-activo="true"] .hero__acciones{animation:subir .85s var(--ease) both}
html.js .hero__placa[data-activo="true"] .hero__titular{animation-delay:.08s}
html.js .hero__placa[data-activo="true"] .hero__sub{animation-delay:.16s}
html.js .hero__placa[data-activo="true"] .hero__acciones{animation-delay:.24s}

.hero__flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(10,16,30,.5);border:1px solid rgba(255,255,255,.14);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .3s,border-color .3s,transform .35s var(--ease);
}
.hero__flecha:hover{background:var(--brand);border-color:transparent;
  transform:translateY(-50%) scale(1.06)}
.hero__flecha svg{width:22px;height:22px}
.hero__flecha--prev{left:clamp(10px,2vw,26px)}
.hero__flecha--prev svg{transform:rotate(180deg)}
.hero__flecha--sig{right:clamp(10px,2vw,26px)}
@media (max-width:720px){.hero__flecha{display:none}}

.hero__puntos{
  position:absolute;left:50%;bottom:clamp(74px,9vh,104px);transform:translateX(-50%);
  z-index:5;display:flex;gap:10px;
}
.hero__puntos button{
  width:11px;height:11px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.3);transition:width .35s var(--ease),background .3s;
}
.hero__puntos button[aria-selected="true"]{width:34px;background:var(--brand);
  box-shadow:0 0 12px rgba(18,200,240,.7)}

/* franja de marcas, apoyada sobre el borde inferior del hero */
.marcas{position:relative;z-index:6;margin-top:-38px}
.marcas__caja{
  display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;
  padding:18px 28px;border-radius:var(--radio-lg);
  background:rgba(10,16,30,.72);border:1px solid var(--borde);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:var(--sombra-alta);
}
.marcas__rotulo{font:700 12px/1 Sora,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan-claro)}
.marcas__lista{display:flex;align-items:center;gap:clamp(20px,4vw,52px);flex-wrap:wrap}
.marcas__item{display:flex;align-items:center;gap:12px}
/* Los dos archivos van recortados al ras del dibujo: mismo alto de imagen es
   mismo alto de letra. Antes Kyocera traía margen transparente y se veía
   un 22% más chico que HSM. */
.marcas__item img{height:28px;width:auto;opacity:.92;transition:opacity .3s}
.marcas__item:hover img{opacity:1}
.marcas__item span{font-size:12.5px;color:var(--tx-3);line-height:1.25;max-width:16ch}
@media (max-width:760px){
  .marcas{margin-top:-24px}
  .marcas__caja{flex-direction:column;text-align:center}
  .marcas__item{flex-direction:column;gap:6px}
}

/* foto de apoyo dentro de una sección de dos columnas */
.foto-seccion{
  display:block;border-radius:var(--radio-xl);overflow:hidden;
  border:1px solid var(--borde);box-shadow:var(--sombra-alta);
}
.foto-seccion img{width:100%;height:auto;display:block;
  transition:transform .8s var(--ease)}
.foto-seccion:hover img{transform:scale(1.035)}

/* ==========================================================================
   CATÁLOGO — menú lateral en acordeón + grilla
   ========================================================================== */
.catalogo{display:grid;grid-template-columns:262px minmax(0,1fr);gap:clamp(20px,3vw,36px);
  align-items:start}
@media (max-width:960px){.catalogo{grid-template-columns:1fr}}
.catalogo__lado{position:sticky;top:calc(var(--nav-h) + 18px)}
@media (max-width:960px){.catalogo__lado{position:static}}
.catalogo__panel{
  background:var(--vidrio);border:1px solid var(--borde);border-radius:var(--radio-lg);
  padding:20px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.catalogo__panel > h2{font:700 13px/1 Inter,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-3);padding-bottom:14px;margin-bottom:12px;
  border-bottom:1px solid var(--borde)}

.arbol{display:grid;gap:3px}
.arbol__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px;border:0;border-left:3px solid transparent;border-radius:10px;
  background:none;cursor:pointer;text-align:left;
  font:500 14.5px/1.3 Inter,sans-serif;color:var(--tx-2);
  transition:background .25s,color .25s,border-color .25s;
}
.arbol__btn:hover{background:rgba(255,255,255,.05);color:var(--tx)}
.arbol__btn[aria-pressed="true"]{background:rgba(18,200,240,.1);color:#fff;
  border-left-color:var(--cyan)}
.arbol__n{font:600 11.5px/1 Inter,sans-serif;color:var(--tx-3);
  background:rgba(255,255,255,.06);padding:4px 8px;border-radius:999px;flex:none}
.arbol__btn[aria-pressed="true"] .arbol__n{background:rgba(18,200,240,.2);color:#DFF6FF}
.arbol__chevron{width:15px;height:15px;flex:none;margin-left:2px;color:var(--tx-3);
  transition:transform .35s var(--ease)}
.arbol__btn[aria-expanded="true"] .arbol__chevron{transform:rotate(90deg);color:var(--cyan)}
/* Las subcategorías nacen plegadas y se despliegan con el clic del padre.
   Va con max-height y no con el truco de grid-template-rows:0fr→1fr: ese
   funciona con UN hijo, pero con dos (Monocromáticas y Color) la primera fila
   se lleva todo el `fr` de un contenedor sin alto definido y desaparece. */
.arbol__hijos{
  display:grid;gap:2px;padding-left:14px;overflow:hidden;
  max-height:0;opacity:0;visibility:hidden;
  transition:max-height .38s var(--ease),opacity .28s,visibility .38s,margin .38s var(--ease);
}
.arbol__hijos[data-abierto="true"]{max-height:260px;opacity:1;visibility:visible;
  margin:5px 0 9px}
.arbol__btn--hijo{padding:8px 12px;font-size:13.5px;color:var(--tx-3)}
.arbol__btn--hijo::before{content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.6;flex:none;margin-right:-2px}
.arbol__btn--hijo[aria-pressed="true"]{border-left-color:var(--cyan-claro)}

.buscador{position:relative;margin-bottom:20px}
.buscador input{
  width:100%;padding:14px 16px 14px 46px;border-radius:999px;
  border:1px solid var(--borde);background:var(--vidrio);color:var(--tx);
  font:400 15px/1.4 Inter,sans-serif;transition:border-color .25s,background .25s,box-shadow .25s;
}
.buscador input::placeholder{color:var(--tx-3)}
.buscador input:focus{outline:0;border-color:var(--cyan);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 4px rgba(18,200,240,.14)}
.buscador svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--tx-3);pointer-events:none}

/* ---------- tarjeta del catálogo ---------- */
.grilla--cat{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
/* en las tarjetas del catálogo hay tres cosas cliqueables (foto, nombre y
   ficha técnica), así que la capa que hacía cliqueable toda la tarjeta no va */
.tarjeta:not(.tarjeta--cat) a::after{content:"";position:absolute;inset:0;z-index:3}
.tarjeta--cat a::after{content:none}
.tarjeta--cat{background:var(--vidrio)}
.tarjeta--cat .tarjeta__cuerpo{gap:10px;padding:16px 18px 18px}

.tarjeta__lupa{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:var(--radio-lg) var(--radio-lg) 0 0;overflow:hidden;
}
.tarjeta__lupa .tarjeta__img{aspect-ratio:4/3;padding:18px}
.tarjeta--cat:hover .tarjeta__img img{transform:scale(1.06) translateY(-2px)}

.tarjeta__logo{height:15px;width:auto;object-fit:contain;opacity:.85;
  transition:opacity .3s}
.tarjeta--cat:hover .tarjeta__logo{opacity:1}
.tarjeta--cat h3{font-size:17.5px;margin-top:2px}

.minispecs{display:grid;gap:5px;border-top:1px solid var(--borde);padding-top:11px;margin-top:2px}
.minispecs div{display:flex;justify-content:space-between;gap:14px;font-size:12.9px;line-height:1.35}
.minispecs dt{color:var(--tx-3);white-space:nowrap}
.minispecs dd{margin:0;color:var(--tx-2);font-weight:500;text-align:right}
/* Las medidas de corte van apiladas debajo del rótulo, como fichas: en dos
   columnas se desbordaban y estiraban la tarjeta cuatro líneas de más. */
.minispecs__cortes{flex-direction:column;align-items:flex-start;gap:6px}
.minispecs__cortes dd{display:flex;flex-wrap:wrap;gap:5px;text-align:left}
.minispecs__cortes dd span{
  padding:3px 8px;border-radius:999px;font-size:11.8px;font-weight:600;line-height:1.3;
  background:rgba(18,200,240,.12);border:1px solid rgba(18,200,240,.26);color:var(--cyan-claro);
}

/* Ficha técnica y comprar van como dos íconos en la fila del logo: la
   tarjeta no suma alto por los botones. El texto aparece al pasar el mouse. */
.tarjeta__cab{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;
  /* por encima de la foto: la foto tiene z-index 1 y el globo del botón sube
     sobre ella; sin esto quedaba escondido detrás de la imagen */
  position:relative;z-index:4}
.tarjeta__iconos{display:flex;gap:6px;flex:none}
/* Con color ya en reposo: en gris oscuro se perdían contra la tarjeta. */
.icono-btn{
  position:relative;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  transition:color .25s,background .25s,border-color .25s,transform .3s var(--ease),
             box-shadow .3s,filter .25s;
}
.icono-btn svg{width:19px;height:19px}
/* ficha técnica: celeste de marca, visible pero secundario */
.icono-btn--pdf{color:var(--cyan-claro);background:rgba(18,200,240,.14);
  border:1px solid rgba(18,200,240,.5)}
.icono-btn--pdf:hover,.icono-btn--pdf:focus-visible{color:#fff;background:rgba(18,200,240,.26);
  border-color:var(--cyan);box-shadow:0 8px 22px -8px rgba(18,200,240,.85)}
/* comprar: el degradado de marca lleno, porque es la acción que vende */
.icono-btn--comprar{color:#fff;background:var(--brand);border:1px solid transparent;
  box-shadow:0 6px 18px -8px rgba(18,200,240,.75)}
.icono-btn--comprar:hover,.icono-btn--comprar:focus-visible{filter:brightness(1.12) saturate(1.1);
  box-shadow:0 10px 26px -8px rgba(18,200,240,.95)}
/* globo con el texto. Va con .tarjeta delante para ganarle a la regla que
   apaga los ::after de los enlaces dentro de las tarjetas del catálogo. */
.tarjeta .icono-btn::after{
  /* top/left en auto: la regla vieja `.tarjeta a::after{inset:0}` los dejaba en 0 y el
     globo quedaba estirado al ancho del ícono, con el texto cortado al costado */
  content:attr(data-tip);position:absolute;top:auto;left:auto;right:0;bottom:calc(100% + 10px);
  white-space:nowrap;width:auto;height:auto;
  padding:6px 10px;border-radius:8px;font:600 12px/1.2 Inter,sans-serif;color:#fff;
  background:rgba(7,12,22,.97);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 24px -10px #000;opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .2s,transform .25s var(--ease);z-index:5;
}
.tarjeta .icono-btn::before{
  content:"";position:absolute;top:auto;left:auto;right:13px;bottom:calc(100% + 1px);
  width:0;height:0;border:5px solid transparent;
  border-top-color:rgba(7,12,22,.97);opacity:0;transition:opacity .2s;pointer-events:none;z-index:5;
}
.tarjeta .icono-btn:hover::after,.tarjeta .icono-btn:focus-visible::after{opacity:1;transform:none}
.tarjeta .icono-btn:hover::before,.tarjeta .icono-btn:focus-visible::before{opacity:1}

/* ==========================================================================
   LUPA — la foto se amplía en el lugar, no lleva a otra página
   ========================================================================== */
.lupa{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;gap:18px;
  grid-template-rows:1fr auto;padding:clamp(16px,4vw,54px);
  background:rgba(4,7,14,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;transition:opacity .3s var(--ease-suave);
}
.lupa[hidden]{display:none}
.lupa[data-abierta="true"]{opacity:1}
.lupa__img{
  max-width:min(760px,100%);max-height:100%;width:auto;object-fit:contain;
  background:#fff;border-radius:var(--radio-lg);padding:clamp(14px,2.5vw,30px);
  box-shadow:0 40px 90px -30px #000,0 0 60px -20px rgba(18,200,240,.35);
  transform:scale(.92);transition:transform .38s cubic-bezier(.34,1.56,.64,1);
}
.lupa[data-abierta="true"] .lupa__img{transform:scale(1)}
.lupa__pie{font:700 18px/1.3 Sora,sans-serif;color:#fff;text-align:center}
.lupa__pie span{display:block;font:400 14px/1.4 Inter,sans-serif;color:var(--tx-2);margin-top:5px}
.lupa__cerrar{
  position:absolute;top:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid var(--borde);color:#fff;
  font:300 26px/1 Inter,sans-serif;transition:background .25s,transform .3s var(--ease);
}
.lupa__cerrar:hover{background:rgba(255,255,255,.16);transform:rotate(90deg)}

/* ==========================================================================
   NOSOTROS — placas de trayectoria
   ========================================================================== */
.placas{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:420px){.placas{grid-template-columns:1fr}}
.placa{
  padding:24px 20px;border-radius:var(--radio-lg);text-align:center;
  background:var(--vidrio);border:1px solid var(--borde);
  transition:transform .4s var(--ease),background .3s,border-color .3s;
}
.placa:hover{background:var(--vidrio-alto);border-color:rgba(18,200,240,.35)}
.placa b{display:block;font:800 34px/1.05 Sora,sans-serif;letter-spacing:-.035em;
  background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.placa span{display:block;margin-top:6px;font-size:13.5px;color:var(--tx-2);line-height:1.4}
/* la placa del service oficial lleva el logo de Kyocera arriba del texto */
.placa--logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
.placa--logo img{height:34px;width:auto;object-fit:contain}

/* ==========================================================================
   REDES SOCIALES
   ========================================================================== */
.social{margin-top:30px}
.social__rotulo{display:block;font:600 13.5px/1 Inter,sans-serif;color:var(--tx-3);
  margin-bottom:12px}
.social__lista{display:flex;gap:12px}
.social__lista a{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--borde);color:var(--tx);
  transition:background .28s,border-color .28s,color .28s,transform .35s var(--ease);
}
.social__lista a:hover{background:rgba(18,200,240,.16);border-color:var(--cyan);
  color:#fff;transform:translateY(-3px)}
.social__lista svg{width:21px;height:21px}
.pie .social{margin-top:0}
.pie .social__lista a{width:38px;height:38px;border-radius:11px}
.pie .social__lista svg{width:18px;height:18px}

/* ==========================================================================
   CONECTIVIDAD — oficina con la red dibujada encima
   Las líneas y las etiquetas son SVG/HTML, no están pegadas en la foto: se
   ven nítidas en cualquier pantalla y se dibujan una sola vez al entrar.
   ========================================================================== */
.dos--foto-grande{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
@media (max-width:900px){.dos--foto-grande{grid-template-columns:1fr}}
.red-visual{
  position:relative;aspect-ratio:4/3;border-radius:var(--radio-xl);overflow:hidden;isolation:isolate;
  border:1px solid var(--borde);
  box-shadow:var(--sombra-alta),0 0 70px -26px rgba(18,200,240,.45);
}
.red-visual picture,.red-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.red-visual__lineas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.red-visual__linea{
  fill:none;stroke:#3ED6FF;stroke-width:3.2;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(18,200,240,.95));
}
/* se dibujan al entrar la sección; sin JS se ven quietas */
html.js .red-visual__linea{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--ease)}
html.js .dentro .red-visual__linea{stroke-dashoffset:0}
html.js .dentro .red-visual__linea:nth-of-type(2){transition-delay:.2s}
html.js .dentro .red-visual__linea:nth-of-type(3){transition-delay:.4s}
.red-visual__nodo{fill:#5FE0FF;stroke:#fff;stroke-width:2.5;filter:drop-shadow(0 0 6px rgba(18,200,240,1))}
.red-visual__hub{fill:#fff;stroke:#12C8F0;stroke-width:5;filter:drop-shadow(0 0 10px rgba(18,200,240,1))}
.red-visual__anillo{fill:rgba(18,200,240,.14);stroke:rgba(95,224,255,.6);stroke-width:2}
.red-visual__chip{
  position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px 7px 9px;border-radius:999px;white-space:nowrap;
  background:rgba(7,12,22,.84);border:1px solid rgba(18,200,240,.45);color:#fff;
  font:600 12.5px/1 Inter,sans-serif;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 12px 26px -12px #000;transform:translate(-50%,calc(-100% - 16px));
}
.red-visual__chip svg{width:16px;height:16px;color:var(--cyan-claro);flex:none}
.red-visual__chip--izq{transform:translate(calc(-100% + 16px),calc(-100% - 16px))}
.red-visual__chip--hub{transform:translate(-50%,34px);background:var(--brand);border-color:transparent}
.red-visual__chip--hub svg{color:#fff}
html.js .red-visual__chip{opacity:0;transition:opacity .5s ease}
html.js .dentro .red-visual__chip{opacity:1;transition-delay:1.1s}
@media (max-width:560px){
  .red-visual__chip{padding:6px;gap:0}
  .red-visual__chip span{display:none}
}

/* --- botón "Top" ----------------------------------------------------------
   Cuadrado de bordes curvos, del mismo oscuro que el fondo pero translúcido,
   con un filo claro que lo despega del fondo para que se siga viendo. Flota
   despacio y queda bien separado del de WhatsApp. */
@keyframes top-entra{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
@keyframes top-flota{0%,100%{translate:0 0}50%{translate:0 -6px}}
.arriba{
  position:fixed;right:112px;bottom:28px;z-index:90;
  display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:13px;
  cursor:pointer;
  background:rgba(10,19,32,.55);
  border:1px solid rgba(160,208,245,.32);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);
  animation:top-entra .45s var(--ease) both;
  transition:background .25s,border-color .25s,box-shadow .3s;
}
html.mo .arriba{animation:top-entra .45s var(--ease) both,
                          top-flota 3.8s ease-in-out .5s infinite}
.arriba svg{width:20px;height:20px;display:block;margin-top:-1px}
.arriba:hover,.arriba:focus-visible{
  background:rgba(14,30,52,.75);border-color:rgba(160,208,245,.6);
  box-shadow:0 12px 28px -12px rgba(18,200,240,.55),inset 0 1px 0 rgba(255,255,255,.1)}
@media (max-width:600px){.arriba{width:40px;height:40px;right:98px;bottom:30px;border-radius:12px}
  .arriba svg{width:18px;height:18px}}

/* --- catálogo: acceso a los discontinuados, arriba a la derecha ------------- */
.cab-catalogo{display:flex;align-items:flex-start;justify-content:space-between;gap:28px}
.cab-catalogo .cab-seccion{flex:1 1 auto;min-width:0}
.al-archivo{
  flex:none;display:flex;align-items:center;gap:14px;margin-top:6px;max-width:340px;
  padding:14px 16px 14px 14px;border-radius:var(--radio-lg);
  background:var(--vidrio);border:1px solid var(--borde);color:var(--tx);
  transition:border-color .3s,background .3s;
}
.al-archivo:hover{border-color:rgba(18,200,240,.5);background:var(--vidrio-alto)}
.al-archivo__ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  color:var(--cyan-claro);background:rgba(18,200,240,.12);border:1px solid rgba(18,200,240,.3)}
.al-archivo__ico svg{width:19px;height:19px}
.al-archivo__txt b{display:block;font:600 15px/1.3 Inter,sans-serif;color:#fff}
.al-archivo__txt span{display:block;margin-top:3px;font-size:13px;line-height:1.35;color:var(--tx-2)}
.al-archivo__flecha{flex:none;color:var(--cyan-claro)}
.al-archivo__flecha svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.al-archivo:hover .al-archivo__flecha svg{transform:translateX(4px)}
@media (max-width:900px){
  .cab-catalogo{flex-direction:column;gap:0}
  .al-archivo{margin:0 0 26px;max-width:none;width:100%}
}

/* --- hero en el celular ----------------------------------------------------
   El velo de la computadora oscurece de izquierda a derecha, pensado para texto
   a la izquierda y foto a la derecha. En una pantalla angosta eso tapaba casi
   toda la foto. Acá el velo va de arriba hacia abajo, más liviano arriba, y
   el texto blanco sigue leyéndose sobre la parte más oscura. */
@media (max-width:800px){
  /* el texto arranca cerca de la barra: antes quedaban ~120 px vacíos arriba
     del rótulo, y el alto fijo de 88vh lo empujaba todavía más al centro */
  .hero--slider{min-height:0}
  .hero__placa{align-items:start}
  .hero__texto{padding-block:32px 118px}
  .hero__puntos{bottom:74px}
  .hero__velo{background:
    linear-gradient(180deg,rgba(4,7,14,.45) 0%,rgba(4,7,14,.62) 38%,
      rgba(4,7,14,.82) 70%,rgba(4,7,14,.94) 100%)}
}

/* --- celular: la foto de cada sección va debajo del título -----------------
   En la computadora texto y foto van lado a lado. En el celular se apilaban y
   la foto quedaba al final, después de toda la lista. Ahora el bloque de texto
   se "abre" (display:contents) y se reordena: rótulo, título, FOTO, resto. */
@media (max-width:860px){
  :is(#impresion,#seguridad,#redes) .dos{display:flex;flex-direction:column;align-items:stretch;gap:0}
  :is(#impresion,#seguridad,#redes) .dos > div:has(> .titulo){display:contents}
  :is(#impresion,#seguridad,#redes) .dos > div:has(> .titulo) > *{order:4}
  :is(#impresion,#seguridad,#redes) .dos > div:has(> .titulo) > .eyebrow{order:1;align-self:flex-start}
  :is(#impresion,#seguridad,#redes) .dos > div:has(> .titulo) > .titulo{order:2}
  :is(#impresion,#seguridad,#redes) .dos > div:not(:has(> .titulo)){order:3;margin:24px 0 28px}
}
/* catálogo en el celular: sin el párrafo de presentación, directo a los equipos */
@media (max-width:700px){.cab-catalogo .bajada{display:none}}

/* --- valoración de Google --------------------------------------------------
   Solo aparece si en data/sitio.json hay un puntaje real cargado. */
.estrellitas{display:inline-flex;gap:2px;color:#F5B301}
.estrellitas svg{width:15px;height:15px}

/* la placa: una más de la fila de números, ocupando el ancho entero */
.placa--google{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px}
/* .placa span ya fijaba un color y le ganaba a .estrellitas: acá se recupera
   el dorado con una regla más específica. */
.placa--google .estrellitas{margin-bottom:2px;color:#F5B301}
.placa--google .estrellitas svg{width:17px;height:17px}
/* el rótulo, no las estrellas: si no, la regla les pisaba el dorado */
.placa--google span:not(.estrellitas){text-transform:uppercase;letter-spacing:.14em;
  font-size:11.5px;font-weight:600;color:var(--tx-3)}
a.placa--google:hover{background:var(--vidrio-alto);border-color:rgba(18,200,240,.45)}

/* el sello en línea, para una página de texto */
.gugul{display:inline-flex;align-items:center;gap:12px;margin-top:22px;
  padding:11px 18px;border-radius:999px;background:var(--vidrio);
  border:1px solid var(--borde);transition:border-color .3s,background .3s}
a.gugul:hover{border-color:rgba(18,200,240,.5);background:var(--vidrio-alto)}
.gugul__dato{font-size:14px;color:var(--tx-2)}
.gugul__dato b{color:#fff;font-size:16px;font-weight:700;letter-spacing:-.02em}
.gugul__n{color:var(--tx-3)}
.gugul__n::before{content:" · "}

/* --- catálogo: el filtro anima, así que el contenedor ancla a los fantasmas -- */
html.mo [data-grilla]{position:relative}
html.mo .mo-fantasma{z-index:3}

/* --- el logo se dibuja en la barra ------------------------------------------
   html.intro la pone el <head> antes del primer cuadro (al entrar o al
   refrescar): el logo fijo arranca escondido debajo del video que lo dibuja, y
   los botones del menú esperan su turno (hasta html.menu-listo). El sitio se ve
   entero desde el primer momento. js/movimiento.js saca las clases; si no
   llega a correr, un temporizador del <head> las saca igual. */
html.mo.intro .nav__placa img{opacity:0}
html.mo.intro:not(.menu-listo) .nav__menu > li,
html.mo.intro:not(.menu-listo) .nav__burger{opacity:0}
/* ojo: esta regla pisaba la transición de altura del logo y lo hacía achicarse
   de golpe al bajar. Tiene que llevar las dos. */
.nav__placa img{transition:height .6s var(--ease-suave),opacity .26s ease}
.logo-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;background:#FBFBFB;border-radius:inherit;pointer-events:none}

/* --- constelación de partículas ---------------------------------------------
   El canvas (lo crea js/movimiento.js, copia del de Antigravity) va fijo detrás
   de todo, con la misma opacidad que allá. En Antigravity las secciones son
   transparentes y por eso se ve en toda la página; acá las bandas de color se
   vuelven casi transparentes para lo mismo, y conservan apenas su tono. */
.polvo{position:fixed;inset:0;width:100%;height:100vh;z-index:-1;pointer-events:none;opacity:.75}
html.mo .oscura{background:rgba(4,7,14,.35)}
html.mo .suave{background:rgba(10,19,32,.35)}
html.mo .pie{background:rgba(2,4,10,.55)}

/* --- placa de cámaras: el fondo deja de ser una foto quieta ---------------- */
/* Respira despacio y la recorre un barrido, como el de una cámara vigilando.
   Todo es scale/translate/opacity —no mueve el layout— y solo corre con
   html.mo: si la persona pidió reducir el movimiento, la foto queda fija. */
html.mo .hero__placa[data-efecto="camara"][data-activo="true"] .hero__fondo img{
  animation:cam-respira 20s ease-in-out infinite alternate}
@keyframes cam-respira{from{scale:1}to{scale:1.075}}

html.mo .hero__placa[data-efecto="camara"] .hero__fondo::after{
  content:"";position:absolute;left:0;right:0;top:0;height:20%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(95,224,255,.09) 45%,
    rgba(95,224,255,.20) 72%,rgba(95,224,255,.34) 88%,transparent);
  opacity:0;translate:0 -40%}
html.mo .hero__placa[data-efecto="camara"][data-activo="true"] .hero__fondo::after{
  animation:cam-barrido 6.5s linear infinite}
@keyframes cam-barrido{
  0%{opacity:0;translate:0 -40%}
  10%{opacity:1}
  85%{opacity:1}
  100%{opacity:0;translate:0 500%}
}

/* ==========================================================================
   PIXELES CELESTES EN EL BORDE DE LOS BOTONES
   Estos elementos tienen borde transparente de 1px y fondo degradado. Por
   defecto el degradado se dibuja dentro del borde y se REPITE sobre él: en el
   borde izquierdo asomaba el final del degradado (celeste). Dibujándolo desde
   el borde, sin repetir, desaparece.
   Va al final a propósito: las reglas con `background:` (abreviada) reinician
   estas dos propiedades, así que tiene que ganarles por orden. Si se agrega
   un elemento con degradado y borde transparente, sumarlo a esta lista.
   ========================================================================== */
.btn,.filtro,.filtro[aria-pressed="true"],
.interruptor__pista,.interruptor input:checked + .interruptor__pista,
.cat__ico,.cat:hover .cat__ico,
.icono-btn,.icono-btn--comprar:hover,.icono-btn--comprar:focus-visible,
.red-visual__chip,.red-visual__chip--hub{
  background-origin:border-box;background-repeat:no-repeat;
}

/* ==========================================================================
   FORMULARIO Y PIE
   ========================================================================== */
.campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){.campo-fila{grid-template-columns:1fr}}
.campo span em{font-style:normal;font-weight:400;color:var(--tx-3)}
/* campo trampa para robots: fuera de la vista, pero no display:none (algunos
   robots se saltean los campos ocultos así) */
.campo-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-aviso--ok{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.45);color:#C9F5DA}
.form-aviso--error{background:rgba(240,90,90,.12);border-color:rgba(240,110,110,.45);color:#FBD0D0}

/* horario del pie, con reloj */

/* ==========================================================================
   MOVIMIENTO — segunda capa (js/movimiento.js)
   Todo vive bajo html.mo: esa clase la pone el <head> solo si la persona no
   pidió reducir el movimiento, y se quita sola si el script no llega a cargar.
   Se anima con transform, translate, rotate, opacity y clip-path: nada mueve
   el layout, así que no hay saltos de contenido (CLS).
   ========================================================================== */

/* barra de progreso de lectura, sobre el borde inferior del menú */
.nav__progreso{position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:2;pointer-events:none;
  background:var(--brand);transform-origin:left center;transform:scaleX(0);
  box-shadow:0 0 10px rgba(18,200,240,.6)}
html:not(.mo) .nav__progreso{display:none}

/* --- títulos: cada palabra sube desde una máscara ------------------------ */
html.mo .mo-w{display:inline-block;overflow:hidden;vertical-align:top;
  padding:.14em .02em .1em;margin:-.14em -.02em -.1em}
html.mo .mo-w>span{display:inline-block}
html.mo .mo-titulo .mo-w>span{transform:translateY(112%);
  transition:transform .95s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 55ms)}
html.mo .mo-titulo.mo-in .mo-w>span{transform:none}
html.mo .mo-titulo-hero .mo-w>span{transform:translateY(112%);transition:none}
html.mo .hero__placa[data-activo="true"] .mo-titulo-hero .mo-w>span{transform:none;
  transition:transform 1s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--i,0) * 60ms)}
html.mo .hero.mo-arranque .mo-titulo-hero .mo-w>span{transform:translateY(112%);transition:none}

/* --- cejas: la línea se dibuja y el rótulo entra detrás --------------------- */
html.mo .mo-ceja{opacity:0;transform:translateX(-12px);transition:opacity .7s ease,transform .9s var(--ease)}
html.mo .mo-ceja::before{transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--ease) .15s}
html.mo .mo-ceja.mo-in{opacity:1;transform:none}
html.mo .mo-ceja.mo-in::before{transform:none}

/* --- fotos: se abren desde una ventana y la imagen se acomoda --------------- */
html.mo .mo-img{clip-path:inset(9% 7% 9% 7% round 28px);transition:clip-path 1.35s cubic-bezier(.2,.8,.2,1)}
/* abierta de más a propósito: así no recorta la sombra del marco */
html.mo .mo-img.mo-in{clip-path:inset(-120px -120px -120px -120px round 150px)}
html.mo .mo-img img{transform:scale(1.14);transition:transform 1.9s cubic-bezier(.2,.8,.2,1)}
html.mo .mo-img.mo-in img{transform:none}
html.mo .red-visual.mo-img img{transform:none}          /* la red dibujada encima tiene que coincidir */
html.mo .foto-seccion.mo-img.mo-in:hover img{transform:scale(1.035);transition-duration:.8s}
html.mo .ficha__marco.mo-img.mo-in:hover img{transform:scale(1.04);transition-duration:.6s}

/* --- línea de luz que se dibuja al entrar a cada sección ------------------ */
html.mo .mo-seccion::before{content:"";position:absolute;top:0;left:50%;width:min(760px,72%);height:1px;
  translate:-50% 0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(95,224,255,.6),transparent);
  transform:scaleX(0);transition:transform 1.6s var(--ease)}
html.mo .mo-seccion.mo-in::before{transform:scaleX(1)}

/* --- tarjetas del catálogo que entran escalonadas ------------------------- */
html.mo .mo-tarjeta{opacity:0;transform:translateY(28px) scale(.97);
  transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1),box-shadow .45s var(--ease),border-color .35s}
html.mo .mo-tarjeta.mo-in{opacity:1;transform:none}
html.mo .mo-tarjeta.mo-in:hover{transform:translateY(-7px)}

/* --- profundidad para las inclinaciones hacia el cursor ------------------- */
.cats,.placas,.grilla--cat,#impresion .dos > .rev:last-child{perspective:1100px}
html.mo-fino .btn{transition:box-shadow .35s var(--ease),background .25s,color .25s,
  border-color .25s,filter .25s}

/* --- hero: capas que se separan al bajar y siguen al mouse ----------------- */
html.mo .hero__fondo{inset:-30px}
.hero__video{position:absolute;inset:-30px;z-index:0;width:calc(100% + 60px);height:calc(100% + 60px);
  object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero__video.listo{opacity:1}
.hero--slider::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:var(--ink-900);opacity:calc(var(--hp,0) * .65)}

/* el punto activo se llena mientras dura la placa */
.hero__puntos button{position:relative;overflow:hidden}
html.mo .hero__puntos button[aria-selected="true"]::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:rgba(255,255,255,.62);transform-origin:left center;transform:scaleX(0);
  animation:mo-progreso var(--placa-dur,6s) linear forwards}
html.mo .hero--pausa .hero__puntos button[aria-selected="true"]::after{animation-play-state:paused}
/* Si la persona eligió una placa a mano, el carrusel queda quieto ahí: no
   tiene sentido mostrar una barra contando para un cambio que no va a pasar. */
html.mo .hero--fijo .hero__puntos button[aria-selected="true"]::after{display:none}
@keyframes mo-progreso{to{transform:scaleX(1)}}


/* --- franja de marcas: barrido de luz y logos escalonados ------------------ */
.marcas__caja{position:relative;overflow:hidden}
.marcas__caja::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(95,224,255,.16) 50%,transparent 65%);
  transform:translateX(-110%)}
html.mo .marcas__caja.dentro::after{animation:mo-barrido 1.8s cubic-bezier(.4,0,.2,1) .45s 1 forwards}
@keyframes mo-barrido{to{transform:translateX(110%)}}
html.mo .marcas__caja .marcas__rotulo,html.mo .marcas__caja .marcas__item{opacity:0;transform:translateY(12px);
  transition:opacity .7s ease,transform .8s var(--ease)}
html.mo .marcas__caja.dentro .marcas__rotulo,html.mo .marcas__caja.dentro .marcas__item{opacity:1;transform:none}
html.mo .marcas__caja.dentro .marcas__item:nth-child(1){transition-delay:.15s}
html.mo .marcas__caja.dentro .marcas__item:nth-child(2){transition-delay:.3s}

/* --- soluciones: número de orden como detalle técnico --------------------- */
.cat__indice{position:absolute;top:20px;right:22px;z-index:1;font:600 11.5px/1 Sora,Inter,sans-serif;
  letter-spacing:.14em;color:rgba(95,224,255,.42);transition:color .35s,transform .45s var(--ease)}
.cat:hover .cat__indice{color:var(--cyan-claro);transform:translateY(-2px)}

/* --- seguridad: la foto se ve como una cámara grabando -------------------- */
.foto-hud{position:relative}
.hud{position:absolute;inset:0;z-index:2;pointer-events:none}
.hud i{position:absolute;display:block}
.hud__esquinas{inset:16px;opacity:.8;background-repeat:no-repeat;
  background-image:
    linear-gradient(#5FE0FF,#5FE0FF),linear-gradient(#5FE0FF,#5FE0FF),
    linear-gradient(#5FE0FF,#5FE0FF),linear-gradient(#5FE0FF,#5FE0FF),
    linear-gradient(#5FE0FF,#5FE0FF),linear-gradient(#5FE0FF,#5FE0FF),
    linear-gradient(#5FE0FF,#5FE0FF),linear-gradient(#5FE0FF,#5FE0FF);
  background-size:24px 2px,2px 24px,24px 2px,2px 24px,24px 2px,2px 24px,24px 2px,2px 24px;
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom}
.hud__rec{top:28px;left:30px;width:9px;height:9px;border-radius:50%;background:#FF4B4B;box-shadow:0 0 10px #FF4B4B}
.hud__scan{left:16px;right:16px;top:16px;height:30%;opacity:0;transform:translateY(-10%);
  background:linear-gradient(180deg,transparent,rgba(95,224,255,.07) 75%,rgba(95,224,255,.26));
  border-bottom:1px solid rgba(95,224,255,.6)}
html.mo .foto-hud.mo-activo .hud__rec{animation:mo-rec 1.8s ease-in-out infinite}
html.mo .foto-hud.mo-activo .hud__scan{opacity:1;animation:mo-escaneo 6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes mo-rec{50%{opacity:.25}}
@keyframes mo-escaneo{0%,100%{transform:translateY(-10%)}50%{transform:translateY(215%)}}

/* --- redes: datos que viajan hacia el equipo y onda en la multifunción ----- */
.red-visual__paquete{fill:#fff;filter:drop-shadow(0 0 6px rgba(95,224,255,1))}
html.js .red-visual__paquete{opacity:0;transition:opacity .6s ease 1.7s}
html.js .dentro .red-visual__paquete{opacity:1}
.red-visual__onda{fill:none;stroke:rgba(95,224,255,.75);stroke-width:2;opacity:0;
  transform-box:fill-box;transform-origin:center}
html.mo .red-visual.mo-activo .red-visual__onda{animation:mo-onda 2.6s ease-out infinite}
@keyframes mo-onda{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.red-visual__paquete{display:none}}

/* --- modelos discontinuados: resplandor que sigue al cursor --------------- */
.legado::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .45s ease;
  background:radial-gradient(460px circle at var(--gx,50%) var(--gy,50%),rgba(18,200,240,.16),transparent 62%)}
html.mo-fino .legado:hover::after{opacity:1}

@media print{
  html.js .rev,html.js .rev-hijos>*{opacity:1!important;transform:none!important}
  html.mo .mo-titulo .mo-w>span,html.mo .mo-img,html.mo .mo-img img,html.mo .mo-ceja,html.mo .mo-tarjeta{
    transform:none!important;clip-path:none!important;opacity:1!important}
  .hud,.nav__progreso{display:none}
}