/* ==========================================================
   Nature Is Freedom — Página "Sitio en Construcción"
   HTML5 + CSS puro, móvil primero.
   ========================================================== */

/* ---------- Paleta (modo claro) ----------
   El logo es monocromo (negro sobre blanco), así que se
   acompaña con tonos naturales: arena, salvia y verde bosque. */
:root {
  --sand:        #ece5d3;
  --sage:        #d9e2cf;
  --moss:        #c4d1b4;
  --ridge:       #2f4a37;          /* silueta de montañas */
  --ridge-alpha: 0.12;

  --text:        #1d2a21;          /* verde casi negro: ~13:1 sobre la tarjeta */
  --text-muted:  #3c4a3f;          /* ~8:1 */
  --accent:      #2e5b3a;          /* verde bosque: ~6.8:1 (AA/AAA texto grande) */
  --accent-hover:#7a4a1f;          /* tierra/cuero: ~6.9:1 */
  --earth:       #8a5a2b;

  --card-bg:     rgba(250, 248, 241, 0.62);
  --card-border: rgba(255, 255, 255, 0.7);
  --card-shadow: 0 1px 2px rgba(29, 42, 33, 0.06),
                 0 18px 48px -12px rgba(29, 42, 33, 0.22);
  --focus:       #1d4fb8;

  --font: "Aptos", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fs-base: 24px;
  --radius: 28px;

  color-scheme: light dark;
}

/* ---------- Paleta (modo oscuro) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --sand:        #1f1c15;
    --sage:        #15211a;
    --moss:        #0d1611;
    --ridge:       #a7c49a;
    --ridge-alpha: 0.07;

    --text:        #eeece3;          /* ~14:1 sobre la tarjeta */
    --text-muted:  #c9cec2;          /* ~10:1 */
    --accent:      #a9d69a;          /* verde claro: ~10:1 */
    --accent-hover:#e6c18f;          /* arena dorada: ~10:1 */
    --earth:       #c9935a;

    --card-bg:     rgba(24, 34, 27, 0.6);
    --card-border: rgba(255, 255, 255, 0.09);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),
                   0 24px 60px -16px rgba(0, 0, 0, 0.65);
    --focus:       #ffd27a;
  }
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  /* Degradado sutil: arena → salvia → musgo, con un halo cálido */
  background-color: var(--sage);
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 10%, color-mix(in srgb, var(--earth) 14%, transparent), transparent 70%),
    linear-gradient(160deg, var(--sand) 0%, var(--sage) 55%, var(--moss) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Silueta de montañas al pie de la página */
.ridge {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  height: 32vh;
  fill: var(--ridge);
  opacity: var(--ridge-alpha);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Layout: centrado vertical y horizontal ---------- */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 1rem;
}

/* ---------- Tarjeta glassmorphism ---------- */
.card {
  width: 100%;
  max-width: 44rem;
  padding: 2rem 1.25rem;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Respaldo si el navegador no soporta backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card { background: color-mix(in srgb, var(--sand) 92%, white); }
}

/* ---------- Logo ----------
   PNG con transparencia (tinta negra, todo lo demás transparente):
   se integra directamente con la tarjeta. Negro sobre la tarjeta clara
   da ~17:1 de contraste. */
.logo {
  display: block;
  width: min(72%, 260px);
  height: auto;
  margin: 0 auto 1.75rem;
  animation: rise 0.9s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@media (prefers-color-scheme: dark) {
  /* En oscuro la tinta negra se invierte a marfil (~15:1 sobre la tarjeta) */
  .logo { filter: invert(1) brightness(0.93); }
}

/* ---------- Tipografía ---------- */
h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
  animation: rise 0.9s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Pequeño acento decorativo bajo el título */
h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin: 0.9rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--earth));
}

.lead,
.contact,
.footer p {
  font-size: var(--fs-base);
}

.lead {
  margin: 0 auto 1.5rem;
  max-width: 34ch;
  color: var(--text-muted);
  text-wrap: pretty;
  animation: rise 0.9s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.contact {
  margin: 0;
  animation: rise 0.9s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* ---------- Enlace del correo ---------- */
.contact__link {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.1em 0.2em;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;          /* evita desbordes en móviles */
  border-radius: 8px;
  transition: color 0.25s ease, text-decoration-color 0.25s ease,
              background-color 0.25s ease, transform 0.25s ease;
}

.contact__link:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
  background-color: color-mix(in srgb, var(--accent-hover) 10%, transparent);
  transform: translateY(-2px);
}

/* Foco visible y claro para navegación con teclado */
.contact__link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

/* ---------- Footer ---------- */
.footer {
  animation: rise 0.9s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.footer p {
  margin: 0;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Animación de entrada ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsivo (móvil primero) ---------- */
@media (min-width: 768px) {
  .page { padding: 3rem 2rem; }
  .card { padding: 3rem 3.5rem; }
  .logo { width: 280px; }
}

@media (min-width: 1200px) {
  .card { padding: 3.5rem 4.5rem; }
  .logo { width: 300px; }
}

/* Pantallas muy pequeñas: se reduce el texto a un mínimo legible */
@media (max-width: 380px) {
  :root { --fs-base: 20px; }
  .card { padding: 1.75rem 1rem; border-radius: 22px; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .contact__link:hover { transform: none; }
}