/* ============================================================
   FINAL MODERN BUTTON SYSTEM V2
   Loaded last. Clear brand semantics + modern 2026 styling.
   ============================================================ */

:root{
  --medical:#1f6b57;
  --medical-dark:#174f42;
  --medical-soft:#eef8f4;
  --ink:#153f35;
  --gold:#c99b38;
  --white:#ffffff;
  --wa:#25D366;
  --wa-dark:#1fb95a;
  --radius:14px;
  --shadow:0 8px 20px rgba(23,79,66,.12);
}

/* ---------- Core interactive reset ---------- */
a.btn, button, [role="button"],
.learn-more, .more-link, .read-more,
.visage-tab, .filter-pill, .med-toggle,
[data-preform-open]{
  -webkit-tap-highlight-color:transparent!important;
  cursor:pointer!important;
  text-decoration:none!important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    filter .18s ease!important;
}

/* ---------- Modern medical CTAs ---------- */
.learn-more,
a.learn-more,
.more-link,
a.more,
.read-more,
[data-preform-open],
.btn-primary,
.cta-primary,
.preconsultation-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:8px!important;
  min-height:46px!important;
  min-width:150px!important;
  padding:0 20px!important;
  border-radius:var(--radius)!important;
  border:1px solid var(--medical)!important;
  background:var(--medical)!important;
  background-image:none!important;
  color:var(--white)!important;
  font-size:.95rem!important;
  font-weight:750!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  box-shadow:var(--shadow)!important;
}
.learn-more *,
a.learn-more *,
.more-link *,
a.more *,
.read-more *,
[data-preform-open] *{
  color:var(--white)!important;
}
.learn-more:hover,
a.learn-more:hover,
.more-link:hover,
a.more:hover,
.read-more:hover,
[data-preform-open]:hover,
.btn-primary:hover,
.cta-primary:hover,
.preconsultation-btn:hover{
  transform:translateY(-2px)!important;
  background:var(--medical-dark)!important;
  border-color:var(--medical-dark)!important;
  color:var(--white)!important;
  box-shadow:0 12px 26px rgba(23,79,66,.20)!important;
}

/* ---------- WhatsApp brand buttons ---------- */
/* Excludes floating icon which gets its own rules below */
a[href*="wa.me"]:not(.floating-whatsapp),
a[href*="whatsapp.com"]:not(.floating-whatsapp),
.rm-header-whatsapp,
.whatsapp-btn:not(.floating-whatsapp){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-height:48px!important;
  padding:0 21px!important;
  border-radius:14px!important;
  border:1px solid var(--wa)!important;
  background:var(--wa)!important;
  background-image:none!important;
  color:#fff!important;
  font-size:.96rem!important;
  font-weight:800!important;
  line-height:1!important;
  box-shadow:0 8px 20px rgba(37,211,102,.22)!important;
}
a[href*="wa.me"]:not(.floating-whatsapp) *,
a[href*="whatsapp.com"]:not(.floating-whatsapp) *,
.rm-header-whatsapp *,
.whatsapp-btn:not(.floating-whatsapp) *{
  color:#fff!important;
}
a[href*="wa.me"]:not(.floating-whatsapp):hover,
a[href*="whatsapp.com"]:not(.floating-whatsapp):hover,
.rm-header-whatsapp:hover,
.whatsapp-btn:not(.floating-whatsapp):hover{
  transform:translateY(-2px)!important;
  background:var(--wa-dark)!important;
  border-color:var(--wa-dark)!important;
  color:#fff!important;
  box-shadow:0 12px 26px rgba(37,211,102,.30)!important;
}

/* ---------- Instagram brand buttons ---------- */
a[href*="instagram.com"],
.rm-header-instagram,
.instagram-btn,
.instagram-link,
.instagram-cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-height:48px!important;
  padding:0 21px!important;
  border-radius:14px!important;
  border:1px solid transparent!important;
  background:linear-gradient(135deg,#833AB4 0%,#C13584 28%,#E1306C 52%,#F56040 75%,#FCAF45 100%)!important;
  color:#fff!important;
  font-size:.96rem!important;
  font-weight:800!important;
  line-height:1!important;
  box-shadow:0 8px 20px rgba(193,53,132,.20)!important;
}
a[href*="instagram.com"] *,
.rm-header-instagram *,
.instagram-btn *,
.instagram-link *,
.instagram-cta *{
  color:#fff!important;
}
a[href*="instagram.com"]:hover,
.rm-header-instagram:hover,
.instagram-btn:hover,
.instagram-link:hover,
.instagram-cta:hover{
  transform:translateY(-2px)!important;
  filter:brightness(.96)!important;
  box-shadow:0 12px 26px rgba(193,53,132,.28)!important;
}

/* ---------- Floating WhatsApp: ICON ONLY ---------- */
.floating-whatsapp,
a.floating-whatsapp,
.whatsapp-float,
a.whatsapp-float{
  position:fixed!important;
  right:24px!important;
  bottom:24px!important;
  z-index:9999!important;
  width:60px!important;
  height:60px!important;
  min-width:60px!important;
  min-height:60px!important;
  padding:0!important;
  border-radius:50%!important;
  border:2px solid rgba(255,255,255,.95)!important;
  background:var(--wa)!important;
  background-image:none!important;
  color:#fff!important;
  box-shadow:0 10px 26px rgba(21,85,63,.25)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  font-size:0!important;
  text-indent:-9999px!important;
}
.floating-whatsapp *,
.whatsapp-float *{
  text-indent:0!important;
  font-size:0!important;
}
.floating-whatsapp svg,
.floating-whatsapp i,
.floating-whatsapp img,
.whatsapp-float svg,
.whatsapp-float i,
.whatsapp-float img{
  width:28px!important;
  height:28px!important;
  font-size:28px!important;
  color:#fff!important;
  fill:currentColor!important;
  display:block!important;
}
.floating-whatsapp:hover,
.whatsapp-float:hover{
  transform:translateY(-3px) scale(1.03)!important;
  background:var(--wa-dark)!important;
  box-shadow:0 14px 32px rgba(21,85,63,.32)!important;
}

/* ---------- Secondary outline CTAs ---------- */
.btn-outline,
.btn-secondary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:46px!important;
  padding:0 20px!important;
  border-radius:14px!important;
  border:1px solid rgba(31,107,87,.32)!important;
  background:rgba(255,255,255,.58)!important;
  color:var(--ink)!important;
  box-shadow:0 6px 16px rgba(31,89,72,.06)!important;
  font-weight:750!important;
}
.btn-outline:hover,
.btn-secondary:hover{
  transform:translateY(-1px)!important;
  background:#fff!important;
  border-color:rgba(31,107,87,.50)!important;
  box-shadow:0 9px 20px rgba(31,89,72,.10)!important;
}

/* ---------- Tabs / filters ---------- */
.visage-tab,
.filter-pill{
  min-height:44px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  border:1px solid rgba(31,107,87,.24)!important;
  background:rgba(255,255,255,.60)!important;
  color:var(--ink)!important;
  font-weight:750!important;
  box-shadow:0 5px 14px rgba(31,89,72,.06)!important;
}
.visage-tab:hover,
.filter-pill:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(31,107,87,.44)!important;
  box-shadow:0 8px 18px rgba(31,89,72,.10)!important;
}
.visage-tab.active,
.visage-tab[aria-selected="true"],
.filter-pill.active{
  background:var(--medical)!important;
  border-color:var(--medical)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(31,107,87,.16)!important;
}

/* ---------- Accordions ---------- */
.med-toggle,
.accordion-header{
  border-radius:16px!important;
  border:1px solid rgba(31,107,87,.22)!important;
  background:rgba(255,255,255,.52)!important;
  color:var(--ink)!important;
  box-shadow:0 6px 16px rgba(31,89,72,.06)!important;
}
.med-toggle:hover,
.accordion-header:hover{
  transform:translateY(-1px)!important;
  background:#f8fcfa!important;
  border-color:rgba(31,107,87,.40)!important;
}

/* ---------- Accessibility ---------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible{
  outline:3px solid rgba(201,155,56,.68)!important;
  outline-offset:3px!important;
}

@media(max-width:600px){
  .floating-whatsapp,
  a.floating-whatsapp,
  .whatsapp-float,
  a.whatsapp-float{
    right:16px!important;
    bottom:16px!important;
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    min-height:56px!important;
  }
  .floating-whatsapp svg,
  .floating-whatsapp i,
  .floating-whatsapp img,
  .whatsapp-float svg,
  .whatsapp-float i,
  .whatsapp-float img{
    width:26px!important;
    height:26px!important;
    font-size:26px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  a,button,[role="button"]{transition:none!important}
}