/* ============================================================
   POTÍ APPS — Design Tokens, Reset & Utilities
   ============================================================ */

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

/* ---- Tokens ---- */
:root {
  --color-primary:     #C4522A;
  --color-primary-lt:  #D9714E;
  --color-primary-dk:  #A33E1A;
  --color-secondary:   #2B6B7A;
  --color-secondary-lt:#3A8599;
  --color-bg:          #F5EFE3;
  --color-surface:     #FDFAF5;
  --color-surface-2:   #EDE5D4;
  --color-text:        #1A1A1A;
  --color-text-muted:  #5A5248;
  --color-border:      #DDD3C2;
  --color-white:       #FFFFFF;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  --shadow-sm: 0 1px 3px rgba(26,26,26,.08), 0 1px 2px rgba(26,26,26,.06);
  --shadow-md: 0 4px 16px rgba(26,26,26,.10), 0 2px 6px rgba(26,26,26,.06);
  --shadow-lg: 0 10px 32px rgba(26,26,26,.12), 0 4px 12px rgba(26,26,26,.06);

  --transition: 220ms ease;

  --max-w: 1120px;
  --section-py: 96px;
  --section-px: 24px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  font-weight: 700;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { max-width: 60ch; }

/* ---- Layout Utilities ---- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--section-px);
}

.section {
  padding-block: var(--section-py);
}

.section--alt {
  background: var(--color-surface);
}

.section--dark {
  background: var(--color-text);
  color: var(--color-bg);
}

.section__header {
  margin-bottom: 56px;
}

.section__label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.section__title {
  margin-bottom: 16px;
}

.section__title em {
  font-style: italic;
  color: var(--color-primary);
}

.section__desc {
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

/* ---- Grid helpers ---- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  :root { --section-py: 64px; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* ---- Decorative underline ---- */
.underline-stroke {
  position: relative;
  display: inline-block;
}
.underline-stroke::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 4px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* ---- Visually hidden ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}