/* ===========================================================================
   TIYOL — the new look, applied to /es, /en and /organizations.

   This is a RE-SKIN, not a rebuild. It styles the class vocabulary those three
   pages already use, so their markup is untouched. That matters more than it
   sounds: /es carries a read-aloud feature whose script selects .beat, .not,
   .attention, .proof .sec and friends by name, plus a sticky call bar bound to
   #heroCta. Rewriting the markup to new class names would have silently broken
   the one accessibility affordance on the page most worth keeping.

   Preserved deliberately:
     - 21px body on the Spanish caller path (19px on the buyer page), derived
       from reading distance and presbyopic acuity, not from taste.
     - Every string of copy, in both languages.
     - The read-aloud button, the sticky bar, the wordmark and the two-dot logic.

   Tokens are duplicated from home.css rather than shared. home.css is live and
   working on /; a shared file would mean any edit here could reach it. Two
   files, no coupling — change both when the palette moves.
   =========================================================================== */

:root{
  color-scheme: dark;

  --ind-000:#212B57; --ind-100:#1A2245; --ind-200:#141B34;
  --ind-300:#0E1428; --ind-400:#0A0E20;

  --ink:#F3F0EA; --ink-muted:#A6AFCB;
  /* 4.7:1 on the lightest indigo. The previous #7C87A8 measured 3.8:1 at the
     top of the fade, under AA for the 13px eyebrow and status chip that live
     exactly there. Still a clear step below --ink-muted (6.2:1). */
  --ink-faint:#8E98B4;
  --aqua:#4FD8C4; --aqua-hi:#7FE8D8;
  --gold:#FFC24D; --gold-hi:#FFD489;

  --hair:rgba(243,240,234,.13);
  --hair-strong:rgba(243,240,234,.26);
  --glass:rgba(243,240,234,.045);
  --glass-hi:rgba(243,240,234,.10);

  /* paper — spent once per page, on the record card */
  --paper-raised:#FFFDFA;
  --paper-ink:#1C2A2B; --paper-muted:#4A5756; --paper-faint:#7F7160;
  --paper-hair:#E2D6C6; --paper-hair-strong:#CFC3B2;
  --paper-gold:#A8721F; --paper-gold-ink:#6B4A0F;
  --paper-teal:#0D5B62;

  --sans:'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  --serif:'Source Serif 4', ui-serif, Georgia, serif;

  --r1:10px; --r2:18px; --r3:28px; --r-full:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.3,.64,1);
  --pad:24px;
}

/* The `hidden` attribute only gets display:none from the UA stylesheet, so ANY
   author rule that sets display outranks it and the element is permanently
   visible. This is what keeps the sticky call bar hidden until it is wanted. */
[hidden]{display:none !important}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ind-200); -webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  /* 21px on the Spanish caller path. Derived from a 500mm reading distance and
     presbyopic acuity, not from taste. 17px is the absolute floor anywhere. */
  font:400 21px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100%;
  background:
    radial-gradient(120% 700px at 78% 0, rgba(79,216,196,.11) 0%, transparent 70%),
    radial-gradient(90% 560px at 6% 160px, rgba(255,194,77,.06) 0%, transparent 70%),
    linear-gradient(180deg,
      var(--ind-000) 0%, var(--ind-100) 22%, var(--ind-200) 48%,
      var(--ind-300) 76%, var(--ind-400) 100%);
  background-repeat:no-repeat;
}
body.buyer{font-size:19px}

h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0; color:var(--ink); text-wrap:balance}
h1{font-size:clamp(33px,4.4vw,54px); line-height:1.06; letter-spacing:-.028em; margin:0 0 18px}
h2{font-size:clamp(27px,3.2vw,40px); line-height:1.14; letter-spacing:-.022em; margin:0 0 16px}
h3{font-size:clamp(20px,1.6vw,23px); line-height:1.25; letter-spacing:-.014em; margin:0 0 8px}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:4px}

.wrap{max-width:44rem; margin:0 auto; padding:0 var(--pad)}
body.buyer .wrap{max-width:54rem}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}

/* ---------- bands ---------- */
.band{position:relative; padding:clamp(56px,7vw,96px) 0; overflow-x:clip}
.band-alt{background:rgba(10,14,32,.34)}
.band section + section{margin-top:clamp(48px,6vw,80px)}

.eyebrow{
  font:700 13px/1.4 var(--sans); letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-faint); display:flex; align-items:center; gap:10px; margin:0 0 16px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gold); flex:none}
.lead{font-size:clamp(19px,1.5vw,23px); line-height:1.55; color:var(--ink-muted)}
body.buyer .lead{font-size:21px}
.small{font-size:16.5px; line-height:1.5; color:var(--ink-faint)}

/* ---------- hero ---------- */
.hero{position:relative; padding:0 0 clamp(44px,5vw,72px); background:transparent}
/* The watermark stays off, as it was: the page's own content is the visual. */
.heroY{display:none}
.hero .wrap{padding-top:clamp(30px,4vw,52px)}

/* ---------- nav ----------
   A pill in normal flow rather than a fixed overlay: these pages scroll long,
   and a fixed bar would eat vertical room on exactly the small handsets this
   audience is using. */
.nav{
  max-width:calc(54rem); margin:14px auto 0; display:flex; align-items:center;
  justify-content:space-between; gap:14px;
  padding:10px 12px 10px 20px; border-radius:var(--r-full);
  background:rgba(14,20,40,.72);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--hair); box-shadow:0 12px 38px -18px rgba(4,7,20,.9);
}
@media (max-width:900px){ .nav{margin-inline:var(--pad)} }
.nav a{text-decoration:none}
.navlinks{display:flex; align-items:center; gap:4px}
.langlink{
  font:400 15px/1 var(--sans); color:var(--ink-muted);
  padding:10px 12px; border-radius:var(--r-full); transition:color .25s, background .25s;
}
.langlink:hover{color:var(--ink); background:var(--glass-hi)}
/* Sign in is a returning caller's only way back to their own line. */
.langlink.signin{color:#0B1020; background:var(--aqua); font-weight:700;
  box-shadow:0 6px 20px -8px rgba(79,216,196,.7)}
.langlink.signin:hover{background:var(--aqua-hi); color:#0B1020}

.brand{display:inline-flex; align-items:baseline; gap:11px; min-width:0}
.wm{font:700 clamp(22px,2.3vw,26px)/1 var(--sans); letter-spacing:-.012em;
  display:inline-flex; align-items:baseline; white-space:nowrap; color:var(--ink)}
.wm svg{height:1em; width:auto; display:inline-block; vertical-align:baseline}
.wmi{margin-right:.012em}
/* cool dot = the person, warm dot = the institution. The two-dot logic is the
   part of the brand that survives every palette, so it is never restyled. */
.wm .d1{fill:var(--aqua-hi)} .wm .d2{fill:var(--gold)}
.say{font:700 10px/1 var(--sans); letter-spacing:.2em; color:var(--ink-faint); text-transform:uppercase}
@media (max-width:620px){ .say{display:none} }

/* ---------- buttons ---------- */
.cta{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; min-height:64px; padding:12px 30px; border-radius:var(--r-full);
  background:var(--aqua); color:#0B1020; text-decoration:none;
  font:700 21px/1.2 var(--sans); text-align:center;
  box-shadow:0 12px 32px -14px rgba(79,216,196,.85);
  transition:transform .3s var(--spring), background .25s, box-shadow .25s;
}
.cta:hover{background:var(--aqua-hi); transform:translateY(-2px)}
.cta .label{display:block}
.cta .digits{font-size:14px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; opacity:.72}
.cta.one{margin-top:8px}
.ghost{
  display:inline-flex; align-items:center; min-height:56px; padding:12px 22px;
  border:2px solid var(--hair-strong); border-radius:var(--r-full); background:none;
  color:var(--ink); font:700 18px/1 var(--sans); cursor:pointer;
  transition:background .25s, transform .3s var(--spring), border-color .25s;
}
.ghost:hover{background:var(--glass-hi); border-color:var(--aqua); transform:translateY(-2px)}

/* ---------- hero beats ---------- */
.beats{display:grid; gap:12px; margin-top:26px}
@media (min-width:820px){ .beats{grid-template-columns:repeat(3,1fr); gap:14px} }
.beat{
  display:flex; gap:11px; align-items:flex-start;
  border:1px solid var(--hair); border-radius:var(--r2); padding:15px 16px;
  background:var(--glass); font-size:17px; line-height:1.45; color:var(--ink-muted);
}
.beat .tick{color:var(--aqua); font-size:11px; line-height:1.7; flex:none}

/* ---------- the pair: one sentence, two languages ----------
   The aqua rule marks the interpretation. Gold is reserved, everywhere in this
   system, for the one thing a person has to check themselves. */
.pair{
  border:1px solid var(--hair-strong); border-radius:var(--r3); overflow:hidden;
  background:rgba(22,29,60,.66); padding:22px 22px 24px;
  box-shadow:0 40px 90px -52px rgba(3,6,18,.95);
}
.pair .lbl{
  font:700 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 8px;
}
.pair .lbl.theirs{color:var(--aqua)}
.pair .said{font-size:clamp(19px,1.8vw,24px); line-height:1.4; color:var(--ink); margin:0}
.pair .lbl.theirs ~ .said,
.pair .said:last-child{color:var(--aqua-hi)}
.join{display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--aqua)}
.join svg{flex:none; opacity:.9}
.join .line{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--hair-strong),transparent)}
.join .cap{
  font:700 10.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap;
}

/* ---------- the record card — the one paper object ---------- */
.proof{
  margin:26px 0; border:1px solid var(--paper-hair); border-radius:var(--r2);
  overflow:hidden; background:var(--paper-raised); color:var(--paper-ink);
  box-shadow:0 44px 90px -46px rgba(0,0,0,.85);
}
.proof .stripe{
  background:var(--paper-teal); color:#FAF6F1; padding:9px 20px;
  font:700 11.5px/1.4 var(--sans); letter-spacing:.15em; text-transform:uppercase;
}
.proof .body{padding:22px 20px 24px}
.proof .when{font-size:13.5px; color:var(--paper-faint); font-variant-numeric:tabular-nums; margin:0 0 6px}
.proof h3{font-size:22px; color:var(--paper-ink); margin:0 0 4px}
.proof .who{font-size:15.5px; color:var(--paper-muted); margin:0 0 18px}
.proof .sec{
  font:700 11.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-faint); padding-top:16px; border-top:1px solid var(--paper-hair);
  margin:18px 0 11px;
}
.proof ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px}
.proof li{font-size:16.5px; line-height:1.5; color:var(--paper-muted)}
.proof p{color:var(--paper-muted)}
.proof .attention{
  border:1px solid var(--paper-gold); border-left-width:4px; border-radius:var(--r1);
  background:#FFF6E5; padding:15px 17px; color:var(--paper-gold-ink);
  font-size:16px; line-height:1.5;
}
.proof .attention b{display:block; font:700 11.5px/1 var(--sans); letter-spacing:.13em;
  text-transform:uppercase; margin-bottom:9px}
.proof .attention .val{
  font-family:var(--serif); font-weight:600; font-size:26px; letter-spacing:.06em;
  color:var(--paper-ink); display:inline-block; margin-right:12px;
  font-variant-numeric:tabular-nums;
}
.proof .attention .heard{font-size:14.5px; color:var(--paper-gold-ink); opacity:.85}

/* ---------- steps ---------- */
.steps{display:grid; gap:14px; margin-top:8px}
@media (min-width:900px){ body.buyer .steps{grid-template-columns:1fr 1fr} }
.step{
  border:1px solid var(--hair); border-radius:var(--r2); padding:22px;
  background:var(--glass); display:grid; grid-template-columns:auto 1fr; gap:18px;
}
.step .num{
  width:38px; height:38px; border-radius:var(--r-full); flex:none; display:grid; place-items:center;
  font:700 15px/1 var(--sans); color:var(--gold); border:1px solid rgba(255,194,77,.45);
  font-variant-numeric:tabular-nums;
}
.step p{font-size:17px; line-height:1.5; color:var(--ink-muted); margin:0}
.step .tel{
  font-family:var(--serif); font-weight:600; font-size:20px; color:var(--aqua-hi);
  margin:0 0 6px; letter-spacing:-.01em;
}

/* ---------- what Tiyol does not do ---------- */
.nots{display:grid; gap:14px; margin-top:8px}
@media (min-width:860px){ .nots{grid-template-columns:repeat(3,1fr)} }
.not{
  border:1px solid var(--hair); border-left:3px solid var(--gold); border-radius:var(--r2);
  padding:19px 20px; background:var(--glass); font-size:16.5px; line-height:1.5;
  color:var(--ink-muted);
}
.not b{display:block; color:var(--ink); font-size:18px; margin-bottom:8px}

/* ---------- get your number ---------- */
.getnum{
  border:1px solid var(--aqua); border-radius:var(--r3); padding:26px 24px;
  background:linear-gradient(180deg, rgba(79,216,196,.13), rgba(79,216,196,.05));
  margin:24px 0; text-align:center;
}
.getnum .lbl{
  font:700 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--aqua); margin:0 0 12px;
}
.getnum .sayit{font-size:17px; line-height:1.5; color:var(--ink-muted); margin:0 0 20px}
.getnum .acts{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.getnum .call{
  display:inline-flex; align-items:center; justify-content:center; min-height:62px;
  padding:12px 30px; border-radius:var(--r-full); background:var(--aqua); color:#0B1020;
  text-decoration:none; font:700 20px/1.2 var(--sans);
  box-shadow:0 12px 32px -14px rgba(79,216,196,.85);
  transition:transform .3s var(--spring), background .25s;
}
.getnum .call:hover{background:var(--aqua-hi); transform:translateY(-2px)}
.getnum .save{
  display:inline-flex; align-items:center; justify-content:center; min-height:62px;
  padding:12px 26px; border-radius:var(--r-full); border:2px solid var(--hair-strong);
  color:var(--ink); text-decoration:none; font:700 18px/1.2 var(--sans);
  transition:background .25s, transform .3s var(--spring);
}
.getnum .save:hover{background:var(--glass-hi); transform:translateY(-2px)}
.getnum .after{font-size:15px; color:var(--ink-faint); margin:18px 0 0}
.getnum .after strong{color:var(--aqua-hi)}

/* ---------- privacy list ---------- */
.privacy ul{margin:0; padding:0; list-style:none; display:grid; gap:13px}
.privacy li{
  border:1px solid var(--hair); border-radius:var(--r2); padding:16px 18px;
  background:var(--glass); font-size:17px; line-height:1.5; color:var(--ink-muted);
}
.privacy li strong{color:var(--ink)}
main a{color:var(--aqua); text-underline-offset:.2em; text-decoration-color:rgba(79,216,196,.45)}
main a:hover{color:var(--aqua-hi)}

/* ---------- sticky call bar ---------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:rgba(10,14,32,.86);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-top:1px solid var(--hair); display:flex; justify-content:center;
}
.callbar .cta{width:100%; max-width:30rem}

/* ---------- footer ---------- */
.site-footer{padding:56px 0 calc(96px + env(safe-area-inset-bottom)); border-top:1px solid var(--hair)}
.site-footer .wm{font-size:25px}
.site-footer .rule{height:1px; background:var(--hair); margin:22px 0 20px}
.site-footer p{font-size:15px; color:var(--ink-faint); line-height:1.55}
.site-footer a{color:var(--ink-muted)}
.site-footer a:hover{color:var(--ink)}
.fnav{display:flex; flex-wrap:wrap; gap:8px 24px; margin:0 0 18px}
.fnav a{font-size:16px; text-decoration:none; color:var(--ink-muted)}
.fnav a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:.2em}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}


/* ================= ON SCROLL-DRIVEN REVEALS =================
   Tried and deliberately NOT shipped. `animation-timeline: view()` is the right
   modern answer for the reveals below the fold — no JS, runs on the compositor,
   immune to the background-tab starvation that has broken this page's reveals
   before — and the browser reports support for it here.

   It is not in because its failure mode is an invisible hero, which this page
   has shipped twice, and it could not be verified: every preview surface
   available to me reports document.visibilityState 'hidden', which freezes
   document.timeline at 0 and leaves a time-driven animation pinned to its first
   keyframe. That is indistinguishable from the real bug, so there was no way to
   tell a working implementation from a broken one.

   Two things a future attempt needs to get right, both real:
     - Above the fold nothing scrolls, so an element on screen at scroll 0 sits
       at the START of its view() range and never advances. The first screen
       needs a load animation; only content below it should ride the scroller.
     - A frozen or absent timeline pins the element at 0% no matter what
       fill-mode is set, so the reveal needs a JS backstop regardless — which is
       most of what the observer path already does.
   Verify on a real browser before enabling. */

/* ================= CROSS-DOCUMENT VIEW TRANSITIONS =================
   /, /es, /en, /organizations and /privacidad are one site, and hard-cutting
   between them made them feel like five. The masthead is named so it is treated
   as the same object across the navigation rather than cross-faded with the
   page under it. Ignored entirely where unsupported. */
@view-transition{ navigation:auto; }
.brand .wm{ view-transition-name:wordmark; }
::view-transition-old(root),
::view-transition-new(root){ animation-duration:.32s; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none; }
}