/* =====================================================================
   PÁGINA DE MARKETING (nuestra-boda.co) – estilos del landing comercial.
   Se carga junto a css/style.css (variables, botones, header/nav y
   selector de idioma vienen de ahí) y solo añade los componentes propios
   de este landing: hero, secciones de features, pasos, ejemplo, contacto
   y el botón flotante de WhatsApp.
   ===================================================================== */

/* El header de style.css asume una hero oscura (texto blanco que se
   oscurece al hacer scroll). Este landing tiene una hero clara, así que
   el header se muestra siempre en su versión "clara". */
body.biz-page .site-header {
  background: rgba(253, 250, 246, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
body.biz-page .nav-brand {
  color: var(--color-sage-dark);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
body.biz-page .nav-links a { color: var(--color-text); }
body.biz-page .nav-toggle span { background: var(--color-text); }
body.biz-page .lang-switcher { background: rgba(58, 51, 46, 0.06); }
body.biz-page .lang-btn { border-color: rgba(58, 51, 46, 0.2); }

body.biz-page { padding-top: 0; }

/* ============ HERO ============ */
.biz-hero {
  position: relative;
  padding: 160px 0 100px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(224, 195, 184, 0.55), transparent),
    radial-gradient(ellipse 55% 45% at 10% 100%, rgba(154, 160, 141, 0.35), transparent),
    linear-gradient(160deg, var(--color-cream) 0%, var(--color-bg) 55%, var(--color-bg) 100%);
  text-align: center;
}
.biz-hero-rings {
  width: 64px;
  height: 40px;
  color: var(--color-gold);
  margin: 0 auto 22px;
}
.biz-hero-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.biz-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 22px;
  color: var(--color-text);
}
.biz-hero-text {
  font-size: 1.15rem;
  color: var(--color-text-light);
  max-width: 620px;
  margin: 0 auto 36px;
  line-height: 1.75;
}
.biz-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.biz-hero-actions .btn svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: 8px; }

/* ============ SECCIONES GENERALES ============ */
.biz-section { padding: 90px 0; }
.biz-section-alt { background: var(--color-cream); }

/* ============ FEATURES ============ */
.biz-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 46px;
}
.biz-feature-card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(201, 184, 160, 0.3);
}
.biz-feature-icon {
  width: 34px;
  height: 34px;
  color: var(--color-burgundy);
  margin-bottom: 16px;
}
.biz-feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--color-text);
}
.biz-feature-card p {
  margin: 0;
  color: var(--color-text-light);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* ============ CÓMO FUNCIONA ============ */
.biz-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 50px;
  counter-reset: biz-step;
}
.biz-step { text-align: center; position: relative; }
.biz-step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-sage-dark);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.biz-step h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 10px;
}
.biz-step p {
  margin: 0;
  color: var(--color-text-light);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* ============ CONTACTO ============ */
.biz-contact { text-align: center; }
.biz-contact-text {
  max-width: 560px;
  margin: 0 auto 32px;
  color: var(--color-text-light);
  line-height: 1.7;
}
.biz-contact-actions { display: flex; justify-content: center; }
.biz-whatsapp-btn svg { width: 20px; height: 20px; vertical-align: -5px; margin-right: 10px; }

/* ============ BOTÓN FLOTANTE DE WHATSAPP ============ */
.biz-whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  z-index: 90;
  transition: transform 0.2s ease;
}
.biz-whatsapp-float:hover { transform: scale(1.08); }
.biz-whatsapp-float svg { width: 28px; height: 28px; }

/* ============ FOOTER ============ */
.biz-footer {
  background: var(--color-sage-dark);
  color: var(--color-white);
  padding: 40px 0;
  text-align: center;
}
.biz-footer-brand {
  font-family: var(--font-script);
  font-size: 1.8rem;
  margin: 0 0 8px;
}
.biz-footer-tagline { margin: 0; opacity: 0.85; font-size: 0.92rem; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .biz-features-grid { grid-template-columns: repeat(2, 1fr); }
  .biz-steps { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 720px) {
  .biz-hero { padding: 130px 0 70px; }
  .biz-features-grid { grid-template-columns: 1fr; }
  .biz-section { padding: 64px 0; }
}