/* ============================================================
   V11 · Tres arreglos y una firma animada
   ============================================================ */

/* ---------- 1. Se acabó el scroll horizontal ----------
   'clip' recorta sin crear contenedor de scroll, así que el header
   pegajoso sigue funcionando. 'hidden' sí lo rompería. */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
@supports not (overflow:clip){
  html,body{overflow-x:hidden}
}
.wrap>*,section>*{max-width:100%}
img,svg,video,table,pre{max-width:100%}
.v9-tabla-scroll{max-width:100%}
@media(max-width:819px){
  .v9-tabla-scroll{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
}

/* ---------- 2. Manija del comparador ----------
   Con JS activo la manija deja de comportarse como etiqueta y se
   convierte solo en agarradera. Sin JS sigue siendo label y funciona. */
.js-activo .manija-tap{cursor:ew-resize;pointer-events:auto}
.comparador.drag-activo{cursor:grabbing}
.comparador.drag-activo .manija::after{transform:translate(-50%,-50%) scale(1.14)}

/* ---------- 3. Firma animada ---------- */
.v11-firma{background:var(--obsidiana);color:#fff;position:relative;overflow:hidden;
  padding:clamp(60px,10vw,110px) 0;text-align:center;
  border-top:1px solid rgba(255,255,255,.07)}
.v11-firma::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(48% 62% at 50% 46%,rgba(14,156,106,.16),transparent 72%)}
.v11-firma>.wrap{position:relative;z-index:2}

.v11-marca{position:relative;width:min(300px,72vw);margin:0 auto 30px;aspect-ratio:1}

/* anillo punteado que gira */
.v11-orbita{position:absolute;inset:12%;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.14);animation:v11Gira 26s linear infinite}
.v11-orbita.dos{inset:2%;border-style:solid;border-color:rgba(14,156,106,.16);
  animation-duration:38s;animation-direction:reverse}
@keyframes v11Gira{to{transform:rotate(360deg)}}

/* satélites */
.v11-sat{position:absolute;inset:12%;animation:v11Gira 9s linear infinite}
.v11-sat.b{inset:2%;animation-duration:14s;animation-direction:reverse}
.v11-sat i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;
  border-radius:50%;background:var(--destello);box-shadow:0 0 14px 3px rgba(14,156,106,.7)}
.v11-sat.b i{background:#fff;width:5px;height:5px;box-shadow:0 0 10px 2px rgba(255,255,255,.5)}

/* la marca */
.v11-svg{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center}
.v11-svg svg{width:52%;height:auto;overflow:visible}
.v11-izq,.v11-der{animation:v11Junta 8s cubic-bezier(.2,.86,.24,1) infinite}
.v11-izq{transform-origin:center}
@keyframes v11Junta{
  0%      {transform:translateX(var(--dx,-34px)) rotate(var(--rot,-8deg));opacity:0}
  14%     {opacity:1}
  26%,74% {transform:translateX(0) rotate(0);opacity:1}
  90%,100%{transform:translateX(var(--dx,-34px)) rotate(var(--rot,-8deg));opacity:0}
}
.v11-izq{--dx:-38px;--rot:-10deg}
.v11-der{--dx:38px;--rot:10deg}

/* chispa al juntarse */
.v11-chispa{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:#fff;opacity:0;
  animation:v11Chispa 8s ease-out infinite}
@keyframes v11Chispa{
  0%,22%  {opacity:0;transform:scale(.2)}
  27%     {opacity:1;transform:scale(1);box-shadow:0 0 40px 16px rgba(14,156,106,.75)}
  40%,100%{opacity:0;transform:scale(3.4);box-shadow:0 0 0 0 rgba(14,156,106,0)}
}

/* onda expansiva */
.v11-onda{position:absolute;top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;
  border-radius:50%;border:2px solid rgba(14,156,106,.5);opacity:0;
  animation:v11Onda 8s ease-out infinite}
.v11-onda.tarde{animation-delay:.24s;border-color:rgba(255,255,255,.24)}
@keyframes v11Onda{
  0%,24%  {opacity:0;transform:scale(.3)}
  29%     {opacity:1;transform:scale(.6)}
  52%,100%{opacity:0;transform:scale(3.6)}
}

/* palabra que aparece letra por letra */
.v11-palabra{display:flex;justify-content:center;gap:.06em;
  font:700 clamp(2rem,7vw,3.4rem) 'Poppins',sans-serif;letter-spacing:.09em;
  line-height:1;margin-bottom:16px}
.v11-palabra span{display:inline-block;opacity:0;
  animation:v11Letra 8s cubic-bezier(.2,.86,.24,1) infinite;
  animation-delay:calc(2.24s + var(--l) * .07s)}
@keyframes v11Letra{
  0%      {opacity:0;transform:translateY(14px) rotate(4deg);filter:blur(5px)}
  4%,60%  {opacity:1;transform:none;filter:none}
  74%,100%{opacity:0;transform:translateY(-8px);filter:blur(4px)}
}
.v11-palabra span.verde{color:var(--destello)}

.v11-lema{color:rgba(255,255,255,.55);font-size:clamp(.95rem,2.4vw,1.1rem);
  max-width:38ch;margin:0 auto;opacity:0;
  animation:v11Lema 8s ease infinite;animation-delay:2.9s}
@keyframes v11Lema{0%{opacity:0;transform:translateY(8px)}6%,58%{opacity:1;transform:none}72%,100%{opacity:0}}

/* barrido de luz sobre todo el bloque */
.v11-barrido{position:absolute;top:0;bottom:0;left:-30%;width:26%;pointer-events:none;
  transform:skewX(-16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  animation:v11Barre 8s ease-in-out infinite}
@keyframes v11Barre{0%,26%{left:-30%}44%,100%{left:120%}}

@media(prefers-reduced-motion:reduce){
  .v11-orbita,.v11-sat,.v11-izq,.v11-der,.v11-chispa,.v11-onda,
  .v11-palabra span,.v11-lema,.v11-barrido{animation:none!important;opacity:1!important;transform:none!important}
  .v11-chispa,.v11-onda,.v11-barrido{display:none}
}

/* ---------- 4. Brillo en el logo del encabezado ---------- */
.head .logo{position:relative;overflow:hidden;border-radius:6px;padding:4px 6px;margin-left:-6px}
.head .logo::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:32%;
  pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation:v11Logo 9s ease-in-out infinite}
@keyframes v11Logo{0%,84%{left:-40%}96%,100%{left:130%}}
@media(hover:hover) and (pointer:fine){
  .head .logo:hover::after{animation:v11Logo 1.1s ease-in-out}
}
@media(prefers-reduced-motion:reduce){.head .logo::after{display:none}}