/* Team page (nosotros.html) — page-specific styles.
   Tokens, resets and site chrome live in tokens.css / base.css / layout.css.

   This page runs a dark variant of the system rather than the light "Studio
   Print" palette used everywhere else. The portraits are low-key with warm
   tungsten rim light, so on a dark card the frame edge dissolves and the
   photographs read as one continuous surface. Two adjustments make that work:
   the canvas is warmed slightly off pure blue-black (a cool black fights the
   amber in the photos), and the hard-offset shadow is recast from ink to
   electric — a black shadow is invisible on a black surface. Same device as
   admin/'s "Blueprint" theme.

   The dark theme is scoped to body.night and to the chrome selectors below,
   so nothing here leaks into the other pages. */

/* ---- theme tokens ---- */
body.night{
  --t-bg:      #0C0D12;   /* canvas — near-black, a hair warm */
  --t-surface: #16181F;   /* card */
  --t-raise:   #1D2029;   /* tool chips */
  --t-fg:      #F2F1EE;   /* primary text — warm white, not pure */
  --t-muted:   #9A9AA4;
  --t-faint:   #6B6B75;
  --t-line:    rgba(255,255,255,.15);
  --t-line-2:  rgba(255,255,255,.28);
  --t-bd:      2px solid var(--t-line-2);
  --t-sh-neutral: rgba(255,255,255,.35);   /* stand-in where the service colour is ink */
  --mark-counter: var(--t-surface);
  background:var(--t-bg);color:var(--t-fg);
  background-image:radial-gradient(rgba(255,255,255,.07) 1.1px,transparent 1.1px);
  background-size:22px 22px;
}

/* ---- site chrome, re-tuned for the dark canvas ---- */
.site-nav{background:rgba(12,13,18,.9);border-bottom:var(--t-bd)}
.site-nav .logo{color:var(--t-fg)}
.site-nav-links a{color:var(--t-fg)}
.site-nav-links a:hover,.site-nav-links a[aria-current="page"]{color:var(--electric-600)}
.site-nav-links a::after{background:var(--electric-600)}
.site-nav-cta{border:var(--t-bd);box-shadow:2px 2px 0 rgba(37,99,235,.55)}
.site-nav-cta:active{box-shadow:1px 1px 0 rgba(37,99,235,.55)}
.site-burger{background:var(--t-surface);border:var(--t-bd)}
.site-burger span,.site-burger span::before,.site-burger span::after{background:var(--t-fg)}
.site-drawer{background:var(--t-surface);border-top:var(--t-bd)}
.site-drawer a{color:var(--t-fg);border-bottom:1px solid var(--t-line)}
.site-foot{border-top:var(--t-bd)}

/* ---- page ---- */
.wrap{max-width:1180px;margin:0 auto;padding:64px 24px 96px}
h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,5vw,3.2rem);
  letter-spacing:-.03em;margin:12px 0 14px;color:var(--t-fg)}
.lede{color:var(--t-muted);font-size:1.05rem;max-width:58ch;line-height:1.6}
.eyebrow{color:var(--electric-600)}

/* ---- grid ---- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:52px}
@media(max-width:1040px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}

/* ---- card: photo on top, then name -> service icon -> service name, centred ---- */
.member{display:flex;flex-direction:column;background:var(--t-surface);border:var(--t-bd);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease)}

/* Card shadow carries the service colour. Pulled back off full strength so it
   reads as a glow rather than a second border; the first declaration is the
   fallback for engines without color-mix(). */
.member{--card-sh:var(--svc)}
.member{--card-sh:color-mix(in srgb,var(--svc) 70%,transparent)}
.member:hover{--card-sh:var(--svc)}
.member:hover{--card-sh:color-mix(in srgb,var(--svc) 90%,transparent)}
/* --svc-web is ink and would be invisible here — same inversion as the glyph tile */
.member.s-web{--card-sh:var(--t-sh-neutral)}
.member.s-web:hover{--card-sh:rgba(255,255,255,.5)}

.member{box-shadow:4px 4px 0 var(--card-sh)}
.member:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--card-sh)}

.photo-wrap{position:relative;aspect-ratio:3/4;overflow:hidden;background:#000}
.photo-wrap img{width:100%;height:100%;object-fit:cover;display:block}
/* the photo's own black meets the card's black — a hairline keeps the edge readable */
.photo-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--t-line);
  border-bottom:2px solid var(--svc)}
.s-web .photo-wrap::after{border-bottom-color:var(--t-line-2)}

.member-body{flex:1;padding:20px 18px 22px;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:14px}
.name{font-family:var(--font-display);font-weight:800;font-size:1.1rem;letter-spacing:-.02em;
  line-height:1.2;color:var(--t-fg)}
.member-body .svc-glyph{width:42px;height:42px;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--t-line-2);border-radius:var(--r-md);
  background:var(--svc);color:var(--white);--mark-counter:var(--svc)}
.member-body .svc-glyph .svc-ic{display:block;width:auto;height:20px}
/* --svc-web is ink: invert that one tile so it stays visible on the dark card */
.s-web .member-body .svc-glyph{background:var(--t-fg);color:var(--t-bg);--mark-counter:var(--t-fg)}
.svc-name{font-size:.86rem;line-height:1.35;color:var(--t-muted);margin-top:-2px}