/* ============================================================
   BASE: variables (tokens), reset y tipografías
   ============================================================ */

/* ========================
   VARIABLES
======================== */
:root {
  /* Paleta principal */
  --color-primary: #1C4162;        /* azul profundo: títulos, botones principales */
  --color-secondary: #E6F8F9;      /* cian pálido: botón secundario */
  --color-accent: #28A4B5;         /* teal de marca: etiquetas, subtítulos (unifica #29A4B4) */
  --color-teal-dark: #1F7F8C;      /* teal oscuro: texto btn secundario, bordes (unifica #1E7E8B) */
  --color-cta: #30CACE;            /* turquesa: botones de acción */
  --color-coral: #FE7153;          /* coral: CTA Pide Cita */
  --color-gold: #967D52;           /* dorado: reseñas, FAQs */
  --color-gold-bright: #B08530;    /* dorado vivo: icono de experiencia (modales) */
  --color-blue: #4E98EF;           /* azul claro: categorías, fechas */
  --color-teal-bright: #1FB9B4;    /* turquesa vivo: acentos de modales */
  --color-teal-light: #65C7CC;     /* turquesa claro: comillas de la cita del hero */

  /* Texto */
  --color-text: #1B2628;
  --color-paragraph: #111212;
  --color-text-muted: #777D80;
  --color-ink: #34506B;            /* azul grisáceo: cuerpo de texto en modales */

  /* Superficies */
  --color-surface-header: #E2EDF2; /* fondo de header y footer */
  --color-surface-teal: #D9F3F7;   /* fondos suaves teal */
  --color-surface-blue: #BDDBF2;   /* fondos suaves azules */
  --color-surface-cream: #FCF8F3;  /* crema cálido: cuerpo de modales */
  --color-surface-mint: #E9F2ED;   /* menta: bloques destacados */
  --color-surface-sand: #EEE8DF;   /* arena: botón de la cita del hero */

  --font-family-simonetta: "Simonetta", "Libre Baskerville", "Merriweather", "Georgia", "Times New Roman", serif;
  --font-family-figtree: "Figtree", "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-family-poppins: "Poppins", "Montserrat", "Nunito", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-family-outfit: "Outfit", "Inter", "Manrope", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-family-pangolin:   "Pangolin", "Comic Neue", "Nunito", "Segoe UI", Arial, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* =====================
   RESET & BASE
===================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body, html {
  width: 100%;
  /*overflow-x: clip; /* previene scroll horizontal global */
  margin: 0;
}

body {
  overflow-x: hidden;
}

section {
  scroll-margin-top: 80px; /* altura de tu header */
}

/* Enlace "saltar al contenido": solo visible al recibir foco de teclado */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-family: var(--font-family-figtree);
}

.skip-link:focus {
  left: 0;
}

@font-face {
  font-family: 'Rosvelit';
  src: url('../fonts/RosveliT-Regular.otf') format('opentype');
  font-display: swap;
  font-weight: 400; /* descriptor: var() no es valido en @font-face */
  font-style: normal;
}

@font-face {
  font-family: 'Rosvelit';
  src: url('../fonts/RosveliT-Italic.otf') format('opentype');
  font-display: swap;
  font-weight: 400; /* descriptor: var() no es valido en @font-face */
  font-style: italic;
}

@font-face {
  font-family: 'Rosvelit';
  src: url('../fonts/RosveliT-Bold.otf') format('opentype');
  font-display: swap;
  font-weight: 700; /* descriptor: var() no es valido en @font-face */
  font-style: normal;
}

@font-face {
  font-family: 'Rosvelit';
  src: url('../fonts/RosveliT-BoldItalic.otf') format('opentype');
  font-display: swap;
  font-weight: 700; /* descriptor: var() no es valido en @font-face */
  font-style: italic;
}