:root {
  --pink: #C93DA2;
  --pink-dark: #C7086D;
  --plum: #611C46;
  --green: #93C464;
  --green-dark: #3F7A3D;
  --green-darker: #2E5B2C;
  --yellow: #EFDB3B;
  --cream: #FFF9E9;
}

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

html, body {
  height: 100%;
}

body {
  font-family: 'Fredoka', sans-serif;
  background: var(--pink);
  color: var(--cream);
  overflow-x: hidden;
}

.bg-image {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--pink) url('../assets/img/fondo.png') center / cover no-repeat;
}

.falling-leaves {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.falling-leaf {
  position: absolute;
  top: -10%;
  left: var(--left);
  width: var(--size);
  height: auto;
  opacity: 0;
  filter: none;
  animation: leaf-fall var(--duration) linear var(--delay) infinite;
  pointer-events: auto;
  cursor: pointer;
}

.falling-leaf[data-tint="dark"] { filter: brightness(0.62) saturate(1.15); }
.falling-leaf[data-tint="light"] { filter: brightness(1.18) saturate(0.75); }
.falling-leaf[data-tint="yellow"] { filter: hue-rotate(-50deg) saturate(1.6) brightness(1.12); }

.falling-leaf.is-popped {
  pointer-events: none;
}

.leaf-particle {
  position: fixed;
  top: 0;
  left: 0;
  width: 7px;
  height: 10px;
  border-radius: 1px 8px;
  pointer-events: none;
  z-index: 6;
  animation: particle-burst 0.6s ease-out forwards;
}

@keyframes particle-burst {
  0%   { transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1); opacity: 0.95; }
  100% { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .leaf-particle { animation-duration: 0.001s; }
}

@keyframes leaf-fall {
  0%   { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.85; }
  16%  { transform: translateY(14vh) translateX(var(--drift)) rotate(55deg); }
  33%  { transform: translateY(34vh) translateX(calc(var(--drift) * -1)) rotate(115deg); }
  50%  { transform: translateY(55vh) translateX(var(--drift)) rotate(180deg); }
  66%  { transform: translateY(75vh) translateX(calc(var(--drift) * -1)) rotate(245deg); }
  83%  { transform: translateY(95vh) translateX(var(--drift)) rotate(305deg); }
  92%  { opacity: 0.85; }
  100% { transform: translateY(115vh) translateX(0) rotate(360deg); opacity: 0; }
}

@media (max-width: 640px) {
  .falling-leaf:nth-child(3n) { display: none; }
}

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

.hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem 5rem;
  pointer-events: none;
}

.hero__bug {
  width: 110px;
  height: auto;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.15));
}

.hero__logo {
  width: min(90%, 480px);
  height: auto;
}

.pill-wrap {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.leaf--top {
  width: clamp(140px, 26vw, 210px);
  height: auto;
  margin-bottom: 1rem;
}

.hero__pill {
  display: inline-block;
  background: var(--green);
  color: var(--green-darker);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  letter-spacing: 0.03em;
  padding: 0.6em 1.6em;
  border-radius: 999px;
}

.hero__coming-soon {
  margin-top: 1.25rem;
  font-size: clamp(1.6rem, 6.5vw, 3.6rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--plum);
  white-space: nowrap;
}

.photo-strip {
  position: fixed;
  top: 0;
  right: 0;
  width: clamp(180px, 20vw, 320px);
  height: 100vh;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.photo-strip__track {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  animation: photo-scroll 32s linear infinite;
}

.photo-strip__track img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

@keyframes photo-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes photo-scroll-x {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.photo-strip__nav {
  display: none;
}

@media (max-width: 900px) {
  .photo-strip-wrap {
    position: relative;
    width: 100%;
    margin: 1rem 0 3rem;
    z-index: 2;
  }

  .photo-strip {
    position: static;
    width: 100%;
    height: auto;
    pointer-events: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  }

  .photo-strip::-webkit-scrollbar {
    display: none;
  }

  .photo-strip__track {
    flex-direction: row;
    align-items: center;
    height: auto;
    gap: 18px;
    padding: 0 14px;
    animation: none;
  }

  .photo-strip__track img {
    width: min(86vw, 380px);
    height: auto;
    flex-shrink: 0;
    scroll-snap-align: center;
  }

  .photo-strip__track img:nth-child(n + 4) {
    display: none;
  }

  .photo-strip__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(97, 28, 70, 0.55);
    color: var(--cream);
    font-size: 1.6rem;
    line-height: 1;
    z-index: 4;
    cursor: pointer;
    pointer-events: auto;
  }

  .photo-strip__nav--prev { left: 6px; }
  .photo-strip__nav--next { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-strip__track { animation: none; }
  .photo-strip { scroll-behavior: auto; }
}