/* Preview-only additions on top of the live styles.css.
   Nothing here is deployed; it exists so the multi-page structure can be
   looked at before anything is posted. */
.site-nav .nav-links a.on { color: var(--accent-dark); font-weight: 650; }
.page-head { padding: calc(var(--nav-height) + 48px) 0 28px; background: var(--bg-tinted); }
.page-head h1 { margin: 0 0 28px; font-size: clamp(28px, 4vw, 42px); }
.page-head p { margin: 0; max-width: 62ch; color: var(--ink-soft); font-size: 17px; }
.band { padding: 44px 0; }
.band + .band { border-top: 1px solid rgba(0,0,0,.07); }
.band-tint { background: var(--bg-tinted); }
.lede { font-size: 18px; max-width: 64ch; }
.cols { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: var(--card); border-radius: var(--radius); padding: 22px 22px 24px;
        box-shadow: var(--shadow-soft); }
.card h3 { margin: 0 0 8px; font-size: 19px; }
.card p:last-child { margin-bottom: 0; }
.ptable { width: 100%; border-collapse: collapse; margin: 6px 0 4px; }
.ptable th { text-align: left; font-size: 13px; text-transform: uppercase;
             letter-spacing: .04em; color: var(--ink-soft); padding: 0 0 8px; font-weight: 650; }
.ptable td { padding: 9px 0; border-top: 1px solid rgba(0,0,0,.08); font-size: 16px; }
.ptable td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.note { background: var(--bg-accent); border-left: 3px solid var(--accent);
        padding: 14px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 18px 0; }
.note strong { color: var(--accent-dark); }
.shot { width: 100%; border-radius: var(--radius); display: block; box-shadow: var(--shadow-soft); }
/* ROWS, not columns. The bios are written by the people in them and run from
   two paragraphs to five; side-by-side columns made the short ones look like
   an afterthought and left a ragged bottom edge. A row per person takes any
   length without the others having to match it. */
.team-grid { display: grid; gap: 44px; grid-template-columns: 1fr; }
.member { display: grid; grid-template-columns: 264px minmax(0, 1fr);
          column-gap: 34px; align-items: start; }
/* The text is ONE grid child, not many. Spanning the photo with
   `grid-row: 1 / -1` does not work here: with no explicit rows declared, -1 is
   the last line of the EXPLICIT grid, which is line 1, so the photo stayed in
   row one and the name sat beside it while the bio began 275px lower. */
/* 2/3, WHICH IS THE SHAPE THE PHOTOGRAPHS ACTUALLY ARE.
   It was 4/5, so every portrait was trimmed to fit a frame none of them came
   in -- and the two that had been exported landscape lost most of the person.
   All five sources are now 666x1000, so matching the box to them means the
   crop does nothing and each picture is shown as it was taken. Alex,
   2026-09-19: "the source photos ... neither one cut off on the left side.
   fix them accordingly on the page." */
.member img { width: 100%; aspect-ratio: 2/3; object-fit: cover; object-position: 50% 50%;
              border-radius: var(--radius); display: block; }
.member h3 { margin: 0 0 2px; font-size: 20px; }
.member .role { margin: 0 0 10px; color: var(--accent-dark); font-size: 14px; font-weight: 600; }
.member p { font-size: 15px; line-height: 1.6; max-width: 74ch; }
.member p:last-child { margin-bottom: 0; }
/* A bio written in Spanish is a signal to the reader it is meant for, not a
   footnote -- give it its own weight rather than burying it in the run. */
.member p[lang="es"] { border-left: 3px solid var(--accent); padding-left: 14px;
                       font-style: italic; }
@media (max-width: 620px) {
  .member { grid-template-columns: 1fr; row-gap: 16px; }
  .member img { max-width: 240px; }
}
 /* NOT cropped. A fixed height with object-fit:cover cut the heads off the
   group shot -- the one image where every face is the point. It keeps its own
   proportions and the whole frame is shown. */
.hero-shot { width: 100%; height: auto; display: block;
             border-radius: var(--radius); box-shadow: var(--shadow); }
.todo { background: #fff6e8; border: 1px dashed #d8a24a; color: #6b4a12;
        padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; margin: 14px 0; }
.crumbs { font-size: 14px; color: var(--ink-soft); margin: 0 0 6px; }

/* The logo: small beside the wordmark in the nav, larger over the headline at
   home. It was missing entirely from the first pass. */
.nav-brand { display: inline-flex; align-items: center; gap: 10px; }
.nav-mark { height: 30px; width: auto; display: block; }
.head-logo { height: 84px; width: auto; display: block; margin: 0 0 14px; }
@media (max-width: 640px) { .nav-mark { height: 26px; } .head-logo { height: 62px; } }

/* BOOKING IS WHY MOST PEOPLE COME HERE.
   .nav-portal carried no styling at all, so "Book" rendered as a plain nav link
   the same size as "Aftercare" -- the one thing the site exists to make easy was
   the least visible thing on the page. The live site has a solid button in the
   nav AND a large one under the hero; this puts both back.
   Alex, 2026-09-19: "most people are sent there because of booking, it needs to
   be present." */
/* QUALIFIED WITH .nav-links, because that rule sets `color: var(--ink-soft)`
   on every anchor in the nav and beats a lone .nav-portal on specificity
   (0,1,1 against 0,1,0). White was declared here and thrown away, so the
   button rendered grey-on-red. Alex, 2026-09-19: "barely legible that way". */
.nav-links a.nav-portal,
.nav-portal {
  background: var(--accent);
  color: #fff;
  padding: 7px 16px;
  border-radius: 999px;
  font-weight: 600;
}
.nav-links a.nav-portal:hover, .nav-links a.nav-portal:focus,
.nav-portal:hover, .nav-portal:focus { background: var(--accent-dark); color: #fff; }

/* .page-head p sets margin: 0 and is MORE SPECIFIC than a lone .cta-row
   (0,1,1 against 0,1,0), so the gap above the button was declared and then
   silently discarded -- it computed to 0px. Qualified with the element so it
   actually wins. */
.page-head p.cta-row,
.cta-row { margin: 26px 0 0; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.btn-book {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}
.btn-book:hover, .btn-book:focus { background: var(--accent-dark); color: #fff; }
.cta-aside { color: var(--ink-soft); font-size: 15px; }
@media (max-width: 640px) {
  .btn-book { display: block; text-align: center; font-size: 17px; }
  .cta-row { display: block; }
  .cta-aside { display: block; margin-top: 10px; }
}

/* The line that tells somebody reading a spay price that the number can move.
   It sits under each table -- dogs AND cats -- because a note under only one of
   them leaves the other looking like a fixed price. */
.ptable-note { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }

/* The star beside a spay/neuter price, and the line under the table that says
   what it means. Alex, 2026-09-19: the price must carry a mark, and the mark
   must be explained right there rather than only in a section further down. */
.ptable sup { color: var(--accent); font-weight: 700; }
.ptable-note .star { color: var(--accent); font-weight: 700; }

/* The address under the name in the nav. Small and muted on purpose: it is
   there for somebody who needs to find the door, not competing with the
   navigation beside it. Hidden on narrow screens, where the nav is already
   wrapping and the footer carries the same address anyway. */
.nav-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.nav-brand-addr {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: .01em;
  margin-top: 2px;
  white-space: nowrap;
}
/* The address line under the brand is a courtesy, not navigation -- the
   contact page carries it properly. It is the widest thing in the bar
   after the links, so on a smaller laptop it gives way first. Raised from
   900px to 1100px when the Spanish labels made the row overflow between
   those two widths: better to drop a duplicate address than to squeeze
   the links until they are unreadable. */
@media (max-width: 1100px) { .nav-brand-addr { display: none; } }

/* Three map vendors rather than one guess. There is no navigation-app-agnostic
   URL scheme -- geo: is ignored on iOS, and every vendor scheme dead-ends when
   its app is absent -- so each of these is an ordinary https link that opens
   the app when it is installed and a web map when it is not. */
/* Tap targets, not text links. A phone number in a paragraph is a 14px
   target; these are comfortably over the 44px Apple and Google both ask for,
   so they can be hit with a thumb while holding a cat carrier. */
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.linkbtn {
  display: inline-block;
  padding: 11px 16px;
  border: 1px solid var(--mauve);
  border-radius: 999px;
  background: var(--card);
  color: var(--accent-dark);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
}
.linkbtn:hover, .linkbtn:focus {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ---- THE NAVIGATION ON A PHONE -------------------------------------------
   There wasn't one. `.nav-links { display: none }` below 640px hid every link
   and nothing replaced it, so a phone got the clinic's name and no way to
   reach Prices, Team, Contact or anything else. Alex, 2026-09-20: "when i go
   to the page on my mobile phone, it is missing all the header section".

   A drawer from the left rather than a dropdown: nine items is too many to
   push the page down, and a panel anchored to the edge is easier to reach
   with a thumb. Book stays in the bar, never behind the toggle -- it is what
   most people came to do. */
.nav-toggle { display: none; }

@media (max-width: 900px) {
  /* THE BAR'S FROSTING HAS TO GO HERE, and this is not cosmetic.
     .site-nav carries backdrop-filter: saturate(1.4) blur(10px). A
     backdrop-filter creates a containing block for fixed-position descendants,
     exactly as transform does -- so the drawer below, which is position:fixed
     with top:0 and bottom:0, was being laid out against the 60px bar instead of
     the viewport and came out 102px tall. Dropping the blur on phones returns
     the drawer's containing block to the viewport, and costs a decorative
     effect that a phone is better off not compositing anyway. */
  .site-nav { backdrop-filter: none; -webkit-backdrop-filter: none; }

  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: auto; margin-right: 10px;
    background: none; border: 0; padding: 10px 6px;
    font: inherit; font-size: 14px; font-weight: 600;
    color: var(--ink); cursor: pointer;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: var(--ink); content: ""; position: relative;
  }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after  { top: 4px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: -2px; transform: rotate(-45deg); }

  .site-nav .nav-links {
    display: block;                      /* it was display:none -- that was the bug */
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(78vw, 300px);
    margin: 0; padding: 78px 0 24px;
    background: var(--card);
    box-shadow: var(--shadow);
    transform: translateX(-100%);
    transition: transform .22s ease;
    overflow-y: auto;
  }
  .site-nav .nav-links.open { transform: translateX(0); }
  .site-nav .nav-links li { display: block; }
  .site-nav .nav-links a {
    display: block; padding: 14px 22px; font-size: 17px;
    border-bottom: 1px solid var(--bg-tinted);
  }
  .site-nav .nav-links a.on { background: var(--bg-tinted); }

  /* BELOW .site-nav, which is z-index 50 -- and that number is the whole point.
     .site-nav is position:fixed with a z-index, so it is a stacking context:
     the drawer's z-index:60 is scoped INSIDE it and cannot lift it above a
     sibling of the nav. This scrim is a child of <body>, so it competes with
     the nav's 50, not with the drawer's 60. At 55 it painted over the entire
     menu -- and at 42% opacity the links still looked perfectly visible while
     every tap landed on the scrim instead. Alex, 2026-09-20: "clicking a menu
     item doesn't respond in any way on my phone." */
  .nav-scrim {
    position: fixed; inset: 0; background: rgba(42, 31, 31, .42);
    opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 40;
  }
  .nav-scrim.open { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
}

/* A GUTTER. .container is max-width:1040px with margin:0 auto and no padding,
   so at any width below 1040 the text ran edge to edge -- on a phone the
   headings, the paragraphs and every price row touched both sides. It showed
   worst on the price tables, where the figures are right-aligned against the
   screen edge, but it was every page. Alex, 2026-09-20: "prices section is too
   wide, it needs about 10 px on the left and right".

   16px rather than 10: it is what .site-nav already uses on mobile, so the body
   text now lines up with the logo and the Menu button above it instead of
   sitting 6px inside them. Scoped below 1040 so the wide desktop layout, which
   is already signed off, is untouched. */
@media (max-width: 1040px) {
  .container { padding-left: 16px; padding-right: 16px; }
}

/* ==================== LANGUAGE SWITCH ==================== */
/* Injected by i18n.js into .site-nav, beside Book. It says the language you
   would GET, not the one you are in -- "Espa\00f1ol" is readable to the person
   who needs it, which a flag or "ES" is not. */
.site-nav .nav-lang {
  appearance: none;
  border: 1px solid var(--line, #e3d3d1);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
}
.site-nav .nav-lang:hover,
.site-nav .nav-lang:focus-visible {
  color: var(--accent-dark);
  border-color: var(--accent);
}

/* On a phone the bar holds brand, Menu, this and Book, so it gives up its
   border and some padding rather than pushing Book off the edge. */
@media (max-width: 900px) {
  .site-nav .nav-lang {
    border-color: transparent;
    padding: 7px 6px;
    margin-right: 2px;
  }
}

/* Hides the page for the few milliseconds between parsing and translating, so
   a Spanish reader does not see English flash first. The class is added by an
   inline script in the head, NEVER in the markup -- with JavaScript off it is
   never added and the page shows normally. i18n.js removes it, and removes it
   again on a 400ms timer in case anything at all went wrong. */
.i18n-pending body { visibility: hidden; }

/* ==================== NAV IN TWO LANGUAGES ==================== */
/* A nav label must never break across lines. In English none of them was long
   enough to try; "Antes de cirugía" and "Gatos ferales" are, and without this
   they came apart into a three-line stack that pushed the bar out of shape. */
.site-nav .nav-links a { white-space: nowrap; }

/* Spanish is roughly a fifth wider than English for the same words, and the bar
   was already close to full. Rather than shorten the labels to the point of
   being unclear, the row gives up some of its spacing when the page is in
   Spanish -- and only then, so the English bar is untouched. */
html[lang="es"] .site-nav .nav-links { gap: 16px; }
@media (max-width: 1100px) {
  html[lang="es"] .site-nav .nav-links { gap: 12px; font-size: 13px; }
}

/* The pill never breaks. In English "Book" could not; in Spanish the same
   button is a longer word and split across two lines, which made the bar taller
   than everything beside it. */
.site-nav .nav-portal { white-space: nowrap; }