/* ==========================================================================
   KakawFlash — landing
   --------------------------------------------------------------------------
   Concepto: "mostrador". La página alterna dos materiales — la PANTALLA
   (azul profundo, el software) y el PAPEL (superficie clara, los tickets y
   cortes que el negocio imprime). Cada cambio de material se marca con una
   PERFORACIÓN, la línea punteada por donde se corta un ticket. El ticket
   térmico del hero es el elemento firma; todo lo demás se mantiene quieto.

   Marca: azul #0f3460 / #16213e / #1a1a2e, acento indigo #818cf8,
   DM Sans para texto y JetBrains Mono para cifras (las mismas de la app).
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* pantalla */
  --ink: #0f0f1a;
  --navy: #16213e;
  --navy-deep: #111a30;
  --brand: #0f3460;
  --brand-lift: #1a4a7d;
  --indigo: #818cf8;
  --indigo-deep: #6470e8;

  /* papel */
  --paper: #f8fafc;
  --paper-2: #eef2f7;
  --card: #ffffff;
  --ticket: #fffcf4; /* si cambia, actualizar el SVG de --tooth más abajo */

  /* tinta */
  --slate-900: #0f172a;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --on-dark: #e9eefb;
  --on-dark-dim: #a9b6d0;

  /* dinero */
  --money: #10b981;
  --money-ink: #047857;

  /* tipografía */
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ritmo */
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --radius: 14px;
  --focus: var(--brand);
  --perf: rgba(15, 52, 96, 0.28);
  --perf-notch: var(--paper);
}

/* ------------------------------------------------------------------- reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--slate-700);
  font-family: var(--sans);
  font-variation-settings: "opsz" 14;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
p {
  margin: 0;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* app.js oculta con [hidden] los bloques de WhatsApp mientras no haya número;
   sin esto, display:inline-flex de .btn le ganaría al valor por defecto. */
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--indigo);
  color: var(--ink);
  font-weight: 700;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
}
.skip:focus {
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------------ layout */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow {
  max-width: 800px;
}
.center {
  text-align: center;
}

.sec {
  position: relative;
  padding-block: clamp(3.6rem, 8vw, 6.8rem);
}
.sec.sec-tight {
  padding-block-start: 0;
}
.sec-paper {
  background: var(--paper);
  color: var(--slate-700);
}
.sec-dark {
  background: var(--navy);
  color: var(--on-dark-dim);
  --focus: var(--indigo);
  --perf: rgba(233, 238, 251, 0.3);
}

/* ------------------------------------------------------- perforación (firma) */
.perf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 16px;
  pointer-events: none;
}
.perf.perf-top {
  bottom: auto;
  top: -1px;
}
.perf::before {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 50%;
  border-top: 2px dashed var(--perf);
}
.perf::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 8px at 0 50%, var(--perf-notch) 97%, transparent 98%),
    radial-gradient(circle 8px at 100% 50%, var(--perf-notch) 97%, transparent 98%);
}

/* ------------------------------------------------------------- tipografía */
.h1,
.h2,
.h3 {
  font-variation-settings: "opsz" 40;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
}
.sec-dark .h2 {
  color: #fff;
}
.h1 {
  font-size: clamp(2.35rem, 1.5rem + 3.6vw, 4.3rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: #fff;
  margin-block: 0.7rem 1.1rem;
  text-wrap: balance;
}
.h1 .hl {
  color: var(--indigo);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(129, 140, 248, 0.45);
  text-underline-offset: 0.16em;
}
.h2 {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  max-width: 22ch;
  text-wrap: balance;
}
.sec-contact .h2,
.center .h2 {
  margin-inline: auto;
}
.h3 {
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.sec-dark .eyebrow,
.hero .eyebrow {
  color: var(--indigo);
}

.lede,
.sec-lede {
  font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem);
  line-height: 1.6;
  max-width: 56ch;
}
.sec-lede {
  margin-block: 0.85rem 2.6rem;
  color: var(--slate-600);
}
.sec-dark .sec-lede {
  color: var(--on-dark-dim);
}
.center .sec-lede {
  margin-inline: auto;
}
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- botones */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 0.7rem 1.1rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    background-color 0.16s ease,
    border-color 0.16s ease;
}
.btn-lg {
  padding: 0.95rem 1.35rem;
  font-size: 1.02rem;
}
.btn-sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
}
.btn-primary {
  background: var(--indigo);
  color: var(--ink);
}
.btn-primary:hover {
  background: #9aa3fb;
  transform: translateY(-2px);
}
.btn-ghost {
  border-color: rgba(233, 238, 251, 0.28);
  color: var(--on-dark);
}
.btn-ghost:hover {
  border-color: var(--indigo);
  background: rgba(129, 140, 248, 0.1);
  transform: translateY(-2px);
}
.sec-paper .btn-ghost {
  border-color: var(--slate-300);
  color: var(--brand);
}
.sec-paper .btn-ghost:hover {
  border-color: var(--brand);
  background: rgba(15, 52, 96, 0.06);
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover {
    transform: none;
  }
}

.ico {
  width: 1.18em;
  height: 1.18em;
  flex: none;
  fill: none;
  stroke: currentColor;
  /* En unidades del viewBox de 24: el grosor de lucide, que escala con la caja. */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-xs {
  width: 0.9em;
  height: 0.9em;
}

/* ------------------------------------------------------------- cabecera */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(22, 33, 62, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(233, 238, 251, 0.1);
  --focus: var(--indigo);
}
.head-inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 62px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: #fff;
}
/* La marca: el ticket en papel con el rayo, en su versión para fondos navy
   (brand/README.md). Vectorial y sin fuente; la palabra va en HTML al lado. */
.brand-mark {
  width: 32px;
  height: 32px;
  flex: none;
  background: url("assets/logo/kakawflash-mark-white.svg") center / contain no-repeat;
}
.brand-mark.sm {
  width: 20px;
  height: 20px;
}
/* Logotipo: la marca más "Kakaw" en blanco y "Flash" en el acento. Una sola
   palabra en caja mixta, así que no lleva el tracking de las versales. */
.brand-text {
  font-size: 1.02rem;
  letter-spacing: 0.005em;
  font-weight: 500;
  color: var(--indigo);
}
.brand-text b {
  color: #fff;
  font-weight: 700;
}

.head-nav {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
  font-size: 0.92rem;
}
.head-nav a {
  color: var(--on-dark-dim);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}
.head-nav a:hover {
  color: #fff;
  border-bottom-color: var(--indigo);
}
.head-side {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.lang {
  display: inline-flex;
  border: 1px solid rgba(233, 238, 251, 0.22);
  border-radius: 9px;
  overflow: hidden;
}
.lang-btn {
  background: none;
  border: 0;
  padding: 0.35rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--on-dark-dim);
  cursor: pointer;
}
.lang-btn[aria-pressed="true"] {
  background: var(--indigo);
  color: var(--ink);
}
.lang-btn:hover[aria-pressed="false"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 900px) {
  .head-nav {
    display: none;
  }
  .head-side {
    margin-left: auto;
  }
}
@media (max-width: 420px) {
  .head-dl {
    display: none;
  }
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  background:
    radial-gradient(90ch 60ch at 12% -10%, rgba(15, 52, 96, 0.85), transparent 60%),
    linear-gradient(170deg, var(--navy) 0%, var(--ink) 100%);
  color: var(--on-dark-dim);
  padding-block: clamp(3rem, 7vw, 5.6rem) clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
  --focus: var(--indigo);
}
.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 1000px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.hero-copy {
  max-width: 40rem;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;
}
.cta-center {
  justify-content: center;
}
.dl-meta {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--indigo);
  margin-top: 0.85rem;
  min-height: 1.4em;
}
.dl-meta .sep {
  color: rgba(233, 238, 251, 0.35);
  padding-inline: 0.35rem;
}
/* Prueba gratis, justo debajo del botón: es una promesa corta, no letra chica.
   app.js la oculta entera si config.js apaga la prueba. */
.trial-note {
  font-size: 0.9rem;
  color: var(--on-dark);
  margin-top: 0.55rem;
  max-width: 46ch;
}
.req {
  font-size: 0.85rem;
  color: var(--on-dark-dim);
  margin-top: 0.55rem;
}
.license-note {
  font-size: 0.85rem;
  color: rgba(169, 182, 208, 0.8);
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(233, 238, 251, 0.12);
  max-width: 44ch;
}

/* --------------------------------------------------------- maqueta del POS */
.mock-stack {
  position: relative;
  /* El hueco de abajo es donde cae el ticket: sin él taparía el TOTAL. */
  padding-bottom: clamp(5rem, 14vw, 11rem);
}
.mock-shot {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.mock-win {
  background: #0e1428;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.mock-bar {
  height: 27px;
  background: #0a0f20;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.17);
}
.mock-body {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  min-height: 300px;
}
.mock-side {
  background: #1a1a2e;
  padding: 10px 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.mock-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 12px;
}
.mock-brand b {
  display: block;
  color: #fff;
  font-size: 0.56rem;
  letter-spacing: 0.09em;
}
.mock-brand i {
  display: block;
  color: #7183ad;
  font-size: 0.47rem;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mock-nav li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 0.6rem;
  color: #94a3c4;
}
.mock-nav li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 1.5px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}
.mock-nav li.is-active {
  background: var(--brand);
  color: #fff;
}
.mock-main {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mock-search {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 0.62rem;
  color: #6d7ea6;
  background: rgba(255, 255, 255, 0.03);
}
.mock-cart {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  padding: 11px 12px;
  flex: 1;
}
.mock-cart-title {
  font-size: 0.55rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #7183ad;
  margin-bottom: 8px;
}
.mock-items li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: baseline;
  padding-block: 4px;
  font-size: 0.63rem;
  color: #c3cde4;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mock-items .q,
.mock-items .a {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.mock-items .q {
  color: var(--indigo);
}
.mock-items .n {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mock-sum,
.mock-total {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.mock-sum {
  font-size: 0.6rem;
  color: #7183ad;
  padding-top: 8px;
}
.mock-total {
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  padding-block: 4px 10px;
  letter-spacing: -0.01em;
}
.mock-pay {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.mock-pay span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 6px 2px;
  font-size: 0.55rem;
  color: #c3cde4;
}
.mock-pay span:first-child {
  background: rgba(16, 185, 129, 0.13);
  border-color: rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}
.mock-pay b {
  font-weight: 500;
}
.mock-pay kbd {
  font-family: var(--mono);
  font-size: 0.48rem;
  color: #6d7ea6;
}

/* ----------------------------------------------------- ticket (elemento firma) */
.receipt {
  position: absolute;
  right: clamp(-22px, -1.6vw, 0px);
  bottom: 0;
  width: min(212px, 46%);
  margin: 0;
  padding: 13px 13px 18px;
  background: var(--ticket);
  color: #1a1a2e;
  font-family: var(--mono);
  font-size: 0.58rem;
  line-height: 1.55;
  transform: rotate(-3.2deg);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5);
}
.receipt::after {
  /* borde dentado, como cuando se corta el papel térmico.
     El color del SVG debe coincidir con --ticket (#fffcf4). */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M0 0h16L8 10z' fill='%23fffcf4'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 16px 10px;
}
.r-biz {
  text-align: center;
  font-weight: 700;
  font-size: 0.63rem;
  letter-spacing: 0.02em;
}
.r-nit {
  text-align: center;
  color: var(--slate-500);
  font-size: 0.53rem;
}
.r-rule {
  border-top: 1px solid var(--slate-300);
  margin-block: 7px;
}
.r-lines li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 4px;
  color: var(--slate-700);
}
.r-lines .n {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.r-lines .a,
.r-row span:last-child,
.r-total span:last-child {
  font-variant-numeric: tabular-nums;
}
.r-total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.68rem;
}
.r-row {
  display: flex;
  justify-content: space-between;
  color: var(--slate-500);
}
.r-change {
  color: var(--money-ink);
}
.r-thanks {
  text-align: center;
  color: var(--slate-500);
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px dashed var(--slate-300);
}
.r-barcode {
  height: 22px;
  margin: 9px 10px 0;
  background: repeating-linear-gradient(
    90deg,
    #1a1a2e 0 2px,
    transparent 2px 4px,
    #1a1a2e 4px 5px,
    transparent 5px 9px,
    #1a1a2e 9px 12px,
    transparent 12px 14px
  );
}

@media (max-width: 480px) {
  /* En pantallas angostas el ticket cae más abajo para no tapar el TOTAL,
     y la barra lateral se aprieta para que "Punto de Venta" quepa en una línea. */
  .mock-stack {
    padding-bottom: 10.5rem;
  }
  .mock-body {
    grid-template-columns: 104px minmax(0, 1fr);
    min-height: 260px;
  }
  .mock-nav li {
    font-size: 0.55rem;
    padding: 4px 6px;
  }
  .mock-brand b {
    font-size: 0.5rem;
    white-space: nowrap;
  }
  .mock-brand i {
    display: none;
  }
  .receipt {
    right: -16px;
    width: min(168px, 50%);
    font-size: 0.52rem;
  }
}

/* -------------------------------------------------------------- audiencia */
.shops {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) {
  .shops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .shops {
    grid-template-columns: minmax(0, 1fr);
  }
}
.shops li {
  background: var(--card);
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  padding: 0.85rem 1rem 0.85rem 1.35rem;
  position: relative;
}
/* Marcador de "ítem de ticket": el mismo punto que separa cantidad y precio
   en el recibo del hero, en lugar de una franja lateral de color. */
.shops li::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 1.2rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.shops b {
  display: block;
  color: var(--slate-900);
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}
.shops span {
  font-size: 0.85rem;
  color: var(--slate-500);
}
.made-in {
  margin-top: 2.2rem;
  font-size: 0.92rem;
  color: var(--slate-600);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  align-items: baseline;
}
.countries {
  padding-left: 1.6rem;
  border-left: 1px solid var(--slate-200);
}
@media (max-width: 520px) {
  .countries {
    padding-left: 0;
    border-left: 0;
  }
}
/* Origen del nombre. Nota al pie de la sección: se lee si interesa y no
   compite con el mensaje comercial. */
.brand-story {
  margin-top: 1rem;
  max-width: 66ch;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--slate-600);
}

.countries b {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-right: 0.4rem;
}

/* ---------------------------------------------------------------- tarjetas */
.cards {
  display: grid;
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.cards li {
  background: var(--card);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1.35rem 1.3rem 1.5rem;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.cards li:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(15, 52, 96, 0.09);
}
.cards .card-ico {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(15, 52, 96, 0.08);
  color: var(--brand);
  margin-bottom: 0.9rem;
}
.cards .card-ico .ico {
  width: 19px;
  height: 19px;
}
.cards h3 {
  margin: 0 0 0.35rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--slate-900);
}
.cards p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--slate-600);
}
.cards-dark li {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(233, 238, 251, 0.11);
}
.cards-dark li:hover {
  border-color: var(--indigo);
  box-shadow: none;
}
.cards-dark .card-ico {
  background: rgba(129, 140, 248, 0.14);
  color: var(--indigo);
}
.cards-dark h3 {
  color: #fff;
}
.cards-dark p {
  color: var(--on-dark-dim);
}

/* -------------------------------------------------------------- seguridad */
.sec-split {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 1000px) {
  .sec-split {
    grid-template-columns: minmax(0, 1fr);
  }
}
.sec-split .cards {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.chain {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(233, 238, 251, 0.11);
  border-radius: var(--radius);
  padding: 1.3rem;
}
.chain-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 1rem;
}
.chain-list li {
  position: relative;
  padding-left: 1.4rem;
  padding-block: 0.5rem;
  font-family: var(--mono);
  font-size: 0.74rem;
}
.chain-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.05rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--indigo);
}
.chain-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 1.7rem;
  bottom: -0.35rem;
  border-left: 1px dashed rgba(129, 140, 248, 0.55);
}
.chain-list .act {
  display: block;
  color: var(--on-dark);
}
.chain-list .hash {
  color: var(--money);
  font-size: 0.7rem;
}
.chain-note {
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--on-dark-dim);
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(233, 238, 251, 0.16);
}
.sec-foot {
  margin-top: 2.2rem;
}
.link-out {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--indigo);
  font-weight: 500;
  font-size: 0.92rem;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ pasos */
.steps {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2.6rem;
  counter-reset: step;
}
@media (max-width: 700px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}
.steps li {
  counter-increment: step;
  padding-top: 1.2rem;
  border-top: 2px solid var(--slate-200);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand);
  margin-bottom: 0.7rem;
}
.steps h3 {
  margin: 0 0 0.4rem;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--slate-900);
}
.steps p {
  font-size: 0.92rem;
  color: var(--slate-600);
}

/* Enlaces al manual publicado, debajo de los tres pasos. */
.steps-docs {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  font-size: 0.94rem;
  color: var(--slate-600);
}
.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--slate-300);
  border-radius: 999px;
  background: var(--card);
  color: var(--brand);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
}
.doc-chip:hover {
  border-color: var(--brand);
  background: rgba(15, 52, 96, 0.06);
}

/* ----------------------------------------------------- planes por perfil */
/* Esencial, Emprendedor y Empresarial (ADR-0008). Lo que se vende hoy es una
   tarjeta de papel con borde de marca; lo que está en preparación va como
   «Lo que viene»: borde punteado, sin fondo y con un sello de goma. Lo que
   todavía no existe no puede verse igual que lo que sí. */
.tiers {
  display: grid;
  gap: clamp(0.9rem, 1.8vw, 1.3rem);
  /* Esencial lleva la ficha más larga: un poco más de ancho empareja alturas. */
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
}
/* En tablet, el plan que se vende hoy ocupa todo el ancho y los dos que
   vienen quedan lado a lado debajo. */
@media (max-width: 1000px) {
  .tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tier.is-available {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .tiers {
    grid-template-columns: minmax(0, 1fr);
  }
}
.tier {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  border-radius: var(--radius);
  padding: clamp(1.3rem, 2.4vw, 1.7rem) clamp(1.2rem, 2.2vw, 1.5rem);
}
.tier.is-available {
  background: var(--card);
  border: 1px solid var(--brand);
  box-shadow: 0 0 0 3px rgba(15, 52, 96, 0.09);
}
.tier.is-preparing {
  border: 1px dashed var(--slate-300);
}
.tier-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}
.tier h3 {
  margin: 0;
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--slate-900);
}
.tier-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tier-status .ico {
  width: 0.95rem;
  height: 0.95rem;
  stroke-width: 2.4;
}
.is-available .tier-status {
  background: rgba(4, 120, 87, 0.1);
  color: var(--money-ink);
}
/* El sello: doble filete de tinta, apenas torcido, como el que se pone a mano
   sobre un papel en el mostrador. Es quieto: no se anima. */
.is-preparing .tier-status {
  padding: 0.4rem 0.7rem;
  border: 2px solid currentColor;
  box-shadow:
    inset 0 0 0 2px var(--paper),
    inset 0 0 0 3px currentColor;
  color: var(--brand);
  transform: rotate(-3deg);
}
.tier-pitch {
  font-size: 0.93rem;
  line-height: 1.62;
  color: var(--slate-600);
}
.tier-pitch strong {
  font-weight: 700;
  color: var(--slate-900);
}
/* Requisito de Empresarial (ADR-0008 §5.2): va a la vista, no en letra chica. */
.tier-req {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  padding: 0.85rem 0.95rem;
  border-radius: 10px;
  background: var(--paper-2);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--slate-700);
}
.tier-req .ico {
  margin-top: 0.12rem;
  color: var(--brand);
}
.tier-pending {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--slate-300);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--slate-600);
}
.tier-pending .ico {
  margin-top: 0.22rem;
  color: var(--brand);
}
.tier .btn {
  margin-top: auto;
  justify-content: center;
}

/* Tabla de funciones por plan. */
.compare {
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
}
.compare-title {
  margin-bottom: 1rem;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  letter-spacing: -0.02em;
}
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 0.9rem;
}
.compare-table th,
.compare-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--slate-200);
  text-align: left;
  vertical-align: top;
}
.compare-table thead th {
  vertical-align: bottom;
  background: var(--paper-2);
}
.compare-table thead th:first-child {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-600);
}
.cmp-plan {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--slate-900);
}
.cmp-plan-status {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* slate-500 no llega a AA sobre paper-2 en este tamaño. */
  color: var(--slate-600);
}
.compare-table thead th.is-available .cmp-plan-status {
  color: var(--money-ink);
}
.compare-table tbody th[scope="row"] {
  width: 40%;
  font-weight: 500;
  line-height: 1.5;
  color: var(--slate-700);
}
.compare-table .cmp-group th {
  padding-block: 0.55rem;
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.compare-table tbody:last-child tr:last-child > * {
  border-bottom: 0;
}
.cmp-chip {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-weight: 500;
  line-height: 1.35;
}
.cmp-chip .ico {
  margin-top: 0.12rem;
  stroke-width: 2.4;
}
.is-available .cmp-chip {
  color: var(--money-ink);
}
.is-preparing .cmp-chip {
  color: var(--brand);
}
.is-no .cmp-chip,
.is-na .cmp-chip {
  color: var(--slate-500);
  font-weight: 400;
}
.cmp-note {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--slate-600);
}
.compare-legend {
  margin-top: 0.9rem;
  max-width: 75ch;
  font-size: 0.85rem;
  color: var(--slate-500);
}
/* En pantallas chicas cada fila es una tarjeta: el nombre de la función
   arriba y los tres planes en columnas, cada uno con su nombre encima. Los
   encabezados de columna siguen ahí para los lectores de pantalla. */
@media (max-width: 820px) {
  .compare-table {
    display: block;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td {
    display: block;
  }
  .compare-table tbody + tbody {
    margin-top: 1.4rem;
  }
  .compare-table .cmp-group th {
    padding: 0 0 0.55rem;
    border: 0;
    background: none;
  }
  .compare-table tbody tr:not(.cmp-group) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.6rem;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    background: var(--card);
  }
  .compare-table tbody th[scope="row"] {
    grid-column: 1 / -1;
    width: auto;
    padding: 0 0 0.35rem;
    border: 0;
    color: var(--slate-900);
  }
  .compare-table td {
    padding: 0;
    border: 0;
  }
  .compare-table td::before {
    content: attr(data-plan);
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate-500);
  }
  .cmp-chip {
    font-size: 0.82rem;
  }
}
@media (max-width: 380px) {
  .compare-table tbody tr:not(.cmp-group) {
    gap: 0.5rem;
    padding-inline: 0.8rem;
  }
}

/* Partes de «Planes» que siguen a la tabla: cada cuánto se paga Esencial y lo
   que viene. Se separan con la misma perforación punteada de la página. */
.sub-block {
  margin-top: clamp(3rem, 6vw, 4.2rem);
  padding-top: clamp(1.8rem, 3.5vw, 2.4rem);
  border-top: 2px dashed var(--slate-200);
}
.sub-title {
  max-width: 34ch;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.sub-lede {
  margin-block: 0.6rem 1.8rem;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--slate-600);
}
#lo-que-viene .roadmap {
  margin-top: 1.4rem;
}

/* ----------------------------------------------------------------- planes */
/* Cupón de la prueba gratis. Se lee como el talón de un ticket: muescas a los
   lados y el botón separado del texto. Su CTA no descarga nada por su cuenta,
   sube al botón de descarga del hero. */
.trial-card {
  --notch: 13px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.1rem, 3vw, 2.4rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, var(--card) 0%, rgba(15, 52, 96, 0.05) 100%);
  box-shadow: 0 0 0 3px rgba(15, 52, 96, 0.07);
}
/* Las dos medias lunas recortadas del borde: el papel de la sección entra en
   la tarjeta, como la muesca de un cupón. */
.trial-card::before,
.trial-card::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--notch);
  height: calc(var(--notch) * 2);
  background: var(--paper);
  border: 1px solid var(--brand);
  transform: translateY(-50%);
}
.trial-card::before {
  left: -1px;
  border-left-color: transparent;
  border-radius: 0 999px 999px 0;
}
.trial-card::after {
  right: -1px;
  border-right-color: transparent;
  border-radius: 999px 0 0 999px;
}
.trial-card .eyebrow {
  color: var(--brand);
}
.trial-card .h3 {
  margin: 0.15rem 0 0.55rem;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
  color: var(--slate-900);
}
.trial-copy p {
  font-size: 0.95rem;
  color: var(--slate-600);
  max-width: 62ch;
}
.trial-ending {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--slate-300);
  font-size: 0.88rem;
}
.trial-cta {
  justify-content: center;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .trial-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .trial-cta {
    justify-self: start;
  }
}
@media (max-width: 480px) {
  .trial-card::before,
  .trial-card::after {
    display: none;
  }
  .trial-cta {
    width: 100%;
  }
}

.plans {
  display: grid;
  gap: clamp(0.9rem, 1.8vw, 1.3rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Cuatro planes no caben en una tablet: dos y dos antes de la columna única. */
@media (max-width: 1080px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
}
.plans li {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
}
.plans li.is-featured {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15, 52, 96, 0.09);
}
.plan-badge {
  position: absolute;
  top: -0.7rem;
  left: 1.4rem;
  background: var(--brand);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 5px;
}
.plans h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--slate-900);
}
.plan-tag {
  font-size: 0.87rem;
  color: var(--slate-500);
  margin-top: 0.15rem;
}
.plan-price {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--slate-900);
  margin-block: 1.1rem 0.1rem;
  line-height: 1.1;
}
/* "Consultá precios" no es una cifra: tipografía de texto, tamaño de subtítulo
   y color de marca, para que el ojo no lo lea como un monto. */
.plan-price.is-ask {
  font-family: var(--sans);
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  color: var(--brand);
}
.plan-price .unit {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--slate-500);
  margin-left: 0.3rem;
}
.plan-includes {
  margin-block: 1.2rem 1.5rem;
  display: grid;
  gap: 0.5rem;
}
.plan-includes li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.9rem;
  color: var(--slate-600);
}
.plan-includes .ico {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--money-ink);
  margin-top: 0.22rem;
  stroke-width: 2.4;
}
.plans .btn {
  margin-top: auto;
  justify-content: center;
}
.plans-note {
  margin-top: 1.5rem;
  font-size: 0.87rem;
  color: var(--slate-500);
}
.addons-title {
  margin-top: 3.2rem;
  margin-bottom: 1rem;
  padding-top: 1.6rem;
  border-top: 2px dashed var(--slate-200);
}
.addons {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.addons li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: baseline;
  background: var(--paper-2);
  border-radius: 11px;
  padding: 1.05rem 1.2rem;
}
.addons b {
  font-size: 0.98rem;
  color: var(--slate-900);
  letter-spacing: -0.01em;
}
.addons .addon-price {
  margin-left: auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--brand);
  white-space: nowrap;
}
.addons .addon-price.is-ask {
  font-family: var(--sans);
  font-weight: 700;
}
.addons p {
  flex: 1 1 100%;
  font-size: 0.87rem;
  color: var(--slate-600);
}
/* Enlace a las condiciones de la nube, debajo de los complementos. */
.addons-legal {
  margin-top: 1rem;
}
/* El índigo del enlace nació para el fondo oscuro; sobre papel no llega al
   contraste AA, así que en las secciones claras va en azul de marca. */
.sec-paper .link-out {
  color: var(--brand);
}

/* ------------------------------------------------------------ lo que viene */
/* Deliberadamente más callado que las tarjetas de funciones: borde punteado y
   sin fondo. Lo que todavía no existe no puede verse igual que lo que sí. */
.roadmap {
  display: grid;
  gap: clamp(0.8rem, 1.6vw, 1.1rem);
  /* auto-fill: con una sola tarjeta no se estira a todo el ancho. */
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.roadmap li {
  padding: 1.35rem 1.4rem;
  border: 1px dashed var(--slate-300);
  border-radius: var(--radius);
}
.road-status {
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--slate-300);
  border-radius: 999px;
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-600);
}
.roadmap h4 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--slate-900);
}
.roadmap p {
  font-size: 0.92rem;
  color: var(--slate-600);
}
.roadmap-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
  margin-top: 1.8rem;
  font-size: 0.94rem;
  color: var(--slate-600);
}

/* -------------------------------------------------------------------- faq */
.faq {
  margin-top: 2.2rem;
  /* El bloque se alinea con el resto de la página, pero las preguntas no
     pasan de un ancho cómodo de lectura. */
  max-width: 840px;
  border-top: 1px solid var(--slate-200);
}
.faq details {
  border-bottom: 1px solid var(--slate-200);
}
.faq summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  color: var(--slate-900);
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  margin-left: auto;
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.faq summary:hover {
  color: var(--brand);
}
.faq .answer {
  padding-bottom: 1.2rem;
  max-width: 68ch;
  font-size: 0.94rem;
  color: var(--slate-600);
}
@media (prefers-reduced-motion: reduce) {
  .faq summary::after {
    transition: none;
  }
}

/* --------------------------------------------------------------- contacto */
.sec-contact {
  background:
    radial-gradient(70ch 50ch at 50% 0%, rgba(15, 52, 96, 0.8), transparent 65%),
    linear-gradient(180deg, var(--navy) 0%, var(--ink) 100%);
}
.contact-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 3rem;
  margin: 2.6rem 0 0;
}
.contact-list dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}
.contact-list dd {
  margin: 0.2rem 0 0;
  font-size: 1rem;
  color: #fff;
}
.placeholder-warn {
  margin-top: 1.8rem;
  display: inline-block;
  font-size: 0.8rem;
  font-family: var(--mono);
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.12);
  border: 1px dashed rgba(252, 211, 77, 0.45);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
}

/* ------------------------------------------------------------------ footer */
.site-foot {
  background: var(--ink);
  color: var(--on-dark-dim);
  padding-block: clamp(2.6rem, 5vw, 3.6rem) 1.8rem;
  font-size: 0.9rem;
  --focus: var(--indigo);
}
.foot-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}
.foot-tag {
  margin-top: 0.8rem;
  max-width: 30ch;
  color: var(--on-dark-dim);
}
.foot-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.foot-h {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #6d7ea6;
  margin-bottom: 0.2rem;
}
.foot-col a {
  color: var(--on-dark-dim);
  text-decoration: none;
}
.foot-col a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.foot-legal {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px dashed rgba(233, 238, 251, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  font-size: 0.82rem;
  color: #7183ad;
}
.foot-tm {
  color: #5d6c92;
}

.noscript {
  background: #fde68a;
  color: #422006;
  padding: 1rem var(--gutter);
  text-align: center;
  font-size: 0.92rem;
}

/* ------------------------------------------------------------ animaciones */
/* Estado de reposo visible: la sección ya se lee aunque el observer no dispare
   (miniaturas, lectores que saltan, JS lento); solo se refina al entrar. */
[data-reveal] {
  opacity: 0.6;
  transform: translateY(12px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.hero-copy > * {
  animation: rise 0.65s cubic-bezier(0.22, 0.68, 0.3, 1) backwards;
}
.hero-copy > *:nth-child(1) {
  animation-delay: 0.05s;
}
.hero-copy > *:nth-child(2) {
  animation-delay: 0.12s;
}
.hero-copy > *:nth-child(3) {
  animation-delay: 0.19s;
}
.hero-copy > *:nth-child(4) {
  animation-delay: 0.26s;
}
.hero-copy > *:nth-child(n + 5) {
  animation-delay: 0.33s;
}
.mock-stack {
  animation: rise 0.8s cubic-bezier(0.22, 0.68, 0.3, 1) 0.2s backwards;
}
@keyframes rise {
  from {
    opacity: 0.35;
    transform: translateY(14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .hero-copy > *,
  .mock-stack {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  .cards li:hover {
    transform: none;
  }
}