/*
  El NONO Pizzería — home.css
  Secciones exclusivas de la página de inicio.
*/

/* ==========================================================================
   HERO — apertura editorial asimétrica
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--color-charcoal-deep);
  color: var(--text-on-dark);
  overflow: hidden;
  padding-top: var(--header-h);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-7);
  width: 100%;
}

/* Puntos decorativos flotantes (motivo pepperoni del logo) */
.floating-dot {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  animation: float-y ease-in-out infinite;
}

.floating-dot--1 { top: 12%; left: 4%; width: 14px; height: 14px; background: var(--color-red); opacity: 0.55; animation-duration: 5s; }
.floating-dot--2 { top: 68%; left: 2%; width: 10px; height: 10px; background: var(--color-gold); opacity: 0.6; animation-duration: 4s; animation-delay: .6s; }
.floating-dot--3 { top: 40%; left: 44%; width: 8px; height: 8px; background: var(--color-gold-deep); opacity: 0.5; animation-duration: 6s; animation-delay: 1.2s; }

@media (max-width: 992px) {
  .floating-dot { display: none; }
}

.hero-copy .eyebrow { color: var(--color-gold); }
.hero-copy .eyebrow::before { background: var(--color-gold); box-shadow: 0 0 0 3px rgba(242, 203, 5, 0.25); }

.hero-title {
  margin-top: var(--space-4);
  font-size: var(--fs-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}

.hero-title em {
  font-style: normal;
  color: var(--color-gold);
}

.hero-lead {
  margin-top: var(--space-5);
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.75);
}

.hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
  background: linear-gradient(160deg, var(--color-red), var(--color-red-dark));
}

.hero-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}

.hero-visual .ribbon { top: var(--space-5); right: -8px; }

.hero-scroll-cue {
  position: absolute;
  bottom: var(--space-6);
  left: var(--container-pad);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  z-index: 3;
}

.hero-scroll-cue .line {
  width: 40px; height: 1px;
  background: rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
}

.hero-scroll-cue .line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-gold);
  transform: translateX(-100%);
  animation: hero-line 2.4s var(--ease-premium) infinite;
}

@keyframes hero-line {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@media (max-width: 992px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { aspect-ratio: 16 / 11; clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%); order: -1; }
  .hero { padding-block: calc(var(--header-h) + var(--space-6)) var(--space-8); min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue .line::after { animation: none; transform: translateX(0); }
}

/* ==========================================================================
   AUTÉNTICO SABOR — narrativa de marca
   ========================================================================== */
.story {
  background: var(--color-cream);
}

.story-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
  align-items: center;
}

.story-media {
  position: relative;
  aspect-ratio: 1 / 1;
  clip-path: polygon(0 0, 100% 12%, 100% 100%, 0% 88%);
  background: radial-gradient(circle at 50% 40%, var(--color-red), var(--color-red-dark));
  display: grid;
  place-items: center;
  padding: var(--space-8);
}

.story-media img { width: 62%; height: auto; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.35)); }

.story-copy p { margin-top: var(--space-5); color: var(--text-muted); max-width: 56ch; }

.story-copy .counter-row { margin-top: var(--space-7); }

@media (max-width: 992px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-media { order: -1; }
}

/* ==========================================================================
   ESPECIALIDAD — HAMBURPIZZA
   ========================================================================== */
.special {
  background: var(--color-charcoal);
  color: var(--text-on-dark);
  overflow: hidden;
}

.special-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-8);
}

.special-media {
  position: relative;
  aspect-ratio: 3 / 2;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
}

.special-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 88%; }

.special-copy .section-title { color: var(--color-gold); }

.special-list { margin-top: var(--space-5); display: grid; gap: var(--space-3); }

.special-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.8);
}

.special-list svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-gold); margin-top: 2px; }

.special-price {
  margin-top: var(--space-6);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.special-price .amount { font-size: clamp(2rem, 2.6vw + 1rem, 3rem); font-weight: 900; color: var(--color-gold); }
.special-price .unit { color: rgba(255, 255, 255, 0.6); font-size: var(--fs-small); }

.special-actions { margin-top: var(--space-6); }

@media (max-width: 992px) {
  .special-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CIERRE DE CONVERSIÓN
   ========================================================================== */
.closing {
  background: var(--color-charcoal-deep);
  color: var(--text-on-dark);
}

.closing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: stretch;
}

.closing-copy .hero-actions { margin-top: var(--space-6); }

.closing-hours {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-small);
}

.closing-hours strong { color: var(--color-white); }

@media (max-width: 992px) {
  .closing-grid { grid-template-columns: 1fr; }
}