/*
 * HERO CUIDAR — versão editorial premium baseada na referência aprovada.
 * Isolado neste arquivo para não interferir nas demais seções.
 */

@media (min-width: 1081px) {
  .site-header {
    padding: 10px 6.55vw 0;
  }
  .site-header.scrolled {
    padding: 10px 6.55vw 0;
  }
  .nav-shell {
    width: 100%;
    max-width: none;
    min-height: 70px;
    padding: 0;
    gap: 30px;
  }
  .site-header:not(.scrolled) .nav-shell {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .site-header.scrolled .nav-shell { padding-inline: 18px; }

  .brand { min-width: 225px; }
  .brand-word {
    font-family: 'Manrope', var(--sans);
    font-size: 30px;
    line-height: .92;
    font-weight: 750;
    letter-spacing: -2.15px;
  }
  .brand-dot:after { display:none; }
  .brand-sub {
    margin-top: 7px;
    font-family: 'Manrope', var(--sans);
    font-size: 7px;
    line-height: 1;
    letter-spacing: .205em;
    opacity: .72;
  }
  .desktop-nav { gap: 34px; }
  .desktop-nav a {
    font-family: 'Manrope', var(--sans);
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    color: rgba(235, 242, 255, .8);
  }
  .btn-nav {
    min-height: 48px;
    padding: 0 24px;
    margin-left: 2px;
    font-family: 'Manrope', var(--sans);
    font-size: 12px;
    font-weight: 650;
    border-color: rgba(84, 193, 255, .72);
    background: rgba(6, 24, 52, .07);
    box-shadow: 0 0 20px rgba(25, 137, 255, .08);
  }
  .btn-nav:hover {
    color:#fff;
    border-color: rgba(109, 207, 255, .95);
    background: rgba(32, 114, 224, .09);
  }

  .hero {
    position: relative;
    min-height: 100svh;
    height: 100svh;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(ellipse 44% 54% at 72% 25%, rgba(27, 118, 242, .31) 0%, rgba(10, 64, 145, .14) 38%, transparent 72%),
      radial-gradient(ellipse 34% 48% at 96% 48%, rgba(20, 100, 225, .20) 0%, rgba(7, 44, 103, .08) 46%, transparent 76%),
      radial-gradient(ellipse 31% 24% at 24% 2%, rgba(16, 77, 154, .14) 0%, transparent 72%),
      radial-gradient(ellipse 40% 31% at 31% 104%, rgba(6, 99, 139, .14) 0%, transparent 72%),
      linear-gradient(90deg, transparent 0 47.15%, rgba(37, 112, 220, .08) 47.2%, rgba(37, 112, 220, .08) 47.28%, transparent 47.34%),
      linear-gradient(104deg, #051326 0%, #06172e 41%, #072049 69%, #082b61 100%);
  }
  .hero:before {
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(ellipse 72% 120% at -6% 48%, rgba(0,8,20,.30) 0%, rgba(2,10,22,.12) 42%, transparent 70%),
      radial-gradient(ellipse 64% 88% at 58% 55%, transparent 48%, rgba(1,8,22,.14) 100%),
      linear-gradient(180deg, rgba(1,8,18,.06), transparent 30%, transparent 73%, rgba(1,8,18,.14));
  }
  .hero:after {
    opacity:.052;
    mix-blend-mode:soft-light;
  }

  .hero-grid {
    position:absolute;
    inset:0;
    z-index:2;
    display:block;
    width:100%;
    max-width:none;
    min-height:100%;
    margin:0;
  }
  /* Architectural backdrop behind the hero content: center divider + large orbital contour. */
  .hero-grid:before {
    content:'';
    position:absolute;
    left:47.2%;
    top:-8%;
    bottom:-4%;
    width:1px;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(56,143,255,.18), rgba(56,143,255,.42) 28%, rgba(56,143,255,.16) 75%, transparent 100%);
    box-shadow:18vw 0 90px rgba(22,103,225,.035);
  }
  .hero-grid:after {
    content:'';
    position:absolute;
    left:37.2vw;
    top:8.2svh;
    width:52vw;
    height:82svh;
    z-index:0;
    pointer-events:none;
    border:1px solid rgba(40,122,239,.17);
    border-radius:50% 48% 43% 52% / 45% 47% 54% 52%;
    transform:rotate(-6deg);
    box-shadow:
      0 0 0 22px rgba(34,111,224,.025),
      0 0 0 76px rgba(30,100,205,.018),
      inset 0 0 90px rgba(24,92,202,.025);
  }

  .hero-copy {
    position:absolute;
    left:6.45vw;
    top:15.7svh;
    width:min(39vw, 670px);
    max-width:670px;
    padding:0;
    z-index:5;
  }
  .eyebrow {
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:35px;
    padding:0 16px 0 12px;
    border:1px solid rgba(47, 121, 229, .24);
    border-radius:999px;
    background:rgba(6,24,52,.16);
    font-family:'Manrope', var(--sans);
    font-size:10px;
    line-height:1;
    font-weight:650;
    letter-spacing:.20em;
    color:rgba(220,232,251,.79);
  }
  .eyebrow-dot {
    width:8px;
    height:8px;
    flex:0 0 8px;
    background:#15c8e9;
    box-shadow:0 0 0 7px rgba(21,200,233,.055), 0 0 18px rgba(21,200,233,.65);
  }
  .hero h1 {
    width:max-content;
    max-width:690px;
    margin:34px 0 25px;
    font-family:'Manrope', var(--sans);
    font-size:clamp(72px, 5.28vw, 92px);
    line-height:.92;
    letter-spacing:-.064em;
    font-weight:800;
    color:#f6f8fc;
  }
  .hero h1 .hero-sans { display:block; }
  .hero h1 em {
    display:block;
    margin-top:8px;
    font-family:'Instrument Serif','DM Serif Display',Georgia,serif;
    font-size:clamp(60px, 4.22vw, 74px);
    line-height:.91;
    letter-spacing:-.034em;
    font-weight:400;
    font-style:italic;
    color:#e9eef8;
  }
  .hero-lead {
    width:min(34.6vw, 590px);
    max-width:590px;
    margin:0;
    font-family:'Manrope', var(--sans);
    font-size:15px;
    line-height:1.62;
    font-weight:400;
    color:rgba(224,233,248,.72);
  }
  .hero-actions {
    display:flex;
    align-items:center;
    gap:38px;
    margin-top:28px;
  }
  .hero-actions .btn-primary {
    min-height:58px;
    padding:0 31px;
    font-family:'Manrope', var(--sans);
    font-size:14px;
    font-weight:650;
    background:linear-gradient(180deg,#2a89ff 0%,#0872ff 100%);
    box-shadow:0 13px 30px rgba(7,104,242,.20);
  }
  .hero-actions .btn-primary:hover {
    background:linear-gradient(180deg,#3994ff 0%,#167dff 100%);
    box-shadow:0 16px 36px rgba(7,104,242,.28);
  }
  .hero-actions .text-link {
    padding-bottom:7px;
    font-family:'Manrope', var(--sans);
    font-size:13px;
    line-height:1.1;
    color:rgba(232,239,250,.82);
    border-color:rgba(87,175,255,.55);
  }
  .hero-proof {
    gap:18px;
    margin-top:38px;
  }
  .proof-stack span {
    width:42px;
    height:42px;
    margin-left:-8px;
    border:1px solid rgba(198,218,255,.28);
    font-family:'Manrope',var(--sans);
    font-size:12px;
  }
  .proof-stack span:first-child { margin-left:0; background:#0b336e; }
  .proof-stack span:nth-child(2) { background:#0877ff; }
  .proof-stack span:nth-child(3) { background:#18bfc6; }
  .hero-proof p {
    margin:0;
    font-family:'Manrope',var(--sans);
    font-size:11px;
    line-height:1.5;
    color:rgba(221,232,250,.60);
  }
  .hero-proof strong {
    font-size:12px;
    font-weight:700;
    color:#fff;
  }

  /* Large right portrait */
  .hero-visual {
    position:absolute;
    left:49.95vw;
    top:8.1svh;
    display:block;
    width:44vw;
    min-height:0;
    transform:none;
    z-index:4;
  }
  .visual-frame {
    position:relative;
    width:clamp(520px, 35.4vw, 592px);
    aspect-ratio:.783;
    padding:0;
    overflow:visible;
    border:1px solid rgba(117,210,255,.86);
    border-radius:330px 330px 0 0;
    background:rgba(8,31,64,.05);
    box-shadow:0 28px 90px rgba(0,12,37,.24);
  }
  .visual-frame:after {
    content:'';
    position:absolute;
    inset:-10px -14px -42px -12px;
    z-index:-1;
    pointer-events:none;
    border:1px solid rgba(38,119,240,.44);
    border-radius:342px 342px 0 0;
  }
  .visual-frame:before {
    content:'';
    position:absolute;
    inset:4% -13% -9% -2%;
    z-index:-2;
    border-radius:48%;
    pointer-events:none;
    background:radial-gradient(circle at 64% 33%, rgba(34,129,244,.28), transparent 53%);
    filter:blur(72px);
  }
  .visual-frame img,
  .hero .hero-professional-photo {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:50% 0%;
    border-radius:329px 329px 0 0;
    filter:saturate(.98) contrast(1.02) brightness(.99);
  }
  .frame-caption { display:none; }

  .hero-info-card {
    position:absolute;
    left:-114px;
    bottom:0;
    width:190px;
    min-height:220px;
    padding:32px 28px 24px;
    border:1px solid rgba(61,169,255,.58);
    border-radius:24px;
    background:linear-gradient(180deg, rgba(8,37,77,.92), rgba(6,27,58,.97));
    box-shadow:0 22px 60px rgba(0,10,35,.24);
    backdrop-filter:blur(5px);
    color:#fff;
    z-index:8;
  }
  .hero-info-card svg {
    width:40px;
    height:40px;
    margin-bottom:16px;
    fill:none;
    stroke:#d9e9ff;
    stroke-width:2.1;
  }
  .hero-info-card strong {
    display:block;
    font-family:'Manrope',var(--sans);
    font-size:18px;
    line-height:1.35;
    font-weight:700;
    letter-spacing:-.02em;
  }
  .hero-info-card span {
    display:block;
    margin-top:8px;
    font-family:'Manrope',var(--sans);
    font-size:15px;
    line-height:1.42;
    color:rgba(222,233,250,.72);
  }
  .hero-info-card i {
    display:block;
    width:42px;
    height:2px;
    margin-top:18px;
    background:#20b6f3;
  }

  .hero-side-message {
    position:absolute;
    right:6.8vw;
    top:15.7svh;
    z-index:5;
    display:flex;
    width:128px;
    min-height:146px;
    padding-left:24px;
    flex-direction:column;
    gap:10px;
    pointer-events:none;
    font-family:'Manrope',var(--sans);
    font-size:9px;
    line-height:1;
    font-weight:550;
    text-transform:uppercase;
    letter-spacing:.28em;
    color:rgba(174,202,244,.57);
  }
  .side-message-line {
    position:absolute;
    left:0;
    top:-1px;
    width:1px;
    height:145px;
    background:linear-gradient(180deg, rgba(114,180,255,.78), rgba(114,180,255,.12));
  }

  .dental-seal {
    position:absolute;
    right:5.7vw;
    top:34.3svh;
    z-index:7;
    width:168px;
    height:168px;
    pointer-events:none;
  }
  .dental-seal:before,
  .dental-seal:after {
    content:'';
    position:absolute;
    left:50%;
    width:1px;
    height:40px;
    background:rgba(86,157,238,.33);
  }
  .dental-seal:before { top:-49px; }
  .dental-seal:after { bottom:-49px; }
  .seal-svg { width:100%; height:100%; overflow:visible; }
  .seal-ring {
    fill:rgba(6,30,65,.08);
    stroke:rgba(51,143,242,.48);
    stroke-width:1;
  }
  .seal-text {
    fill:rgba(198,220,251,.76);
    font-family:'Manrope',var(--sans);
    font-size:8px;
    font-weight:600;
    letter-spacing:2.1px;
  }
  .seal-tooth {
    fill:none;
    stroke:rgba(219,236,255,.9);
    stroke-width:2;
    vector-effect:non-scaling-stroke;
  }

  .hero-right-signature {
    position:absolute;
    right:6.8vw;
    bottom:12.1svh;
    z-index:5;
    width:110px;
    color:rgba(193,216,248,.66);
    pointer-events:none;
  }
  .signature-line {
    display:block;
    width:1px;
    height:78px;
    margin-bottom:24px;
    background:linear-gradient(180deg, rgba(117,187,255,.68), rgba(117,187,255,.16));
  }
  .hero-right-signature strong {
    display:block;
    font-family:'Manrope',var(--sans);
    font-size:9px;
    line-height:2.2;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.28em;
  }
  .hero-right-signature i {
    display:block;
    width:22px;
    height:2px;
    margin-top:14px;
    background:#1caeea;
  }

  .hero-line-art {
    display:block;
    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
    pointer-events:none;
  }
  .hero-line-art path {
    fill:none;
    stroke:#267ee7;
    stroke-width:1.05;
    vector-effect:non-scaling-stroke;
    opacity:.18;
  }
  .hero-line-art path:nth-child(2),
  .hero-line-art path:nth-child(5) { opacity:.08; }
  .hero-line-art path:nth-child(3) { opacity:.14; }

  .hero-bottom {
    position:absolute;
    left:6.45vw;
    bottom:6.1svh;
    z-index:6;
    width:34vw;
    margin:0;
    display:flex;
    align-items:center;
    gap:18px;
    font-family:'Manrope',var(--sans);
    font-size:8px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.20em;
    color:rgba(195,214,244,.60);
  }
  .hero-values {
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
  }
  .hero-values i {
    width:3px;
    height:3px;
    border-radius:50%;
    background:rgba(206,224,252,.78);
  }
  .bottom-rule {
    width:78px;
    height:1px;
    margin-left:4px;
    background:rgba(200,220,248,.36);
  }
  .hero-bottom .cro {
    margin-left:10px;
    white-space:nowrap;
  }

  .hero-glow-a {
    width:470px;
    height:470px;
    right:-210px;
    bottom:-210px;
    background:#1651a6;
    opacity:.15;
    filter:blur(100px);
  }
  .hero-glow-b {
    width:450px;
    height:220px;
    left:-155px;
    top:auto;
    bottom:-74px;
    background:linear-gradient(90deg,#0b757e,#174a79);
    opacity:.12;
    filter:blur(68px);
    transform:rotate(-12deg);
  }

  /* Extra atmosphere behind the reference layout. */
  .hero-glow-a:before {
    content:'';
    position:absolute;
    width:520px;
    height:780px;
    right:40px;
    bottom:20px;
    border:1px solid rgba(31,117,240,.20);
    border-radius:52% 48% 0 0 / 36% 38% 0 0;
    transform:rotate(26deg);
  }
  .hero-glow-a:after {
    content:'';
    position:absolute;
    width:420px;
    height:620px;
    right:-70px;
    bottom:-30px;
    border:1px solid rgba(39,128,255,.11);
    border-radius:50%;
    transform:rotate(22deg);
  }
  .hero-glow-b:before {
    content:'';
    position:absolute;
    left:120px;
    top:-110px;
    width:360px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(52,150,255,.16), transparent);
    transform:rotate(-20deg);
  }
}

@media (min-width:1081px) and (max-height:820px) {
  .hero-copy { top:13.5svh; }
  .hero h1 { margin-top:25px; font-size:clamp(64px,4.7vw,82px); }
  .hero h1 em { font-size:clamp(54px,3.75vw,66px); }
  .hero-lead { font-size:13.5px; }
  .hero-actions { margin-top:22px; }
  .hero-proof { margin-top:28px; }
  .hero-visual { top:7.2svh; }
  .visual-frame { width:clamp(470px,31.2vw,540px); }
  .hero-info-card { left:-100px; width:176px; min-height:200px; padding:26px 24px 22px; }
  .dental-seal { width:146px; height:146px; }
  .hero-bottom { bottom:3.5svh; }
}

@media (max-width:1080px) {
  .hero-line-art,
  .hero-side-message,
  .dental-seal,
  .hero-right-signature,
  .hero-info-card,
  .hero-bottom { display:none; }
}

@media (max-width:760px) {
  .hero {
    background:
      radial-gradient(ellipse at 74% 48%, rgba(22,102,220,.22), transparent 38%),
      linear-gradient(140deg,#06162c,#071b38 58%,#0a2b5d);
  }
  .hero h1 { font-family:'Manrope',var(--sans); letter-spacing:-.055em; }
  .hero h1 em { font-family:'Instrument Serif','DM Serif Display',Georgia,serif; font-style:italic; }
  .hero-info-card { display:none; }
  .frame-caption { display:none; }
  .hero-bottom { display:none; }
}

/* =========================================================
   iPhone / Safari — fallback de composição no mobile

   Evita blocos pretos ocasionais gerados pelo compositor do
   WebKit quando position:fixed, backdrop-filter, filtros blur e
   SVGs filtrados se sobrepõem no topo do hero.
   O visual principal continua vindo dos gradientes do próprio hero.
   ========================================================= */
@media (max-width: 1080px) {
  /* A textura com feTurbulence é dispensável no mobile e pode virar
     um tile preto no WebKit. */
  .hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
  }

  /* Remove superfícies de blur/composição do cabeçalho fixo no Safari.
     Mantém um fundo sólido somente quando o header estiver rolado. */
  .nav-shell,
  .site-header.scrolled .nav-shell {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  .site-header.scrolled .nav-shell {
    background: rgba(8, 17, 39, .96) !important;
  }

  /* Esses elementos são decorativos e já não fazem parte da versão
     mobile. Forçar a remoção evita que o WebKit crie camadas ocultas. */
  .dental-seal,
  .hero-line-art,
  .hero-side-message,
  .hero-right-signature,
  .hero-info-card,
  .hero-bottom {
    display: none !important;
    visibility: hidden !important;
  }

  /* Os glows usam filter: blur() em elementos parcialmente fora da tela.
     No iOS isso também pode gerar retângulos pretos de composição. */
  .hero-glow {
    display: none !important;
    filter: none !important;
    -webkit-filter: none !important;
  }
}

/* =========================================================
   GhostFibers — React Bits visual adapted for this static site.
   WebGL runs only on desktop; mobile/Safari keeps the stable fallback.
   ========================================================= */
@media (min-width: 1081px) {
  .ghost-fibers-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    opacity: .30;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.28) 30%, #000 58%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.28) 30%, #000 58%, #000 100%);
  }

  .ghost-fibers-canvas {
    display: block;
    width: 100%;
    height: 100%;
  }

  .ghost-fibers-bg.ghost-fibers-fallback {
    background:
      radial-gradient(ellipse 44% 62% at 76% 35%, rgba(54,95,210,.18), transparent 72%),
      linear-gradient(110deg, transparent 35%, rgba(23,48,109,.12) 68%, transparent 100%);
  }
}

@media (max-width: 1080px) {
  .ghost-fibers-bg {
    display: none !important;
    visibility: hidden !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ghost-fibers-bg { opacity: .22; }
}