/* ===========================================================================
   STD86 — Colors & Type
   Extracted from std86.com (theme-creative-1.css + style.css)
   ---------------------------------------------------------------------------
   Brand vibe: 80's dot-matrix printer typography, black & white base, with
   a 5-color "package" accent palette + red corporate alert. Mexican Spanish
   web-development studio for small businesses.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;300;400;500;700&family=Montserrat:wght@200;300;400;500;700&display=swap');

:root {
  /* ---------- Foreground / Neutral ramp ---------- */
  --fg-1:        #181818;   /* body text (style.css body color) */
  --fg-2:        #1D1D1D;   /* p, .service-2, pricing card titles */
  --fg-3:        #282828;   /* h2 in laptop section, dark btn hover bg */
  --fg-4:        #3B3B3B;   /* placeholder text */
  --fg-5:        #565656;   /* btn-dark hover bg */
  --fg-muted:    #929292;   /* sub copy under services */
  --fg-line:     #cacaca;   /* hairline borders on btn-light */
  --fg-dot:      #bcbcbc;   /* carousel inactive dot */

  /* ---------- Backgrounds ---------- */
  --bg-page:     #FFFFFF;
  --bg-soft:     #FAFAFA;   /* x_001_laptop_main_wrap */
  --bg-section:  #f4f4f4;   /* alt section bg */
  --bg-form:     #DADADA;   /* contact-form-4 inputs */
  --bg-frame:    #FFFFFF;   /* the 30px viewport frame */
  --bg-dark:     #181818;   /* dark btn / btn-dark */
  --bg-darker:   #17171a;   /* laptop screen */

  /* ---------- Brand "Package" accents ---------- */
  --c-blue:      #008ED2;   /* Paquete Básico   • dot 2 in logo */
  --c-blue-h:    #07AEFF;   /*  hover */
  --c-green:     #26954A;   /* Paquete Plus     • dot 3 in logo */
  --c-green-h:   #30BE5E;
  --c-orange:    #EFA966;   /* Paquete Pro      • dot 4 in logo */
  --c-orange-h:  #F4C69B;
  --c-purple:    #9D79CB;   /* A Medida         • dot 5 in logo */
  --c-purple-h:  #B79DD9;
  --c-red:       #E65859;   /* CTA / errors     • dot 1 in logo */
  --c-red-h:     #EC8181;
  --c-yellow:    #F4DC43;   /* btn-yellow (rare) */
  --c-yellow-h:  #E8CA0D;

  /* ---------- Semantic ---------- */
  --color-cta:        var(--c-red);
  --color-cta-hover:  var(--c-red-h);
  --color-link:       var(--fg-1);
  --color-link-hover: var(--c-red);
  --color-error:      var(--c-red);
  --color-success:    var(--c-green);
  --color-info:       var(--c-blue);
  --color-warn:       var(--c-orange);

  /* ---------- Type families ---------- */
  --font-mono:    'Source Code Pro', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Montserrat', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    var(--font-mono);   /* the brand defaults to mono body */

  /* ---------- Type weights ---------- */
  --fw-thin: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---------- Type scale (matches site sizes) ---------- */
  --fs-hero:    90px;   /* video-content-tit h1/h2 */
  --fs-tagline: 45px;   /* hero subline */
  --fs-h1:      36px;
  --fs-h2:      30px;   /* x_001_laptop h2 */
  --fs-h3:      22px;   /* pricing card title */
  --fs-h4:      18px;
  --fs-h5:      14px;
  --fs-body:    14px;   /* theme-creative p */
  --fs-body-sm: 13px;   /* style.css p */
  --fs-meta:    11px;   /* btn font-size */
  --fs-micro:   10px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.6;
  --lh-loose: 1.8;

  --tracking-btn: 1px;          /* uppercase btn letter-spacing */
  --tracking-loose: 2px;

  /* ---------- Spacing (derived from .pad-* helpers) ---------- */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 25px;
  --space-6: 40px;
  --space-7: 50px;
  --space-8: 70px;
  --space-9: 100px;
  --space-10: 120px;
  --space-11: 150px;
  --space-12: 200px;

  --frame-gutter: 30px;          /* fixed white frame around the viewport */

  /* ---------- Radii ---------- */
  --radius-1: 1px;     /* form fields */
  --radius-2: 2px;     /* default buttons */
  --radius-pill: 100px;

  /* ---------- Borders ---------- */
  --border-thin: 1px solid var(--fg-line);
  --border-strong: 1px solid var(--fg-1);
  --border-cta: 2px solid var(--c-red);

  /* ---------- Shadows (used very sparingly on the site) ---------- */
  --shadow-card:   0 8px 30px rgba(12, 20, 30, 0.12);
  --shadow-soft:   0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-inset:  inset 0 0 0 1px rgba(0,0,0,0.06);

  /* ---------- Motion ---------- */
  --easing-default: cubic-bezier(0.22, 0.81, 0.01, 0.99);
  --easing-snap:    cubic-bezier(.455, .03, .515, .955);
  --duration-fast:  .3s;
  --duration-base:  .6s;
}

/* =========================================================================
   Semantic type styles — apply with class names or by extending utilities
   ========================================================================= */

html { font-size: 14px; }

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display — Montserrat, used for full-bleed hero shouts only */
.h-display, .h-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  color: rgba(255,255,255,0.55);
}
.h-tagline {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  font-size: var(--fs-tagline);
  color: rgba(255,255,255,0.90);
}

/* Headings — mono, sentence/capitalize case, medium weight */
h1, .h1 { font: var(--fw-medium) var(--fs-h1)/var(--lh-snug) var(--font-mono); color: var(--fg-2); margin: 0 0 var(--space-3); }
h2, .h2 { font: var(--fw-medium) var(--fs-h2)/var(--lh-snug) var(--font-mono); color: var(--fg-2); margin: 0 0 var(--space-3); text-transform: capitalize; }
h3, .h3 { font: var(--fw-medium) var(--fs-h3)/var(--lh-snug) var(--font-mono); color: var(--fg-2); margin: 0 0 var(--space-3); }
h4, .h4 { font: var(--fw-medium) var(--fs-h4)/var(--lh-snug) var(--font-mono); color: var(--fg-2); margin: 0 0 var(--space-2); }
h5, .h5 { font: var(--fw-medium) var(--fs-h5)/var(--lh-snug) var(--font-mono); color: var(--fg-2); margin: 0 0 var(--space-2); letter-spacing: 1px; text-transform: uppercase; }

p, .p {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}
.p-sm { font-size: var(--fs-body-sm); }
.p-meta { font-size: var(--fs-meta); letter-spacing: 1px; text-transform: uppercase; color: var(--fg-muted); }
.p-mute { color: var(--fg-muted); }

code, kbd, samp, .code {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: 0.95em;
  background: var(--bg-section);
  padding: 1px 6px;
  border-radius: var(--radius-1);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--duration-fast) ease-in-out;
}
a:hover, a:focus { color: var(--color-link-hover); outline: 0; }

/* The brand wordmark text-treatment "<STD86/>" */
.brand-tag {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  color: var(--fg-1);
}
.brand-tag::before { content: "<"; }
.brand-tag::after  { content: "/>"; }

/* Section-header tiny accent line used on the site (h5 .line-txt) */
.line-txt::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--fg-1);
  vertical-align: middle;
  margin-right: var(--space-2);
}