/* ============================================================
   BASE — Portátiles Nicaragua
   Tokens, reset, tipografía unificada (Montserrat).
   ============================================================ */

:root {
  /* Marca */
  --pn-blue:        #019FE6;
  --pn-blue-dark:   #0177ad;
  --pn-blue-light:  #7fd0f4;
  --pn-blue-soft:   rgba(1, 159, 230, 0.08);
  --pn-blue-glow:   rgba(1, 159, 230, 0.35);

  /* Oscuros */
  --pn-ink-900:     #050b1f;
  --pn-ink-800:     #0a1230;
  --pn-ink-700:     #131c44;
  --pn-ink-600:     #1d2750;
  --pn-purple-700:  #4b2a8a;

  /* Neutros */
  --pn-bg:          #ffffff;
  --pn-bg-soft:     #f4f6fa;
  --pn-bg-warm:     #fafbfd;
  --pn-border:      #e4e8ef;
  --pn-border-soft: #eef1f6;

  /* Texto */
  --pn-text:        #0d1330;
  --pn-text-soft:   #4a5270;
  --pn-text-muted:  #6b7280;
  --pn-text-light:  #98a0b8;
  --pn-text-white:  #ffffff;

  /* Acentos */
  --pn-gold:        #c9a45c;
  --pn-whatsapp:    #25D366;
  --pn-whatsapp-dk: #128C7E;
  --pn-facebook:    #1877F2;
  --pn-instagram:   #E1306C;
  --pn-danger:      #ff4757;
  --pn-success:     #22c55e;

  /* ============================================================
     TIPOGRAFÍA UNIFICADA — UNA SOLA FAMILIA (Montserrat)
     Jerarquía por peso y tamaño. Nada de mezclar fuentes.
     ============================================================ */
  --font-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Radios */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-xs:  0 1px 2px rgba(13, 19, 48, 0.04);
  --shadow-sm:  0 2px 8px rgba(13, 19, 48, 0.06);
  --shadow-md:  0 6px 24px rgba(13, 19, 48, 0.08);
  --shadow-lg:  0 12px 36px rgba(13, 19, 48, 0.12);
  --shadow-xl:  0 24px 60px rgba(13, 19, 48, 0.16);
  --shadow-blue: 0 8px 24px rgba(1, 159, 230, 0.28);

  /* Layout */
  --container:  1440px;
  --container-narrow: 1120px;
  --topbar-h:   38px;
  --header-h:   78px;
  --mobile-header-h: 64px;

  /* Transiciones */
  --t-fast:   140ms cubic-bezier(.2,.9,.3,1);
  --t-base:   220ms cubic-bezier(.2,.9,.3,1);
  --t-slow:   360ms cubic-bezier(.2,.9,.3,1);

  /* Z-index */
  --z-header:  1000;
  --z-topbar:  1001;
  --z-drawer:  2000;
  --z-modal:   3000;
  --z-float:   900;

  --space-section: clamp(56px, 8vw, 96px);
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--topbar-h) + 12px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--pn-text);
  background: var(--pn-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { object-fit: cover; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--pn-blue); }
ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--pn-blue); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--pn-blue); color: #fff; }

/* ------------------------------------------------------------
   TIPOGRAFÍA — una sola familia con jerarquía clara por peso
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--pn-text);
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 700; }
h4 { font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 600; }

p { line-height: 1.65; }

/* Clase para textos "display" que antes usaban script */
.pn-script {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.pn-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pn-text-muted);
}

/* LAYOUT */
.pn-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}
.pn-container--narrow { max-width: var(--container-narrow); }

.pn-section { padding-block: var(--space-section); }
.pn-section--dark { background: var(--pn-ink-800); color: var(--pn-text-white); }
.pn-section--dark h1, .pn-section--dark h2, .pn-section--dark h3, .pn-section--dark h4 { color: var(--pn-text-white); }
.pn-section--soft { background: var(--pn-bg-soft); }

.pn-dots {
  background-image: radial-gradient(rgba(1, 159, 230, 0.18) 1px, transparent 1px);
  background-size: 22px 22px;
}