/* ══════════════════════════════════════════════════════════════════
   Portada de Vantax: radar, cinta de lo que frena, skills con demo (como en un juego) y la
   frase del panel que se edita sola. Lo común está en vantax.css y web.css.
   Todo se mueve con transform y opacity (lo hace la tarjeta gráfica, no el procesador).
   ══════════════════════════════════════════════════════════════════ */

.inicio { --rojo: #ff6b9a; --rojo-b: 255, 107, 154; --verde: #6ee7b7; --verde-b: 110, 231, 183; --amarillo: #f5c26b; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.punto-verde { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 10px rgba(var(--verde-b), .9); animation: latido 2s ease-in-out infinite; }

/* ── Aparecer al bajar ─────────────────────────────────────────── */
.js .revelar { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.js .revelar.visible { opacity: 1; transform: none; }

/* ── Arriba del todo ───────────────────────────────────────────── */
.hero-v { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 40px; align-items: center; padding: clamp(46px, 8vw, 104px) 0 70px; }
.titular { margin: 0; font-weight: 720; font-size: clamp(40px, 5.5vw, 78px); line-height: .98; letter-spacing: -.048em; }
@media (min-width: 981px) { .titular .linea { white-space: nowrap; } }
.titular .linea { display: block; animation: subir .9s cubic-bezier(.2, .8, .2, 1) both; }
.titular .linea:nth-child(2) { animation-delay: .12s; }
.titular .linea:nth-child(3) { animation-delay: .24s; }
@keyframes subir { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } }
.titular .valio { color: var(--suave); }
.titular .tachon { position: relative; display: inline-block; }
.titular .tachon::after { content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: .09em; border-radius: 4px; background: var(--rojo); box-shadow: 0 0 18px rgba(var(--rojo-b), .8); transform: scaleX(0) rotate(-2deg); transform-origin: left; animation: tachar .55s cubic-bezier(.7, 0, .2, 1) 1.15s forwards; }
@keyframes tachar { to { transform: scaleX(1) rotate(-2deg); } }
.titular .valio .tachon { animation: temblor .35s linear 1.1s 2; }
@keyframes temblor { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-1px); } }
.titular .brilla { background: linear-gradient(100deg, #fff 10%, var(--acento2) 45%, var(--acento) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px rgba(var(--brillo), .45)); }
.bajada { margin: 26px 0 0; max-width: 560px; color: var(--suave); font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.65; animation: subir .9s cubic-bezier(.2, .8, .2, 1) .4s both; }
.hero-v .acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; animation: subir .9s cubic-bezier(.2, .8, .2, 1) .5s both; }
.cifras-v { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px 46px; margin: 46px 0 0; padding-top: 26px; border-top: 1px solid var(--hilo); animation: subir .9s cubic-bezier(.2, .8, .2, 1) .6s both; }
.cifras-v div { display: flex; flex-direction: column-reverse; gap: 4px; }
.cifras-v dd { margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 680; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cifras-v dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }

/* ── Radar ─────────────────────────────────────────────────────── */
.radar { position: relative; width: min(470px, 100%); aspect-ratio: 1; margin: 0 auto 30px; animation: aparecer 1.2s ease .2s both; }
.radar-anillos i { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--brillo), .22); }
.radar-anillos i:nth-child(1) { inset: 0; border-color: rgba(var(--brillo), .4); box-shadow: 0 0 40px rgba(var(--brillo), .12), inset 0 0 60px rgba(var(--brillo), .1); }
.radar-anillos i:nth-child(2) { inset: 14%; }
.radar-anillos i:nth-child(3) { inset: 28%; border-style: dashed; }
.radar-anillos i:nth-child(4) { inset: -3.5%; border: 0; background: repeating-conic-gradient(rgba(var(--brillo), .55) 0 .6deg, transparent .6deg 6deg); -webkit-mask: radial-gradient(circle, transparent 66.5%, #000 67%, #000 69.5%, transparent 70%); mask: radial-gradient(circle, transparent 66.5%, #000 67%, #000 69.5%, transparent 70%); }
.radar-cruz::before, .radar-cruz::after { content: ""; position: absolute; background: linear-gradient(90deg, transparent, rgba(var(--brillo), .3), transparent); }
.radar-cruz::before { left: 0; right: 0; top: 50%; height: 1px; }
.radar-cruz::after { top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(var(--brillo), .3), transparent); }
.radar-recorte { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; } /* el barrido gira dentro: no ensancha la página */
.radar-barrido { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg 285deg, rgba(var(--brillo), .05) 300deg, rgba(var(--brillo), .3) 352deg, rgba(232, 208, 248, .75) 359.6deg, transparent 360deg); will-change: transform; }
.radar-centro { position: absolute; left: 50%; top: 50%; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; }
.radar-centro img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; position: relative; z-index: 1; box-shadow: 0 0 0 1px rgba(var(--brillo), .7), 0 0 50px rgba(var(--brillo), .6); background: var(--fondo2); }
.radar-centro::before, .radar-centro::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(var(--brillo), .7); animation: onda 3.2s ease-out infinite; }
.radar-centro::after { animation-delay: 1.6s; }
@keyframes onda { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.radar-pie { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--suave); }
/* Amenazas que aparecen y el barrido frena. */
.blip { position: absolute; width: 0; height: 0; z-index: 2; }
.blip i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 12px rgba(var(--rojo-b), .95); animation: blip-entra .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.blip i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(var(--rojo-b), .7); animation: onda 1.4s ease-out infinite; }
.blip em { position: absolute; left: 12px; top: -10px; padding: 2px 7px; border: 1px solid rgba(var(--rojo-b), .45); border-radius: 6px; background: rgba(20, 4, 14, .85); font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: #ffc2d6; white-space: nowrap; animation: aparecer .3s ease both; transition: color .3s, border-color .3s, background .3s; }
.blip.izq em { left: auto; right: 12px; }
.blip.fuera i { background: var(--acento2); box-shadow: 0 0 16px rgba(var(--brillo), 1), 0 0 0 4px rgba(var(--brillo), .25); animation: zap .5s ease both; }
.blip.fuera i::after { border-color: rgba(var(--brillo), .8); animation: onda .7s ease-out 1 both; }
.blip.fuera em { color: var(--acento2); border-color: rgba(var(--brillo), .55); background: rgba(16, 6, 28, .9); text-decoration: none; }
.blip.sale { opacity: 0; transition: opacity .6s; }
@keyframes blip-entra { from { transform: scale(0); } }
@keyframes zap { 0% { transform: scale(1); } 40% { transform: scale(1.9); } 100% { transform: scale(1); } }

/* ── Cinta de lo que frena ─────────────────────────────────────── */
.cinta { position: relative; z-index: 1; overflow: hidden; border-block: 1px solid var(--hilo); background: linear-gradient(90deg, rgba(var(--brillo), .05), rgba(var(--brillo), .1), rgba(var(--brillo), .05)); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cinta-pista { display: flex; width: max-content; animation: cinta 46s linear infinite; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta ul { display: flex; margin: 0; padding: 0; list-style: none; }
.cinta li { display: flex; align-items: center; gap: 22px; padding: 17px 22px 17px 0; font-size: 15px; font-weight: 560; color: var(--suave); white-space: nowrap; }
.cinta li::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--acento); box-shadow: 0 0 10px rgba(var(--brillo), .9); }
.cinta li:nth-child(3n + 1) { color: var(--tinta); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ── Bloques ───────────────────────────────────────────────────── */
.bloque-v { padding-top: clamp(80px, 10vw, 120px); scroll-margin-top: 70px; }
.cabeza-v { max-width: 720px; margin-bottom: 34px; }
.cabeza-v h2 { margin: 0; font-size: clamp(30px, 4vw, 50px); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; }
.cabeza-v p { margin: 14px 0 0; color: var(--suave); font-size: 17px; line-height: 1.6; }

/* ── Skills ────────────────────────────────────────────────────── */
.skills { display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr); gap: 26px; align-items: start; }
.skills-lista { display: flex; flex-direction: column; gap: 8px; }
.skill { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 11px 14px 11px 11px; border: 1px solid var(--hilo); border-radius: 14px; background: rgba(7, 2, 14, .72); text-align: left; transition: border-color .25s, background .25s, transform .25s, box-shadow .25s; }
.skill:hover { border-color: rgba(var(--brillo), .4); transform: translateX(3px); }
.skill.activa { border-color: rgba(var(--brillo), .75); background: linear-gradient(100deg, rgba(var(--brillo), .2), rgba(var(--brillo), .04) 70%), rgba(7, 2, 14, .85); box-shadow: 0 0 0 1px rgba(var(--brillo), .15), 0 12px 34px rgba(var(--brillo), .18); transform: none; }
.skill-icono { position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--contorno); color: var(--acento2); background: radial-gradient(circle, rgba(var(--brillo), .18), transparent 70%); transition: box-shadow .3s, color .3s; }
.skill-icono > svg:first-child { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.skill.activa .skill-icono { color: #fff; box-shadow: 0 0 22px rgba(var(--brillo), .55), inset 0 0 14px rgba(var(--brillo), .35); }
.skill.activa .skill-icono > svg:first-child { filter: drop-shadow(0 0 5px rgba(var(--brillo), .9)); }
/* La carga de la skill (como el enfriamiento en un juego): se llena durante la demo. */
.skill-carga { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); fill: none; pointer-events: none; }
.skill-carga circle { stroke: var(--acento2); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 138.3; stroke-dashoffset: 138.3; opacity: 0; filter: drop-shadow(0 0 3px rgba(var(--brillo), .9)); }
.skill.activa .skill-carga circle { opacity: 1; }
.skill.cargando .skill-carga circle { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur, 7s) linear; }
.skill-texto { min-width: 0; }
.skill-texto b { display: block; font-size: 15.5px; font-weight: 620; }
.skill-texto small { display: grid; grid-template-rows: 0fr; overflow: hidden; color: var(--suave); font-size: 13.5px; line-height: 1.5; opacity: 0; transition: grid-template-rows .35s ease, opacity .35s ease, margin .35s ease; }
.skill.activa .skill-texto small { grid-template-rows: 1fr; opacity: 1; margin-top: 4px; }
.skill-texto small > span { min-height: 0; overflow: hidden; }
.skill kbd { align-self: start; margin-top: 4px; min-width: 26px; padding: 3px 7px; border: 1px solid var(--hilo2); border-bottom-width: 2px; border-radius: 7px; font-family: var(--mono); font-size: 11.5px; text-align: center; color: var(--tenue); transition: color .25s, border-color .25s; }
.skill.activa kbd { color: var(--acento2); border-color: rgba(var(--brillo), .7); }
.skill:active kbd { transform: translateY(1px); }

/* La ventana donde se ve cada skill: igual que Discord (tema oscuro), con los mensajes reales
   de Vantax. Los colores son los de Discord, no los de la web. */
.escena { --chat: #313338; --lateral: #2b2d31; --oscuro: #1e1f22; --texto: #dbdee1; --fuerte: #f2f3f5; --suave: #949ba4; --icono: #80848e;
    --linea: #3f4147; --azul: #5865f2; --verde: #248046; --rojo-dc: #da373c; --gris: #4e5058; --enlace: #00a8fc;
    height: 520px; display: grid; grid-template-columns: 186px minmax(0, 1fr); overflow: hidden; border-radius: 12px; background: var(--chat); color: var(--texto);
    font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.375; text-align: left;
    border: 1px solid rgba(var(--brillo), .5); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(var(--brillo), .1), 0 0 70px rgba(var(--brillo), .18); }
.escena.cambia { animation: cambio-escena .45s ease; }
@keyframes cambio-escena { from { opacity: .4; transform: scale(.99); } }
.escena img.roto { display: none; }
/* Lado: servidor y canales */
.dc-lado { display: flex; flex-direction: column; min-width: 0; background: var(--lateral); }
.dc-servidor { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 48px; padding: 0 12px 0 16px; flex-shrink: 0; font-weight: 600; font-size: 15px; color: var(--fuerte); box-shadow: 0 1px 0 rgba(4, 4, 5, .2), 0 1.5px 0 rgba(6, 6, 7, .05), 0 2px 0 rgba(4, 4, 5, .05); }
.dc-servidor svg { width: 18px; height: 18px; color: var(--icono); }
.dc-canales { flex: 1; overflow: hidden; padding: 12px 8px; }
.can-grupo { padding: 6px 8px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--suave); }
.can { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; margin: 1px 0; border-radius: 4px; color: var(--suave); font-size: 15px; font-weight: 500; overflow: hidden; max-height: 34px; transition: background .2s, color .2s, opacity .4s, max-height .4s .3s, margin .4s .3s; }
.can-ico { width: 18px; height: 18px; flex-shrink: 0; color: var(--icono); }
.can-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.can-candado { width: 14px; height: 14px; flex-shrink: 0; color: var(--icono); }
.can-av { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.can.activo { background: #404249; color: #fff; }
.can.activo .can-ico { color: #fff; }
.can.bloqueado { opacity: .55; }
.can.borrado { background: rgba(218, 55, 60, .3); color: #fff; opacity: 0; max-height: 0; margin: 0; transition: background .15s, opacity .4s .2s, max-height .35s .45s, margin .35s .45s; }
.can.nuevo { animation: canal-nuevo 1.4s ease both; }
@keyframes canal-nuevo { 0% { opacity: 0; transform: translateX(-8px); background: rgba(88, 101, 242, .55); color: #fff; } 35% { opacity: 1; transform: none; } 100% { background: transparent; } }
/* Principal: barra, mensajes y la caja de escribir */
.dc-principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dc-barra { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 16px; flex-shrink: 0; box-shadow: 0 1px 0 rgba(4, 4, 5, .2), 0 1.5px 0 rgba(6, 6, 7, .05), 0 2px 0 rgba(4, 4, 5, .05); }
.escena-canal { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; font-size: 15px; color: var(--fuerte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.escena-canal::before { content: "#"; font-size: 22px; font-weight: 400; line-height: 1; color: var(--icono); }
.escena-canal.es-dm::before { content: "@"; font-size: 19px; }
.escena-estado { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border: 1px solid rgba(var(--brillo), .55); border-radius: 999px; background: rgba(var(--brillo), .12); font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--acento2); white-space: nowrap; transition: color .3s, border-color .3s, background .3s; }
.escena-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.escena-estado.alerta { color: #ffb3cb; border-color: rgba(var(--rojo-b), .6); background: rgba(var(--rojo-b), .12); animation: latido .9s ease-in-out infinite; }
.escena-estado.ok { color: var(--verde); border-color: rgba(var(--verde-b), .5); background: rgba(var(--verde-b), .08); }
.dc-chat { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.dc-lista { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 0 10px; }
.dc-escribir { flex-shrink: 0; margin: 0 16px 16px; padding: 11px 16px; border-radius: 8px; background: #383a40; color: #6d6f78; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Mensajes */
.dm-msg { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; padding: 4px 16px 4px; margin-top: 14px; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.dm-msg.entra { opacity: 1; transform: none; }
.dm-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #111214; object-fit: cover; }
.dm-cuerpo { min-width: 0; }
.dm-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; line-height: 20px; }
.dm-autor { font-weight: 500; font-size: 15px; color: var(--fuerte); }
.dm-app { display: inline-flex; align-items: center; height: 15px; padding: 0 4px; border-radius: 4px; background: var(--azul); color: #fff; font-size: 10px; font-weight: 600; line-height: 15px; position: relative; top: -1px; }
.dm-hora { font-size: 11.5px; color: var(--suave); font-weight: 400; }
.dm-texto { font-size: 15px; line-height: 21px; color: var(--texto); overflow-wrap: anywhere; }
.dm-msg.sospecha .dm-texto { color: #ffd0de; }
.dm-msg.borrado { opacity: 0; transform: translateX(16px); filter: blur(4px); transition: opacity .45s, transform .45s, filter .45s; background: rgba(218, 55, 60, .14); }
.dm-msg.colapsa { max-height: 0 !important; margin-top: 0; padding-block: 0; overflow: hidden; transition: max-height .4s ease, margin .4s ease, padding .4s ease; }
/* Entró alguien (como el mensaje de sistema de Discord) */
.dm-sis { grid-template-columns: 40px minmax(0, 1fr); align-items: center; margin-top: 6px; }
.dm-sis-ico { justify-self: center; width: 16px; height: 16px; color: #23a55a; }
.dm-sis .dm-texto { font-size: 14.5px; color: var(--suave); }
.dm-sis .dm-texto b { color: var(--fuerte); font-weight: 500; }
.dm-divisor { display: flex; align-items: center; justify-content: center; height: 0; margin: 26px 16px 8px; border-top: 1px solid var(--linea); }
.dm-divisor span { padding: 2px 6px; background: var(--chat); color: var(--suave); font-size: 12px; font-weight: 600; }
/* "polo usó /backup" encima de la respuesta del bot */
.dm-usa { grid-column: 2; display: flex; align-items: center; gap: 4px; margin: 0 0 2px; font-size: 13.5px; color: #b5bac1; position: relative; }
.dm-usa::before { content: ""; position: absolute; left: -36px; top: 9px; width: 30px; height: 10px; border-left: 2px solid var(--gris); border-top: 2px solid var(--gris); border-top-left-radius: 6px; }
.dm-usa-quien { font-weight: 500; color: #a78bfa; }
.dm-usa-cmd { color: var(--enlace); }
.con-comando > .dm-av { grid-row: 2; }
.con-comando > .dm-cuerpo { grid-row: 2; }
.dm-efimero { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; color: var(--suave); }
.dm-efimero-ico { width: 16px; height: 16px; }
.dm-descartar { color: var(--enlace); }
/* Formato de Discord (Markdown ya convertido en el servidor) */
.escena .md-mencion { background: rgba(88, 101, 242, .3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.escena .md-emoji { display: inline; width: 19px; height: 19px; vertical-align: -4px; object-fit: contain; }
.escena .md-code { background: var(--lateral); border: 1px solid var(--oscuro); border-radius: 4px; padding: 0 3px; font-family: Consolas, "Andale Mono", "Lucida Console", Monaco, monospace; font-size: 85%; }
.escena .md-pre { background: var(--lateral); border: 1px solid var(--oscuro); border-radius: 4px; padding: 7px 9px; margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: Consolas, "Andale Mono", "Lucida Console", Monaco, monospace; font-size: 12.5px; line-height: 17px; color: var(--texto); }
.escena .md-pre code { font: inherit; }
.escena .md-cita { position: relative; padding: 0 6px 0 12px; }
.escena .md-cita::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: var(--gris); }
.escena .md-h1, .escena .md-h2, .escena .md-h3 { font-weight: 700; color: var(--fuerte); margin: 2px 0 2px; line-height: 1.3; }
.escena .md-h1 { font-size: 20px; } .escena .md-h2 { font-size: 18px; } .escena .md-h3 { font-size: 16px; }
.escena .md-sub { font-size: 12px; line-height: 1.3; color: var(--suave); }
.escena .md-enlace { color: var(--enlace); }
.escena .md-tiempo { background: rgba(255, 255, 255, .06); border-radius: 3px; padding: 0 2px; }
.escena strong { color: var(--fuerte); font-weight: 600; }
/* Tarjetas de Vantax (Components V2) */
.dm-tarjetas { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; max-width: 520px; }
.v2 { padding: 12px 14px; background: var(--lateral); border: 1px solid rgba(255, 255, 255, .06); border-left: 4px solid var(--acento, var(--linea)); border-radius: 8px; transition: border-color .3s; }
.v2.sin-borde { padding: 0; background: none; border: 0; }
.v2 > * + * { margin-top: 8px; }
.v2-texto { font-size: 14px; line-height: 19px; white-space: pre-wrap; white-space: break-spaces; overflow-wrap: anywhere; }
.v2-sep { border-top: 1px solid rgba(255, 255, 255, .08); }
.v2-seccion { display: flex; gap: 12px; align-items: flex-start; }
.v2-seccion > .v2-texto { flex: 1; min-width: 0; }
.v2-mini { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.v2-galeria { display: grid; gap: 4px; }
.v2-galeria img { display: block; width: 100%; max-height: 250px; object-fit: cover; border-radius: 8px; transition: opacity .26s ease; }
.v2-galeria img.cambia { opacity: 0; }
.v2-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-boton { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #fff; background: var(--gris); transition: transform .15s, box-shadow .2s, filter .2s; }
.v2-boton.estilo-1 { background: var(--azul); }
.v2-boton.estilo-3 { background: var(--verde); }
.v2-boton.estilo-4 { background: var(--rojo-dc); }
.v2-boton.off { opacity: .5; }
.v2-boton-emoji { width: 18px; height: 18px; object-fit: contain; }
.v2-enlace-ico { width: 14px; height: 14px; }
.v2-boton.pulsado { animation: pulsar .55s ease; filter: brightness(1.25); box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
@keyframes pulsar { 35% { transform: scale(.92); } }
.v2-menu { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 12px; border: 1px solid var(--oscuro); border-radius: 8px; background: var(--oscuro); color: var(--suave); font-size: 14px; }
.v2-menu::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--suave); border-bottom: 2px solid var(--suave); transform: rotate(45deg) translate(-2px, -2px); }
/* Una imagen dudosa (manchas de color, nada real) que la IA revisa */
.img-falsa { position: relative; display: block; width: min(240px, 100%); aspect-ratio: 16 / 10; margin-top: 6px; border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 30% 40%, #f0a6c3, transparent 45%), radial-gradient(circle at 70% 60%, #c084fc, transparent 50%), #3b1d4f; }
.img-falsa::after { content: "IA revisando"; position: absolute; left: 8px; bottom: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.img-falsa.escaneando { box-shadow: 0 0 0 1px rgba(var(--rojo-b), .7); background-image: linear-gradient(180deg, transparent 0 45%, rgba(var(--rojo-b), .9) 49%, transparent 53%), radial-gradient(circle at 30% 40%, #f0a6c3, transparent 45%), radial-gradient(circle at 70% 60%, #c084fc, transparent 50%); background-color: #3b1d4f; background-size: 100% 220%, auto, auto; animation: escanear 1.1s linear infinite; }
@keyframes escanear { from { background-position: 0 100%, 0 0, 0 0; } to { background-position: 0 -100%, 0 0, 0 0; } }

/* ── La frase del panel ────────────────────────────────────────── */
.frase-v { padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 46px); }
.frase-v p { margin: 0; font-size: clamp(21px, 2.6vw, 32px); font-weight: 560; line-height: 1.6; letter-spacing: -.015em; }
.hueco { display: inline-block; padding: 0 10px; margin: 0 2px; border: 1px solid rgba(var(--brillo), .45); border-bottom: 2px solid var(--acento); border-radius: 9px; background: rgba(var(--brillo), .1); color: var(--acento2); font-weight: 640; line-height: 1.4; transition: transform .25s ease, opacity .25s ease, background .3s, box-shadow .3s; }
.hueco:hover { background: rgba(var(--brillo), .2); box-shadow: 0 0 0 3px rgba(var(--brillo), .15); }
.hueco.cambia { transform: translateY(-6px); opacity: 0; }
.hueco.nuevo { background: rgba(var(--brillo), .28); box-shadow: 0 0 22px rgba(var(--brillo), .5); }
.frase-pie { display: flex; align-items: center; gap: 9px; margin-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.guardando .frase-pie .punto-verde { background: var(--amarillo); box-shadow: 0 0 10px rgba(245, 194, 107, .9); }
.arranque { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: paso; }
.arranque li { position: relative; counter-increment: paso; padding: 22px 4px 0; display: flex; flex-direction: column; gap: 6px; }
.arranque li::before { content: counter(paso, decimal-leading-zero); font-family: var(--mono); font-size: 12px; letter-spacing: .18em; color: var(--acento); }
.arranque li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--acento), transparent); transform-origin: left; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.js .revelar:not(.visible) .arranque li::after { transform: scaleX(0); }
.revelar.visible .arranque li:nth-child(2)::after { transition-delay: .2s; }
.revelar.visible .arranque li:nth-child(3)::after { transition-delay: .4s; }
.arranque b { font-size: 17px; font-weight: 640; }
.arranque span { color: var(--suave); font-size: 14.5px; line-height: 1.55; }

/* ── El final ──────────────────────────────────────────────────── */
.final-v { margin-top: clamp(80px, 10vw, 120px); padding: clamp(40px, 7vw, 76px) clamp(22px, 5vw, 64px); text-align: center; overflow: hidden; }
.final-v::after { content: ""; position: absolute; left: 50%; top: -60%; width: 70%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(var(--brillo), .22), transparent 65%); pointer-events: none; }
.final-v h2 { position: relative; z-index: 1; margin: 0; font-size: clamp(36px, 5.6vw, 72px); font-weight: 720; letter-spacing: -.045em; line-height: 1; background: linear-gradient(180deg, #fff 30%, var(--acento2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.final-v p { position: relative; z-index: 1; color: var(--suave); max-width: 520px; margin: 16px auto 0; font-size: 17px; line-height: 1.6; }
.final-v .botonera { position: relative; z-index: 1; justify-content: center; }

/* ── Tablet y celular ──────────────────────────────────────────── */
@media (max-width: 980px) {
    .hero-v { grid-template-columns: 1fr; gap: 60px; padding-bottom: 80px; }
    .radar { width: min(380px, 88%); }
    .skills { grid-template-columns: 1fr; }
    .skills-escena { position: relative; top: 0; }
    .skills-lista { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .skills-lista::-webkit-scrollbar { display: none; }
    .skill { width: auto; flex-shrink: 0; grid-template-columns: 40px auto; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 999px; scroll-snap-align: start; }
    .skill:hover { transform: none; }
    .skill-icono { width: 40px; height: 40px; }
    .skill-icono > svg:first-child { width: 19px; height: 19px; }
    .skill-texto b { font-size: 14px; white-space: nowrap; }
    .skill-texto small, .skill kbd { display: none; }
    .arranque { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 620px) {
    .cifras-v { grid-template-columns: repeat(3, minmax(0, auto)); gap: 16px 24px; }
    .cifras-v dt { letter-spacing: .1em; }
    .escena { height: 500px; grid-template-columns: minmax(0, 1fr); }
    .dc-lado { display: none; }
    .dm-msg { grid-template-columns: 32px minmax(0, 1fr); gap: 0 10px; padding-inline: 12px; }
    .dm-av { width: 32px; height: 32px; font-size: 14px; }
    .dm-usa::before { left: -28px; width: 22px; }
    .dc-escribir { margin: 0 12px 12px; }
    .escena-estado { max-width: 50%; overflow: hidden; text-overflow: ellipsis; }
    .v2 { padding: 10px 11px; }
    .frase-v p { line-height: 1.75; }
}
@media (prefers-reduced-motion: reduce) {
    .js .revelar { opacity: 1; transform: none; }
    .titular .tachon::after { transform: scaleX(1) rotate(-2deg); }
}
@media (max-width: 980px) { .solo-pc { display: none; } }