/* =========================================================================
   SóSal Beach Bar — theme (design tokens + base + shared atoms)
   Source: Figma "Sem título (Copy)" — frames Home / Menu / Galeria (1280 desktop)
   Load this first on every page, then the CSS of each widget used.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;1,400&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root {
  /* colour */
  --ss-primary: #006972;        /* teal — brand, headings, primary buttons */
  --ss-primary-dark: #00535a;
  --ss-accent: #7f5614;         /* bronze — prices, secondary links, outlines */
  --ss-ink: #1b1c1c;            /* headings / nav text */
  --ss-muted: #3d494a;          /* body copy */
  --ss-bg: #fbf9f8;             /* page background */
  --ss-surface: #f6f3f2;        /* alternate section background, footer */
  --ss-card: rgba(248, 245, 240, .8);
  --ss-line: #bcc9ca;           /* card borders */
  --ss-sand: #ffddb4;           /* decorative glow */
  --ss-gold: #c5a059;           /* Contactos eyebrows / highlight badge */
  --ss-white: #ffffff;

  /* type */
  --ss-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ss-font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --ss-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);         /* 64 */
  --ss-h1-gallery: clamp(2.25rem, 1.7rem + 2.2vw, 3rem); /* 48 */
  --ss-h2: clamp(1.75rem, 1.5rem + 1vw, 2rem);           /* 32 */
  --ss-h3: 1.5rem;                                       /* 24 */
  --ss-lead: 1.125rem;                                   /* 18 */
  --ss-body: 1rem;                                       /* 16 */
  --ss-small: .875rem;                                   /* 14 */
  --ss-label: .75rem;                                    /* 12 */

  /* layout */
  --ss-max: 1280px;
  --ss-gutter: clamp(1rem, 5vw, 4rem);                   /* 64 on desktop */
  --ss-section-y: clamp(4rem, 9vw, 7.5rem);              /* 120 on desktop */
  --ss-radius-sm: 2px;
  --ss-radius: 8px;
  --ss-radius-pill: 12px;
  --ss-shadow: 0 25px 50px -12px rgba(27, 28, 28, .22);
  --ss-shadow-soft: 0 4px 24px rgba(27, 28, 28, .06);
  --ss-nav-h: 92px;
  --ss-ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ss-bg);
  color: var(--ss-muted);
  font-family: var(--ss-font-body);
  font-size: var(--ss-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--ss-font-display); color: var(--ss-ink); font-weight: 500; }
p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.ss-container { width: 100%; max-width: var(--ss-max); margin-inline: auto; padding-inline: var(--ss-gutter); }
.ss-section { padding-block: var(--ss-section-y); }
.ss-section--surface { background: var(--ss-surface); }
.ss-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ss-skip { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: .75rem 1rem; background: var(--ss-primary); color: #fff; }
.ss-skip:focus { top: 1rem; }

/* ---------- headings ---------- */
.ss-h1 { font-size: var(--ss-h1); line-height: 1.125; font-weight: 700; letter-spacing: -.02em; }
.ss-h2 { font-size: var(--ss-h2); line-height: 1.25; }
.ss-h3 { font-size: var(--ss-h3); line-height: 1.333; }
.ss-brand-color { color: var(--ss-primary); }
.ss-lead { font-size: var(--ss-lead); line-height: 1.556; }

/* ---------- chip / tag ---------- */
.ss-chip {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 4px 12px;
  border: 1px solid rgba(0, 105, 114, .25);
  border-radius: var(--ss-radius-pill);
  color: var(--ss-primary);
  font-size: var(--ss-label); font-weight: 500; line-height: 16px;
  letter-spacing: .1em; text-transform: uppercase;
}
.ss-chip--lg { padding: 8px 16px; }
.ss-tag {
  display: inline-flex; align-self: flex-start; padding: 4px 8px;
  border: 1px solid rgba(0, 105, 114, .3); border-radius: var(--ss-radius-sm);
  color: var(--ss-primary); font-size: var(--ss-label); font-weight: 500; line-height: 16px; letter-spacing: .05em;
}

/* ---------- buttons ---------- */
.ss-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px;
  border: 1px solid transparent; border-radius: var(--ss-radius-sm);
  font-family: var(--ss-font-body); font-size: var(--ss-small); font-weight: 600; line-height: 20px;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--ss-ease), color .25s var(--ss-ease), border-color .25s var(--ss-ease), transform .25s var(--ss-ease), box-shadow .25s var(--ss-ease);
}
.ss-btn--primary { background: var(--ss-primary); color: var(--ss-white); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.ss-btn--primary:hover { background: var(--ss-primary-dark); transform: translateY(-1px); box-shadow: 0 10px 20px -8px rgba(0,105,114,.55); }
.ss-btn--lg { padding: 16px 32px; }
.ss-btn--outline { border-color: var(--ss-accent); color: var(--ss-accent); background: transparent; }
.ss-btn--outline:hover { background: var(--ss-accent); color: var(--ss-white); }

/* ---------- arrow link ---------- */
.ss-link {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  color: var(--ss-accent); font-size: var(--ss-small); font-weight: 600; line-height: 20px; letter-spacing: .1em;
  text-decoration: none;
}
.ss-link--underline { padding-bottom: 4px; border-bottom: 1px solid currentColor; }
.ss-link--brand { color: var(--ss-primary); }
.ss-link svg { width: 10px; height: 10px; flex: none; transition: transform .25s var(--ss-ease); }
.ss-link:hover svg { transform: translateX(4px); }

/* ---------- menu item (used by ss-menu-section and ss-mixology) ---------- */
.ss-menu-list { display: flex; flex-direction: column; gap: 32px; }
.ss-menu-item { display: flex; flex-direction: column; gap: 8px; }
.ss-menu-item__head { display: flex; align-items: baseline; gap: 16px; }
.ss-menu-item__name { margin: 0; font-family: var(--ss-font-body); font-size: var(--ss-lead); line-height: 28px; font-weight: 400; color: var(--ss-ink); }
.ss-menu-item__head:has(.ss-menu-item__price)::after { content: ''; order: 1; flex: 1; border-bottom: 1px dotted rgba(127, 86, 20, .35); transform: translateY(-5px); }
.ss-menu-item__price { order: 2; color: var(--ss-accent); font-size: var(--ss-small); font-weight: 600; line-height: 20px; letter-spacing: .1em; white-space: nowrap; }
.ss-menu-item__desc { font-style: italic; line-height: 24px; }

:focus-visible { outline: 2px solid var(--ss-primary); outline-offset: 3px; }

/* ---------- scroll reveal ----------
   <html class="ss-js"> is set by an inline script in <head>; js/site.js adds .is-visible.
   Without JS everything stays visible (SEO / no-JS safe). */
.ss-js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ss-ease), transform .9s var(--ss-ease); }
.ss-js [data-reveal].is-visible { opacity: 1; transform: none; }
.ss-js [data-reveal-delay="1"] { transition-delay: .12s; }
.ss-js [data-reveal-delay="2"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ss-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* section-level centred CTA under a menu section */
.ss-menu-section__more { display: flex; justify-content: center; margin-top: 64px; }