/* ═══════════════════════════════════════════════════════════
   PARA ARII — CSS Compartido (todas las páginas)
   ═══════════════════════════════════════════════════════════ */
:root {
  --sky:       #b8dcf4;
  --sky-deep:  #7ab8e0;
  --grass:     #4a8c40;
  --forest:    #2d5a27;
  --cream:     #faf6ef;
  --paper:     #f5f0e8;
  --ink:       #2c3e2d;
  --ink-soft:  #4a6741;
  --ink-mute:  #7a9e7e;
  --pink:      #f9c6d0;
  --peach:     #f0b090;
  --gold:      #c9a84c;
  --teal:      #6ab8a0;
  --lavender:  #b8a8d8;
  --white:     #ffffff;
  --line:      rgba(44,62,45,0.1);

  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'DM Sans', system-ui, sans-serif;
  --jp:     'Noto Sans JP', sans-serif;

  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h:  68px;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  font-size: 16px;
}

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
em  { font-style: italic; }
a   { color: inherit; text-decoration: none; }

/* ── Canvas luciérnagas (global) ── */
#ff-canvas {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 1s ease;
}
#ff-canvas.ready { opacity: 0.6; }

/* ═══════ NAV GLOBAL ═══════ */
.g-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  background: rgba(250,246,239,0);
  backdrop-filter: blur(0);
  transition: background .4s ease, backdrop-filter .4s ease, box-shadow .4s ease;
}
.g-nav.solid {
  background: rgba(250,246,239,0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--ink);
  cursor: pointer;
}
.nav-brand svg { width: 28px; height: 28px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}
.nav-links a {
  display: block;
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-radius: 20px;
  transition: background .2s ease, color .2s ease;
}
.nav-links a:hover,
.nav-links a.active {
  background: rgba(74,140,64,0.12);
  color: var(--forest);
}
.nav-days {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  background: rgba(74,140,64,0.08);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
}

/* ── Hamburger mobile ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  border: none;
  background: none;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}

/* ═══════ SPLASH ═══════ */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(160deg, #c8e8f0 0%, #d8eec8 50%, #f0f8e8 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1.5rem;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  animation: splashAuto .01s 5.5s forwards;
}
@keyframes splashAuto { to { opacity:0; pointer-events:none; } }
.splash.out { opacity:0; pointer-events:none; transform:translateY(-16px); }
.splash-logo { animation: logoBob 2.5s ease-in-out infinite; }
@keyframes logoBob {
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%    { transform:translateY(-14px) rotate(2deg); }
}
.splash-msg {
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--ink-soft);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ═══════ FOOTER ═══════ */
.g-footer {
  padding: 3rem 2rem;
  text-align: center;
  background: var(--forest);
  color: rgba(255,255,255,0.55);
  font-size: 0.78rem;
  line-height: 2.2;
}
.g-footer-jp {
  font-family: var(--jp);
  font-size: 0.85rem;
  color: rgba(180,230,180,0.5);
  letter-spacing: 0.2em;
  display: block;
  margin-top: 0.5rem;
}
.g-footer-nav {
  display: flex; gap: 1.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.g-footer-nav a {
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  transition: color .2s;
}
.g-footer-nav a:hover { color: rgba(200,240,200,0.9); }

/* ═══════ UTILS ═══════ */
.container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }

/* Reveal */
.rev {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.rev.on { opacity:1; transform:none; }

/* Cloud */
.cloud-wrap { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cld {
  position:absolute;
  background:white;
  border-radius:50px;
  opacity:.82;
}
.cld::before,.cld::after {
  content:''; position:absolute;
  background:white; border-radius:50%;
}
.c1{width:200px;height:58px;top:12%;animation:cDrift 38s linear infinite;}
.c1::before{width:100px;height:80px;top:-40px;left:28px;}
.c1::after{width:72px;height:60px;top:-30px;right:28px;}
.c2{width:150px;height:46px;top:22%;left:55%;animation:cDrift 52s linear infinite 8s;}
.c2::before{width:80px;height:64px;top:-32px;left:22px;}
.c2::after{width:58px;height:48px;top:-24px;right:22px;}
.c3{width:180px;height:54px;top:7%;left:28%;animation:cDrift 44s linear infinite 14s;}
.c3::before{width:90px;height:72px;top:-36px;left:24px;}
.c3::after{width:66px;height:56px;top:-28px;right:24px;}
@keyframes cDrift{from{transform:translateX(-110vw)}to{transform:translateX(110vw)}}

/* Leaves */
.leaf-wrap{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3;}
.lf{position:absolute;font-size:1.3rem;animation:lfFall linear infinite;opacity:.7;}
.lf-a{left:12%;animation-duration:9s;animation-delay:0s;}
.lf-b{left:32%;animation-duration:12s;animation-delay:3s;}
.lf-c{left:55%;animation-duration:8s;animation-delay:1.5s;}
.lf-d{left:75%;animation-duration:14s;animation-delay:5s;}
.lf-e{left:88%;animation-duration:10s;animation-delay:7s;}
@keyframes lfFall{
  0%{top:-60px;transform:rotate(0deg);opacity:0;}
  10%{opacity:.7;}
  90%{opacity:.4;}
  100%{top:110%;transform:rotate(380deg);opacity:0;}
}

/* Page transition overlay */
.pt-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: #d8eec8;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path .5s var(--ease);
  pointer-events: none;
}
.pt-overlay.expand { clip-path: circle(150% at 50% 50%); pointer-events: all; }

/* Responsive nav */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: rgba(250,246,239,0.97);
    backdrop-filter: blur(14px);
    flex-direction: column;
    padding: 1rem 0 2rem;
    gap: 0;
    transform: translateY(-110%);
    transition: transform .4s var(--ease);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 0.9rem 2rem; font-size: 1rem; border-radius: 0; }
  .nav-days { display: none; }
}