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

:root {
  --cream: #fdfaf5;
  --cream-dark: #EDE5D8;
  --gold: #8B6B3D;
  --gold-light: #C4A96B;
  --gold-pale: #F0E8D6;
  --dark: #31271d;
  --text: #0c0a07;
  --text-light: #5f5343;
  --white: #FAF7F2;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Jost', 'Helvetica Neue', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--text);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 768px) {
  /* Nav */
  .nav-desktop { display: none !important; }
  .nav-mobile-btn { display: block !important; }

  /* Spacing */
  .section { padding: 64px 24px; }
  .section--sm { padding: 48px 24px; }
  .px { padding-left: 24px !important; padding-right: 24px !important; }

  /* Hero grid (HeroA) */
  .hero-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 80px 24px 64px !important;
  }
  .hero-grid > *:last-child { display: none; }

  /* Generic two-column */
  .two-col {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Authority (sección doctora) */
  .authority-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .authority-grid > *:first-child {
    max-width: 300px;
    margin: 0 auto;
  }

  /* About hero */
  .about-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .about-hero-grid > *:last-child { display: none; }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  /* Results hero */
  .results-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Steps (experiencia) */
  .step-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 36px 24px !important;
  }
  .step-num { font-size: 40px !important; }
  .step-details { display: none; }
}

/* ── Utilities ────────────────────────────────────── */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.section {
  padding: 96px max(40px, 5vw);
}

.section--sm {
  padding: 72px max(40px, 5vw);
}

.page {
  background: var(--cream);
  min-height: 100vh;
  padding-top: 70px;
}

.px {
  padding-left: max(40px, 5vw);
  padding-right: max(40px, 5vw);
}

.text-center {
  text-align: center;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--cream);
}

::-webkit-scrollbar-thumb {
  background: var(--gold-light);
  border-radius: 3px;
}

::selection {
  background: var(--gold-pale);
  color: var(--dark);
}

#page-wrap {
  animation: pageIn 0.35s ease;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Typography ───────────────────────────────────── */

.t-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--dark);
  line-height: 1.15;
}

.t-h2-inv {
  font-family: var(--font-serif);
  font-weight: 400;
  color: #FAF7F2;
  line-height: 1.1;
}

.t-h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--dark);
  line-height: 1.2;
}

.t-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--dark);
}

.t-body {
  font-family: var(--font-sans);
  color: var(--text-light);
  line-height: 1.85;
  font-size: 16px;
}

.t-body-dark {
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.8;
}

.t-body-inv {
  font-family: var(--font-sans);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.85;
}

.t-caps {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
}

.t-caps-gold {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}