/* ============================================================
   digimaik — hoja de estilos
   Paleta con significado, ahora al derecho:
     ORO   = dinero recuperado, trabajo hecho  -> cálido
     FRÍO  = presupuesto que se enfría         -> azul acero
   El fondo tira a cálido, no a azul, para que el oro no se apague.
   Tres temas para comparar: oro (por defecto), cobre y verde.
   ============================================================ */

:root{
  --acento:#E8B455;
  --acento-2:#C98F35;
  --acento-luz:rgba(232,180,85,.13);
  --acento-borde:rgba(232,180,85,.34);
  --sobre-acento:#1A1206;

  --frio:#7FA8C9;

  --negro:#0A0908;
  --negro-2:#0F0E0C;
  --negro-3:#16150F;
  --linea:rgba(255,255,255,.08);
  --linea-fuerte:rgba(255,255,255,.17);

  --texto:#F0EDE6;
  --texto-2:#A9A499;
  --texto-3:#6E6A61;

  --fuente:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Space Grotesk',var(--fuente);

  --ancho:1180px;
  --radio:16px;
  --radio-g:24px;
  --suave:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--fuente);background:var(--negro);color:var(--texto);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}

.grano{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px;position:relative;z-index:2}
.contenedor-estrecho{max-width:840px}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:32px;padding:18px 32px;
  border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,padding .35s;
}
.nav.pegado{
  background:rgba(10,9,8,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--linea);padding:12px 32px;
}
.marca{
  font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;
  display:flex;align-items:center;gap:9px;margin-right:auto;
}
.marca-punto{
  width:9px;height:9px;border-radius:50%;background:var(--acento);
  animation:latido 2.8s infinite;
}
@keyframes latido{
  0%{box-shadow:0 0 0 0 var(--acento-borde)}
  70%{box-shadow:0 0 0 12px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.nav-enlaces{display:flex;gap:30px}
.nav-enlaces a{font-size:14.5px;color:var(--texto-2);position:relative;padding:4px 0;transition:color .25s}
.nav-enlaces a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--acento);transition:width .3s var(--suave)}
.nav-enlaces a:hover{color:var(--texto)}
.nav-enlaces a:hover::after{width:100%}
.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--texto);transition:.3s}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--fuente);font-size:15px;font-weight:550;
  padding:13px 24px;border-radius:100px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .3s var(--suave),background .25s,border-color .25s,color .25s,box-shadow .3s;
}
.btn-primario{background:var(--acento);color:var(--sobre-acento);font-weight:600;box-shadow:0 6px 26px -8px var(--acento)}
.btn-primario:hover{filter:brightness(1.08);box-shadow:0 10px 32px -8px var(--acento)}
.btn-fantasma{border-color:var(--linea-fuerte);color:var(--texto);background:rgba(255,255,255,.02)}
.btn-fantasma:hover{border-color:var(--acento);color:var(--acento);background:var(--acento-luz)}
.btn-nav{padding:10px 20px;font-size:14px;background:rgba(255,255,255,.06);border-color:var(--linea)}
.btn-nav:hover{background:var(--acento);color:var(--sobre-acento);border-color:var(--acento)}
.btn.ancho{width:100%}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:130px 24px 90px;overflow:hidden}
.hero-luz{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 58% 48% at 20% 30%,var(--acento-luz),transparent 62%),
    radial-gradient(ellipse 46% 42% at 84% 72%,rgba(127,168,201,.09),transparent 64%);
}
.hero-caja{position:relative;z-index:2}
.etiqueta{
  display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--texto-2);
  padding:8px 16px;border:1px solid var(--linea);border-radius:100px;
  background:rgba(255,255,255,.03);margin-bottom:32px;
}
.pulso{width:6px;height:6px;border-radius:50%;background:var(--acento);animation:latido 2.8s infinite}

h1{
  font-family:var(--display);font-size:clamp(2.3rem,5.4vw,4.3rem);
  line-height:1.06;letter-spacing:-.034em;font-weight:700;margin-bottom:26px;max-width:15ch;
}
h1 .resalte{color:var(--acento)}
.hero-texto{font-size:clamp(1.02rem,1.55vw,1.2rem);color:var(--texto-2);max-width:600px;margin-bottom:38px}
.hero-texto strong{color:var(--texto);font-weight:600}
.hero-botones{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:66px}

.hero-prueba{display:flex;align-items:center;gap:36px;flex-wrap:wrap}

/* Tres hechos ciertos en vez de cifras inventadas */
.hero-hechos{display:flex;gap:12px;flex-wrap:wrap}
.hero-hechos li{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.9rem;color:var(--texto-2);
  padding:9px 16px;border:1px solid var(--linea);border-radius:100px;
  background:rgba(255,255,255,.02);
}
.hero-hechos li::before{
  content:'';flex:none;width:12px;height:7px;
  border-left:2px solid var(--acento);border-bottom:2px solid var(--acento);
  transform:rotate(-45deg);margin-top:-3px;
}
.prueba-dato{display:flex;flex-direction:column;gap:2px}
.contador{
  font-family:var(--display);font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:700;
  letter-spacing:-.03em;color:var(--acento);line-height:1.1;font-variant-numeric:tabular-nums;
}
.prueba-pie{font-size:13px;color:var(--texto-3);line-height:1.45}
.prueba-linea{width:1px;height:48px;background:var(--linea-fuerte)}

.hero-scroll{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:3;
  width:22px;height:36px;border:1px solid var(--linea-fuerte);border-radius:100px;
  display:flex;justify-content:center;padding-top:7px;
}
.hero-scroll span{width:3px;height:7px;border-radius:2px;background:var(--acento);animation:baja 1.9s infinite}
@keyframes baja{0%{transform:translateY(0);opacity:0}35%{opacity:1}75%{transform:translateY(13px);opacity:0}100%{opacity:0}}

/* ============================================================
   SECCIONES
   ============================================================ */
.seccion{padding:110px 0;position:relative;z-index:2}
.seccion-alt{background:var(--negro-2);border-block:1px solid var(--linea)}
.seccion-cabeza{margin-bottom:58px;max-width:680px}
.seccion-num{display:block;font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--acento);letter-spacing:.16em;margin-bottom:14px}
h2{font-family:var(--display);font-size:clamp(1.9rem,4.1vw,3rem);line-height:1.12;letter-spacing:-.03em;font-weight:700}
.seccion-sub{margin-top:18px;font-size:1.04rem;color:var(--texto-2);max-width:560px}

.lista-marcas li{position:relative;padding-left:26px;margin-bottom:10px;font-size:.93rem;color:var(--texto-2)}
.lista-marcas li::before{
  content:'';position:absolute;left:1px;top:8px;width:13px;height:7px;
  border-left:2px solid var(--acento);border-bottom:2px solid var(--acento);transform:rotate(-45deg);
}

/* ============================================================
   ESCENARIO 3D (solo escritorio)
   ============================================================ */
.escenario{position:relative;height:380vh;z-index:2}
.escenario-fijo{position:sticky;top:0;height:100svh;overflow:hidden}
#escena{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.escenario-rejilla{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;pointer-events:none}
.escenario-texto{max-width:460px}
.escenario-texto>*{pointer-events:auto}
.escenario-texto h2{margin-bottom:16px}
.escenario-texto p{color:var(--texto-2);margin-bottom:20px}
.escenario-texto .lista-marcas{margin-bottom:24px}
.escenario-texto .seccion-num{text-transform:uppercase}

/* ============================================================
   SERVICIOS
   ============================================================ */
.servicios-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.serv{
  position:relative;cursor:pointer;background:var(--negro-3);
  border:1px solid var(--linea);border-radius:var(--radio-g);
  padding:32px 28px 26px;overflow:hidden;
  transition:transform .45s var(--suave),border-color .3s;
}
.serv::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s;background:radial-gradient(circle at 50% 0%,var(--acento-luz),transparent 60%)}
.serv:hover,.serv:focus-visible{transform:translateY(-5px);border-color:var(--linea-fuerte)}
.serv:hover::before,.serv:focus-visible::before{opacity:1}
.serv-principal{
  grid-column:span 3;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;
  padding:32px;border-color:var(--acento-borde);
  background:linear-gradient(120deg,var(--acento-luz),var(--negro-3) 55%);
}
.serv-principal h3{margin:0}
.serv-principal p{max-width:640px;margin-bottom:0}
.serv-cinta{position:absolute;top:14px;right:20px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acento)}
.serv-icono{
  width:50px;height:50px;border-radius:15px;flex:none;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  display:grid;place-items:center;color:#fff;margin-bottom:20px;
}
.serv-principal .serv-icono{margin-bottom:0;width:60px;height:60px;border-radius:18px}
.serv-icono svg{width:24px;height:24px;stroke-width:1.6}
.serv h3{font-family:var(--display);font-size:1.12rem;font-weight:600;margin-bottom:10px;letter-spacing:-.018em;position:relative}
.serv p{font-size:.92rem;color:var(--texto-2);position:relative;margin-bottom:16px}
.serv-mas{display:inline-flex;align-items:center;gap:7px;position:relative;font-size:.86rem;font-weight:550;color:var(--acento)}
.serv-mas svg{transition:transform .3s var(--suave)}
.serv:hover .serv-mas svg{transform:translateX(4px)}

/* ============================================================
   PASOS
   ============================================================ */
.pasos{display:flex;flex-direction:column}
.paso{display:grid;grid-template-columns:84px 1fr;gap:26px;align-items:start;padding:36px 0;border-top:1px solid var(--linea);transition:padding-left .45s var(--suave)}
.paso:last-child{border-bottom:1px solid var(--linea)}
.paso:hover{padding-left:14px}
.paso-num{font-family:var(--display);font-size:2.6rem;font-weight:700;color:transparent;-webkit-text-stroke:1.4px var(--linea-fuerte);line-height:1;transition:-webkit-text-stroke-color .4s}
.paso:hover .paso-num{-webkit-text-stroke-color:var(--acento)}
.paso-cuerpo h3{font-family:var(--display);font-size:1.3rem;font-weight:600;margin-bottom:9px;letter-spacing:-.02em}
.paso-cuerpo p{color:var(--texto-2);max-width:640px}

/* ============================================================
   PRECIOS
   ============================================================ */
.rejilla-precios{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
/* Con cuatro packs las tarjetas se estrechan: menos relleno y cifra algo mas
   pequena para que el precio no rompa la linea. */

.precios-aviso{
  margin-top:26px;text-align:center;font-size:.85rem;line-height:1.6;
  color:var(--texto-3);max-width:620px;margin-left:auto;margin-right:auto;
}
.precios-aviso strong{color:var(--texto-2);font-weight:600}

/* Bloques de debajo: SaaS a medida y prueba. */
.rejilla-extra{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:34px}
.extra{
  background:var(--negro-2);border:1px solid var(--linea);border-radius:var(--radio-g);
  padding:30px 28px;display:flex;flex-direction:column;align-items:flex-start;
}
.extra-etiqueta{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acento);margin-bottom:12px;
}
.extra h3{font-family:var(--display);font-size:1.25rem;font-weight:600;margin-bottom:10px}
.extra p{font-size:.92rem;color:var(--texto-2);line-height:1.6}
.extra-precio{
  font-family:var(--display);font-size:1.5rem;font-weight:700;
  color:var(--texto);margin:16px 0 6px;
}
.extra-nota{font-size:.82rem;color:var(--texto-3);line-height:1.55;margin-bottom:22px;flex:1}
.extra .btn{margin-top:auto}
.plan{position:relative;background:var(--negro-3);border:1px solid var(--linea);border-radius:var(--radio-g);padding:38px 32px;display:flex;flex-direction:column;transition:transform .45s var(--suave)}
.plan:hover{transform:translateY(-5px)}
.plan-destacado{border-color:var(--acento-borde);background:linear-gradient(170deg,var(--acento-luz),var(--negro-3) 55%)}
.plan-cinta{position:absolute;top:-11px;left:32px;background:var(--acento);color:var(--sobre-acento);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;border-radius:100px}
.plan h3{font-family:var(--display);font-size:1.08rem;font-weight:600;color:var(--texto-2);margin-bottom:14px}
.plan-precio{font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.03em}
.plan-precio span{font-size:3.3rem;line-height:1}
.plan-precio small{font-size:.9rem;color:var(--texto-3);font-weight:400}
.plan-nota{font-size:.85rem;color:var(--texto-3);margin:8px 0 18px}
.plan-desc{
  font-size:.91rem;color:var(--texto-2);line-height:1.6;
  padding-bottom:20px;margin-bottom:20px;
  border-bottom:1px solid var(--linea);
}
.plan-desc strong{color:var(--texto);font-weight:600}
.plan ul{margin-bottom:28px;flex:1}
.plan ul li{position:relative;padding-left:24px;margin-bottom:10px;font-size:.92rem;color:var(--texto-2)}
.plan ul li::before{content:'';position:absolute;left:2px;top:8px;width:11px;height:6px;border-left:2px solid var(--acento);border-bottom:2px solid var(--acento);transform:rotate(-45deg)}
.plan-pie{font-size:.79rem;color:var(--texto-3);margin-top:15px;text-align:center;line-height:1.5}

/* ============================================================
   CONTACTO Y PIE
   ============================================================ */
.contacto-caja{
  text-align:center;padding:66px 44px;border:1px solid var(--linea);border-radius:32px;
  background:radial-gradient(ellipse 80% 100% at 50% 0%,var(--acento-luz),transparent 62%),var(--negro-2);
}
.contacto-caja .seccion-sub{margin:18px auto 38px}
.contacto-vias{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.via{display:flex;align-items:center;gap:15px;text-align:left;padding:17px 26px;border:1px solid var(--linea);border-radius:100px;background:rgba(255,255,255,.025);min-width:255px;transition:transform .35s var(--suave),border-color .3s,background .3s}
.via:hover{transform:translateY(-3px);border-color:var(--acento);background:var(--acento-luz)}
.via-icono{width:40px;height:40px;border-radius:50%;flex:none;background:var(--acento-luz);color:var(--acento);display:grid;place-items:center}
.via-icono svg{width:19px;height:19px}
.via strong{display:block;font-size:.93rem;font-weight:600}
.via span{font-size:.82rem;color:var(--texto-3)}
.contacto-pie{margin-top:32px;font-size:.84rem;color:var(--texto-3)}

.pie{padding:50px 0;border-top:1px solid var(--linea);background:var(--negro-2)}
.pie-fila{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap}
.marca-pie{font-size:17px;margin-bottom:8px}
.pie-lema{font-size:.87rem;color:var(--texto-3)}
.pie-legal{display:flex;gap:22px;font-size:.83rem;color:var(--texto-3);align-items:center}
.pie-legal a:hover{color:var(--acento)}

/* ============================================================
   FICHA (ventana de servicio)
   ============================================================ */
/* OJO con esto, que estuvo roto desde el primer dia y no se veia:
   este fondo cubre la pantalla entera y estaba solo a opacidad 0.
   Invisible, si, pero segui­a capturando TODOS los toques por encima
   de la pagina: no funcionaba ni el menu, ni los botones, ni el de
   WhatsApp. Un elemento invisible tiene que dejar pasar el dedo
   (pointer-events) y desaparecer para un lector de pantalla
   (visibility); con la opacidad sola no basta.

   La visibilidad cambia con retardo al cerrar para que el fundido de
   salida se vea; al abrir, al instante. */
.ficha-fondo{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;padding:24px;
  background:rgba(5,4,3,.8);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s,visibility 0s linear .26s;
}
.ficha-fondo.abierta{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .26s,visibility 0s;
}
.ficha{position:relative;width:100%;max-width:520px;background:var(--negro-2);border:1px solid var(--linea-fuerte);border-radius:26px;padding:38px 34px 32px;transform:translateY(18px) scale(.97);transition:transform .3s var(--suave);max-height:88svh;overflow-y:auto}
.ficha-fondo.abierta .ficha{transform:none}
.ficha-cerrar{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--linea);color:var(--texto-2);cursor:pointer;display:grid;place-items:center;transition:background .25s,color .25s}
.ficha-cerrar:hover{background:rgba(255,255,255,.12);color:var(--texto)}
.ficha-icono{width:58px;height:58px;border-radius:17px;background:linear-gradient(135deg,var(--c1),var(--c2));display:grid;place-items:center;color:#fff;margin-bottom:20px}
.ficha-icono svg{width:27px;height:27px;stroke-width:1.6}
.ficha-lema{display:block;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--acento);margin-bottom:10px}
.ficha h3{font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.025em;margin-bottom:12px}
.ficha p{color:var(--texto-2);margin-bottom:22px;font-size:.96rem}
.ficha .lista-marcas{margin-bottom:26px}

/* ============================================================
   ANIMACIONES DE ENTRADA
   ============================================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--suave),transform .8s var(--suave)}
.reveal.visible{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}

/* ============================================================
   ===============  LA ENTRADA DEL MOVIL  =====================

   Una pantalla de bloqueo de verdad, no un cartel. Lo que se ve
   al entrar desde un movil: la hora y la fecha DE ESE MOMENTO,
   la foto de fondo, y notificaciones de clientes con problemas
   llegando una detras de otra. Deslizas hacia arriba y empieza
   la web.

   Antes esto tenia ademas un escritorio con iconos y una ficha a
   pantalla completa por servicio. Se quito: obligaba a pulsar
   «Saltar» para entrar en la web, que es justo lo que nadie
   quiere hacer nada mas llegar.
   ============================================================ */
.movilos{
  position:fixed;inset:0;z-index:300;
  display:none;flex-direction:column;
  overflow:hidden;
  background:var(--negro);
  color:#fff;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
body.os-activo{overflow:hidden}
body.os-activo .movilos{display:flex}
body.os-activo .flotantes{display:none!important}

/* ---------- El fondo ---------- */
/* Sin foto detras, el degradado es TODO lo que se ve, asi que tiene
   que aguantar el tipo el solo: cuatro luces a distintas alturas y
   un fondo que no es negro plano sino con temperatura. Las dos de
   arriba son el dorado de la marca; la de abajo, fria, para que la
   pantalla tenga profundidad y no parezca un carton. */
.os-fondo{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 82% 30% at 22% 4%,rgba(232,180,85,.34),transparent 64%),
    radial-gradient(ellipse 55% 24% at 88% 22%,rgba(232,180,85,.16),transparent 68%),
    radial-gradient(ellipse 74% 34% at 78% 74%,rgba(127,168,201,.20),transparent 70%),
    radial-gradient(ellipse 60% 26% at 12% 92%,rgba(185,140,217,.12),transparent 72%),
    linear-gradient(168deg,#17140d 0%,#0b0a0c 44%,#0a0a10 72%,#120e15 100%);
  background-size:cover;background-position:center 12%;
  transform:scale(1.06);
  transition:transform .9s var(--suave),filter .6s var(--suave);
  animation:osRespira 26s ease-in-out infinite alternate;
}
/* Un acercamiento tan lento que no se ve moverse, pero se nota que
   la pantalla esta viva y no es una captura. */
@keyframes osRespira{
  from{transform:scale(1.06)}
  to{transform:scale(1.13)}
}
.os-fondo.con-foto{background-image:var(--foto)!important;background-size:cover}

/* Tres capas encima de la foto, y cada una hace algo:

   1. El degradado vertical: oscurece arriba (donde va la hora) y
      abajo (los accesos y el aviso de deslizar), y deja el centro
      limpio. Sin esto, el texto blanco cae sobre la camisa blanca
      del cuello y no se lee.
   2. Un tinte dorado en diagonal, el color de la marca, para que la
      pantalla no sea un gris cualquiera.
   3. Grano fino. Es lo que separa una foto puesta de fondo de algo
      que parece hecho a proposito: mata las bandas del degradado y
      le da textura de pantalla de verdad. */
.os-sombra{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 46% at 50% 0%,rgba(232,180,85,.16),transparent 62%),
    radial-gradient(ellipse 70% 40% at 82% 96%,rgba(127,168,201,.12),transparent 68%),
    linear-gradient(180deg,rgba(6,6,8,.42) 0%,transparent 24%,
                    transparent 62%,rgba(6,6,8,.66) 100%);
}
.os-sombra::after{
  content:'';position:absolute;inset:0;
  opacity:.075;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Barra de estado ---------- */
.os-estado{
  position:relative;z-index:5;
  display:flex;justify-content:space-between;align-items:center;
  padding:calc(11px + env(safe-area-inset-top)) 26px 0;
  font-size:14.5px;font-weight:640;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  color:#fff;
}
.os-estado-iconos{display:flex;align-items:center;gap:6px}
.os-estado-iconos svg{display:block;height:12px;width:auto;opacity:.95}

/* ---------- El cuerpo del bloqueo ---------- */
.os-bloqueo{
  position:relative;z-index:4;
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  padding:0 20px calc(16px + env(safe-area-inset-bottom));
}

.os-reloj{
  display:flex;flex-direction:column;align-items:center;
  padding-top:min(6vh,52px);
}
.os-candado{opacity:.75;margin-bottom:12px}
.os-candado svg{display:block;width:15px;height:15px}
.os-fecha{
  font-size:16px;font-weight:600;letter-spacing:.005em;
  color:rgba(255,255,255,.94);
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}
/* El reloj grande, como el de un iPhone: fino, muy junto y enorme. */
.os-hora{
  font-family:var(--display);
  font-size:clamp(66px,20vw,86px);
  font-weight:500;line-height:1;letter-spacing:-.045em;
  margin-top:2px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 4px 30px rgba(0,0,0,.5);
}

/* ---------- El logo, en 3D ----------
   El logo DM con grosor de verdad: un montón de copias de su silueta
   apiladas hacia atrás en el eje Z, y la cara buena delante. Las de
   detrás van en oro apagado porque en una pieza real el lateral no
   recibe la misma luz que el frente; apilando la cara buena parecería
   un cartel repetido, no un objeto.

   Hecho con CSS y no con Three.js a propósito: en móvil no se carga
   Three.js —son 1,2 MB— y no se va a cargar por el logo de la
   entrada. Esto lo compone la tarjeta gráfica y cuesta lo que una
   sombra.
   ------------------------------------------------------------- */
.os-logo{
  margin:auto;
  display:flex;flex-direction:column;align-items:center;gap:22px;
  perspective:820px;
}

/* El balanceo va aparte del giro: si los dos transform vivieran en el
   mismo elemento se pisarian, porque cada uno tiene su ritmo. */
.os-logo-flota{
  transform-style:preserve-3d;
  animation:logoFlota 5.5s ease-in-out infinite;
}
@keyframes logoFlota{
  0%,100%{transform:translateY(-10px)}
  50%    {transform:translateY(10px)}
}

/* No da la vuelta entera: se mece de lado a lado. Girando 360 grados
   el logo queda de canto y desaparece medio segundo, y un logo tiene
   que poder leerse siempre. Meciendose se le ve el grosor sin dejar
   de reconocerse. */
.os-logo-3d{
  position:relative;
  width:138px;height:138px;
  transform-style:preserve-3d;
  animation:logoMece 7.5s ease-in-out infinite;
}
@keyframes logoMece{
  0%,100%{transform:rotateX(-8deg) rotateY(-30deg)}
  50%    {transform:rotateX(-8deg) rotateY(30deg)}
}

/* Cada capa es la silueta del logo. main.js les pone la profundidad y
   el brillo, que baja hacia el fondo. */
.os-logo-capa{
  position:absolute;inset:0;
  background:url("../img/logo-canto.webp") center/contain no-repeat;
  transform:translateZ(var(--z));
  opacity:var(--o);
}

/* La cara de delante, el logo tal cual. */
.os-logo-cara{
  position:absolute;inset:0;
  background:url("../img/logo-frente.webp") center/contain no-repeat;
  transform:translateZ(17px);
  filter:drop-shadow(0 6px 22px rgba(232,180,85,.35));
}

/* El resplandor que deja detras, como si el logo iluminase el fondo. */
.os-logo-3d::after{
  content:'';position:absolute;left:50%;top:50%;
  width:250px;height:250px;margin:-125px 0 0 -125px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(232,180,85,.26),transparent 66%);
  transform:translateZ(-46px);
  pointer-events:none;
  animation:logoBrilla 5.5s ease-in-out .5s infinite;
}
@keyframes logoBrilla{
  0%,100%{opacity:.72;transform:translateZ(-46px) scale(.92)}
  50%    {opacity:1;  transform:translateZ(-46px) scale(1.08)}
}

.os-logo-nombre{
  font-family:var(--display);
  font-size:23px;font-weight:700;letter-spacing:-.03em;
  color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.6);
}

/* Quien tenga las animaciones apagadas lo ve quieto y de medio lado,
   que es el angulo en el que mejor se le ve el grosor. */
@media (prefers-reduced-motion:reduce){
  .os-logo-3d{animation:none;transform:rotateX(-8deg) rotateY(-26deg)}
  .os-logo-flota,.os-logo-3d::after{animation:none}
}

/* ---------- Notificaciones ---------- */
.os-avisos{
  width:100%;max-width:380px;margin:0 auto;
  display:flex;flex-direction:column;gap:9px;
}
.os-aviso{
  display:flex;gap:11px;align-items:center;
  padding:11px 13px;border-radius:19px;
  background:rgba(28,26,24,.58);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;transform:translateY(16px) scale(.965);
  animation:avisoEntra .55s var(--suave) forwards;
  transition:opacity .45s var(--suave),filter .45s var(--suave);
}
@keyframes avisoEntra{to{opacity:1;transform:none}}
@keyframes avisoSale{to{opacity:0;transform:translateY(-14px) scale(.94)}}
/* Las de arriba se apagan cuando entra una nueva: la mirada va
   siempre a la ultima que ha llegado. */
.os-aviso.vista{opacity:.42!important;filter:saturate(.45)}
.os-aviso.saliendo{animation:avisoSale .28s var(--suave) forwards}

.os-aviso-icono{
  flex:none;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--c,#333);color:#fff;
}
.os-aviso-icono svg{width:18px;height:18px}
.os-aviso-txt{min-width:0;flex:1}
.os-aviso-app{
  font-size:11.5px;font-weight:660;color:rgba(255,255,255,.66);
  display:flex;gap:7px;align-items:baseline;justify-content:space-between;
}
.os-aviso-app span{font-weight:400;font-size:11px;color:rgba(255,255,255,.4);flex:none}
.os-aviso-cuerpo{font-size:13.5px;line-height:1.36;color:rgba(255,255,255,.92);margin-top:2px}

/* La nuestra, la que remata: se queda fija debajo de las demas. */
.os-aviso-nuestro{
  margin-top:2px;
  background:linear-gradient(135deg,rgba(232,180,85,.20),rgba(28,26,24,.62));
  border-color:var(--acento-borde);
  animation-delay:.9s;
}
.os-aviso-nuestro .os-aviso-icono{background:linear-gradient(135deg,var(--acento),var(--acento-2));color:#1A1206}
.os-aviso-nuestro .os-aviso-app{color:var(--acento)}
.os-aviso-nuestro .os-aviso-cuerpo b{color:#fff;font-weight:660}

/* ---------- Pie: accesos, aviso de deslizar y barra ---------- */
.os-pie{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:14px}

.os-accesos{
  width:100%;max-width:380px;
  display:flex;justify-content:space-between;
}
.os-acceso{
  width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#fff;
  transition:transform .2s var(--suave),background-color .2s;
}
.os-acceso:active{transform:scale(.9)}
.os-acceso svg{width:22px;height:22px}
.os-acceso-wapp{background:rgba(37,211,102,.24);border-color:rgba(37,211,102,.42);color:#7df0b0}
.os-acceso-tel{background:rgba(127,168,201,.22);border-color:rgba(127,168,201,.4);color:#b6d4ec}

.os-desliza{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:12.5px;font-weight:550;letter-spacing:.03em;
  color:rgba(255,255,255,.74);
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.os-flecha{
  width:11px;height:11px;
  border-left:2px solid rgba(255,255,255,.8);
  border-top:2px solid rgba(255,255,255,.8);
  transform:rotate(45deg);
  animation:sube 1.9s infinite;
}
@keyframes sube{
  0%,100%{transform:rotate(45deg) translate(0,0);opacity:.45}
  50%    {transform:rotate(45deg) translate(3px,3px);opacity:1}
}

/* La rayita de abajo del iPhone. */
.os-barra{
  width:134px;height:5px;border-radius:100px;
  background:rgba(255,255,255,.85);
}

/* ---------- El desbloqueo ---------- */
/* Se va como se va de verdad: el contenido sube y se desvanece, el
   fondo se acerca un poco, y la capa entera se levanta dejando ver
   la web que ya estaba debajo. */
.movilos.saliendo{
  animation:osSale .62s var(--suave) forwards;
  pointer-events:none;
}
.movilos.saliendo .os-fondo{transform:scale(1.14);filter:brightness(.7)}
.movilos.saliendo .os-bloqueo,
.movilos.saliendo .os-estado{
  transform:translateY(-34px);opacity:0;
  transition:transform .5s var(--suave),opacity .38s linear;
}
@keyframes osSale{
  0%  {opacity:1;transform:translateY(0)}
  62% {opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-14%)}
}

/* Pantallas cortas: el reloj baja de tamano antes de que algo se
   salga por abajo. */
@media (max-height:700px){
  .os-reloj{padding-top:22px}
  .os-hora{font-size:clamp(54px,16vw,66px)}
  .os-avisos{gap:7px}
  .os-aviso{padding:9px 12px}
  .os-aviso-cuerpo{font-size:12.8px}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){ .escenario-texto{max-width:400px} }
@media (max-width:1000px){
  .servicios-rejilla{grid-template-columns:repeat(2,1fr)}
  .serv-principal{grid-column:span 2;grid-template-columns:1fr;gap:18px}
  .rejilla-precios,
  .rejilla-extra{grid-template-columns:1fr}
}
@media (max-width:900px){ .escenario{display:none} }
@media (max-width:820px){
  .nav{padding:14px 18px;gap:14px}
  .nav-enlaces{
    position:fixed;inset:60px 0 auto;flex-direction:column;gap:0;
    background:rgba(10,9,8,.97);backdrop-filter:blur(18px);border-bottom:1px solid var(--linea);
    max-height:0;overflow:hidden;transition:max-height .45s var(--suave);
  }
  .nav-enlaces.abierto{max-height:320px}
  .nav-enlaces a{padding:15px 22px;border-bottom:1px solid var(--linea);font-size:15px}
  .nav-burger{display:flex}
  .btn-nav{margin-left:auto}

  .seccion{padding:76px 0}
  .hero{min-height:auto;padding:118px 20px 70px}
  .hero-botones{margin-bottom:48px}
  .servicios-rejilla{grid-template-columns:1fr}
  .serv-principal{grid-column:span 1}
  .paso{grid-template-columns:50px 1fr;gap:16px;padding:28px 0}
  .paso-num{font-size:1.8rem}
  .contacto-caja{padding:46px 22px}
  .via{min-width:100%}
  .prueba-linea{display:none}
  .pie-fila{flex-direction:column;align-items:flex-start}
  .ficha{padding:32px 24px 26px;border-radius:22px}
}
@media (max-width:380px){
  .os-hora{font-size:60px}
  .os-acceso{width:46px;height:46px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   BOTON FLOTANTE DE WHATSAPP — solo movil
   La mayoria entra desde el telefono. Escribirte no puede
   depender de que baje hasta el pie de la pagina.
   ============================================================ */
/* ============================================================
   BOTONES FLOTANTES
   El contenedor lleva la posición y el aparecer; cada botón solo
   se ocupa de su aspecto. Así se apilan solos y añadir un tercero
   algún día no descuadra nada.
   ============================================================ */
.flotantes{
  position:fixed;z-index:120;display:none;
  /* Uno en cada esquina: Instagram pegado al borde izquierdo y
     WhatsApp al derecho. El contenedor va de lado a lado y los
     separa; como no captura toques, la franja de en medio no estorba
     a lo que haya debajo. */
  left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));
  flex-direction:row;align-items:center;justify-content:space-between;
  opacity:0;transform:translateY(20px) scale(.9);
  transition:opacity .4s var(--suave),transform .4s var(--suave);
}
.flotantes.dentro{opacity:1;transform:none}

/* Quien captura el dedo son los BOTONES, nunca la caja que los
   contiene. La caja es mas ancha que el botón de Instagram, y ese
   hueco vacío se estaba tragando los toques sobre los enlaces del
   pie. Y mientras no han aparecido, ni los botones: si no, quedaban
   dos zonas invisibles pero pulsables encima de la portada. */
.flotantes,
.flotantes>*{pointer-events:none}
.flotantes.dentro>*{pointer-events:auto}

/* WhatsApp: el principal. Lleva texto y es el que se ve primero. */
.wapp{
  position:relative;
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 20px 13px 16px;border-radius:100px;
  background:#25d366;color:#04240f;
  font-size:15px;font-weight:650;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.6);
}
.wapp svg{width:22px;height:22px;flex:none}
.wapp::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:llamada 2.6s infinite;
}
@keyframes llamada{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

/* Instagram: acompaña. Redondo y sin texto, para que no le dispute
   la atención al de WhatsApp, que es el que trae clientes. */
.flota-insta{
  display:grid;place-items:center;
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,#f9a03f 4%,#e4405f 46%,#c13584 72%,#833ab4 100%);
  color:#fff;
  box-shadow:0 8px 24px -8px rgba(193,53,132,.75);
  transition:transform .2s var(--suave);
}
.flota-insta svg{width:23px;height:23px}
.flota-insta:active{transform:scale(.9)}

@media (max-width:900px){
  .flotantes{display:flex}
  /* Hueco para que los botones flotantes no se sienten encima de los
     enlaces legales del pie. */
  .pie{padding-bottom:84px}
}



/* Si algún día queda un solo acceso, que no se vaya al centro:
   ahí está la flecha de «desliza». */
.os-accesos:has(.os-acceso:only-child){justify-content:flex-start}

/* ============================================================
   MÓVIL: QUITARLE TRABAJO AL TELÉFONO
   ------------------------------------------------------------
   La mayoría entra desde el móvil, y un móvil de gama media no
   tiene la GPU de un portátil. Lo de aquí abajo no quita ni un
   elemento de la página: quita EFECTOS que en una pantalla de
   seis pulgadas no se aprecian y que cuestan cada fotograma.
   ============================================================ */
@media (max-width:900px){

  /* El grano.
     Es una capa fija del tamaño de la pantalla con una textura de
     ruido generada por filtro. A un 3% de opacidad, en un móvil no
     se ve; pero obliga al navegador a mantener una capa aparte de
     toda la pantalla y a repintarla al hacer scroll. Fuera. */
  .grano{display:none}

  /* La barra de arriba.
     Este es el caro de verdad. Va fija sobre el contenido que se
     mueve, así que `backdrop-filter` vuelve a desenfocar lo de
     detrás EN CADA FOTOGRAMA mientras bajas. Se cambia por un
     fondo casi opaco: se ve igual de bien y no cuesta nada. */
  .nav{
    background:rgba(10,9,8,.96);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  /* La presentación del móvil.
     Estos desenfoques sí se ven, y van sobre un fondo quieto, así
     que se quedan; sólo se les baja el radio. De 16 a 8 píxeles el
     ojo no lo distingue y el trabajo se reduce mucho. */
  .os-acceso,
  .os-aviso{
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
}

/* iOS agranda por su cuenta el texto al girar el móvil y descuadra
   la página. Esto se lo impide sin bloquear el zoom del usuario. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ============================================================
   LA ÓRBITA
   Maik en el centro, los seis servicios encendiéndose alrededor.
   Los iconos los dibuja la web, no van pegados en la foto: así se
   ven nítidos en cualquier pantalla, se pueden pulsar y Google los
   lee como texto. Una imagen plana no es nada de eso.
   ============================================================ */
.orbita{
  position:relative;
  width:min(940px,100%);
  margin:6px auto 54px;
  isolation:isolate;
}
.orbita-marco{position:relative;aspect-ratio:1122/934}

/* Resplandor detrás, para que la foto no parezca pegada encima
   del fondo sino encendida desde dentro. */
.orbita-brillo{
  position:absolute;inset:-14% -8% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 52% 44% at 50% 34%,var(--acento-luz),transparent 68%),
    radial-gradient(ellipse 40% 30% at 16% 62%,rgba(127,168,201,.10),transparent 70%);
  filter:blur(6px);
}

.orbita-foto{
  position:relative;z-index:1;
  display:block;width:100%;height:100%;
  object-fit:cover;border-radius:20px;
}

/* Vela los bordes: la foto se funde con la página en vez de acabar
   en un rectángulo recortado, y deja sitio limpio a los iconos. */
.orbita-velo{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:20px;
  background:
    radial-gradient(ellipse 62% 78% at 50% 58%,transparent 44%,rgba(10,9,8,.62) 100%),
    linear-gradient(to bottom,rgba(10,9,8,.42) 0%,transparent 22%,transparent 72%,var(--negro) 99%);
}

/* Los hilos que van de cada servicio hacia él. No llegan a tocarle:
   se quedan a media distancia y se desvanecen. */
.orbita-hilos{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  width:100%;height:100%;overflow:visible;
}
.orbita-hilos line{
  stroke:var(--acento);
  stroke-width:.14;
  stroke-linecap:round;
  opacity:0;
  stroke-dasharray:var(--largo);
  stroke-dashoffset:var(--largo);
  transition:stroke-dashoffset .9s var(--suave),opacity .5s linear;
  transition-delay:var(--tarda);
}
.orbita.encendida .orbita-hilos line{opacity:.30;stroke-dashoffset:0}

/* ---------- Cada servicio ---------- */
.orbita-nodos{
  position:absolute;inset:0;z-index:4;
  list-style:none;margin:0;padding:0;
}
.orbita-nodo{
  position:absolute;
  left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
}

.orbita-boton{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  width:104px;margin:0;padding:0;
  background:none;border:0;cursor:pointer;
  color:var(--texto);
  -webkit-tap-highlight-color:transparent;

  /* Apagado: se intuye que hay algo, pero no está encendido. */
  opacity:.16;
  transform:scale(.72);
  transition:opacity .7s var(--suave),transform .7s var(--suave);
  transition-delay:var(--tarda);
}
.orbita.encendida .orbita-boton{opacity:1;transform:scale(1)}

.orbita-aro{
  position:relative;
  width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(14,12,10,.72);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:none;
  transition:border-color .7s var(--suave),box-shadow .7s var(--suave),
             background-color .7s var(--suave),transform .25s var(--suave);
  transition-delay:var(--tarda),var(--tarda),var(--tarda),0s;
}
.orbita.encendida .orbita-aro{
  border-color:var(--acento-borde);
  background:rgba(20,16,10,.80);
  box-shadow:0 0 0 1px rgba(232,180,85,.10),
             0 0 26px -4px rgba(232,180,85,.55),
             inset 0 0 18px -8px rgba(232,180,85,.7);
}
.orbita-aro svg{width:26px;height:26px;color:var(--acento)}

/* El fogonazo del momento en que se enciende. */
.orbita-aro::after{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  border:1px solid var(--acento);
  opacity:0;
}
.orbita.encendida .orbita-aro::after{animation:chispazo .9s var(--suave) both;animation-delay:var(--tarda)}
@keyframes chispazo{
  0%{opacity:.85;transform:scale(1)}
  100%{opacity:0;transform:scale(1.65)}
}

.orbita-nombre{
  font-family:var(--display);font-weight:600;
  font-size:12.5px;letter-spacing:.01em;line-height:1.25;
  text-align:center;color:rgba(255,255,255,.88);
  text-shadow:0 1px 10px rgba(0,0,0,.9);
}

.orbita-boton:hover .orbita-aro,
.orbita-boton:focus-visible .orbita-aro{transform:scale(1.10)}
.orbita-boton:focus-visible{outline:none}
.orbita-boton:focus-visible .orbita-aro{
  border-color:var(--acento);
  box-shadow:0 0 0 3px var(--acento-luz),0 0 30px -4px rgba(232,180,85,.7);
}

/* Pie: dice en una línea lo que la imagen cuenta sin palabras. */
.orbita-pie{
  max-width:640px;margin:-22px auto 46px;
  text-align:center;font-size:.95rem;color:var(--texto-2);
  padding:0 16px;
}
.orbita-pie strong{color:var(--texto)}

/* ---------- Móvil ---------- */
@media (max-width:760px){
  .orbita{margin-bottom:38px}

  /* La foto, de borde a borde de la pantalla: se sale del margen del
     contenedor a proposito. En un movil, una foto con aire a los lados
     parece pequena; a sangre parece una portada. */
  .orbita-marco{
    margin-inline:-24px;width:calc(100% + 48px);
  }
  .orbita-foto,.orbita-velo{border-radius:0}

  /* Y los servicios, en rejilla debajo. Alrededor no caben: seis
     circulos con su nombre en 327 px se pisarian unos a otros. */
  .orbita-hilos{display:none}
  .orbita-nodos{
    position:static;
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:20px 4px;margin-top:22px;
  }
  .orbita-nodo{position:static;transform:none;justify-self:center}
  .orbita-boton{width:100%;max-width:92px}
  .orbita-boton{width:76px;gap:6px}
  .orbita-aro{width:46px;height:46px}
  .orbita-aro svg{width:20px;height:20px}
  .orbita-nombre{font-size:10.5px}
  .orbita-hilos line{stroke-width:.2}
  .orbita-pie{font-size:.88rem;margin:-8px auto 34px}
}
@media (max-width:380px){
  .orbita-boton{width:66px}
  .orbita-aro{width:42px;height:42px}
  .orbita-nombre{font-size:9.5px}
}

/* Quien tenga las animaciones apagadas lo ve todo encendido y quieto. */
@media (prefers-reduced-motion:reduce){
  .orbita-boton,.orbita-aro,.orbita-hilos line{transition:none!important;transition-delay:0s!important}
  .orbita-boton{opacity:1;transform:none}
  .orbita-aro{border-color:var(--acento-borde)}
  .orbita-aro::after{display:none}
  .orbita-hilos line{opacity:.26;stroke-dashoffset:0}
}

/* ============================================================
   DESARROLLO A MEDIDA
   Va fuera de la rejilla de packs a propósito: no es un cuarto
   pack, es otra cosa. Ponerlo al lado en columna daría a
   entender que se compara precio con precio, y no se compara.
   ============================================================ */
.medida{
  display:grid;grid-template-columns:1.6fr 1fr;
  gap:clamp(20px,3vw,44px);align-items:center;
  margin-top:22px;padding:32px clamp(24px,3vw,38px);
  background:var(--negro-3);
  border:1px solid var(--linea);
  border-radius:var(--radio-g);
}
.medida h3{font-family:var(--display);font-size:1.25rem;font-weight:600;margin:10px 0 12px}
.medida p{font-size:.95rem;color:var(--texto-2);line-height:1.65;margin-bottom:12px}
.medida-nota{font-size:.86rem;color:var(--texto-3);margin-bottom:0}
.medida-accion{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.medida-accion .extra-precio{margin:0}

/* ============================================================
   QUÉ ENTRA EN LA MENSUALIDAD
   Decir esto claro y por escrito quita la mitad de las dudas
   antes de que las pregunten. Y la letra pequeña va aquí, a la
   vista, no escondida en una nota al pie.
   ============================================================ */
.incluido{
  margin-top:22px;padding:32px clamp(24px,3vw,38px);
  border:1px solid var(--linea);border-radius:var(--radio-g);
  background:linear-gradient(170deg,var(--acento-luz),transparent 62%);
}
.incluido h3{
  font-family:var(--display);font-size:1.1rem;font-weight:600;
  margin-bottom:18px;
}
.incluido-lista{
  list-style:none;padding:0;margin:0 0 26px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:11px 26px;
}
.incluido-lista li{
  position:relative;padding-left:25px;
  color:var(--texto-2);font-size:.94rem;
}
.incluido-lista li::before{
  content:'';position:absolute;left:2px;top:.5em;
  width:9px;height:5px;
  border-left:2px solid var(--acento);border-bottom:2px solid var(--acento);
  transform:rotate(-45deg);
}
.incluido-letra{
  border-top:1px solid var(--linea);padding-top:20px;
  display:grid;grid-template-columns:1fr 1fr;gap:22px;
}
.incluido-letra p{font-size:.86rem;color:var(--texto-3);line-height:1.6;margin:0}
.incluido-letra strong{color:var(--texto-2);font-weight:600}

@media (max-width:820px){
  .medida{grid-template-columns:1fr;gap:22px}
  .incluido-letra{grid-template-columns:1fr;gap:16px}
}

/* Las tres rayas se convierten en una equis al abrir el menú: sin eso
   no hay forma de saber que el botón también sirve para cerrarlo. */
.nav-burger span{transform-origin:center}
.nav-burger.abierto span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-burger.abierto span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ============================================================
   PREGUNTAS FRECUENTES
   Con <details> nativo: se abre y cierra sin una línea de
   JavaScript, funciona con teclado y lector de pantalla solo, y
   —esto es lo que importa para Google— el texto de la respuesta
   está en la página aunque esté plegado. Con un acordeón hecho a
   mano habría que vigilar las tres cosas.
   ============================================================ */
.faq{border-top:1px solid var(--linea)}

.faq-item{border-bottom:1px solid var(--linea)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 2px;cursor:pointer;list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{
  font-family:var(--display);font-size:1.04rem;font-weight:600;
  color:var(--texto);margin:0;line-height:1.35;
  transition:color .25s;
}
.faq-item summary:hover h3{color:var(--acento)}

/* El signo de más que se convierte en menos al abrir. */
.faq-signo{position:relative;flex:none;width:16px;height:16px}
.faq-signo::before,
.faq-signo::after{
  content:'';position:absolute;left:0;top:7px;
  width:16px;height:2px;border-radius:2px;background:var(--acento);
  transition:transform .3s var(--suave);
}
.faq-signo::after{transform:rotate(90deg)}
.faq-item[open] .faq-signo::after{transform:rotate(0)}

.faq-respuesta{padding:0 2px 24px}
.faq-respuesta p{
  color:var(--texto-2);font-size:.97rem;line-height:1.7;
  max-width:64ch;margin:0;
}

/* Al abrirse, la respuesta entra en vez de aparecer de golpe. */
.faq-item[open] .faq-respuesta{animation:faqAbre .32s var(--suave)}
@keyframes faqAbre{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}

@media (max-width:820px){
  .faq-item summary{padding:18px 2px;gap:14px}
  .faq-item summary h3{font-size:.98rem}
  .faq-respuesta{padding-bottom:20px}
  .faq-respuesta p{font-size:.94rem}
}

@media (prefers-reduced-motion:reduce){
  .faq-item[open] .faq-respuesta{animation:none}
}

/* ============================================================
   LO QUE SE VE SIN BAJAR NO PUEDE APARECER CON UN FUNDIDO
   Google cronometra cuándo se pinta el elemento más grande de la
   portada, y aquí ese elemento es el <h1>. Un texto a opacidad 0
   no cuenta como pintado, así que el fundido nos estaba costando
   casi un segundo de nota, medido.

   Solución: al titular y a lo que le rodea se les quita el
   fundido y se les deja el movimiento. A la vista es lo mismo;
   para el cronómetro, no.
   ============================================================ */
.hero .reveal{opacity:1;transform:translateY(16px)}
.hero .reveal.visible{transform:none}