/* ==========================================================================
   HyperEscrowPay — base
   Tokens, tipografía, retícula y utilidades. Todo lo demás se apoya aquí.

   Los colores están tomados del sitio actual: azul marino profundo con
   acento cian eléctrico y verde esmeralda, y degradado cian→verde en los
   botones. Los tokens están al principio para que sean fáciles de cambiar.
   ========================================================================== */

@layer reset, base, layout, components, utilities;

/* Sin capa a propósito: las declaraciones fuera de @layer ganan a todas las
   capas, así que `hidden` siempre oculta, sin importar qué componente aplique
   un display propio. Es la única regla del proyecto fuera de capas. */
[hidden] { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   @property — permite animar e interpolar estos valores
   ───────────────────────────────────────────────────────────── */
@property --glow {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --animation-reduced {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  img, svg, video { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; }
  fieldset { margin: 0; padding: 0; border: 0; }
  legend { padding: 0; }
  table { border-collapse: collapse; }
}

@layer base {

:root {
  color-scheme: dark;

  /* ══════════════════════════════════════════════════════════
     Paleta — valores exactos del sitio original de HyperEscrowPay.
     El acento primario es un AZUL CIELO, no un cian; el secundario es
     esmeralda. El degradado de marca va de uno al otro a 135°.
     ══════════════════════════════════════════════════════════ */

  /* ── Superficies ────────────────────────────────────────── */
  --bg:         #040d1e;   /* background */
  --navy-deep:  #01051b;   /* navy-deep — el más oscuro */
  --bg-soft:    #0b172f;   /* navy-surface */
  --panel:      #0b172f;   /* card */
  --panel-2:    #15233e;   /* navy-elevated */
  --panel-3:    #18243a;   /* muted */

  /* Los bordes son blanco translúcido, no una línea azul: eso es lo que
     le da el aire acristalado a las tarjetas del sitio original. */
  --line:       rgb(255 255 255 / .08);
  --line-soft:  rgb(255 255 255 / .05);
  --line-input: rgb(255 255 255 / .12);

  /* ── Acentos ────────────────────────────────────────────── */
  --electric:      #4ca9ff;   /* primary */
  --electric-glow: #6abeff;
  --emerald:       #00ca8a;   /* secondary / accent */
  --emerald-glow:  #00e899;
  --amber:         #fcbb00;
  --danger:        #fd2b2e;

  /* Alias heredados: el resto de la hoja los usa por todas partes */
  --cyan:       var(--electric);
  --cyan-hot:   var(--electric-glow);
  --cyan-deep:  #1d5fa8;
  --green:      var(--emerald);
  --green-deep: #007a52;
  --blue:       var(--electric);

  --grad: linear-gradient(135deg, var(--electric), var(--emerald));
  --grad-soft: linear-gradient(135deg,
                 color-mix(in oklab, var(--electric), transparent 86%),
                 color-mix(in oklab, var(--emerald),  transparent 86%));
  --grad-hero: linear-gradient(135deg, #01051b 0%, #011435 50%, #001016 100%);

  /* ── Texto ──────────────────────────────────────────────── */
  --ink:        #f3faff;   /* foreground        · 17.9:1 */
  --ink-2:      #97a7b7;   /* muted-foreground  ·  7.8:1 */
  --ink-3:      #8a9bad;   /*                   ·  6.7:1 */
  --ink-4:      #7b8b9d;   /*                   ·  5.4:1 */
  --on-accent:  #01051b;   /* primary-foreground */

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --t--2: clamp(.69rem, .67rem + .1vw, .75rem);
  --t--1: clamp(.8rem,  .77rem + .15vw, .875rem);
  --t-0:  clamp(.95rem, .92rem + .18vw, 1.05rem);
  --t-1:  clamp(1.08rem, 1.02rem + .3vw, 1.25rem);
  --t-2:  clamp(1.3rem, 1.18rem + .6vw, 1.7rem);
  --t-3:  clamp(1.5rem, 1.3rem + 1vw, 2.25rem);      /* text-4xl */
  --t-4:  clamp(1.875rem, 1.5rem + 1.9vw, 3rem);     /* text-5xl */
  --t-5:  clamp(2.4rem, 1.7rem + 3.4vw, 4.4rem);

  /* ── Espacio y forma ────────────────────────────────────── */
  --gap:      clamp(1rem, .8rem + .9vw, 1.6rem);
  --pad-sec:  clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --shell:    min(1200px, 100% - clamp(1.5rem, 5vw, 3rem));
  --shell-narrow: min(820px, 100% - clamp(1.5rem, 5vw, 3rem));

  --r-sm: 10px;
  --r:    14px;   /* --radius: .875rem */
  --r-lg: 16px;
  --r-xl: 22px;

  /* ── Sombras y halos ────────────────────────────────────── */
  --sh-1: 0 1px 2px rgb(0 0 0 / .4);
  --sh-2: 0 12px 30px -18px rgb(0 0 0 / .8);
  --sh-3: 0 10px 40px -10px rgb(0 0 3 / .6);
  --halo-cyan:  0 0 40px -8px rgb(76 169 255 / .6);
  --halo-green: 0 0 40px -8px rgb(0 202 138 / .55);

  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem;
  accent-color: var(--cyan);
  scrollbar-color: var(--line) transparent;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-block-size: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Fondo: los dos halos del sitio actual — azul arriba a la izquierda,
   verde a la derecha. Fijos, sin coste de repintado al hacer scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* Lavado azul arriba a la izquierda y verde a la derecha, sobre el
       degradado diagonal navy → azul → verde azulado del sitio original. */
    radial-gradient(62rem 44rem at 2% -8%,   rgb(76 169 255 / .22), transparent 62%),
    radial-gradient(48rem 38rem at 104% 10%, rgb(0 202 138 / .14),  transparent 62%),
    radial-gradient(70rem 50rem at 50% 106%, rgb(76 169 255 / .07), transparent 64%),
    var(--grad-hero);
}

/* Grano: rompe el bandeado de los degradados grandes */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;   /* tracking-tight */
  text-wrap: balance;
}
h1 { font-size: var(--t-5); }
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-2); }
h4 { font-size: var(--t-1); font-weight: 700; }

p { text-wrap: pretty; }

/* Aire después de un título, sin tener que acordarse de ponerlo cada vez */
:where(h1, h2, h3, h4) + :where(p, .lead, ul, ol, dl, .checks, .faq) {
  margin-block-start: 1rem;
}

strong, b { font-weight: 700; }

a { text-decoration-thickness: 1px; text-underline-offset: .2em; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: color-mix(in oklab, var(--cyan), transparent 70%); color: #fff; }

hr { border: 0; border-block-start: 1px solid var(--line); margin: 0; }

code, kbd, samp { font-family: var(--font-mono); font-size: .92em; }

/* Modo alto contraste de Windows: los halos y bordes por sombra desaparecen,
   así que garantizamos un borde real. */
@media (forced-colors: active) {
  .card, .panel, .btn { border: 1px solid ButtonBorder; }
}

}

@layer layout {

.shell { inline-size: var(--shell); margin-inline: auto; }
.shell-narrow { inline-size: var(--shell-narrow); margin-inline: auto; }

.section { padding-block: var(--pad-sec); position: relative; }
.section-tight { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

.stack > * + * { margin-block-start: var(--flow, 1rem); }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, .75rem); align-items: center; }

.center { text-align: center; margin-inline: auto; }

}

@layer utilities {

.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-start: .5rem;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--panel-2);
  border: 1px solid var(--cyan);
  border-radius: var(--r-sm);
  translate: 0 -150%;
  transition: translate .2s;
}
.skip:focus { translate: 0 0; }

.muted   { color: var(--ink-2); }
.faint   { color: var(--ink-3); }
.mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nowrap  { white-space: nowrap; }
.measure { max-inline-size: 62ch; }
.measure-tight { max-inline-size: 46ch; }

/* Texto con el degradado de marca */
.grad-text {
  font-style: normal;   /* suele ir dentro de <em>, que llegaría en cursiva */
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* si el recorte falla, el texto sigue siendo legible */
  @supports not (background-clip: text) { color: var(--cyan); }
}

.lead { font-size: var(--t-1); color: var(--ink-2); line-height: 1.6; }

.mt-1 { margin-block-start: 1rem; }
.mt-2 { margin-block-start: 1.5rem; }
.mt-3 { margin-block-start: clamp(2rem, 3vw, 3rem); }
.fs-sm { font-size: var(--t--1); }
/* Un h2 que hace de título de tarjeta: nivel correcto, tamaño de h3 */
.h-sec { font-size: var(--t-2); }
.gap-sm { --gap: .8rem; }
.gap-md { --cluster-gap: 1rem; }
.items-center { align-items: center; }
.cluster.center { justify-content: center; }

.hide-sm { display: none; }
@media (width >= 48rem) { .hide-sm { display: revert; } }

}