/* ── Salud Design System ── */

:root{
  --c-primary:#5C57C9;        /* indigo/violet — brand bg, logo, active nav */
  --c-primary-dark:#4f4ab3;
  --c-secondary:#48B4ED;      /* sky blue — primary button, focus ring */
  --c-secondary-dark:#2f9fdc;
  --c-accent:#22B8B5;         /* teal/cyan — eyebrows, links, dates */
  --c-white:#ffffff;
  --c-on-purple:rgba(255,255,255,0.86);
  --c-on-purple-dim:rgba(255,255,255,0.66);

  /* translucent surfaces layered over the purple bg */
  --c-card:rgba(255,255,255,0.10);
  --c-card-strong:rgba(255,255,255,0.16);
  --c-news-panel:rgba(255,255,255,0.12);

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --radius:18px;
  --radius-sm:14px;
  --maxw:100%;
  --gutter:2rem;
}

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

html{scroll-behavior:smooth}

body{
  font-family:var(--font);
  color:var(--c-white);
  background:var(--c-primary);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* ── Page transitions (View Transitions API) ────────────── */

/* htmx wraps each #content swap in document.startViewTransition() (enabled via
   globalViewTransitions in layout.html). Naming the swapped region gives it its
   own snapshot so only the content animates — the header/swoosh stay put. */
#content{view-transition-name:content}

/* A gentle fade + upward slide for the incoming page, mirrored on the outgoing
   one. Only runs where motion is welcome; reduced-motion users get htmx's plain
   instant swap. */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(content){
    animation:vt-fade-out 160ms ease both;
  }
  ::view-transition-new(content){
    animation:vt-fade-in 220ms ease both;
  }
}
@keyframes vt-fade-out{
  to{opacity:0;transform:translateY(-8px)}
}
@keyframes vt-fade-in{
  from{opacity:0;transform:translateY(8px)}
}

/* White "swoosh" in the top-left corner is drawn as an inline SVG
   (.corner-swoosh) in layout.html so it hot-reloads with the templates.
   See that file for the path/curve geometry. */
.corner-swoosh{
  position:absolute;
  top:0;left:0;
  width:min(39vw,473px);
  height:auto;   /* with preserveAspectRatio=meet the arc keeps its shape */
  z-index:0;
  pointer-events:none;
}

a{color:inherit;text-decoration:none}

img{max-width:100%;display:block}

/* ── Header ─────────────────────────────────────────────── */

.site-header{position:relative;z-index:5}

.header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:2rem var(--gutter) 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{display:flex;align-items:center;gap:0.7rem}
/* The brand mark is a single white-by-default SVG (salud_logo.svg). It's
   painted via CSS mask so each placement can colour it independently: indigo
   here in the nav (the logo sits on the white corner-swoosh) and white in the
   hero composition (on the purple ground). viewBox 297.8×321 → aspect-ratio. */
.logo-img{
  width:40px;aspect-ratio:297.8/321;
  background:var(--c-primary);
  -webkit-mask:url(/static/salud_logo.037cb749.svg) center/contain no-repeat;
  mask:url(/static/salud_logo.037cb749.svg) center/contain no-repeat;
}
.logo-word{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:7em;
  line-height:1.1;
}
.logo-word-main,
.logo-word-sub{
  display:block;
  text-align:justify;
  text-align-last:justify;
  color:#0e1116;
  font-size:1.4rem;
}
.logo-word-main{
  font-weight:800;
}
.logo-word-sub{
  font-weight:400;
}

.site-nav{display:flex;align-items:center;gap:0.6rem;font-weight:600}
.site-nav a{color:var(--c-on-purple-dim);transition:color .15s}
.site-nav a:hover{color:var(--c-white)}
.site-nav a.is-active{color:var(--c-on-purple)}
.nav-sep{color:var(--c-on-purple-dim)}

/* ── Hero layout ────────────────────────────────────────── */

.content-wrap{position:relative;z-index:1}

.hero{
  max-width:var(--maxw);
  margin:0 auto;
  /* Left padding pulls the columns in from the edge; the right padding is
     smaller, shifting the whole hero a bit to the right. The inter-column gap
     (below) is kept smaller than the left padding so the columns sit close. */
  padding:3.5rem calc(var(--gutter) + 2rem) 3rem calc(var(--gutter) + 7rem);
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:2rem;                 /* smaller than the hero's side padding */
  align-items:start;
}

/* Left column. No extra top padding so the eyebrow's top aligns with the top
   of the right column's topmost (VISION) card. margin-left:auto pushes the
   capped-width content to the RIGHT of its cell, tightening it toward the
   right column (less dead space in the middle). */
.hero-left{padding-top:0;max-width:640px;margin-left:auto}

.eyebrow{
  color:var(--c-accent);
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.14em;
  margin-bottom:1rem;
}

.hero-title{
  font-size:clamp(2.2rem,4vw,3.4rem);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-0.01em;
  margin-bottom:1.4rem;
  /* exactly two lines: each {{hero_title_n}} segment (split by <br>) stays
     on its own line instead of wrapping further */
  white-space:nowrap;
}

.hero-desc{
  color:var(--c-on-purple);
  font-size:1.02rem;
  line-height:1.6;
  max-width:32rem;
  margin-bottom:2rem;
}

/* ── Buttons ────────────────────────────────────────────── */

.btn{
  display:inline-block;
  font-family:var(--font);
  font-weight:600;
  font-size:1rem;
  padding:0.85rem 2.2rem;
  border-radius:999px;
  border:none;
  cursor:pointer;
  transition:background .15s,transform .15s,box-shadow .15s;
}
.btn:focus-visible{outline:3px solid var(--c-secondary);outline-offset:2px}

.btn-secondary{
  background:var(--c-secondary);
  color:var(--c-white);
  box-shadow:0 8px 20px rgba(72,180,237,0.35);
}
.btn-secondary:hover{background:var(--c-secondary-dark);transform:translateY(-1px)}

.btn-accent{background:var(--c-accent);color:var(--c-white)}
.btn-accent:hover{filter:brightness(1.05);transform:translateY(-1px)}

/* ── News panel ─────────────────────────────────────────── */

.news-panel{
  margin-top:2.5rem;
  background:var(--c-news-panel);
  border-radius:var(--radius);
  padding:1.5rem;
  backdrop-filter:blur(4px);
}

.news-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1rem;
}
.news-label{font-weight:700;font-size:0.85rem;letter-spacing:0.1em}

.news-link{
  color:var(--c-accent);
  font-weight:700;
  font-size:0.85rem;
  transition:filter .15s;
}
.news-link:hover{filter:brightness(1.15)}

.news-card{
  display:block;
  background:var(--c-white);
  color:var(--c-primary);
  border-radius:var(--radius-sm);
  padding:1.1rem 1.3rem;
  margin-bottom:1rem;
  position:relative;
  transition:transform .15s,box-shadow .15s;
}
.news-card:last-child{margin-bottom:0}
.news-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,0.18)}
.news-card h3{
  font-size:1.05rem;
  font-weight:700;
  line-height:1.3;
  margin-bottom:0.5rem;
}
.news-date{color:var(--c-accent);font-size:0.8rem;font-weight:600;margin-bottom:0.4rem}
.news-link-card{position:absolute;right:1.3rem;bottom:1.1rem}

/* ── Right column: centered composition ─────────────────── */

.hero-right{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:0;
}

/* A square stage; the shield is centered and the four items are absolutely
   positioned around it at clock angles (11, 3, 5, 8). */
.composition{
  position:relative;
  width:min(100%,620px);
  aspect-ratio:1/1;
}

/* connectors: thin CSS lines in the same % space as the cards.
   .conn-v is a vertical segment (its `left`/`top`/`height` set inline);
   .conn-h is a horizontal segment (`left`/`top`/`width`). conn-dot is a small
   endpoint marker. All sit behind the cards/shield (z-index:0). */
.conn{
  position:absolute;
  background:var(--c-accent);
  z-index:3;
  pointer-events:none;
}
.conn-v{width:2px;transform:translateX(-1px)}      /* center the 2px line on its x */
.conn-h{height:2px;transform:translateY(-1px)}      /* center the 2px line on its y */
.conn-dot{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--c-accent);
  transform:translate(-50%,-50%);
  z-index:4;
  pointer-events:none;
}

/* center shield */
.comp-shield{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:30%;aspect-ratio:297.8/321;
  z-index:2;
  background:#fff;
  -webkit-mask:url(/static/salud_logo.037cb749.svg) center/contain no-repeat;
  mask:url(/static/salud_logo.037cb749.svg) center/contain no-repeat;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.18));
}

/* every satellite is centered on its clock anchor via translate(-50%,-50%) */
.comp-item{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:1;
}
.pos-11{top:12%;left:41%}
.pos-3 {top:30%;left:85%}
.pos-5 {top:88%;left:65%}
.pos-8 {top:78%;left:22%}

/* Build composition: a wide, HORIZONTAL stage. Four equal text cards flank the
   centre icon (two per side, stacked), so the layout reads left-to-right
   instead of stacking tall like the home orbit. */
.composition-wide{width:min(100%,1040px);aspect-ratio:21/9}
/* All four cards share the same outer column (cx ~15% / ~85%) so their inner
   edges line up, leaving a wide centre gap for the long branches to cross. */
.bpos-10{top:27%;left:15%}   /* upper-left  — FHIR card        */
.bpos-8 {top:73%;left:15%}   /* lower-left  — illuminodes card */
.bpos-2 {top:27%;left:85%}   /* upper-right — Nostr card       */
.bpos-4 {top:73%;left:85%}   /* lower-right — NIP / partner card */

.info-card{
  background:var(--c-card);
  border-radius:var(--radius);
  padding:1.6rem 1.7rem;
  backdrop-filter:blur(4px);
  width:340px;
}

.info-title{
  color:var(--c-accent);
  font-weight:700;
  font-size:0.8rem;
  letter-spacing:0.12em;
  margin-bottom:0.6rem;
}
.info-desc{
  color:var(--c-on-purple);
  font-size:0.85rem;
  line-height:1.55;
  /* clamp the body to 4 lines */
  display:-webkit-box;
  -webkit-line-clamp:4;
  line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.icon-tile{
  background:var(--c-card-strong);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  width:150px;height:150px;
}
.icon-tile svg{width:85%;height:85%}

/* When a card/tile is a link (e.g. the Build section), give it a hover lift. */
a.info-card,a.icon-tile{
  transition:transform .15s,background .15s,box-shadow .15s;
}
a.info-card:hover,a.icon-tile:hover{
  transform:translate(-50%,-50%) translateY(-3px);
  background:var(--c-card-strong);
  box-shadow:0 12px 26px rgba(0,0,0,0.22);
}

/* ── Build: single centered section ─────────────────────── */

/* Unlike the home hero (two columns), Build is one stacked column: a centered
   header block on top, then the orbital .composition below it. */
.build-section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:3.5rem var(--gutter) 4rem;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.build-head{
  text-align:center;
  max-width:46rem;
  margin-bottom:1.5rem;
}
/* the shared .hero-desc is centered within the capped header here */
.build-head .hero-desc{margin:0 auto}

/* Centre of the Build composition: the ID / document icon in a soft tile,
   sitting where the shield does on home (absolute, centred on the stage). */
.comp-center{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:130px;height:130px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--c-card-strong);
  border-radius:var(--radius);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.18));
}
.comp-center svg{width:72%;height:72%}

/* ── Projects: responsive card grid ─────────────────────── */

/* Reuses the centered .build-section/.build-head header; below it, a grid of
   project cards that reflows 3 → 2 → 1 columns as the viewport narrows. */
.projects-grid{
  width:100%;
  max-width:1040px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
}

.project-card{
  background:var(--c-card);
  border-radius:var(--radius);
  padding:1.6rem 1.7rem;
  backdrop-filter:blur(4px);
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}

.project-tag{
  color:var(--c-accent);
  font-weight:700;
  font-size:0.75rem;
  letter-spacing:0.12em;
}
.project-title{
  color:var(--c-white);
  font-weight:700;
  font-size:1.2rem;
  line-height:1.2;
}
.project-desc{
  color:var(--c-on-purple);
  font-size:0.9rem;
  line-height:1.55;
}

@media (max-width:900px){
  .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .projects-grid{grid-template-columns:1fr}
}

/* ── 404 ────────────────────────────────────────────────── */

.notfound{max-width:36rem;padding-top:4rem}

/* ── Skeleton loaders ───────────────────────────────────── */

.skel{
  background:linear-gradient(90deg,rgba(255,255,255,0.10),rgba(255,255,255,0.22),rgba(255,255,255,0.10));
  background-size:200% 100%;
  animation:skel 1.2s ease-in-out infinite;
  border-radius:8px;
}
.skel-heading{height:2.6rem;margin-bottom:0.6rem}
.skel-text{height:1rem;margin-bottom:0.5rem}
.skel-btn{height:3rem;width:12rem;border-radius:999px}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width:1100px){
  :root{--gutter:2.5rem}
}

@media (max-width:900px){
  .corner-swoosh{width:72vw}
  /* The desktop hero has a big asymmetric left padding (+7rem) to pull the two
     columns in from the edge. Once the grid collapses to one column that just
     shoves everything to the right — reset to an even, gutter-based padding. */
  .hero{padding:2.5rem var(--gutter) 3rem}
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero-left{padding-top:1rem;max-width:none}
  /* allow the two title segments to wrap instead of overflowing the viewport */
  .hero-title{white-space:normal}
  /* On narrow screens the orbital composition gets cramped — stack the
     cards/tiles in a simple column and drop the connector lines. */
  .composition{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:1.25rem}
  /* the %-positioned T-branch connectors only make sense on the square stage;
     hide them once the composition stacks into a column */
  .conn,.conn-dot{display:none}
  .comp-shield{position:static;transform:none;width:90px;order:-1}
  .comp-center{position:static;transform:none;width:110px;height:110px;order:-1}
  .comp-item{position:static;transform:none}
  .info-card{width:100%;max-width:340px}
}

@media (max-width:560px){
  :root{--gutter:1.4rem}
  .hero-right{grid-template-columns:1fr}
  /* On phones the diagonal swoosh is wide enough that its curve slices through
     the indigo logo, leaving the logo's lower edge stranded on the purple
     ground. Drop the swoosh entirely and paint the logo white so it reads on
     the purple header — matching the white shield in the hero composition. */
  .corner-swoosh{display:none}
  .logo-img{background:var(--c-white)}
  .logo-word-main,.logo-word-sub{color:var(--c-white)}
}