/* ================================================================
   MELHORIAS DE LAYOUT — SeuNutricionista ERP Landing Page
   Aplicar como <link rel="stylesheet" href="melhorias-layout.css">
   após o CSS inline existente, ou concatenar ao final do <style>.
   ================================================================ */

/* ------------------------------------------------------------------
   1. TOKENS DE DESIGN AUMENTADOS
   ------------------------------------------------------------------ */
:root {
  /* Sombras realistas para simular profundidade de tela */
  --screen-shadow:
    0 2.8px 2.2px rgba(47, 74, 50, 0.034),
    0 6.7px 5.3px rgba(47, 74, 50, 0.048),
    0 12.5px 10px rgba(47, 74, 50, 0.06),
    0 22.3px 17.9px rgba(47, 74, 50, 0.072),
    0 41.8px 33.4px rgba(47, 74, 50, 0.086),
    0 100px 80px rgba(47, 74, 50, 0.12);

  --screen-shadow-hover:
    0 4.5px 3.6px rgba(47, 74, 50, 0.042),
    0 12.5px 10px rgba(47, 74, 50, 0.06),
    0 30.1px 24.1px rgba(47, 74, 50, 0.078),
    0 100px 80px rgba(47, 74, 50, 0.14);

  /* Reflexo sutil na "tela" */
  --screen-glare: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(255, 255, 255, 0) 50%
  );

  /* Cantos mais suaves */
  --radius-screen: 12px;
  --radius-screen-sm: 8px;
}

/* ------------------------------------------------------------------
   2. SCREENSHOTS COM BORDAS E SOMBRAS MAIS REALISTAS
   ------------------------------------------------------------------ */

/* Wrapper principal dos screenshots de desktop */
.module-visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-screen);
  border: none;
  background: #0f1115;
  box-shadow: var(--screen-shadow);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Borda tipo "tela" — bezel fino */
.module-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.05) 15%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.04) 85%,
    rgba(255, 255, 255, 0.2) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* Glare/reflexo sutil no hover */
.module-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--screen-glare);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

.module-visual:hover::after {
  opacity: 1;
}

.module-visual:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--screen-shadow-hover);
}

/* Imagem dentro do card */
.module-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-screen) - 3px);
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.module-visual:hover img {
  transform: scale(1.03);
}

/* Placeholder de fallback */
.module-visual .placeholder {
  border-radius: inherit;
}

/* ------------------------------------------------------------------
   3. FRAMES DE NAVEGADOR (aplicável a screenshots de desktop)
   Adicionar a classe .browser-frame no HTML quando o screenshot
   representar uma interface web (não mockup de celular).
   ------------------------------------------------------------------ */
.browser-frame {
  aspect-ratio: 16 / 10.5;
  border-radius: var(--radius-screen);
  background: #1c1f26;
  box-shadow: var(--screen-shadow);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Barra de título do navegador */
.browser-frame::before {
  content: "";
  display: block;
  height: 32px;
  background: linear-gradient(180deg, #2b2f38 0%, #1e2128 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}

/* Botões de tráfego (círculos coloridos) */
.browser-frame::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f56;
  box-shadow:
    18px 0 0 #ffbd2e,
    36px 0 0 #27c93f;
  z-index: 4;
}

/* Imagem dentro do browser frame */
.browser-frame img {
  flex: 1;
  width: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  border-radius: 0 0 calc(var(--radius-screen) - 3px) calc(var(--radius-screen) - 3px);
}

/* Hover no browser frame */
.browser-frame:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--screen-shadow-hover);
}

/* ------------------------------------------------------------------
   4. MOCKUPS DE CELULAR (app-paciente, app-profissional)
   ------------------------------------------------------------------ */

.phone-mockup {
  aspect-ratio: 9 / 16; /* Proporção moderna de smartphone */
  max-width: 320px;
  margin: 0 auto;
  background: #0a0a0a;
  border-radius: 36px;
  padding: 10px;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.15),
    0 0 0 3px #1a1a1a,
    0 25px 50px -12px rgba(0, 0, 0, 0.45),
    0 50px 100px -20px rgba(0, 0, 0, 0.25);
  position: relative;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

/* Notch / Dynamic Island */
.phone-mockup::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 24px;
  background: #0a0a0a;
  border-radius: 999px;
  z-index: 3;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Botão lateral (power) */
.phone-mockup::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 110px;
  width: 3px;
  height: 60px;
  background: #333;
  border-radius: 0 2px 2px 0;
}

/* Tela interna */
.phone-mockup .screen {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: #000;
  position: relative;
}

.phone-mockup .screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover no phone mockup */
.phone-mockup:hover {
  transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.2),
    0 0 0 3px #1a1a1a,
    0 35px 70px -15px rgba(0, 0, 0, 0.5),
    0 60px 120px -25px rgba(0, 0, 0, 0.3);
}

/* Em módulos com .reverse, alinhar mockup à direita no desktop */
@media (min-width: 900px) {
  .module-block.reverse .phone-mockup {
    margin: 0 0 0 auto;
  }
}

/* ------------------------------------------------------------------
   5. MASCOTE NO HERO — ANIMAÇÕES E POSICIONAMENTO
   ------------------------------------------------------------------ */

.hero-mascot-wrap {
  min-height: 420px;
  perspective: 1000px;
}

/* Glow mais vivo */
.hero-mascot-bg {
  inset: 5% 10%;
  background: radial-gradient(
    circle at 50% 55%,
    rgba(16, 185, 129, 0.18) 0%,
    rgba(16, 185, 129, 0.08) 35%,
    transparent 70%
  );
  filter: blur(20px);
  animation: glowPulse 6s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* Mascote com mais "vida" */
.mascot {
  width: min(100%, 420px);
  filter: drop-shadow(0 32px 48px rgba(47, 74, 50, 0.22));
  animation: mascotFloat 6s ease-in-out infinite,
             mascotBreath 4s ease-in-out infinite;
  transform-origin: center bottom;
  will-change: transform;
}

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-14px) rotate(0.6deg); }
}

@keyframes mascotBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

/* Combinação suave das duas animações */
.mascot {
  animation: mascotFloat 6s ease-in-out infinite;
}

.mascot use {
  transform-origin: 220px 450px;
  animation: mascotBreath 4s ease-in-out infinite;
}

/* Efeito de "olhar" sutil ao mover mouse (via JS, mas preparado no CSS) */
.mascot.look-left { transform: translateY(0) rotate(-2deg) scale(1.01); }
.mascot.look-right { transform: translateY(0) rotate(2deg) scale(1.01); }

/* Responsivo: mascote menor em tablets */
@media (max-width: 1023px) {
  .hero-mascot-wrap {
    min-height: 320px;
    order: -1; /* Sobe acima do texto em mobile */
  }
  .mascot {
    width: min(80%, 300px);
  }
}

/* ------------------------------------------------------------------
   6. LAZY LOADING E ASPECT-RATIO (evita layout shift)
   ------------------------------------------------------------------ */

/* Todas as imagens de módulos devem ter lazy loading */
.module-visual img,
.browser-frame img,
.phone-mockup .screen img {
  content-visibility: auto;
}

/* aspect-ratio nativo para evitar CLS */
.module-visual img[src] {
  aspect-ratio: 4 / 3;
}

.phone-mockup .screen img[src] {
  aspect-ratio: 9 / 16;
}

/* Estado enquanto carrega */
.module-visual img[loading="lazy"]:not([src]) {
  background: linear-gradient(
    110deg,
    var(--bg-warm) 8%,
    #f0ece4 18%,
    var(--bg-warm) 33%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
  to { background-position-x: -200%; }
}

/* ------------------------------------------------------------------
   7. ACESSIBILIDADE E RESPONSIVIDADE EXTRA
   ------------------------------------------------------------------ */

/* Reduzir movimento para usuários com prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .mascot,
  .mascot use,
  .hero-mascot-bg {
    animation: none !important;
  }
  .module-visual,
  .browser-frame,
  .phone-mockup {
    transition: box-shadow 0.2s ease;
  }
  .module-visual:hover,
  .browser-frame:hover,
  .phone-mockup:hover {
    transform: none;
  }
  .module-visual:hover img {
    transform: none;
  }
}

/* Foco visível para navegação por teclado */
.module-visual:focus-within,
.browser-frame:focus-within,
.phone-mockup:focus-within {
  outline: 3px solid var(--accent-soft);
  outline-offset: 4px;
}

/* Ajuste mobile para módulos */
@media (max-width: 768px) {
  .module-visual {
    aspect-ratio: 4 / 3.2;
    border-radius: var(--radius-screen-sm);
  }

  .phone-mockup {
    max-width: 220px;
    border-radius: 28px;
    padding: 8px;
  }

  .phone-mockup::before {
    width: 70px;
    height: 18px;
    top: 14px;
  }

  .phone-mockup .screen {
    border-radius: 22px;
  }

  .browser-frame::before {
    height: 26px;
  }

  .browser-frame::after {
    top: 8px;
    width: 8px;
    height: 8px;
    box-shadow:
      14px 0 0 #ffbd2e,
      28px 0 0 #27c93f;
  }
}

/* ------------------------------------------------------------------
   8. GALERIA DE SCREENSHOTS (caso futuro)
   ------------------------------------------------------------------ */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-screen);
  overflow: hidden;
  box-shadow: var(--screen-shadow);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background: #0f1115;
  cursor: pointer;
}

.gallery-item:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--screen-shadow-hover);
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.04);
}

/* Legenda overlay */
.gallery-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery-item:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

/* Lightbox overlay simples (se necessário) */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.92);
  backdrop-filter: blur(12px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-overlay img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-screen);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5);
}

/* ================================================================
   2026-05-25 SPRINT D: RESPONSIVIDADE MOBILE (auditoria 30 pontos)
   - Hero mascote min-h, proof bar 1 coluna, h1 clamp menor
   - Marquee font menor, ctas row-gap, pricing scroll-margin
   - Marquee will-change p/ GPU + pause off-viewport
   - Contraste de texto secundario
   ================================================================ */

/* Item 26: h1 hero — minimo menor para Galaxy A5x 320px */
.hero h1 {
  font-size: clamp(30px, 5.5vw, 64px) !important;
}

/* Item 28: hero ctas row-gap explicito quando quebra em 2 linhas */
.hero-ctas {
  row-gap: 12px;
}

/* Item 25: pricing scroll-margin (header fixo nao corta) */
#pricing,
#modules,
#faq,
#how,
#acessos {
  scroll-margin-top: 88px;
}

/* Item 8: marquee performance — GPU layer + pausa off-screen */
.marquee-track {
  will-change: transform;
}
.marquee:not(:hover) .marquee-track {
  /* mantem animacao */
}

/* Item 21: contraste — text-light original 4.05 contra warm; sobe p/ 4.6 */
:root {
  --text-light: #5e6470;
}

/* Item 27: marquee font-size responsivo */
.marquee-track {
  font-size: clamp(14px, 3.5vw, 18px);
}

/* Item 22: hero mascote min-height responsivo */
@media (max-width: 640px) {
  .hero-mascot-wrap {
    min-height: 280px;
  }
  .mascot {
    width: min(100%, 320px);
  }
}

/* Item 23: hero-proof — 3 colunas estouram em <480px, vira 1 coluna */
@media (max-width: 480px) {
  .hero-proof {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-top: 24px;
  }
  .hero-proof-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .hero-proof-item .value {
    margin-bottom: 0;
    font-size: clamp(22px, 6vw, 28px);
  }
  .hero-proof-item .label {
    font-size: 11px;
  }
}

/* Item 24: WhatsApp float — espacamento menor em telas pequenas */
@media (max-width: 640px) {
  .wa-float {
    bottom: 12px !important;
    right: 12px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  /* CTA do pricing nao deve ficar atras do float */
  .btn-pricing {
    margin-bottom: 16px;
  }
}

/* Item 17 (parcial): hambúrguer mobile — drawer fechado por padrao */
.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
  margin-left: 8px;
  border-radius: 8px;
  transition: background .2s;
}
.nav-burger:hover { background: rgba(47,74,50,.06); }
.nav-burger svg { width: 24px; height: 24px; display: block; }
@media (max-width: 1023px) {
  .nav-burger { display: inline-flex; align-items: center; justify-content: center; }
}

/* Drawer mobile (aparece quando aria-expanded=true) */
.nav-drawer {
  position: fixed;
  inset: 64px 0 0 0;
  background: rgba(250, 247, 240, 0.98);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  z-index: 99;
  padding: 24px;
  transform: translateY(-100%);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  visibility: hidden;
}
.nav-drawer.is-open {
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}
.nav-drawer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  max-width: 480px;
  margin-inline: auto;
}
.nav-drawer a {
  display: block;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dark);
  border: 1px solid rgba(47,74,50,.08);
  background: #fff;
  transition: background .2s, transform .2s;
}
.nav-drawer a:hover { background: var(--accent-tint); transform: translateY(-1px); }
.nav-drawer a.cta { background: var(--primary-dark); color: #fff; text-align: center; }
.nav-drawer a.cta:hover { background: var(--primary); }
body.nav-drawer-open { overflow: hidden; }

/* Item 1 do FAQ: aria-hidden no toggle (CSS reforça invisibilidade semantica) */
.faq-toggle[aria-hidden="true"] {
  pointer-events: none;
}

/* Item 30 testimonials — secao de depoimentos */
.testimonials {
  padding: 80px 24px;
  background: linear-gradient(180deg, var(--bg-white) 0%, var(--bg-warm) 100%);
}
@media (max-width: 768px) {
  .testimonials { padding: 52px 20px; }
}
.testimonials-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
.testimonial-card {
  background: #fff;
  padding: 32px;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform .25s, box-shadow .25s;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial-stars {
  color: var(--gold);
  font-size: 18px;
  letter-spacing: 2px;
}
.testimonial-quote {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-dark);
  font-style: italic;
  flex: 1;
}
.testimonial-person {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  font-family: 'Playfair Display', serif;
}
.testimonial-name {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 15px;
}
.testimonial-role {
  font-size: 13px;
  color: var(--text-medium);
}

/* Item 29: pricing 3 planos lado a lado */
.pricing-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 900px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.pricing-card-trio {
  background: #fff;
  padding: 36px 28px;
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pricing-card-trio:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pricing-card-trio.destaque {
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-md);
  transform: scale(1.02);
}
.pricing-card-trio.destaque:hover { transform: scale(1.02) translateY(-4px); }
.pricing-card-trio .pricing-ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 16px;
  border-radius: 999px;
  text-transform: uppercase;
}
.pricing-card-trio .nome { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 600; color: var(--primary-dark); }
.pricing-card-trio .desc { font-size: 14px; color: var(--text-medium); min-height: 42px; }
.pricing-card-trio .preco { display: flex; align-items: baseline; gap: 6px; font-family: 'Playfair Display', serif; color: var(--primary-dark); }
.pricing-card-trio .preco .moeda { font-size: 18px; }
.pricing-card-trio .preco .valor { font-size: 44px; font-weight: 700; line-height: 1; }
.pricing-card-trio .preco .periodo { font-size: 14px; color: var(--text-medium); }
.pricing-card-trio ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pricing-card-trio ul li { font-size: 14.5px; color: var(--text-medium); padding-left: 24px; position: relative; line-height: 1.5; }
.pricing-card-trio ul li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.pricing-card-trio ul li.off { color: var(--text-muted); }
.pricing-card-trio ul li.off::before { content: '—'; color: var(--text-muted); }
.pricing-card-trio .btn-trio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all .2s;
  margin-top: 8px;
}
.pricing-card-trio .btn-trio.primario { background: var(--primary-dark); color: #fff; }
.pricing-card-trio .btn-trio.primario:hover { background: var(--primary); }
.pricing-card-trio .btn-trio.secundario { background: transparent; color: var(--primary-dark); border: 1.5px solid var(--border-strong); }
.pricing-card-trio .btn-trio.secundario:hover { border-color: var(--primary); background: var(--bg-warm); }

/* sr-only canonico (acessibilidade do marquee) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}