/* KFG Masajes · estilos
   Paleta y medidas según el Manual de Identidad v4 */

@font-face{font-family:'Outfit';font-style:normal;font-weight:300 600;font-display:swap;src:url("../fonts/outfit-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 600;font-display:swap;src:url("../fonts/outfit-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --espuma:#E6F2EF; --cristal:#CFE8E2; --cielo:#D6EAF4;
  --lago:#1F7A73; --bruma:#8CC3DD; --menta:#9ED8CF; --abismo:#0A1F1E;
  --portada:#F4FAF8; --texto-2:#4A6560;
  --r-card:40px; --r-btn:99px; --gap:16px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Outfit,system-ui,sans-serif;color:var(--abismo);font-size:18px;line-height:1.55;background:var(--portada);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--bruma);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--abismo);color:#fff;padding:10px 18px;border-radius:var(--r-btn);z-index:100}
.skip:focus{left:8px}

/* iconos de línea 2px, extremos redondeados */
.ico{display:block;height:auto;aspect-ratio:1/1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ico:not([stroke]){stroke:currentColor}
.ico:not([stroke-width]){stroke-width:2}

/* manchas de luz */
.blob{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none}
.blob--menta{background:var(--menta)}
.blob--bruma{background:var(--bruma)}

/* logo */
.logo{display:inline-flex;align-items:flex-end;gap:calc(var(--logo)*.04);line-height:1;text-decoration:none;max-width:100%}
.logo__mark{width:calc(var(--logo)*.66);height:auto;aspect-ratio:546.724/229.281;fill:currentColor;display:block}
.logo__text{font-weight:500;font-size:calc(var(--logo)*.088)}

/* ---------- Portada ---------- */
.hero{position:relative;display:flex;min-height:min(100svh,900px);padding:36px max(16px,5vw) clamp(40px,6vw,80px);overflow:hidden;background:var(--portada)}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.4;pointer-events:none}
.hero__veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--portada) 0%,rgba(244,250,248,.75) 45%,rgba(244,250,248,.1) 100%),linear-gradient(180deg,rgba(244,250,248,0) 70%,var(--portada) 100%)}
.hero__inner{position:relative;display:flex;flex-direction:column;flex:1;width:100%}
.topbar{max-width:1300px;width:100%;margin:0 auto clamp(40px,6vw,80px);display:flex;justify-content:space-between;align-items:center;gap:16px 24px}
.nav{display:flex;align-items:center;gap:clamp(20px,3vw,32px);font-size:clamp(16px,1.6vw,18px);white-space:nowrap}
.nav a{text-decoration:none;transition:color .25s}
.nav a:hover{color:var(--lago)}
.hero__title{font-weight:500;font-size:clamp(52px,7vw,112px);line-height:.95;letter-spacing:-.04em;text-wrap:balance}
.light{font-weight:300}
.accent{color:var(--lago)}
.hero__row{display:flex;flex-direction:column;align-items:flex-start;gap:28px 40px}
.hero__lead{display:block;font-size:clamp(18px,1.8vw,24px);line-height:1.55;font-weight:300;letter-spacing:normal;max-width:960px;text-wrap:balance;margin-top:clamp(14px,1.8vw,22px)}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}

/* botones */
.btn{display:flex;align-items:center;gap:16px;font-weight:500;font-size:20px;height:68px;padding:0 8px 0 30px;border-radius:var(--r-btn);text-decoration:none;white-space:nowrap;color:#fff;transition:transform .35s var(--ease),background .25s,box-shadow .35s}
.btn:hover{transform:translateY(-3px)}
.btn__dot{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.btn--lago{background:var(--lago);box-shadow:0 14px 30px rgba(31,122,115,.3)}
.btn--lago:hover{background:var(--abismo)}
.btn--lago .btn__dot{background:#fff;color:var(--lago)}
.btn--abismo{background:var(--abismo);box-shadow:0 14px 30px rgba(10,31,30,.25)}
.btn--abismo:hover{background:var(--lago)}
.btn--abismo .btn__dot{background:var(--menta);color:var(--abismo)}
.btn--sm{height:56px;font-size:16px;padding:0 9px 0 24px;gap:10px;box-shadow:none}
.btn--sm .btn__dot{width:38px;height:38px}

/* ---------- Secciones ---------- */
.section{position:relative;padding:clamp(72px,9vw,130px) 5vw;overflow:hidden}
.section--white{background:#fff}
.section--lago{background:var(--lago);color:#fff}
.section--espuma{background:var(--espuma)}
.wrap{max-width:1300px;margin:0 auto}
.wrap--rel{position:relative}
.stack-16{display:flex;flex-direction:column;gap:16px}
.stack-28{display:flex;flex-direction:column;gap:28px}
.stack-56{display:flex;flex-direction:column;gap:56px}
.section__head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(32px,4vw,44px)}
.section__head--light{margin:0;gap:24px}
.section__sub{max-width:800px;font-size:19px;color:var(--texto-2);font-weight:300}
.section__lead{font-size:20px;font-weight:300;max-width:760px}
.section__lead--dark{font-size:19px;max-width:800px}
.h2{text-wrap:balance;font-weight:500;font-size:clamp(38px,5.2vw,72px);line-height:1;letter-spacing:-.035em}
.h2--narrow{max-width:14em}
.menta{color:var(--menta)}
.lago{color:var(--lago)}
.cita__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;mix-blend-mode:soft-light;pointer-events:none}
.centro__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.25;mix-blend-mode:soft-light;pointer-events:none}

/* ---------- Tarjetas ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);align-items:stretch}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
}
.specialties{margin-bottom:clamp(32px,4vw,44px)}
.section__divider{display:flex;align-items:center;gap:20px;font-weight:500;font-size:clamp(24px,2.8vw,34px);letter-spacing:-.01em;margin-bottom:28px}
.section__divider::after{content:"";flex:1;height:1px;background:rgba(10,31,30,.12)}
.card{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border-radius:var(--r-card);padding:32px;gap:28px;transition:transform .35s var(--ease),box-shadow .35s}
.card--clickable{appearance:none;-webkit-appearance:none;border:none;background:none;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer}
.card--lago{background:var(--lago);color:#fff}
.card--espuma{background:var(--espuma);color:var(--abismo)}
.card--cielo{background:var(--cielo);color:var(--abismo)}
.card--cristal{background:var(--cristal);color:var(--abismo)}
.card--abismo{background:var(--abismo);color:var(--espuma)}
.card--white{background:#fff;color:var(--abismo)}
.card--glass{background:rgba(255,255,255,.14);color:#fff}
.card__top{display:flex;justify-content:space-between;align-items:flex-start}
.card--row.card--static{flex-direction:row;align-items:flex-start;gap:20px;padding:24px;min-height:0}
.card--row .card__body{gap:6px}
.card__ico{width:40px}
.card__body{display:flex;flex-direction:column;gap:12px;flex:1}
.card__title{font-weight:500;font-size:clamp(26px,2.6vw,32px);letter-spacing:-.025em;line-height:1.05}
.card__body p{font-weight:300;font-size:17px;line-height:1.5;opacity:.92}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{border-radius:var(--r-btn);padding:6px 16px;font-size:14px;font-weight:500;background:#fff;color:var(--abismo)}
.card--lago .tags li{background:rgba(255,255,255,.2);color:#fff}
.card--abismo .tags li{background:rgba(255,255,255,.14);color:var(--espuma)}

/* tarjetas de contacto */
.cards{display:flex;flex-wrap:wrap;gap:var(--gap)}
.card--link{flex:1 1 max(260px,calc(33.333% - 11px));min-height:clamp(170px,15vw,220px);padding:28px;gap:40px;text-decoration:none}
.card--static{flex:1 1 max(250px,calc(33.333% - 11px));min-height:clamp(170px,16vw,230px);padding:28px;gap:36px}
.cards--contact .card--link{flex-basis:max(250px,calc(33.333% - 11px));min-height:clamp(170px,16vw,230px);gap:36px}
.badge{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.cards--contact .badge{width:60px;height:60px}
.badge--cristal{background:var(--cristal);color:var(--abismo)}
.badge--menta{background:var(--menta);color:var(--abismo)}
.badge--white{background:#fff;color:var(--abismo)}
.badge--glass{background:rgba(255,255,255,.18)}
.arrow{width:44px;height:44px;border-radius:50%;background:var(--menta);color:var(--abismo);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease),background .25s,color .25s}
.arrow--ring{width:40px;height:40px;background:none;border:1.5px solid currentColor;color:inherit;opacity:.8}
.card__foot{line-height:1.2}
.eyebrow{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;opacity:.75}
.card__big{display:block;font-weight:500;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;margin-top:6px}
.card__mid{display:block;font-weight:500;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;margin-top:6px}
.card__note{font-size:15px;font-weight:300;margin-top:4px;opacity:.85}

/* horario */
.hours{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;background:rgba(255,255,255,.14);border-radius:var(--r-card);padding:14px 14px 14px clamp(14px,3vw,32px)}
.hours__title{display:flex;align-items:center;gap:14px;flex:none}
.hours__title b{font-weight:500;font-size:22px}
.hours__days{flex:1 1 560px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,76px),1fr));gap:6px}
.hours__days li{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:26px;background:rgba(255,255,255,.12)}
.hours__days li>span:first-child{font-size:15px}
.hours__days .t{font-size:12px;white-space:nowrap;opacity:.85;display:flex;align-items:center;gap:3px}
.hours__days .t i{font-style:normal;opacity:.3;font-weight:300}
.hours__days .is-closed{opacity:.55}
.hours__days .is-today{background:#fff;color:var(--abismo);font-weight:600;opacity:1}

/* contacto */

/* mapa */
.map{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--cristal);height:460px;margin-top:-12px}
.map .map__canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.map__bar{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;pointer-events:none}
.map__place{pointer-events:auto;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:28px;padding:14px;display:flex;align-items:center;gap:14px;line-height:1.3}
.map__photo{flex:none;width:56px;height:56px;border-radius:16px;background:var(--cielo);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 0 0 3px rgba(10,31,30,.1)}
.map__photo img{width:100%;height:100%;object-fit:cover}
.map__info{flex:1;min-width:0}
.map__info b{font-weight:500;font-size:19px;display:block}
.map__info div{font-size:15px;color:var(--texto-2)}
.map__go{flex:none;width:52px;height:52px;border-radius:50%;background:var(--abismo);color:var(--menta);display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s}
.map__go:hover{background:var(--lago);color:#fff;transform:scale(1.06)}
.credit{text-align:right;font-size:12px;color:var(--texto-2);margin-top:-16px}
.credit a{color:var(--texto-2)}

/* controles y marcador del mapa */
.maplibregl-map{font-family:Outfit,sans-serif}
.maplibregl-ctrl-group{background:none!important;box-shadow:none!important;display:flex;flex-direction:column;gap:8px}
.maplibregl-ctrl-group button{width:44px!important;height:44px!important;border-radius:50%!important;border:0!important;background-color:#fff!important;box-shadow:0 6px 18px rgba(10,31,30,.15)!important}
.pin{position:relative;width:64px;height:68px;cursor:pointer}
.pin__pulse{position:absolute;left:50%;bottom:0;width:44px;height:44px;margin:0 0 -22px -22px;border-radius:50%;background:var(--lago);animation:kfgpulse 2.2s ease-out infinite}
.pin__body{position:absolute;left:4px;top:0;width:56px;height:56px;background:var(--abismo);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 0 0 3px #fff,0 12px 24px rgba(10,31,30,.35);transition:transform .35s var(--ease)}
.pin__logo{position:absolute;left:32px;top:28px;width:32px;height:auto;aspect-ratio:546.724/229.281;transform:translate(-50%,-50%);fill:#fff;color:#fff}
.pin:hover .pin__body{transform:rotate(-45deg) scale(1.06)}
@keyframes kfgpulse{0%{transform:scale(.5);opacity:.7}100%{transform:scale(2.4);opacity:0}}

/* pie */
.footer{background:var(--espuma)}
.footer__card{position:relative;overflow:hidden;background:var(--abismo);color:var(--espuma);border-radius:0;padding:clamp(40px,5vw,72px) max(5vw,calc((100% - 1300px)/2));display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.footer__top{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:32px 48px;flex-wrap:wrap}
.footer__cols{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px 32px;padding-top:clamp(32px,4vw,48px);border-top:1px solid rgba(230,242,239,.16)}
.footer__cols .footer__label{font-family:Outfit,sans-serif;font-weight:500;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--bruma);margin-bottom:14px}
.footer__cols a{display:block;text-decoration:none;font-weight:300;font-size:17px;line-height:1.4;margin-bottom:8px;transition:color .25s}
.footer__cols a:hover{color:var(--menta)}
.footer__cols p{font-weight:300;font-size:17px;line-height:1.4}
.footer__cols p b{font-weight:500}
.footer__cols .dim{opacity:.6;margin-top:8px;font-size:15px}
.footer__bottom{position:relative;display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;font-size:14px;font-weight:300;opacity:.7}
.footer__bottom a{color:inherit;text-decoration:none}
.footer__bottom a:hover{color:var(--menta);opacity:1}

/* móvil */
@media (max-width:640px){
  body{font-size:17px}
  .btn{height:60px;font-size:18px;padding-left:24px}
  .btn__dot{width:46px;height:46px}
  .btn--sm{height:52px;font-size:15px}
  .btn--sm .btn__dot{width:36px;height:36px}
  .card,.card--link,.card--static{padding:24px}
  .map{height:420px}
  .map__place{padding:10px;gap:10px}
  .map__photo{width:48px;height:48px;border-radius:13px}
  .map__info b{font-size:17px}
  .map__info div{font-size:13px}
  .map__go{width:44px;height:44px}
  .credit{margin-top:-8px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .grid .card:hover,.card--link:hover,.btn:hover{transform:none}
}

/* aparición al hacer scroll (solo con JS) */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* barra fija en móvil */
.dock{display:none}
@media (max-width:768px){
  .dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:flex;gap:8px;padding:8px;border-radius:var(--r-btn);background:rgba(10,31,30,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 30px rgba(10,31,30,.3);transform:translateY(140%);transition:transform .45s var(--ease)}
  .dock.is-on{transform:none}
  .dock a{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:var(--r-btn);text-decoration:none;font-weight:500;font-size:16px}
  .dock__call{background:var(--menta);color:var(--abismo)}
  .dock__wa{background:var(--lago);color:#fff}
  .footer__card{padding-bottom:96px}
  .nav{gap:16px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .dock{transition:none}
}

@media (max-width:640px){
}

/* tarjetas de servicio (enlaces a WhatsApp) */
.card--svc{color:inherit;text-decoration:none}
.card--svc.card--lago{color:#fff}
.card--svc.card--abismo{color:var(--espuma)}
.card--svc .badge{width:60px;height:60px}
.badge--glass{color:#fff}

/* reserva: dos tarjetas */
.cards--two .card--link{flex-basis:calc(50% - 8px);min-height:clamp(190px,17vw,240px)}

/* centro: dirección + redes a la izquierda, mapa a la derecha */
.centro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);align-items:stretch}
.centro__side{display:flex;flex-direction:column;gap:var(--gap)}
.centro__side .card--static{flex:1;min-height:200px}
.centro__social{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.centro__social .card--link{min-height:190px;padding:24px;gap:28px}
.centro .map{margin-top:0;height:auto;min-height:460px}
@media (max-width:900px){
  .centro{grid-template-columns:1fr}
  .centro .map{min-height:420px}
}
@media (max-width:520px){
  .centro__social{grid-template-columns:1fr}
  .cards--two .card--link{flex-basis:100%}
}

/* horario en móvil: 2 columnas, el domingo a todo el ancho */
@media (max-width:640px){
  .hours{padding:14px}
  .hours__title{padding-left:6px}
  .hours__days{grid-template-columns:1fr 1fr;flex-basis:100%}
  .hours__days li:last-child{grid-column:1/-1}
}
@media (max-width:520px){
  .centro__social .card--link{min-height:150px}
}

.hero__grid{max-width:1300px;width:100%;margin:auto}
.hero__text{display:flex;flex-direction:column;gap:clamp(32px,4vw,56px)}

/* ---------- hover de tarjetas ---------- */
.card--link,.card--clickable{isolation:isolate}
.card--link::before,.card--clickable::before{content:"";position:absolute;right:28px;top:28px;width:44px;height:44px;border-radius:50%;background:var(--wash,rgba(255,255,255,.14));transform:scale(0);transition:transform .7s var(--ease);z-index:-1;pointer-events:none}
.card--clickable::before{right:32px;top:32px}
.card--lago{--wash:rgba(255,255,255,.12)}
.card--espuma{--wash:rgba(158,216,207,.45)}
.card--cielo{--wash:rgba(140,195,221,.35)}
.card--cristal{--wash:rgba(158,216,207,.5)}
.card--abismo{--wash:rgba(31,122,115,.5)}
.card--white{--wash:rgba(158,216,207,.4)}
.card--glass{--wash:rgba(255,255,255,.12)}
.card--svc .tags li{transition:transform .45s var(--ease)}
.card--link:active,.card--clickable:active{transform:scale(.985);transition-duration:.12s}

@media (hover:hover){
  .card--link:hover::before,.card--link:focus-visible::before,.card--clickable:hover::before,.card--clickable:focus-visible::before{transform:scale(30)}
  .card--link:hover .arrow,.card--link:focus-visible .arrow,.card--clickable:hover .arrow,.card--clickable:focus-visible .arrow{transform:rotate(45deg) scale(1.1);background:var(--abismo);color:#fff;border-color:var(--abismo);opacity:1}
  .card--link:hover .arrow svg,.card--link:focus-visible .arrow svg,.card--clickable:hover .arrow svg,.card--clickable:focus-visible .arrow svg{stroke:#fff}
  .card--abismo.card--link:hover .arrow,.card--abismo.card--link:focus-visible .arrow,.card--abismo.card--clickable:hover .arrow,.card--abismo.card--clickable:focus-visible .arrow{background:var(--lago);border-color:var(--lago)}
  .card--svc:hover .tags li,.card--svc:focus-visible .tags li{transform:translateY(-3px)}
  .card--svc:hover .tags li:nth-child(2){transition-delay:.04s}
  .card--svc:hover .tags li:nth-child(3){transition-delay:.08s}
  .card--svc:hover .tags li:nth-child(4){transition-delay:.12s}
}
@media (prefers-reduced-motion:reduce){
  .card--link::before,.card--clickable::before{display:none}
  .card--link:active,.card--clickable:active{transform:none}
  .card--svc:hover .tags li{transform:none}
}

@media (max-width:420px){
  .topbar{gap:12px}
  .topbar .logo{--logo:112px!important}
  .nav{gap:14px;font-size:15px}
  .hero__title{font-size:60px}
  .hero__break{display:none}
}

/* ---------- Modal servicio ---------- */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(10,31,30,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:modalFade .25s var(--ease);transition:opacity .2s var(--ease)}
.modal__panel{position:relative;width:min(520px,100%);max-height:96vh;overflow-y:auto;background:var(--portada);border-radius:var(--r-card);display:flex;flex-direction:column}
.modal__panel.card--lago{background:var(--lago);color:#fff}
.modal__panel.card--espuma{background:var(--espuma);color:var(--abismo)}
.modal__panel.card--cielo{background:var(--cielo);color:var(--abismo)}
.modal__panel.card--cristal{background:var(--cristal);color:var(--abismo)}
.modal__panel.card--abismo{background:var(--abismo);color:var(--espuma)}
.modal__panel.card--lago .modal__tagline{color:#fff}
.modal__panel.card--lago .modal__cta{background:#fff;color:var(--lago)}
.modal__panel.card--lago .modal__cta .btn__dot{background:var(--lago);color:#fff}
.modal__panel.card--abismo .modal__tagline{color:var(--bruma)}
.modal__panel.card--abismo .modal__cta{background:var(--menta);color:var(--abismo)}
.modal__panel.card--abismo .modal__cta .btn__dot{background:var(--abismo);color:var(--menta)}
.modal.is-closing .modal__backdrop{opacity:0}
.modal__panel:focus{outline:none}
.modal__body{padding:clamp(26px,4vw,40px) clamp(26px,4vw,40px) 4px;display:flex;flex-direction:column;gap:14px}
.modal__head{display:flex;align-items:center;gap:16px}
.modal__badge{flex:none;width:52px;height:52px}
.modal__headtext{min-width:0}
.modal__title{font-weight:500;font-size:clamp(22px,2.6vw,26px);letter-spacing:-.025em;line-height:1.15}
.modal__tagline{font-weight:500;color:var(--lago);font-size:15px}
.modal__desc{font-weight:300;opacity:.92}
.modal__subhead{display:flex;align-items:center;gap:12px;font-weight:600;font-size:17px;margin-top:4px}
.modal__subhead::after{content:"";flex:1;height:1px;background:rgba(10,31,30,.15)}
.modal__benefits{display:flex;flex-direction:column;gap:12px}
.modal__benefits li{display:flex;align-items:center;gap:12px;font-weight:300}
.modal__check{flex:none;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--lago);display:flex;align-items:center;justify-content:center}
.modal__foot{padding:14px clamp(26px,4vw,40px) clamp(22px,4vw,30px)}
.modal__cta{width:100%;justify-content:space-between;box-shadow:none}
.modal__alt{text-align:center;font-size:14px;opacity:.75;margin-top:12px}
.modal__alt a{font-weight:600;color:inherit;text-decoration:none}
.modal__alt a:hover{text-decoration:underline}
body.modal-open{overflow:hidden}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .modal__backdrop{animation:none}
}
@media (max-width:640px){
  .modal{padding:0;align-items:flex-end}
  .modal__panel{width:100%;max-height:92vh;border-radius:var(--r-card) var(--r-card) 0 0}
}