/* =============================================================================
   pium! — base del sitio público
   Tokens derivados de pium-app-react-native/docs/design/pium-design-tokens.json
   (primario #00C1FF, acento #B66DFF, superficie de lanzamiento #020611).

   Reglas de la casa:
   · Ningún hex suelto fuera de :root.
   · Ningún tamaño de texto fuera de la escala --fs-*.
   · Ningún espaciado fuera de la escala --sp-*.
   · Ningún emoji como ícono: se usa el set de <symbol> de assets/img sprite.
   ============================================================================= */

/* ---------- Fuente: Poppins auto-hospedada (latin + latin-ext) -------------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/woff2/poppins-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/woff2/poppins-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/woff2/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/woff2/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/woff2/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/woff2/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/woff2/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/woff2/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/woff2/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/woff2/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------------------------------------------------------- */
:root {
  /* Marca */
  --primary: #00c1ff;
  --primary-600: #00a4d9;
  --primary-700: #0089b5;
  --accent: #b66dff;
  --accent-600: #9a4ae0;
  --success: #35d07f;
  --ink-on-brand: #041018;   /* texto sobre degradé o primario */

  /* Superficies — del más profundo al más elevado */
  --bg-0: #020611;
  --bg-1: #060c1a;
  --bg-2: #0b1322;
  --surface: rgba(255, 255, 255, 0.032);
  --surface-2: rgba(255, 255, 255, 0.055);
  --line: rgba(146, 172, 224, 0.14);
  --line-2: rgba(146, 172, 224, 0.26);

  /* Texto — colores sólidos, más previsibles sobre los degradés del fondo */
  --text-0: #ffffff;
  --text-1: #dde3f2;
  --text-2: #98a3bc;
  --text-3: #74809a;

  /* Degradés */
  --grad: linear-gradient(135deg, #00c1ff 0%, #b66dff 100%);
  --grad-r: linear-gradient(135deg, #b66dff 0%, #00c1ff 100%);
  --grad-soft: linear-gradient(135deg, rgba(0, 193, 255, 0.14), rgba(182, 109, 255, 0.14));

  /* Escala tipográfica — nada fuera de acá */
  --font: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fs-display: clamp(2.25rem, 1.15rem + 4.4vw, 3.75rem);  /* 36 → 60 */
  --fs-h1:      clamp(1.875rem, 1.2rem + 2.7vw, 2.875rem); /* 30 → 46 */
  --fs-h2:      clamp(1.75rem, 1.15rem + 2.5vw, 2.875rem); /* 28 → 46 */
  --fs-h3:      1.375rem;     /* 22 */
  --fs-h4:      1.125rem;     /* 18 */
  --fs-lead:    clamp(1rem, 0.94rem + 0.34vw, 1.1875rem);  /* 16 → 19 */
  --fs-body:    0.9375rem;    /* 15 */
  --fs-sm:      0.875rem;     /* 14 */
  --fs-xs:      0.8125rem;    /* 13 */
  --fs-caption: 0.6875rem;    /* 11 */

  --lh-tight: 1.06;
  --lh-snug: 1.3;
  --lh-body: 1.62;
  --ls-display: -0.035em;
  --ls-caption: 0.16em;

  /* Escala de espaciado */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-14: 56px; --sp-18: 72px; --sp-24: 96px;

  /* Radios */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Esquina plegada: la firma geométrica, un solo valor para todo el sitio */
  --fold: 22%;

  /* Sombras */
  --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --sh-md: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --sh-lg: 0 28px 64px -24px rgba(0, 0, 0, 0.8);
  --sh-glow: 0 12px 34px -10px rgba(0, 193, 255, 0.4);

  --maxw: 1180px;
  --gutter: 20px;
  --ease: cubic-bezier(0.22, 0.9, 0.32, 1);
}

/* ---------- Reset y raíz ----------------------------------------------------
   El scroll fantasma en iOS venía de `overflow-x:hidden` sobre <body>: Safari
   convierte al body en contenedor de scroll y los `position:fixed` pasan a
   medirse contra la altura total del documento. Se recorta en <html> con
   `clip` (que no crea contenedor de scroll) y se desactiva el rebote.
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg-0);
  scroll-behavior: smooth;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}
@supports (overflow: clip) { html { overflow-x: clip; } }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  background: var(--bg-0);
  color: var(--text-2);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
  min-height: 100svh;
}

h1, h2, h3, h4 { color: var(--text-0); font-weight: 700; line-height: var(--lh-snug); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
strong, b { color: var(--text-1); font-weight: 600; }

::selection { background: var(--primary); color: var(--ink-on-brand); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: #1b2436; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-700); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* El enlace de salto tiene que hacerse visible al recibir foco; si no, el
   primer Tab dibuja el anillo sobre una caja de 1×1 px. */
.sr-only:focus, .sr-only:focus-visible {
  position: fixed; top: 10px; left: 10px; width: auto; height: auto;
  margin: 0; clip: auto; clip-path: none; overflow: visible;
  padding: 10px 18px; border-radius: var(--r-xs);
  background: var(--bg-2); color: var(--text-0);
  border: 1px solid var(--primary); z-index: 200;
}
main:focus { outline: none; }

/* Esquina plegada reutilizable — la misma proporción en todo el sitio */
.fold {
  clip-path: polygon(
    var(--fold) 0, 100% 0,
    100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%,
    0 100%, 0 var(--fold));
}

/* Corte de línea decidido a mano, sólo cuando hay ancho para respetarlo */
.br-desk { display: none; }
@media (min-width: 760px) { .br-desk { display: inline; } }

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

/* ---------- Wordmark en línea ------------------------------------------------
   «pium!» dentro de un texto se dibuja con el logotipo real, recortado como
   máscara para que herede el color y el tamaño de la tipografía que lo rodea.
   Uso: <span class="wm" role="img" aria-label="pium!"></span>
   --------------------------------------------------------------------------- */
/* El span lleva el texto «pium!» de verdad: eso es lo que leen los lectores de
   pantalla, lo que se copia y lo que se ve si el navegador no soporta máscaras.
   Cuando sí las soporta, el texto se saca del recuadro y en su lugar se pinta
   el logotipo recortado como máscara, heredando color y tamaño. */
.wm { display: inline-block; font-weight: 700; }

@supports ((-webkit-mask-image: url('../images/logo-wordmark.png')) or (mask-image: url('../images/logo-wordmark.png'))) {
  .wm {
    /* logo-wordmark.png mide 750×273 y viene recortado al glifo. Midiendo el
       canal alfa: la línea de base cae al 80,6 % de la altura y el descendente
       de la «p» ocupa el 19,4 % restante. De ahí salen estos tres números —
       con ellos la altura de x del logo coincide con la del texto que lo rodea. */
    width: 2.75em;
    height: 1em;
    vertical-align: -0.205em;
    margin-inline-end: -0.05em;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -100em;
    background-color: currentColor;
    -webkit-mask: url('../images/logo-wordmark.png') left center / contain no-repeat;
    mask: url('../images/logo-wordmark.png') left center / contain no-repeat;
  }
  /* Variante en degradé para títulos */
  .wm-grad {
    background-color: transparent;
    background-image: var(--grad);
    background-size: 100% 100%;
  }
  /* En modo de colores forzados el degradé se descarta y el logo desaparecería */
  @media (forced-colors: active) {
    .wm, .wm-grad { background-color: currentColor; background-image: none; }
  }
}
/* `inline-block` abre una oportunidad de corte de línea, así que un signo de
   puntuación pegado al logo puede caer solo en el renglón siguiente. Envolver
   el logo y su puntuación en .nw lo evita. */
.nw { white-space: nowrap; }

/* ---------- Íconos ---------------------------------------------------------- */
.ico {
  width: 24px; height: 24px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.ico-fill { fill: currentColor; stroke: none; }

/* ---------- Fondo decorativo ------------------------------------------------ */
.bg-fx {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  contain: strict;
}
.bg-fx::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 45%, transparent 0%, rgba(2, 6, 17, 0.42) 100%);
}
.orb { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.18; animation: float 22s ease-in-out infinite; }
.orb-1 { width: 520px; height: 520px; background: var(--primary); top: -12%; left: -12%; }
.orb-2 { width: 620px; height: 620px; background: var(--accent); top: 30%; right: -28%; animation-delay: -8s; opacity: 0.1; }
.orb-3 { width: 420px; height: 420px; background: var(--primary-600); bottom: -18%; left: 28%; animation-delay: -14s; opacity: 0.12; }
@media (max-width: 720px) { .orb { opacity: 0.12; } .orb-2 { opacity: 0.1; } }
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(60px, -40px) scale(1.08); }
  66%      { transform: translate(-40px, 50px) scale(0.95); }
}

/* Trama de facetas: eco del plegado del logo, casi imperceptible */
.bg-facets {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(135deg, rgba(146, 172, 224, 0.07) 1px, transparent 1px),
    linear-gradient(45deg, rgba(146, 172, 224, 0.05) 1px, transparent 1px);
  background-size: 92px 92px, 92px 92px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
}

/* ---------- Layout ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
}
section { padding: var(--sp-24) 0; position: relative; z-index: 2; }
@media (max-width: 720px) { section { padding: var(--sp-18) 0; } }

/* ---------- Navegación ------------------------------------------------------ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: var(--sp-3) 0;
  padding-top: max(var(--sp-3), env(safe-area-inset-top));
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), backdrop-filter 0.3s, border-color 0.3s;
}
.nav.scrolled {
  background: rgba(2, 6, 17, 0.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.scrolled { background: var(--bg-0); }
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  box-shadow: 0 4px 18px rgba(0, 193, 255, 0.3);
  transition: transform 0.35s var(--ease);
}
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.brand-wordmark { height: 22px; width: auto; }
@media (max-width: 400px) { .brand-wordmark { height: 20px; } .brand-mark { width: 34px; height: 34px; } }

.nav-links { display: flex; gap: var(--sp-8); list-style: none; }
.nav-links a {
  color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  position: relative; transition: color 0.2s; padding: var(--sp-1) 0;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 2px; background: var(--grad); transition: width 0.3s var(--ease);
}
.nav-links a:hover { color: var(--text-0); }
.nav-links a:hover::after { width: 100%; }

.nav-cta { display: flex; align-items: center; gap: var(--sp-3); }
.menu-toggle {
  display: none; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-xs); width: 44px; height: 44px; color: var(--text-1); cursor: pointer;
}
.menu-toggle .ico { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; }
  .nav-cta .btn-primary { display: none; }
  .nav-links.open {
    display: flex; position: absolute; top: 100%; left: var(--gutter); right: var(--gutter);
    flex-direction: column; gap: 0;
    background: rgba(6, 12, 26, 0.97);
    backdrop-filter: blur(20px);
    border: 1px solid var(--line); border-radius: var(--r-md);
    padding: var(--sp-2); margin-top: var(--sp-2);
    box-shadow: var(--sh-lg);
  }
  .nav-links.open a { padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--line); }
  .nav-links.open a:last-child { border-bottom: none; }
}

/* ---------- Botones --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 12px var(--sp-6); border-radius: 999px;
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none; border: none; cursor: pointer; min-height: 44px;
  transition: transform 0.25s var(--ease), box-shadow 0.3s, background 0.3s, border-color 0.3s;
  white-space: nowrap;
}
.btn-primary { background: var(--grad); color: var(--ink-on-brand); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--sh-glow); }
.btn-ghost { background: var(--surface); color: var(--text-0); border: 1px solid var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--primary); transform: translateY(-2px); }

/* Botones de tiendas */
.store-btns { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.store-btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-5); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-0); text-decoration: none;
  border: 1px solid var(--line-2); min-height: 56px;
  transition: transform 0.25s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.store-btn:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--sh-glow); }
.store-btn svg { width: 25px; height: 25px; flex-shrink: 0; }
.store-btn .small, .store-btn .big { display: block; }
.store-btn .small { font-size: var(--fs-caption); color: var(--text-3); line-height: 1.35; letter-spacing: var(--ls-caption); text-transform: uppercase; }
.store-btn .big { font-size: var(--fs-h4); font-weight: 600; line-height: 1.2; }
.store-btn[aria-disabled='true'] { opacity: 0.6; cursor: default; }
.store-btn[aria-disabled='true']:hover { transform: none; border-color: var(--line-2); box-shadow: none; }
.store-btn .soon {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-caption); text-transform: uppercase; font-style: normal;
  color: var(--primary); background: rgba(0, 193, 255, 0.11);
  border: 1px solid rgba(0, 193, 255, 0.28); border-radius: 999px;
  padding: 1px 6px; margin-left: var(--sp-1); vertical-align: 1px;
}

/* ---------- Encabezados de sección ------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: var(--ls-caption); text-transform: uppercase; color: var(--primary);
  margin-bottom: var(--sp-4); padding: 6px 14px 6px 10px; border-radius: 999px;
  background: rgba(0, 193, 255, 0.07); border: 1px solid rgba(0, 193, 255, 0.2);
}
.eyebrow .ico { width: 14px; height: 14px; stroke-width: 1.9; }
/* En pantallas angostas el tracking amplio hace que etiquetas de dos palabras
   se partan en dos renglones dentro de la píldora. */
@media (max-width: 600px) {
  .eyebrow { letter-spacing: 0.09em; padding: 6px 12px 6px 9px; }
}

.section-title {
  font-size: var(--fs-h2); line-height: var(--lh-tight);
  letter-spacing: var(--ls-display); margin-bottom: var(--sp-4);
  max-width: 18ch; text-wrap: balance;
}
.section-title.wide { max-width: 24ch; }
.section-sub { font-size: var(--fs-lead); color: var(--text-2); max-width: 58ch; margin-bottom: var(--sp-12); }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* El degradé se reserva para el H1 del hero, el botón primario, la tarjeta de
   cashback y el logotipo. En los títulos de sección la palabra acentuada va en
   primario sólido: si el degradé está en todos lados deja de significar algo. */
.section-title .grad {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--primary);
}

/* ---------- Revelado al hacer scroll ----------------------------------------
   Se esconde sólo si el JS arrancó (la clase `js` la pone un script en el
   <head>). Sin JS, las 26 secciones con .reveal quedaban en blanco. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s var(--ease); }
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* =============================================================================
   PIE — compartido por todas las páginas
   ============================================================================= */
.footer {
  padding: var(--sp-18) 0 var(--sp-8);
  padding-bottom: max(var(--sp-8), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  position: relative; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(0, 193, 255, 0.025));
}
.footer-grid {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: var(--sp-10); margin-bottom: var(--sp-12);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

.footer-brand .brand { margin-bottom: var(--sp-4); }
.footer-brand p { color: var(--text-2); font-size: var(--fs-sm); max-width: 34ch; margin-bottom: var(--sp-5); }
.footer-socials { display: flex; gap: var(--sp-2); }
.footer-socials a {
  width: 44px; height: 44px; border-radius: var(--r-xs);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); text-decoration: none;
  transition: all 0.25s var(--ease);
}
.footer-socials a:hover { background: var(--grad); border-color: transparent; color: var(--ink-on-brand); transform: translateY(-3px); }
.footer-socials .ico { width: 18px; height: 18px; }

.footer-col h4 {
  font-size: var(--fs-caption); font-weight: 700; color: var(--text-0);
  margin-bottom: var(--sp-4); letter-spacing: var(--ls-caption); text-transform: uppercase;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); transition: color 0.2s; }
.footer-col a:hover { color: var(--primary); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-6) var(--sp-10); padding-top: var(--sp-6);
  border-top: 1px solid var(--line); flex-wrap: wrap;
}
.footer-company { font-size: var(--fs-xs); color: var(--text-2); }
.footer-company a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.footer-company a:hover { color: var(--primary); }
.footer-note { font-size: var(--fs-caption); line-height: 1.6; color: var(--text-3); max-width: 62ch; margin-top: 6px; }
.footer-bottom .legal { display: flex; gap: var(--sp-5); flex-wrap: wrap; font-size: var(--fs-xs); }
.footer-bottom .legal a { color: var(--text-3); text-decoration: none; transition: color 0.2s; }
.footer-bottom .legal a:hover { color: var(--text-1); }

/* El pie es el único acceso a Términos, Privacidad y Eliminar mi cuenta: en
   táctil sus enlaces tienen que respetar el piso de 44 px como el resto. */
@media (max-width: 720px) {
  .footer-col ul { gap: 0; }
  .footer-col a,
  .footer-bottom .legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-bottom .legal { gap: var(--sp-6); }
}

/* =============================================================================
   PÁGINAS DE TEXTO (privacidad, términos, soporte, contacto, riesgos…)
   ============================================================================= */
.doc-hero { padding: 132px 0 var(--sp-8); position: relative; z-index: 2; }
.doc-hero h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-display); line-height: 1.08; margin-bottom: var(--sp-3); }
.doc-meta { color: var(--text-3); font-size: var(--fs-sm); display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
.doc-meta a { color: var(--primary); text-decoration: none; }
.doc-meta a:hover { text-decoration: underline; }

.doc { padding: var(--sp-6) 0 var(--sp-24); position: relative; z-index: 2; }
/* `break-word` para que correos y URLs largas no desborden en pantallas angostas */
.doc-body { max-width: 74ch; overflow-wrap: break-word; }
.doc-body h2 {
  font-size: var(--fs-h3); margin: var(--sp-12) 0 var(--sp-3);
  letter-spacing: -0.012em; scroll-margin-top: 100px;
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { font-size: var(--fs-h4); font-weight: 600; margin: var(--sp-6) 0 10px; }
.doc-body p { color: var(--text-2); margin-bottom: var(--sp-3); }
.doc-body ul { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); color: var(--text-2); }
.doc-body ul li { margin-bottom: var(--sp-2); }
.doc-body ul li::marker { color: var(--primary); }
.doc-body a { color: var(--primary); text-decoration: none; }
.doc-body a:hover { text-decoration: underline; }
.doc-body hr { border: none; border-top: 1px solid var(--line); margin: var(--sp-10) 0; }

.callout {
  border: 1px solid rgba(0, 193, 255, 0.24);
  background: rgba(0, 193, 255, 0.05);
  border-radius: var(--r-md); padding: var(--sp-5) var(--sp-6); margin: var(--sp-6) 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout h3 { margin-top: 0; }

.doc-toc {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-md); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-10);
}
.doc-toc h2 {
  font-size: var(--fs-caption) !important; letter-spacing: var(--ls-caption);
  text-transform: uppercase; color: var(--text-3) !important;
  margin: 0 0 var(--sp-3) !important; font-weight: 600 !important;
}
.doc-toc ol { margin: 0; padding-left: var(--sp-5); columns: 2; column-gap: var(--sp-8); }
@media (max-width: 620px) { .doc-toc ol { columns: 1; } }
.doc-toc li { margin-bottom: var(--sp-2); font-size: var(--fs-sm); break-inside: avoid; }
.doc-toc a { color: var(--text-2); text-decoration: none; }
.doc-toc a:hover { color: var(--primary); }
.doc-toc li::marker { color: var(--text-3); }

/* Ficha de datos de la empresa (sólo en contacto.html) */
.datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-5) var(--sp-8); margin: var(--sp-6) 0;
  padding: var(--sp-6); border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface);
}
.datos dt {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--ls-caption);
  text-transform: uppercase; color: var(--text-3); margin-bottom: 5px;
}
.datos dd { font-size: var(--fs-sm); color: var(--text-1); }
.datos dd a { color: var(--primary); text-decoration: none; }
.datos dd a:hover { text-decoration: underline; }