/* ── Production Stylesheet — Natalia Cañete | Derecho de Familia y Niñez ── */

/* ── Fonts & Variables ── */
:root {
  --color-olive: #4A5D4E;
  --color-olive-light: #6B7F6F;
  --color-olive-dark: #374840;
  --color-olive-faint: #EFF3F0;
  --color-sand: #D9C5B2;
  --color-sand-light: #EDE2D6;
  --color-sand-dark: #C0A88E;
  --color-clay: #4A4A4A;
  --color-clay-light: #6B6B6B;
  --color-linen: #FAF8F5;
  --color-linen-dark: #F2EDE6;
  --color-cream: #F8F6F2;
}

/* ── Base resets ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Lato', system-ui, -apple-system, sans-serif;
  color: var(--color-clay);
  background-color: var(--color-linen);
  margin: 0;
  padding: 0;
}

/* ── Typography ── */
.font-serif { font-family: 'Playfair Display', Georgia, serif; }
.font-sans { font-family: 'Lato', system-ui, sans-serif; }

/* ── Color Utility Classes ── */
.bg-olive { background-color: var(--color-olive); }
.bg-olive-light { background-color: var(--color-olive-light); }
.bg-olive-dark { background-color: var(--color-olive-dark); }
.bg-olive-faint { background-color: var(--color-olive-faint); }
.bg-sand { background-color: var(--color-sand); }
.bg-sand-light { background-color: var(--color-sand-light); }
.bg-sand-dark { background-color: var(--color-sand-dark); }
.bg-clay { background-color: var(--color-clay); }
.bg-linen { background-color: var(--color-linen); }
.bg-cream { background-color: var(--color-cream); }

.text-olive { color: var(--color-olive); }
.text-olive-light { color: var(--color-olive-light); }
.text-olive-dark { color: var(--color-olive-dark); }
.text-sand { color: var(--color-sand); }
.text-clay { color: var(--color-clay); }
.text-clay-light { color: var(--color-clay-light); }

.border-olive { border-color: var(--color-olive); }
.border-sand { border-color: var(--color-sand); }

/* ── Custom Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #FAF8F5; }
::-webkit-scrollbar-thumb { background: #4A5D4E; border-radius: 99px; }

/* ── Glassmorphism ── */
.header-glass {
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  background: rgba(250, 248, 245, 0.88);
  border-bottom: 1px solid rgba(74, 93, 78, 0.10);
}

/* ── Hero Texture ── */
.hero-texture::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(74, 93, 78, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(217, 197, 178, 0.18) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Accents & Decorations ── */
.title-accent::after {
  content: '';
  display: block;
  width: 52px; height: 3px;
  background: #D9C5B2;
  border-radius: 2px;
  margin-top: 14px;
}

.card-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(74, 93, 78, 0.12);
}

.wa-ring::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: rgba(74, 93, 78, 0.25);
  animation: wa-pulse 2.2s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.ornament-sep {
  display: flex; align-items: center; gap: 12px; justify-content: center;
}
.ornament-sep span { display: block; height: 1px; width: 64px; background: #D9C5B2; }
.ornament-sep i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #D9C5B2; }

.portrait-frame {
  position: relative;
  border-radius: 2px 48px 2px 48px;
  overflow: hidden;
  background: linear-gradient(135deg, #EFF3F0 0%, #E9E2D8 100%);
}
.portrait-frame::after {
  content: '';
  position: absolute; inset: 0;
  border: 2px solid rgba(74, 93, 78, 0.15);
  border-radius: inherit;
  pointer-events: none;
}

.media-card {
  border: 1.5px solid rgba(74, 93, 78, 0.12);
  border-radius: 10px;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.media-card:hover {
  border-color: rgba(74, 93, 78, 0.35);
  box-shadow: 0 4px 20px rgba(74, 93, 78, 0.08);
}

.cta-bg {
  background: linear-gradient(135deg, #4A5D4E 0%, #374840 55%, #2F3D36 100%);
  position: relative; overflow: hidden;
}
.cta-bg::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(217, 197, 178, 0.12) 0%, transparent 65%);
  top: -150px; right: -100px;
  pointer-events: none;
}
.cta-bg::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(217, 197, 178, 0.08) 0%, transparent 65%);
  bottom: -80px; left: 5%;
  pointer-events: none;
}

:focus-visible { outline: 2px solid #4A5D4E; outline-offset: 3px; }