/* ============================================================
   BLASÓN — sistema de marca compartido
   Uso: <link rel="stylesheet" href="../assets/blason-shared.css">
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --b-paper:        #F2EADB;
  --b-paper-2:      #EADFC8;
  --b-card:         #FBF6EC;
  --b-ink:          #1F1A14;
  --b-ink-2:        #5C4F3F;
  --b-line:         #D8C9AE;

  --b-clay:         #9B3A26;
  --b-clay-deep:    #6B2616;
  --b-ochre:        #B8862B;
  --b-olive:        #4D5A2F;
  --b-stone:        #6E6457;

  --os-bg:          #15110C;
  --os-surface:     #1F1A12;
  --os-text:        #F2EADB;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --shadow-1: 0 1px 0 rgba(31,26,20,.04), 0 6px 18px rgba(31,26,20,.06);
  --shadow-2: 0 1px 0 rgba(31,26,20,.06), 0 18px 36px rgba(31,26,20,.10);

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--b-paper);
  color: var(--b-ink);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--b-clay); color: var(--b-card); }

/* paper texture utility */
.tex-paper {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(155,58,38,.04) 0 1.5px, transparent 2px),
    radial-gradient(circle at 60% 70%, rgba(31,26,20,.05) 0 1.2px, transparent 2px);
  background-size: 22px 22px, 19px 19px;
  background-position: 0 0, 4px 6px;
}

/* mono caps */
.cap {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--b-ink-2);
}

/* dotted rule */
.rule-dots {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--b-clay) 0 6px, transparent 6px 12px);
  border: 0;
}

/* ============================================================
   Cross-cutting tactile feedback
   ----------------------------------------------------------------
   Every clickable surface gets a subtle press animation. Only kicks
   in on devices that actually support hover (so it's not jittery on
   touch) — but the :active scale runs on touch via tap.

   Also enforces the 44×44 px minimum touch target for primary
   actions on small screens, which iOS HIG and WCAG 2.5.5 both call
   out as the floor for finger-sized hit areas.
   ============================================================ */

.btn,
button,
[role="button"],
a.nav-cta,
a.mobile-cta,
a.mini-cta,
.map-btn,
.map-add,
.menu-add {
  transition: transform 80ms ease, opacity 160ms ease, background 160ms ease, border-color 160ms ease;
}

.btn:active,
button:active,
[role="button"]:active,
a.nav-cta:active,
a.mobile-cta:active,
a.mini-cta:active,
.map-btn:active,
.menu-add:active {
  transform: scale(0.97);
}

.btn[disabled],
button[disabled],
.btn:disabled,
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Minimum 44×44 px touch target on small screens for primary CTAs */
@media (max-width: 768px) {
  .btn,
  a.nav-cta,
  a.mobile-cta,
  a.mini-cta,
  .map-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Form controls inherit a roomy minimum height too */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    min-height: 44px;
  }
}

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .btn,
  button,
  [role="button"],
  a.nav-cta,
  a.mobile-cta,
  a.mini-cta,
  .map-btn,
  .menu-add {
    transition: none;
  }
  .btn:active,
  button:active,
  [role="button"]:active,
  a.nav-cta:active,
  a.mobile-cta:active,
  a.mini-cta:active,
  .map-btn:active,
  .menu-add:active {
    transform: none;
  }
}