/* Oba Labs — estilos da página /provedores (extraídos do html-export).
   Incluir só em provedores.blade.php via @push('head').
*/
html { scroll-behavior: smooth; }
    body { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; background: #fff; color: #111827; -webkit-font-smoothing: antialiased; }
    [x-cloak] { display: none !important; }
    .page-container { margin-inline: auto; width: 100%; max-width: 1400px; padding-inline: 1rem; }
    @media (min-width: 1024px) { .page-container { padding-inline: 1.5rem; } }
    .text-gradient { background: linear-gradient(135deg, #ffc933 0%, #ff6a00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .hero-glow {
      background:
        radial-gradient(ellipse 70% 55% at 75% 20%, rgba(255,106,0,0.12), transparent 65%),
        radial-gradient(ellipse 50% 40% at 10% 80%, rgba(255,201,51,0.08), transparent 60%);
    }
    .hero-banner-visual img {
      filter: drop-shadow(0 20px 40px rgba(17, 24, 39, 0.14));
      image-rendering: auto;
    }
    @media (min-width: 1024px) {
      .hero-glow {
        overflow: visible;
      }
      .hero-banner-col {
        overflow: visible;
        align-self: center;
        background: transparent;
        margin-left: -2rem;
        max-width: 52rem;
        width: 100%;
        justify-self: end;
      }
      .hero-banner-visual {
        overflow: visible;
        background: transparent;
      }
      .hero-banner-visual img {
        display: block;
        width: 135%;
        max-width: none;
        height: auto;
        transform: none;
      }
    }
    @media (min-width: 1280px) {
      .hero-banner-col {
        margin-left: -3.5rem;
        max-width: 60rem;
      }
      .hero-banner-visual img {
        width: 148%;
      }
    }
    .hero-copy h1 {
      text-wrap: balance;
    }
    .mock-shadow { box-shadow: 0 30px 80px rgba(17,24,39,0.18), 0 0 0 1px rgba(255,255,255,0.6); }
    .stat-item {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .stat-item.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .counter.is-done {
      animation: counter-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }
    @keyframes counter-pop {
      0% { transform: scale(1); }
      40% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .stat-item { opacity: 1; transform: none; transition: none; }
      .counter.is-done { animation: none; }
    }
    .reveal {
      opacity: 0;
      transition:
        opacity 1.35s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.35s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal.is-visible {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
    .reveal-up {
      transform: translate3d(0, 20px, 0);
    }
    .reveal-up.reveal-soft,
    .reveal-intro.reveal-up {
      transform: translate3d(0, 12px, 0);
    }
    .reveal-down {
      transform: translate3d(0, -16px, 0);
    }
    .reveal-down.reveal-soft,
    .reveal-intro.reveal-down {
      transform: translate3d(0, -10px, 0);
    }
    .reveal-left {
      transform: translate3d(-24px, 8px, 0);
    }
    .reveal-left.reveal-soft,
    .reveal-intro.reveal-left {
      transform: translate3d(-14px, 6px, 0);
    }
    .reveal-right {
      transform: translate3d(24px, 8px, 0);
    }
    .reveal-right.reveal-soft,
    .reveal-intro.reveal-right {
      transform: translate3d(14px, 6px, 0);
    }
    .reveal-fade {
      transform: translate3d(0, 0, 0);
    }
    .reveal-fade.reveal-soft,
    .reveal-intro.reveal-fade {
      transform: translate3d(0, 0, 0);
    }
    .reveal-zoom {
      transform: translate3d(0, 14px, 0) scale(0.97);
    }
    .reveal-zoom.is-visible {
      transform: translate3d(0, 0, 0) scale(1);
    }
    .reveal-intro {
      transition-duration: 1.2s;
    }
    @media (prefers-reduced-motion: reduce) {
      .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }
    .feature-card {
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 50px rgba(17, 24, 39, 0.1);
    }
    .feature-card-visual {
      background: linear-gradient(180deg, #fff4eb 0%, #fffaf5 100%);
      min-height: 240px;
    }
    /* Padrão visual dos cards com imagem (800×520 · WebP) */
    .feature-card-visual--featured {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--feature-bg, #fff4eb);
      min-height: 240px;
      padding: 0.375rem 0.125rem;
      overflow: hidden;
    }
    .feature-card-visual--featured > img {
      width: 100%;
      max-width: none;
      transform: scale(var(--feature-scale, 1.03));
      transform-origin: center center;
    }
    .feature-card-visual--featured-dark {
      background: var(--feature-bg, #111827);
      padding: 0.25rem 0.125rem;
    }
    #plataforma-unificada .feature-card-visual--featured > img {
      --feature-scale: 1;
      --feature-scale-sm: 1.02;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
    .feature-card-visual--phone {
      position: relative;
      align-items: stretch;
      padding: 0;
      min-height: 240px;
      max-height: 240px;
      background: linear-gradient(180deg, #fff4eb 0%, #fffaf5 100%);
    }
    .feature-phone-clip {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    .feature-phone-wrap {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: min(88%, 270px);
      transform: translateX(-50%) scale(0.9) translateY(58%);
      transform-origin: center bottom;
    }
    .feature-phone-wrap--renewal {
      transform: translateX(-50%) scale(0.9) translateY(34%);
    }
    .feature-phone-wrap--sales {
      transform: translateX(-50%) scale(0.9) translateY(42%);
    }
    @media (min-width: 640px) {
      .feature-card-visual--phone {
        min-height: 280px;
        max-height: 280px;
      }
      .feature-phone-wrap {
        width: min(84%, 290px);
        transform: translateX(-50%) scale(0.94) translateY(50%);
      }
      .feature-phone-wrap--renewal {
        transform: translateX(-50%) scale(0.94) translateY(21%);
      }
      .feature-phone-wrap--sales {
        transform: translateX(-50%) scale(0.94) translateY(30%);
      }
    }
    @media (min-width: 640px) {
      .feature-card-visual--featured {
        min-height: 280px;
        padding: 0.5rem 0.25rem;
      }
      .feature-card-visual--featured > img {
        transform: scale(var(--feature-scale-sm, 1.04));
      }
    }
    .feature-card-placeholder {
      min-height: 200px;
      width: 100%;
    }
    @media (min-width: 640px) {
      .feature-card-visual { min-height: 280px; }
      .feature-card-placeholder { min-height: 240px; }
    }
    .ecosystem-hub-visual {
      background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    }
    .hub-core-sm {
      background: radial-gradient(circle at 30% 30%, #ffc933, #ff6a00);
      box-shadow: 0 0 0 6px rgba(255,106,0,0.12), 0 12px 28px rgba(255,106,0,0.22);
    }
    .feature-card-dark {
      background: #111827;
      border-color: #374151;
    }
    .feature-card-dark .feature-card-visual-dark {
      background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    }
    .feature-card-dark .feature-card-placeholder-dark {
      border-color: rgba(255, 106, 0, 0.35);
      background: rgba(255, 255, 255, 0.04);
    }
    .hub-orbit-line {
      background: linear-gradient(90deg, transparent, rgba(255,106,0,0.35), transparent);
      height: 1px;
    }
    .hub-chip {
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }
    .hub-chip:hover {
      transform: translateY(-2px);
      border-color: rgba(255,106,0,0.45);
      background: rgba(255,244,235,0.12);
    }
    .hub-core {
      background: radial-gradient(circle at 30% 30%, #ffc933, #ff6a00);
      box-shadow: 0 0 0 8px rgba(255,106,0,0.12), 0 20px 40px rgba(255,106,0,0.25);
    }
    .auto-section {
      background: linear-gradient(
        180deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.72) 22%,
        #fff8f3 48%,
        #fff4eb 72%,
        #ffe8d6 100%
      );
    }
    .auto-bubble {
      position: relative;
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }
    .auto-bubble:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 36px rgba(255, 106, 0, 0.12);
    }
    .auto-stage {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 1.75rem;
    }
    @media (max-width: 1023px) {
      .auto-stage {
        align-items: center;
      }
      .auto-stage-side {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
        width: 100%;
        max-width: none;
      }
      .auto-bubble-card {
        width: 100%;
        max-width: 340px;
        margin-inline: auto;
        padding: 1.25rem 1.25rem 1.375rem;
      }
      .auto-bubble-card > div {
        gap: 1rem;
      }
      .auto-bubble-card h3 {
        margin-top: 0.375rem;
      }
      .auto-bubble-card p.text-[#6b7280] {
        margin-top: 0.625rem;
        line-height: 1.55;
      }
      .auto-stage-phone {
        display: flex;
        justify-content: center;
        margin-bottom: 0.25rem;
      }
      .auto-stage-phone .auto-phone-shell {
        width: min(100%, 268px);
      }
      .auto-cards-mobile .auto-bubble-card {
        max-width: none;
        margin-inline: 0;
      }
    }
    @media (min-width: 1024px) {
      .auto-stage {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 2.5rem;
      }
      .auto-stage-side {
        width: 300px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 2rem;
      }
      .auto-stage-side-left { align-items: flex-end; }
      .auto-stage-side-right { align-items: flex-start; }
      .auto-bubble-card {
        width: 100%;
        max-width: 300px;
      }
    }
    .auto-bubble-card {
      width: 100%;
      border: 1.5px solid transparent;
      border-radius: 1rem;
      background:
        linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98)) padding-box,
        linear-gradient(135deg, #ffffff 0%, #e5e7eb 45%, #d1d5db 100%) border-box;
    }
    .auto-bubble:hover.auto-bubble-card {
      background:
        linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) padding-box,
        linear-gradient(135deg, #f9fafb 0%, #e5e7eb 50%, #9ca3af 100%) border-box;
    }
    @media (min-width: 1024px) {
      .auto-bubble-tl::after,
      .auto-bubble-tr::after,
      .auto-bubble-bl::after,
      .auto-bubble-br::after {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        background: linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98)) padding-box, linear-gradient(135deg, #ffffff 0%, #e5e7eb 50%, #d1d5db 100%) border-box;
        border: 1.5px solid transparent;
        transform: rotate(45deg);
        z-index: 0;
      }
      .auto-bubble-tl::after { right: -7px; top: 50%; margin-top: -7px; border-left: none; border-bottom: none; }
      .auto-bubble-tr::after { left: -7px; top: 50%; margin-top: -7px; border-right: none; border-bottom: none; }
      .auto-bubble-bl::after { right: -7px; top: 50%; margin-top: -7px; border-left: none; border-top: none; }
      .auto-bubble-br::after { left: -7px; top: 50%; margin-top: -7px; border-right: none; border-top: none; }
    }
    .demo-cta-stage {
      position: relative;
      min-height: 8.25rem;
      width: 100%;
    }
    .demo-cta-bubble {
      position: absolute;
      z-index: 20;
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      width: auto;
      max-width: 9.75rem;
      border-radius: 0.875rem;
      border: 1px solid rgba(255, 255, 255, 0.65);
      background: rgba(255, 255, 255, 0.97);
      padding: 0.5rem 0.625rem;
      box-shadow: 0 10px 28px rgba(17, 24, 39, 0.14);
      backdrop-filter: blur(10px);
      animation: demo-cta-float 5s ease-in-out infinite;
    }
    .demo-cta-bubble::after { display: none; }
    .demo-cta-bubble--1 { left: 0; top: 0; }
    .demo-cta-bubble--2 { right: 0; top: 2rem; animation-delay: -2.4s; }
    .demo-cta-bubble--3 {
      left: 0;
      right: 0;
      bottom: 0;
      margin-inline: auto;
      max-width: 11rem;
      animation-delay: -4.8s;
    }
    .demo-cta-bubble__icon {
      flex-shrink: 0;
      display: flex;
      height: 1.375rem;
      width: 1.375rem;
      align-items: center;
      justify-content: center;
      border-radius: 0.375rem;
      background: #fff4eb;
      color: #ff6a00;
    }
    .demo-cta-bubble__icon i {
      width: 0.75rem;
      height: 0.75rem;
    }
    .demo-cta-bubble__text {
      font-size: 0.6875rem;
      font-weight: 600;
      line-height: 1.35;
      color: #111827;
    }
    @media (min-width: 640px) {
      .demo-cta-stage {
        min-height: 18rem;
      }
      .demo-cta-bubble {
        max-width: 13rem;
        gap: 0.625rem;
        border-radius: 1rem;
        padding: 0.875rem 1rem;
        box-shadow: 0 14px 36px rgba(17, 24, 39, 0.16);
      }
      .demo-cta-bubble--2 {
        top: auto;
        right: -0.25rem;
        bottom: 0.25rem;
      }
      .demo-cta-bubble--3 {
        left: 0;
        right: auto;
        bottom: 0.25rem;
        margin-inline: 0;
        max-width: 13rem;
      }
      .demo-cta-bubble__icon {
        height: 1.75rem;
        width: 1.75rem;
        border-radius: 0.5rem;
      }
      .demo-cta-bubble__icon i {
        width: 0.875rem;
        height: 0.875rem;
      }
      .demo-cta-bubble__text {
        font-size: 0.8125rem;
        line-height: 1.4;
      }
      .demo-cta-bubble::after { display: block; }
      .demo-cta-bot-wrap {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 10;
        padding: 0;
        transform: translate(-50%, -50%);
      }
      .demo-cta-bubble--1 {
        left: -0.25rem;
        top: 0.25rem;
      }
      .demo-cta-bubble--1::after {
        content: "";
        position: absolute;
        right: 1.25rem;
        bottom: -5px;
        width: 10px;
        height: 10px;
        background: rgba(255, 255, 255, 0.97);
        transform: rotate(45deg);
        border-right: 1px solid rgba(255, 255, 255, 0.4);
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
      }
      .demo-cta-bubble--2::after {
        content: "";
        position: absolute;
        left: 1.25rem;
        top: -5px;
        width: 10px;
        height: 10px;
        background: rgba(255, 255, 255, 0.97);
        transform: rotate(45deg);
        border-left: 1px solid rgba(255, 255, 255, 0.4);
        border-top: 1px solid rgba(255, 255, 255, 0.4);
      }
      .demo-cta-bubble--3::after {
        content: "";
        position: absolute;
        right: 1.25rem;
        top: -5px;
        width: 10px;
        height: 10px;
        background: rgba(255, 255, 255, 0.97);
        transform: rotate(45deg);
        border-left: 1px solid rgba(255, 255, 255, 0.4);
        border-top: 1px solid rgba(255, 255, 255, 0.4);
      }
    }
    @keyframes demo-cta-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .demo-cta-bubble { animation: none; }
    }
    .auto-phone-shell {
      width: min(100%, 290px);
      border-radius: 2rem;
      padding: 0.55rem;
      background: linear-gradient(160deg, #2d2d2d 0%, #111827 100%);
      box-shadow:
        0 30px 70px rgba(17, 24, 39, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    .auto-phone-screen {
      overflow: hidden;
      border-radius: 1.55rem;
      background: #ece5dd;
    }
    .wa-chat-bg {
      background-color: #ece5dd;
      background-image: radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.025) 0 1px, transparent 1px);
      background-size: 18px 18px;
    }
    .testimonial-nav {
      flex-shrink: 0;
      display: flex;
      height: 2.75rem;
      width: 2.75rem;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
      border: 1px solid #e8eaed;
      background: #fff;
      color: #6b7280;
      box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
      transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .testimonial-nav:hover {
      border-color: rgba(255, 106, 0, 0.35);
      color: #ff6a00;
      box-shadow: 0 4px 14px rgba(255, 106, 0, 0.12);
    }
    .testimonial-card {
      background: linear-gradient(180deg, #fffaf5 0%, #fff4eb 100%);
    }
    .testimonial-quote {
      font-style: normal;
      letter-spacing: -0.01em;
    }
    .testimonial-avatar {
      flex-shrink: 0;
    }
    .testimonial-avatar-photo {
      object-fit: cover;
    }
    .testimonial-facepile {
      filter: drop-shadow(0 8px 20px rgba(17, 24, 39, 0.08));
    }
    .testimonial-facepile .testimonial-avatar:not(:first-child) {
      margin-left: -0.65rem;
    }
    .testimonial-dot {
      height: 0.5rem;
      width: 0.5rem;
      border-radius: 9999px;
      background: #d1d5db;
      transition: width 0.25s ease, background-color 0.25s ease;
    }
    .testimonial-dot.is-active {
      width: 2rem;
      background: #ff6a00;
    }
    .testimonial-google-meta {
      color: #9ca3af;
    }
    .testimonial-google-icon {
      flex-shrink: 0;
      opacity: 0.72;
    }
    .testimonial-google-stars {
      color: #f59e0b;
      opacity: 0.78;
    }
    .testimonial-google-stars svg {
      display: block;
    }
    .auto-section-wave svg {
      display: block;
      width: 100%;
      height: 56px;
    }
    .auto-section-wave-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      line-height: 0;
      z-index: 0;
    }
    @media (min-width: 640px) {
      .auto-section-wave svg { height: 72px; }
    }
    .mkt-bento-card {
      overflow: hidden;
      border-radius: 1.75rem;
      border: 1px solid rgba(232, 234, 237, 0.9);
      background: #fff;
      box-shadow: 0 8px 32px rgba(17, 24, 39, 0.05);
    }
    .mkt-bento-card--warm {
      background: linear-gradient(165deg, #fffaf5 0%, #fff4eb 38%, #ffffff 100%);
    }
    .mkt-bento-card--soft {
      background: linear-gradient(165deg, #f8f9fb 0%, #ffffff 100%);
    }
    .mkt-bento-glow {
      position: absolute;
      border-radius: 9999px;
      filter: blur(48px);
      pointer-events: none;
    }
    @media (min-width: 1024px) {
      .mkt-bento {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(210px, auto) minmax(210px, auto) minmax(240px, auto);
      }
      .mkt-bento-a { grid-column: 1; grid-row: 1 / 3; min-height: 440px; }
      .mkt-bento-b { grid-column: 2; grid-row: 1; }
      .mkt-bento-c { grid-column: 2; grid-row: 2; }
      .mkt-bento-d { grid-column: 1 / 3; grid-row: 3; }
      .mkt-bento-e { grid-column: 3; grid-row: 1 / 4; min-height: 680px; }
    }
    .mkt-kpi-chip {
      border-radius: 0.875rem;
      border: 1px solid rgba(255, 255, 255, 0.95);
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 10px 28px rgba(17, 24, 39, 0.09), 0 2px 6px rgba(17, 24, 39, 0.04);
      backdrop-filter: blur(10px);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .mkt-kpi-chip:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(17, 24, 39, 0.11), 0 4px 10px rgba(17, 24, 39, 0.05);
    }

.shadow-card { box-shadow: 0 10px 40px rgba(17, 24, 39, 0.08); }
.shadow-float { box-shadow: 0 14px 40px rgba(255, 106, 0, 0.28); }