/* ============================================================
   Santa Luzia — camada própria (substitui o runtime do Framer)
   Componentes: hero, menu dropdown, menu mobile, marquee de
   convênios, animações de entrada, seção de cirurgias.
   Cores: azul #062B54 / verde #1FC14F / estrelas #FFC53D
   ============================================================ */

/* ---------- animações de entrada (aplicadas via sl.js) ---------- */
.sl-rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.sl-rv.sl-on{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.sl-rv{opacity:1;transform:none;transition:none}}

/* ---------- HERO (carrossel próprio, medidas do original) ---------- */
.sl-hero,.sl-hero *,.sl-mnav,.sl-mnav *,.sl-cirurgias,.sl-cirurgias *,.sl-dd,.sl-dd *{box-sizing:border-box}
.sl-hero{position:relative;z-index:1;width:100%;height:800px;overflow:hidden;background:#071a30;font-family:"Instrument Sans","Instrument Sans Placeholder",sans-serif}
.sl-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .9s ease;pointer-events:none}
.sl-slide.is-on{opacity:1;pointer-events:auto}
.sl-inner{position:absolute;left:80px;top:0;bottom:0;width:478px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.sl-stars{width:134px;height:31px;flex:none;margin:0 0 10px}
.sl-h1{color:#fff;font-weight:700;font-size:40px;line-height:48px;letter-spacing:0;margin:0 0 10px}
.sl-sub{color:#fff;font-weight:400;font-size:20px;line-height:24px;margin:0 0 20px}
.sl-cta{display:flex;gap:10px;flex-wrap:wrap}
.sl-btn-g,.sl-btn-o{display:inline-flex;align-items:center;justify-content:center;height:48px;border-radius:8px;font-weight:700;font-size:20px;line-height:24px;color:#fff;text-decoration:none;transition:filter .2s ease}
.sl-btn-g{background:linear-gradient(10deg,rgb(31,193,79) 0%,rgb(29,223,71) 61%,rgb(10,157,42) 100%);padding:12px 35px}
.sl-btn-g:hover{filter:brightness(1.06)}
.sl-btn-o{border:1px solid #fff;padding:12px;background:transparent}
.sl-btn-o:hover{background:rgba(255,255,255,.12)}
/* entrada do texto a cada troca */
.sl-slide.is-on .sl-inner>*{animation:slUp .7s ease both}
.sl-slide.is-on .sl-inner>*:nth-child(2){animation-delay:.08s}
.sl-slide.is-on .sl-inner>*:nth-child(3){animation-delay:.16s}
.sl-slide.is-on .sl-inner>*:nth-child(4){animation-delay:.24s}
@keyframes slUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* setas (40x40, fundo rgba(0,0,0,.2), a 20px das bordas, como o original) */
.sl-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.2);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .2s}
.sl-arr img{width:40px;height:40px;display:block}
.sl-arr:hover{background:rgba(0,0,0,.35)}
.sl-prev{left:20px}.sl-next{right:20px}
/* dots (10px, brancos, inativo opacity .5, 20px do fundo) */
.sl-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:10px}
.sl-dots button{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:#fff;opacity:.5;cursor:pointer;transition:opacity .2s}
.sl-dots button.is-on{opacity:1}
@media (max-width:809px){
  .sl-hero{height:808px}
  .sl-s1{background-image:url('framerusercontent.com/images/jcknBsffO0ZNLKXVxGBmbM9NUo.png@width=362&height=712') !important}
  .sl-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,16,32,0) 35%,rgba(4,16,32,.55) 70%,rgba(4,16,32,.8) 100%);pointer-events:none}
  .sl-s1::after{background:none}
  .sl-inner{left:10px;right:10px;width:auto;z-index:2;justify-content:flex-end;padding-bottom:50px}
  .sl-stars{display:none}
  .sl-h1{font-size:32px;line-height:38.4px}
  .sl-sub{font-size:18px;line-height:21.6px}
  .sl-cta{width:100%;flex-direction:column;gap:10px}
  .sl-btn-g{width:100%}
  .sl-btn-o{width:100%;height:45px;font-size:14px;line-height:16.8px}
}

/* ---------- dropdowns do menu (estilo medido no original) ---------- */
.sl-nav-item{position:relative !important;cursor:pointer}
.sl-dd{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid rgb(1,145,204);border-radius:10px;box-shadow:0 10px 20px rgba(0,0,0,.05);padding:10px;min-width:142px;opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:99999}
.sl-nav-item.sl-open .sl-dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sl-dd.sl-up{top:auto;bottom:calc(100% + 14px)}
.sl-nav-item.sl-open .sl-dd.sl-up{transform:translateX(-50%) translateY(0)}
.sl-dd a{display:block;width:100%;padding:10px;border-radius:10px;color:rgb(3,64,107);font-family:"Inter","Inter Placeholder",sans-serif;font-size:15px;font-weight:500;line-height:1.5;letter-spacing:-.01em;text-align:left;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s}
.sl-dd a:hover{background:rgb(3,64,107);color:#fff}
/* setinha (CaretDown 18px, gira 180° ao abrir — como o original) */
.sl-caret{width:18px;height:18px;flex:none;display:inline-flex;transition:transform .35s ease;pointer-events:none}
.sl-caret svg{width:100%;height:100%;display:block}
.sl-nav-item.sl-open .sl-caret{transform:rotate(180deg)}

/* ---------- menu mobile (hambúrguer + painel) ---------- */
.sl-burger{display:none;position:fixed;top:14px;right:14px;z-index:999998;width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.28);background:rgba(6,28,54,.82);cursor:pointer;padding:0}
.sl-burger span{display:block;width:22px;height:2.5px;background:#fff;border-radius:2px;margin:5px auto;transition:transform .25s,opacity .25s}
.sl-burger.sl-x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.sl-burger.sl-x span:nth-child(2){opacity:0}
.sl-burger.sl-x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media (max-width:809px){.sl-burger{display:block}}
.sl-mnav{position:fixed;inset:0;z-index:999997;background:rgba(4,18,38,.98);display:flex;flex-direction:column;justify-content:center;padding:32px 30px;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
.sl-mnav.sl-open{opacity:1;visibility:visible}
.sl-mnav a{color:#fff;font-family:"Instrument Sans","Instrument Sans Placeholder",sans-serif;text-decoration:none;font-size:21px;font-weight:600;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.sl-mnav a.sl-sub{font-size:16.5px;font-weight:400;padding-left:18px;color:rgba(255,255,255,.85)}
.sl-mnav .sl-mnav-cta{margin-top:26px;background:#1FC14F;border-radius:12px;text-align:center;padding:15px;border-bottom:0;font-size:17px}

/* ---------- marquee de convênios (medidas do original: logos em tamanho
   natural, gap 10px, 100px/s, fade nas bordas, faixa de 113px) ---------- */
.sl-mq{overflow:hidden;width:100%;height:113px;padding:10px;display:flex;align-items:center;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12.5%,#000 87.5%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 12.5%,#000 87.5%,transparent 100%)}
.sl-mq-track{display:flex;align-items:center;gap:10px;width:max-content;animation:slMq 15.34s linear infinite}
.sl-mq:hover .sl-mq-track{animation-play-state:paused}
.sl-mq img{flex:none;object-fit:cover}
@keyframes slMq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- mapa do rodapé ---------- */
.framer-hnxo1t-container{position:relative}
.sl-map-frame{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit;z-index:2}

/* ---------- seção "nossas cirurgias" (página /cirurgias) ---------- */
.sl-cirurgias{width:100%;background:#F0F6FC;padding:clamp(48px,7vw,86px) clamp(20px,6vw,96px);font-family:"Instrument Sans","Instrument Sans Placeholder",sans-serif;box-sizing:border-box}
.sl-cirurgias h2{color:#062B54;font-size:clamp(26px,2.6vw,38px);font-weight:700;text-align:center;margin:0 0 10px}
.sl-cirurgias .sl-cir-sub{color:#3c5872;text-align:center;font-size:clamp(15px,1.2vw,17px);margin:0 auto 40px;max-width:640px}
.sl-cir-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;max-width:1140px;margin:0 auto}
.sl-cir-card{background:#fff;border:1px solid #dbe8f4;border-radius:18px;padding:30px 26px;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.sl-cir-card:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(6,40,80,.1)}
.sl-cir-card h3{color:#062B54;font-size:21px;font-weight:700;margin:0 0 10px}
.sl-cir-card p{color:#4a6379;font-size:15px;line-height:1.55;margin:0 0 22px;flex:1}
.sl-cir-card a{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#1FC14F;color:#fff;font-weight:600;font-size:15px;text-decoration:none;border-radius:10px;padding:13px 22px;transition:background .18s}
.sl-cir-card a:hover{background:#19aa44}
