/* ============================================
   Diárista Express — Color System Override
   Paleta real extraída de artifacts/mobile/constants/colors.ts
   Background: #0F0F0F | Gold: #F4DD7A→#C9A227
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Cookie consent ── */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 720px;
  background: #1A1A1A;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  z-index: 9999;
  transition: opacity .4s ease, transform .4s ease;
}
.cookie-hide {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(20px) !important;
}
.cookie-icon {
  font-size: 26px;
  color: #F4DD7A;
  flex-shrink: 0;
}
.cookie-text {
  flex: 1;
  font-size: 13px;
  color: #888888;
  line-height: 1.5;
}
.cookie-text strong { color: #FFFFFF; }
.cookie-text a { color: #F4DD7A; text-decoration: underline; }
.cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cookie-btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.cookie-btn--primary {
  background: linear-gradient(90deg, #F4DD7A, #C9A227);
  color: #0F0F0F;
}
.cookie-btn--outline {
  background: transparent;
  border: 1px solid #3a3a3a;
  color: #888888;
}
.cookie-btn--outline:hover { border-color: #888; color: #fff; }
@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; text-align: center; bottom: 16px; }
  .cookie-actions { width: 100%; justify-content: center; }
}

/* ── Navbar scroll — fundo preto ao rolar ── */
.navbar {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.navbar.scrolled {
  background: #0F0F0F !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.6) !important;
}

/* ── Testimonial section ── */
.gradient-bg {
  background: linear-gradient(135deg, #1A1A1A 0%, #0F0F0F 100%) !important;
}
.testimonial-quote-wrap {
  background: #1A1A1A !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 12px !important;
  padding: 24px !important;
}
.author-img img {
  border: 2px solid #C9A227 !important;
}
/* roxo do template — shape e quote-wrap */
.testimonial-content-wrap .testimonial-shape:before {
  background: #C9A227 !important;
  opacity: 0.12 !important;
}
.testimonial-content-wrap .testimonial-shape .testimonial-quote-wrap {
  background: #1A1A1A !important;
}

/* ── FAQ section ── */
#faq {
  background: #0F0F0F !important;
}
#faq h2 { color: #FFFFFF !important; }
#faq p   { color: #888888 !important; }
#faq a   { color: #F4DD7A !important; }
#faq .card,
.faq-wrap .card {
  background: #1A1A1A !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 10px !important;
}
/* header aberto (roxo do template) → dourado escuro */
#faq .card-header,
.faq-wrap .card .card-header {
  background: #232014 !important;
  border-bottom: 1px solid #2a2a2a !important;
  color: #F4DD7A !important;
}
#faq .card-header h6,
.faq-wrap .card .card-header h6 { color: #F4DD7A !important; }
/* header colapsado */
.faq-wrap .card .card-header.collapsed {
  background: #1A1A1A !important;
}
.faq-wrap .card .card-header.collapsed h6 { color: #FFFFFF !important; }
/* setinha — era #b9a0f2 */
.faq-wrap .card .card-header:after {
  background: #C9A227 !important;
  color: #0F0F0F !important;
}
.faq-wrap .card .card-header.collapsed:after {
  color: #888888 !important;
}
#faq .card-body,
#faq .white-bg,
.faq-wrap .card .card-body {
  background: #1A1A1A !important;
  color: #888888 !important;
}

/* ── Tipografia ── */
body {
  font-family: 'Inter', sans-serif !important;
}

/* ── Preloader ── */
#preloader {
  background-color: #0F0F0F !important;
}
#preloader .preloader-wrap .thecube .cube:before {
  background-color: #F4DD7A !important;
}

/* ── Overlay do Hero ── */
[image-overlay]:before {
  background: linear-gradient(135deg, #0F0F0F 0%, #1A1A1A 100%) !important;
}

/* ── Cores de ícone ── */
.color-primary  { color: #F4DD7A !important; }
.color-secondary { color: #C9A227 !important; }

/* ── Fundos ── */
.primary-bg   { background: #0F0F0F !important; }
.secondary-bg { background: #1A1A1A !important; }
.accent-bg    { background: #F4DD7A !important; }
.gray-light-bg { background: #111111 !important; }

/* ── Textos sobre fundo escuro ── */
.gray-light-bg p,
.gray-light-bg h2,
.gray-light-bg h5,
.gray-light-bg li,
.gray-light-bg .section-heading p {
  color: #888888 !important;
}
.gray-light-bg h2,
.gray-light-bg h5 {
  color: #FFFFFF !important;
}

/* ── Gradiente (depoimentos, footer) ── */
.gradient-bg {
  background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%) !important;
}

/* ── Máscara da seção de vídeo ── */
.mask-65 {
  background: rgba(10, 10, 10, 0.88) !important;
}

/* ── Navbar ── */
.header nav.navbar.affix {
  background-color: #0A0A0A !important;
}
.header .navbar-brand img {
  max-height: 38px;
}

/* ── Botão primário: gradiente dourado ── */
.btn-brand-02 {
  background: linear-gradient(135deg, #F4DD7A 0%, #C9A227 100%) !important;
  border-color: #F4DD7A !important;
  color: #0F0F0F !important;
  font-weight: 600 !important;
}
.btn-brand-02:hover,
.btn-brand-02:focus {
  background: linear-gradient(135deg, #C9A227 0%, #a88720 100%) !important;
  border-color: #C9A227 !important;
  color: #0F0F0F !important;
}

/* ── Botão outline (fundo escuro → borda dourada) ── */
.btn-outline-brand-02 {
  border-color: #F4DD7A !important;
  color: #F4DD7A !important;
  background: transparent !important;
}
.btn-outline-brand-02:hover,
.btn-outline-brand-02:focus,
.btn-outline-brand-02:active {
  background: #F4DD7A !important;
  border-color: #F4DD7A !important;
  color: #0F0F0F !important;
}

/* ── Botão outline-01 ── */
.btn-outline-brand-01 {
  border-color: #F4DD7A !important;
  color: #F4DD7A !important;
  background: transparent !important;
}
.btn-outline-brand-01:hover,
.btn-outline-brand-01:focus,
.btn-outline-brand-01:active {
  background: #F4DD7A !important;
  border-color: #F4DD7A !important;
  color: #0F0F0F !important;
}

/* ── Botão brand-01 ── */
.btn-brand-01 {
  background: linear-gradient(135deg, #F4DD7A 0%, #C9A227 100%) !important;
  border-color: #F4DD7A !important;
  color: #0F0F0F !important;
}

/* ── Download buttons no hero ── */
.app-download-btn {
  background: linear-gradient(135deg, #F4DD7A 0%, #C9A227 100%) !important;
  border-color: #F4DD7A !important;
  color: #0F0F0F !important;
  font-weight: 600 !important;
}
.app-download-btn:hover {
  background: linear-gradient(135deg, #C9A227 0%, #a88720 100%) !important;
  color: #0F0F0F !important;
}

/* ── Promo row — altura igual em todos os cards ── */
.promo-section .row {
  align-items: stretch;
}
.promo-section [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.promo-section .single-promo-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.promo-section .single-promo-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.promo-section .single-promo-card .card-body > div:last-child {
  flex: 1;
}

/* ── Check-list bullets (ícone fa-check-circle) ── */
.check-list-wrap li:before {
  color: #F4DD7A !important;
}
.dot-circle li:before {
  background: #F4DD7A !important;
}

/* ── Cards de promo ── */
.single-promo-card {
  background: #1A1A1A !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.single-promo-card h5 { color: #FFFFFF !important; }
.single-promo-card p  { color: #888888 !important; }

.single-promo-hover-2:hover {
  background: #232014 !important;
  border-color: #F4DD7A !important;
}
.single-promo-hover-2:hover h5,
.single-promo-hover-2:hover span { color: #F4DD7A !important; }
.single-promo-hover-2:hover p    { color: #C9A227 !important; }

/* ── Números de contagem ── */
.count-number { color: #F4DD7A !important; }

/* ── Features — ícones brancos (sobrescreve gray-light-bg span e main.css) ── */
.features-single-wrap span,
.gray-light-bg .features-single-wrap span,
#features .features-single-wrap span {
  background: #1E1E1E !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  font-size: 24px !important;
}
.features-single-content h5 { color: #FFFFFF !important; }
.features-single-content p  { color: #888888 !important; }

/* ── Section headings ── */
.section-heading h2 { color: #FFFFFF !important; }
.section-heading p  { color: #888888 !important; }

/* ── Phone mockup "Confiança" — tela vaga aceita ── */
.diarista-confianca-phone {
  display: flex;
  justify-content: center;
}
.diarista-confianca-phone .diarista-phone-frame {
  width: 260px;
  height: 520px;
  border-radius: 36px;
  border: 2px solid #2a2a2a;
  background: #0F0F0F;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px #333;
}
.diarista-confianca-phone .diarista-phone-screen.dcp-screen {
  background: #0F0F0F;
  padding: 24px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  overflow: hidden;
}
.dcp-check-wrap { margin-bottom: 10px; }
.dcp-check-circle {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F4DD7A, #C9A227);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #0F0F0F;
  box-shadow: 0 0 18px rgba(244,221,122,0.45);
}
.dcp-title {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 4px;
}
.dcp-subtitle {
  color: #888888;
  font-size: 10px;
  text-align: center;
  line-height: 1.4;
  margin: 0 0 12px;
}
.dcp-subtitle strong { color: #FFFFFF; }
.dcp-card {
  background: #1A1A1A;
  border-radius: 12px;
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
}
.dcp-row { margin-bottom: 8px; }
.dcp-row:last-child { margin-bottom: 0; }
.dcp-row--inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}
.dcp-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #888888;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
.dcp-label i { color: #C9A227; margin-right: 3px; }
.dcp-value {
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  margin: 0;
}
.dcp-sub {
  color: #888888;
  font-size: 10px;
  margin: 0;
}
.dcp-divider {
  height: 1px;
  background: #2a2a2a;
  margin: 8px 0;
}
.dcp-price {
  color: #22C55E;
  font-size: 13px;
  font-weight: 700;
}
.dcp-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.dcp-btn {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dcp-btn--primary {
  background: linear-gradient(90deg, #F4DD7A, #C9A227);
  color: #0F0F0F;
}
.dcp-btn--outline {
  background: transparent;
  border: 1px solid #3a3a3a;
  color: #FFFFFF;
}

/* ── Feature section (fundo branco original → escuro) ── */
.feature-section,
.feature-section.ptb-100 {
  background: #111111 !important;
}
.feature-contents h2 { color: #FFFFFF !important; }
.feature-contents p,
.feature-contents ul li { color: #888888 !important; }

/* ── About section — background + emenda ── */
#about.about-us,
#about {
  padding-top: 40px !important;
}
.about-us {
  background: #111111 !important;
  background-image: url('../images/colaboradores-bg.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  overflow: visible !important;
  position: relative !important;
}
/* overlay escuro sobre a imagem */
.about-us::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.88);
  z-index: 0;
}
/* emenda gradiente para a seção de baixo */
.about-us::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, #111111);
  z-index: 1;
  pointer-events: none;
}
.about-us .container,
.about-us .row,
.about-us .diarista-glow--about {
  position: relative;
  z-index: 2;
}
/* Seção abaixo não corta o glow vindo de cima */
.about-us + .feature-section {
  overflow: visible !important;
}
.about-content-left h2 { color: #FFFFFF !important; }
.about-content-left li { color: #888888 !important; }
.about-content-left strong { color: #F4DD7A !important; }

/* ── Check list ── */
.check-list-wrap li { color: #888888 !important; }
.check-list-wrap li strong { color: #F4DD7A !important; }

/* ── Dot circle ── */
.dot-circle li { color: #888888 !important; }

/* ── Work Process ── */
.work-process-section { background: #111111 !important; }
.process-icon {
  background: #232014 !important;
  border-radius: 50%;
  padding: 12px;
}
.process-icon i { color: #F4DD7A !important; }
.process-content h5 { color: #FFFFFF !important; }
.process-content p  { color: #888888 !important; }

/* ── Download cards (Apple/Google/Web) ── */
.bg-white.rounded.text-center {
  background: #1A1A1A !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.bg-white.rounded.text-center h5 { color: #FFFFFF !important; }
.bg-white.rounded.text-center p  { color: #888888 !important; }
.bg-white.rounded.text-center i  { color: #F4DD7A !important; }

/* ── Screenshots ── */
.screenshots-section { background: #0F0F0F !important; }

/* ── Blog ── */
.our-blog-section { background: #111111 !important; }
.single-blog-card {
  background: #1A1A1A !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.single-blog-card .card-body { background: #1A1A1A !important; }
.single-blog-card .card-title a { color: #FFFFFF !important; }
.single-blog-card .card-text    { color: #888888 !important; }
.meta-date { background: #F4DD7A !important; color: #0F0F0F !important; }
.meta-date strong, .meta-date small { color: #0F0F0F !important; }
.meta-list .list-inline-item { color: #888888 !important; }
.detail-link { color: #F4DD7A !important; font-weight: 600; }
.detail-link:hover { color: #C9A227 !important; }

/* ── Pricing ── */
.pricing-section { background: #0F0F0F !important; }
.single-pricing-pack {
  background: #1A1A1A !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.single-pricing-pack .price-name h5 { color: #FFFFFF !important; }
.pricing-feature-list li           { color: #888888 !important; }
.pricing-feature-list li span      { color: #F4DD7A !important; }
.popular-price {
  border: 2px solid #F4DD7A !important;
  background: #1A1A1A !important;
}
.pricing-switch-wrap .year-switch  { color: #888888 !important; }
.support-cta h5, .support-cta p   { color: #888888 !important; }
.support-cta a { color: #F4DD7A !important; text-decoration: underline; }
.ti-headphone-alt { color: #F4DD7A !important; }

/* ── Pricing — preço ── */
.price.color-secondary { color: #F4DD7A !important; }

/* ── FAQ ── */
#faq { background: #0F0F0F !important; }
.faq-wrap .card {
  background: #1A1A1A !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.faq-wrap .card-header {
  background: #232323 !important;
  color: #F4DD7A !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.faq-wrap .card-header h6 { color: #F4DD7A !important; }
.faq-wrap .card-body      { background: #1A1A1A !important; color: #888888 !important; }

/* ── Contato ── */
.contact-us-section { background: #0F0F0F !important; }
.contact-us-form.gray-light-bg {
  background: #1A1A1A !important;
}
.contact-us-form h4 { color: #FFFFFF !important; }
.form-control {
  background: #232323 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #FFFFFF !important;
}
.form-control::placeholder { color: #888888 !important; }
.contact-us-content h2 { color: #FFFFFF !important; }
.contact-us-content p  { color: #888888 !important; }
.contact-text h5       { color: #FFFFFF !important; }
.contact-text p        { color: #888888 !important; }
.contact-icon span     { background: #232014 !important; color: #F4DD7A !important; }
#btnContactUs {
  background: linear-gradient(135deg, #F4DD7A 0%, #C9A227 100%) !important;
  border-color: #F4DD7A !important;
  color: #0F0F0F !important;
  font-weight: 600 !important;
}

/* ── Footer ── */
.footer-1.gradient-bg { background: linear-gradient(135deg, #0A0A0A 0%, #111111 100%) !important; }
.footer-1.gradient-bg p,
.footer-1.gradient-bg h6 { color: #888888 !important; }
.footer-1.gradient-bg ul li a { color: #888888 !important; }
.footer-1.gradient-bg ul li a:hover { color: #F4DD7A !important; }
.footer-bottom { background: #0A0A0A !important; }
.footer-bottom p,
.footer-bottom a { color: #888888 !important; }
.footer-bottom a:hover { color: #F4DD7A !important; }

/* ── Social ── */
.social-list-default li a {
  background: #232323 !important;
  color: #F4DD7A !important;
}
.social-list-default li a:hover {
  background: #F4DD7A !important;
  color: #0F0F0F !important;
}

/* ── Newsletter ── */
.newsletter-wrap.primary-bg { background: #1A1A1A !important; border: 1px solid rgba(255,255,255,0.06) !important; }
.newsletter-content h3,
.newsletter-content p { color: #FFFFFF !important; }
.input-newsletter {
  background: #232323 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #FFFFFF !important;
}
.newsletter-form button {
  background: linear-gradient(135deg, #F4DD7A 0%, #C9A227 100%) !important;
  color: #0F0F0F !important;
}

/* ── Scroll to top ── */
.scroll-top {
  background: #F4DD7A !important;
  color: #0F0F0F !important;
}

/* ── Body/fundo geral ── */
body { background-color: #0F0F0F !important; color: #FFFFFF !important; }

/* ════════════════════════════════════════
   HERO NOVO — Diárista Express
   ════════════════════════════════════════ */

.diarista-hero {
  position: relative;
  background: #0F0F0F;
  overflow: hidden;
}

/* Warehouse background */
.diarista-hero-warehouse {
  position: absolute;
  inset: 0;
  background: url('../images/hero-warehouse.jpg') center center / cover no-repeat;
  z-index: 0;
}

/* Overlay escuro sobre a imagem */
.diarista-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(10,10,10,0.92) 45%, rgba(10,10,10,0.70) 100%),
    radial-gradient(ellipse 70% 60% at 75% 50%, rgba(244,221,122,0.08) 0%, transparent 65%);
  z-index: 1;
}

/* Divisória dourada */
.diarista-hero-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(244,221,122,0.15) 15%,
    rgba(244,221,122,0.6) 40%,
    rgba(244,221,122,0.8) 50%,
    rgba(244,221,122,0.6) 60%,
    rgba(244,221,122,0.15) 85%,
    transparent 100%
  );
  z-index: 10;
}

/* Grid noise sutil */
.diarista-hero-noise {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 1;
}

/* Fade para próxima seção */
.diarista-hero-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #0F0F0F);
  z-index: 2;
}

/* ── Badge ── */
.diarista-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(244,221,122,0.1);
  border: 1px solid rgba(244,221,122,0.25);
  color: #F4DD7A;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}
.diarista-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  display: inline-block;
  animation: badgePulse 2s infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.4); }
}

/* ── Título ── */
.diarista-hero-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.diarista-hero-highlight {
  background: linear-gradient(135deg, #F4DD7A 0%, #C9A227 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Subtítulo ── */
.diarista-hero-sub {
  font-size: 1.05rem;
  color: #888888;
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 32px;
}

/* ── Botões ── */
.diarista-hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.diarista-btn-gold,
.diarista-btn-ghost {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-radius: 12px;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s ease;
}
.diarista-btn-gold {
  background: linear-gradient(135deg, #F4DD7A 0%, #C9A227 100%);
  color: #0F0F0F !important;
}
.diarista-btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(244,221,122,0.3);
  color: #0F0F0F !important;
}
.diarista-btn-ghost {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #FFFFFF !important;
}
.diarista-btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
  color: #FFFFFF !important;
}
.diarista-btn-gold span,
.diarista-btn-ghost span {
  font-size: 22px;
}
.diarista-btn-gold div,
.diarista-btn-ghost div {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.diarista-btn-gold small,
.diarista-btn-ghost small {
  font-size: 10px;
  opacity: 0.7;
  line-height: 1;
  font-weight: 400;
}
.diarista-btn-gold strong,
.diarista-btn-ghost strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

/* ── Stats ── */
.diarista-hero-stats {
  display: flex;
  align-items: center;
  gap: 24px;
}
.diarista-stat {
  display: flex;
  flex-direction: column;
}
.diarista-stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: #F4DD7A;
  line-height: 1;
}
.diarista-stat-label {
  font-size: 12px;
  color: #888888;
  margin-top: 4px;
}
.diarista-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.1);
}

/* ── Phones wrap com glow ── */
.diarista-phones-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 580px;
}

/* ── Phone frame standalone (Features + Como Funciona) ── */
.diarista-phone-frame--standalone {
  width: 220px;
  height: 440px;
  flex-shrink: 0;
}
.diarista-phone-frame--standalone .diarista-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 0;
  display: block;
}

/* ── Phone mockup frame — base ── */
.diarista-phone {
  position: absolute;
}

/* Hero: phones sobrepostos e próximos */
.diarista-hero .diarista-phone--front {
  z-index: 3;
  left: 50%;
  top: 10px;
  transform: rotate(-8deg) translateX(-100%);
}
.diarista-hero .diarista-phone--back {
  z-index: 2;
  left: 50%;
  top: 30px;
  transform: rotate(6deg) scale(0.88) translateX(-30%);
  opacity: 0.85;
}

/* Seção "Gerencie tudo" */
#about .diarista-phone--front {
  z-index: 11;
  left: 50%;
  top: 10px;
  transform: rotate(-8deg) translateX(-100%);
}
#about .diarista-phone--back {
  z-index: 11;
  left: 50%;
  top: 30px;
  transform: rotate(6deg) scale(0.88) translateX(-30%);
  opacity: 0.85;
}

.diarista-phone-frame {
  width: 220px;
  background: #111111;
  border-radius: 36px;
  border: 2px solid rgba(255,255,255,0.12);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 30px 70px rgba(0,0,0,0.75),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  overflow: hidden;
  padding: 12px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.diarista-phone-notch {
  width: 70px;
  height: 10px;
  background: #000;
  border-radius: 0 0 10px 10px;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.diarista-phone-screen {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  line-height: 0;
}
.diarista-phone-screen img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

/* ── Visual lado direito ── */
.diarista-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 520px;
}

/* Glow central dourado */
.diarista-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(244,221,122,0.45) 0%,
    rgba(244,221,122,0.22) 30%,
    rgba(201,162,39,0.10) 55%,
    transparent 75%
  );
  filter: blur(8px);
  animation: glowPulse 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glowPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.1); opacity: 0.75; }
}

/* Círculo central com logo */
.diarista-hero-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1A1A1A 0%, #232014 100%);
  border: 2px solid rgba(244,221,122,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 16px rgba(244,221,122,0.05),
    0 0 0 32px rgba(244,221,122,0.025),
    0 20px 60px rgba(0,0,0,0.5);
  z-index: 2;
  position: relative;
}
.diarista-hero-circle img {
  width: 100px;
  height: auto;
  object-fit: contain;
}

/* Cards flutuantes */
.diarista-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(26,26,26,0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px 18px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 3;
  white-space: nowrap;
}
.diarista-float-card--top    { top: 60px; left: 0; animation: floatY 4s ease-in-out infinite; }
.diarista-float-card--bottom { bottom: 80px; right: 0; animation: floatY 4s ease-in-out infinite 1.5s; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.diarista-float-card strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.2;
}
.diarista-float-card span {
  font-size: 11px;
  color: #888888;
}
.diarista-float-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(244,221,122,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F4DD7A;
  font-size: 16px;
  flex-shrink: 0;
}
.diarista-float-card-icon--pix {
  background: rgba(34,197,94,0.12);
  color: #22C55E;
}

/* Badge de avaliação */
.diarista-rating-badge {
  position: absolute;
  top: 30px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(26,26,26,0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px;
  padding: 8px 14px;
  font-size: 11px;
  z-index: 3;
  animation: floatY 4s ease-in-out infinite 0.8s;
}
.diarista-rating-badge .fas.fa-star { color: #F4DD7A; font-size: 10px; }
.diarista-rating-badge span { color: #888888; margin-left: 4px; }