/*!
 * N’Orla — Donde la vida anida
 * Idea y proyecto (TFG): Diana Extremiana
 * Desarrollo web: Diego Extremiana
 */

/* Variables, reset y tipografía */

:root {
  --navy: #024a7d;
  --navy-2: #035a98;
  --deep: #03182a;
  --deep-2: #062740;
  --teal: #00a3a6;
  --sky: #ade0ea;
  --sand: #e9dfcf;

  --bg: #fbfaf7;
  --bg-alt: #f3efe8;
  --text: #1d1d1f;
  --text-2: #6b6a68;
  --text-light: #f5f5f7;
  --text-light-2: rgba(245, 245, 247, 0.72);
  --line: rgba(0, 0, 0, 0.09);

  --radius-l: 28px;
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1200px;
  --nav-h: 52px;

  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 0;
}

body {
  margin: 0;
  background: var(--deep);
  color: var(--text);
  font: 100%/1.5 var(--font-text);
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* respaldo para Safari < 16 */
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Tipografía */

.display {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.4vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 700;
  text-wrap: balance;
}
.display--xl { font-size: clamp(2.6rem, 7.4vw, 6.25rem); letter-spacing: -0.038em; line-height: 1; }
.display--light { color: var(--text-light); }

.eyebrow {
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin-bottom: 0.9em;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.86); }
.eyebrow--sky { color: var(--sky); }

@media (prefers-contrast: more) {
  [data-words] .w { opacity: 0.4; }
}