/* v203 — hero centrado (teléfono + botones), sin fortalezas */
/* ══════════════════════════════════════════════════════════════════════
   PORTADA · hoja de estilos
   ══════════════════════════════════════════════════════════════════════

   TODOS los selectores empiezan por #pt. Es obligatorio: desde que las
   ventanas de la app (swap, market, liquidity...) se abren en esta misma
   página, cualquier regla suelta de aquí las tocaría.

   Ese fue justo el fallo anterior: un reajuste de elemento con #pt delante
   ganaba por especificidad a la clase del botón y dejaba el texto blanco
   sobre el dorado. Prefijando todo por igual, eso no puede repetirse.

   Paleta y tipografías: las mismas de la app.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   Paleta y tipografías: las mismas de la app. Nada inventado.
   #0b0e11 fondo · #E8B84B oro · #2ebd85 alza · #f6465d baja · #eaecef texto
   ══════════════════════════════════════════════════════════════════════ */

/* Global a propósito: las ventanas de la app lo dan por hecho. */
*, *::before, *::after{box-sizing:border-box}
html, body{margin:0;padding:0;background:#000}

/* Lo mínimo que los módulos de la app necesitan del CSS antiguo.
   No se carga styles.css entera: trae el fondo verde de la lotería. */
:root{
  --gold:#E8B84B; --gold-soft:#C9A84B;
  --display:"Chakra Petch",system-ui,sans-serif;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
#pt{
  background:#000;
  --bg:#000000; --bg2:#050709; --lift:#0e1319; --surf:#12161c;
  --line:#1c232b; --line2:#29313b;
  --gold:#E8B84B; --gold-hi:#f4d089; --gold-md:#cf9f2e; --gold-lo:#8f6a1a; --on-gold:#241900;
  --ink:#eaecef; --ink2:#a7b0bb; --ink3:#79838f; --ink4:#565f6b;
  --up:#2ebd85; --down:#f6465d;
  --disp:"Chakra Petch",system-ui,sans-serif;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --max:1200px;
  --gut:clamp(18px,3.4vw,44px);

  font-family:var(--sans);
  font-size:15px;
  line-height:1.62;
  color:var(--ink);
}
body{overflow-x:hidden}

/* Reglas de elemento SIEMPRE dentro de #pt: si fueran globales tocarían
   también las ventanas de la app, que ahora se abren en esta página. */
#pt a{color:inherit;text-decoration:none}
#pt button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#pt img, #pt svg{display:block;max-width:100%}
#pt :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:5px}
#pt .pt-wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
#pt .pt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Botones ───────────────────────────────────────────────────────
   Texto OSCURO sobre el dorado. Blanco sobre amarillo no se lee. */
#pt .pt-btn{
  display:inline-flex;width:auto;align-self:flex-start;align-items:center;justify-content:center;gap:8px;
  font-family:var(--disp);font-weight:700;font-size:13.5px;letter-spacing:.2px;
  white-space:nowrap;height:40px;padding:0 20px;border-radius:10px;
  border:1px solid #c79426;
  /* Bisel 3D dorado: brillo arriba, base oscura, relieve inferior. El mismo
     lenguaje que los botones de la app. */
  background:linear-gradient(180deg,#f7db8d,#E8B84B 46%,#c79426);
  color:#241900;
  box-shadow:0 4px 0 #8f6a1a,inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.28);
  transition:filter .16s,transform .09s,box-shadow .09s;
}
/* Hover: se ilumina SIN blanquearse (solo un brillo leve), no cambia el color. */
#pt .pt-btn:hover{filter:brightness(1.06)}
#pt .pt-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8f6a1a,inset 0 1px 0 rgba(255,255,255,.5)}
#pt .pt-btn svg{width:15px;height:15px;flex:0 0 auto}
/* Contorno neutro: acciones secundarias. */
#pt .pt-btn.pt-ghost{background:none;border-color:var(--line2);color:var(--ink)}
#pt .pt-btn.pt-ghost:hover{background:rgba(232,184,75,.07);border-color:var(--gold-lo);color:var(--ink)}
/* Contorno dorado: la acción principal de una sección. */
#pt .pt-btn.pt-line{background:none;border-color:var(--gold);color:var(--gold)}
#pt .pt-btn.pt-line:hover{background:rgba(232,184,75,.14);border-color:var(--gold);color:var(--gold)}
/* Único cambio de tamaño en toda la página, y es leve. */
#pt .pt-btn.pt-big{height:46px;padding:0 24px;font-size:14px}
#pt .pt-lnk{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--gold)}
#pt .pt-lnk svg{width:14px;height:14px;transition:transform .2s}
#pt .pt-lnk:hover svg{transform:translateX(3px)}

/* ── Cabecera ──────────────────────────────────────────────────── */
#pt .pt-hdr{
  position:sticky;top:0;z-index:100;
  transition:transform .3s cubic-bezier(.22,.85,.3,1);
  display:flex;align-items:center;height:58px;
  background:#07090c;border-bottom:1px solid #1a2029;
}

/* Foto de fondo de la barra: assets/portada/img/header.webp
   Va en ::before para poder oscurecerla sin tocar el contenido. */
#pt .pt-hdr::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('img/header.webp');
  background-size:cover;background-position:center;
  opacity:1;
}


/* El contenido, por encima de la foto. */
#pt .pt-hdr__in{position:relative;z-index:2}

/* Sin velo, el texto del menú necesita un borde propio para leerse sobre
   cualquier zona clara de la foto. Una sombra de una sola pieza, corta,
   no oscurece nada alrededor. */
#pt .pt-nav__b,
#pt .pt-logo{flex:0 0 auto;display:flex;align-items:center;text-shadow:0 1px 4px rgba(0,0,0,.9)}

#pt .pt-hdr.pt-stuck{border-bottom-color:#232b36}
/* Solo se ve en lo alto de la página o cuando el cursor sube a buscarla.
   En cuanto se hace scroll, se retira. Se mueve con transform, que el
   navegador anima sin recalcular la página. */
#pt .pt-hdr.pt-oculta{transform:translateY(-100%)}
#pt .pt-hdr__in{display:flex;align-items:center;gap:0;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
/* El logo REAL del repo, el mismo que usa la app. */
#pt .pt-logo img{height:30px;width:auto}
#pt .pt-nav{display:flex;align-items:center;gap:2px;flex:0 1 auto;margin-left:14px}
#pt .pt-nav__i{position:relative}
#pt .pt-nav__b{display:flex;align-items:center;gap:5px;font-size:13.5px;font-weight:500;color:var(--ink2);padding:8px 11px;border-radius:8px;transition:color .15s,background .15s}
#pt .pt-nav__b:hover{color:var(--ink);background:rgba(255,255,255,.045)}
#pt .pt-nav__b svg{width:10px;height:10px;opacity:.55;transition:transform .2s}
#pt .pt-nav__i:hover .pt-nav__b svg{transform:rotate(180deg)}
#pt .pt-menu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:300;min-width:236px;padding:7px;
  background:var(--surf);border:1px solid var(--line2);border-radius:12px;
  box-shadow:0 20px 44px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .17s,transform .17s,visibility .17s;
}
#pt .pt-nav__i:hover .pt-menu, #pt .pt-nav__i:focus-within .pt-menu{opacity:1;visibility:visible;transform:none}
#pt .pt-menu a{display:block;padding:9px 11px;border-radius:8px;transition:background .14s}
#pt .pt-menu a:hover{background:rgba(232,184,75,.07)}
#pt .pt-menu b{display:block;font-size:13.5px;font-weight:600}
#pt .pt-menu span{display:block;font-size:12px;line-height:1.42;color:var(--ink3);margin-top:1px}
#pt .pt-hdr__a{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
/* Ficha de wallet: mientras no hay cuenta es un botón normal; en cuanto
   hay una, muestra el nombre de la wallet y la dirección abreviada. */
/* Hueco donde se coloca la ficha de wallet de la app tal cual.
   No se le da forma aquí: la estiliza gridbot/estilos.js, igual que
   dentro. Así el logo de MetaMask y las cuatro últimas cifras salen
   exactamente como siempre. */
#pt .pt-wbox{display:flex;align-items:center;gap:8px}
#pt .pt-wbox .c-hdr-r{display:flex;align-items:center;gap:6px;flex:0 0 auto}
/* Mismos valores que #colmena-app .dir en gridbot/estilos.js. Se repiten
   aquí porque esa hoja se inyecta por JavaScript y, según cuándo llegue,
   podía perder la partida: el resultado era el logo montado encima de las
   cuatro cifras. Con esto no depende del orden de carga. */
#pt .pt-wbox .dir{
  display:inline-flex !important;align-items:center;gap:7px;
  height:36px;box-sizing:border-box;white-space:nowrap;
  font-family:var(--mono);font-size:12px;font-weight:600;
  color:var(--ink2);background:rgba(255,255,255,.05);
  border:1px solid var(--line2);border-radius:9px;padding:0 12px;
  max-width:none;overflow:visible;cursor:pointer;
}
#pt .pt-wbox .dir:hover{border-color:var(--gold-lo);color:var(--gold)}
#pt .pt-wbox .dir-logo{width:16px;height:16px;flex:0 0 auto;border-radius:4px;object-fit:contain;display:block}
#pt .pt-wbox .dir-tx{font-family:var(--mono);font-size:12px;letter-spacing:.5px;font-weight:700;line-height:1}
#pt .pt-wbox .dir-ch{
  width:7px;height:7px;flex:0 0 auto;margin-left:1px;opacity:.65;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
#pt .pt-wbox .c-perfil{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:36px;height:36px;border:1px solid var(--line2);border-radius:9px;
  color:var(--ink2);background:none;cursor:pointer;
  transition:color .16s,border-color .16s,background .16s;
}
#pt .pt-wbox .c-perfil:hover{color:var(--gold);border-color:var(--gold-lo);background:rgba(232,184,75,.07)}
#pt .pt-wbox .dir{margin:0}
/* Aviso de red equivocada, en el mismo sitio. */
#pt .pt-wbad{
  display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;
  border:1px solid rgba(246,70,93,.5);border-radius:9px;background:rgba(246,70,93,.1);
  font-family:var(--disp);font-weight:700;font-size:13px;color:var(--down);cursor:pointer;
}
#pt .pt-burger{display:none;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid var(--line2);border-radius:9px;color:var(--ink2)}
#pt .pt-burger svg{width:17px;height:17px}

/* ── Fondos de sección ─────────────────────────────────────────────
   La imagen ocupa el bloque entero. El velo es SUAVE: lo justo para que
   el texto se lea, no tanto como para tapar la foto. */
#pt .pt-bg{position:relative;overflow:hidden;background:#000}
#pt .pt-bg > .pt-wrap{position:relative;z-index:2}
#pt .pt-art{
  position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;
  /* La foto se apaga sola por arriba y por abajo. Nada de velos grises:
     lo que queda al desvanecerse es el negro del fondo. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);
}
#pt .pt-art::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.16) 74%,transparent 100%);
}
#pt .pt-art.pt-soft::after{
  background:
    linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.18) 42%,rgba(0,0,0,.44) 100%);
}
#pt .pt-art.pt-right::after{
  background:
    linear-gradient(270deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.16) 74%,transparent 100%);
}

/* ── Hero ──────────────────────────────────────────────────────── */
#pt .pt-hero{position:relative;background:#000;min-height:480px;display:flex;align-items:center;padding:clamp(48px,5.5vw,84px) 0;overflow:hidden}
#pt .pt-hero__in{position:relative;z-index:2;max-width:min(560px,100%)}
#pt .pt-eye{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink4);margin:0 0 16px}
#pt h1{font-family:var(--disp);font-weight:700;font-size:clamp(30px,3.4vw,47px);line-height:1.08;letter-spacing:-.018em;margin:0 0 18px}
#pt h1 em, #pt h2 em{font-style:normal;color:var(--gold)}
#pt .pt-lede{font-size:15.5px;line-height:1.66;color:var(--ink2);margin:0 0 26px;max-width:44ch}
#pt .pt-acts{display:flex;flex-wrap:nowrap;gap:9px;margin-top:-14px;margin-left:1px}
#pt .pt-acts .pt-btn.pt-big{padding:0 16px}
@media(max-width:560px){#pt .pt-acts{flex-wrap:wrap}#pt .pt-acts .pt-btn.pt-big{padding:0 20px}}

/* ── Tira de confianza ─────────────────────────────────────────── */
#pt .pt-trust{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#pt .pt-trust__g{display:grid;grid-template-columns:repeat(4,1fr)}
#pt .pt-trust__i{display:flex;align-items:flex-start;gap:11px;padding:20px 24px 20px 0}
#pt .pt-trust__i + .pt-trust__i{padding-left:24px;border-left:1px solid var(--line)}
#pt .pt-trust__i svg{width:19px;height:19px;color:var(--gold);flex:0 0 auto;margin-top:2px}
#pt .pt-trust__i b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
#pt .pt-trust__i span{display:block;font-size:12px;line-height:1.4;color:var(--ink3);margin-top:2px}

/* ── Secciones ─────────────────────────────────────────────────── */
#pt .pt-sec{padding:clamp(44px,4.6vw,72px) 0}
#pt .pt-sec.pt-alt{background:#000}
#pt h2{font-family:var(--disp);font-weight:700;font-size:clamp(23px,2.4vw,32px);line-height:1.18;letter-spacing:-.012em;margin:0 0 14px}
#pt .pt-body{font-size:15px;line-height:1.68;color:var(--ink2);margin:0 0 22px;max-width:44ch}
#pt .pt-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3.2vw,48px);align-items:center}

/* Marco para las capturas de la interfaz. Sin adornos: la imagen manda. */
#pt .pt-shot{
  position:relative;padding:1.5px;border-radius:9px;
  background:linear-gradient(155deg,
    rgba(232,184,75,.62) 0%, rgba(232,184,75,.14) 26%,
    rgba(0,0,0,.55) 58%, rgba(232,184,75,.34) 100%);
  box-shadow:
    0 16px 34px rgba(0,0,0,.6),
    0 2px 0 rgba(255,255,255,.05) inset,
    0 -14px 30px rgba(232,184,75,.05) inset;
}
#pt .pt-shot{transition:transform .3s cubic-bezier(.22,.85,.3,1),box-shadow .3s}
#pt .pt-shot:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 22px 46px rgba(0,0,0,.7)}
#pt .pt-shot__in{position:relative;border-radius:7.5px;overflow:hidden;background:#0a0e13;border:1px solid rgba(0,0,0,.6)}
#pt .pt-shot img{transition:transform .5s cubic-bezier(.22,.85,.3,1)}
#pt .pt-shot:hover img{transform:scale(1.045)}
#pt .pt-shot img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
/* Reflejo diagonal muy tenue: da volumen sin ensuciar la captura. */
#pt .pt-shot__in::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(148deg,rgba(255,255,255,.07),transparent 34%,transparent 76%,rgba(0,0,0,.24));
}

/* Dos capturas juntas: Liquidity Pools y Heat Pools. */
#pt .pt-shots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#pt .pt-shots figure{margin:0}
#pt .pt-shots figure{margin:0}
#pt .pt-shots figcaption{
  font-family:var(--disp);font-weight:700;font-size:11.5px;letter-spacing:.05em;
  color:var(--gold);margin-top:7px;text-align:center;
  text-shadow:0 1px 10px rgba(232,184,75,.35),0 2px 3px rgba(0,0,0,.85);
}

/* Las tres herramientas Pro, con su texto real del sistema. */
#pt .pt-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:clamp(18px,2.2vw,28px);background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
#pt .pt-tool{background:rgba(0,0,0,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:12px 14px 13px}
#pt .pt-tool h3{font-family:var(--disp);font-weight:700;font-size:13.5px;margin:0 0 2px;color:var(--gold)}
#pt .pt-tool em{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--ink4);margin-bottom:6px}
#pt .pt-tool p{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink3)}

/* ── Pilares ───────────────────────────────────────────────────── */
#pt .pt-pil{display:grid;grid-template-columns:repeat(4,1fr)}
#pt .pt-pil__i{padding:0 24px 0 0}
#pt .pt-pil__i + .pt-pil__i{padding-left:24px;border-left:1px solid var(--line)}
#pt .pt-pil__i > svg{width:23px;height:23px;color:var(--gold);margin-bottom:13px}
#pt .pt-pil__i h3{font-family:var(--disp);font-weight:700;font-size:15.5px;margin:0 0 6px}
#pt .pt-pil__i p{margin:0;font-size:13px;line-height:1.57;color:var(--ink3)}

/* ── Activos ───────────────────────────────────────────────────── */
#pt .pt-coins{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:clamp(28px,3.4vw,44px);background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
#pt .pt-coin{
  position:relative;isolation:isolate;
  display:flex;align-items:center;gap:10px;padding:15px 15px;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  --mx:50%; --my:50%;
}
/* Luz sobre la superficie. */
#pt .pt-coin::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(190px circle at var(--mx) var(--my),rgba(232,184,75,.14),transparent 62%);
  opacity:0;transition:opacity .35s ease;
}
/* Filo encendido: el degradado se recorta a 1px de borde. */
#pt .pt-coin::after{
  content:"";position:absolute;inset:0;pointer-events:none;padding:1px;
  background:radial-gradient(170px circle at var(--mx) var(--my),rgba(232,184,75,.85),transparent 58%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .35s ease;
}
#pt .pt-coins.lit .pt-coin::before, #pt .pt-coins.lit .pt-coin::after{opacity:1}
#pt .pt-coin svg{width:26px;height:26px;flex:0 0 auto}
#pt .pt-coin b{display:block;font-size:12.5px;font-weight:700}
#pt .pt-coin u{display:block;text-decoration:none;font-family:var(--mono);font-size:12.5px;color:var(--ink2);margin-top:1px}
#pt .pt-coin s{display:block;text-decoration:none;font-family:var(--mono);font-size:11px;color:var(--ink4);margin-top:1px}
#pt .up{color:var(--up)}
#pt .down{color:var(--down)}

/* Un solo lienzo para toda la página. Fijo a la ventana, por encima de
   las fotos y por debajo de la cabecera. No estorba al ratón. */
#pt-chispas{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:4;display:block;
}

/* ── Ecosistema ────────────────────────────────────────────────────
   Tus imágenes YA traen el teléfono dibujado. No se les añade ningún
   marco: se muestran tal cual, y las dos se van turnando. */
#pt .pt-duo{position:relative;width:100%;max-width:196px;margin:0 auto}
#pt .pt-duo img{width:100%;height:auto}
#pt .pt-duo img + img{position:absolute;inset:0;height:100%;object-fit:contain;opacity:0}
/* Flotación en el sitio: sube y baja tres píxeles y medio en seis
   segundos. Solo transform, que el navegador anima sin repintar nada. */
@media (prefers-reduced-motion:no-preference){#pt .pt-duo img{animation:flota 6.5s ease-in-out infinite;will-change:transform}
}
@keyframes flota{0%, 100%{transform:translateY(0)}
50%{transform:translateY(-7px)}
}
#pt .pt-rule{width:74px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin:16px 0}
#pt .pt-feats{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 20px}
#pt .pt-feat{display:flex;align-items:flex-start;gap:11px;padding:10px 14px 10px 0;transition:opacity .16s}
#pt .pt-feat:hover{opacity:.82}
#pt .pt-feat:hover .pt-feat__i{border-color:var(--gold);background:rgba(232,184,75,.1)}
#pt .pt-feat__i{transition:border-color .16s,background .16s}
#pt .pt-feat:nth-child(even){padding-left:16px;border-left:1px solid rgba(255,255,255,.07)}
#pt .pt-feat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.07)}
#pt .pt-feat__i{
  flex:0 0 auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(232,184,75,.4);border-radius:8px;
  background:rgba(232,184,75,.04);color:var(--gold);
}
#pt .pt-feat__i svg{width:16px;height:16px}
#pt .pt-feat b{display:block;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink)}
#pt .pt-feat span{display:block;font-size:11.5px;line-height:1.42;color:var(--ink3);margin-top:2px}

/* ── Comprobable ───────────────────────────────────────────────── */
#pt .pt-addr{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-top:22px}
#pt .pt-addr a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 15px;background:rgba(0,0,0,.84);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .15s}
#pt .pt-addr a:hover{background:var(--surf)}
#pt .pt-addr b{font-size:13px;font-weight:600}
#pt .pt-addr code{font-family:var(--mono);font-size:11.5px;color:var(--gold)}
#pt .pt-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(28px,3.4vw,42px);
  background:var(--line);
  border:1px solid var(--line);      /* antes solo arriba y abajo: por eso
                                        se veía cortado a los lados */
  border-radius:12px;overflow:hidden;
}
#pt .pt-stat{background:rgba(0,0,0,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:20px 18px}
#pt .pt-stat b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.2vw,29px);line-height:1.1;color:var(--gold)}
#pt .pt-stat span{display:block;font-size:12px;color:var(--ink3);margin-top:4px}

/* ── Cierre ────────────────────────────────────────────────────── */
#pt .pt-end{position:relative;overflow:hidden;background:#000}
#pt .pt-end__in{position:relative;z-index:2;max-width:min(560px,100%);padding:clamp(58px,6.5vw,100px) 0}

/* ── Pie ───────────────────────────────────────────────────────── */
#pt .pt-foot{position:relative;overflow:hidden;background:#000;padding:clamp(28px,3vw,40px) 0 0}
#pt .pt-foot > .pt-wrap{position:relative;z-index:2}
#pt .pt-foot__g{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.8fr)) minmax(0,1.2fr);gap:clamp(18px,2.2vw,34px);padding-bottom:20px}
#pt .pt-foot__b .pt-logo{margin-bottom:12px}
#pt .pt-foot__b p{margin:0 0 16px;font-size:12.5px;line-height:1.58;color:var(--ink3);max-width:30ch}
#pt .pt-soc{display:flex;gap:7px}
#pt .pt-soc a{width:33px;height:33px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2);border-radius:8px;color:var(--ink3);transition:color .15s,border-color .15s,background .15s}
#pt .pt-soc a:hover{color:var(--gold);border-color:var(--gold-lo);background:rgba(232,184,75,.06)}
#pt .pt-soc svg{width:15px;height:15px}
#pt .pt-foot h4{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);margin:0 0 13px}
#pt .pt-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#pt .pt-foot li a{font-size:12.5px;color:var(--ink2);transition:color .15s}
#pt .pt-foot li a:hover{color:var(--gold)}
#pt .pt-foot__acts{display:flex;flex-wrap:wrap;gap:8px}
#pt .pt-foot__j p{margin:0 0 13px;font-size:12.5px;line-height:1.58;color:var(--ink3)}
#pt .pt-risk{padding:10px 0 0;font-size:11px;line-height:1.55;color:var(--ink4);max-width:96ch}
#pt .pt-foot__bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:11px 0 12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink4)}

/* ── Aparición al bajar ────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){#pt .pt-rise{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.22,.85,.3,1),transform .55s cubic-bezier(.22,.85,.3,1)}
#pt .pt-rise.in{opacity:1;transform:none}
}

/* ── Adaptación ────────────────────────────────────────────────── */
@media(max-width:1100px){
#pt .pt-nav__b{padding:8px 9px;font-size:13px}
}
@media(max-width:1000px){
  #pt .pt-nav{display:none}
  /* Menú desplegable al tocar el hamburguesa (tablet y móvil). */
  #pt .pt-nav.pt-nav--open{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:calc(100% + 8px);right:12px;left:12px;z-index:200;
    background:linear-gradient(180deg,#11161d,#0b0e13);border:1px solid var(--line2,#232b37);
    border-radius:14px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.6);
    max-height:70vh;overflow-y:auto;margin-left:0
  }
  #pt .pt-nav.pt-nav--open .pt-nav__i{width:100%}
  #pt .pt-nav.pt-nav--open .pt-nav__b{width:100%;justify-content:space-between;padding:12px 14px;font-size:15px}
  /* Submenús en el menú móvil: CERRADOS por defecto, se abren al tocar su botón (.abierto). */
  #pt .pt-nav.pt-nav--open .pt-menu{position:static;opacity:0;visibility:hidden;height:0;overflow:hidden;transform:none;background:rgba(255,255,255,.03);box-shadow:none;border:0;margin:0;padding:0;transition:none}
  #pt .pt-nav.pt-nav--open .pt-nav__i.abierto .pt-menu{opacity:1;visibility:visible;height:auto;margin-top:4px;padding:4px}
  #pt .pt-burger.on{background:rgba(232,184,75,.12);border-color:rgba(232,184,75,.4);color:#E8B84B}
#pt .pt-burger{display:flex}
#pt .pt-hdr__a{margin-left:auto}
}
@media(max-width:900px){#pt .pt-hero{min-height:0}
#pt .pt-split{grid-template-columns:1fr}
#pt .pt-trust__g, #pt .pt-pil{grid-template-columns:repeat(2,1fr)}
#pt .pt-trust__i:nth-child(odd), #pt .pt-pil__i:nth-child(odd){padding-left:0;border-left:0}
#pt .pt-trust__i:nth-child(n+3){border-top:1px solid var(--line)}
#pt .pt-pil{row-gap:28px}
#pt .pt-coins, #pt .pt-stats, #pt .pt-tools{grid-template-columns:repeat(2,1fr)}
#pt .pt-feats{grid-template-columns:1fr}
#pt .pt-feat:nth-child(even){padding-left:0;border-left:0}
#pt .pt-feat:nth-child(2){border-top:1px solid rgba(255,255,255,.07)}
#pt .pt-shots{grid-template-columns:1fr}
#pt .pt-foot__g{grid-template-columns:repeat(2,1fr)}
}


/* Aviso de error. Antes un fallo saltaba a app.html en silencio y desde
   fuera parecía que la página no hacía nada. Ahora se ve y se puede leer. */
#pt-aviso{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);
  z-index:9999;max-width:min(560px,92vw);
  padding:12px 16px;border-radius:10px;
  background:rgba(20,10,10,.96);border:1px solid rgba(246,70,93,.5);
  color:#ffd7dc;font:13px/1.5 "IBM Plex Mono",ui-monospace,monospace;
  box-shadow:0 14px 40px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;
}
#pt-aviso.on{opacity:1;visibility:visible;transform:translate(-50%,0)}


/* ══════════════════════════════════════════════════════════════════════
   BARRAS DE DESPLAZAMIENTO
   Iban en el <head> del index antiguo, no en ninguna hoja de estilos, así
   que al abrir las ventanas de la app en la portada salían blancas y sin
   estilo. Copiadas tal cual, y globales a propósito: tienen que valer
   también dentro de esas ventanas.
   ══════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:start,
::-webkit-scrollbar-button:end,
*::-webkit-scrollbar-button{
  display:none !important;width:0 !important;height:0 !important;
  background:none !important;background-image:none !important;
}
::-webkit-scrollbar{width:7px !important;height:7px !important}
::-webkit-scrollbar-track{background:#0e1319}
::-webkit-scrollbar-thumb{background:#2b3139;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#3a434f}
html{scrollbar-width:thin;scrollbar-color:#2b3139 #0e1319}


/* ══════════════════════════════════════════════════════════════════════
   BARRA DE SCROLL EN LAS VENTANAS DE LA APP
   ══════════════════════════════════════════════════════════════════════
   Los overlays de swap, análisis, tools, eventos y marketplace tienen su
   contenido con overflow-y:auto, y la barra del navegador rompía el borde
   redondeado del lado derecho. Se oculta la barra conservando el scroll.
   Acotado a los contenedores .*-c / .*-card / .*-box de esos overlays,
   para no tocar barras de scroll de otras partes. */
#colmena-app [id$="-overlay"] [class$="-c"],
#colmena-app [id$="-overlay"] [class$="-card"],
#colmena-app #swap-modal .sw-box,
#perfil-overlay .pf-card, #pp-overlay .pp-card,
#tl-overlay .tl-c, #pv-overlay .pv-c, #al-overlay .pv-c,
#w-overlay .w-c, #pro-overlay .pro-c, #lqp-overlay .lqp-c,
#mk-overlay [class$="-c"]{
  scrollbar-width:none;               /* Firefox */
  -ms-overflow-style:none;            /* Edge viejo */
}
#colmena-app [id$="-overlay"] [class$="-c"]::-webkit-scrollbar,
#colmena-app [id$="-overlay"] [class$="-card"]::-webkit-scrollbar,
#colmena-app #swap-modal .sw-box::-webkit-scrollbar,
#perfil-overlay .pf-card::-webkit-scrollbar,
#tl-overlay .tl-c::-webkit-scrollbar, #pv-overlay .pv-c::-webkit-scrollbar,
#al-overlay .pv-c::-webkit-scrollbar, #w-overlay .w-c::-webkit-scrollbar,
#pro-overlay .pro-c::-webkit-scrollbar, #lqp-overlay .lqp-c::-webkit-scrollbar,
#pp-overlay .pp-card::-webkit-scrollbar, #mk-overlay [class$="-c"]::-webkit-scrollbar{
  width:0 !important;height:0 !important;display:none !important;
}


/* Las capturas de herramientas ahora son enlaces: el <a> no debe alterar la
   rejilla ni el bisel. Se comporta como el <figure> que envuelve. */
#pt .pt-shot-link{display:block;text-decoration:none;color:inherit}
#pt .pt-shot-link figure{margin:0}


/* ── HERO: teléfono flotando + botones, centrado ──────────────────── */
#pt .pt-hero__solo{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;text-align:left;max-width:300px}
#pt .pt-hero-fono{
  width:100%;max-width:230px;margin:0 0 24px;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
}
#pt .pt-hero-fono img{width:100%;height:auto;display:block}
@media (prefers-reduced-motion:no-preference){
  #pt .pt-hero-fono{animation:flota 6.5s ease-in-out infinite;will-change:transform}
}
/* Párrafo informativo del pie (fortalezas). */
#pt .pt-risk--info{color:var(--ink2);border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:16px;margin-bottom:14px}


/* ── HERO: tarjetas orbitando el teléfono ──────────────────────────── */
/* El escenario da el espacio alrededor del teléfono para las tarjetas.
   El teléfono va centrado; las tarjetas, absolutas alrededor. */
#pt .pt-hero-escena{
  position:relative;
  width:100%;max-width:230px;      /* ancho del teléfono */
  margin:0 0 24px;
  /* Espacio extra alrededor para que las tarjetas no se corten. */
  padding:34px 62px;
  box-sizing:content-box;
}
#pt .pt-hero-escena .pt-hero-fono{
  position:relative;z-index:2;      /* teléfono en medio */
  width:100%;max-width:230px;margin:0;
}

/* Las tarjetas: ~92px (40% del teléfono). Absolutas alrededor. */
#pt .pt-card{
  position:absolute;width:92px;height:auto;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.5));
  pointer-events:none;
}
/* Smart Grid: arriba-izquierda, ESQUINA DETRÁS del teléfono (z-index 1). */
#pt .pt-card--grid{
  top:2px;left:-8px;z-index:1;
  transform:rotate(-8deg);
}
/* Acumulator: abajo-derecha, ESQUINA DETRÁS del teléfono (z-index 1). */
#pt .pt-card--acum{
  bottom:6px;right:-6px;z-index:1;
  transform:rotate(-8deg);
}
/* DCA: derecha-arriba, DESPEGADA del teléfono (z-index 3). */
#pt .pt-card--dca{
  top:44px;right:8px;z-index:3;
  transform:rotate(7deg);
}
/* Cash Out: izquierda-abajo, DESPEGADA del teléfono (z-index 3). */
#pt .pt-card--cashout{
  bottom:52px;left:8px;z-index:3;
  transform:rotate(6deg);
}

/* Cuatro flotaciones distintas: entorno en gravitación, cada una a su ritmo. */
@keyframes flotaA{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-11px)}}
@keyframes flotaB{0%,100%{transform:rotate(7deg) translateY(0)}50%{transform:rotate(7deg) translateY(-14px)}}
@keyframes flotaC{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-9px)}}
@keyframes flotaD{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-13px)}}
@media (prefers-reduced-motion:no-preference){
  #pt .pt-card--grid{animation:flotaA 5.5s ease-in-out infinite}
  #pt .pt-card--dca{animation:flotaB 7s ease-in-out infinite}
  #pt .pt-card--cashout{animation:flotaC 6.2s ease-in-out infinite}
  #pt .pt-card--acum{animation:flotaD 6.8s ease-in-out infinite}
}

/* En móvil las tarjetas se achican para no desbordar. */
@media(max-width:520px){
  #pt .pt-hero-escena{padding:26px 46px}
  #pt .pt-card{width:72px}
  #pt .pt-card--dca{right:-6px}
  #pt .pt-card--cashout{left:-6px}
}


/* Botón de sección aún no desarrollada (placeholder). */
#pt .pt-nav__b[data-soon]{position:relative;opacity:.72}
#pt .pt-nav__b[data-soon]:hover{opacity:1}

/* ── Botones del hero como imágenes (Swap, Staking, Bots) ── */
#pt .pt-acts-img{display:flex;flex-wrap:nowrap;gap:12px;margin-top:-8px;margin-left:1px;align-items:center}
#pt .pt-btn-img{display:block;flex:0 0 auto;line-height:0;border-radius:14px;transition:transform .12s cubic-bezier(.2,.9,.3,1.2),filter .12s;-webkit-tap-highlight-color:transparent}
#pt .pt-btn-img img{height:52px;width:auto;display:block;border-radius:14px;pointer-events:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
#pt .pt-btn-img:hover{transform:translateY(-2px);filter:brightness(1.08)}
#pt .pt-btn-img:active{transform:translateY(1px) scale(.96);filter:brightness(.95)}
@media(max-width:560px){
  #pt .pt-acts-img{flex-wrap:wrap;gap:9px}
  #pt .pt-btn-img img{height:44px}
}
@media(max-width:380px){
  #pt .pt-btn-img img{height:40px}
}

/* Botón-imagen en secciones (Bots en "Más que bots"): mismo estilo que el hero */
#pt .pt-btn-img-sec img{height:50px}
@media(max-width:560px){#pt .pt-btn-img-sec img{height:44px}}

/* ═══════════════════════════════════════════════════════════════
   AJUSTE SOLO PARA TABLET (769px–1024px): rellenar el hueco que deja
   el número impar de elementos cuando la rejilla se compacta a 2 columnas.
   NO afecta a escritorio (>1024px) ni a móvil (<769px), que quedan igual.
   ═══════════════════════════════════════════════════════════════ */
@media(min-width:769px) and (max-width:1024px){
  /* Assets: 5 criptomonedas en 2 columnas → la 5ª (última) ocupa las 2 columnas */
  #pt .pt-coins{grid-template-columns:repeat(2,1fr)}
  #pt .pt-coin:last-child{grid-column:1 / -1}
  /* Professional Trading: 3 tarjetas en 2 columnas → la 3ª ocupa las 2 columnas */
  #pt .pt-shots{grid-template-columns:repeat(2,1fr)}
  #pt .pt-shot-link:last-child{grid-column:1 / -1}
}