/* Route-only selectors for Gochangas 1a "Oficio". Palette, type and shadow
   tokens come from the canonical Tailwind @theme in src/app/globals.css,
   loaded for Pages SSR by src/pages/_app.tsx. */

* {
  box-sizing: border-box;
}

html {
  background: var(--color-go-paper);
  color: var(--color-go-ink);
  font-family: var(--font-sans);
}

body {
  margin: 0;
  background: var(--color-go-paper);
  color: var(--color-go-ink);
  font-family: var(--font-sans);
}

.shell {
  min-height: 100dvh;
  padding-bottom: 112px;
}

/* #362 — the sticky footer gains a second button; keep the last content row
   clear of it. */
.shell-with-inquiry {
  padding-bottom: 168px;
}

.topbar {
  border-bottom: 1px solid var(--color-go-line);
  background: var(--color-go-paper-glass);
}

.topbar-inner,
.main {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 16px 18px;
}

.wordmark {
  display: inline-flex;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  color: var(--color-go-ink);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.wordmark span {
  color: var(--color-go-clay);
}

.back {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--color-go-clay-dark);
  font-weight: 700;
  text-decoration: none;
}

/* #350 — the photo strip. A native scroll-snap row, not a JS carousel: it
   works before hydration, costs no JavaScript on a cellular connection, and a
   phone already knows how to swipe it. The strip is the ONE element on this
   page allowed to scroll sideways (CLAUDE.md's responsive rule permits it
   inside its own overflow container); the document itself must not, which is
   why the wrapper is width-constrained and the images have a fixed basis
   rather than a min-width. */
.photos {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 12px 0 4px;
  padding-bottom: 4px;
  max-width: 100%;
}
.photos .photo {
  flex: 0 0 auto;
  width: min(78%, 320px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  scroll-snap-align: start;
  background: var(--color-go-chip, #eee);
}
/* One photo should fill the column rather than sit at 78% with dead space. */
.photos .photo:only-child {
  width: 100%;
}

.eyebrow {
  margin: 18px 0 7px;
  color: var(--color-go-clay-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mono {
  font-family: var(--font-mono);
}

h1,
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
}

h1 {
  margin: 0;
  font-size: clamp(34px, 9vw, 48px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* #340 — every block that renders provider-supplied text or a URL. One
   unbreakable token used to widen the LAYOUT VIEWPORT (Blink grows it to fit
   rather than clipping), which is why the page measured 435px wide on a 390px
   phone and the fixed footer + both sheets laid out past the screen. The fix
   is sizing the text, NOT `overflow-x: hidden` on html/body/.shell — masking
   the overflow is what the acceptance criterion forbids.

   `anywhere`, not `break-word`: only `anywhere` also shrinks the element's
   MIN-CONTENT width, which is what the flex/grid parents (`.review-head` is a
   flex row with a `nowrap` date) actually measure. */
h1,
.provider,
.description,
.share-preview,
.sheet-title,
.sheet-preview,
.review-author,
.review-comment {
  overflow-wrap: anywhere;
}

.basic-page {
  padding-top: 32px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.badge {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge.featured {
  background: var(--color-go-amber-tint);
  color: var(--color-go-amber-text);
}

.badge.founder {
  background: var(--color-go-clay-tint);
  color: var(--color-go-clay-dark);
}

.provider {
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 700;
}

/* #349 — the provider's name is a LINK to their storefront now, so it owes the
   44px tap target every other control on this page has (#340/#357). The text
   is 20px tall on its own. `inline-flex` sizes the box shrink-to-fit, and the
   `.provider` rule above already sets `overflow-wrap: anywhere`, so a long
   name still breaks rather than running past the screen. */
.provider a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.meta {
  margin: 5px 0;
  color: var(--color-go-ink-2);
  font-size: 14px;
}

.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 18px 0;
}

.rating strong {
  color: var(--color-go-clay);
  font-size: 23px;
}

/* #354 — provider reputation in the header, and the fixed provenance lines. */
.provider-reputation {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  color: var(--color-go-ink-2);
  font-size: 14px;
}

.reputation-note,
.review-provenance {
  margin: -8px 0 16px;
  color: var(--color-go-ink-2);
  font-size: 12.5px;
  line-height: 1.5;
}

.review-provenance {
  margin: 8px 0 0;
}

.scope {
  border-radius: 999px;
  background: var(--color-go-chip);
  padding: 7px 10px;
  color: var(--color-go-clay-dark);
  font-size: 12px;
  font-weight: 700;
}

.description,
.share-preview {
  font-size: 15px;
  line-height: 1.65;
}

.service-description {
  white-space: pre-wrap;
}

.data-card,
.reviews,
.share {
  margin-top: 22px;
  border: 1px solid var(--color-go-line);
  border-radius: 18px;
  background: var(--color-go-surface);
  padding: 16px;
  box-shadow: var(--shadow-go-card);
}

.row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-go-line);
}

.row:last-child {
  border-bottom: 0;
}

.row dt {
  color: var(--color-go-ink-2);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.row dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.section-title {
  margin: 0 0 8px;
  font-size: 26px;
}

.muted {
  margin: 0;
  color: var(--color-go-ink-2);
  font-size: 14px;
  line-height: 1.55;
}

.share-preview {
  border-radius: 12px;
  background: var(--color-go-chip);
  padding: 12px;
}

.actions {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.button {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-go-line);
  border-radius: 16px;
  background: var(--color-go-surface);
  color: var(--color-go-ink);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button.primary {
  border-color: var(--color-go-clay);
  background: var(--color-go-clay);
  color: var(--color-go-on-clay);
}

.button.share-wa {
  border-color: var(--color-go-whatsapp);
  background: var(--color-go-whatsapp);
  color: white;
}

.button.share-wa:hover {
  border-color: var(--color-go-whatsapp-hover);
  background: var(--color-go-whatsapp-hover);
}

.copy-status {
  display: block;
  min-height: 21px;
  margin-top: 8px;
  color: var(--color-go-clay-dark);
  font-size: 13px;
  font-weight: 700;
}

.canonical {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--color-go-ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
}

.sticky {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 1px solid var(--color-go-line);
  background: var(--color-go-paper-glass);
  padding: 12px max(14px, env(safe-area-inset-right))
    calc(12px + env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
}

.sticky-inner {
  width: min(688px, 100%);
  margin: 0 auto;
}

.contact {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 16px;
  background: var(--color-go-disabled);
  color: var(--color-go-ink-3);
  font: inherit;
  font-weight: 700;
}

/* G.4 — live sticky CTA (WhatsApp green, ≥44px tap target). */
.contact-live {
  background: var(--color-go-whatsapp);
  color: white;
  cursor: pointer;
}

.contact-live:hover {
  background: var(--color-go-whatsapp-hover);
}

/* #362 — «Enviar consulta»: the secondary door beside WhatsApp. Outlined so
   the metered WhatsApp CTA stays the primary action; ≥44px tap target. */
.inquiry-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  border: 1.5px solid var(--color-go-clay);
  border-radius: 16px;
  color: var(--color-go-clay-dark);
  font-weight: 700;
  text-decoration: none;
}

.inquiry-cta:hover {
  background: var(--color-go-chip);
}

.contact-note {
  margin: 6px 0 0;
  color: var(--color-go-ink-2);
  font-size: 11px;
  text-align: center;
}

/* G.4 — WhatsApp confirm bottom sheet (design 1a A2: radius 22 top, scrim).
   #340 — both sheets now render through vaul/Radix, which PORTALS the overlay
   and the content to <body> as siblings. The scrim is therefore no longer the
   sheet's parent: it drops the flex centring it used to do, and the sheet
   pins itself to the bottom of the viewport. vaul injects its own transform /
   animation rules for `[data-vaul-drawer]` at import time, so nothing here
   has to reproduce them. */
.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(34, 29, 24, 0.45);
}

.sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 41;
  width: min(720px, 100%);
  margin: 0 auto;
  border-radius: 22px 22px 0 0;
  background: var(--color-go-surface);
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
}

.sheet-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.sheet-subline {
  margin: 8px 0 0;
  color: var(--color-go-ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.sheet-preview {
  margin: 12px 0 0;
  border-radius: 12px;
  background: var(--color-go-chip);
  padding: 12px;
  font-size: 13.5px;
  line-height: 1.55;
}

.sheet-primary {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  border: 0;
  border-radius: 16px;
  background: var(--color-go-whatsapp);
  color: white;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.sheet-primary:hover {
  background: var(--color-go-whatsapp-hover);
}

.sheet-primary:disabled {
  background: var(--color-go-disabled);
  color: var(--color-go-ink-3);
  cursor: default;
}

.sheet-error {
  margin-top: 14px;
  border: 1px solid var(--color-go-danger);
  border-radius: 12px;
  padding: 12px;
}

.sheet-error-copy {
  margin: 0 0 10px;
  color: var(--color-go-danger);
  font-size: 13.5px;
  font-weight: 700;
}

.sheet-error .sheet-primary {
  margin-top: 0;
}

/* #340 — ink-3 on the surface is 4.09:1 at 11.5px; ink-2 is 6.41:1. The
   site-wide ink-3-at-12px palette question stays with #357/#324; this is the
   metered-contact disclosure, which has to be readable. */
.sheet-note {
  margin: 10px 0 0;
  color: var(--color-go-ink-2);
  font-size: 11.5px;
  line-height: 1.5;
}

.sheet-cancel {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: var(--color-go-ink-2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--color-go-clay);
  outline-offset: 3px;
}

@media (min-width: 640px) {
  .topbar-inner,
  .main {
    padding-right: 24px;
    padding-left: 24px;
  }

  .actions {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── G.5 reviews (list + submit island) ─────────────────────────────────── */
.review-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.review-card {
  border: 1px solid var(--color-go-line);
  border-radius: 14px;
  background: var(--color-go-surface);
  padding: 13px;
}

.review-card-own {
  border-color: var(--color-go-amber);
  background: var(--color-go-amber-tint);
  margin-top: 12px;
}

.review-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.review-author {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}

.review-date {
  color: var(--color-go-ink-4);
  font-size: 12px;
  white-space: nowrap;
}

.review-stars {
  display: inline-flex;
  gap: 1px;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 1px;
}

.review-star {
  color: var(--color-go-line);
}

.review-star.on {
  color: var(--color-go-amber);
}

.review-comment {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.review-report,
.review-report-ad {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--color-go-ink-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 0 0;
}

/* #354 — the review report button ships now, so it meets 4.5:1 like the ad one. */
.review-report {
  color: var(--color-go-ink-2);
}

.review-report-ad {
  display: block;
  /* #340 — this one renders on every live ad, reviews dark or not, so it is
     normal body copy and needs 4.5:1 (ink-2 = 6.41:1). `.review-report` sits
     inside a review card and ships with #354. */
  color: var(--color-go-ink-2);
  margin-top: 14px;
}

.review-own-note {
  margin: 8px 0 0;
  color: var(--color-go-amber-text);
  font-size: 12.5px;
  font-weight: 700;
}

.review-aggregate {
  margin-top: 12px;
  font-size: 15px;
}

.review-aggregate strong {
  color: var(--color-go-amber-text);
}

/* Post-contact prompt (AC#4) — amber nudge, hydration-only. */
.review-prompt {
  margin-top: 14px;
  border: 1px solid var(--color-go-amber);
  border-radius: 14px;
  background: var(--color-go-amber-tint);
  padding: 14px;
}

.review-prompt-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.review-prompt-copy {
  margin: 6px 0 0;
  color: var(--color-go-ink-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.review-prompt-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--color-go-clay);
  color: white;
  font-weight: 700;
  text-decoration: none;
}

/* Sign-in wall + submit form. */
.review-signin,
.review-form {
  margin-top: 14px;
  border: 1px solid var(--color-go-line);
  border-radius: 14px;
  background: var(--color-go-chip);
  padding: 14px;
}

.review-signin-copy,
.review-form-title {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.review-form-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.review-signin-btn,
.review-submit {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  border: 0;
  border-radius: 16px;
  background: var(--color-go-clay);
  color: white;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.review-submit:disabled {
  background: var(--color-go-disabled, #d8ccb8);
  color: var(--color-go-ink-3);
  cursor: default;
}

.review-picker {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}

.review-pick {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--color-go-line);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.review-pick.on {
  color: var(--color-go-amber);
}

.review-textarea {
  width: 100%;
  min-height: 88px;
  margin-top: 10px;
  border: 1px solid var(--color-go-line);
  border-radius: 12px;
  background: var(--color-go-surface);
  padding: 10px;
  /* ≥16px prevents iOS Safari auto-zoom on focus (§4.10). */
  font-size: 16px;
  line-height: 1.5;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.review-form-note {
  margin: 10px 0 0;
  color: var(--color-go-ink-3);
  font-size: 11.5px;
  line-height: 1.5;
}

.review-error {
  margin: 10px 0 0;
  color: var(--color-go-danger);
  font-size: 13px;
  font-weight: 700;
}

/* #354 — review island states */
.review-paused,
.review-state {
  margin: 14px 0 0;
  color: var(--color-go-ink-2);
  font-size: 14px;
  line-height: 1.5;
}

.review-status:empty {
  display: none;
}

.review-status {
  margin: 12px 0 0;
  color: var(--color-go-ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

.review-own,
.review-removed,
.review-state-error {
  margin-top: 14px;
  border: 1px solid var(--color-go-line);
  border-radius: 14px;
  background: var(--color-go-chip);
  padding: 14px;
}

.review-own {
  border-color: var(--color-go-amber);
  background: var(--color-go-amber-tint);
}

.review-own-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.review-state-copy {
  margin: 0;
  color: var(--color-go-ink-2);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.review-state-copy a {
  color: var(--color-go-clay-dark);
  font-weight: 700;
}

.review-secondary {
  display: inline-flex;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  margin-right: 8px;
  border: 1px solid var(--color-go-clay);
  border-radius: 14px;
  background: transparent;
  color: var(--color-go-clay-dark);
  font: inherit;
  font-weight: 700;
  padding: 0 16px;
  cursor: pointer;
}

.review-secondary:disabled {
  opacity: 0.6;
  cursor: default;
}

.review-comment-label {
  display: block;
  margin-top: 12px;
  color: var(--color-go-ink);
  font-size: 14px;
  font-weight: 700;
}

.review-counter {
  margin: 4px 0 0;
  color: var(--color-go-ink-2);
  font-size: 12.5px;
  text-align: right;
}

.review-picker {
  flex-wrap: wrap;
}

.review-pick:focus-visible,
.review-secondary:focus-visible {
  outline: 3px solid var(--color-go-clay);
  outline-offset: 2px;
}

/* ── #355 — the provider's reply, under its review ────────────────────────── */

.review-response {
  margin: 12px 0 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--color-go-line);
  border-radius: 0 10px 10px 0;
  background: var(--color-go-chip);
}

.review-response-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin: 0;
}

.review-response-author {
  color: var(--color-go-ink);
  font-size: 13.5px;
  font-weight: 700;
}

.review-response-date {
  color: var(--color-go-ink-2);
  font-size: 12.5px;
}

.review-response-text {
  margin: 6px 0 0;
  color: var(--color-go-ink);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* The appeal's own state line, inside the removed-review card. */
.review-appeal-status {
  margin: 10px 0 0;
  color: var(--color-go-ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

.review-appeal {
  margin-top: 12px;
}