/* =========================
   THEME / BASE
   ========================= */
:root{
  --bg:#fbf7ff;
  --card:rgba(255,255,255,.78);
  --text:#1d1b22;
  --muted:#5b5566;

  --celeste:#9ad9ff;
  --turquesa:#4fe3d5;
  --lila:#b7a7ff;
  --rosa:#ffb3d9;

  --b1:1px solid rgba(0,0,0,.06);
  --stroke:1px solid rgba(120,80,180,.14);

  --shadow:0 18px 45px rgba(20,10,40,.12);
  --shadow2:0 10px 28px rgba(20,10,40,.08);
  --glow:0 22px 60px rgba(20,10,40,.10);

  --radius:18px;
  --radius2:26px;
  --pill:999px;

  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1100px,92%);margin:0 auto}

/* ===== Fondo aurora + textura ===== */
body{position:relative}
body::before{
  content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(79,227,213,.20), transparent 45%),
    radial-gradient(circle at 80% 15%, rgba(183,167,255,.22), transparent 48%),
    radial-gradient(circle at 65% 80%, rgba(255,179,217,.18), transparent 50%),
    radial-gradient(circle at 25% 85%, rgba(154,217,255,.18), transparent 52%);
  filter:blur(18px);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.012) 0 1px, transparent 1px 4px);
  opacity:.22; mix-blend-mode:multiply;
}

/* =========================
   TOPBAR + HEADER + NAV
   ========================= */
.topbar{
  background:linear-gradient(90deg,rgba(154,217,255,.55),rgba(79,227,213,.45),rgba(255,179,217,.35));
  border-bottom:var(--b1);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.topbar__msg{font-size:14px;color:var(--muted)}
.topbar__wa{
  font-size:14px;padding:8px 12px;border-radius:var(--pill);
  background:rgba(255,255,255,.75);border:var(--b1);
}

.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(251,247,255,.7);
  border-bottom:var(--b1);
  box-shadow:0 10px 28px rgba(20,10,40,.06);
}
.header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--celeste),var(--turquesa),var(--lila),var(--rosa));
  opacity:.55;
}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}

.brand{display:flex;align-items:center;gap:12px}
.brand__logo{width:52px;height:52px;border-radius:14px;box-shadow:var(--shadow);background:#fff}
.brand__text strong{display:block;letter-spacing:.3px}
.brand__text span{display:block;font-size:13px;color:var(--muted)}

.nav{display:flex;align-items:center;gap:14px}
.nav__link{
  font-size:14px;color:var(--muted);
  padding:10px 10px;border-radius:12px;position:relative;
}
.nav__link:hover{background:rgba(183,167,255,.18);color:var(--text)}
.nav__link.is-active{background:rgba(79,227,213,.18);color:var(--text)}
.nav__link.is-active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:6px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--turquesa),var(--rosa));opacity:.65;
}

.nav__toggle{
  display:none;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.75);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}

/* =========================
   BUTTONS
   ========================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--pill);padding:12px 18px;
  font-weight:900;border:1px solid rgba(0,0,0,.08);
  cursor:pointer;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), filter .12s var(--ease), background .12s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  background:linear-gradient(135deg,var(--turquesa),var(--lila),var(--rosa));
  box-shadow:0 12px 30px rgba(79,227,213,.22);
  border:1px solid rgba(255,255,255,.35);
  color:#121018;
}
.btn--ghost{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 10px 22px rgba(0,0,0,.05);
}
.btn--ghost:hover{background:rgba(255,255,255,.94)}
.btn--mini{
  padding:9px 12px;
  font-weight:1000;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(0,0,0,.08);
}

/* =========================
   SECTIONS / GRID
   ========================= */
.section{padding:44px 0;position:relative}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px}
.section__head h2{margin:0;font-size:26px;letter-spacing:-.03em}
.section__head p{margin:0;color:var(--muted);opacity:.9;font-size:15px}

.grid{display:grid;gap:16px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
@media (min-width:1240px){.grid--3{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:920px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid--3{grid-template-columns:1fr}}

/* =========================
   HERO (HOME) - NEW
   ========================= */
.hero{position:relative;padding:26px 0 10px;overflow:hidden}
.hero--new{padding:28px 0 18px}

/* ✅ CLAVE: grid real */
.heroNew{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:18px;
  align-items:start;
}
.heroNew__left{min-width:0}
.heroNew__right{min-width:0;align-self:start}

/* Kicker + chip */
.heroKicker{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:12px;
}
.pill{
  display:inline-flex;gap:8px;align-items:center;
  padding:10px 14px;border-radius:var(--pill);
  background:rgba(255,255,255,.78);border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow2);font-weight:1000;color:var(--muted);
  margin:0;
}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:var(--pill);
  background:rgba(255,255,255,.74);border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.05);
  font-weight:1000;color:var(--muted);
}
.chip--soft{
  background:rgba(183,167,255,.16);
  border:1px solid rgba(183,167,255,.26);
}

.hero__title{margin:0 0 10px;font-size:clamp(28px,4vw,42px);letter-spacing:-.04em;line-height:1.05}
.hero__subtitle{margin:0 0 16px;color:var(--muted);line-height:1.55;max-width:58ch;font-size:16px}

/* Segmented control */
.heroSearch{
  display:flex;gap:10px;flex-wrap:wrap;
  padding:10px;border-radius:18px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.05);
  width:fit-content;
  margin:10px 0 12px;
}
.seg{
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.88);
  padding:10px 12px;border-radius:var(--pill);
  font-weight:1100;
  cursor:pointer;
  transition:transform .12s var(--ease), filter .12s var(--ease);
}
.seg:hover{transform:translateY(-1px);filter:saturate(1.06)}
.seg.is-active{
  background:linear-gradient(135deg, rgba(79,227,213,.30), rgba(183,167,255,.26), rgba(255,179,217,.26));
}

.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}

/* Stats en cards */
.heroStats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.stat{
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 28px rgba(20,10,40,.06);
}
.stat__n{font-weight:1100;font-size:18px}
.stat__l{color:var(--muted);font-size:13px;margin-top:2px}

/* Spotlight / card */
.card{background:var(--card);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius2);box-shadow:var(--shadow2)}
.card--glow{box-shadow:0 24px 70px rgba(20,10,40,.12)}

.spotlight{
  max-width:420px;
  margin-left:auto;
  border-radius:24px;
  overflow:hidden;
}
.spotlight__media{position:relative;overflow:hidden}
.spotlight__media img.heroImg{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}
.spotlight__badge{
  position:absolute;left:12px;top:12px;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.08);
  font-weight:1000;font-size:12px;
}
.spotlight__body{
  padding:14px 14px 16px;
  background:rgba(255,255,255,.72);
}
.spotlight__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.spotlight__title{font-weight:1100}
.newsBadge{
  padding:6px 10px;border-radius:999px;
  font-weight:1000;font-size:12px;
  background:rgba(183,167,255,.22);
  border:1px solid rgba(183,167,255,.32);
}
.spotlight__name{font-weight:1100;margin-top:8px}
.spotlight__meta{color:var(--muted);margin-top:4px}

/* Details bonitos */
.miniDetails{
  margin-top:10px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.70);
  overflow:hidden;
}
.miniDetails summary{
  padding:10px 12px;
  cursor:pointer;
  font-weight:1100;
  list-style:none;
}
.miniDetails summary::-webkit-details-marker{display:none}
.miniDetails__body{padding:10px 12px 12px}
.miniRow{display:flex;gap:8px;flex-wrap:wrap}
.miniText{margin:8px 0 0;color:var(--muted)}

/* MiniRail (beneficios) en cards */
.miniRail{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.miniCard{
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 28px rgba(20,10,40,.06);
  font-weight:1100;
}

/* Fondo hero */
.hero__bg{
  position:absolute;
  inset:auto -30% -30% -30%;
  height:380px;
  background:
    radial-gradient(circle at 30% 30%, rgba(79,227,213,.25), transparent 55%),
    radial-gradient(circle at 70% 20%, rgba(183,167,255,.22), transparent 60%),
    radial-gradient(circle at 50% 70%, rgba(255,179,217,.18), transparent 55%);
  filter:blur(10px);
  pointer-events:none;
  z-index:-1;
}

/* Responsive hero */
@media (max-width:980px){
  .heroNew{grid-template-columns:1fr}
  .spotlight{max-width:100%;margin-left:0}
  .spotlight__media img.heroImg{height:240px}
}
@media (max-width:640px){
  .heroSearch{width:100%}
  .seg{flex:1;text-align:center}
  .heroStats{grid-template-columns:1fr}
  .miniRail{grid-template-columns:1fr}
}

/* =========================
   INFO CARDS (HOME)
   ========================= */
.infoCard{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 16px 45px rgba(0,0,0,.07);
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.infoCard__media{
  position:relative;height:210px;overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:rgba(0,0,0,.03);
}
.infoCard__media .imgZoom{all:unset;display:block;width:100%;height:100%;cursor:zoom-in}
.infoCard__media img{width:100%;height:100%;object-fit:cover;display:block}
.infoCard__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0) 45%, rgba(251,247,255,.65) 100%);
  pointer-events:none;
}
.infoCard__content{padding:14px 14px 10px}
.infoCard__content h3{margin:0 0 6px;letter-spacing:-.01em}
.infoCard__content p{margin:0;color:var(--muted);line-height:1.55;font-size:15px}
.infoCard__actions{
  padding:10px 14px 14px;
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;margin-top:auto;
}
.miniList{margin:10px 0 0;padding-left:18px;color:var(--muted)}
.link{font-weight:1000;color:var(--text);opacity:.85}
.link:hover{opacity:1}

/* =========================
   QUICK TABS + PANELS
   ========================= */
.quickTabs{
  display:flex;gap:10px;flex-wrap:wrap;
  padding:10px;border-radius:18px;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.05);
}
.quickTab{
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.88);
  padding:10px 12px;border-radius:var(--pill);
  font-weight:1100;cursor:pointer;
}
.quickTab.is-active{
  background:linear-gradient(135deg, rgba(79,227,213,.30), rgba(183,167,255,.26), rgba(255,179,217,.26));
}
.quickPanels{margin-top:14px}
.quickPanel{display:none}
.quickPanel.is-active{display:block}

/* =========================
   CURSOS
   ========================= */
.centerActions{display:flex;gap:12px;justify-content:center;margin-top:14px;flex-wrap:wrap}

.courseCard{
  display:flex;gap:14px;align-items:center;justify-content:space-between;
  padding:16px;border-radius:22px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow2);
}
.courseTag{
  display:inline-flex;padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.85);
  font-weight:1000;width:fit-content;margin-bottom:6px;
}
.courseSub{opacity:.9}
.courseCard__right{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:899px){
  .courseCard{flex-direction:column;align-items:stretch}
  .courseCard__right{justify-content:flex-start}
}

/* Cards pequeñas (recientes) - versión única */
.courseMini{
  border-radius:18px;overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.78);
  box-shadow:0 12px 30px rgba(20,20,40,.06);
}
.courseMini__media{
  border:0;padding:0;width:100%;
  position:relative;cursor:pointer;background:transparent;
}
.courseMini__media img{width:100%;height:210px;object-fit:cover;display:block}
.courseMini__pill{
  position:absolute;left:12px;top:12px;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.08);
  font-weight:1000;font-size:12px;
}
.courseMini__body{padding:12px 14px 14px}
.courseMini__meta{opacity:.85;margin:6px 0 10px}

/* =========================
   CTA + FOOTER + WA FLOAT
   ========================= */
.cta{padding:30px 0 60px}
.cta__inner{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:22px;border-radius:var(--radius2);
  background:linear-gradient(135deg, rgba(79,227,213,.25), rgba(183,167,255,.22), rgba(255,179,217,.22));
  border:var(--b1);
  box-shadow:var(--shadow);
}
.cta__inner h2{margin:0 0 6px}
.cta__inner p{margin:0;color:var(--muted)}
.footer{padding:26px 0 34px;border-top:var(--b1);background:rgba(255,255,255,.55)}
.footer__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.footer__links{display:flex;gap:14px;flex-wrap:wrap}
.footer__links a{color:var(--muted)}
.footer__links a:hover{color:var(--text)}

.wa-float{
  position:fixed;right:14px;bottom:14px;width:54px;height:54px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:linear-gradient(135deg,var(--turquesa),var(--lila),var(--rosa));
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.35);
  z-index:9999;
}

/* =========================
   MODAL CARRUSEL (cModal) - versión única
   ========================= */
.cModal{position:fixed;inset:0;display:none;z-index:999999}
.cModal.is-open{display:block}
.cModal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px)}
.cModal__panel{
  position:relative;width:min(900px,92vw);margin:6vh auto 0;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  box-shadow:0 30px 80px rgba(10,10,30,.25);
  padding:12px;
}
.cModal__close{
  position:absolute;right:12px;top:10px;
  border:0;background:rgba(255,255,255,.92);
  width:40px;height:40px;border-radius:12px;cursor:pointer;font-weight:1000;
}
.cModal__stage{
  display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:10px;
}
.cModal__img{
  width:100%;height:min(68vh,520px);
  object-fit:contain;background:rgba(0,0,0,.04);border-radius:14px;
}
.cNav{
  border:0;height:52px;width:48px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.90);
  box-shadow:0 12px 30px rgba(20,20,40,.10);
  font-size:28px;font-weight:1000;
}
.cModal__dots{display:flex;gap:8px;justify-content:center;padding:10px 0 2px}
.cDot{width:10px;height:10px;border-radius:999px;border:0;cursor:pointer;background:rgba(0,0,0,.20)}
.cDot.is-active{background:rgba(0,0,0,.55)}
@media (max-width:520px){
  .cModal__stage{grid-template-columns:40px 1fr 40px}
  .cNav{height:46px;width:40px;border-radius:12px}
}

/* =========================
   LIGHTBOX (tu proyector)
   ========================= */
.lightbox{position:fixed;inset:0;z-index:999999;display:none}
.lightbox.is-open{display:block}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(10,8,20,.62);backdrop-filter:blur(6px)}
.lightbox__panel{position:absolute;inset:26px;display:flex;align-items:center;justify-content:center}
.lightbox__img{
  max-width:min(1080px,94vw);max-height:86vh;width:auto;height:auto;
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  background:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.25);
}
.lightbox__close{
  position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.15);
  color:#fff;font-weight:1000;cursor:pointer;
}
@media (max-width:720px){
  .lightbox__panel{inset:14px}
  .lightbox__img{max-height:82vh}
}

/* =========================
   RESPONSIVE NAV
   ========================= */
@media (max-width:920px){
  .section__head{flex-direction:column;align-items:flex-start}
  .cta__inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:860px){
  .nav__toggle{display:inline-flex}
  .nav{
    position:absolute;right:4%;top:72px;
    flex-direction:column;align-items:stretch;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(0,0,0,.08);
    border-radius:18px;
    padding:12px;
    box-shadow:var(--shadow);
    width:min(320px,92vw);
    display:none;
  }
  .nav.is-open{display:flex}
}

/* =========================
   MICRO-INTERACCIONES
   ========================= */
@media (prefers-reduced-motion:no-preference){
  .btn:hover{transform:translateY(-1px);filter:saturate(1.05)}
}

/* =========================
   MOBILE BAR (solo móvil, fija abajo)
   ========================= */
.mobileBar{display:none}
@media (max-width:899px){
  .mobileBar{
    display:flex !important;
    position:fixed;
    left:12px; right:12px; bottom:12px;
    z-index:99999;
    gap:10px;
    padding:10px;
    border-radius:18px;
    background:rgba(255,255,255,.88);
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 20px 60px rgba(10,10,30,.18);
    backdrop-filter:blur(10px);
  }
  .mobileBar__btn{
    flex:1;
    border:1px solid rgba(0,0,0,.08);
    background:rgba(255,255,255,.85);
    border-radius:14px;
    padding:10px 12px;
    font-weight:1000;
    text-align:center;
    cursor:pointer;
  }
  .mobileBar__btn--wa{
    background:linear-gradient(135deg,var(--turquesa),var(--lila),var(--rosa));
    border:1px solid rgba(255,255,255,.35);
  }
  body{padding-bottom:90px;}
}
@media (min-width:900px){
  body{padding-bottom:0;}
}

/* =========================================
   WHATSAPP: verde esmeralda + icono (global)
   Pegar al FINAL del CSS
   ========================================= */
:root{
  --wa:#10b981;        /* esmeralda */
  --wa2:#059669;       /* esmeralda oscuro */
  --waGlow: rgba(16,185,129,.28);
  --waText:#063d2c;
}

/* 1) Targets: cualquier link wa.me / api.whatsapp + cualquier botón con data-wa + flotante + mobile */
a[href^="https://wa.me"],
a[href^="https://api.whatsapp.com"],
button[data-wa],
a[data-wa],
#waTop, #waHeader, #waCta,
.wa-float,
.mobileBar__btn--wa{
  background: linear-gradient(135deg, var(--wa), var(--wa2)) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: #052f22 !important;
  box-shadow: 0 14px 34px var(--waGlow) !important;
  font-weight: 900;
}

/* Si alguno es "btn--ghost" pero es WhatsApp, lo forzamos a WA */
.btn--ghost#waTop,
.btn--ghost#waHeader,
.btn--ghost#waCta{
  background: linear-gradient(135deg, var(--wa), var(--wa2)) !important;
  border-color: rgba(255,255,255,.35) !important;
}

/* Hover/active */
a[href^="https://wa.me"]:hover,
a[href^="https://api.whatsapp.com"]:hover,
button[data-wa]:hover,
a[data-wa]:hover,
#waTop:hover, #waHeader:hover, #waCta:hover,
.mobileBar__btn--wa:hover,
.wa-float:hover{
  filter: saturate(1.12) brightness(1.02);
  transform: translateY(-1px);
}

a[href^="https://wa.me"]:active,
a[href^="https://api.whatsapp.com"]:active,
button[data-wa]:active,
a[data-wa]:active,
#waTop:active, #waHeader:active, #waCta:active,
.mobileBar__btn--wa:active,
.wa-float:active{
  transform: translateY(1px);
}

/* 2) ICONO WHATSAPP (SVG embebido) */
a[href^="https://wa.me"]::before,
a[href^="https://api.whatsapp.com"]::before,
button[data-wa]::before,
a[data-wa]::before,
#waTop::before, #waHeader::before, #waCta::before,
.mobileBar__btn--wa::before,
.wa-float::before{
  content:"";
  width: 18px;
  height: 18px;
  display:inline-block;
  margin-right: 10px;
  vertical-align: -3px;

  /* WhatsApp logo (mask) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M19.11 17.9c-.25-.12-1.46-.72-1.68-.8-.22-.08-.38-.12-.54.12-.16.25-.62.8-.76.96-.14.16-.28.19-.53.06-.25-.12-1.04-.38-1.98-1.22-.73-.65-1.22-1.46-1.36-1.7-.14-.25-.01-.38.11-.51.11-.11.25-.28.37-.42.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.54-1.3-.74-1.78-.2-.48-.4-.41-.54-.42l-.46-.01c-.16 0-.41.06-.62.31-.22.25-.82.8-.82 1.95 0 1.15.84 2.27.96 2.43.12.16 1.66 2.53 4.02 3.55.56.24 1 .38 1.34.49.56.18 1.07.15 1.47.09.45-.07 1.46-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.11-.22-.18-.47-.31zM16.02 4C9.38 4 4 9.39 4 16.03c0 2.11.55 4.17 1.6 5.98L4 28l6.15-1.58c1.75.95 3.71 1.44 5.87 1.44C22.66 27.86 28 22.66 28 16.03 28 9.39 22.66 4 16.02 4zm0 21.82c-1.97 0-3.9-.53-5.59-1.53l-.4-.24-3.65.94.97-3.56-.26-.41a9.82 9.82 0 0 1-1.53-5.01c0-5.44 4.43-9.87 9.87-9.87 5.44 0 9.87 4.43 9.87 9.87 0 5.44-4.43 9.81-9.87 9.81z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M19.11 17.9c-.25-.12-1.46-.72-1.68-.8-.22-.08-.38-.12-.54.12-.16.25-.62.8-.76.96-.14.16-.28.19-.53.06-.25-.12-1.04-.38-1.98-1.22-.73-.65-1.22-1.46-1.36-1.7-.14-.25-.01-.38.11-.51.11-.11.25-.28.37-.42.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.54-1.3-.74-1.78-.2-.48-.4-.41-.54-.42l-.46-.01c-.16 0-.41.06-.62.31-.22.25-.82.8-.82 1.95 0 1.15.84 2.27.96 2.43.12.16 1.66 2.53 4.02 3.55.56.24 1 .38 1.34.49.56.18 1.07.15 1.47.09.45-.07 1.46-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.11-.22-.18-.47-.31zM16.02 4C9.38 4 4 9.39 4 16.03c0 2.11.55 4.17 1.6 5.98L4 28l6.15-1.58c1.75.95 3.71 1.44 5.87 1.44C22.66 27.86 28 22.66 28 16.03 28 9.39 22.66 4 16.02 4zm0 21.82c-1.97 0-3.9-.53-5.59-1.53l-.4-.24-3.65.94.97-3.56-.26-.41a9.82 9.82 0 0 1-1.53-5.01c0-5.44 4.43-9.87 9.87-9.87 5.44 0 9.87 4.43 9.87 9.87 0 5.44-4.43 9.81-9.87 9.81z'/%3E%3C/svg%3E") center / contain no-repeat;

  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 2px;
}

/* 3) Ajuste especial para el botón flotante (icono centrado) */
.wa-float{
  color: transparent !important;      /* ocultamos el emoji 💬 si lo trae */
  font-size: 0 !important;
}
.wa-float::before{
  margin: 0;
  width: 22px;
  height: 22px;
  background: rgba(255,255,255,.95);
}