/* colores, reset y tipografía base */

:root{
  /* paleta tomada directamente del logotipo: negro carbón, verde salvia
     desteñido, y el degradado crema-a-óxido de las letras de "Paradise" */
  --ink: #0d0e0b;
  --ink-raised: #15160f;
  --panel: #1a1c15;
  --panel-border: #2c2f24;

  --moss: #8a9c82;
  --moss-bright: #aebfa2;
  --moss-dim: #4c5744;

  --cream: #ecd3a5;
  --rust: #8a5225;
  --rust-bright: #b3702f;

  --bone: #eae6d6;
  --ash: #a2a795;
  --ash-dark: #5c6152;

  --danger: #b3453a;

  --font-display: 'Bebas Neue', 'Oswald', Georgia, serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --radius: 3px;
  --edge: 1px solid var(--panel-border);
}

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

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  position: relative; /* + z-index abajo: sin esto el fondo de body tapa el page-backdrop */
  z-index: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* textura de fondo: grano sutil + vignette, para que el negro no quede plano */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(138,156,130,0.06), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(138,82,37,0.07), transparent 50%),
    var(--ink);
}

/* Brasas flotantes de fondo — puro clima, cero interacción */

.ember-field{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ember{
  --peak-opacity: 0.85;
  position: absolute;
  bottom: -10px;
  /* el keyframe de cada brasa lo arma embers.js, cada una con su propio
     recorrido. lineal y no ease, si no la variación de velocidad que
     ya tienen los keyframes se duplica y frena feo */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.ember::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* núcleo blanco-amarillo que se apaga a rojo-brasa hacia el borde,
     en vez de un color plano */
  background: radial-gradient(circle at 35% 30%,
    #fff6dd 0%,
    var(--cream) 18%,
    var(--rust-bright) 55%,
    rgba(138,82,37,0) 78%);
  filter: blur(0.3px);
  animation: emberFlicker var(--flicker-duration, 1s) var(--flicker-delay, 0s) ease-in-out infinite;
}

.ember-cool::before{
  background: radial-gradient(circle at 35% 30%,
    #eef4e6 0%,
    var(--moss-bright) 22%,
    var(--moss-dim) 60%,
    rgba(76,87,68,0) 78%);
}

@keyframes emberFlicker{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.35; transform: scale(0.72); }
}

/* reflejo cálido pegado al piso, como si las brasas iluminaran el suelo */

.ember-glow{
  position: absolute;
  bottom: -20%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(179,112,47,0.9) 0%, rgba(179,112,47,0.25) 45%, transparent 72%);
  filter: blur(18px);
  opacity: 0;
  animation: groundFlicker var(--glow-duration, 3s) var(--glow-delay, 0s) ease-in-out infinite;
}

@keyframes groundFlicker{
  0%, 100%{ opacity: 0.08; transform: scale(0.85); }
  35%{ opacity: var(--glow-peak, 0.4); transform: scale(1.05); }
  50%{ opacity: 0.15; transform: scale(0.92); }
  75%{ opacity: var(--glow-peak, 0.4); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .ember-field{ display: none; }
}

/* Barra de progreso de lectura, montada en el borde del header */

.scroll-progress{
  --progress: 0;
  position: absolute;
  left: 0; bottom: -1px;
  width: calc(var(--progress) * 100%);
  height: 2px;
  background: linear-gradient(90deg, var(--rust), var(--moss-bright));
  transition: width .12s linear;
  z-index: 5;
  pointer-events: none;
}

@media (min-width: 861px){
  .scroll-progress{
    left: auto; right: -1px; bottom: 0; top: 0;
    width: 2px;
    height: calc(var(--progress) * 100%);
    background: linear-gradient(180deg, var(--rust), var(--moss-bright));
    transition: height .12s linear;
  }
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  font-weight: 400;
  color: var(--bone);
  margin: 0;
}

p{
  margin: 0 0 1em;
  color: var(--ash);
}

a{
  color: var(--moss);
  text-decoration: none;
}

ul, ol{
  margin: 0;
  padding: 0;
}

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

button{
  font-family: inherit;
  cursor: pointer;
}

::selection{
  background: var(--moss-dim);
  color: var(--bone);
}

.container{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow{
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 12px;
}

.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}