/* ============================================================
   AlfaBeth — Design System Foundations
   Colors + Typography tokens (base + semantic)
   Agencia de Diseño Visual y Estratégico
   ============================================================ */

/* Lato is the SOLE institutional typeface (Brand Manual §3.7). All weights + italics. */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {
  /* ---------- OFFICIAL PALETTE (Brand Manual §3.6) — these THREE only ---------- */
  /* Principal — Índigo. Authority, technical knowledge, strategy. Logo, headlines, structure. */
  --purple:        #4D1E70;   /* rgb(77,30,112)  C82 M100 Y0 K20 */
  --purple-deep:   #3C1659;   /* darker step for depth / hovers (non-spec) */
  /* Secundario 2 — Amarillo Melocotón. Warmth, closeness. Subtle accents, luminous bg, decoration. */
  --peach:         #F5DAAA;   /* rgb(245,218,170) C0 M13 Y37 K5 */
  --peach-strong:  #EFC97E;   /* hover/pressed peach (non-spec) */
  /* Secundario 1 — Verde Grisáceo. Freshness, accessibility. Buttons, icons, CTAs. */
  --teal:          #50BCBD;   /* rgb(80,188,189) C65 M0 Y30 K0 */
  --teal-deep:     #3E9C9D;   /* teal hover (non-spec) */

  /* Brand-name aliases */
  --indigo:          var(--purple);
  --verde-grisaceo:  var(--teal);
  --amarillo-melocoton: var(--peach);

  /* ---------- TINTS (derived, for placeholders / soft fills — NOT spec colors) ---------- */
  --indigo-tint-15: color-mix(in srgb, var(--purple) 15%, #fff);
  --indigo-tint-30: color-mix(in srgb, var(--purple) 30%, #fff);

  /* ---------- NEUTRALS ---------- */
  --ink:           #010101;   /* near-black body on white */
  --gray-700:      #505050;   /* rgb(80,80,80)   — section headings on white */
  --gray-500:      #8D8E8D;   /* rgb(141,142,141)— muted text / image placeholders */
  --gray-300:      #C4C4C4;   /* rgb(196,196,196)— hairlines / disabled */
  --off-white:     #F8F8F8;   /* rgb(248,248,248)— page tint */
  --white:         #FFFFFF;

  /* ---------- ELEVATION ---------- */
  --shadow-card:   15px 20px 50px rgba(0,0,0,0.04);   /* soft card lift */
  --shadow-badge:  20px 20px 60px rgba(0,0,0,0.10);   /* number badge */
  --shadow-cta:    0px 4px 4px rgba(0,0,0,0.25);      /* link/CTA drop */
  --shadow-image:  -15px -15px 40px rgba(0,0,0,0.20); /* media frames */

  /* ---------- RADII ---------- */
  --radius-card:   30px;   /* service / methodology cards */
  --radius-pill:   999px;
  --radius-sm:     8px;

  /* ---------- LÍNEA PUNTEADA (signature, Brand Manual §3.12) ----------
     ALWAYS square modules with EQUAL shape + gap. Never rectangles.
     Use the .sq-line helper / square-module gradients below; for rings use an
     SVG circle with stroke-dasharray "W W" + stroke-linecap:butt.
     CSS `border: dashed` is FORBIDDEN here (it renders rectangles). */
  --mod:           6px;

  /* ---------- TYPE FAMILY (single — Lato everywhere) ---------- */
  --font-display:  'Lato', system-ui, sans-serif;   /* everything */
  --font-section:  'Lato', system-ui, sans-serif;   /* alias kept for back-compat */
  --font-accent:   'Lato', system-ui, sans-serif;   /* alias kept for back-compat */

  /* ---------- TYPE WEIGHTS ---------- */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 700;
  --w-black: 900;
}

/* Horizontal service carousel scrollbar (brand-styled) */
.svc-scroll { scrollbar-width: thin; scrollbar-color: var(--teal) rgba(0,0,0,0.06); }
.svc-scroll::-webkit-scrollbar { height: 8px; }
.svc-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 999px; }
.svc-scroll::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 999px; }
.svc-scroll::-webkit-scrollbar-thumb:hover { background: var(--teal-deep); }

/* ============================================================
   LÍNEA PUNTEADA — square-module helpers (Brand Manual §3.12)
   Squares only, equal shape + gap. Never use `border: dashed`.
   ============================================================ */

/* Horizontal dotted line of N×N squares with N gaps (N = --mod). */
.sq-line {
  height: var(--mod);
  background-image: repeating-linear-gradient(
    to right,
    currentColor 0, currentColor var(--mod),
    transparent var(--mod), transparent calc(var(--mod) * 2));
  color: var(--peach);
}
/* Vertical variant */
.sq-line-v {
  width: var(--mod);
  background-image: repeating-linear-gradient(
    to bottom,
    currentColor 0, currentColor var(--mod),
    transparent var(--mod), transparent calc(var(--mod) * 2));
  color: var(--peach);
}

/* Square-module dotted BORDER for cards (4 edge gradients, equal square+gap).
   Set color via --sq-color. Keeps modules perfectly square on all edges. */
/* Square-module dotted BORDER for cards — the actual dotted stroke is drawn by
   sq-border.js as an SVG rounded-rect so the modules FOLLOW the corner radius.
   This rule just provides the white fill, radius and a positioning context.
   Set the module color via --sq-color (use a hex value, read by the JS). */
.sq-card {
  --sq-color: #50BCBD;
  position: relative;
  background: var(--white);
  border-radius: var(--radius-card);
}

/* ============================================================
   SEMANTIC TYPE RAMP  (design canvas = 1920 wide)
   ============================================================ */

/* Hero / huge display — Lato Bold 65, line-height 100% */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 65px;
  line-height: 1.0;
  letter-spacing: -0.5px;
}

/* Section title — Lato Medium 50 */
.t-section {
  font-family: var(--font-section);
  font-weight: var(--w-medium);
  font-size: 50px;
  line-height: 1.0;
  color: var(--gray-700);
}

/* Big editorial quote — Lato Bold 40 */
.t-quote {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 40px;
  line-height: 1.1;
}

/* Card title — Lato Bold 32 (teal) */
.t-card-title {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 32px;
  line-height: 1.0;
  color: var(--teal);
}

/* Hero subtitle — Lato Regular 28 (peach) */
.t-subtitle {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: 28px;
  line-height: 1.1;
  color: var(--peach);
}

/* Nav / link — Lato Bold 22 */
.t-nav {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 22px;
  line-height: 1.0;
}

/* Body large — Lato Regular 20, line-height 30 */
.t-body {
  font-family: var(--font-section);
  font-weight: var(--w-regular);
  font-size: 20px;
  line-height: 30px;
}

/* Body small — Lato 18, line-height 30 */
.t-body-sm {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: 18px;
  line-height: 30px;
}

/* CTA label — Lato Medium 20 */
.t-cta {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 20px;
  line-height: 1.1;
}