/* ============================================================
   Morocco Pulse Travel — main.css
   Tipografía self-hosted (.woff2 variable), tokens, reset y layout.
   ============================================================ */

/* ---------- Fuentes variables self-hosted (.woff2) ---------- */
@font-face {
  font-family: "Playfair Display";
  src: url(../fonts/playfair-display-var.woff2) format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url(../fonts/inter-var.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(../fonts/jetbrains-mono-var.woff2) format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta Binoma */
  /* Paleta OASIS — teal + terracota (industria viajes/desierto).
     Paleta MOROCCO PULSE TRAVEL — derivada directamente del logo del cliente.
     Tres voces: teal profundo ("Travel") · cobre ("Pulse") · granate ("Morocco").
     Se mantienen los nombres de token para no romper referencias previas. */
  --purple: #1F5C66;        /* marca: teal del logo ("Travel") */
  --purple-dark: #154850;   /* marca oscura (hover) */
  --orange: #D87B35;        /* acento: cobre del logo ("Pulse") */
  --orange-dark: #B66120;   /* acento oscuro (hover) */
  --orange-cta: #AC5C1E;    /* cobre para CTA con texto blanco · 4.88:1 WCAG AA */
  --maroon: #6B2C1E;        /* ancla cálida del logo ("Morocco") · wordmark / display */
  --maroon-dark: #4F1E13;   /* granate oscuro */
  --green: #25D366;         /* WhatsApp / disponibilidad */
  --ink: #14201E;           /* tinta cálida (secciones oscuras) */
  --ink-soft: #1e2b28;      /* superficies oscuras (testimonios) */
  --gray: #F8F4ED;          /* fondo arena ligeramente más cálido */
  --gray-mid: #e6ded2;      /* bordes cálidos */
  --text: #26302d;          /* texto principal */
  --text-soft: #6a6f69;     /* texto secundario */
  --white: #ffffff;

  /* Tipografía — serif editorial en titulares, sans geométrica en cuerpo/UI */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Sistema */
  --radius: 8px;
  --radius-lg: 18px;
  --focus-ring: #AC5C1E;        /* copper · anillo de foco sobre fondos claros */
  --focus-ring-on-dark: #F3E6B0; /* oro claro · anillo de foco sobre fondos oscuros */
  --shadow-sm: 0 1px 3px rgba(8, 8, 12, 0.08);
  --shadow-md: 0 8px 24px rgba(8, 8, 12, 0.10);
  --shadow-lg: 0 20px 50px rgba(8, 8, 12, 0.18);
  --container: 1180px;
  --gutter: 24px;
  --transition: 0.25s ease;

  /* ---------- Tokens del tema claro (fallback = look actual) ----------
     Las dos paletas claras viven en los bloques html[data-theme] de abajo.
     Aquí dejamos fallbacks para que una página sin data-theme no se rompa. */
  --bg: var(--white);              /* fondo del body */
  --surface-2: var(--white);       /* tarjetas sobre superficie */
  --cta-text: var(--white);        /* texto sobre el CTA */
  --gold: #C8A24B;                 /* oro de acento */
  --word: var(--orange);           /* remate "se vive" */
  --grad-accent: linear-gradient(135deg, var(--purple), var(--orange)); /* números, líneas de flujo y acentos decorativos */
  --green-dark: #1fb855;           /* hover WhatsApp */
  --footer-soft: #c2c2cc;          /* texto suave del footer */
  --hero-scrim:                    /* scrim del hero (fallback oscuro actual) */
    linear-gradient(180deg, rgba(6,6,10,0.55) 0%, rgba(6,6,10,0.30) 35%, rgba(6,6,10,0.72) 88%, rgba(6,6,10,0.97) 100%),
    linear-gradient(110deg, rgba(6,6,10,0.85) 0%, rgba(8,7,16,0.62) 52%, rgba(28,15,8,0.55) 100%);
}

/* ============================================================
   PALETAS CLARAS CONMUTABLES (Binoma · elección de Ayoub)
   Redefinen los nombres de token existentes → components.css/tour.css
   heredan sin reescribirse. Default del sitio = oasis.
   ============================================================ */
html[data-theme="oasis"] {
  --bg: #FCFBF7;
  --gray: #EBF0EC;            /* superficie alterna (.section--gray) */
  --surface-2: #F5F7F3;       /* tarjetas sobre superficie */
  --gray-mid: #E1E6DF;        /* bordes */
  --text: #20312D;
  --text-soft: #5C6760;
  --purple: #2E6F64;          /* acento (teal Atlas) */
  --purple-dark: #244F47;
  --orange-cta: #AC5C1E;      /* CTA cobre · 4.88:1 AA */
  --cta-text: #ffffff;
  --maroon: #8A4517;          /* hover del CTA */
  --orange: #C75A2A;          /* acento cálido (estrellas, flag, dot) */
  --gold: #C7A24A;
  --word: #E8923F;            /* remate "se vive" (sobre scrim oscuro) */
  --grad-accent: linear-gradient(135deg, #2E6F64 0%, #C75A2A 100%); /* oasis: teal→terracota */
  --ink: #1C2B27;             /* superficies oscuras / footer / texto fuerte */
  --ink-soft: #243531;
  --footer-soft: #9FB2AC;
  --hero-scrim:
    linear-gradient(108deg, rgba(18,30,27,.78) 0%, rgba(18,30,27,.40) 52%, rgba(18,30,27,.12) 100%),
    linear-gradient(180deg, rgba(18,30,27,.18) 0%, transparent 30%, transparent 62%, rgba(252,251,247,.96) 99%, #FCFBF7 100%);
}

html[data-theme="atardecer"] {
  --bg: #FFFBF4;
  --gray: #FBF6EC;       /* alterna de sección · arena muy suave */
  --surface-2: #FFFFFF;  /* tarjetas / inputs / quickbar · blanco limpio */
  --gray-mid: #ECE0CD;   /* bordes cálidos suaves */
  --text: #261B12;
  --text-soft: #6E6356;
  --purple: #138A7B;          /* acento (turquesa) */
  --purple-dark: #0F6B5F;
  --orange-cta: linear-gradient(105deg,#BE4517 0%,#D2611C 50%,#DE7A22 100%); /* CTA terracota→naranja, aguanta texto blanco AA */
  --cta-text: #2A1C12;        /* texto oscuro · AA sobre el gradiente */
  --maroon: #C24E12;          /* hover del CTA (sólido) */
  --orange: #EC6A1E;
  --gold: #F4A92B;
  --word: #F7B85C;
  --grad-accent: linear-gradient(105deg, #C9531A 0%, #E07B23 48%, #EAA23A 100%); /* atardecer: terracota→ámbar (cálido, sin rosa) */
  --ink: #2A1C12;
  --ink-soft: #32261C;
  --footer-soft: #C7B49E;
  --hero-scrim:
    linear-gradient(108deg, rgba(34,22,14,.60) 0%, rgba(34,22,14,.24) 50%, rgba(34,22,14,.05) 100%),
    radial-gradient(75% 60% at 88% 12%, rgba(242,85,127,.18), transparent 60%),
    linear-gradient(180deg, rgba(34,22,14,.08) 0%, transparent 24%, transparent 60%, rgba(255,251,244,.97) 99%, #FFFBF4 100%);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
}

/* Titulares editoriales en serif (alto contraste, oversized) */
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.06;
}

h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

a { color: var(--purple); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--purple-dark); }

/* ---------- Foco visible (WCAG 2.2 · 2.4.11/2.4.13) ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Sobre superficies oscuras, anillo en oro claro para mantener ≥3:1 */
.hero :focus-visible,
.footer :focus-visible,
.section--ink :focus-visible,
.section--lux :focus-visible {
  outline-color: var(--focus-ring-on-dark);
}

img { max-width: 100%; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

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

.section { padding: clamp(48px, 7.5vw, 92px) 0; }
.section--gray { background: var(--gray); }
.section--ink { background: var(--ink); color: #d7d7df; }
.section--ink h2 { color: var(--white); }

.section__head {
  max-width: 1040px;
  margin: 0 auto clamp(28px, 4.5vw, 48px);
  text-align: center;
}
.section__head h2 { text-wrap: balance; }
.section__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--purple);
  margin-bottom: 12px;
  display: inline-block;
}
.section__lead { font-size: 1.1rem; color: var(--text-soft); max-width: 640px; margin-left: auto; margin-right: auto; }
.section--ink .section__lead { color: #c2c2cc; }

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