/* Contact page — and, at the bottom, the 404.
   Loaded on /contacto, /en/contact and /404, after tokens.css, base.css and
   components.css. Everything it can borrow it borrows: .section, .shell, .media,
   .pill, .btn, .section-head, .eyebrow and .icon all come from the shared layer —
   what is left here is the visit block, the hours table, the channel rows, the
   numbered policy cards, the FAQ list and the 404's two-language fork.

   (The 404 lives here because this workstream owns exactly one stylesheet and
   the alternative was a third left edge on that page — see the .notfound block.)

   Rules this file is built to (docs/reference-bar.json):
     COLOR-02  no new hue. The only non-neutral fills on this page are the one
               --plum-100 "Hoy" chip, the --blush-100 closing band and the single
               .btn--primary gradient the shared layer already owns; everything
               else is ink on paper, --surface or --surface-sunken
     COLOR-03  text on tint uses --plum-ink, never the raw brand purple
     SHADOW-01 no box-shadow is declared here at all
     RADIUS-01 photo 6 / card 12 / pill — the token set, never a new value
     ICON-01   .icon from components.css: one stroke weight, currentColor
     SPACE-01  spacing comes from the --space-* scale only
     ALIGN-01  the intro is an asymmetric two-column layout and the page has five
               bands of three different grounds; nothing on it is centred
     TYPE-02   the card headings drop to --step-2, the third step of the shared
               four-step scale. No fifth step is introduced anywhere
     A11Y-03   every link row and every action clears 44px of pointer target
*/

/* ---- intro -------------------------------------------------------------- */
/* The gap down to the visit block is the next section's own padding, so the two
   are never separated by 144px of stacked section padding.

   align-items is START, not center. Centred columns are what opened the dead
   band a critic measured between this section and the hours: a four-line text
   column floating in the middle of a taller photograph leaves the space above
   and below it reading as page whitespace rather than as composition. Started
   columns plus a 4:3 plate that matches the copy's height close it. */

.contact-intro {
  padding-block-end: 0;
}

.contact-intro__in {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 62rem) {
  .contact-intro__in {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-4xl);
  }
}

.contact-intro__text {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  /* 47ch measures 66-68 characters in Jost at 18px — inside TYPE-03's 60-75. */
  max-inline-size: 47ch;
}

.contact-intro__cta {
  margin-block-start: var(--space-xs);
}

/* 16:9 is the plate's native crop, so the phone gets the whole room. The desktop
   column tightens to 4:3 and caps at 28rem, which lands its height within ~10px
   of the copy column beside it. */
.contact-intro__media {
  --ratio: 16 / 9;

  inline-size: 100%;
}

@media (min-width: 62rem) {
  .contact-intro__media {
    --ratio: 4 / 3;

    max-inline-size: 28rem;
    justify-self: end;
  }
}

/* ---- the visit block: when, how, where ---------------------------------- */
/* One bordered block, three labelled columns divided by hairlines — not three
   floating cards, and not a two-column panel with the address tacked onto the
   bottom of the second one. Each column carries its own icon and its own
   heading, so "Dónde estoy" is a column of the block rather than a paragraph
   with nothing to sit in. */

.contact-visit {
  padding-block-start: var(--space-3xl);
}

/* SPACE-01 wants >=96px between bands on desktop; the intro contributes 0 because
   its own bottom padding is zero, so this band carries the whole gap. */
@media (min-width: 62rem) {
  .contact-visit {
    padding-block-start: var(--space-4xl);
  }
}

.visit {
  display: grid;
  border: var(--border-hair);
  border-radius: var(--radius-card);
  background: var(--surface);
  /* Keeps the divider hairlines from poking out past the rounded corners. */
  overflow: clip;
}

.visit__panel {
  display: grid;
  gap: var(--space-lg);
  align-content: start;
  padding: var(--space-xl);
}

.visit__panel + .visit__panel {
  border-block-start: 1px solid var(--line);
}

/* Tablet: hours beside contact, "where" full width beneath them. Three columns
   at 768px would give the address 240px, which breaks a street line in two. */
@media (min-width: 48rem) {
  .visit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .visit__panel + .visit__panel {
    border-block-start: 0;
  }

  .visit__panel:nth-child(2) {
    border-inline-start: 1px solid var(--line);
  }

  .visit__panel:nth-child(3) {
    grid-column: 1 / -1;
    border-block-start: 1px solid var(--line);
  }
}

@media (min-width: 62rem) {
  .visit {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.85fr);
  }

  .visit__panel {
    padding: var(--space-2xl);
  }

  .visit__panel + .visit__panel {
    border-inline-start: 1px solid var(--line);
  }

  .visit__panel:nth-child(3) {
    grid-column: auto;
    border-block-start: 0;
  }
}

.visit__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* --step-2 is the third step of the shared scale, the one h3 uses. A card
   heading at the h2 default (35px at 1440) would out-shout the h1. */
.visit__head h2 {
  font-size: var(--step-2);
}

.visit__icon {
  display: inline-flex;
  color: var(--plum-ink);
}

.visit__icon .icon {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.visit__head .status {
  margin-inline-start: auto;
}

/* Shown while the owner has confirmed no public channel: the booking request is
   the one that genuinely reaches her, so it is the one the panel offers. */
.visit__request {
  display: grid;
  gap: var(--space-md);
  justify-items: start;
}

.visit__requestBody {
  color: var(--ink-soft);
  font-size: var(--step-small);
  max-inline-size: 46ch;
}

/* ---- open / closed badge ------------------------------------------------ */
/* Recomputed by js/contact.js in the salon's timezone; the build only writes the
   value that is true at the moment the page is generated. State is carried by
   the word first and the dot second — never by colour alone (SC 1.4.1). */

.status {
  gap: var(--space-xs);
}

.status__dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--ink-muted);
}

.status[data-state="open"] {
  border-color: color-mix(in srgb, var(--ok-600) 45%, transparent);
}

.status[data-state="open"] .status__dot {
  background: var(--ok-600);
}

/* ---- hours table -------------------------------------------------------- */

.hours {
  inline-size: 100%;
  border-collapse: collapse;
}

.hours__day,
.hours__time {
  padding-block: var(--space-sm);
  font-size: var(--step-small);
  font-weight: var(--weight-body);
  line-height: 1.4;
  vertical-align: baseline;
}

.hours__day {
  text-align: start;
  color: var(--ink-soft);
}

.hours__time {
  text-align: end;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.hours__row + .hours__row {
  border-block-start: 1px solid var(--line);
}

.hours__row.is-closed .hours__time {
  color: var(--ink-muted);
}

.hours__row.is-today .hours__day,
.hours__row.is-today .hours__time {
  color: var(--ink);
  font-weight: var(--weight-ui);
}

/* 14px is the ceiling TYPE-04 allows for tracked uppercase, so --step-caps is
   used rather than --step--1, which reaches 15px at 1440. */
.hours__today {
  display: inline-block;
  margin-inline-start: var(--space-xs);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--plum-100);
  color: var(--plum-ink);
  font-size: var(--step-caps);
  font-weight: var(--weight-ui);
  letter-spacing: var(--tracking-caps);
  /* Uppercase Spanish keeps its accents (RAE), and accented capitals are taller
     than plain ones — 1.4 leaves the tilde room instead of clipping it. */
  line-height: 1.4;
  text-transform: uppercase;
}

/* ---- contact channels --------------------------------------------------- */

.channels {
  display: grid;
}

.channel + .channel {
  border-block-start: 1px solid var(--line);
}

.channel__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  min-block-size: 3rem;
  padding-block: var(--space-sm);
  color: var(--ink);
  text-decoration: none;
}

.channel__icon {
  display: inline-flex;
  color: var(--plum-ink);
}

.channel__icon .icon {
  inline-size: 1.5em;
  block-size: 1.5em;
}

.channel__text {
  display: grid;
  gap: var(--space-2xs);
}

.channel__label {
  font-size: var(--step--1);
  color: var(--ink-muted);
  line-height: 1.3;
}

.channel__value {
  font-size: var(--step-small);
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--dur-base) var(--ease-out);
}

.channel__link:hover .channel__value {
  color: var(--plum-ink);
  text-decoration-color: currentcolor;
}

/* One number, two actions. When WhatsApp and the phone hold the same digits the
   row prints them ONCE and offers both ways to use them, instead of two rows
   repeating the same number under two labels. */
.channel--number {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  align-items: start;
}

.channel--number .channel__icon {
  padding-block-start: var(--space-2xs);
}

.channel__value--static {
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.channel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-xs);
}

/* The two shared button tiers, not a third one: only the horizontal padding is
   tightened, because a 32px inline pad puts two pills over a 300px column. */
.channel__action {
  padding-inline: var(--space-lg);
  font-size: var(--step-small);
}

/* ---- address ------------------------------------------------------------ */
/* While the owner has not set a street and a city, this column is one sentence
   saying so. No empty card, no greyed-out map, no invented location (SD-02). */

.address__pending {
  color: var(--ink-muted);
  font-size: var(--step-small);
  max-inline-size: 42ch;
}

.address__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  min-block-size: 3rem;
  padding-block: var(--space-xs);
  color: var(--ink);
  text-decoration: none;
}

.address__lines {
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--step-small);
  line-height: 1.35;
}

.address__link:hover .address__line:first-child {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ---- policies ----------------------------------------------------------- */
/* Four numbered cards, two by two. The numerals are a CSS counter: ornament, so
   they never reach the accessible name of the question, the FAQPage JSON-LD or
   a copy-paste of the page. --ink-muted rather than the gold, which BRIEF §2
   reserves for hairlines and which measures under 4.5:1 on this ground. */

.policy-grid {
  display: grid;
  gap: var(--space-lg);
  counter-reset: policy;
}

@media (min-width: 48rem) {
  .policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-2xl);
  }
}

.policy {
  display: grid;
  gap: var(--space-xs);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--line-strong);
  counter-increment: policy;
}

.policy::before {
  content: counter(policy, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* A question is a label, not a heading: keeping it in the body face at body size
   stops the page growing a fifth step in a heading scale TYPE-02 caps at four. */
.policy__q,
.faq__q {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--weight-ui);
  color: var(--ink);
  line-height: 1.35;
}

.policy__a,
.faq__a {
  color: var(--ink-soft);
  max-inline-size: 60ch;
}

/* ---- FAQ ---------------------------------------------------------------- */
/* Full shell width, split question | answer. It used to sit beside a 19rem
   column holding nothing but its own heading; the heading is now a shared
   .section-head above the list, and the list gets the whole measure. */

.faq {
  display: grid;
  border-block-start: 1px solid var(--line-strong);
}

.faq__item {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-lg);
  border-block-end: 1px solid var(--line-strong);
}

@media (min-width: 48rem) {
  .faq__item {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-xl);
  }
}

/* ---- closing band ------------------------------------------------------- */

.contact-closing__in {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 48rem) {
  .contact-closing__in {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2xl);
  }
}

.contact-closing__text {
  display: grid;
  gap: var(--space-sm);
  max-inline-size: 52ch;
}

/* ---- 404 ---------------------------------------------------------------- */
/* The page is served for every unmatched path in BOTH trees — Cloudflare Pages
   answers /en/anything with the same dist/404.html — so it carries both
   languages side by side, each block with its own lang attribute and its own
   set of destinations. No script: the CSP forbids inline script, and a visitor
   who mistyped an English URL should not need JavaScript to find the way back.

   It uses .shell, not .shell--narrow: on a 1440 screen the narrow shell started
   the body at x=370 while the brand above it and the footer below it started at
   x=128, so the page read as a centred fragment dropped into a left-aligned
   site. One gutter, one left edge, and the second column fills the half of the
   viewport that used to be empty. */

.notfound__in {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 62rem) {
  .notfound__in {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-4xl);
    align-items: start;
  }
}

.notfound__block {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  justify-items: start;
}

/* The measure caps the prose, not the block: the rule lines under the links then
   run to their column's own edge instead of stopping 47ch in, which is what made
   the two languages' lists end on two different arbitrary x positions. */
.notfound__block > p {
  max-inline-size: 42ch;
}

.notfound__block--alt {
  padding-block-start: var(--space-xl);
  border-block-start: 1px solid var(--line);
}

@media (min-width: 62rem) {
  .notfound__block--alt {
    padding-block-start: 0;
    padding-inline-start: var(--space-2xl);
    border-block-start: 0;
    border-inline-start: 1px solid var(--line);
  }
}

.notfound__code {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* A column of destinations, each row a 44px target (A11Y-03). */
.notfound__links {
  display: grid;
  inline-size: 100%;
  border-block-start: 1px solid var(--line);
}

.notfound__links li {
  border-block-end: 1px solid var(--line);
}

.notfound__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-block-size: 2.75rem;
  padding-block: var(--space-xs);
  color: var(--ink);
  text-decoration: none;
}

.notfound__links a:hover {
  color: var(--plum-ink);
}

.notfound__links a:hover .notfound__linkText {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.notfound__linkText {
  font-size: var(--step-small);
}