/* =========================================================
   PIZZA VAKNA — sección oscura destacada
   ---------------------------------------------------------
   Estructura:
     .vakna__deco     → decoración de fondo (brillo, hojas, semillas)
     .vakna__content  → logo, título, beneficios y botones
     .vakna__media    → video, foto y sello giratorio
     .vakna__marquee  → banda verde con texto en movimiento
   Animaciones con CSS; js/vakna.js agrega el efecto 3D del
   mouse y pausa el video cuando no está en pantalla.
   ========================================================= */

.vakna {
  /* Colores propios de la sección (el fondo coincide con el del logo de Vakna) */
  --vk-bg:      #161712;
  --vk-card:    #1F211B;
  --vk-line:    rgba(255, 255, 255, .09);
  --vk-text:    rgba(255, 255, 255, .74);
  --vk-cream:   #EADFC8;   /* tono crema de las semillas y del flyer */

  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: var(--section-y);
  color: var(--vk-text);
  background: var(--vk-bg);
}

/* =========================================================
   DECORACIÓN DE FONDO
   ========================================================= */
.vakna__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Brillo verde detrás de las imágenes */
.vakna__glow {
  position: absolute;
  width: 720px; height: 720px;
  right: -180px; top: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 185, 71, .22) 0%, rgba(91, 185, 71, 0) 65%);
  animation: vk-breathe 8s ease-in-out infinite;
}

/* Textura sutil de puntos (tipo pizarra) */
.vakna__deco::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}

/* Ramas de hojas en los costados */
.vakna__sprig {
  position: absolute;
  width: 120px; height: 220px;
  color: var(--c-green);
  opacity: .16;
  transform-origin: bottom center;
  animation: vk-sway 7s ease-in-out infinite;
}
.vakna__sprig--left  { left: -20px;  bottom: 90px; --rot: -18deg; }
.vakna__sprig--right { right: 2%; top: 40px; --rot: 160deg; animation-delay: -3.5s; }

/* Semillas flotando: posición y tamaño vienen del HTML (style="--x --y --s --d --r") */
.seed {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: calc(var(--s) * 1.5);
  border-radius: 50%;
  background: #6B5A43;
  opacity: .55;
  transform: rotate(var(--r));
  animation: vk-float 9s ease-in-out infinite;
  animation-delay: var(--d);
}
.seed--light { background: var(--vk-cream); opacity: .28; }
.seed--green { background: var(--c-green); opacity: .35; }

/* =========================================================
   LAYOUT
   ========================================================= */
.vakna__inner {
  display: grid;
  gap: 56px;
  align-items: center;
  padding-bottom: clamp(72px, 9vw, 112px);
}
@media (min-width: 1000px) {
  .vakna__inner { grid-template-columns: 1.15fr .85fr; gap: 64px; }
}

/* =========================================================
   TEXTO
   ========================================================= */
.vakna__brand { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.vakna__logo {
  width: 96px; height: 96px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--vk-line), 0 10px 30px rgba(0, 0, 0, .45);
}
.vakna__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--c-green);
}
.vakna__eyebrow strong { color: #fff; letter-spacing: .08em; }

.vakna__title {
  font-family: var(--ff-title);
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.04;
  text-transform: uppercase;
  color: #fff;
}
.vakna__lead {
  max-width: 560px;
  margin-top: 18px;
  font-size: var(--fs-lg);
  color: var(--vk-text);
}
.vakna__lead strong { color: #fff; }

/* Beneficios */
.vakna__features {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}
@media (min-width: 600px) { .vakna__features { grid-template-columns: 1fr 1fr; } }

.vfeature {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--vk-line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)) var(--vk-card);
  transition: border-color var(--t), transform var(--t) var(--ease), opacity .7s var(--ease);
}
.vfeature:hover { border-color: rgba(91, 185, 71, .55); transform: translateY(-3px); }
/* Aparición escalonada (se suma a la animación .reveal de base.css) */
.vfeature:nth-child(2) { transition-delay: .06s; }
.vfeature:nth-child(3) { transition-delay: .12s; }
.vfeature:nth-child(4) { transition-delay: .18s; }
.vfeature:nth-child(5) { transition-delay: .24s; }
.vfeature:nth-child(6) { transition-delay: .30s; }
.vfeature.is-visible:hover { transition-delay: 0s; }

.vfeature__icon {
  flex: none;
  width: 42px; height: 42px;
  padding: 9px;
  border-radius: 12px;
  color: var(--c-green);
  background: rgba(91, 185, 71, .12);
}
.vfeature h3 {
  font-family: var(--ff-title);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}
.vfeature p { margin-top: 2px; font-size: var(--fs-sm); line-height: 1.5; color: var(--vk-text); }

.vakna__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.vakna__actions .btn { flex: 1 1 200px; max-width: 280px; }
.vakna__actions .btn--ghost { background: var(--vk-bg); } /* fondo sólido: que las semillas no se vean a través */
.vakna__actions .btn--ghost:hover { background: #fff; }

/* =========================================================
   IMÁGENES (video + foto + sello)
   ========================================================= */
.vakna__media {
  position: relative;
  width: min(100%, 420px);
  margin-inline: auto;
  padding: 0 0 70px 40px;
  perspective: 900px;
}

/* Marco del video (formato vertical, como una historia) */
.vakna__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  width: min(100%, 320px);
  margin-left: auto;
  padding: 8px;
  border-radius: 32px;
  background: linear-gradient(145deg, #2C2F27, #121310);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 0 1px var(--vk-line), 0 0 80px rgba(91, 185, 71, .18);
  transform: rotateY(var(--tilt-y, -6deg)) rotateX(var(--tilt-x, 3deg));
  transition: transform .5s var(--ease);
}
.vakna__video {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 25px;
  background: #000;
}

/* Foto real superpuesta */
.vakna__photo {
  position: absolute;
  left: 0; bottom: 18px;
  width: 58%;
  margin: 0;
  padding: 6px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
  transform: rotate(-7deg);
  animation: vk-bob 6s ease-in-out infinite;
}
.vakna__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 13px; }

/* Sello circular que gira */
.vakna__stamp {
  position: absolute;
  top: -26px; right: -14px;
  width: 116px; height: 116px;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45));
}
.vakna__stamp-bg   { fill: var(--c-green); }
.vakna__stamp-text {
  font-family: var(--ff-title);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  fill: #10240C;
}
.vakna__stamp-ring {
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: vk-spin 16s linear infinite;
}
.vakna__stamp-icon { color: #10240C; }

@media (min-width: 1000px) {
  .vakna__media { width: 100%; max-width: 440px; }
}

/* =========================================================
   BANDA INFERIOR (marquee)
   ========================================================= */
.vakna__marquee {
  position: relative;
  padding: 16px 0;
  overflow: hidden;
  background: var(--c-green);
  transform: rotate(-1.5deg) scale(1.03);
  margin-bottom: 36px; /* espacio para que la banda inclinada no se corte abajo */
}
.vakna__marquee-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: vk-marquee 26s linear infinite;
}
.vakna__marquee span {
  font-family: var(--ff-title);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  color: #10240C;
}
.vakna__marquee i { font-style: normal; font-size: 1.1rem; color: #fff; }

/* =========================================================
   KEYFRAMES
   ========================================================= */
@keyframes vk-float {
  0%, 100% { transform: translate(0, 0) rotate(var(--r)); }
  50%      { transform: translate(8px, -22px) rotate(calc(var(--r) + 40deg)); }
}
@keyframes vk-sway {
  0%, 100% { transform: rotate(var(--rot)); }
  50%      { transform: rotate(calc(var(--rot) + 6deg)); }
}
@keyframes vk-breathe {
  0%, 100% { transform: scale(1);    opacity: .9; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes vk-bob {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50%      { transform: rotate(-5deg) translateY(-10px); }
}
@keyframes vk-spin { to { transform: rotate(360deg); } }
/* La pista tiene el texto duplicado: moverla -50% hace el loop sin cortes */
@keyframes vk-marquee { to { transform: translateX(-50%); } }

/* =========================================================
   CELULAR / TABLET
   ========================================================= */
@media (max-width: 999px) {
  /* Tablet: el video sube y va justo después del título (es lo más atractivo).
     "display: contents" hace que los hijos de .vakna__content se acomoden
     como si estuvieran sueltos, así les podemos cambiar el orden con "order". */
  .vakna__inner   { gap: 0; }
  .vakna__content { display: contents; }
  .vakna__brand    { order: 1; }
  .vakna__title    { order: 2; }
  .vakna__lead     { order: 3; }
  .vakna__media    { order: 4; margin-top: 40px; }
  .vakna__features { order: 5; }
  .vakna__actions  { order: 6; }
}
/* En celular esta sección se compacta todavía más: ver css/mobile.css */

/* Con "reducir movimiento" quedan quietas (base.css ya apaga las animaciones) */
@media (prefers-reduced-motion: reduce) {
  .vakna__frame { transform: none; }
}