/* rumorea — landing (index.php). Depende de styles.css para tokens y base. */

@keyframes rum-eq {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}
@keyframes rum-spin {
  to { transform: rotate(360deg); }
}
@keyframes rum-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* — marco de teléfono (reemplaza el componente IOSDevice del canvas) — */
.phone-frame {
  position: relative;
  width: 300px;
  height: 620px;
  border-radius: 44px;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: -apple-system, system-ui, sans-serif;
  border: 8px solid var(--ink);
  box-shadow: 0 22px 44px -20px rgba(25, 24, 31, 0.4);
}
.phone-notch {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 28px;
  border-radius: 20px;
  background: #000;
  z-index: 50;
}
.phone-screen {
  position: relative;
  height: 100%;
  background: #000;
  color: #fff;
  overflow: hidden;
}
.phone-home-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 8px;
  pointer-events: none;
}
.phone-home-indicator span {
  width: 120px;
  height: 5px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.7);
}

/* — placeholder del video de portada (sin foto real asociada) — */
.tiktok-cover {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 55% at 50% 64%, rgba(8, 7, 10, 0.55) 0%, rgba(8, 7, 10, 0) 72%),
    radial-gradient(140% 90% at 18% 0%, rgba(255, 205, 160, 0.30) 0%, rgba(255, 205, 160, 0) 50%),
    radial-gradient(100% 80% at 86% 92%, rgba(245, 72, 121, 0.24) 0%, rgba(245, 72, 121, 0) 60%),
    linear-gradient(200deg, #35323d 0%, #17151b 55%, #201a24 100%);
}
.tiktok-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* — ilustración del hero: alegoría de la publicidad (megáfono → views → pago) — */
.hero-ad {
  display: block;
  width: 100%;
  max-width: 660px;
  height: auto;
  margin: 48px auto 0;
}
.hero-ad .ad-ink { fill: var(--ink); }
.hero-ad .ad-pink { fill: var(--pink); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.hero-ad .ad-lime { fill: var(--lime); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.hero-ad .ad-paper { fill: #fff; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.hero-ad .ad-wave { fill: none; stroke: var(--lime); stroke-width: 5; stroke-linecap: round; }
.hero-ad .ad-label { font-family: var(--font-heading); font-weight: 800; fill: var(--ink); }

/* — animaciones al hacer scroll — */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(.16,.8,.3,1), transform 0.7s cubic-bezier(.16,.8,.3,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 70ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 140ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 210ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 280ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 350ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* — menú hamburguesa (mobile) — */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  padding: 0;
  cursor: pointer;
}
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
  display: none;
}
.mobile-menu a {
  padding: 14px 2px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-child { border-bottom: none; }

/* — tarjeta de la sección "Ejemplo" — */
.ejemplo-card {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 56px);
  box-shadow: 0 24px 48px -20px rgba(25, 24, 31, 0.35);
}

/* — ficha "views verificados" junto al teléfono — */
.verified-badge {
  position: absolute;
  top: -18px;
  left: -18px;
  z-index: 2;
}

/* — mobile — */
@media (max-width: 680px) {
  /* la navegación de texto no entra en una sola línea en pantallas chicas;
     se reemplaza por el botón de menú + panel desplegable */
  .nav-link { display: none; }
  .menu-toggle { display: inline-flex; }

  /* el mockup del teléfono está armado con coordenadas fijas pensadas para
     300x620 (íconos, avatar, tarjeta de stats...). Achicar el ancho solo
     (como antes, con aspect-ratio) rompía esas cuentas y el avatar/like/
     comment terminaba montado arriba del todo. Con "zoom" se achica el
     teléfono completo como una sola unidad — todo sigue proporcional. */
  .phone-frame {
    zoom: min(1, calc((100vw - 96px) / 300));
  }

  /* panel desplegable con transición suave (max-height/opacity en vez de
     display, que no se puede animar) */
  .mobile-menu {
    display: flex;
    flex-direction: column;
    background: var(--ground);
    border-bottom: 2px solid var(--line);
    padding: 0 clamp(20px,5vw,64px);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(.4,0,.2,1), opacity 0.28s ease, padding 0.35s ease;
  }
  .mobile-menu.is-open {
    max-height: 420px;
    opacity: 1;
    padding: 6px clamp(20px,5vw,64px) 18px;
  }

  /* la card blanca con borde duro se ve descuadrada en el espacio angosto
     de mobile — se saca el marco y queda el contenido suelto */
  .ejemplo-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  /* la ficha flotante en la esquina del teléfono también se ve descuadrada
     sin el espacio de sobra del layout de escritorio — pasa a ir arriba
     del teléfono, centrada y en el flujo normal */
  .verified-badge {
    position: static;
    display: flex;
    justify-content: center;
    margin: 0 0 14px;
  }
}