/* The Nearshore Company — color and typography foundations v1.0
   Fuente: tnc-source/tnc-brand2-open-design/brand.json y tnc-brand-book.html.
   Los hex oficiales verificados son #0e1e3a, #5a6c7d, #d22f2b, #1c7cd3 y #f5f8fb.
   #ffffff y #dde5ee son roles derivados para superficie y borde. */

:root{
  /* Color — roles principales */
  --bg:#f5f8fb;
  --surface:#ffffff;
  --fg:#0e1e3a;
  --muted:#5a6c7d;
  --border:#dde5ee;
  --accent:#d22f2b;
  --accent-2:#1c7cd3;

  /* Color — apoyo en modo oscuro */
  --navy-2:#16294d;
  --navy-3:#1e3460;
  --on-dark:#ffffff;
  --on-dark-muted:#a9bcd6;
  --focus-ring:rgba(28,124,211,.38);

  /* Typography */
  --font-display:'Poppins','Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Poppins','Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-display:clamp(38px,5.6vw,68px);
  --fs-h1:44px;
  --fs-h2:32px;
  --fs-h3:24px;
  --fs-lead:18px;
  --fs-body:16px;
  --fs-small:13px;
  --fs-cap:11px;
  --lh-tight:1.05;
  --lh-title:1.12;
  --lh-body:1.6;

  /* Spacing — 8 px base grid */
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-5:40px;
  --sp-6:48px;
  --sp-8:64px;
  --sp-9:72px;
  --sp-12:96px;

  /* Forma */
  --radius-sm:8px;
  --radius:12px;
  --radius-pill:999px;
  --radius-img:72px;

  /* Elevation */
  --shadow-1:0 1px 2px rgba(14,30,58,.06),0 4px 16px rgba(14,30,58,.06);
  --shadow-2:0 8px 32px rgba(14,30,58,.16);

  /* Movimiento */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --dur-fast:140ms;
  --dur-med:220ms;
}

html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
}
::selection{background:var(--accent);color:#fff}

h1,h2,h3,h4{
  margin:0 0 var(--sp-2);
  font-family:var(--font-display);
  line-height:var(--lh-title);
  letter-spacing:-.015em;
}
h1{font-size:var(--fs-h1);font-weight:800}
h2{font-size:var(--fs-h2);font-weight:800}
h3{font-size:var(--fs-h3);font-weight:700}
h4{font-size:var(--fs-lead);font-weight:700}
p{margin:0 0 var(--sp-2)}
small,.caption{font-size:var(--fs-small);color:var(--muted)}
code,.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;
}

.tnc-display{
  font-family:var(--font-display);
  font-size:var(--fs-display);
  font-weight:800;
  line-height:var(--lh-tight);
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.tnc-two-tone{color:var(--fg)}
.tnc-two-tone .tone-accent{color:var(--accent)}
.tnc-two-tone.on-dark{color:var(--on-dark)}
.tnc-kicker{
  display:flex;
  align-items:center;
  gap:var(--sp-1);
  color:var(--muted);
  font-size:var(--fs-cap);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.tnc-kicker .n{color:var(--accent)}
.tnc-lead{font-size:var(--fs-lead);line-height:1.55;color:var(--muted)}
.tnc-dark{background:var(--fg);color:var(--on-dark)}
.tnc-dark .tnc-lead,.tnc-dark .caption{color:var(--on-dark-muted)}

/* Base patterns observed in production */
.tnc-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
}
.tnc-pill{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:12px 16px;
  border-radius:var(--radius);
  color:#fff;
  font-weight:600;
  line-height:1.35;
}
.tnc-pill .arrow{font-weight:800;line-height:1}
.tnc-pill--navy{background:linear-gradient(135deg,var(--navy-3),var(--fg))}
.tnc-pill--red{background:linear-gradient(135deg,#e04440,var(--accent))}
.tnc-pill--light{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--fg);
}
.tnc-pill--light .arrow{color:var(--accent-2)}
.tnc-colhdr{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 18px;
  border-radius:var(--radius-sm);
  color:#fff;
  font-size:var(--fs-small);
  font-weight:800;
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
}
.tnc-colhdr--navy{background:linear-gradient(135deg,var(--navy-3),var(--fg))}
.tnc-colhdr--blue{background:var(--accent-2)}
.tnc-colhdr--red{background:linear-gradient(135deg,#e04440,var(--accent))}
.tnc-cta{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  max-width:100%;
  padding:16px 34px;
  border:0;
  border-radius:var(--radius-pill);
  background:var(--accent-2);
  color:#fff;
  box-shadow:0 12px 30px rgba(28,124,211,.28);
  cursor:pointer;
  text-align:center;
  transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.tnc-cta:hover{background:#1668b4;color:#fff;text-decoration:none;transform:translateY(-1px)}
.tnc-cta b{font-weight:800;line-height:1.2}
.tnc-cta span{font-size:var(--fs-small);font-weight:400;line-height:1.35}
.tnc-cta--secondary{
  background:transparent;
  border:1px solid currentColor;
  box-shadow:none;
  color:var(--fg);
}
.tnc-cta--secondary:hover{background:rgba(14,30,58,.06);color:var(--fg)}
.tnc-image-frame{
  overflow:hidden;
  border-radius:var(--radius-sm) var(--radius-img) var(--radius-sm) var(--radius-img);
  background:var(--navy-2);
}
.tnc-image-frame img{width:100%;height:100%;object-fit:cover}
.tnc-stat{
  padding:var(--sp-3);
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--border);
}
.tnc-stat b{
  display:block;
  margin-bottom:6px;
  color:var(--accent-2);
  font-family:var(--font-display);
  font-size:32px;
  line-height:1;
}
.tnc-stat span{color:var(--muted);font-size:var(--fs-small)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}