/* Kotaro · versión clara — tokens y piezas compartidas
   Layout: lienzo blanco, retícula de 12 columnas, verde Kotaro como luz y no como texto. */
:root {
  color-scheme: light;
  /* Color: neutros con sesgo hacia el Dark Purple de la marca */
  --paper: #FFFFFF;
  --mist: #F3F6F4;
  --mist-2: #E8EEEA;
  --line: #DEE4E1;
  --ink: #0F0E1A;          /* Kotaro Dark Purple */
  --ink-2: #373946;        /* Kotaro Soft Navi */
  --ink-3: #636784;        /* gris complementario de la paleta */
  --lime: #1EE857;         /* Kotaro Lime Green · primario */
  --leaf: #A2FD2D;         /* Kotaro Light Green · secundario */
  --lime-text: #087A2E;    /* verde derivado para texto sobre blanco (AA) */
  --data-green: #13A043;   /* líneas de datos: gráficas y contornos */
  --pos-bg: #E3F9E7;       /* fondo de variación positiva */
  --neg: #B4233A;          /* solo variaciones negativas de precio */
  --neg-bg: #F3E6E9;
  --violet: #7639C3;       /* Kotaro Soft Purple · acento puntual */
  /* Acento verde de los pasos y nodos del rombo (su par morado va abajo) */
  --lime-1: #F3FDE4;       /* fondo del ícono activo */
  --lime-line: #C6FA85;    /* borde del nodo activo */
  --lime-line-2: #C9F98A;  /* borde de las tarjetas de Seguridad al pasar el cursor */
  --lime-0: #F5FDEB;       /* fondo de los íconos de Seguridad */
  --ghost: #F2F6F3;        /* letras fantasma detrás de los encabezados de sección */
  --lime-glow: rgba(162, 253, 45, .28); /* halo del nodo activo: --leaf al 28 % */
  /* Escala morada derivada de --violet (mismo matiz, 267°): solo para SafePal y Dinamicard */
  --violet-1: #F7F2FD;     /* fondos muy claros (como el de los íconos) */
  --violet-2: #ECE1FA;     /* fondos claros y biseles */
  --violet-3: #D9C4F3;     /* bordes y halos */
  --violet-leaf: #BD94F0;  /* equivalente de --leaf: cara clara de los bloques y rellenos */
  --violet-mid: #9862DA;   /* cara intermedia de los bloques */
  --violet-deep: #4F2088;  /* ícono y texto sobre blanco (AA: 11,2:1) */
  --violet-ink: #35155B;   /* canto y sombra del relieve */
  --violet-strong: #6A2BC4; /* morado del bloque SafePal en Seguridad: más saturado y algo más oscuro; blanco encima 7,6:1 */
  --grad: linear-gradient(118deg, #A2FD2D 0%, #1EE857 62%, #17D24E 100%);
  --glow: radial-gradient(closest-side, rgba(162, 253, 45, .55), rgba(30, 232, 87, .22) 55%, rgba(30, 232, 87, 0) 100%);
  --shadow-1: 0 1px 2px rgba(15, 14, 26, .06), 0 8px 24px -12px rgba(15, 14, 26, .18);
  --shadow-2: 0 2px 4px rgba(15, 14, 26, .04), 0 24px 60px -24px rgba(15, 14, 26, .28);

  /* Tipo: Lexend sustituye a LT Wave, Figtree a Sloth, Martian Mono a Aber Mono */
  --f-display: "Lexend", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --r-s: 10px;
  --r-m: 18px;
  --r-l: 30px;
  --gutter: max(clamp(16px, 4vw, 44px), env(safe-area-inset-left, 0px));
  --gutter-r: max(clamp(16px, 4vw, 44px), env(safe-area-inset-right, 0px));
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper);
}
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--ink); margin: 0; text-wrap: balance; font-weight: 500; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--lime-text); outline-offset: 3px; border-radius: 6px; }

.wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}

/* ——— Logo ——— */
.k-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo { display: block; height: 28px; width: auto; color: var(--ink); }
.logo--sm { height: 22px; }

/* ——— Etiquetas y tipo utilitario ——— */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow .dot { width: 8px; height: 8px; background: var(--lime); transform: rotate(45deg); border-radius: 1.5px; flex: none; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* Marco de esquinas, tomado de los lockups de sub-marca del brandbook */
.bracket { position: relative; display: inline-flex; padding: 5px 10px; }
.bracket::before, .bracket::after {
  content: ""; position: absolute; width: 8px; height: 8px; border: 1.5px solid currentColor; opacity: .55;
}
.bracket::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.bracket::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ——— Botones ——— */
.btn {
  --h: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 22px;
  border-radius: 999px; border: 1px solid transparent;
  font: 600 15.5px/1 var(--f-body); letter-spacing: .005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background-color .25s;
}
.btn:active { transform: scale(.97); }
.btn--ink { background: var(--ink); color: var(--paper); box-shadow: 0 10px 30px -12px rgba(15, 14, 26, .55); }
.btn--ink:hover { transform: translateY(-1px); box-shadow: 0 16px 36px -14px rgba(15, 14, 26, .6); }
.btn--ink .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(30, 232, 87, .6); animation: pulse 2.4s infinite; }
.btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink-3); }
.btn--sm { --h: 40px; padding: 0 16px; font-size: 14px; }
.btn svg { width: 16px; height: 16px; flex: none; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(30, 232, 87, .55); }
  70% { box-shadow: 0 0 0 9px rgba(30, 232, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 232, 87, 0); }
}

/* ——— Barra de concepto + cabecera ——— */
.concept {
  background: var(--ink); color: #C9CCD8;
  font: 500 11.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
}
.concept .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; flex-wrap: wrap; padding-block: 6px; }
.concept nav { display: flex; gap: 4px; flex-wrap: wrap; }
.concept a { text-decoration: none; padding: 6px 10px; border-radius: 999px; color: #C9CCD8; }
.concept a[aria-current="page"] { background: var(--leaf); color: var(--ink); }
.concept a:not([aria-current]):hover { color: #fff; }

.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.site-head.is-stuck { border-bottom-color: var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.site-head nav { display: flex; gap: 26px; margin-left: auto; }
.site-head nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2); position: relative; }
.site-head nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--leaf);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out);
}
.site-head nav a:hover::after { transform: scaleX(1); }
@media (max-width: 900px) {
  .site-head nav { display: none; }
  .site-head .btn { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ——————————————————————————————————————————————
   v2 · estructura de paneles con la identidad Kotaro
   Paneles redondeados con margen interior, gradientes de menta a verde,
   texturas del mousepad (retícula geométrica, líneas de contorno, patrón de iconos).
   —————————————————————————————————————————————— */
:root {
  --mint-1: #F4FBF5;
  --mint-2: #E4F8E7;
  --mint-3: #CFF5D6;
  --deep: #0B5E25;
  --gtext: linear-gradient(100deg, #087A2E 0%, #13A043 65%, #0B8735 100%);
  --panel-x: max(10px, env(safe-area-inset-left, 0px));
  --panel-xr: max(10px, env(safe-area-inset-right, 0px));
  --r-panel: clamp(22px, 3vw, 36px);
  /* Unbounded: geométrica y ancha como LT Wave, más delgada; solo para los bloques de sub-marca */
  --f-brand: "Unbounded", "Lexend", system-ui, sans-serif;
}

.panel {
  position: relative; isolation: isolate; overflow: hidden;
  margin-left: var(--panel-x); margin-right: var(--panel-xr);
  border-radius: var(--r-panel);
}
.panel--mint { background: linear-gradient(180deg, #FFFFFF 0%, var(--mint-1) 38%, var(--mint-2) 100%); }
.panel--mist { background: linear-gradient(180deg, #F3F6F4 0%, #EEF5F0 60%, #E6F4EA 100%); }
.panel--line { background: var(--paper); border: 1px solid var(--line); }

/* Insignia de producto */
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 14px 5px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .8); border: 1px solid var(--line);
  font: 600 14px/1 var(--f-body); color: var(--ink);
  box-shadow: 0 1px 2px rgba(15, 14, 26, .04);
}
.badge i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); }
.badge i svg { width: 15px; height: 15px; }

/* Recuadro verde detrás de una palabra, como "AVANZADA" en la presentación */
.hlbox { background: var(--leaf); color: var(--ink); padding: 0 .14em; border-radius: .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Etiqueta técnica de esquina, tomada de las piezas: "KOTARO — PAY / MOVE / YOUR CRYPTOS / SECURE" */
.tag-mono { font: 500 9.5px/1.55 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

.btn--lime { background: var(--leaf); color: var(--ink); box-shadow: 0 10px 24px -14px rgba(110, 180, 15, .85); }
.btn--lime:hover { transform: translateY(-1px); background: #B3FF4D; box-shadow: 0 16px 30px -14px rgba(110, 180, 15, .9); }
.btn--soft { background: rgba(162, 253, 45, .26); color: var(--deep); }
.btn--soft:hover { background: rgba(162, 253, 45, .42); }
.btn--white { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); }

/* Dinamicard, construida en CSS para que quede nítida a cualquier tamaño */
.dcard {
  --w: 300px;
  width: var(--w); aspect-ratio: 1.586; font-size: calc(var(--w) / 22);
  position: relative; overflow: hidden; border-radius: calc(var(--w) / 21);
  background: var(--leaf);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 30px 60px -28px rgba(10, 90, 35, .55), 0 8px 18px -10px rgba(15, 14, 26, .25);
}
.dcard .shards { position: absolute; inset: 0; width: 100%; height: 100%; }
.dcard .chip { position: absolute; left: 8%; top: 22%; width: 13%; aspect-ratio: 1.3; border-radius: 18%; background: linear-gradient(135deg, #F6D58A, #C99A3E 60%, #EBC876); box-shadow: inset 0 0 0 1px rgba(110, 75, 15, .35); }
.dcard .chip::before { content: ""; position: absolute; inset: 28% 0; border-block: 1px solid rgba(110, 75, 15, .4); }
.dcard .nfc { position: absolute; left: 24%; top: 23%; width: 7%; color: var(--ink); opacity: .7; }
.dcard .site { position: absolute; right: 7%; top: 9%; font: 500 .62em/1.4 var(--f-mono); letter-spacing: .04em; text-align: right; }
.dcard .logo { position: absolute; left: 8%; bottom: 13%; height: auto; width: 46%; color: var(--ink); }

/* Línea de icono */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }