/* ==========================================================================
   Green Garden Wellness Lounge
   base.css · tokens, reset, tipografía, botones y utilidades
   Paleta y tipografía derivadas del menú de servicios en PDF (ver CLAUDE.md)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Verde bosque del Lounge — más profundo que el verde corporativo #006535 */
  --gg-green:        #0F4E33;
  --gg-green-deep:   #0A3A26;
  --gg-green-mid:    #1A6244;
  --gg-green-tint:   #E7EFE9;

  /* Dorado / ámbar */
  --gg-gold:         #C9A268;
  --gg-gold-dark:    #A9834B;
  --gg-amber:        #E4A93C;   /* el punto del isotipo */

  /* Cremas cálidos de las páginas interiores del menú */
  --gg-cream:        #FBF8EF;
  --gg-cream-deep:   #F3EEE0;
  --gg-white:        #FFFFFF;

  --gg-ink:          #2B2B2B;
  --gg-ink-strong:   #1A1A1A;
  --gg-ink-muted:    #5A5A5A;
  --gg-line:         #E4DFD2;

  /* Roles semánticos */
  --bg:              var(--gg-white);
  --bg-alt:          var(--gg-cream);
  --text:            var(--gg-ink);
  --text-muted:      var(--gg-ink-muted);
  --heading:         var(--gg-green);

  /* Tipografía — serif cálida de eje óptico + sans humanista.
     Fraunces sustituye a Playfair Display en el Lounge: trazos más gruesos que
     aguantan sobre la foto del hero, y eje `opsz` que corrige el dibujo entre
     el H1 de 64px y las cifras de precio de 24px. Lato viene del PDF original. */
  --font-display:    "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:       "Lato", "Helvetica Neue", Arial, sans-serif;

  /* Ejes variables de Fraunces — SOFT redondea los terminales, WONK activa las
     alternativas caligráficas de j/g/y (sólo en tamaños de display). */
  --wonk-on:         "SOFT" 40, "WONK" 1;
  --wonk-off:        "SOFT" 40, "WONK" 0;

  --fs-body:         1rem;
  --fs-sm:           0.875rem;
  --fs-xs:           0.8125rem;
  --fs-lead:         1.0625rem;
  --fs-h3:           clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --fs-h2:           clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
  --fs-h1:           clamp(2.5rem, 1.4rem + 4.4vw, 4.5rem);

  --lh-tight:        1.12;
  --lh-normal:       1.7;

  /* Forma — esquinas suaves del PDF (fotos con radio grande y uniforme) */
  --radius:          20px;
  --radius-lg:       28px;
  --radius-sm:       10px;
  --radius-pill:     999px;

  /* Espaciado */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Layout */
  --container:        1180px;
  --container-narrow: 800px;
  --gutter:           clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --header-h:         82px;

  /* Sombra y movimiento */
  --shadow-sm: 0 2px 12px rgba(10, 58, 38, .06);
  --shadow-md: 0 12px 34px rgba(10, 58, 38, .10);
  --shadow-lg: 0 24px 60px rgba(10, 58, 38, .16);
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --t-fast:    .18s var(--ease);
  --t-base:    .3s  var(--ease);
  --t-slow:    .6s  var(--ease);

  /* Marca de agua de hoja — se usa como background-image en varias secciones */
  --leaf-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 186C100 118 66 76 12 66c-6 62 32 106 88 120Z' fill='none' stroke='%23C9A268' stroke-width='3' opacity='.16'/%3E%3Cpath d='M100 186c0-68 34-110 88-120 6 62-32 106-88 120Z' fill='none' stroke='%23C9A268' stroke-width='3' opacity='.16'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2 · Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;

  /* Heredado por todo el documento: Fraunces ajusta su dibujo al tamaño real y
     usa las formas sobrias por defecto. Lato ignora estos ejes. */
  font-optical-sizing: auto;
  font-variation-settings: var(--wonk-off);
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4); }
p, ul, ol, figure, blockquote, table { margin: 0 0 var(--space-4); }
ul, ol { padding-left: 1.2em; }

img, svg, iframe, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--gg-green); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--gg-gold-dark); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gg-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3 · Tipografía
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--heading);
  letter-spacing: -0.015em;      /* Fraunces es más ancha que Playfair */
  font-optical-sizing: auto;
  font-variation-settings: var(--wonk-off);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* WONK sólo en los títulos verdaderamente grandes: por debajo de ~40px las
   alternativas caligráficas de la j y la g ensucian más de lo que aportan. */
.hero__title,
.hero__brand,
.menu-head__title,
.section__title {
  font-variation-settings: var(--wonk-on);
}

.eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gg-gold-dark);
}
.eyebrow--gold  { color: var(--gg-gold); }
.eyebrow--light { color: rgba(255, 255, 255, .72); }

/* Filete dorado bajo los títulos — el mismo recurso de la portada del menú */
.rule {
  display: block;
  width: 88px;
  height: 2px;
  margin: 0 0 var(--space-5);
  background: var(--gg-gold);
}
.rule--center { margin-inline: auto; }
.rule--light  { background: var(--gg-amber); }

.lead { font-size: var(--fs-lead); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   4 · Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { position: relative; padding-block: var(--section-y); }

/* `overflow: hidden` recorta las hojas decorativas en el borde de la sección.
   Sin esto sangran 4% por la derecha y estiran el documento ~87px a 1440px:
   aparecía una franja en blanco a la derecha de toda la página. */
.section--cream { background: var(--bg-alt); overflow: hidden; }

/* Hojas decorativas de fondo, como las páginas interiores del PDF */
.section--cream::before,
.section--cream::after {
  content: "";
  position: absolute;
  width: clamp(180px, 22vw, 320px);
  aspect-ratio: 1;
  background: var(--leaf-watermark) center / contain no-repeat;
  pointer-events: none;
}
.section--cream::before { top: -3%;  left: -4%;  transform: rotate(160deg); }
.section--cream::after  { bottom: -4%; right: -4%; transform: rotate(-12deg); }
.section--cream > .container { position: relative; z-index: 1; }

.section__head { max-width: 720px; margin: 0 auto var(--space-8); text-align: center; }
.section__title { margin-bottom: var(--space-4); }
.section__lead { color: var(--text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   5 · Botones
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--gg-green);
  --btn-fg: var(--gg-white);
  --btn-bd: var(--gg-green);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: .8rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t-base), background-color var(--t-base),
              color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

.btn:hover,
.btn:focus-visible {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Verde sólido — acción principal sobre fondo claro */
.btn--primary { --btn-bg: var(--gg-green); --btn-fg: var(--gg-white); --btn-bd: var(--gg-green); }
.btn--primary:hover { --btn-bg: var(--gg-gold); --btn-bd: var(--gg-gold); }

/* Dorado — acción sobre fondo verde o sobre foto */
.btn--gold { --btn-bg: var(--gg-gold); --btn-fg: var(--gg-white); --btn-bd: var(--gg-gold); }
.btn--gold:hover { --btn-bg: var(--gg-white); --btn-fg: var(--gg-green); --btn-bd: var(--gg-white); }

/* Dorado sobre fondo claro — inverso de .btn--primary: al hover pasa a verde */
.btn--secondary { --btn-bg: var(--gg-gold); --btn-fg: var(--gg-white); --btn-bd: var(--gg-gold); }
.btn--secondary:hover { --btn-bg: var(--gg-green); --btn-bd: var(--gg-green); }

/* Contorno verde sobre fondo claro */
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--gg-green); --btn-bd: var(--gg-green); }
.btn--ghost:hover { --btn-bg: var(--gg-green); --btn-fg: var(--gg-white); }

/* Contorno claro sobre fondo oscuro */
.btn--light { --btn-bg: transparent; --btn-fg: var(--gg-white); --btn-bd: rgba(255,255,255,.55); }
.btn--light:hover { --btn-bg: var(--gg-white); --btn-fg: var(--gg-green); --btn-bd: var(--gg-white); }

.btn--sm    { padding: .6rem 1.2rem; font-size: var(--fs-xs); }
.btn--lg    { padding: 1rem 2.2rem;  font-size: 0.9375rem; }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   6 · Lockup de marca (isotipo + texto)
   -------------------------------------------------------------------------- */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--gg-green);
}
.lockup:hover { color: var(--gg-green); }

.lockup__mark { width: auto; height: 40px; }

.lockup__text { display: flex; flex-direction: column; line-height: 1.05; }

.lockup__name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: currentColor;
}
.lockup__sub {
  font-family: var(--font-body);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gg-gold-dark);
}

/* --------------------------------------------------------------------------
   7 · Utilidades
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--space-3) var(--space-5);
  background: var(--gg-green);
  color: var(--gg-white);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip-link:focus { left: var(--gutter); color: var(--gg-white); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.reveal.is-visible { opacity: 1; transform: none; }

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