/* ================================================================
   VEKTORA — shared shell
   Tokens, primitives, nav, footer, reveal, a11y.

   One system, two verticals. Everything accent-coloured reads from
   --accent; a page re-skins itself by redeclaring the four accent
   tokens in its own :root. Structure, type and rhythm never change.

     /clinicas      amber   (default, below)
     /restaurantes  sea blue (see restaurantes.html)

   Loaded by all TWELVE landing pages: the Spanish originals, the four
   en/ mirrors and the four ru/ mirrors. Each then layers its own inline
   <style> on top; where the two overlap the values are identical, so
   the cascade is a no-op.

   The ru/ pages additionally override --sans and --mono in their own
   :root, because DM Sans and DM Mono have no Cyrillic subset. Anything
   you add here must therefore work in Onest and IBM Plex Mono too —
   do not hard-code 'DM Sans' or 'DM Mono' outside the token.
================================================================ */
:root {
  /* Surfaces */
  --bg:           #080706;
  --bg-deep:      #050403;
  --surface-1:    #0F0E0D;
  --surface-2:    #161413;
  --surface-3:    #1C1916;

  /* Brand accent — amber/cognac */
  --amber:        #D4A574;
  --amber-bright: #E8C49A;
  --amber-deep:   #A8825C;
  --amber-glow:   rgba(212,165,116,0.18);

  /* Active accent — per-vertical. Defaults to amber. */
  --accent:        var(--amber);
  --accent-bright: var(--amber-bright);
  --accent-deep:   var(--amber-deep);
  --accent-glow:   var(--amber-glow);
  --accent-rgb:    212,165,116;

  /* Text — every token used for words clears WCAG AA (4.5:1) on --bg,
     --surface-1 AND --surface-2. Small text is differentiated by SIZE,
     not by dimness: the old --text-3 (#5E5648) sat at 2.78:1 and was
     carrying the footer, the hero meta line and the strip labels.
     --text-4 is decorative ONLY — dots, hairlines, strikethroughs.
     If you are about to set readable words in it, use --text-3. */
  --cream:        #F5F1E8;   /* 17.9 : 1 */
  --cream-dim:    #D8D1C2;   /* 13.2 : 1 */
  --text-2:       #948A7C;   /*  5.9 : 1 */
  --text-3:       #8A8175;   /*  5.3 : 1  (was #5E5648 — 2.78, failed) */
  --text-4:       #6A6154;   /*  3.3 : 1  — NOT for text */

  /* Borders & rules */
  --border:       #1E1B18;
  --border-soft:  #151311;
  --border-accent: rgba(var(--accent-rgb), 0.22);

  /* Type */
  --sans:  'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: 'Playfair Display', Georgia, "Times New Roman", serif;
  --mono:  'DM Mono', ui-monospace, "SF Mono", Menlo, monospace;

  /* Easing */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shadows */
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.32), 0 8px 24px rgba(0,0,0,0.22);
  --shadow-lift: 0 2px 4px rgba(0,0,0,0.35), 0 24px 60px rgba(0,0,0,0.42);
  --glow-accent: 0 0 0 1px rgba(var(--accent-rgb),0.18), 0 16px 40px rgba(var(--accent-rgb),0.08);

  /* Layout */
  --max:        1240px;
  --max-narrow: 900px;
  --gutter:     clamp(22px, 4vw, 56px);

  /* Height of the sticky nav. Anchors scroll to --nav-h + breathing room,
     otherwise every in-page link lands with its heading hidden under the bar.
     Overridden at the mobile breakpoint, where the nav wraps to two rows. */
  --nav-h: 62px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* The site had NO scroll offset at all: `Ver la demo` took you to the demo
     with the demo's own headline behind the nav. Applies to every anchor. */
  scroll-padding-top: calc(var(--nav-h) + 18px);
}
body {
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--sans);
  font-weight: 300;
  /* Denser than editorial default on purpose: these are pages people
     scan while deciding, not essays they read. */
  font-size: 15.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--bg); }

/* Grain texture — atmospheric depth.
   z-index 80, not 9999: at 9999 it sat on top of the lightbox (z-index 200)
   and applied an overlay blend to the full-size screenshot the user had just
   opened in order to read it. It now sits below the lightbox and the sticky
   CTA, and above ordinary page content, which is all it was ever for. */
body::after {
  content:''; position: fixed; inset: 0; pointer-events: none; z-index: 80;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 220px;
  opacity: .55; mix-blend-mode: overlay;
}

/* ================================================================
   PRIMITIVES
================================================================ */
/* Section label. 12px, not 11 — it is wayfinding, not decoration, and
   at 11px/.22em it was the least legible informative text on the page. */
.eyebrow {
  font-family: var(--sans); font-weight: 400; font-size: 12px;
  text-transform: uppercase; letter-spacing: .15em;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.eyebrow::before { content:''; width: 24px; height: 1px; background: var(--accent); opacity: .6; }
.eyebrow.center { justify-content: center; }
.eyebrow.muted { color: var(--text-3); }
.eyebrow.muted::before { background: var(--text-3); opacity: .5; }

/* Headings are ROMAN. Italic Playfair at display size is slower to scan,
   and when every heading was italic the italic meant nothing. It is now
   spent deliberately: one h1 per page, .accent spans, and .hsub below.
   Do not put font-style: italic back on h2/h3. */
h1, h2, h3 {
  font-family: var(--serif); font-style: normal; color: var(--cream);
  font-weight: 400; text-wrap: balance;
}
h1 { font-size: clamp(34px, 4.9vw, 62px); line-height: 1.06; letter-spacing: -.022em; }
h2 { font-size: clamp(25px, 3.1vw, 36px); line-height: 1.14; letter-spacing: -.014em; }
h3 { font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.34; }

/* The hero h1 keeps the italic — it is the one voice moment per page. */
.hero h1 { font-style: italic; letter-spacing: -.026em; line-height: 1.04; }

/* Demoted aphorism. The line that used to BE the h2 lives here: the
   heading now carries the information, this carries the turn of phrase.
   Sits between h2 and .lede. */
.hsub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.36;
  color: var(--cream-dim);
  letter-spacing: -.01em;
  margin-top: 10px; max-width: 34ch;
  text-wrap: pretty;
}

p { text-wrap: pretty; }
em { font-style: italic; color: var(--cream-dim); font-weight: 400; }
strong { color: var(--cream); font-weight: 500; }
.accent { color: var(--accent); font-style: italic; }
.cream { color: var(--cream); }
.mono { font-family: var(--mono); font-weight: 400; font-size: 0.92em; letter-spacing: 0; }

a { color: inherit; text-decoration-color: var(--text-3); text-underline-offset: 3px; transition: color 200ms var(--ease-out); }
a:hover { color: var(--cream); }

.section-rule { width: 100%; height: 1px; background: var(--border); }
.accent-rail { border-left: 2px solid var(--accent); padding-left: 24px; }

/* Mid-page exit. The selling pages ran 5 sections and ~1,200 words with
   no way to act — the nav CTA was the only path. Deliberately a text
   link, not a button: it offers a way out without interrupting the read. */
.midcta {
  margin-top: var(--sec-tight);
  padding-top: 20px; border-top: 1px dashed var(--border);
  font-size: 14.5px; color: var(--text-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
}
.midcta a {
  color: var(--accent); text-decoration: none; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 0; min-height: 44px;
}
.midcta a:hover { color: var(--accent-bright); }
.midcta a:hover .arrow { transform: translateX(3px); }
.midcta .arrow { display: inline-block; transition: transform 220ms var(--ease-out); }

/* Buttons */
.btn {
  font-family: var(--sans); font-weight: 500; font-size: 13.5px; letter-spacing: .03em;
  border-radius: 3px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid transparent;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out),
              border-color 200ms var(--ease-out), transform 180ms var(--ease-out),
              box-shadow 240ms var(--ease-out);
  white-space: nowrap;
  position: relative;
}
.btn-primary {
  background: var(--accent); color: var(--bg);
  padding: 14px 26px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 24px rgba(var(--accent-rgb),0.18);
}
.btn-primary:hover {
  background: var(--accent-bright);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 12px 32px rgba(var(--accent-rgb),0.28);
}
.btn-primary:active { transform: translateY(0) scale(.98); }

.btn-ghost {
  background: transparent; color: var(--cream-dim);
  padding: 14px 22px;
  border-color: var(--border);
}
.btn-ghost:hover { color: var(--cream); border-color: var(--text-3); background: rgba(245,241,232,0.02); }

.btn .arrow { display: inline-block; transition: transform 220ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-nav {
  background: var(--cream); color: var(--bg);
  padding: 9px 18px; font-size: 12.5px;
  border-radius: 3px;
}
.btn-nav:hover { background: white; transform: translateY(-1px); }

/* Buttons are nowrap so labels never break mid-phrase. On a very narrow
   phone that turns a long CTA into a min-content floor its grid track cannot
   shrink below, which pushed cards past the viewport edge — invisibly,
   because body { overflow-x: hidden } clipped the result. Below 380px a
   two-line button is strictly better than a clipped one. */
@media (max-width: 380px) {
  .btn { white-space: normal; text-align: center; }
  .btn-primary, .btn-ghost { padding-left: 18px; padding-right: 18px; }
}

/* Touch feedback. Every interactive element on this site signalled itself
   with :hover only, and `-webkit-tap-highlight-color: transparent` removed
   the platform default — so on a phone, tapping the nav or the footer gave
   no acknowledgement at all. These are the replacements. */
.btn:active { transform: translateY(0) scale(.985); }
.btn-nav:active { background: var(--cream-dim); }
.btn-ghost:active { background: rgba(245,241,232,0.06); }

/* ================================================================
   NAV — logo · vertical switcher · one primary CTA
================================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  background: rgba(8,7,6,0.72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--border-soft);
  transition: border-color 240ms var(--ease-out);
  gap: 16px;
}
.nav-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--cream);
  font-family: var(--sans); font-weight: 500; font-size: 16px;
  letter-spacing: -.01em;
  flex-shrink: 0;
}
.nav-logo svg { display: block; }
.nav-logo-text { display: inline-flex; align-items: baseline; }
.nav-logo-dot { color: var(--accent); }

.nav-meta {
  font-family: var(--sans); font-weight: 400; font-size: 12px;
  color: var(--text-3); letter-spacing: 0;
  display: none;
}
@media (min-width: 880px) { .nav-meta { display: inline-block; } }

/* Vertical switcher — the two service lines, always both reachable.
   Sits in the nav's centre slot on desktop; collapses under the bar
   on mobile so the logo and CTA keep their hit targets. */
.nav-verts {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: rgba(245,241,232,0.02);
}
.nav-vert {
  font-family: var(--sans); font-weight: 400; font-size: 12.5px;
  color: var(--text-2); text-decoration: none;
  padding: 7px 15px; border-radius: 100px;
  white-space: nowrap;
  transition: color 200ms var(--ease-out), background 200ms var(--ease-out);
}
/* Third slot is the open-ended one — kept visually quieter than the two
   verticals, matching the positioning: invited, not advertised. */
.nav-vert.open { color: var(--text-3); }
.nav-vert.open:hover { color: var(--cream-dim); }
.nav-vert:hover { color: var(--cream); background: rgba(245,241,232,0.05); }
.nav-vert[aria-current="page"] {
  color: var(--cream);
  background: rgba(var(--accent-rgb), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.28);
}
/* ---------------- NAV ON A PHONE ----------------
   Two rows, every target ≥44px, and it gets out of the way when you scroll.

   Before: the bar wrapped to two or three rows and measured 130–174px —
   up to 21% of an iPhone viewport — and on /clinicas and /restaurantes the
   fixed bottom CTA added ~70px more. A quarter of the screen was chrome
   that never moved. Now the bar retracts on scroll-down and comes back on
   scroll-up (see the `nav-hidden` class, driven from the page scripts), so
   the full viewport is available while reading and the CTA is one flick up. */
@media (max-width: 780px) {
  :root { --nav-h: 112px; }

  .nav {
    flex-wrap: wrap; row-gap: 6px; gap: 8px;
    padding: 8px var(--gutter);
    transition: transform 260ms var(--ease-out), border-color 240ms var(--ease-out);
    will-change: transform;
  }
  .nav.nav-hidden { transform: translateY(-100%); }

  .nav-logo { font-size: 15px; gap: 8px; min-height: 44px; }
  .nav-right { gap: 6px; }

  /* Row 2 — the vertical switcher, full width, three equal 44px targets. */
  .nav-verts { order: 3; width: 100%; justify-content: center; padding: 2px; }
  .nav-vert {
    flex: 1; text-align: center;
    padding: 12px 8px; min-height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap;
  }

  /* Row 1 — logo, language, CTA. The CTA carries the longest label on the
     page, so it is the one that has to give ground horizontally; it keeps
     its 44px height through padding rather than through font size. */
  .btn-nav { padding: 13px 13px; font-size: 12px; min-height: 44px; }
  /* .nav-lang sizing lives further down, AFTER its own base rule — putting
     it here loses the cascade at equal specificity. */
}

/* Below ~360px the three vertical pills stop fitting on one row at a
   readable size. Let them wrap rather than clip — `overflow-x: hidden` on
   the body was silently shaving the third pill off at 320px. */
@media (max-width: 360px) {
  .nav-verts { flex-wrap: wrap; border-radius: 14px; }
  .nav-vert { flex: 1 1 auto; }
}

/* Language toggle — three states (ES · EN · RU), a segmented pill rather
   than a dropdown. Sits left of the CTA; the inactive languages are links. */
.nav-lang {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 100px;
  padding: 2px; margin-right: 4px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
}
.nav-lang a {
  padding: 10px 11px; border-radius: 100px;
  min-height: 40px; display: inline-flex; align-items: center;
  color: var(--text-3); text-decoration: none;
  transition: color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.nav-lang a:hover { color: var(--cream); }
.nav-lang a[aria-current="page"] {
  color: var(--cream); background: rgba(245,241,232,0.07);
}
/* On a phone the pill used to be `display: none` outright — there was no way
   to change language at all, which is a bug on a bilingual site and a blocker
   on a trilingual one. Instead of hiding the control, hide the CURRENT
   language: the page you are reading is already the "you are here" signal,
   so two codes are enough and the row still fits at 390px. */
@media (max-width: 520px) {
  .nav-lang a[aria-current="page"] { display: none; }
}
/* Must come after the .nav-lang base rules above, not up in the layout
   block — same specificity, so source order decides. */
@media (max-width: 780px) {
  .nav-lang { margin-right: 0; }
  .nav-lang a { padding: 13px 9px; min-height: 44px; }
}

.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-link {
  font-family: var(--sans); font-weight: 400; font-size: 13px;
  color: var(--text-2); text-decoration: none;
  padding: 9px 14px; border-radius: 3px;
  transition: color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.nav-link:hover { color: var(--cream); background: rgba(245,241,232,0.04); }
@media (max-width: 640px) { .nav-link { display: none; } }

/* ================================================================
   FOOTER
================================================================ */
.footer {
  padding: clamp(28px, 3.5vw, 40px) var(--gutter) clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--border-soft);
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 22px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--text-3); letter-spacing: .02em;
}
.footer-logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text-2);
  font-family: var(--sans); font-weight: 500; font-size: 14px;
  letter-spacing: -.01em;
}
.footer-logo span { color: var(--accent); }
.footer-legal { display: inline-flex; gap: 4px 18px; flex-wrap: wrap; align-items: center; }
.footer-legal a {
  color: var(--text-3); text-decoration: none;
  transition: color 200ms var(--ease-out);
  display: inline-flex; align-items: center;
}
.footer-legal a:hover { color: var(--cream-dim); }
.footer-legal a:active { color: var(--accent); }
.footer-legal .dot { color: var(--text-4); }
.footer-icons { display: inline-flex; gap: 12px; }
.footer-icons a {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); border: 1px solid var(--border);
  border-radius: 6px;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.footer-icons a:hover { color: var(--accent); border-color: var(--text-3); }
.footer-icons a:active { background: rgba(245,241,232,0.06); }

/* On a phone this was nine flex items — seven links and six interpunct
   separators — each 19px tall with zero padding and an 18px gap, so the
   dots wrapped onto lines by themselves and left orphans. Drop the dots,
   give the links real hit areas, and let them wrap as a proper list. */
@media (max-width: 640px) {
  .footer { gap: 18px; }
  .footer-legal { gap: 0 22px; width: 100%; }
  .footer-legal .dot { display: none; }
  .footer-legal a { min-height: 44px; padding: 4px 0; }
}

/* ================================================================
   REVEAL
================================================================ */
/* Used sparingly now — on section headings only. Animating every card
   gates content behind scroll and makes the page feel slower than it is. */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  /* `animation-duration: 0.001s` on an INFINITE animation does not stop it —
     it runs it 1000×/second. The compatibility marquee on /clinicas was
     thrashing for exactly the users who asked for less motion. Pause it and
     zero the iteration count instead. */
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    animation-play-state: paused !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   UTILITY + ACCESSIBILITY
================================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.skip-link {
  position: absolute; left: 14px; top: -64px; z-index: 220;
  background: var(--accent); color: var(--bg);
  padding: 13px 18px; border-radius: 4px;
  font-family: var(--sans); font-weight: 500; font-size: 13px;
  text-decoration: none;
  transition: top 200ms var(--ease-out);
}
.skip-link:focus { top: 14px; color: var(--bg); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
* { -webkit-tap-highlight-color: transparent; }

/* Kills the 300ms tap delay some mobile webviews still apply before firing
   click, which made the FAQ accordions feel broken rather than slow. */
a, button, summary, [role="button"], input, label { touch-action: manipulation; }

/* The WhatsApp number and the email address live inline inside a closing
   sentence, which made them ~17px tall. WCAG 2.5.8 exempts inline targets,
   so this is not a violation — but these are the last conversion path on the
   page and a 17px strip is a mean thing to ask a thumb to hit. Open the line
   spacing and give them real padding on touch. */
@media (max-width: 640px) {
  .contact-alt, .close-alt { line-height: 2.1; }
  .contact-alt a, .close-alt a {
    display: inline-block; padding: 7px 2px;
    text-underline-offset: 4px;
  }
}

/* Room for the fixed bottom CTA on /clinicas and /restaurantes. It is
   ~70px of opaque bar with no compensating padding, so it sat on top of the
   LTV disclaimer, the schematic caption, and any FAQ answer that expanded
   underneath it. Pages without the bar are unaffected — the class is only
   present where the bar is. */
@media (max-width: 720px) {
  body:has(.sticky-mobile-cta) { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
}

.tnum { font-variant-numeric: tabular-nums; }