/* ==========================================================================
   PixelSur · base.css
   Sistema de diseño: tokens, tipografía, layout, botones y animaciones base.
   ========================================================================== */

/* ---------- Fuentes (autoalojadas, sin solicitudes a terceros) ---------- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: 'Manrope';
  src: url('../fonts/manrope-latin-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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;
}
/* Fuente de respaldo con métricas ajustadas para evitar saltos de diseño mientras carga Inter. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}

/* ---------- Tokens (tema claro, por defecto) ----------
   Los canales --tint-rgb, --accent-rgb, etc. permiten transparencias que se adaptan al tema:
   rgb(var(--tint-rgb) / .04) es un velo azul noche en el tema claro y blanco en el oscuro. */
:root {
  /* Superficies */
  --bg: #FFFFFF;
  --bg-2: #F5F8FB;
  --surface: #FFFFFF;
  --surface-2: #F3F6F9;
  --surface-3: #E9EEF3;
  --surface-glass: rgba(255, 255, 255, .82);
  --tint-rgb: 4 20 30;

  /* Líneas */
  --line: rgba(4, 20, 30, .08);
  --line-2: rgba(4, 20, 30, .13);
  --line-3: rgba(4, 20, 30, .22);

  /* Texto */
  --text: #202020;
  --text-2: #2e2e2e;
  --text-3: #262626;
  --text-on-light: #FFFFFF;

  /* Acentos: el verde del logotipo. --accent es el verde profundo de la marca (3,3:1 sobre blanco,
     alcanza para foco, indicadores e iconos); para texto se usa --accent-strong (5,3:1).
     --accent-rgb es el verde Pixelsur #41CA5D, para velos, bordes suaves y brillos. */
  --accent: #3BA158;
  --accent-strong: #1E7B34;
  --accent-deep: #17602A;
  --accent-bright: #41CA5D;
  --accent-light: #86DD97;
  --accent-rgb: 65 202 93;
  --accent-soft: rgb(var(--accent-rgb) / .08);
  --accent-line: rgb(var(--accent-rgb) / .3);

  /* Estados */
  --success: #12795A;
  --warning: #8A5800;
  --danger: #BF2740;
  --info: #2560C4;
  --success-rgb: 18 121 90;
  --warning-rgb: 196 132 20;
  --danger-rgb: 191 39 64;
  --whatsapp: #15884A;

  /* Gradientes */
  --grad-text-1: linear-gradient(100deg, #04141E 0%, #17602A 55%, #3BA158 100%);
  --grad-text-2: linear-gradient(100deg, #3BA158 0%, #41CA5D 100%);
  --grad-accent: linear-gradient(135deg, #3BA158 0%, #86DD97 100%);
  --grad-border: linear-gradient(135deg, rgba(4, 20, 30, .16), rgba(4, 20, 30, .05) 45%, rgba(4, 20, 30, .12));

  /* Sombras */
  --shadow-1: 0 1px 2px rgba(4, 20, 30, .04), 0 12px 32px -18px rgba(4, 20, 30, .16);
  --shadow-2: 0 40px 90px -40px rgba(4, 20, 30, .28), 0 0 0 1px var(--line);
  --shadow-pop: 0 30px 80px -30px rgba(4, 20, 30, .35);
  --shadow-glow: 0 18px 50px -18px rgb(var(--accent-rgb) / .3);
  --btn-primary-hover: #12324A;
  --backdrop: rgba(4, 20, 30, .45);

  color-scheme: light;
}

/* Tema oscuro: solo el hero con video y el header mientras está encima del video. */
.hero,
:root:not(.menu-open) .site-header.is-on-dark {
  --bg: #04141E;
  --bg-2: #061A26;
  --surface: #0A2232;
  --surface-2: #0D2A3D;
  --surface-3: #123449;
  --surface-glass: rgba(4, 20, 30, .72);
  --tint-rgb: 255 255 255;

  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);
  --line-3: rgba(255, 255, 255, .2);

  --text: #FFFFFF;
  --text-2: #ADB2BC;
  --text-3: #969EAC;
  --text-on-light: #04141E;

  /* Celeste hielo, el tono de las estrellas del video del hero */
  --accent: #A9D2F5;
  --accent-strong: #CFE6FA;
  --accent-deep: #5E9FD1;
  --accent-bright: #D4E6F7;
  --accent-light: #BFE0FF;
  --accent-rgb: 169 210 245;
  --accent-soft: rgb(var(--accent-rgb) / .12);
  --accent-line: rgb(var(--accent-rgb) / .35);

  --success: #5FD4A1;
  --warning: #F2C46D;
  --danger: #FF8A9A;
  --info: #8BC4FF;
  --success-rgb: 95 212 161;
  --warning-rgb: 242 196 109;
  --danger-rgb: 255 138 154;
  --whatsapp: #6FDBA4;

  --grad-text-1: linear-gradient(100deg, #FFFFFF 0%, #CFE6FA 55%, #A9D2F5 100%);
  --grad-text-2: linear-gradient(100deg, #A9D2F5 0%, #D4E6F7 100%);
  --grad-accent: linear-gradient(135deg, #A9D2F5 0%, #D4E6F7 100%);
  --grad-border: linear-gradient(135deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .22));

  --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px -16px rgba(0, 0, 0, .7);
  --shadow-2: 0 40px 90px -30px rgba(0, 0, 0, .85), 0 0 0 1px var(--line);
  --shadow-pop: 0 40px 100px -30px rgba(0, 0, 0, .85);
  --shadow-glow: 0 18px 50px -18px rgb(var(--accent-rgb) / .3);
  --btn-primary-hover: #E6EEF5;
  --backdrop: rgba(6, 7, 10, .72);

  color-scheme: dark;
}

:root {
  /* Tipografía: Manrope para los titulares, Inter para la lectura y la interfaz */
  --font-heading: 'Manrope', 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Menlo, Consolas, monospace;

  --fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --fs-h3: clamp(1.3rem, 1.18rem + .5vw, 1.6rem);
  --fs-lead: clamp(1.02rem, .97rem + .28vw, 1.17rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-xs: .78rem;

  /* Radios */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  /* Movimiento */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --header-h: 72px;
  --section-space: clamp(48px, 5.5vw, 80px);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Textura de grano muy sutil sobre todo el sitio */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, figure, blockquote, dl, dd { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: rgb(var(--accent-rgb) / .22); color: var(--text); }

/* ---------- Tipografía ---------- */
/* Titulares en Manrope bold con interletrado apenas negativo; h4 y los títulos dentro de los mockups quedan en Inter. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h4,
.artboard :is(h1, h2, h3, h4),
.admin-demo :is(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}
/* Palabras destacadas en verde Pixelsur dentro de los titulares.
   #3BA158 (--accent) es el verde del isotipo: 3,3:1 sobre blanco, válido para texto grande en negrita. */
:is(h1, h2, h3) em { font-style: normal; color: var(--accent); }
p { text-wrap: pretty; }
strong, b { font-weight: 600; color: var(--text); }

.text-gradient {
  background: var(--grad-text-1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.text-gradient.g2 { background-image: var(--grad-text-2); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-2);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .7;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-space);
}
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(var(--container), 88%);
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent);
}

.section-head {
  max-width: 780px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.section-head.is-center {
  margin-inline: auto;
  text-align: center;
}
.section-head.is-center .section-lead { margin-inline: auto; }
.section-head.is-split {
  display: grid;
  max-width: none;
  gap: 20px 64px;
}
.section-head.is-split .section-lead { margin-top: 0; }
@media (min-width: 900px) {
  .section-head.is-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: end;
  }
}

.section-title {
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -.025em;
}
.section-lead {
  max-width: 62ch;
  margin-top: 22px;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-2);
}


/* ---------- Iconos ---------- */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Botones ---------- */
.btn {
  --btn-h: 52px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 0 24px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .3s var(--ease-out), background-color .3s, border-color .3s, color .3s, box-shadow .4s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn .icon { width: 18px; height: 18px; transition: transform .45s var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: scale(.975); }

.btn-primary {
  background: var(--text);
  color: var(--text-on-light);
  font-family: var(--font-body);
  font-weight: 500;
}
.btn-primary:hover { background: var(--btn-primary-hover); transform: scale(1.03); }

/* Vidrio líquido: casi transparente, desenfoca lo que hay detrás y lleva un filo de luz arriba y abajo.
   .btn-ghost y .btn-outline-glow quedan como alias para no tocar el HTML existente. */
.btn-glass,
.btn-ghost,
.btn-outline-glow {
  position: relative;
  overflow: hidden;
  border: 0;
  background: rgb(var(--tint-rgb) / .01);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 1px rgb(var(--tint-rgb) / .1);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
}
.btn-glass::before,
.btn-ghost::before,
.btn-outline-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgb(var(--tint-rgb) / .45) 0%, rgb(var(--tint-rgb) / .15) 20%,
    rgb(var(--tint-rgb) / 0) 40%, rgb(var(--tint-rgb) / 0) 60%,
    rgb(var(--tint-rgb) / .15) 80%, rgb(var(--tint-rgb) / .45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn-glass:hover,
.btn-ghost:hover,
.btn-outline-glow:hover { background-color: rgb(var(--tint-rgb) / .06); transform: scale(1.03); }
.btn-glass:active,
.btn-ghost:active,
.btn-outline-glow:active { transform: scale(.985); }

.btn-sm { --btn-h: 40px; padding: 0 18px; font-size: .875rem; }
.btn-block { width: 100%; }

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: .925rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.link-btn .icon { width: 17px; height: 17px; color: var(--accent); transition: transform .45s var(--ease-out); }
.link-btn:hover .icon { transform: translateX(4px); }

/* ---------- Accesibilidad ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--text);
  color: var(--text-on-light);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .3s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ---------- Animaciones de entrada ---------- */
@keyframes reveal-up {
  from { opacity: 0; translate: 0 26px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes reveal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes reveal-scale {
  from { opacity: 0; scale: .965; }
  to { opacity: 1; scale: 1; }
}

.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-revealed { animation: reveal-up 1s var(--ease-out) var(--rd, 0ms) both; }
.js [data-reveal="fade"].is-revealed { animation-name: reveal-fade; }
.js [data-reveal="scale"].is-revealed { animation-name: reveal-scale; }
.reveal-fallback [data-reveal] { opacity: 1 !important; animation: none !important; }

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .55); }
  70% { box-shadow: 0 0 0 8px rgb(var(--accent-rgb) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0); }
}
.pulse-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
.pulse-dot.is-ok {
  background: var(--success);
  animation-name: pulse-ring-ok;
}
@keyframes pulse-ring-ok {
  0% { box-shadow: 0 0 0 0 rgb(var(--success-rgb) / .5); }
  70% { box-shadow: 0 0 0 7px rgb(var(--success-rgb) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--success-rgb) / 0); }
}

/* Pausa de animaciones decorativas fuera de pantalla (la clase la gestiona main.js). */
.is-offscreen,
.is-offscreen * { animation-play-state: paused !important; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; }
}