/* Yakuza — variante de marca de Buril. Mismo producto, misma tecnologia (3.691 herramientas
   verificadas para el Editor de Unity via MCP, mismos tiers y precios, mismos modulos:
   hub en vivo, VRoid Hub, demo WebGL de openmon), la misma estructura de pagina que
   buril.ai seccion por seccion — otra piel: verde neon y terminal sobre negro en vez de
   esmeralda y serif de lujo. Repo aparte a proposito ("no mezclar", Ezequiel 2026-09-12). */

@font-face {
  font-family: "JetBrains Mono";
  src: local("JetBrains Mono");
  font-display: swap;
}

:root {
  --tinta:      #000000;   /* el mismo negro del logo, sin costura entre el PNG y el fondo */
  --tinta-2:    #060907;
  --tinta-3:    #0c1310;
  --borde:      #16241d;
  --borde-vivo: #234133;
  --texto:      #eafff5;
  --texto-2:    #9fc4b2;
  --texto-3:    #5f8071;
  --acento:     #01f8a4;   /* muestreado del logo */
  --acento-2:   #6dffce;
  --acento-os:  #043024;   /* el mismo verde, casi negro, para fondos tenues */
  --verde:      #01f8a4;   /* "si" de la comparativa: el mismo acento, Yakuza es todo "si" */
  --rojo:       #ff5d5d;
  --radio:      2px;       /* esquinas casi rectas: terminal, no producto de lujo */
  --ancho:      1180px;
  /* "Noto Sans JP" despues de la latina: los glifos latinos siguen en JetBrains/Plex
     y el japones (idioma por defecto desde 2026-09-13) cae en Noto en vez de en la
     fuente del sistema, que cambia entre Windows y macOS. */
  --mono: "JetBrains Mono", "Noto Sans JP", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", "Noto Sans JP", -apple-system, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--tinta); color: var(--texto); font-family: var(--sans);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--acento); color: #000; }
a { color: var(--acento); text-decoration: none; }
code { font-family: var(--mono); }
img { max-width: 100%; display: block; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--acento);
  margin-bottom: 18px;
}
.etiqueta::before { content: ">"; color: var(--texto-3); }
h1, h2, h3 { font-family: var(--mono); font-weight: 700; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.boton {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: var(--radio);
  font-family: var(--mono); font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid transparent;
  transition: all .15s ease; white-space: nowrap;
}
.boton.primario { background: var(--acento); color: #001b12; box-shadow: 0 0 0 1px var(--acento), 0 0 24px -6px var(--acento); }
.boton.primario:hover { background: var(--acento-2); box-shadow: 0 0 0 1px var(--acento-2), 0 0 32px -4px var(--acento-2); transform: translateY(-1px); }
.boton.fantasma { background: transparent; color: var(--texto); border-color: var(--borde-vivo); }
.boton.fantasma:hover { border-color: var(--acento); color: var(--acento); }
.boton.grande { padding: 16px 30px; font-size: 15.5px; }

/* --- nav ---------------------------------------------------------------
   La barra es <nav class="nav" id="nav"> (sin <header> envolvente — el
   markup sigue el patron real de buril.ai, no el de la v1). Sticky ARRIBA
   de la galaxia (hero.js dibuja 3.691 puntos justo debajo): un
   backdrop-filter fijo ahi se recompone en cada cuadro en que la galaxia se
   mueve detras, asi que se prende recien con la pagina scrolleada (ver
   landing.js), que es cuando detras hay contenido quieto y sale casi gratis. */
nav.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(0,0,0,0); border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
nav.nav[data-pegado="1"] {
  background: rgba(0,0,0,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--borde);
}
/* La fila horizontal va en .envoltura (marca/links/boton son hijos DIRECTOS
   de ella): .marca y .nav-links tienen su propio display:flex para SUS
   hijos, que sin este selector los vuelve cajas de bloque y los apila uno
   debajo del otro en vez de en fila — eso era el boton "cayendose". */
nav.nav > .envoltura { display: flex; align-items: center; gap: 24px; padding: 16px 24px; max-width: 1320px; }
.marca { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; font-size: 18px; letter-spacing: .04em; color: var(--texto); flex: 0 0 auto; }
.marca img { width: 26px; height: 26px; }
.nav-links { display: flex; gap: 18px; margin-left: auto; font-size: 13.5px; color: var(--texto-2); font-family: var(--mono); flex-wrap: nowrap; white-space: nowrap; }
.nav-links a:hover { color: var(--acento); }
@media (max-width: 1080px) { .nav-links { display: none; } }

/* --- hero: la galaxia de 3.691 estrellas + el logo de Unity en plata -------
   Mismo motor que buril.ai (hero.js dibuja el campo, plata.js el logo
   extruido): la vidriera tecnica es identica adrede — lo que cambia es la
   piel alrededor. Semilla por defecto "yakuza" en vez de "buril". */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; isolation: isolate; overflow: visible; }
#lienzo-hero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
/* El logo de Unity, clavado al nucleo de la galaxia (mismo centro que hero.js). */
#plata {
  position: absolute; z-index: -1; pointer-events: none;
  width: 200px; height: 200px; left: 66%; top: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 860px), (pointer: coarse) { #plata { display: none; } }
/* Vineta: sin esto el texto se pelea con 3.691 puntos moviendose atras. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.80) 34%, rgba(0,0,0,.30) 58%, transparent 78%),
    radial-gradient(ellipse 65% 50% at 42% 46%, rgba(0,0,0,.55), transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 20%, transparent 60%, var(--tinta) 100%);
}
@media (max-width: 860px) {
  .hero::after { background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.86) 30%, rgba(0,0,0,.86) 70%, var(--tinta) 100%); }
}
.hero-caja { max-width: 780px; padding: 120px 0 64px; position: relative; z-index: 1; }
.pildora {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  border: 1px solid var(--borde-vivo); background: rgba(6,9,7,.75);
  backdrop-filter: blur(8px);
  font-family: var(--mono); font-size: 13px; color: var(--texto-2); margin-bottom: 26px;
}
.pildora b { color: var(--acento); font-weight: 700; }
.pildora .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 3px rgba(1,248,164,.18); animation: latir 2.4s ease-in-out infinite; }
@keyframes latir { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.hero h1 { font-size: clamp(38px, 6vw, 68px); line-height: 1.04; margin-bottom: 22px; }
.hero h1 em.destaca { font-style: normal; color: var(--acento); text-shadow: 0 0 28px rgba(1,248,164,.45); }
.hero .bajada { font-family: var(--sans); font-size: clamp(16.5px, 2vw, 18.5px); color: var(--texto-2); max-width: 58ch; margin-bottom: 34px; text-wrap: pretty; }
.hero .bajada strong { color: var(--texto); font-weight: 600; }
.hero-botones { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-nota { margin-top: 18px; font-family: var(--mono); font-size: 12.5px; color: var(--texto-3); }
/* la semilla, abajo a la derecha del hero */
.semilla-caja { position: absolute; right: 24px; bottom: 26px; z-index: 2; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--texto-3); }
.semilla-caja input {
  width: 108px; padding: 6px 10px; border-radius: var(--radio);
  border: 1px solid var(--borde); background: rgba(6,9,7,.8); color: var(--acento);
  font: inherit; outline: none; transition: border-color .2s ease;
}
.semilla-caja input:focus { border-color: var(--acento); }
@media (max-width: 700px) { .semilla-caja { display: none; } }
/* el tooltip de la estrella apuntada: se ancla a la estrella, no al mouse */
.tooltip-estrella {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  display: grid; gap: 3px; padding: 9px 12px; border-radius: var(--radio);
  border: 1px solid rgba(1,248,164,.4); background: rgba(4,6,5,.92);
  backdrop-filter: blur(6px); box-shadow: 0 8px 28px -10px rgba(0,0,0,.9);
  will-change: transform; max-width: 320px;
}
.tooltip-estrella[hidden] { display: none; }
.tooltip-estrella .tt-nombre { font-family: var(--mono); font-size: 13px; color: var(--acento-2); font-weight: 700; letter-spacing: -.01em; word-break: break-all; }
.tooltip-estrella .tt-familia { font-size: 12px; color: var(--texto-2); }
.tooltip-estrella .tt-familia:empty { display: none; }
.tooltip-estrella .tt-efecto { font-size: 11px; color: var(--texto-3); font-family: var(--mono); }
.tooltip-estrella .tt-efecto:empty { display: none; }
.tooltip-estrella .tt-efecto[data-efecto="0"] { color: #f6d365; }
.tooltip-estrella .tt-efecto[data-efecto="1"] { color: var(--acento); }
.tooltip-estrella .tt-efecto[data-efecto="2"] { color: var(--rojo); }

/* --- secciones --------------------------------------------------------- */
section { padding: 104px 0; position: relative; }
.seccion-cabeza { max-width: 680px; margin-bottom: 52px; }
.seccion-cabeza p { color: var(--texto-2); font-size: 17px; }

.revelar { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.revelar[data-visible="1"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .revelar { opacity: 1; transform: none; transition: none; } }

/* --- la banda de logos --------------------------------------------------- */
.logos { padding: 56px 0 40px; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); background: var(--tinta-2); }
.logos-titulo { text-align: center; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); font-family: var(--mono); margin-bottom: 34px; }
.logos-fila { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 5vw, 72px); flex-wrap: wrap; }
.logo-item { display: grid; justify-items: center; gap: 12px; color: var(--texto-2); transition: color .3s ease, transform .3s ease; }
.logo-item:hover { color: var(--texto); transform: translateY(-3px); }
.logo-svg { display: block; width: clamp(48px, 6vw, 80px); height: clamp(48px, 6vw, 80px); overflow: hidden; border-radius: var(--radio); }
.logo-svg svg { width: 100%; height: 100%; display: block; }
.logo-nombre { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.logo-item.motor { color: var(--texto); }
.logo-item.motor .logo-svg { filter: drop-shadow(0 0 22px rgba(255,255,255,.16)); }
/* Yakuza va del mismo tamano que los demas, con lineas a los lados: "pasa por aca". */
.logo-item.yakuza { position: relative; color: var(--texto); }
.logo-item.yakuza .logo-svg { filter: drop-shadow(0 0 26px rgba(1,248,164,.5)); }
.logo-item.yakuza .logo-nombre small { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--acento); margin-top: 2px; text-align: center; }
.logo-item.yakuza::before, .logo-item.yakuza::after {
  content: ""; position: absolute; top: 50%; width: clamp(14px, 2.4vw, 36px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--acento)); transform: translateY(-50%);
}
.logo-item.yakuza::before { right: calc(100% + 6px); }
.logo-item.yakuza::after { left: calc(100% + 6px); transform: translateY(-50%) scaleX(-1); }
@media (max-width: 640px) { .logo-item.yakuza::before, .logo-item.yakuza::after { display: none; } }
.logos-nota { text-align: center; font-size: 12.5px; color: var(--texto-3); margin-top: 30px; font-family: var(--sans); }
.logos-nota code { font-family: var(--mono); font-size: 12px; color: var(--texto-2); }
.orca {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 34px auto 0; padding: 12px 22px; width: fit-content;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--tinta);
  color: var(--texto-2); transition: color .24s ease, border-color .24s ease, transform .24s ease;
}
.orca:hover { color: var(--texto); border-color: var(--acento); transform: translateY(-2px); }
.orca-texto { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-family: var(--mono); color: var(--texto-3); }
.orca-logo { display: block; height: 26px; }
.orca-logo svg { height: 100%; width: auto; display: block; color: var(--texto); }
.orca:hover .orca-logo svg { color: var(--acento); }
.orca-nombre { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--texto); }
.orca-url { font-family: var(--mono); font-size: 12px; color: var(--texto-3); padding-left: 8px; border-left: 1px solid var(--borde); }
.orca:hover .orca-url { color: var(--acento); }
@media (max-width: 560px) { .orca-url { display: none; } .orca { gap: 10px; padding: 10px 16px; } }

/* --- numeros: grilla de celdas con borde, mismo componente en dos secciones */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.numero { background: var(--tinta-2); padding: 28px 24px; transition: background .2s ease; }
.numero:hover { background: var(--tinta-3); }
.numero b { display: block; font-family: var(--mono); font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--acento); font-variant-numeric: tabular-nums; }
.numero span { display: block; font-size: 13.5px; color: var(--texto-2); margin-top: 6px; }
.numero em { display: block; font-style: normal; font-size: 11px; color: var(--texto-3); margin-top: 8px; font-family: var(--mono); }

/* --- capacidades --------------------------------------------------------- */
.capacidades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .capacidades { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .capacidades { grid-template-columns: 1fr; } }
.capacidad {
  position: relative; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--tinta-2);
  padding: 26px 24px; display: grid; gap: 12px; align-content: start;
  transition: transform .2s ease, border-color .2s ease;
}
.capacidad:hover { transform: translateY(-3px); border-color: var(--borde-vivo); }
.capacidad[data-destacada="1"] { border-color: rgba(1,248,164,.4); background: linear-gradient(180deg, var(--acento-os), var(--tinta-2) 55%); }
.cap-num { font-family: var(--mono); font-size: 12px; color: var(--acento); letter-spacing: .1em; }
.capacidad h3 { font-size: 18px; letter-spacing: -.01em; }
.capacidad p { font-size: 14px; color: var(--texto-2); line-height: 1.55; }
.capacidad p em { color: var(--texto); font-style: normal; font-weight: 600; }
.cap-familias { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cap-familias li {
  font-family: var(--mono); font-size: 11px; color: var(--texto-3);
  padding: 3px 9px; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--tinta-2);
}
.cap-familias li b { color: var(--texto-2); font-weight: 600; margin-left: 3px; }

/* --- comparativa --------------------------------------------------------- */
.tabla-envuelta { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--tinta-2); min-width: 0; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 860px; }
thead th {
  position: sticky; top: 0; z-index: 2; background: var(--tinta-3); padding: 14px 16px; text-align: left;
  font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-2); border-bottom: 1px solid var(--borde); white-space: nowrap;
}
thead th.yo { color: var(--acento); }
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--borde); color: var(--texto-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(1,248,164,.02); }
tbody td:first-child { color: var(--texto); font-weight: 500; }
td.yo { background: rgba(1,248,164,.05); color: var(--texto); }
.si { color: var(--verde); font-weight: 600; }
td.yo.si, td.yo.si b { color: var(--verde); }
.no { color: var(--texto-3); }
.parcial { color: #f6d365; }
.tabla-nota { font-size: 12px; color: var(--texto-3); margin-top: 14px; font-family: var(--mono); }

/* --- manifiesto ------------------------------------------------------------ */
.manifiesto { padding: 100px 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.manifiesto .envoltura { max-width: 860px; text-align: center; }
.manifiesto p {
  font-family: var(--mono); font-size: clamp(19px, 2.6vw, 28px); line-height: 1.4;
  color: var(--texto-2); margin: 0 0 20px; letter-spacing: -.01em;
}
.manifiesto p.cierre { color: var(--texto); margin-top: 30px; }
.manifiesto p em { font-style: normal; color: var(--acento); }

/* --- precios --------------------------------------------------------------- */
.interruptor { display: inline-flex; padding: 4px; border: 1px solid var(--borde); border-radius: 999px; background: var(--tinta-2); margin-bottom: 44px; }
.interruptor button {
  padding: 8px 20px; border-radius: 999px; border: 0; background: transparent;
  color: var(--texto-2); font: inherit; font-family: var(--mono); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: color .2s ease;
}
.interruptor button[aria-pressed="true"] { background: var(--acento); color: #001b12; }
.interruptor .ahorro { font-size: 11px; color: var(--acento); margin-left: 6px; }

.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: stretch; }
@media (min-width: 1100px) { .planes { grid-template-columns: repeat(5, 1fr); gap: 12px; } }
.plan {
  position: relative; background: var(--tinta); padding: 26px 20px 22px;
  border: 1px solid var(--borde); border-radius: var(--radio);
  display: flex; flex-direction: column; transition: background .2s ease, border-color .2s ease;
}
.plan:hover { background: var(--tinta-3); border-color: var(--borde-vivo); }
.plan[data-destacado="1"] { background: linear-gradient(180deg, var(--acento-os), var(--tinta) 60%); border-color: rgba(1,248,164,.4); }
.plan .cinta {
  position: absolute; top: -1px; right: 16px; transform: translateY(-50%);
  background: var(--acento); color: #001b12; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; letter-spacing: .06em; text-transform: uppercase;
}
.plan h3 { font-size: 19px; margin-bottom: 4px; }
.plan .para { font-size: 12.5px; color: var(--texto-3); min-height: 48px; }
.plan .precio { display: flex; align-items: baseline; gap: 5px; margin: 16px 0 4px; min-height: 46px; }
.plan .precio b { font-family: var(--mono); font-size: 36px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--texto); }
.plan .precio b.palabra { font-size: 22px; letter-spacing: 0; }
.plan .precio span { font-size: 13px; color: var(--texto-3); }
.plan .precio-nota { font-size: 11.5px; color: var(--texto-3); min-height: 18px; margin-bottom: 18px; }
.plan .boton { width: 100%; justify-content: center; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 9px; flex: 1; }
.plan li { display: flex; gap: 9px; font-size: 13px; color: var(--texto-2); line-height: 1.45; }
.plan li svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 3px; color: var(--acento); }
.plan li[data-no] svg { color: var(--texto-3); opacity: .5; }
.plan li[data-no] { color: var(--texto-3); }
.plan li b { color: var(--texto); font-weight: 600; }

/* --- calcomania de openmon: logo + ticket dorado en el margen del plan ---- */
.plan.con-calco { padding-bottom: 118px; }
.calco {
  position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 2px; text-decoration: none; transition: transform .26s ease;
}
.calco:hover { transform: translateY(-3px); }
.calco picture, .calco img { display: block; }
.calco img { width: 46px; height: 46px; border-radius: var(--radio); filter: drop-shadow(0 0 10px rgba(1,248,164,.3)); transition: filter .26s ease; }
.calco:hover img { filter: drop-shadow(0 0 16px rgba(1,248,164,.55)); }
.ticket {
  position: relative; z-index: 1; display: grid; gap: 0; padding: 5px 11px 5px 10px; margin-left: 26px; margin-bottom: -8px;
  color: #3b2a05; text-align: center; line-height: 1;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%) no-repeat -160px 0 / 220% 100%,
    linear-gradient(135deg, #f9e27a 0%, #e0b526 38%, #f6d365 55%, #c9971c 100%);
  border: 1px solid rgba(120,85,10,.55); border-radius: 4px;
  box-shadow: 0 4px 14px -4px rgba(224,181,38,.5), inset 0 0 0 1px rgba(255,248,210,.5);
  transform: rotate(-7deg); transform-origin: 20% 90%;
  animation: ticket-brillo 3.2s ease infinite, ticket-vaiven 4.6s ease-in-out infinite;
}
.ticket::before, .ticket::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tinta-2); transform: translateY(-50%); box-shadow: inset 0 0 0 1px rgba(120,85,10,.55);
}
.ticket::before { left: -4px; } .ticket::after { right: -4px; }
.plan[data-destacado="1"] .ticket::before, .plan[data-destacado="1"] .ticket::after { background: var(--tinta); }
.ticket small { font-family: var(--mono); font-size: 7px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.ticket b { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
@keyframes ticket-brillo { 0%, 55% { background-position: -160px 0, 0 0; } 100% { background-position: 260px 0, 0 0; } }
@keyframes ticket-vaiven { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(-3.5deg); } }
@media (prefers-reduced-motion: reduce) { .ticket { animation: none; } }

.precio-aclara { margin-top: 34px; padding: 20px 22px; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--tinta-2); font-size: 13.5px; color: var(--texto-2); }
.precio-aclara b { color: var(--texto); }

/* --- openmon --------------------------------------------------------------- */
.openmon-cabeza { display: flex; gap: 32px; align-items: center; margin-bottom: 44px; }
@media (max-width: 760px) { .openmon-cabeza { flex-direction: column; align-items: flex-start; gap: 20px; } }
.openmon-logo {
  flex: 0 0 auto; display: block; width: 140px; height: 140px; border-radius: var(--radio); overflow: hidden;
  background: #000; border: 1px solid var(--borde); box-shadow: 0 0 60px -18px rgba(68,190,255,.45);
  transition: transform .3s ease, box-shadow .3s ease;
}
.openmon-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.openmon-logo:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 80px -14px rgba(68,190,255,.7); }

/* border beam: conic-gradient girando, recortado a un borde de 1px */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.beam { position: relative; isolation: isolate; }
.beam::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background:
    conic-gradient(from var(--ang), #ffffff 0deg, var(--acento-2) 26deg, var(--acento) 54deg, transparent 80deg, transparent 280deg, var(--acento) 306deg, var(--acento-2) 334deg, #ffffff 360deg),
    linear-gradient(rgba(234,255,245,.1) 0 0);
  padding: 1px;
  -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;
  animation: girar-beam var(--beam-vel, 3.2s) linear infinite;
  animation-delay: var(--beam-delay, 0s);
  pointer-events: none; z-index: 2;
}
@keyframes girar-beam { to { --ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .beam::before { animation: none; } }

.escalera { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; }
.escalon:nth-child(1) { --beam-delay: 0s; } .escalon:nth-child(2) { --beam-delay: -.64s; }
.escalon:nth-child(3) { --beam-delay: -1.28s; } .escalon:nth-child(4) { --beam-delay: -1.92s; } .escalon:nth-child(5) { --beam-delay: -2.56s; }
@media (max-width: 860px) { .escalera { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: stretch; } }
.escalon {
  position: relative; display: grid; gap: 4px; align-content: end; padding: 16px 14px 14px;
  border-radius: var(--radio); border: 1px solid var(--borde); background: var(--tinta-2);
  transition: transform .26s ease, border-color .26s ease;
}
.escalon:hover { transform: translateY(-3px); border-color: rgba(68,190,255,.45); }
.escalon:nth-child(1) { min-height: 112px; } .escalon:nth-child(2) { min-height: 128px; }
.escalon:nth-child(3) { min-height: 144px; } .escalon:nth-child(4) { min-height: 160px; } .escalon:nth-child(5) { min-height: 176px; }
@media (max-width: 860px) { .escalon { min-height: 0 !important; } }
.escalon[data-aparte="1"] { opacity: .6; border-style: dashed; }
a.escalon { color: inherit; text-decoration: none; cursor: pointer; }
a.escalon:hover .escalon-nivel { color: var(--acento); }
.escalon-nivel { font-family: var(--mono); font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.escalon-precio { font-family: var(--mono); font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #5fc9ff; }
.escalon-viene { font-size: 12px; color: var(--texto-3); margin-top: 4px; }
.escalon-viene b { color: var(--acento); font-weight: 600; }
.escalon-nota { font-size: 10.5px; color: var(--texto-3); font-family: var(--mono); }
.enlace { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }

/* --- conector -------------------------------------------------------------- */
.conector { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .conector { grid-template-columns: 1fr; gap: 30px; } }
.pasos { display: grid; gap: 2px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.paso { background: var(--tinta-2); padding: 18px 20px; display: flex; gap: 14px; }
.paso i {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--radio); background: var(--tinta-3);
  border: 1px solid var(--borde-vivo); display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-style: normal; color: var(--acento);
}
.paso h4 { margin: 0 0 4px; font-family: var(--mono); font-size: 14.5px; font-weight: 600; }
.paso p { font-size: 13px; color: var(--texto-2); }
.paso code { font-family: var(--mono); font-size: 12px; background: var(--tinta-3); padding: 1px 6px; border-radius: 4px; color: var(--acento-2); }

/* --- comunidad / sociales ---------------------------------------------- */
.sociales { display: flex; gap: 10px; flex-wrap: wrap; }
.social {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--tinta-2);
  color: var(--texto-2); font-family: var(--mono); font-size: 13.5px; font-weight: 500;
  transition: color .24s ease, border-color .24s ease, transform .24s ease;
}
.social svg { width: 16px; height: 16px; position: relative; z-index: 2; transition: transform .3s ease; }
.social span { position: relative; z-index: 2; }
.social::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 100%; background: var(--tono, var(--acento));
  transform: translateY(101%); transition: transform .34s ease; z-index: 1;
}
.social:hover { color: #001b12; border-color: var(--tono, var(--acento)); transform: translateY(-3px); }
.social:hover::before { transform: translateY(0); }
.social:hover svg { transform: scale(1.12) rotate(-4deg); }
@media (prefers-reduced-motion: reduce) { .social, .social::before, .social svg { transition: none; } }

/* --- pie --------------------------------------------------------------- */
/* position:relative a proposito: sin esto footer queda "static", que en el
   orden de pintado del navegador pinta ANTES que un elemento position:fixed
   (el fondo de lluvia), aunque venga despues en el HTML — la lluvia se veia
   filtrando encima del footer pese a que su fondo es opaco. Medido 13/09/2026. */
footer { position: relative; z-index: 1; border-top: 1px solid var(--borde); padding: 56px 0 36px; background: var(--tinta-2); }
.pie-rejilla { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; margin-bottom: 44px; }
@media (max-width: 820px) { .pie-rejilla { grid-template-columns: 1fr 1fr; gap: 30px; } }
.pie-col h5 { margin: 0 0 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); font-weight: 600; }
.pie-col a { display: block; font-size: 13.5px; color: var(--texto-2); padding: 5px 0; transition: color .2s ease, transform .2s ease; }
.pie-col a:hover { color: var(--acento); transform: translateX(3px); }
.pie-abajo { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--borde); font-size: 12.5px; color: var(--texto-3); }
.pie-abajo .credito { max-width: 480px; text-align: right; }
@media (max-width: 700px) { .pie-abajo .credito { text-align: left; } }

/* --- modal (real: mismo mecanismo que buril.ai, "muy pronto" adentro) ----- */
.telon {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.8); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none;
  transition: opacity .26s ease;
}
.telon[data-abierto="1"] { opacity: 1; pointer-events: auto; }
.modal {
  position: relative; width: 100%; max-width: 420px; border: 1px solid var(--borde-vivo); border-radius: var(--radio);
  background: linear-gradient(180deg, var(--tinta-3), var(--tinta-2)); padding: 30px 28px 24px;
  transform: translateY(14px) scale(.985); transition: transform .3s ease;
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.95);
}
.telon[data-abierto="1"] .modal { transform: none; }
.modal h3 { font-size: 20px; margin-bottom: 8px; }
.modal .sub { font-size: 13.5px; color: var(--texto-2); margin-bottom: 22px; }
.modal .cerrar {
  position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: var(--radio);
  border: 1px solid transparent; background: transparent; color: var(--texto-3); cursor: pointer;
  display: grid; place-items: center; font-size: 17px; line-height: 1; transition: all .2s ease;
}
.modal .cerrar:hover { background: var(--tinta-3); color: var(--texto); border-color: var(--borde); }
.tier-elegido {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 5px 12px;
  border-radius: 999px; font-size: 12px; font-family: var(--mono);
  border: 1px solid rgba(1,248,164,.3); background: rgba(1,248,164,.08); color: var(--acento);
}
.sso-lista { display: grid; gap: 9px; margin-bottom: 20px; }
.sso {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--tinta-3);
  color: var(--texto); font: inherit; font-family: var(--sans); font-size: 14px; font-weight: 500;
  cursor: pointer; text-align: left; transition: border-color .2s ease, transform .2s ease;
}
.sso svg { width: 17px; height: 17px; flex: 0 0 auto; position: relative; z-index: 2; }
.sso span { position: relative; z-index: 2; }
.sso .flecha { margin-left: auto; opacity: 0; transform: translateX(-6px); transition: all .24s ease; }
.sso::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 100%; background: var(--tono, var(--acento));
  opacity: .13; transform: translateY(101%); transition: transform .3s ease;
}
.sso:hover { border-color: var(--tono, var(--acento)); transform: translateY(-2px); }
.sso:hover::before { transform: translateY(0); }
.sso:hover .flecha { opacity: .7; transform: none; }
.modal-pie { margin-top: 14px; font-size: 11px; color: var(--texto-3); text-align: center; }

/* --- lluvia de kanji: fondo fijo de toda la pagina, semitransparente -----
   Un solo <canvas position:fixed> detras de TODO (pintado apenas despues del
   <nav> en el DOM, asi que cualquier seccion posterior con su propio fondo
   opaco lo tapa sin querer — por eso .manifiesto pierde su fondo solido mas
   abajo). Se prende/apaga segun scroll entre #lluvia-inicio (justo despues
   de los logos) y #lluvia-fin (justo antes del footer) via landing.js;
   pointer-events:none para que nunca robe un click, el mouse se seguye
   escuchando en window, no en el canvas. */
#lienzo-kanji {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0;
  opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
#lienzo-kanji[data-activa="1"] { opacity: .32; }
@media (prefers-reduced-motion: reduce) { #lienzo-kanji { display: none; } }
/* todo lo que va POR ENCIMA del fondo necesita su propio stacking context
   (position:relative alcanza con z-index:auto) para que el navegador no lo
   confunda con el canvas de mas atras — la mayoria de las secciones ya usan
   position:relative por la regla general de `section`. */
#lluvia-inicio, #lluvia-fin { position: relative; z-index: 1; }

/* --- la demo del hub flotante -------------------------------------------- */
.demo-marco {
  position: relative; border: 1px solid var(--borde); border-radius: var(--radio);
  background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--acento-os), transparent 62%), linear-gradient(180deg, var(--tinta-2), var(--tinta));
  padding: 14px; overflow: hidden;
}
.demo-barra { display: flex; align-items: center; gap: 8px; padding: 4px 8px 14px; font-family: var(--mono); font-size: 12px; color: var(--texto-3); }
.demo-barra .luces { display: flex; gap: 6px; margin-right: 8px; }
.demo-barra .luces i { width: 10px; height: 10px; border-radius: 50%; background: var(--borde-vivo); }
.demo-barra .real {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  color: var(--acento); border: 1px solid rgba(1,248,164,.25); background: rgba(1,248,164,.07);
  padding: 3px 10px; border-radius: 999px;
}
/* La altura la fija el hub, que se mide a si mismo (ver landing.js). Sin
   transition sobre height: animar layout en cada mensaje sale caro. */
.demo-caja { position: relative; border-radius: var(--radio); overflow: hidden; background: #000; height: 300px; }
.demo-caja iframe { width: 100%; height: 100%; border: 0; display: block; }
.demo-pies { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.demo-pies button {
  padding: 8px 14px; border-radius: var(--radio); border: 1px solid var(--borde);
  background: var(--tinta-3); color: var(--texto-2); font: inherit; font-size: 13.5px; cursor: pointer;
  transition: all .2s ease;
}
.demo-pies button:hover { border-color: var(--acento); color: var(--acento); transform: translateY(-1px); }
.demo-aviso { margin-top: 14px; font-size: 13px; color: var(--texto-3); display: flex; gap: 8px; align-items: flex-start; }
.demo-aviso svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--texto-3); }

/* --- VRoid Hub: la demo con la API oficial -------------------------------- */
.vroid-marco {
  position: relative; border: 1px solid var(--borde); border-radius: var(--radio);
  background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--acento-os), transparent 62%), linear-gradient(180deg, var(--tinta-2), var(--tinta));
  padding: 18px;
}
.vroid-barra { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.vroid-cuenta { font-family: var(--mono); font-size: 12.5px; color: var(--texto-3); }
.vroid-cuenta b { color: var(--acento); font-weight: 700; }
.vroid-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vroid-nota { margin: 12px 0 0; font-size: 13px; color: var(--texto-3); }
.vroid-nota[data-tipo="error"] { color: var(--rojo); }
.vroid-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 16px; margin-top: 16px; }
.vroid-marco[data-estado="cargando"] .vroid-cuerpo,
.vroid-marco[data-estado="sin-sesion"] .vroid-cuerpo,
.vroid-marco[data-estado="sin-config"] .vroid-cuerpo { display: none; }
.vroid-marco[data-estado="sin-sesion"] #vroid-salir, .vroid-marco[data-estado="sin-config"] #vroid-conectar,
.vroid-marco[data-estado="conectado"] #vroid-conectar { display: none; }
.vroid-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; align-content: start; max-height: 520px; overflow: auto; padding-right: 4px; }
.vroid-galeria h4 { grid-column: 1 / -1; margin: 6px 0 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); font-weight: 600; font-family: var(--mono); }
.vroid-galeria p { grid-column: 1 / -1; color: var(--texto-3); font-size: 13.5px; }
.vroid-tarjeta {
  display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--radio);
  border: 1px solid var(--borde); background: var(--tinta-3); color: var(--texto-2);
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; transition: all .2s ease;
}
.vroid-tarjeta:hover, .vroid-tarjeta[aria-pressed="true"] { border-color: var(--acento); color: var(--texto); transform: translateY(-1px); }
.vroid-tarjeta:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.vroid-tarjeta img, .vroid-tarjeta .sin-imagen { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); background: var(--tinta-2); display: block; }
.vroid-tarjeta .sin-imagen { display: grid; place-items: center; color: var(--texto-3); font-family: var(--sans); font-size: 28px; }
.vroid-tarjeta b { display: block; font-weight: 700; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vroid-tarjeta small { color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vroid-tarjeta .vroid-marca { font-size: 11px; color: var(--acento); }
.vroid-visor { position: relative; border-radius: var(--radio); overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #0c1310, #000 70%); min-height: 420px; border: 1px solid var(--borde); }
.vroid-visor canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.vroid-visor-nota { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--texto-3); pointer-events: none; }
/* anillo de progreso: gira el SVG entero (transform-origin en su centro), no el <circle> */
.vroid-progreso { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(0,0,0,.86); }
.vroid-progreso[hidden] { display: none; }
.vroid-progreso-anillo { position: relative; width: 108px; height: 108px; display: grid; place-items: center; }
.vroid-progreso-anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); transform-origin: 50% 50%; }
.vroid-progreso .pista { fill: none; stroke: var(--borde-vivo); stroke-width: 6; }
.vroid-progreso .arco { fill: none; stroke: var(--acento); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: 276.5; }
.vroid-progreso[data-indeterminado="1"] .arco { stroke-dasharray: 70 206.5; stroke-dashoffset: 0; }
.vroid-progreso[data-indeterminado="1"] svg { animation: vroid-girar 1s linear infinite; }
#vroid-progreso-pct { position: relative; font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--acento-2); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.vroid-progreso-texto { font-family: var(--mono); font-size: 12.5px; color: var(--texto-2); min-height: 1.2em; }
@keyframes vroid-girar { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@media (prefers-reduced-motion: reduce) { .vroid-progreso[data-indeterminado="1"] svg { animation: none; } }
.vroid-visor[data-cargando="1"] canvas { visibility: hidden; }
.vroid-visor[data-listo="1"] .vroid-visor-nota { opacity: .7; }
.vroid-pie { margin: 14px 0 0; font-size: 13px; color: var(--texto-3); }
.vroid-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0,0,0,.82); padding: 20px; }
.vroid-modal[hidden] { display: none; }
.vroid-modal-caja { width: min(560px, 100%); max-height: 90vh; overflow: auto; border-radius: var(--radio); border: 1px solid var(--acento); background: var(--tinta-2); padding: 24px; box-shadow: 0 0 60px -10px rgba(1,248,164,.3); }
.vroid-modal-caja h3 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.005em; }
.vroid-modal-modelo { margin: 0 0 12px; font-family: var(--mono); font-size: 12.5px; color: var(--texto-3); }
.vroid-modal-intro { margin: 0 0 14px; font-size: 14px; color: var(--texto-2); }
.vroid-condiciones { width: 100%; min-width: 0; border-collapse: collapse; font-size: 14px; table-layout: auto; }
.vroid-condiciones td { padding: 8px 6px; border-top: 1px solid var(--borde); vertical-align: top; white-space: normal; }
.vroid-condiciones td:first-child { color: var(--texto); }
.vroid-condiciones td:first-child small { display: block; color: var(--texto-3); font-size: 12px; }
.vroid-condiciones td:last-child { text-align: right; color: var(--texto-2); white-space: nowrap; }
.vroid-condiciones td[data-valor="Allow"], .vroid-condiciones td[data-valor="Not required"] { color: var(--acento); }
.vroid-condiciones td[data-valor="Do not allow"], .vroid-condiciones td[data-valor="Required"] { color: var(--rojo); }
.vroid-modal-botones { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.vroid-modal-botones .enlace { margin-right: auto; font-size: 13.5px; }
@media (max-width: 860px) { .vroid-cuerpo { grid-template-columns: 1fr; } .vroid-galeria { max-height: 300px; } .vroid-visor { min-height: 360px; } }

/* --- openmon WebGL --------------------------------------------------------- */
.webgl-marco {
  position: relative; overflow: hidden; border: 1px solid var(--borde); border-radius: var(--radio);
  background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(68,190,255,.07), transparent 70%), var(--tinta-2);
  aspect-ratio: 16 / 9; max-height: 720px; display: grid; place-items: center;
}
.webgl-portada { display: grid; justify-items: center; gap: 18px; text-align: center; padding: 24px; }
.webgl-portada img { width: 120px; height: 120px; border-radius: var(--radio); box-shadow: 0 0 60px -14px rgba(68,190,255,.6); }
.webgl-nota { font-size: 13px; color: var(--texto-3); }
.webgl-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.webgl-marco[data-estado="jugando"] .webgl-portada { display: none; }
.webgl-marco[data-estado="jugando"] iframe { display: block; }
.webgl-marco[data-estado="sin-build"] .webgl-nota { color: var(--acento); }
.webgl-disclaimer {
  margin-top: 16px; padding: 14px 18px; border-radius: var(--radio); border: 1px solid var(--borde);
  background: var(--tinta-2); font-size: 12.5px; line-height: 1.6; color: var(--texto-3);
}
.webgl-disclaimer strong { color: var(--texto-2); font-weight: 600; }

@media (max-width: 720px) {
  section { padding: 80px 0; }
  .manifiesto { padding: 70px 0; }
  /* boton.grande con texto largo (p.ej. "Connect with VRoid Hub") no entra en
     una fila angosta sin esto: white-space:nowrap de .boton lo empuja fuera
     del viewport en vez de partir en dos lineas. */
  .vroid-acciones .boton, .hero-botones .boton { white-space: normal; text-align: center; }
}

/* Selector de idioma en la nav (2026-09-13): japones por defecto, ingles a mano. */
.idiomas { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.idiomas button {
  font: inherit; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; font-weight: 600;
  color: var(--texto-3); background: transparent; border: 0; padding: 6px 7px; border-radius: var(--radio); cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.idiomas button:hover { color: var(--texto); }
.idiomas button[aria-pressed="true"] { color: var(--acento); background: rgba(1,248,164,.08); }
.idiomas button:focus-visible { outline: 1px solid var(--acento); outline-offset: 1px; }

/* Marca "Yakuza.sh" en todo texto (2026-09-13): Yakuza en blanco, .sh en esmeralda.
   Va por encima del color del contexto (encabezados, tabla, pie) a proposito. */
:root { --esmeralda: #16c97a; }
.ysh { color: #fff; }
.ysh-tld { color: var(--esmeralda); }

/* Pie: derechos + "Made with ♥ by NovaEden.com". */
.corazon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.17em; margin: 0 .1em; }
.pie-abajo a.autor { color: var(--texto-2); border-bottom: 1px solid var(--borde-vivo); transition: color .15s ease, border-color .15s ease; }
.pie-abajo a.autor:hover { color: var(--acento); border-bottom-color: var(--acento); }

/* Chino simplificado: Noto Sans SC antes que la JP, asi los hanzi salen con la
   forma china y no con la japonesa (unificacion Han). */
html:lang(zh-Hans) {
  --mono: "JetBrains Mono", "Noto Sans SC", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", "Noto Sans SC", -apple-system, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
}