@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;600;800;900&display=swap');

:root{
  --blue:#224C9D;
  --orange:#F37E3C;
  --orange-2:#F9A83A;
  --text:#ffffff;
  --text-strong:#ffffff;
  --muted:#d6e2ff;
  --bg:radial-gradient(1600px 900px at 10% -20%, #13306f 0%, transparent 60%), radial-gradient(1200px 800px at 90% -10%, #0b2a66 0%, transparent 60%), linear-gradient(180deg,#081b3f 0%,#061632 100%);
  --bg-accent:radial-gradient(1200px 800px at 20% -10%, rgba(34,76,157,.26) 0%, transparent 60%);
  --card:rgba(255,255,255,.08);
  --card-strong:rgba(255,255,255,.10);
  --card-border:rgba(255,255,255,.16);
  --soft-border:rgba(255,255,255,.16);
  --soft-line:rgba(255,255,255,.10);
  --shadow:0 20px 46px rgba(8,20,50,.42);
  --ring:0 0 0 2px rgba(243,126,60,.30),0 10px 32px rgba(243,126,60,.18);
  --ico:#fff;
  --ico-bg:rgba(255,255,255,.10);
  --ico-ring:rgba(243,126,60,.45);
  --radius:16px;
  --radius-lg:22px;
  --radius-xl:28px;
  --radius-2xl:36px;
  --spr:cubic-bezier(.2,.7,.2,1);
  --fast:.25s var(--spr);
  --med:.55s var(--spr);
  --slow:.9s var(--spr);
  --mx:50%;
  --my:50%;
}
:root[data-theme="light"],[data-theme="light"]{
  --text:#0b1733;
  --text-strong:#08142b;
  --muted:#4d5f86;
  --bg:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);
  --bg-accent:radial-gradient(900px 600px at 20% -10%, rgba(34,76,157,.12) 0%, transparent 60%);
  --card:#ffffff;
  --card-strong:#ffffff;
  --card-border:#dfe6f5;
  --soft-border:#e6ecf8;
  --soft-line:#edf2fb;
  --shadow:0 18px 40px rgba(34,76,157,.14);
  --ring:0 0 0 2px rgba(34,76,157,.22),0 10px 32px rgba(34,76,157,.12);
  --ico:#224C9D;
  --ico-bg:#f2f6ff;
  --ico-ring:rgba(34,76,157,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:dark light}
body{
  margin:0;
  font-family:Mulish,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg),var(--bg-accent);
  overflow-x:hidden; scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{width:min(1180px,92vw); margin-inline:auto}

body::before{
  content:""; position:fixed; inset:-10% -10% auto -10%; height:78vh; z-index:-1;
  background:
    radial-gradient(38vw 38vw at 20% 30%, rgba(243,126,60,.14), transparent 60%),
    radial-gradient(34vw 34vw at 80% 20%, rgba(34,76,157,.22), transparent 60%),
    radial-gradient(28vw 28vw at 60% 80%, rgba(255,255,255,.06), transparent 60%);
  filter:blur(18px); animation:ambient-pan 22s linear infinite alternate; pointer-events:none;
}
@keyframes ambient-pan{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.5vh) scale(1.02)}100%{transform:translateY(1.5vh) scale(1.01)}}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(260px 260px at var(--mx) var(--my), rgba(0,0,0,.18), transparent 60%);
  opacity:0; transition:opacity .35s ease;
}
body:hover::after{opacity:.32}
[data-theme="light"] body::after{
  background:radial-gradient(260px 260px at var(--mx) var(--my), rgba(34,76,157,.12), transparent 60%);
}

.hdr{
  position:sticky; top:0; z-index:1000; padding-top:env(safe-area-inset-top);
  backdrop-filter:saturate(180%) blur(16px);
  background:rgba(6,20,50,.42); border-bottom:1px solid transparent;
  transition:background var(--fast),border-color var(--fast),box-shadow var(--fast),transform var(--fast);
}
.hdr.scrolled{background:rgba(10,27,68,.55); border-bottom:1px solid var(--soft-line); box-shadow:0 12px 30px rgba(0,0,0,.18)}
[data-theme="light"] .hdr.scrolled{background:rgba(255,255,255,.84); box-shadow:0 12px 30px rgba(34,76,157,.14)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:800}
.brand img{height:34px}
.menu{display:flex; align-items:center; gap:14px}
.menu a{
  position:relative; padding:11px 14px; border-radius:999px; font-weight:800; opacity:.96;
  transition:transform var(--fast),opacity var(--fast),background var(--fast),color var(--fast);
}
.menu a:hover{opacity:1; transform:translateY(-1px)}
.menu a.active{background:#fff; color:#0b1733}
.cta{
  padding:11px 18px; background:var(--orange); color:#111;
  border-radius:999px; font-weight:900; box-shadow:var(--ring);
  transition:transform var(--fast),box-shadow var(--fast)
}
.cta:hover{transform:translateY(-1px) scale(1.02)}
.switch{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--soft-border); background:var(--card); position:relative; overflow:hidden}
.switch:after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 0 rgba(243,126,60,.55); animation:hint 1.4s ease 1}
@keyframes hint{0%{box-shadow:0 0 0 0 rgba(243,126,60,.55)}100%{box-shadow:0 0 0 18px transparent}}
#menu-toggle{display:none}
.burger{display:none; width:40px; height:40px; position:relative; cursor:pointer; border-radius:var(--radius-xl)}
.burger::before,.burger::after{content:""; position:absolute; left:10px; right:10px; height:2px; background:var(--text); transition:.3s}
.burger::before{top:12px}
.burger::after{bottom:12px}
#menu-toggle:checked + .burger::before{transform:translateY(6px) rotate(45deg)}
#menu-toggle:checked + .burger::after{transform:translateY(-6px) rotate(-45deg)}
#menu-toggle:checked ~ .menu{max-height:520px; opacity:1}

#progress{position:fixed; top:0; left:0; right:0; height:6px; z-index:999; backdrop-filter:blur(6px); background:rgba(0,0,0,.08); border-bottom:1px solid var(--soft-line)}
[data-theme="light"] #progress{background:rgba(255,255,255,.66)}
.progress-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--orange),var(--orange-2))}
.progress-dots{position:absolute; inset:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; align-items:center}
.dot{height:6px; width:6px; border-radius:999px; background:rgba(255,255,255,.55); justify-self:center; opacity:.7; transform:scale(.9); transition:transform var(--fast), background var(--fast), opacity var(--fast)}
.dot.active{background:var(--orange); opacity:1; transform:scale(1.2)}

.hero{position:relative; overflow:hidden}
.hero-full{min-height:92vh}
.slides{position:absolute; inset:0; z-index:-1}
.slide{position:absolute; inset:0; background-image:var(--bg); background-position:center; background-size:cover; opacity:0; transform:scale(1.05); transition:opacity .8s var(--spr), transform 6s linear}
.slide.current{opacity:1; transform:scale(1)}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,10,26,.65), rgba(6,16,40,.85)); z-index:-1}

.hero-layer{padding:22vh 0 16vh}
.kicker{display:inline-flex; align-items:center; gap:10px; padding:7px 14px; border-radius:999px; background:var(--card); border:1px solid var(--card-border); color:var(--muted); font-size:13px; letter-spacing:.25px}
.ttl-hero{font-weight:900; line-height:1.06; font-size:clamp(34px,5.8vw,64px); margin:14px 0 6px; color:var(--orange); letter-spacing:-.3px; text-shadow:0 5px 22px rgba(0,0,0,.35)}
.lead-hero{max-width:760px; color:var(--text-strong); opacity:.98; font-size:clamp(16px,2.2vw,20px)}
.hero-cta{margin-top:22px; display:flex; gap:14px; flex-wrap:wrap}

.hero-nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:1px solid var(--soft-border); border-radius:999px; background:rgba(255,255,255,.1); display:grid; place-items:center; color:#fff}
.hero-nav.prev{left:18px}
.hero-nav.next{right:18px}

.hero-info{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:-88px}
.info-card{display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--soft-border); background:linear-gradient(180deg,var(--card-strong),rgba(255,255,255,.02)); border-radius:18px; box-shadow:0 12px 26px rgba(8,20,50,.30)}
.info-card i{font-size:22px; opacity:.9}
.info-card b{display:block}
.info-card.link{transition:transform var(--fast), box-shadow var(--fast)}
.info-card.link:hover{transform:translateY(-4px); box-shadow:0 22px 44px rgba(34,76,157,.3)}

.section{padding:88px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
.ttl{font-size:clamp(28px,3.2vw,42px); margin:0 0 12px; font-weight:900; letter-spacing:-.2px; position:relative; display:inline-block}
.ttl::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--orange),var(--orange-2))}
.lead{color:var(--text-strong); opacity:.96; font-size:18px; margin:0 0 28px}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{position:relative; padding:24px; border-radius:var(--radius-2xl); background:linear-gradient(180deg,var(--card),rgba(255,255,255,.02)); border:1px solid var(--card-border); transition:transform var(--med), box-shadow var(--med); box-shadow:0 16px 40px rgba(8,20,50,.30)}
.card:hover{transform:translateY(-8px) scale(1.01); box-shadow:0 24px 56px rgba(34,76,157,.36)}
.ico{width:72px; height:72px; border-radius:24px; display:grid; place-items:center; background:var(--ico-bg); outline:1px solid var(--ico-ring); color:var(--ico); box-shadow:0 14px 32px rgba(34,76,157,.28), inset 0 0 0 1px rgba(255,255,255,.06)}
.ico i{font-size:34px}

.btn{display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border-radius:999px; font-weight:900; border:1px solid var(--soft-border); background:var(--card); position:relative; overflow:hidden; transition:transform var(--fast), box-shadow var(--fast)}
.btn.primary{background:var(--orange); color:#111; border:none}
.btn::before{content:""; position:absolute; inset:-40% -20% auto -20%; height:200%; background:linear-gradient(120deg,transparent 0,rgba(255,255,255,.45) 50%,transparent 100%); transform:translateX(-120%); transition:transform .7s var(--spr)}
.btn:hover::before{transform:translateX(120%)}
.btn:hover{transform:translateY(-1px); box-shadow:var(--ring)}
.btn.ghost{background:transparent; border:1px solid var(--soft-border)}
.btn.w-max{width:max-content}

.t-slider{position:relative}
.t-track{display:grid; grid-auto-flow:column; grid-auto-columns:calc(33.333% - 14px); gap:14px; overflow:hidden; scroll-behavior:smooth}
.t-card{background:linear-gradient(180deg,var(--card),rgba(255,255,255,.02)); border:1px solid var(--card-border); border-radius:22px; overflow:hidden; box-shadow:0 16px 40px rgba(8,20,50,.30)}
.t-card img{width:100%; height:220px; object-fit:cover}
.t-quote{padding:16px 18px; font-weight:700}
.t-nav{position:absolute; top:42%; transform:translateY(-50%); width:42px; height:42px; display:grid; place-items:center; border-radius:999px; border:1px solid var(--soft-border); background:var(--card)}
.t-prev{left:-8px}
.t-next{right:-8px}

.ftr{margin-top:64px; padding:44px 0 80px; border-top:1px solid var(--soft-line)}
.foot{display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px}
.badge{display:inline-flex; gap:10px; align-items:center; padding:10px 14px; border-radius:999px; background:var(--card); border:1px solid var(--soft-border)}
.badge img{height:20px}
.list{display:grid; gap:8px}

.social{display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap}
.s-ico{--sz:44px; width:var(--sz); height:var(--sz); display:grid; place-items:center; border-radius:999px; background:linear-gradient(180deg,var(--card),rgba(255,255,255,.02)); border:1px solid var(--card-border); box-shadow:0 10px 26px rgba(8,20,50,.28); position:relative; overflow:hidden; transition:transform var(--fast), box-shadow var(--fast), background var(--fast), border-color var(--fast)}
.s-ico:hover{transform:translateY(-3px) scale(1.06); box-shadow:0 18px 38px rgba(34,76,157,.36)}

.wa-fab{position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:999px; display:grid; place-items:center; background:#25D366; color:#fff; box-shadow:0 14px 30px rgba(0,0,0,.35); z-index:1000}
.wa-fab i{font-size:26px}

.reveal{opacity:0; animation:fade-up 1s var(--spr) both .05s}
@keyframes fade-up{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
@supports (animation-timeline: view()){
  .reveal{opacity:1; animation:fade-up 1s both; animation-timeline:view(); animation-range:entry 15% cover 30%}
}

@media (max-width:1080px){
  .hero-layer{padding:18vh 0 14vh}
  .hero-info{grid-template-columns:1fr; margin-top:-60px}
  .t-track{grid-auto-columns:calc(50% - 10px)}
}
@media (max-width:760px){
  .menu{position:absolute; top:68px; right:4vw; left:4vw; background:rgba(14,29,74,.94); border:1px solid var(--soft-border); border-radius:var(--radius-2xl); padding:14px; display:grid; gap:10px; max-height:0; overflow:hidden; opacity:0; transition:.3s}
  [data-theme="light"] .menu{background:rgba(255,255,255,.98)}
  .burger{display:block}
  .ttl-hero{font-size:clamp(30px,9vw,44px)}
  .t-track{grid-auto-columns:100%}
}

.section .ttl{margin:0 0 26px}
.page-title{font-size:clamp(34px,5vw,56px); color:var(--orange)}
.page-intro{max-width:860px; font-size:18px; opacity:.96; margin-top:10px}

.page-hero{
  position:relative; padding:86px 0 78px; background:linear-gradient(180deg, rgba(6,16,40,.85), rgba(6,16,40,.75)), var(--bg);
  background-image:linear-gradient(180deg, rgba(6,16,40,.85), rgba(6,16,40,.75)), var(--bg);
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background-image: var(--bg);
  background: linear-gradient(180deg, rgba(6,16,40,.85), rgba(6,16,40,.75)), var(--bg);
}
.page-hero{--bg:var(--page-hero, var(--bg))}
.page-hero[style]{background-image:linear-gradient(180deg, rgba(6,16,40,.85), rgba(6,16,40,.75)), var(--bg)}

/* ==== BEAUTY UPGRADE: TESTIMONIOS + CONTACTO ==== */

/* Títulos internos más protagonistas */
.hero.is-inner{padding:96px 0 72px}
.hero.is-inner .title{font-size:clamp(36px,5vw,56px); line-height:1.02}
.ttl{font-size:clamp(30px,3.6vw,46px); font-weight:900; letter-spacing:-.3px; margin:0 0 18px}
.section .lead{font-size:clamp(16px,2.2vw,18px); opacity:.96; margin:4px 0 28px}

/* Testimonios: tarjetas de vidrio con borde glow */
.testi{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
.testi .quote{
  position:relative; display:flex; align-items:center;
  min-height:118px; border-radius:24px; padding:22px 24px;
  background:linear-gradient(180deg,var(--card),rgba(255,255,255,.03));
  border:1px solid var(--card-border); box-shadow:0 18px 40px rgba(8,20,50,.30);
  transition:transform .45s var(--spr), box-shadow .45s var(--spr)
}
.testi .quote::before{
  content:"“"; position:absolute; top:-12px; left:16px; font-size:64px;
  color:rgba(249,168,58,.45); filter:blur(.2px)
}
.testi .quote:hover{transform:translateY(-6px); box-shadow:0 28px 60px rgba(34,76,157,.32)}

/* Galería bajo testimonios: 3 imágenes con recorte perfecto */
.gallery{margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:230px; gap:14px}
.gallery img{
  width:100%; height:100%; object-fit:cover; border-radius:20px;
  border:1px solid var(--card-border); box-shadow:0 16px 38px rgba(8,20,50,.30);
  transform:translateZ(0) scale(1); transition:transform .5s var(--spr), box-shadow .5s var(--spr)
}
.gallery img:hover{transform:scale(1.03); box-shadow:0 28px 68px rgba(34,76,157,.34)}

/* Contacto: tarjetas glass + campos premium */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start}
.card{
  background:linear-gradient(180deg,var(--card-strong),rgba(255,255,255,.02));
  border:1px solid var(--card-border); border-radius:28px; box-shadow:0 20px 46px rgba(8,20,50,.34); overflow:hidden
}
.card h3{margin:0 0 8px; font-weight:900}
.sep{height:1px; background:var(--soft-line); margin:16px 0}

/* Campos del formulario */
.form{padding:2px}
.in{
  width:100%; padding:15px 16px; border-radius:18px;
  background:rgba(255,255,255,.06); border:1px solid var(--soft-border);
  color:var(--text-strong); box-shadow:inset 0 0 0 0 transparent, 0 12px 28px rgba(8,20,50,.22);
  transition:border-color .25s var(--spr), box-shadow .25s var(--spr), background .25s var(--spr)
}
[data-theme="light"] .in{background:#fff}
.in:focus{outline:0; border-color:rgba(243,126,60,.65); box-shadow:var(--ring)}
textarea.in{min-height:120px; resize:vertical}
#contactForm .row{display:flex; gap:12px; flex-wrap:wrap}
#contactForm .row .in{flex:1 1 240px}
#contactForm .btn{white-space:nowrap}

/* Botones de acción en contacto */
#contactForm .btn.primary{font-weight:900}
#waBtn.btn{display:inline-flex; align-items:center}

/* Rejilla del formulario completa para ocupar el ancho */
.wrap.grid2 .form{display:block}

/* Ajuste del bloque de info (Horario/Ubicación/Contacto) */
.wrap.grid2 .card{padding:24px}

/* Responsivo */
@media (max-width:1080px){
  .testi{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:200px}
}
@media (max-width:840px){
  .grid2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .testi{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr; grid-auto-rows:180px}
  .hero.is-inner{padding:84px 0 64px}
}

/* Icono del sitio desde PNG (fallback automático) */
html::after{
  content:url("img/logo.png");
  position:fixed; width:0; height:0; overflow:hidden; opacity:0
}

.menu a.active{background:var(--card);border:1px solid var(--soft-border)}

.wa-wrap{position:fixed;right:18px;bottom:18px;z-index:10000;display:grid;gap:12px;justify-items:end}
.wa-fab{width:56px;height:56px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(180deg,#25d366,#1ebe57);color:#fff;border:1px solid rgba(0,0,0,.12);box-shadow:0 18px 40px rgba(0,0,0,.35);cursor:pointer;transition:transform .2s var(--spr),box-shadow .2s var(--spr)}
.wa-fab i{font-size:22px;line-height:1}
.wa-fab::after{content:"";position:absolute;width:80px;height:80px;border-radius:999px;inset:auto auto -12px -12px;background:radial-gradient(50% 50% at 50% 50%,rgba(37,211,102,.45),transparent 70%);filter:blur(14px);opacity:.6;pointer-events:none}
.wa-fab:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 26px 56px rgba(0,0,0,.42)}

.wa-panel{width:320px;max-width:92vw;transform:translateY(14px);opacity:0;pointer-events:none;transition:transform .28s var(--spr),opacity .28s var(--spr)}
.wa-card{background:linear-gradient(180deg,var(--card-strong),rgba(255,255,255,.02));border:1px solid var(--card-border);border-radius:22px;box-shadow:0 24px 60px rgba(8,20,50,.36);overflow:hidden}
.wa-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--soft-line)}
.wa-head b{display:flex;align-items:center;gap:8px}
.wa-head b i{font-size:18px;color:#25d366}
.wa-close{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:var(--card);border:1px solid var(--soft-border)}
.wa-list{display:grid;gap:10px;padding:12px}
.wa-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1px solid var(--soft-border);background:linear-gradient(180deg,var(--card),rgba(255,255,255,.02));transition:transform .2s var(--spr),box-shadow .2s var(--spr)}
.wa-item:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(34,76,157,.28)}
.wa-avatar{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;background:#25d366;color:#fff}
.wa-meta{display:grid;gap:2px}
.wa-meta small{color:var(--muted)}
.wa-act{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:#25d366;color:#fff;font-weight:800}
.wa-foot{padding:10px 12px;border-top:1px solid var(--soft-line);font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}

.wa-wrap.open .wa-panel{transform:translateY(0);opacity:1;pointer-events:auto}
.wa-wrap.hint .wa-fab{animation:wa-bounce 1.8s ease-in-out 2}
@keyframes wa-bounce{0%,100%{transform:none}30%{transform:translateY(-6px)}60%{transform:translateY(-2px)}}

@media (max-width:840px){
  .hero{padding:86px 0 54px}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero-cta{justify-content:center}
  .title{font-size:clamp(28px,9vw,40px)}
  .subtitle{font-size:16px}
  .cards{grid-template-columns:1fr;gap:16px}
  .card{padding:20px;border-radius:24px}
  .steps{grid-template-columns:1fr 1fr}
  .ftr{padding-bottom:96px}
}
@media (max-width:640px){
  .kicker{justify-content:center}
  .metrics{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .testi{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .wa-wrap{right:14px;bottom:14px}
  .wa-panel{max-width:92vw}
}


.menu a.active{background:var(--card);border:1px solid var(--soft-border)}

.wa-wrap{position:fixed;right:18px;bottom:18px;z-index:10000;display:grid;gap:12px;justify-items:end}
.wa-fab{width:58px;height:58px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(180deg,#25d366,#1ebe57);color:#fff;border:1px solid rgba(0,0,0,.12);box-shadow:0 18px 40px rgba(0,0,0,.35);cursor:pointer;transition:transform .22s var(--spr),box-shadow .22s var(--spr)}
.wa-fab i{font-size:22px;line-height:1}
.wa-fab::after{content:"";position:absolute;width:88px;height:88px;border-radius:999px;inset:auto auto -12px -12px;background:radial-gradient(50% 50% at 50% 50%,rgba(37,211,102,.45),transparent 70%);filter:blur(14px);opacity:.6;pointer-events:none}
.wa-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 26px 56px rgba(0,0,0,.42)}

.wa-panel{position:fixed;right:18px;bottom:90px;width:340px;max-width:92vw;transform:translateY(16px) scale(.98);opacity:0;pointer-events:none;transition:transform .28s var(--spr),opacity .28s var(--spr)}
.wa-card{background:linear-gradient(180deg,var(--card-strong),rgba(255,255,255,.02));border:1px solid var(--card-border);border-radius:22px;box-shadow:0 26px 60px rgba(8,20,50,.36);overflow:hidden}
.wa-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--soft-line)}
.wa-head b{display:flex;align-items:center;gap:8px}
.wa-head b i{font-size:18px;color:#25d366}
.wa-close{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:var(--card);border:1px solid var(--soft-border)}
.wa-list{display:grid;gap:10px;padding:12px}
.wa-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1px solid var(--soft-border);background:linear-gradient(180deg,var(--card),rgba(255,255,255,.02));transition:transform .2s var(--spr),box-shadow .2s var(--spr)}
.wa-item:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(34,76,157,.28)}
.wa-avatar{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:#25d366;color:#fff}
.wa-meta{display:grid;gap:2px}
.wa-meta small{color:var(--muted)}
.wa-act{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:#25d366;color:#fff;font-weight:800}
.wa-foot{padding:10px 12px;border-top:1px solid var(--soft-line);font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.wa-wrap.open .wa-panel{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.wa-wrap.hint .wa-fab{animation:wa-bounce 1.8s ease-in-out 2}
@keyframes wa-bounce{0%,100%{transform:none}30%{transform:translateY(-6px)}60%{transform:translateY(-2px)}}

.hero.is-inner{min-height:44vh;background:linear-gradient(180deg,rgba(34,76,157,.18),transparent)}
.hero.is-inner .title{font-size:clamp(30px,8.2vw,50px);letter-spacing:-.2px;line-height:1.06;margin-top:6px}
.hero.is-inner .subtitle{max-width:900px}

.section .ttl{font-size:clamp(30px,5vw,46px)}
.lead{font-size:clamp(16px,2.6vw,18px)}
.card h3{font-size:clamp(18px,4.2vw,22px)}

.form .in{border-radius:18px;border:1px solid var(--card-border);background:linear-gradient(180deg,var(--card),rgba(255,255,255,.02))}
.form .row .in{flex:1}

@media (max-width:980px){
  .hero{padding:86px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero-cta{justify-content:center}
  .title{font-size:clamp(28px,9vw,42px)}
  .subtitle{font-size:16px}
  .cards{grid-template-columns:1fr;gap:16px}
  .card{padding:20px;border-radius:24px}
  .steps{grid-template-columns:1fr 1fr}
  .ftr{padding-bottom:96px}
}
@media (max-width:640px){
  .kicker{justify-content:center}
  .metrics{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .testi{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .wa-wrap{right:14px;bottom:14px}
  .wa-panel{right:14px;bottom:82px;max-width:92vw}
}


.menu a.active{background:var(--card);border:1px solid var(--soft-border)}

.btn,.btn.ghost,.cta,.wa-act{background:var(--orange);border-color:transparent;color:#111}
.btn:hover,.cta:hover,.wa-act:hover{transform:translateY(-1px) scale(1.02);box-shadow:var(--ring)}

.cards{align-items:stretch}
.cards>.card{display:flex;flex-direction:column;height:100%}
.card .row{margin-top:auto}
.card p:last-child{margin-bottom:0}

