/* Clinica Dental Dr. Guzman Ramos, Nou Barris - site stylesheet.
   The only stylesheet written by hand for this site. ds.css, booking.css and
   media.css are shared and load AFTER this file, so anything that has to win
   against them is written at a higher specificity and says why in a comment.

   Design read: a purely typographic first presence for a five-star practice
   that has published nothing at all, with a quiet nameplate language, leaning
   toward warm bone type on deep ink with no photograph anywhere.

   THE ARGUMENT OF THE PAGE, because every decision below follows from it.
   This clinic has no website, no social account, no published opening hours
   and not one photograph that could be positively attributed to it: every
   image Google Maps offered belonged to a rival or to nobody, and all of them
   are quarantined. So the page claims nothing it cannot prove, including a
   brand colour it does not have. The accent is achromatic on purpose.

   THE FAILURE MODE this file is defending against is looking POOR rather than
   deliberate. An empty dark page with one heading reads as a broken template.
   The defences are structural: a label margin that runs the length of the
   document, a hairline between every pair, one oversized rating mark, and a
   lot of air on the ds.css spacing scale. There is no image element anywhere
   in this site and no div pretending to be one. */

/* ---------------------------------------------------------------- tokens --
   :root would lose to booking.css and ds.css, which load later and declare on
   :root themselves. html:root is one specificity step higher, so these values
   hold wherever they have to. */
html:root {
  /* This page is dark whatever the system setting is, and the browser has to
     be told so. Without it Chrome draws the native furniture from the LIGHT
     scheme: the calendar glyph inside the date field comes out near-black on
     the #1C2228 input fill and is effectively invisible, the date picker panel
     and the select popup open white against a dark page, and the scrollbar
     matches neither. Verified by rendering the date field before and after.
     This is what sites 03 and 04 already do, for the same reason. */
  color-scheme: dark;

  /* Palette. Nothing here is pure black or pure white. Body ink is cool and
     the accent is warm, so the two separate by hue as well as by weight;
     nothing on the page carries status by that difference alone. Ratios are
     measured against the ground. */
  --ground: #14181c;       /* cool near-black */
  --ink: #bfc5cb;          /* cool light grey, 10.25:1 */
  --muted: #8d959d;        /* 5.88:1, so it stays body-legible */
  --accent: #f2ecdd;       /* warm bone, 15.14:1 */
  --accent-ink: #14181c;   /* lettering inside the bone CTA fill, 15.14:1 */
  --accent-press: #e3dccb; /* the CTA under the pointer. No shimmer, ever. */

  --panel: #171c21;        /* the booking surface, one step off the ground */
  --bg-2: #1a2026;         /* read by booking.css for the confirmation panel */
  --bg-3: #1c2228;         /* read by booking.css for input fills */

  /* Three weights of line, and the distinction is not decorative. --line is
     the hairline between document rows, which is a separator. --line-strong
     bounds a panel. --field-line bounds a control a person has to find and
     hit, so it is the only one measured for contrast: 3.70:1 on the ground
     and 3.33:1 on the input fill, both over the 3:1 that a component boundary
     needs. */
  --line: #2b3238;
  --line-strong: #3d454c;
  --field-line: #6a737c;

  /* Error text. booking.css sets --bad to #b3261e on :root and swaps it to a
     light salmon only under prefers-color-scheme: dark. This page is dark
     whatever the system setting is, and that default sits at 2.73:1 here,
     which fails outright on the one string a person must be able to read.
     Pinned, at a specificity that beats a bare :root inside a media query.
     8.94:1. */
  --bad: #ff9e8d;

  /* One radius system, one step, held everywhere. A nameplate is engraved,
     not rounded. */
  --r-s: 3px;
  --r-m: 3px;

  /* Measured, not assumed: the language switcher is the tallest thing in the
     header (44px links inside a 2px-padded, 1px-bordered shell) and the row
     adds 0.55rem top and bottom, which comes to 68.6px at every width. The
     hero subtracts it so the first screen is exactly one screen, and ds.css
     uses it to keep a focused control out from under the sticky header. */
  --nav-h: 69px;
  --wrap: 66rem;

  /* The label margin. The whole page hangs off this one measurement. */
  --label-col: 11rem;

  /* Interaction dials, read by ds.css. The smallest lift in the set: this
     page settles, it does not bounce. */
  --ds-lift: 1px;
  --ds-dur: 0.32s;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  font-weight: 400;
  /* Nothing on this page may cause a sideways scroll at 360px. */
  overflow-x: hidden;
}

/* THE SERIF, and the brief demands an articulable case before allowing one.
   The case is specific rather than atmospheric: the business is a named
   doctor, there is no photography, no logo and no hours, and the only surface
   a practice like that has ever had is an engraved nameplate beside a door.
   Newsreader is a text serif rather than a branding serif, and it is neither
   Fraunces nor Instrument Serif, which are the tell. It is never bold: 400 is
   the only weight loaded and the only weight used. */
h1, h2, h3, .display {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.002em;
  margin: 0;
}

h2 { font-size: clamp(1.5rem, 1.35rem + 0.7vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0; }
dl, dd { margin: 0; }

a { color: var(--accent); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 3rem);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Icons from assets/social.svg. Always beside a word, never instead of one. */
.si {
  flex: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* The label column, and the one typographic voice that is not the serif or
   the body. Small, spaced, upper case: the engraved caption on the plate. */
.label {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* ---------------------------------------------------------------- reveal --
   The floor under motion.js. If Motion never loads this transition is what
   reveals the page; ds.css switches it off when motion.js takes over. Long
   and almost still, to match data-ds-dur="0.9" and data-ds-rise="6": with no
   imagery on the page, the order in which the rows resolve is the only pacing
   device it has, so the travel is tiny and the settle is slow. */
.rv {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.75, 0.3, 1),
              transform 0.9s cubic-bezier(0.22, 0.75, 0.3, 1);
}
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  background: none;
}

/* The bone as a solid fill with the ground as lettering. 15.14:1. */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-press); border-color: var(--accent-press); }

.btn-ghost {
  background: transparent;
  border-color: var(--field-line);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--bg-3); }

/* aria-disabled rather than disabled: site.js leaves the control reachable so
   a reader can still hear why the route is not open yet. */
.btn[aria-disabled="true"] { color: var(--muted); cursor: default; }

/* ---------------------------------------------------------------- header -- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(2px)) {
  .site-head { background: var(--ground); }
}

.head-row {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding-block: 0.55rem;
}

.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  line-height: 1.2;
  text-decoration: none;
  color: inherit;
  margin-inline-end: auto;
}
.brand b {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0.005em;
}
.brand span {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.lang {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
}
.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  padding-inline: 0.35rem;
  border-radius: 2px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--muted);
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.nav-cta {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--field-line);
  border-radius: var(--r-s);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
}
.nav-cta:hover { background: var(--bg-3); }

/* -------------------------------------------------------------- sections --
   Generous is the point. With no imagery the air is what stops the page
   reading as an empty template, so the rhythm runs one step wider than it
   would on a page carrying photographs. */
.sec { padding-block: clamp(3.5rem, 9vw, 6.5rem); }

/* ------------------------------------------------------------------ hero --
   EXPLICITLY TYPOGRAPHIC. There is no assets/photos directory for this site
   and none is to be created. Four text elements: the trade and the district,
   the name, the telephone, the appointment button. Bottom aligned, like a
   plate set at eye height beside a door, and everything sits inside the box
   so the button is on the first screen at every viewport.
   min-height:100dvh and never height:100vh.

   The header is sticky, which means it is still IN FLOW and takes its 69px out
   of the first screen before the hero begins. A bare min-height:100dvh
   therefore makes the opening screen 69px taller than the screen and slices
   the telephone, the fourth hero element, exactly at the fold. Measured at
   390x844 before and after. The nav height is subtracted here, which is the
   only place that actually shortens the box; adding it to the top padding,
   which is also done below, only pushes the content clear of the bar. */
.hero {
  /* Trimmed from 100dvh to 82dvh on 2026-09-16 after looking at it on a
     laptop. The low masthead is deliberate - this is the one clinic with no
     photography at all, and the austerity is the design - but at 100dvh the
     first thing an owner saw when the pitch was opened was 430px of empty
     black above the fold. 82dvh keeps the drop and the silence, and puts the
     name on the first screen. Raise it back if the emptiness is the point. */
  min-height: calc(82dvh - var(--nav-h));
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
}
@supports not (min-height: 100dvh) {
  .hero { min-height: calc(82vh - var(--nav-h)); }
}

.hero-inner {
  padding-block: calc(var(--nav-h) + clamp(2rem, 8vw, 5rem)) clamp(3rem, 10vw, 6rem);
}

.hero-where {
  padding-top: clamp(1rem, 3vw, 1.75rem);
  border-top: 1px solid var(--line-strong);
}

/* The display is the SMALLEST here of any site in this pipeline, and that is
   the argument: a nameplate is engraved, not shouted. Measured at 390px: the
   line break is explicit so the name is exactly two lines at every width. */
.hero h1 {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-size: clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem);
  line-height: 1.12;
  color: var(--accent);
  max-width: 18ch;
}

.hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.hero-foot .btn { flex: 0 1 15rem; }

.hero-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--field-line);
}
.hero-tel:hover { border-bottom-color: var(--accent); color: var(--accent); }
/* site.js strips the href when a number is not verified. This one is
   verified, but the rule stays so the label never reads as a dead link. */
.hero-tel:not([href]) { border-bottom-color: var(--line); color: var(--muted); }

/* -------------------------------------------------------------- document --
   THE LABEL-MARGIN DOCUMENT. A narrow fixed column of labels, a wide column
   of values, a hairline between every pair. This is the load-bearing
   structure of the whole page. Everything in it comes off the Google Maps
   listing read on 16 September 2026 and nothing else. */
.doc {
  max-width: 54rem;
  border-bottom: 1px solid var(--line);
}

.doc-row {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--line);
}

.doc-row dd { max-width: 60ch; }
.doc-row .sub {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* A value that is a telephone number is the one thing in this document a
   person acts on, so it is the one thing in it that is a link. */
.doc-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid var(--field-line);
}
.doc-tel:hover { border-bottom-color: var(--accent); }
.doc-tel:not([href]) { color: var(--muted); border-bottom-color: var(--line); }

/* The label margin collapses at 46em: the label sits over its value rather
   than beside it, and the hairlines keep doing the grouping work. Declared
   here, in the same block as the layout it collapses, rather than left to
   work itself out. */
@media (max-width: 46em) {
  .doc-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }
}

/* ------------------------------------------------------------------ mark --
   THE RATING. One figure, set in the display serif at a size nothing else on
   this page approaches, because on a practice with no photographs it is the
   only piece of evidence there is. 5,0 out of 5 from 18 Google reviews, and
   the count is all that exists: not one of those review texts was captured,
   so there is no testimonial section anywhere on this site. An empty section
   is honest and a fabricated one is not.
   No counting animation. The number is a fact, not an event. */
.mark {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.mark-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 clamp(0.75rem, 2vw, 1.5rem);
  color: var(--accent);
  font-size: clamp(4.5rem, 2.75rem + 8vw, 9rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.mark-of {
  font-size: clamp(1.25rem, 0.95rem + 1.4vw, 2rem);
  color: var(--ink);
  letter-spacing: 0;
}
.mark-sub {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  max-width: 48ch;
  color: var(--muted);
}
.mark-sub b { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------- statement --
   The hours block, and the most important paragraph on the page. The clinic
   publishes no timetable anywhere, so the page says that plainly instead of
   inventing one. The label margin stays, empty: the text is indented into the
   value column, so the structure is felt as alignment rather than repeated as
   another caption. */
.stmt {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 3rem);
}
.stmt > * { grid-column: 2; max-width: 60ch; }
.stmt p { margin-top: 1.25rem; color: var(--ink); }
.stmt p.aside { color: var(--muted); font-size: 0.9375rem; }

@media (max-width: 46em) {
  .stmt { grid-template-columns: minmax(0, 1fr); }
  .stmt > * { grid-column: 1; }
}

/* --------------------------------------------------------------- booking --
   One step off the ground rather than an inverted section: the page keeps one
   theme from top to bottom. */
.book {
  background: var(--panel);
  border-top: 1px solid var(--line);
}

.book-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
}

.book-aside p {
  margin-top: 1.25rem;
  max-width: 54ch;
  color: var(--ink);
}
.book-aside p.aside { color: var(--muted); font-size: 0.9375rem; }

.tel-big {
  margin-top: 1.75rem;
}
.tel-big a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid var(--field-line);
}
.tel-big a:not([href]) { color: var(--muted); border-bottom-color: var(--line); }

.form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  padding: clamp(1.15rem, 3vw, 1.9rem);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  /* booking.css gives .form textarea `border-radius: inherit`, so the radius
     the textarea uses is the one declared here. */
  border-radius: var(--r-s);
}
.field label {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.field input,
.field select {
  font: inherit;
  font-size: 1rem;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  color: var(--ink);
  background: var(--bg-3);
  border: 1px solid var(--field-line);
  border-radius: var(--r-s);
  width: 100%;
  min-width: 0;
}
/* booking.css styles the textarea off var(--line), which on this ground is a
   1.37:1 hairline: correct between document rows, far too faint for the
   boundary of something a person has to type into. Raised to the same
   measured control border as every other field. Specificity 0,2,1 beats its
   0,1,1, and site.css loading first does not matter. */
.form .field textarea {
  border-color: var(--field-line);
  background: var(--bg-3);
  color: var(--ink);
}
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 2.4rem;
}
.field textarea { width: 100%; }
.field-msg { margin: 0.15rem 0 0; }

.form-error, .form-ok {
  grid-column: 1 / -1;
  display: none;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}
/* Status is never carried by colour alone: the message is a sentence, and it
   arrives with a rule down its inside edge. */
.form-error {
  color: var(--bad);
  border-inline-start: 3px solid var(--bad);
  padding-inline-start: 0.8rem;
}
.form-error a { color: var(--bad); font-weight: 500; text-decoration: underline; }
.form-ok {
  color: var(--ink);
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: 0.8rem;
}
.form-error.show, .form-ok.show { display: block; }

.book-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
}

#book-result { border-radius: var(--r-m); margin-top: 1rem; }

/* ---------------------------------------------------------------- footer -- */
.site-foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.foot-grid {
  display: grid;
  gap: 1.5rem;
}

.foot-brand {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.125rem;
}
.site-foot address {
  font-style: normal;
  color: var(--muted);
  font-size: 0.9375rem;
  margin-top: 0.3rem;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid transparent;
}
.foot-links a:hover { color: var(--accent); border-bottom-color: currentColor; }

.demo-notes {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  max-width: 62ch;
}
.demo-notes p {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ------------------------------------------------------------ wide sizes -- */
@media (min-width: 46em) {
  .form {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
  }
  .field.full { grid-column: 1 / -1; }
}

@media (min-width: 62em) {
  .nav-cta { display: inline-flex; }

  .book-grid {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    align-items: start;
  }

  .foot-grid {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* The narrowest phones. The label margin is already collapsed by here; this
   only keeps the oversized mark and the hero name from crowding the gutter. */
@media (max-width: 22em) {
  .hero h1 { font-size: 2rem; }
  .mark-figure { font-size: 4rem; }
  .hero-foot .btn { flex: 1 1 100%; }
}