/* Web de Doublelag. Colores del logo (memoria color-turquesa-degradado):
   #7FF6FF brillo -> #22D3F0 turquesa -> #1A8FE8 -> #1557D0 azul, canto #0A2D6E.
   Inter para todo; Anton solo para el logotipo. El verde no se usa. */

@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/Inter-var.woff2) format("woff2")}
@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Anton.woff2) format("woff2")}

:root{
  --fondo:#050b16; --fondo2:#0a1424; --tarj:rgba(255,255,255,.035);
  --crema:#eef1f2; --txt2:#97a7b8; --tenue:rgba(151,190,220,.14);
  --turq:#22d3f0; --turq2:#7ff6ff; --azul:#1a8fe8; --azul2:#1557d0; --canto:#0a2d6e;
  --acento-txt:var(--turq2);
  --degradado:linear-gradient(180deg,#7ff6ff 0%,#22d3f0 38%,#1a8fe8 72%,#1557d0 100%);
  --degradado-h:linear-gradient(90deg,#22d3f0,#1a8fe8 70%,#1557d0);
  --topo:rgba(34,211,240,.16);
  --sombra:0 30px 60px -30px rgba(0,0,0,.8);
  --ambar:#f2b33d;
  --curva:cubic-bezier(.16,1,.3,1);
  --radio:18px;
  color-scheme:dark;
}
:root[data-theme="claro"]{
  --fondo:#f3f1ec; --fondo2:#e9e6df; --tarj:rgba(255,255,255,.7);
  --crema:#0b1a2c; --txt2:#4d5d6e; --tenue:rgba(11,26,44,.12);
  --acento-txt:#086a8e;
  --degradado:linear-gradient(180deg,#1a6fd8 0%,#1557d0 50%,#0a2d6e 100%);
  --degradado-h:linear-gradient(90deg,#1572d6,#1557d0);
  --topo:rgba(10,120,160,.16);
  --sombra:0 30px 60px -34px rgba(11,26,44,.35);
  --ambar:#b7740a;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--crema);font:400 17px/1.6 Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;transition:background-color .35s,color .35s}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.02}
p{margin:0}
:focus-visible{outline:2px solid var(--turq);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}

/* Texto con el degradado del logo */
.logo,h1 em,.datos-bar b,.red-num b,.barras b,.col-dato,.for-n,.mail{
  background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent}

.etq{font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--acento-txt)}

/* ---- Cabecera ---- */
.site-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--fondo) 78%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s var(--curva)}
.site-head.bajado{border-color:var(--tenue);box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}
:root[data-theme="claro"] .site-head.bajado{box-shadow:0 10px 30px -20px rgba(0,0,0,.18)}
.head-in{display:flex;align-items:center;gap:28px;height:68px}
.logo{font:400 1.7rem/1 Anton,Impact,sans-serif;letter-spacing:.03em;text-decoration:none}
.menu{display:flex;gap:26px;margin-left:auto}
.menu a{font-size:.93rem;font-weight:500;color:var(--txt2);text-decoration:none;transition:color .2s}
.menu a:hover{color:var(--crema)}
.head-acc{display:flex;align-items:center;gap:12px}
.idioma{font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--txt2);text-decoration:none;
  padding:9px 10px;border-radius:10px;transition:color .2s,background-color .2s}
.idioma:hover{color:var(--crema);background:var(--tenue)}
.tema-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--tenue);background:transparent;color:var(--crema);
  cursor:pointer;display:grid;place-items:center;transition:border-color .2s,transform .4s var(--curva)}
.tema-btn:hover{border-color:var(--turq);transform:rotate(-20deg)}
.tema-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;grid-area:1/1}
.tema-btn .luna{fill:currentColor;stroke:none;display:none}
:root[data-theme="claro"] .tema-btn .sol{display:none}
:root[data-theme="claro"] .tema-btn .luna{display:block}

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font-weight:700;font-size:.98rem;
  text-decoration:none;color:#03131f;background:var(--degradado-h);box-shadow:0 10px 30px -12px rgba(34,211,240,.55);
  transition:transform .35s var(--curva),box-shadow .35s var(--curva)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(34,211,240,.7)}
:root[data-theme="claro"] .btn{color:#fff;box-shadow:0 10px 26px -12px rgba(21,87,208,.5)}
.btn-sec{background:transparent;color:var(--crema);border:1px solid var(--tenue);box-shadow:none}
.btn-sec:hover{border-color:var(--turq);box-shadow:none}
:root[data-theme="claro"] .btn-sec{color:var(--crema);box-shadow:none}
.btn-peq{padding:9px 18px;font-size:.88rem}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;padding:56px 0 24px}
.topo{position:absolute;inset:-10% 0 auto;width:100%;height:120%;color:var(--topo);pointer-events:none;
  transform:translateY(var(--cielo,0px));
  -webkit-mask:radial-gradient(ellipse 70% 70% at 70% 40%,#000 30%,transparent 80%);
          mask:radial-gradient(ellipse 70% 70% at 70% 40%,#000 30%,transparent 80%)}
.topo g{animation:deriva 60s ease-in-out infinite alternate}
@keyframes deriva{to{transform:translate(-40px,18px)}}
.hero-in{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:40px;align-items:center;min-height:min(640px,78vh)}
.hero-txt{display:flex;flex-direction:column;gap:22px}
.hero h1{font-size:clamp(2.7rem,6.4vw,5.4rem);letter-spacing:-.045em;line-height:.96}
.hero h1 em{font-style:normal;padding-right:.04em}
.entra{font-size:1.14rem;color:var(--txt2);max-width:34em}
.hero-bot{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero-demo{position:relative;justify-self:center;width:min(100%,470px)}
/* Foto de perfil (la de YouTube) en una tarjeta un poco girada, con halo
   turquesa detrás y el logo «cristal» encima de la esquina */
.foto{position:relative;aspect-ratio:1;transform:rotate(2.5deg);transition:transform .8s var(--curva)}
.foto:hover{transform:rotate(0) scale(1.01)}
.foto::before{content:"";position:absolute;inset:-8%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(34,211,240,.45),rgba(21,87,208,.18) 45%,transparent 70%);filter:blur(10px)}
.foto>img:first-child{width:100%;border-radius:36px;border:1px solid rgba(127,246,255,.35);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 8px color-mix(in srgb,var(--fondo) 70%,transparent)}
.foto-logo{position:absolute;top:-30px;right:-26px;width:96px;height:96px;transform:rotate(-6deg);
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.5))}
.sello{position:absolute;z-index:2;left:-9%;bottom:9%;padding:12px 16px;border-radius:14px;font-size:.88rem;color:var(--txt2);
  background:color-mix(in srgb,var(--fondo2) 80%,transparent);border:1px solid var(--tenue);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);box-shadow:var(--sombra)}
.sello b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.03em;color:var(--crema);line-height:1.1}

/* ---- Cifras ---- */
.datos{padding:8px 0 40px}
.datos-bar{list-style:none;margin:0;padding:28px 0;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--tenue);border-bottom:1px solid var(--tenue)}
.cifra{padding:0 22px;border-left:1px solid var(--tenue)}
.cifra:first-child{border-left:0;padding-left:0}
.datos-bar b{display:block;font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:800;letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums}
.cifra span{display:block;margin-top:8px;font-size:.92rem;color:var(--txt2);line-height:1.35}
.fuente{margin-top:12px;font-size:.8rem;color:var(--txt2);opacity:.8}

/* ---- Secciones ---- */
.sec{padding:96px 0}
.sec h2{font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.04em;margin-top:12px}
.sec-entra{margin-top:16px;max-width:38em;color:var(--txt2);font-size:1.06rem}
.sec .wrap>div:first-child{margin-bottom:44px}

/* Redes */
.redes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.red{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:var(--radio);
  background:var(--tarj);border:1px solid var(--tenue);text-decoration:none;
  transition:border-color .3s,transform .45s var(--curva),background-color .3s}
a.red:hover{border-color:color-mix(in srgb,var(--turq) 60%,transparent);transform:translateY(-4px)}
.red-plat{font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--acento-txt)}
.red-nom{font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.red-num{font-size:.92rem;color:var(--txt2);margin-top:6px}
.red-num b{font-size:2.1rem;font-weight:800;letter-spacing:-.04em;margin-right:4px}
.red-que{font-size:.92rem;color:var(--txt2);line-height:1.45;margin-top:auto;padding-top:10px}
.flecha{position:absolute;top:20px;right:22px;color:var(--txt2);transition:transform .35s var(--curva),color .2s}
a.red:hover .flecha{transform:translate(3px,-3px);color:var(--turq)}
div.red .flecha{display:none}

/* Números */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bloque{padding:30px;border-radius:var(--radio);background:var(--tarj);border:1px solid var(--tenue)}
.bloque h3{font-size:1.45rem}
.bloque-txt{margin:10px 0 26px;color:var(--txt2);font-size:.97rem}
.barras{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.barras li{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:end}
.b-tit{font-size:.95rem;font-weight:500;line-height:1.35}
.b-tit small{display:block;color:var(--txt2);font-size:.8rem;font-weight:400}
.barras b{font-size:1.65rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.b-barra{grid-column:1/-1;height:10px;border-radius:99px;background:var(--degradado-h);
  transform-origin:left;transform:scaleX(var(--p));transition:transform 1.2s var(--curva) .15s}
.anim .barras li:not(.lleno) .b-barra{transform:scaleX(0)}
.vids{display:flex;flex-direction:column;gap:12px}
.vid{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;text-decoration:none;padding:8px;margin:-8px;
  border-radius:14px;transition:background-color .25s}
.vid:hover{background:var(--tenue)}
.vid img{border-radius:10px;aspect-ratio:16/9;object-fit:cover}
.vid-txt{font-size:.88rem;color:var(--txt2);line-height:1.35}
.vid-txt b{font-size:1.25rem;color:var(--crema);letter-spacing:-.02em;margin-right:4px}
.vid-txt span{display:block;margin-top:4px;color:var(--crema);font-weight:500}
#numeros .fuente{margin-top:20px}

/* Marcas */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.col{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--radio);background:var(--tarj);
  border:1px solid var(--tenue);transition:border-color .3s}
.col:hover{border-color:color-mix(in srgb,var(--turq) 45%,transparent)}
.col-cab{display:flex;justify-content:space-between;align-items:center;gap:10px}
.col-fecha{font-size:.8rem;color:var(--txt2)}
.tipo{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:99px;
  border:1px solid var(--tenue);color:var(--txt2)}
.tipo-mensual{background:var(--degradado-h);color:#03131f;border-color:transparent}
.tipo-afiliado{color:var(--acento-txt);border-color:color-mix(in srgb,var(--turq) 45%,transparent)}
:root[data-theme="claro"] .tipo-mensual{color:#fff}
.col-marca{font-size:1.75rem;letter-spacing:-.035em}
.col-que{font-size:.95rem;color:var(--txt2);line-height:1.5}
.col-dato{font-size:1.35rem;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.col-pieza{display:block;margin-top:4px;text-decoration:none;font-size:.85rem;color:var(--txt2)}
.col-pieza img{border-radius:12px;aspect-ratio:16/9;object-fit:cover;margin-bottom:10px;
  transition:transform .5s var(--curva)}
.col-pieza:hover img{transform:scale(1.025)}
.col-pieza:hover span{color:var(--crema)}
.col[data-oculta]{opacity:.55;border-style:dashed}

/* Formatos */
.formatos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--tenue)}
.for{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:30px 24px 30px 0;border-bottom:1px solid var(--tenue)}
.for:nth-child(even){padding-left:24px;border-left:1px solid var(--tenue)}
.for-n{font-size:2.6rem;font-weight:800;letter-spacing:-.05em;line-height:.9}
.for h3{font-size:1.3rem;letter-spacing:-.02em}
.for-donde{font-size:.8rem;font-weight:600;letter-spacing:.08em;color:var(--acento-txt);margin:6px 0 10px}
.for p:last-child{color:var(--txt2);font-size:.95rem}
.for-precio{margin-top:10px;font-weight:700;color:var(--crema)!important}
#formatos .sec-entra{margin-top:28px}

/* Contacto */
.contacto{padding-bottom:0}
.contacto-in{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:end;
  border-top:1px solid var(--tenue);padding-top:80px}
.contacto h2{font-size:clamp(3rem,7vw,5.6rem)}
.mail{display:inline-block;margin:30px 0 90px;font-size:clamp(1.25rem,3vw,2.2rem);font-weight:800;letter-spacing:-.03em;
  text-decoration:none;word-break:break-all;position:relative;padding-bottom:6px}
.mail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:var(--degradado-h);
  transform-origin:left;transform:scaleX(.25);transition:transform .6s var(--curva)}
.mail:hover::after{transform:scaleX(1)}
.contacto-foto{width:100%;max-width:440px;justify-self:end;
  -webkit-mask:linear-gradient(#000 75%,transparent);mask:linear-gradient(#000 75%,transparent)}

.pie{border-top:1px solid var(--tenue);padding:26px 0;font-size:.84rem;color:var(--txt2)}
.pie-in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.logo-peq{font-size:1.2rem}

/* Borrador: lo que falta por confirmar */
.pend{display:inline-block;padding:3px 9px;border-radius:6px;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ambar);border:1px dashed var(--ambar);-webkit-text-fill-color:var(--ambar)}
.aviso-borrador{position:fixed;left:12px;bottom:12px;z-index:50;max-width:340px;padding:10px 14px;border-radius:10px;
  font-size:.78rem;font-weight:600;background:var(--ambar);color:#1a1000}

/* ---- Móvil ---- */
@media (max-width:980px){
  .cols{grid-template-columns:1fr 1fr}
  .dos{grid-template-columns:1fr}
  .menu{display:none}
  .head-acc{margin-left:auto}
}
@media (max-width:760px){
  body{font-size:16px}
  .hero{padding-top:28px}
  .hero-in{grid-template-columns:1fr;min-height:0;gap:8px}
  .hero-demo{grid-row:1;width:min(78%,330px)}
  .sello{left:auto;right:-6%;bottom:8%}
  .foto-logo{width:70px;height:70px;top:-20px;right:-16px}
  .datos-bar{grid-template-columns:1fr 1fr;gap:26px 0;padding:24px 0}
  .cifra:nth-child(3){border-left:0;padding-left:0}
  .sec{padding:72px 0}
  .cols{grid-template-columns:1fr}
  .formatos{grid-template-columns:1fr}
  .for,.for:nth-child(even){padding:26px 0;border-left:0}
  .vid{grid-template-columns:120px 1fr}
  .contacto-in{grid-template-columns:1fr;padding-top:60px}
  .mail{margin-bottom:20px}
  .contacto-foto{justify-self:center;max-width:300px}
  .btn-peq{display:none}
}

/* ---- Aparición al bajar (animar_ui.js). Igual que en montatuserver.com ---- */
.anim:not(.anim-listo) main h1,
.anim:not(.anim-listo) .hero-txt>*,
.anim:not(.anim-listo) .hero-demo{opacity:0;animation:rv-socorro 0s 1.6s forwards}
@keyframes rv-socorro{to{opacity:1}}
.anim .rv{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--curva),transform .7s var(--curva),filter .7s var(--curva),clip-path .7s var(--curva);
  transition-delay:var(--rv-d,0s)}
.anim:not(.anim-listo) .rv{transition:none}
.anim .rv.rv-izq{transform:translateX(-36px)}
.anim .rv.rv-der{transform:translateX(36px)}
.anim .rv.rv-foco{transform:translateY(14px);filter:blur(10px)}
.anim .rv.rv-barrido{transform:none;clip-path:inset(0 calc(100% - 1px) 0 0)}
.anim .rv.visto{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}
.pal{display:inline-block}
.anim .pal{opacity:0;filter:blur(10px);transform:translateY(.35em) scale(1.04);
  animation:pal-entra .6s var(--curva) var(--pd,0s) forwards}
@keyframes pal-entra{to{opacity:1;filter:none;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.pal{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;animation:none!important}
  .topo g{animation:none}
}

/* ---- Logos de marcas (oficiales; uno por tema cuando hace falta) ---- */
.tema-claro{display:none!important}
:root[data-theme="claro"] .tema-claro{display:block!important}
:root[data-theme="claro"] .tema-oscuro{display:none!important}
.col-marca{min-height:44px;display:flex;align-items:center}
.col-logo{display:flex;align-items:center;gap:12px}
.col-logo img{height:34px;width:auto;max-width:210px;object-fit:contain}
.col-logo-txt,.tira-logo-txt{font-size:1.5rem;font-weight:800;letter-spacing:-.035em}
.tira{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:26px 40px}
.tira-logo{display:flex;align-items:center;gap:10px;opacity:.72;transition:opacity .3s}
.tira-logo:hover{opacity:1}
.tira-logo img{height:28px;width:auto;max-width:170px;object-fit:contain}
.tira-logo-txt{font-size:1.15rem}
@media (max-width:760px){
  .tira{justify-content:center;gap:22px 30px}
  .tira-logo img{height:24px}
}
/* logos con proporciones raras: el de RioRise es alto y el de DatHost lleva aire */
.col-logo img[src*="riorise"]{height:52px}
.tira-logo img[src*="riorise"]{height:42px}
.col-logo img[src*="dathost"]{height:40px}
.tira-logo img[src*="dathost"]{height:34px}

/* ---- ChorizoSMP ---- */
.chorizo .wrap{position:relative;padding:48px;border-radius:28px;border:1px solid var(--tenue);
  background:radial-gradient(ellipse 60% 80% at 100% 0%,rgba(34,211,240,.10),transparent 70%),var(--tarj)}
.cho-cab{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:start;margin-bottom:40px!important}
.cho-logo{width:150px;height:150px;border-radius:28px;box-shadow:var(--sombra)}
.cho-vivo{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:8px 14px;border-radius:99px;
  border:1px solid var(--tenue);font-size:.88rem;font-weight:600;color:var(--txt2)}
.cho-vivo .punto{width:9px;height:9px;border-radius:50%;background:var(--txt2)}
.cho-vivo.abierto{color:var(--crema)}
.cho-vivo.abierto .punto{background:var(--turq);box-shadow:0 0 0 0 rgba(34,211,240,.6);animation:late 1.8s infinite}
@keyframes late{to{box-shadow:0 0 0 10px rgba(34,211,240,0)}}
.cho-cuerpo{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px}
.cho-datos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.cho-datos b{display:block;font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:800;letter-spacing:-.045em;line-height:1;
  background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent}
.cho-datos span{display:block;margin-top:6px;font-size:.92rem;color:var(--txt2)}
.cho-datos small{opacity:.75}
.rasgos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rasgo{padding:20px;border-radius:16px;border:1px solid var(--tenue);background:color-mix(in srgb,var(--fondo) 50%,transparent)}
.rasgo h3{font-size:1.08rem;letter-spacing:-.02em}
.rasgo p{margin-top:6px;font-size:.9rem;color:var(--txt2);line-height:1.45}
.cho-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:36px;
  padding-top:28px;border-top:1px solid var(--tenue)}
.cho-ip{display:grid;grid-template-columns:auto auto;gap:4px 12px;align-items:center}
.cho-ip-etq,.cho-ip-nota{grid-column:1/-1;font-size:.8rem;color:var(--txt2)}
.cho-ip code{font:700 1.25rem/1.2 Inter,monospace;letter-spacing:-.01em}
.cho-copiar{padding:7px 14px;border-radius:99px;border:1px solid var(--tenue);background:transparent;color:var(--crema);
  font:600 .82rem Inter,sans-serif;cursor:pointer;transition:border-color .2s}
.cho-copiar:hover{border-color:var(--turq)}
@media (max-width:980px){.cho-cuerpo{grid-template-columns:1fr}}
@media (max-width:760px){
  .chorizo .wrap{padding:28px 20px;border-radius:22px}
  .cho-cab{grid-template-columns:1fr}
  .cho-logo{grid-row:1;width:96px;height:96px;border-radius:20px}
  .rasgos{grid-template-columns:1fr}
  .cho-ip code{font-size:1.05rem}
}

/* Logo: la D con play (marca/logo.py) junto al nombre */
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.marca-d{width:34px;height:34px}
.marca-d-peq{width:26px;height:26px}
/* lo que entra desde un lado (rv-der) no debe sacar barra horizontal mientras espera */
main{overflow-x:clip}


/* =====================================================================
   INICIO (la web para su gente, 7-nov-2026)
   ===================================================================== */

/* ---- Pantalla de carga: el contorno de la D se dibuja con luz, se rellena y se va.
   Todo por CSS: aunque no corra ningún script, a los 1,85 s ya no está. ---- */
.intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--fondo);
  animation:intro-fuera .5s var(--curva) 1.35s forwards}
.sin-intro .intro{display:none}
.intro-halo{position:absolute;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,240,.32),transparent 65%);filter:blur(30px);
  animation:intro-halo 1.6s ease-out both}
.intro-d{position:relative;width:150px;height:auto;overflow:visible}
.intro-trazo{fill:none;stroke:#7ff6ff;stroke-width:12;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 10px #22d3f0) drop-shadow(0 0 22px rgba(34,211,240,.6));
  animation:intro-trazo .8s cubic-bezier(.65,0,.35,1) .1s forwards,intro-sale .35s ease 1s forwards}
.intro-trazo-2{animation-delay:.38s,1s}
.intro-relleno{opacity:0;animation:intro-relleno .45s ease .78s forwards}
@keyframes intro-trazo{to{stroke-dashoffset:0}}
@keyframes intro-sale{to{opacity:0}}
@keyframes intro-relleno{to{opacity:1}}
@keyframes intro-halo{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes intro-fuera{to{opacity:0;visibility:hidden;transform:scale(1.05)}}

/* ---- Portada del inicio: centrada, con el logo brillando ---- */
.hero-hub{padding:72px 0 40px}
.hub-in{display:flex;justify-content:center;text-align:center;min-height:min(680px,82vh);align-items:center}
.hero-hub .hero-txt{align-items:center;max-width:860px}
.hub-logo{width:128px;height:128px;filter:drop-shadow(0 0 28px rgba(34,211,240,.55));animation:latido 4s ease-in-out infinite}
@keyframes latido{50%{filter:drop-shadow(0 0 44px rgba(34,211,240,.85))}}
.hero-hub .entra{margin-inline:auto}
.hero-hub .hero-bot{justify-content:center}
.btn .ico{width:20px;height:20px;flex:none}
.vivo{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--txt2);text-decoration:none}
.vivo .punto{width:8px;height:8px;border-radius:50%;background:var(--txt2)}
.vivo.en-vivo{color:#ff4d5e;padding:8px 14px;border-radius:99px;border:1px solid rgba(255,77,94,.4);background:rgba(255,77,94,.08)}
.vivo.en-vivo .punto{background:#ff4d5e;animation:late-rojo 1.4s infinite}
@keyframes late-rojo{0%{box-shadow:0 0 0 0 rgba(255,77,94,.7)}100%{box-shadow:0 0 0 10px rgba(255,77,94,0)}}
.redes-fila{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.red-ico,.red-discord{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:var(--crema);
  background:var(--tarj);border:1px solid var(--tenue);transition:transform .35s var(--curva),border-color .2s,color .2s}
.red-ico .ico,.red-discord .ico{width:22px;height:22px}
.red-ico:hover{transform:translateY(-3px);border-color:var(--turq);color:var(--turq2)}
.red-discord{display:inline-flex;gap:10px;width:auto;padding:0 22px;border-radius:99px;font-weight:700;text-decoration:none;
  border-color:rgba(88,101,242,.55);box-shadow:0 0 24px -6px rgba(88,101,242,.6)}
.red-discord:hover{transform:translateY(-3px);border-color:#5865f2}

/* ---- Cuenta atrás de GTA 6 ---- */
.cuenta{padding:10px 0 30px}
.cuenta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:26px 32px;
  border-radius:var(--radio);border:1px solid var(--tenue);
  background:linear-gradient(100deg,rgba(255,92,170,.10),rgba(34,211,240,.08) 60%,transparent),var(--tarj)}
.cuenta-fecha{margin-top:6px;font-weight:700;font-size:1.15rem;letter-spacing:-.02em}
.cuenta-cajas{list-style:none;margin:0;padding:0;display:flex;gap:12px}
.cuenta-cajas li{min-width:84px;padding:12px 10px;text-align:center;border-radius:14px;background:color-mix(in srgb,var(--fondo) 70%,transparent);border:1px solid var(--tenue)}
.cuenta-cajas b{display:block;font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.cuenta-cajas span{display:block;margin-top:6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt2)}

/* ---- Cabecera de sección con enlace a la derecha ---- */
.sec-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 30px;margin-bottom:36px!important}
.sec-mas{font-weight:700;font-size:.95rem;color:var(--acento-txt);text-decoration:none;white-space:nowrap}
.sec-mas:hover{text-decoration:underline}

/* ---- Vídeos: el último en grande y el resto en rejilla ---- */
.vids-hub{display:grid;grid-template-columns:1.25fr 1fr;gap:22px}
.vids-resto{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vcard{display:flex;flex-direction:column;gap:10px;text-decoration:none}
.vcard-img{position:relative;display:block;border-radius:14px;overflow:hidden;border:1px solid var(--tenue)}
.vcard-img img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s var(--curva)}
.vcard:hover .vcard-img img{transform:scale(1.04)}
.vcard-play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;background:rgba(5,11,22,.35);transition:opacity .3s}
.vcard-play .ico{width:58px;height:58px;color:#fff;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.vcard:hover .vcard-play{opacity:1}
.insignia{position:absolute;top:12px;left:12px;padding:5px 11px;border-radius:99px;font-size:.72rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#03131f;background:var(--degradado-h)}
.vcard-txt b{font-size:.98rem;font-weight:700;letter-spacing:-.01em;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcard-txt time{display:block;margin-top:4px;font-size:.82rem;color:var(--txt2)}
.vcard-grande .vcard-txt b{font-size:1.45rem;letter-spacing:-.03em;-webkit-line-clamp:3}

/* ---- Shorts en fila deslizable ---- */
.shorts-fila{list-style:none;margin:0;padding:0 0 12px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.shorts-fila li{scroll-snap-align:start}
.scard{position:relative;display:block;border-radius:16px;overflow:hidden;text-decoration:none;border:1px solid var(--tenue)}
.scard img{width:100%;aspect-ratio:9/16;object-fit:cover;transition:transform .6s var(--curva)}
.scard:hover img{transform:scale(1.04)}
.scard span{position:absolute;left:0;right:0;bottom:0;padding:40px 12px 12px;font-size:.82rem;font-weight:700;line-height:1.3;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.85));display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---- Sobre Double ---- */
.sobre-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.sobre-foto{max-width:420px;width:100%;justify-self:center}
.sobre-txt{margin-top:18px;display:flex;flex-direction:column;gap:14px;color:var(--txt2);font-size:1.06rem;max-width:36em}
.sobre-cifras{grid-template-columns:repeat(2,1fr);margin-top:30px}

/* ---- Comunidad ---- */
.com-in{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.discord-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:34px;
  border-radius:var(--radio);border:1px solid rgba(88,101,242,.45);
  background:radial-gradient(ellipse 70% 80% at 100% 0%,rgba(88,101,242,.25),transparent 70%),var(--tarj)}
.discord-ico{width:46px;height:46px;color:#8c95ff}
.discord-card h3{font-size:1.5rem}
.discord-card p{color:var(--txt2)}
.discord-num b{font-size:1.9rem;font-weight:800;letter-spacing:-.04em;color:var(--crema)}
.discord-card .btn{margin-top:auto;background:#5865f2;color:#fff;box-shadow:0 10px 30px -12px rgba(88,101,242,.8)}
.redes-h3{font-size:1.05rem;margin:4px 0 14px;color:var(--txt2);font-weight:600}
.redes-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.red-linea{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:14px;text-decoration:none;
  background:var(--tarj);border:1px solid var(--tenue);transition:border-color .25s,transform .35s var(--curva)}
.red-linea:hover{border-color:color-mix(in srgb,var(--turq) 60%,transparent);transform:translateX(4px)}
.red-linea .ico{width:24px;height:24px;flex:none}
.red-linea span:not(.flecha){flex:1;display:flex;flex-direction:column}
.red-linea b{font-size:.98rem}
.red-linea small{color:var(--txt2);font-size:.85rem}
.red-linea em{font-style:normal;font-weight:800;letter-spacing:-.02em;color:var(--acento-txt)}
.red-linea .flecha{position:static;color:var(--txt2)}

/* ---- Patrocinador ---- */
.pat{display:grid;grid-template-columns:1.3fr .9fr;gap:40px;align-items:center;padding:44px;border-radius:28px;
  border:1px solid var(--tenue);background:radial-gradient(ellipse 60% 90% at 0% 100%,rgba(255,92,40,.12),transparent 70%),var(--tarj)}
.pat-logo{display:block;margin:14px 0 6px}
.pat-logo img{height:44px;width:auto}
.pat-codigo{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px;border-radius:20px;text-align:center;
  border:1px dashed color-mix(in srgb,var(--turq) 55%,transparent);background:color-mix(in srgb,var(--fondo) 60%,transparent)}
.pat-codigo-etq{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt2)}
.pat-codigo code{font:800 2.2rem/1 Inter,monospace;letter-spacing:.06em}
.pat-codigo small{font-size:.75rem;color:var(--txt2)}

/* ---- ¿Eres una marca? ---- */
.banda .banda-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  padding-top:56px;border-top:1px solid var(--tenue)}
.banda-bot{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.mail-peq{margin:0;font-size:1.05rem}
.mail-peq::after{height:2px}

/* ---- Pie y páginas legales ---- */
.pie-legal a{color:var(--txt2)}
.legal-in{max-width:760px}
.legal-in h1{font-size:clamp(2.2rem,5vw,3.2rem);letter-spacing:-.04em;margin-bottom:8px}
.legal-in h2{font-size:1.3rem;margin:32px 0 10px}
.legal-in p{color:var(--txt2);margin-top:10px}
.legal-in b{color:var(--crema)}

@media (max-width:980px){
  .vids-hub,.com-in,.pat,.sobre-in{grid-template-columns:1fr}
  .sobre-in{gap:40px}
  .banda-bot{align-items:flex-start}
}
@media (max-width:760px){
  .hero-hub{padding-top:40px}
  .hub-in{min-height:0}
  .hub-logo{width:96px;height:96px}
  .cuenta-in{padding:22px 18px}
  .cuenta-cajas{width:100%;gap:8px}
  .cuenta-cajas li{flex:1;min-width:0}
  .cuenta-cajas b{font-size:1.6rem}
  .vids-resto{grid-template-columns:1fr 1fr;gap:14px}
  .vcard-grande .vcard-txt b{font-size:1.2rem}
  .shorts-fila{grid-auto-columns:46%}
  .pat{padding:26px 20px}
  .discord-card{padding:26px 22px}
  .red-ico{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){.hub-logo{animation:none}.intro{display:none}}

/* ---- Mis webs ---- */
.webs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.web{display:flex;flex-direction:column;border-radius:var(--radio);overflow:hidden;text-decoration:none;
  background:var(--tarj);border:1px solid var(--tenue);transition:border-color .3s,transform .45s var(--curva)}
.web:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--turq) 60%,transparent)}
.web-img{display:block;overflow:hidden;border-bottom:1px solid var(--tenue)}
.web-img img{width:100%;aspect-ratio:1200/630;object-fit:cover;transition:transform .6s var(--curva)}
.web:hover .web-img img{transform:scale(1.04)}
.web-txt{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1}
.web-tipo{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acento-txt)}
.web-txt b{font-size:1.2rem;letter-spacing:-.02em}
.web-txt>span:not(.web-tipo):not(.web-ir){font-size:.9rem;color:var(--txt2);line-height:1.45}
.web-ir{margin-top:auto;padding-top:10px;font-size:.85rem;font-weight:700;color:var(--crema)}
.pie-webs{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.84rem}
.pie-webs a{color:var(--txt2);text-decoration:none}
.pie-webs a:hover{color:var(--crema)}
@media (max-width:1100px){.webs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.webs{grid-template-columns:1fr}}

/* Saltar al contenido (teclado) y transición suave entre páginas, sin JS */
.saltar{position:fixed;top:-60px;left:16px;z-index:200;padding:10px 16px;border-radius:10px;font-weight:700;
  background:var(--turq);color:#03131f;text-decoration:none;transition:top .2s}
.saltar:focus{top:12px}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---- Revisión de accesibilidad (7-nov) ---- */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root[data-theme="claro"] :focus-visible{outline-color:var(--azul2)}
:root[data-theme="claro"] .red-ico:hover{color:var(--acento-txt);border-color:var(--acento-txt)}
:root[data-theme="claro"] .vivo.en-vivo{color:#c8102e}
:root[data-theme="claro"] .vivo.en-vivo .punto{background:#c8102e}
:root[data-theme="claro"] .fuente,:root[data-theme="claro"] .cho-datos small{opacity:1}
:root[data-theme="claro"] .insignia{color:#fff}
@media (prefers-reduced-motion:reduce){.cho-vivo .punto,.vivo .punto{animation:none!important}}