:root {
  --navy-950: #07182b;
  --navy-900: #0b1f3a;
  --navy-800: #12375d;
  --navy-700: #16456f;

  --blue-700: #155e9b;
  --blue-600: #2177ba;
  --blue-500: #2c8ed6;
  --blue-100: #eaf4fb;
  --blue-50: #f4f9fd;

  --white: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f5f8fb;

  --text: #1f2937;
  --muted: #667085;
  --border: #d9e4ec;

  --success: #15725b;

  --container: 1240px;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 30px;

  --shadow-sm:
    0 8px 24px rgba(7, 24, 43, 0.08);

  --shadow:
    0 20px 60px rgba(7, 24, 43, 0.14);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--white);
}

body {
  margin: 0;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--text);
  background: var(--white);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 4px;
}

.container {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  padding: 12px 16px;
  border-radius: 8px;
  color: var(--white);
  background: var(--navy-950);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==========================================================
   TOP BAR
   ========================================================== */

.topbar {
  background: var(--navy-950);
  color: #d9e7f3;
  font-size: 0.88rem;
}

.topbar-inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.topbar a {
  text-decoration: none;
}

.topbar a:hover {
  color: var(--white);
}

.topbar-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* ==========================================================
   HEADER
   ========================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(217,228,236,.9);
  backdrop-filter: blur(14px);
}

.header-inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand img {
  width: 218px;
  max-height: 70px;
  object-fit: contain;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.desktop-nav > a {
  padding: 11px 13px;
  border-radius: 10px;
  color: var(--navy-900);
  text-decoration: none;
  font-size: .94rem;
  font-weight: 650;
}

.desktop-nav > a:hover {
  color: var(--blue-700);
  background: var(--blue-50);
}

.header-cta {
  padding: 12px 18px !important;
  color: var(--white) !important;
  background: var(--blue-700) !important;
}

.header-cta:hover {
  background: var(--navy-800) !important;
}

.mobile-nav {
  display: none;
}

.mobile-nav summary {
  cursor: pointer;
  list-style: none;
  min-width: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--navy-900);
  font-weight: 800;
}

.mobile-nav summary::-webkit-details-marker {
  display: none;
}

.mobile-menu-panel {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  padding: 18px 20px 26px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.mobile-menu-panel a {
  display: block;
  padding: 13px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--navy-900);
  text-decoration: none;
  font-weight: 650;
}

/* ==========================================================
   HERO
   ========================================================== */

.hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(
      circle at 18% 10%,
      rgba(44,142,214,.28),
      transparent 38%
    ),
    linear-gradient(
      125deg,
      var(--navy-950) 0%,
      var(--navy-900) 48%,
      var(--navy-800) 100%
    );
}

.hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -220px;
  top: -260px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
}

.hero-inner {
  position: relative;
  min-height: 650px;
  display: grid;
  grid-template-columns:
    minmax(0, 1.06fr)
    minmax(360px, .94fr);
  align-items: center;
  gap: clamp(30px, 6vw, 82px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: #a9daf9;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--blue-500);
}

.hero h1 {
  max-width: 780px;
  margin: 0 0 22px;
  font-size: clamp(2.6rem, 5.3vw, 5rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.hero-lead {
  max-width: 690px;
  margin: 0 0 30px;
  color: #d7e6f2;
  font-size: clamp(1.05rem, 1.6vw, 1.27rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 760;
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  color: var(--white);
  background: var(--blue-500);
}

.btn-primary:hover {
  background: var(--blue-600);
}

.btn-secondary {
  color: var(--white);
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.08);
}

.hero-visual {
  position: relative;
  align-self: end;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero-photo-shell {
  position: relative;
  width: min(100%, 480px);
  overflow: hidden;
  border-radius: 34px 34px 0 0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.13),
      rgba(255,255,255,.04)
    );
  box-shadow:
    0 30px 80px rgba(0,0,0,.26);
}

.hero-photo-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(7,24,43,.22)
    );
}

.hero-photo {
  width: 100%;
  height: 590px;
  object-fit: cover;
  object-position: center 15%;
}

.hero-badge {
  position: absolute;
  left: -28px;
  bottom: 42px;
  z-index: 2;
  width: min(290px, 74%);
  padding: 17px 19px;
  border-radius: 16px;
  color: var(--navy-900);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
}

.hero-badge strong {
  display: block;
  font-size: 1.05rem;
}

.hero-badge span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .88rem;
}

/* ==========================================================
   TRUST
   ========================================================== */

.trust-strip {
  position: relative;
  z-index: 3;
  margin-top: -1px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.trust-item {
  min-height: 94px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.trust-item + .trust-item {
  border-left: 1px solid var(--border);
}

.trust-icon {
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--blue-700);
  background: var(--blue-100);
  font-weight: 900;
}

.trust-item strong {
  display: block;
  color: var(--navy-900);
}

.trust-item span {
  display: block;
  color: var(--muted);
  font-size: .91rem;
}

/* ==========================================================
   GENERIC SECTIONS
   ========================================================== */

.section {
  padding: 96px 0;
}

.section-soft {
  background: var(--surface-soft);
}

.section-header {
  max-width: 800px;
  margin-bottom: 42px;
}

.section-label {
  margin: 0 0 10px;
  color: var(--blue-700);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.section-title {
  margin: 0 0 15px;
  color: var(--navy-900);
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.section-intro {
  margin: 0;
  color: var(--muted);
  font-size: 1.07rem;
}

/* ==========================================================
   PROCEDURES
   ========================================================== */

.procedure-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.procedure-card {
  position: relative;
  overflow: hidden;
  min-height: 470px;
  border-radius: var(--radius);
  background: var(--navy-900);
  box-shadow: var(--shadow-sm);
}

.procedure-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.procedure-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(7,24,43,.04) 22%,
      rgba(7,24,43,.92) 100%
    );
}

.procedure-content {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px;
  color: var(--white);
}

.procedure-number {
  display: inline-block;
  margin-bottom: 10px;
  color: #addcfa;
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .13em;
}

.procedure-content h3 {
  margin: 0 0 8px;
  font-size: 1.7rem;
}

.procedure-content p {
  margin: 0;
  color: #d9e7f3;
  font-size: .94rem;
}

/* ==========================================================
   FEATURED
   ========================================================== */

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.featured-card {
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.featured-index {
  width: 50px;
  height: 50px;
  margin-bottom: 24px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--white);
  background:
    linear-gradient(
      135deg,
      var(--blue-700),
      var(--navy-800)
    );
  font-weight: 900;
}

.featured-card h3 {
  margin: 0 0 9px;
  color: var(--navy-900);
  font-size: 1.35rem;
}

.featured-card p {
  margin: 0;
  color: var(--muted);
}

/* ==========================================================
   DOCTOR
   ========================================================== */

.doctor-grid {
  display: grid;
  grid-template-columns:
    minmax(340px, .82fr)
    minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(45px, 7vw, 90px);
}

.doctor-photo {
  position: relative;
}

.doctor-photo::before {
  content: "";
  position: absolute;
  inset: 28px -24px -24px 28px;
  z-index: 0;
  border-radius: var(--radius-lg);
  background: var(--blue-100);
}

.doctor-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.doctor-copy h2 {
  margin-top: 0;
}

.doctor-copy p {
  color: var(--muted);
}

.doctor-points {
  margin: 26px 0 30px;
  padding: 0;
  list-style: none;
}

.doctor-points li {
  position: relative;
  padding: 10px 0 10px 31px;
  color: var(--navy-900);
}

.doctor-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 9px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--success);
  background: #e6f5f0;
  font-size: .75rem;
  font-weight: 900;
}

/* ==========================================================
   FAQ
   ========================================================== */

.faq-grid {
  display: grid;
  grid-template-columns: .74fr 1.26fr;
  gap: 70px;
  align-items: start;
}

.faq-list {
  border-top: 1px solid var(--border);
}

.faq-list details {
  border-bottom: 1px solid var(--border);
}

.faq-list summary {
  cursor: pointer;
  position: relative;
  padding: 22px 46px 22px 0;
  list-style: none;
  color: var(--navy-900);
  font-weight: 760;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 18px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--blue-700);
  background: var(--blue-100);
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-answer {
  padding: 0 40px 22px 0;
  color: var(--muted);
}

/* ==========================================================
   ARTICLE
   ========================================================== */

.article-highlight {
  overflow: hidden;
  display: grid;
  grid-template-columns: .84fr 1.16fr;
  border-radius: var(--radius-lg);
  color: var(--white);
  background:
    linear-gradient(
      135deg,
      var(--navy-950),
      var(--navy-800)
    );
  box-shadow: var(--shadow);
}

.article-aside {
  min-height: 390px;
  display: grid;
  place-items: center;
  padding: 45px;
  background:
    radial-gradient(
      circle at center,
      rgba(44,142,214,.35),
      transparent 60%
    );
}

.article-mark {
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  font-size: 4rem;
  font-weight: 300;
}

.article-copy {
  padding: clamp(38px, 6vw, 72px);
}

.article-copy h2 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.07;
}

.article-copy p {
  color: #d8e7f4;
}

/* ==========================================================
   CONTACT
   ========================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 28px;
}

.contact-primary,
.contact-secondary {
  border-radius: var(--radius);
}

.contact-primary {
  padding: clamp(34px, 5vw, 58px);
  color: var(--white);
  background:
    linear-gradient(
      135deg,
      var(--blue-700),
      var(--navy-800)
    );
}

.contact-primary h2 {
  margin-top: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
}

.contact-primary p {
  color: #deebf5;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.contact-primary .btn-primary {
  color: var(--navy-900);
  background: var(--white);
}

.contact-secondary {
  padding: 36px;
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.contact-block + .contact-block {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.contact-block h3 {
  margin: 0 0 7px;
  color: var(--navy-900);
  font-size: 1rem;
}

.contact-block p {
  margin: 0;
  color: var(--muted);
}

.contact-block a {
  color: var(--blue-700);
  font-weight: 700;
  text-decoration: none;
}

/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {
  padding: 58px 0 24px;
  color: #cfdeea;
  background: var(--navy-950);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 55px;
}

.footer-logo {
  width: 210px;
  padding: 12px;
  border-radius: 10px;
  background: var(--white);
}

.footer-copy {
  max-width: 490px;
  margin-top: 20px;
  color: #adbecd;
}

.footer-title {
  margin: 0 0 14px;
  color: var(--white);
  font-size: .95rem;
}

.footer-links {
  display: grid;
  gap: 9px;
}

.footer-links a {
  color: #cfdeea;
  text-decoration: none;
}

.footer-bottom {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #92a8b9;
  font-size: .84rem;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1020px) {
  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    display: block;
  }

  .hero-inner {
    min-height: auto;
    grid-template-columns: 1fr 390px;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 6vw, 4.2rem);
  }

  .procedure-grid,
  .featured-grid {
    gap: 18px;
  }

  .doctor-grid,
  .faq-grid {
    gap: 45px;
  }
}

@media (max-width: 820px) {
  body {
    font-size: 16px;
  }

  .topbar-inner {
    min-height: 44px;
  }

  .topbar-location {
    display: none;
  }

  .header-inner {
    min-height: 72px;
  }

  .brand img {
    width: 175px;
  }

  .hero-inner {
    padding-top: 64px;
    grid-template-columns: 1fr;
    text-align: left;
  }

  .hero-visual {
    min-height: 480px;
  }

  .hero-photo-shell {
    width: min(100%, 420px);
  }

  .hero-photo {
    height: 490px;
  }

  .hero-badge {
    left: 10px;
    bottom: 28px;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .trust-item + .trust-item {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .section {
    padding: 74px 0;
  }

  .procedure-grid,
  .featured-grid,
  .doctor-grid,
  .faq-grid,
  .article-highlight,
  .contact-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .procedure-card {
    min-height: 430px;
  }

  .doctor-photo {
    max-width: 560px;
  }

  .doctor-photo::before {
    display: none;
  }

  .article-aside {
    min-height: 240px;
  }

  .footer-grid {
    gap: 34px;
  }
}

@media (max-width: 520px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .topbar-contact {
    gap: 10px;
    font-size: .78rem;
  }

  .hero {
    overflow: hidden;
  }

  .hero-inner {
    padding-top: 46px;
  }

  .hero h1 {
    font-size: 2.55rem;
  }

  .hero-actions,
  .contact-actions {
    display: grid;
  }

  .btn {
    width: 100%;
  }

  .hero-visual {
    min-height: 430px;
  }

  .hero-photo {
    height: 445px;
  }

  .procedure-card {
    min-height: 390px;
  }

  .procedure-content {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
  }
}


/* ==========================================================
   NET3MAX MEDICAL PREMIUM — MULTI-PAGE SYSTEM
   ========================================================== */

.brand-panel {
  padding: 9px 14px;
  border-radius: 14px;
  background: var(--navy-900);
}

.brand-panel img {
  width: 205px;
  height: auto;
}

.footer-brand-panel {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--navy-900);
}

.footer-logo {
  padding: 0;
  background: transparent;
}

.page-hero {
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(
      circle at 16% 8%,
      rgba(44,142,214,.25),
      transparent 38%
    ),
    linear-gradient(
      125deg,
      var(--navy-950),
      var(--navy-800)
    );
}

.page-hero-grid {
  min-height: 390px;
  padding-block: 62px;
  display: grid;
  grid-template-columns:
    minmax(0, 1.14fr)
    minmax(300px, .86fr);
  align-items: center;
  gap: clamp(34px, 6vw, 78px);
}

.page-hero h1 {
  max-width: 800px;
  margin: 0 0 18px;
  font-size: clamp(2.5rem, 5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.page-hero-lead {
  max-width: 720px;
  margin: 0;
  color: #d8e7f4;
  font-size: 1.08rem;
}

.section-label-light {
  color: #a9daf9;
}

.page-hero-media {
  max-height: 300px;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.page-hero-media img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.content-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(280px, .65fr);
  gap: 34px;
  align-items: start;
}

.content-card,
.side-card,
.article-list-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.content-card {
  padding: clamp(28px, 5vw, 58px);
}

.content-body {
  min-width: 0;
}

.content-body h2,
.content-body h3,
.content-body h4 {
  color: var(--navy-900);
  line-height: 1.2;
}

.content-body h2 {
  margin-top: 1.8em;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.content-body h3 {
  margin-top: 1.5em;
  font-size: 1.35rem;
}

.content-body p,
.content-body li {
  color: #465366;
}

.content-body ul,
.content-body ol {
  padding-left: 1.4rem;
}

.content-body blockquote {
  margin: 28px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--blue-500);
  border-radius: 0 12px 12px 0;
  color: var(--navy-900);
  background: var(--blue-50);
}

.content-body table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.content-body th,
.content-body td {
  padding: 12px 14px;
  border: 1px solid var(--border);
  text-align: left;
}

.legacy-link-text {
  color: inherit;
}

.side-card {
  position: sticky;
  top: 112px;
  padding: 30px;
}

.side-card h2 {
  margin-top: 0;
  color: var(--navy-900);
  font-size: 1.55rem;
  line-height: 1.2;
}

.side-card p {
  color: var(--muted);
}

.side-actions {
  display: grid;
  gap: 10px;
  margin: 24px 0;
}

.btn-outline {
  border: 1px solid var(--border);
  color: var(--navy-900);
  background: var(--white);
}

.text-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--blue-700);
  text-decoration: none;
  font-weight: 750;
}

.link-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.link-card {
  min-height: 235px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.link-card:hover,
.featured-link:hover,
.article-list-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.link-card-kicker {
  color: var(--blue-700);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.link-card h2 {
  margin: 12px 0 10px;
  color: var(--navy-900);
  font-size: 1.45rem;
}

.link-card p {
  margin: 0 0 18px;
  color: var(--muted);
}

.link-card-arrow {
  margin-top: auto;
  color: var(--blue-700);
  font-weight: 800;
}

.procedure-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.featured-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.faq-content-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.article-list-card {
  max-width: 920px;
  padding: clamp(30px, 5vw, 56px);
  display: block;
  color: inherit;
  text-decoration: none;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.article-list-card h2 {
  margin: 10px 0 16px;
  color: var(--navy-900);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
}

.article-list-card p {
  color: var(--muted);
}

.reading-wrap {
  max-width: 980px;
}

.article-disclaimer {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: .9rem;
}


@media (max-width: 820px) {

  .brand-panel {
    padding: 7px 10px;
  }

  .brand-panel img {
    width: 160px;
  }

  .page-hero-grid,
  .content-layout,
  .faq-content-grid,
  .link-grid {
    grid-template-columns: 1fr;
  }

  .page-hero-grid {
    min-height: auto;
    padding-block: 54px;
  }

  .page-hero-media {
    max-width: 560px;
  }

  .side-card {
    position: static;
  }
}


/* ==========================================================
   NET3MAX CONTENT ACCORDION V2.1B
   ========================================================== */

/*
   Long medical content must remain available without
   overwhelming the visitor.

   One column + native HTML details/summary.
*/

.faq-content-grid {
  max-width: 980px;
  margin-inline: auto;
  grid-template-columns: 1fr;
  gap: 32px;
}

.content-body {
  line-height: 1.72;
}

.content-body > p:first-child {
  margin-top: 0;
}

.content-body p {
  max-width: 78ch;
}

.content-body h2,
.content-body h3,
.content-body h4 {
  max-width: 38ch;
}


/* ACCORDION */

.content-body details {
  margin: 14px 0;
  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 15px;

  background:
    var(--white);
}


.content-body summary {
  position: relative;

  cursor: pointer;

  list-style: none;

  padding:
    19px
    60px
    19px
    21px;

  color:
    var(--navy-900);

  background:
    var(--white);

  font-weight: 800;

  line-height: 1.35;
}


.content-body summary::-webkit-details-marker {
  display: none;
}


.content-body summary::after {
  content: "+";

  position: absolute;

  top: 50%;
  right: 18px;

  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  transform:
    translateY(-50%);

  border-radius: 50%;

  color:
    var(--blue-700);

  background:
    var(--blue-100);

  font-size: 1.15rem;

  font-weight: 850;
}


.content-body details[open] summary {
  color:
    var(--blue-700);

  background:
    var(--blue-50);

  border-bottom:
    1px solid
    var(--border);
}


.content-body details[open] summary::after {
  content: "−";
}


/*
   Inner slider content gets breathing room,
   but remains significantly narrower than an
   uncontrolled Joomla text wall.
*/

.content-body details > p,
.content-body details > ul,
.content-body details > ol,
.content-body details > h2,
.content-body details > h3,
.content-body details > h4,
.content-body details > blockquote,
.content-body details > table {
  margin-left: 22px;
  margin-right: 22px;
}


.content-body details > p:first-of-type,
.content-body details > h2:first-of-type,
.content-body details > h3:first-of-type {
  margin-top: 22px;
}


.content-body details > p:last-child,
.content-body details > ul:last-child,
.content-body details > ol:last-child {
  margin-bottom: 22px;
}


.content-body details + details {
  margin-top: 12px;
}


/*
   Tu Cirujano and FAQ must not become giant
   side-by-side text columns.
*/

.content-card {
  min-width: 0;
}


/* MOBILE */

@media (max-width: 820px) {

  .faq-content-grid {
    max-width: none;
  }

  .content-body summary {
    padding:
      17px
      53px
      17px
      17px;
  }

  .content-body details > p,
  .content-body details > ul,
  .content-body details > ol,
  .content-body details > h2,
  .content-body details > h3,
  .content-body details > h4 {
    margin-left: 17px;
    margin-right: 17px;
  }
}

/* ==========================================================
   NET3MAX V3.3 HERO AND MAP POLISH
   ========================================================== */

/*
   Header brand:
   smaller and calmer than previous treatment.
*/

.brand-panel {
  padding: 7px 11px;
  border-radius: 12px;
}

.brand-panel img {
  width: 184px;
  max-height: 58px;
  object-fit: contain;
}


/*
   Hero:
   one focal image, no floating identification card.
*/

.hero-photo-shell {
  width: min(100%, 455px);
}

.hero-photo {
  height: 555px;
  object-position: center 8%;
}


/*
   Map:
   full-width location block beneath contact information.
   No extra card text is added because the address already
   appears directly above it.
*/

.contact-map-section {
  margin-top: 28px;
}

.contact-map-frame {
  overflow: hidden;

  width: 100%;

  height: clamp(
    320px,
    34vw,
    430px
  );

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  background:
    var(--surface);

  box-shadow:
    var(--shadow-sm);
}

.contact-map-frame iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}


@media (max-width: 820px) {

  .brand-panel img {
    width: 158px;
  }

  .hero-photo {
    height: 475px;
  }

  .contact-map-section {
    margin-top: 20px;
  }

  .contact-map-frame {
    height: 330px;
  }
}


/* ==========================================================
   NET3MAX V4.1 FEATURED VISUAL CARDS
   ========================================================== */

.featured-media-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 24px;
}


.featured-media-card {
  overflow: hidden;

  display: flex;
  flex-direction: column;

  min-width: 0;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  color:
    inherit;

  background:
    var(--white);

  box-shadow:
    var(--shadow-sm);

  text-decoration:
    none;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.featured-media-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    var(--shadow);
}


.featured-media-frame {
  overflow: hidden;

  height: 205px;

  background:
    var(--blue-50);
}


.featured-media-img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .3s ease;
}


.featured-media-card:hover
.featured-media-img {
  transform:
    scale(1.025);
}


/*
   Existing source images contain legacy labels
   near their lower edge. The premium thumbnail
   intentionally crops those labels out.
*/

.featured-media-img--facial {
  object-position:
    center 22%;
}


.featured-media-img--body-left {
  object-position:
    32% 24%;
}


.featured-media-img--body-right {
  object-position:
    72% 24%;
}


.featured-media-content {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding:
    24px 25px 27px;
}


.featured-media-number {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  margin-bottom: 18px;

  border-radius: 12px;

  color:
    var(--white);

  background:
    linear-gradient(
      135deg,
      var(--blue-700),
      var(--navy-800)
    );

  font-size: .82rem;
  font-weight: 900;
}


.featured-media-content h3 {
  margin:
    0 0 9px;

  color:
    var(--navy-900);

  font-size:
    1.35rem;
}


.featured-media-content p {
  margin:
    0 0 22px;

  color:
    var(--muted);
}


.featured-media-link {
  margin-top:
    auto;

  color:
    var(--blue-700);

  font-weight:
    800;
}


/* ==========================================================
   ARTICLE FEATURE WITH REAL PHOTOGRAPH
   ========================================================== */

.article-feature-rich {
  overflow: hidden;

  display: grid;

  grid-template-columns:
    minmax(300px, .82fr)
    minmax(0, 1.18fr);

  min-height: 390px;

  border-radius:
    var(--radius-lg);

  color:
    var(--white);

  background:
    linear-gradient(
      135deg,
      var(--navy-950),
      var(--navy-800)
    );

  box-shadow:
    var(--shadow);

  text-decoration:
    none;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.article-feature-rich:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 26px 70px
    rgba(7,24,43,.18);
}


.article-feature-media {
  position: relative;

  overflow: hidden;

  min-height: 390px;
}


.article-feature-media::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(7,24,43,.05),
      rgba(7,24,43,.25)
    );
}


.article-feature-media img {
  width: 100%;
  height: 100%;

  min-height: 390px;

  object-fit: cover;

  object-position:
    center 20%;
}


.article-feature-content {
  align-self: center;

  padding:
    clamp(
      38px,
      6vw,
      70px
    );
}


.article-feature-content h2 {
  max-width: 620px;

  margin:
    0 0 18px;

  color:
    var(--white);

  font-size:
    clamp(
      2rem,
      4vw,
      3.25rem
    );

  line-height:
    1.06;
}


.article-feature-content p:not(.eyebrow) {
  max-width: 620px;

  color:
    #d8e7f4;
}


.article-feature-link {
  display: inline-block;

  margin-top: 16px;

  color:
    #b9e1fb;

  font-weight:
    850;
}


@media (max-width: 900px) {

  .featured-media-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .article-feature-rich {
    grid-template-columns:
      1fr;
  }

  .article-feature-media {
    min-height: 290px;
  }

  .article-feature-media img {
    min-height: 290px;
    height: 290px;
  }
}


@media (max-width: 620px) {

  .featured-media-grid {
    grid-template-columns:
      1fr;
  }

  .featured-media-frame {
    height: 220px;
  }

  .article-feature-content {
    padding:
      32px 25px 38px;
  }
}


/* ==========================================================
   NET3MAX V5.2 SEMANTIC PROCEDURE CARDS
   ========================================================== */

/*
   Category pages now use the original image belonging
   specifically to each procedure.

   Keep the layout visual but calm: image first,
   concise text second.
*/

.link-card {
  overflow: hidden;
  padding: 0;
}


.link-card-media {
  overflow: hidden;

  width: 100%;
  height: 205px;

  margin-bottom: 0;

  background:
    var(--blue-50);
}


.link-card-media img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform .28s ease;
}


.link-card:hover
.link-card-media img {
  transform:
    scale(1.025);
}


.link-card-kicker {
  margin:
    24px
    28px
    0;
}


.link-card h2 {
  margin:
    10px
    28px
    9px;
}


.link-card p {
  margin:
    0
    28px
    18px;
}


.link-card-arrow {
  margin:
    auto
    28px
    27px;
}


@media (max-width: 620px) {

  .link-card-media {
    height: 220px;
  }

}


/* ==========================================================
   NET3MAX V5.3 PROFESSIONAL CONTACT
   ========================================================== */

.contact-action-v53 {
  display: flex;
  align-items: center;
  gap: 13px;

  width: 100%;
  max-width: 390px;

  margin-top: 10px;
  padding: 11px 14px;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius: 12px;

  color: inherit;

  background:
    rgba(255,255,255,.10);

  text-decoration: none;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}


.contact-action-v53:hover {
  transform:
    translateY(-2px);

  background:
    rgba(255,255,255,.16);
}


.contact-action-icon-v53,
.contact-label-icon-v53 {
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border-radius: 11px;

  background:
    rgba(44,142,214,.17);
}


.contact-action-icon-v53 svg,
.contact-label-icon-v53 svg {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.contact-action-copy-v53 {
  min-width: 0;

  display: flex;
  flex-direction: column;

  line-height: 1.25;
}


.contact-action-copy-v53 strong {
  font-size: .9rem;
  font-weight: 800;
}


.contact-action-copy-v53 span {
  margin-top: 3px;

  font-size: .92rem;

  overflow-wrap: anywhere;
}


.contact-label-v53 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}


.contact-label-icon-v53 {
  display: inline-grid;

  width: 31px;
  height: 31px;

  vertical-align: middle;
}


.contact-label-icon-v53 svg {
  width: 18px;
  height: 18px;
}


.contact-address-v53 {
  color: inherit;

  text-decoration:
    underline;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    4px;

  text-decoration-color:
    rgba(21,94,155,.35);
}


.contact-address-v53:hover {
  text-decoration-color:
    currentColor;
}


@media (max-width: 620px) {

  .contact-action-v53 {
    max-width: none;
  }

}


/* ==========================================================
   NET3MAX V5.3B FOOTER EMAIL
   ========================================================== */

.footer-email-v53 {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.footer-email-v53:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================
   NET3MAX V5.4 CONTACT ICON SYSTEM
   ========================================================== */


/* ----------------------------------------------------------
   TOPBAR
   ---------------------------------------------------------- */

.topbar-inner-v54 {
  min-height: 42px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
}


.topbar-contact-v54 {
  display: flex;
  align-items: center;

  gap: 24px;
}


.topbar-item-v54 {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  min-width: 0;

  color: inherit;

  text-decoration: none;

  font-size: .78rem;

  white-space: nowrap;
}


a.topbar-item-v54:hover {
  opacity: .82;
}


.topbar-icon-v54 {
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  width: 25px;
  height: 25px;

  border-radius: 8px;

  background:
    rgba(44,142,214,.15);
}


.topbar-icon-v54 svg {
  width: 15px;
  height: 15px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.topbar-item-copy-v54 {
  min-width: 0;

  display: flex;
  align-items: baseline;

  gap: 5px;
}


.topbar-item-label-v54 {
  font-weight: 800;
}


.topbar-location-v54 {
  justify-content: flex-end;
}


/* ----------------------------------------------------------
   MAIN CONTACT — HOUR / FACEBOOK
   ---------------------------------------------------------- */

.contact-clock-icon-v54,
.contact-facebook-icon-v54 {
  color:
    var(--blue-700);
}


.facebook-svg-v54 {
  fill: currentColor !important;

  stroke: none !important;
}


.facebook-svg-v54 path {
  fill: currentColor;

  stroke: none;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.footer-contact-v54 {
  display: flex;
  flex-direction: column;

  gap: 15px;

  margin-top: 2px;
}


.footer-contact-item-v54 {
  display: flex;
  align-items: center;

  gap: 11px;

  min-width: 0;

  color: inherit;

  text-decoration: none;
}


a.footer-contact-item-v54:hover {
  opacity: .82;
}


.footer-contact-icon-v54 {
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  border-radius: 10px;

  color:
    #bfe4fb;

  background:
    rgba(44,142,214,.13);
}


.footer-contact-icon-v54 svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.footer-contact-copy-v54 {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;

  line-height: 1.25;
}


.footer-contact-copy-v54 strong {
  font-size: .78rem;

  color:
    #d7ebf8;
}


.footer-contact-copy-v54 span {
  font-size: .88rem;

  overflow-wrap: anywhere;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 980px) {

  .topbar-inner-v54 {
    gap: 14px;
  }


  .topbar-contact-v54 {
    gap: 15px;
  }


  .topbar-item-v54 {
    font-size: .72rem;
  }


  .topbar-item-copy-v54 {
    gap: 3px;
  }

}


@media (max-width: 760px) {

  .topbar-inner-v54 {
    padding-top: 7px;
    padding-bottom: 7px;

    flex-wrap: wrap;

    justify-content: center;
  }


  .topbar-contact-v54 {
    width: 100%;

    flex-wrap: wrap;

    justify-content: center;
  }


  .topbar-location {
    width: 100%;

    display: flex;

    justify-content: center;
  }


  .topbar-location-v54 {
    justify-content: center;
  }

}


@media (max-width: 520px) {

  .topbar-contact-v54 {
    gap:
      9px 14px;
  }


  .topbar-item-v54 {
    white-space: normal;
  }


  .topbar-item-copy-v54 {
    flex-direction: column;

    align-items: flex-start;

    gap: 0;
  }


  .topbar-icon-v54 {
    width: 23px;
    height: 23px;
  }


  .footer-contact-item-v54 {
    align-items: flex-start;
  }

}


/* ==========================================================
   NET3MAX V5.5 FINAL HERO AND TOPBAR
   ========================================================== */


/* ----------------------------------------------------------
   TOPBAR:
   icon + value only.
   Accessible names remain in aria-label.
   ---------------------------------------------------------- */

.topbar
.topbar-item-label-v54 {
  display: none;
}


.topbar
.topbar-item-copy-v54 {
  gap: 0;
}


/* ----------------------------------------------------------
   HERO COPY SLIDER
   Same physician image and CTAs remain unchanged.
   CSS only — zero JavaScript.
   ---------------------------------------------------------- */

.hero-copy-slider-v55 {
  display: grid;

  width: 100%;
  max-width: 680px;
}


.hero-copy-slide-v55 {
  grid-area: 1 / 1;

  align-self: start;

  opacity: 0;

  transform:
    translateY(8px);
}


.hero-copy-slide-v55 h1,
.hero-copy-slide-v55 h2 {
  margin:
    0 0 24px;

  max-width:
    650px;

  color:
    #fff;

  font-size:
    clamp(
      3.15rem,
      5.1vw,
      5.35rem
    );

  line-height:
    .98;

  letter-spacing:
    -.045em;

  font-weight:
    850;
}


.hero-copy-slide-v55 p {
  max-width:
    630px;

  margin:
    0 0 30px;

  color:
    #e5eef7;

  font-size:
    clamp(
      1.04rem,
      1.4vw,
      1.22rem
    );

  line-height:
    1.65;
}


.hero-copy-slide-one-v55 {
  opacity: 1;

  transform:
    translateY(0);

  animation:
    net3maxHeroSlideOneV55
    12s
    ease-in-out
    infinite;
}


.hero-copy-slide-two-v55 {
  animation:
    net3maxHeroSlideTwoV55
    12s
    ease-in-out
    infinite;
}


@keyframes net3maxHeroSlideOneV55 {

  0%,
  42% {
    opacity: 1;

    transform:
      translateY(0);
  }


  48%,
  92% {
    opacity: 0;

    transform:
      translateY(8px);
  }


  98%,
  100% {
    opacity: 1;

    transform:
      translateY(0);
  }
}


@keyframes net3maxHeroSlideTwoV55 {

  0%,
  42% {
    opacity: 0;

    transform:
      translateY(8px);
  }


  48%,
  92% {
    opacity: 1;

    transform:
      translateY(0);
  }


  98%,
  100% {
    opacity: 0;

    transform:
      translateY(8px);
  }
}


/* Accessibility: if motion is reduced,
   show both messages statically. */

@media (prefers-reduced-motion: reduce) {

  .hero-copy-slider-v55 {
    display: block;
  }


  .hero-copy-slide-v55 {
    opacity: 1;

    transform: none;

    animation: none;
  }


  .hero-copy-slide-two-v55 {
    margin-top: 30px;
  }

}


@media (max-width: 760px) {

  .hero-copy-slide-v55 h1,
  .hero-copy-slide-v55 h2 {
    font-size:
      clamp(
        2.65rem,
        12vw,
        4.1rem
      );
  }


  .hero-copy-slide-v55 p {
    font-size:
      1.02rem;
  }

}


/* ==========================================================
   NET3MAX V5.6 MANUAL HERO CONTROLS
   ========================================================== */


/* ----------------------------------------------------------
   TOPBAR FACEBOOK — ICON ONLY
   ---------------------------------------------------------- */

.topbar-facebook-v56 {
  flex: 0 0 auto;

  padding: 0;

  text-decoration: none;
}


.topbar-facebook-v56
.topbar-icon-v54 {
  margin: 0;
}


.topbar-facebook-svg-v56 {
  fill:
    currentColor !important;

  stroke:
    none !important;
}


.topbar-facebook-svg-v56 path {
  fill:
    currentColor;

  stroke:
    none;
}


/* ----------------------------------------------------------
   HERO SLIDER — MANUAL / ZERO JAVASCRIPT
   ---------------------------------------------------------- */

.hero-copy-slider-v55 {
  position: relative;
}


/*
   Keep native checkbox keyboard-operable,
   but visually hide it.
*/

.hero-slide-toggle-v56 {
  position: absolute;

  width: 1px;
  height: 1px;

  margin: -1px;
  padding: 0;

  overflow: hidden;

  clip:
    rect(0 0 0 0);

  clip-path:
    inset(50%);

  white-space: nowrap;

  border: 0;
}


/*
   Disable the old automatic V5.5 animations.
   Visitor now controls the slides.
*/

.hero-copy-slide-one-v55,
.hero-copy-slide-two-v55 {
  animation:
    none !important;

  transition:
    opacity .35s ease,
    transform .35s ease;
}


/* SLIDE 1 */

.hero-slide-toggle-v56:not(:checked)
~
.hero-copy-slide-one-v55 {
  opacity:
    1 !important;

  transform:
    translateY(0) !important;

  pointer-events:
    auto;
}


.hero-slide-toggle-v56:not(:checked)
~
.hero-copy-slide-two-v55 {
  opacity:
    0 !important;

  transform:
    translateY(8px) !important;

  pointer-events:
    none;
}


/* SLIDE 2 */

.hero-slide-toggle-v56:checked
~
.hero-copy-slide-one-v55 {
  opacity:
    0 !important;

  transform:
    translateY(8px) !important;

  pointer-events:
    none;
}


.hero-slide-toggle-v56:checked
~
.hero-copy-slide-two-v55 {
  opacity:
    1 !important;

  transform:
    translateY(0) !important;

  pointer-events:
    auto;
}


/* ----------------------------------------------------------
   HARMONIZE SECONDARY HERO TEXT
   ---------------------------------------------------------- */

.hero-copy-slide-v55 p {
  max-width:
    690px;

  font-size:
    clamp(
      1.32rem,
      1.65vw,
      1.56rem
    ) !important;

  line-height:
    1.48;

  font-weight:
    500;

  letter-spacing:
    -.01em;
}


/* ----------------------------------------------------------
   LEFT / RIGHT CONTROLS
   ---------------------------------------------------------- */

.hero-slider-arrow-v56 {
  position:
    absolute;

  top:
    47%;

  z-index:
    8;

  display:
    grid;

  place-items:
    center;

  width:
    46px;

  height:
    46px;

  border:
    1px solid
    rgba(255,255,255,.36);

  border-radius:
    50%;

  color:
    #fff;

  background:
    rgba(7,24,43,.36);

  box-shadow:
    0 8px 28px
    rgba(0,0,0,.14);

  cursor:
    pointer;

  user-select:
    none;

  transform:
    translateY(-50%);

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}


.hero-slider-arrow-v56:hover {
  background:
    rgba(44,142,214,.72);

  border-color:
    rgba(255,255,255,.7);

  transform:
    translateY(-50%)
    scale(1.06);
}


.hero-slider-arrow-left-v56 {
  left:
    -62px;
}


.hero-slider-arrow-right-v56 {
  right:
    -62px;
}


.hero-slider-arrow-v56 svg {
  width:
    25px;

  height:
    25px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    2;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/*
   Keyboard users can tab to the native checkbox.
   Show the controls as focused when that occurs.
*/

.hero-slide-toggle-v56:focus-visible
~
.hero-slider-arrow-v56 {
  outline:
    3px solid
    rgba(111,196,255,.72);

  outline-offset:
    3px;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 920px) {

  .hero-slider-arrow-left-v56 {
    left:
      -45px;
  }


  .hero-slider-arrow-right-v56 {
    right:
      -45px;
  }

}


@media (max-width: 760px) {

  .hero-copy-slide-v55 p {
    font-size:
      1.18rem !important;

    line-height:
      1.5;
  }


  .hero-slider-arrow-v56 {
    width:
      40px;

    height:
      40px;

    top:
      48%;
  }


  .hero-slider-arrow-left-v56 {
    left:
      -10px;
  }


  .hero-slider-arrow-right-v56 {
    right:
      -10px;
  }


  .hero-slider-arrow-v56 svg {
    width:
      21px;

    height:
      21px;
  }

}


/* ==========================================================
   NET3MAX V5.7 COMPACT HERO
   ========================================================== */


/*
   Desktop only:
   preserve the approved typography, photo, arrows and CTAs,
   while reducing unnecessary vertical height.
*/

@media (min-width: 821px) {

  .hero-compact-v57 {
    min-height:
      0 !important;

    padding-top:
      44px !important;

    padding-bottom:
      44px !important;
  }


  .hero-compact-v57
  .hero-photo {
    height:
      500px !important;
  }


  .hero-compact-v57
  .hero-copy-slider-v55 {
    margin-top:
      0;
  }

}


/* ==========================================================
   NET3MAX V5.8 TRUE COMPACT HERO
   ========================================================== */


/*
   V5.7 reduced the photo but the internal hero layout
   continued reserving excessive vertical space.

   V5.8 constrains the COMPLETE desktop hero instead.
*/


@media (min-width: 821px) {

  section.hero-compact-v57 {

    height:
      520px !important;

    min-height:
      520px !important;

    max-height:
      520px !important;

    padding-top:
      22px !important;

    padding-bottom:
      22px !important;

    overflow:
      hidden;
  }


  /*
     Collapse inherited minimum heights from
     the previous premium hero layout.
  */

  section.hero-compact-v57
  .hero-grid,

  section.hero-compact-v57
  .hero-inner,

  section.hero-compact-v57
  .hero-copy,

  section.hero-compact-v57
  .hero-visual {

    min-height:
      0 !important;

    height:
      auto !important;
  }


  section.hero-compact-v57
  .hero-grid {

    height:
      100% !important;

    align-items:
      center !important;
  }


  /*
     Left content should use its natural height.
  */

  section.hero-compact-v57
  .hero-copy {

    align-self:
      center !important;

    justify-content:
      center !important;
  }


  section.hero-compact-v57
  .hero-copy-slider-v55 {

    margin-top:
      0 !important;

    margin-bottom:
      0 !important;
  }


  /*
     The previous visual gap between the subtitle
     and buttons is intentionally reduced.
  */

  section.hero-compact-v57
  .hero-actions {

    margin-top:
      28px !important;

    padding-top:
      0 !important;
  }


  /*
     Physician visual remains prominent,
     but no longer dictates a 600+ px hero.
  */

  section.hero-compact-v57
  .hero-visual {

    align-self:
      center !important;
  }


  section.hero-compact-v57
  .hero-photo {

    height:
      430px !important;

    max-height:
      430px !important;

    object-fit:
      contain !important;

    object-position:
      center bottom !important;
  }


  /*
     Slider arrows remain vertically centered
     relative to the text block.
  */

  section.hero-compact-v57
  .hero-slider-arrow-v56 {

    top:
      50% !important;
  }

}


/* Slightly taller intermediate desktop/tablet layout */

@media (min-width: 821px) and (max-width: 1050px) {

  section.hero-compact-v57 {

    height:
      540px !important;

    min-height:
      540px !important;

    max-height:
      540px !important;
  }


  section.hero-compact-v57
  .hero-photo {

    height:
      420px !important;

    max-height:
      420px !important;
  }

}


/* ==========================================================
   NET3MAX V5.9 MOBILE OPTIMIZATION
   ========================================================== */


/* ----------------------------------------------------------
   TABLET / MOBILE
   ---------------------------------------------------------- */

@media (max-width: 820px) {


  /* ========================================================
     TOPBAR
     ======================================================== */

  .topbar-inner-v54 {
    display:
      grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      7px !important;

    padding-top:
      7px !important;

    padding-bottom:
      7px !important;
  }


  .topbar-contact-v54 {
    width:
      100% !important;

    display:
      grid !important;

    grid-template-columns:
      auto minmax(0, 1fr) auto !important;

    align-items:
      center !important;

    justify-content:
      stretch !important;

    gap:
      9px !important;
  }


  .topbar-contact-v54
  .topbar-item-v54 {
    min-width:
      0;

    margin:
      0 !important;

    font-size:
      .72rem !important;
  }


  /*
     E-mail needs available width rather than
     forcing Facebook to another row.
  */

  .topbar-contact-v54
  .topbar-item-v54:nth-child(2) {

    min-width:
      0;

    overflow:
      hidden;
  }


  .topbar-contact-v54
  .topbar-item-v54:nth-child(2)
  .topbar-item-copy-v54 {

    min-width:
      0;

    font-size:
      clamp(
        .62rem,
        2.3vw,
        .72rem
      ) !important;

    white-space:
      nowrap;

    overflow:
      hidden;

    text-overflow:
      ellipsis;
  }


  .topbar-facebook-v56 {
    justify-self:
      end;
  }


  .topbar-icon-v54 {
    width:
      22px !important;

    height:
      22px !important;

    border-radius:
      7px !important;
  }


  .topbar-icon-v54 svg {
    width:
      14px !important;

    height:
      14px !important;
  }


  .topbar-location {
    width:
      100% !important;

    display:
      flex !important;

    justify-content:
      center !important;
  }


  .topbar-location-v54 {
    font-size:
      .72rem !important;

    justify-content:
      center !important;
  }



  /* ========================================================
     MOBILE HEADER
     ======================================================== */

  .site-header
  .header-inner {

    min-height:
      74px !important;

    padding-top:
      7px !important;

    padding-bottom:
      7px !important;
  }


  .site-header
  .brand-panel {

    padding:
      7px 11px !important;

    border-radius:
      14px !important;
  }


  .site-header
  .brand img {

    width:
      min(
        205px,
        58vw
      ) !important;

    height:
      auto !important;
  }


  .mobile-nav
  summary {

    min-height:
      46px;

    padding:
      9px 13px !important;

    font-size:
      1rem !important;

    border-radius:
      13px !important;
  }



  /* ========================================================
     HERO — MOBILE NATURAL HEIGHT
     ======================================================== */

  section.hero-compact-v57 {

    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    padding-top:
      42px !important;

    padding-bottom:
      28px !important;

    overflow:
      hidden !important;
  }


  section.hero-compact-v57
  .hero-inner {

    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      24px !important;

    min-height:
      0 !important;
  }


  section.hero-compact-v57
  .hero-copy {

    min-height:
      0 !important;

    width:
      100% !important;
  }


  section.hero-compact-v57
  .section-label {

    margin-bottom:
      24px !important;

    font-size:
      .82rem !important;

    line-height:
      1.25;

    letter-spacing:
      .13em;
  }



  /* ========================================================
     SLIDER MOBILE GRID

       title/subtitle
       ↓
       <         >

     Flechas ya NO se superponen al texto.
     ======================================================== */

  section.hero-compact-v57
  .hero-copy-slider-v55 {

    display:
      grid !important;

    grid-template-columns:
      46px 1fr 46px !important;

    grid-template-rows:
      auto 46px !important;

    column-gap:
      10px !important;

    row-gap:
      15px !important;

    width:
      100% !important;

    max-width:
      none !important;

    margin:
      0 !important;
  }


  section.hero-compact-v57
  .hero-copy-slide-v55 {

    grid-column:
      1 / -1 !important;

    grid-row:
      1 !important;

    width:
      100% !important;
  }


  section.hero-compact-v57
  .hero-copy-slide-v55 h1,

  section.hero-compact-v57
  .hero-copy-slide-v55 h2 {

    max-width:
      none !important;

    margin:
      0 0 19px !important;

    font-size:
      clamp(
        2.75rem,
        12vw,
        3.55rem
      ) !important;

    line-height:
      .99 !important;

    letter-spacing:
      -.045em !important;
  }


  section.hero-compact-v57
  .hero-copy-slide-v55 p {

    max-width:
      none !important;

    margin:
      0 !important;

    font-size:
      clamp(
        1.04rem,
        4.7vw,
        1.24rem
      ) !important;

    line-height:
      1.48 !important;

    font-weight:
      450 !important;
  }


  section.hero-compact-v57
  .hero-slider-arrow-v56 {

    position:
      static !important;

    top:
      auto !important;

    left:
      auto !important;

    right:
      auto !important;

    bottom:
      auto !important;

    width:
      42px !important;

    height:
      42px !important;

    margin:
      0 !important;

    transform:
      none !important;
  }


  section.hero-compact-v57
  .hero-slider-arrow-left-v56 {

    grid-column:
      1 !important;

    grid-row:
      2 !important;

    justify-self:
      start !important;
  }


  section.hero-compact-v57
  .hero-slider-arrow-right-v56 {

    grid-column:
      3 !important;

    grid-row:
      2 !important;

    justify-self:
      end !important;
  }


  section.hero-compact-v57
  .hero-slider-arrow-v56:hover {

    transform:
      none !important;
  }



  /* ========================================================
     HERO CTA BUTTONS
     ======================================================== */

  section.hero-compact-v57
  .hero-actions {

    display:
      grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      11px !important;

    margin-top:
      24px !important;

    padding-top:
      0 !important;
  }


  section.hero-compact-v57
  .hero-actions
  .btn {

    width:
      100% !important;

    min-height:
      54px !important;

    padding:
      13px 18px !important;

    font-size:
      1rem !important;

    border-radius:
      12px !important;
  }



  /* ========================================================
     PHYSICIAN VISUAL
     ======================================================== */

  section.hero-compact-v57
  .hero-visual {

    min-height:
      0 !important;

    margin:
      0 auto !important;

    width:
      100% !important;

    max-width:
      315px !important;
  }


  section.hero-compact-v57
  .hero-photo-shell {

    width:
      100% !important;

    max-width:
      315px !important;

    margin:
      0 auto !important;

    border-radius:
      20px !important;

    overflow:
      hidden !important;
  }


  section.hero-compact-v57
  .hero-photo {

    width:
      100% !important;

    height:
      310px !important;

    max-height:
      310px !important;

    object-fit:
      contain !important;

    object-position:
      center bottom !important;
  }

}



/* ----------------------------------------------------------
   SMALL MOBILE
   ---------------------------------------------------------- */

@media (max-width: 560px) {


  section.hero-compact-v57 {

    padding-top:
      34px !important;

    padding-bottom:
      22px !important;
  }


  section.hero-compact-v57
  .hero-inner {

    gap:
      18px !important;
  }


  section.hero-compact-v57
  .section-label {

    margin-bottom:
      19px !important;

    font-size:
      .75rem !important;
  }


  section.hero-compact-v57
  .hero-copy-slide-v55 h1,

  section.hero-compact-v57
  .hero-copy-slide-v55 h2 {

    font-size:
      clamp(
        2.45rem,
        11.3vw,
        3rem
      ) !important;

    margin-bottom:
      17px !important;
  }


  section.hero-compact-v57
  .hero-copy-slide-v55 p {

    font-size:
      1.08rem !important;

    line-height:
      1.5 !important;
  }


  section.hero-compact-v57
  .hero-copy-slider-v55 {

    grid-template-columns:
      42px 1fr 42px !important;

    grid-template-rows:
      auto 42px !important;

    row-gap:
      12px !important;
  }


  section.hero-compact-v57
  .hero-slider-arrow-v56 {

    width:
      40px !important;

    height:
      40px !important;
  }


  section.hero-compact-v57
  .hero-actions {

    margin-top:
      20px !important;
  }


  /*
     Keep Dr. Percy visible but considerably smaller.
  */

  section.hero-compact-v57
  .hero-visual,

  section.hero-compact-v57
  .hero-photo-shell {

    max-width:
      260px !important;
  }


  section.hero-compact-v57
  .hero-photo {

    height:
      255px !important;

    max-height:
      255px !important;
  }

}



/* ----------------------------------------------------------
   VERY SMALL MOBILE
   ---------------------------------------------------------- */

@media (max-width: 380px) {


  .topbar-contact-v54 {

    gap:
      6px !important;
  }


  .topbar-contact-v54
  .topbar-item-v54 {

    font-size:
      .66rem !important;
  }


  .topbar-contact-v54
  .topbar-item-v54:nth-child(2)
  .topbar-item-copy-v54 {

    font-size:
      .60rem !important;
  }


  section.hero-compact-v57
  .hero-copy-slide-v55 h1,

  section.hero-compact-v57
  .hero-copy-slide-v55 h2 {

    font-size:
      2.35rem !important;
  }


  section.hero-compact-v57
  .hero-copy-slide-v55 p {

    font-size:
      1rem !important;
  }

}



/* ==========================================================
   NET3MAX V6.0B PHOTO COVER + MOBILE EMAIL HIDE
   ========================================================== */


/* ----------------------------------------------------------
   DESKTOP

   Keep the approved hero dimensions.
   Change only image presentation:
   fill the complete curved rectangle and crop the
   lower embedded caption from the original raster.
   ---------------------------------------------------------- */

@media (min-width: 821px) {

  section.hero-compact-v57
  .hero-photo-shell {

    width:
      100% !important;

    height:
      430px !important;

    overflow:
      hidden !important;

    border-radius:
      28px !important;
  }


  section.hero-compact-v57
  .hero-photo {

    display:
      block !important;

    width:
      100% !important;

    height:
      100% !important;

    max-width:
      none !important;

    max-height:
      none !important;

    object-fit:
      cover !important;

    /*
       Preserve head/upper torso and discard
       the lower embedded caption first.
    */

    object-position:
      center top !important;

    margin:
      0 !important;
  }

}


/* ----------------------------------------------------------
   MOBILE TOPBAR

   Hide ONLY the topbar e-mail.
   The same e-mail remains available in Contact and Footer.

   WhatsApp + Facebook remain on row 1.
   Location remains centered below.
   ---------------------------------------------------------- */

@media (max-width: 820px) {

  .topbar-contact-v54
  > a.topbar-item-v54[
    href^="mailto:"
  ] {

    display:
      none !important;
  }


  .topbar-contact-v54 {

    display:
      grid !important;

    grid-template-columns:
      auto auto !important;

    width:
      min(100%, 330px) !important;

    margin:
      0 auto !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    gap:
      14px !important;
  }


  .topbar-contact-v54
  > a:first-child {

    justify-self:
      start !important;
  }


  .topbar-contact-v54
  .topbar-facebook-v56 {

    justify-self:
      end !important;
  }


  .topbar-location {

    width:
      100% !important;

    margin:
      0 !important;

    display:
      flex !important;

    justify-content:
      center !important;
  }


  /*
     Mobile physician image:
     overwrite V5.9 object-fit:contain.
  */

  section.hero-compact-v57
  .hero-photo-shell {

    width:
      100% !important;

    height:
      265px !important;

    overflow:
      hidden !important;

    border-radius:
      20px !important;
  }


  section.hero-compact-v57
  .hero-photo {

    display:
      block !important;

    width:
      100% !important;

    height:
      100% !important;

    max-width:
      none !important;

    max-height:
      none !important;

    object-fit:
      cover !important;

    object-position:
      center top !important;

    margin:
      0 !important;
  }

}


/* ----------------------------------------------------------
   SMALL MOBILE
   ---------------------------------------------------------- */

@media (max-width: 560px) {

  section.hero-compact-v57
  .hero-photo-shell {

    height:
      225px !important;
  }


  section.hero-compact-v57
  .hero-photo {

    height:
      100% !important;

    max-height:
      none !important;

    object-fit:
      cover !important;

    object-position:
      center top !important;
  }

}



/* ==========================================================
   NET3MAX V6.1 MOBILE SINGLE-LINE TOPBAR + COMPACT HERO TOP
   ========================================================== */

@media (max-width: 820px) {


  /* ========================================================
     TOPBAR — EXACTLY ONE ROW
     ======================================================== */

  .topbar-inner-v54 {

    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    width:
      100% !important;

    min-height:
      38px !important;

    gap:
      7px !important;

    padding-top:
      5px !important;

    padding-bottom:
      5px !important;
  }


  /*
     Mobile email remains hidden from V6.0B.
     Group now contains WhatsApp + Facebook only.
  */

  .topbar-contact-v54 {

    flex:
      0 1 auto !important;

    width:
      auto !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    align-items:
      center !important;

    justify-content:
      flex-start !important;

    gap:
      9px !important;
  }


  .topbar-contact-v54
  > a.topbar-item-v54[
    href^="mailto:"
  ] {

    display:
      none !important;
  }


  .topbar-contact-v54
  > a:first-child {

    flex:
      0 0 auto !important;

    justify-self:
      auto !important;
  }


  .topbar-facebook-v56 {

    flex:
      0 0 auto !important;

    justify-self:
      auto !important;
  }


  /*
     Location joins THE SAME ROW.
  */

  .topbar-location {

    flex:
      0 0 auto !important;

    width:
      auto !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      flex-end !important;
  }


  .topbar-location-v54 {

    display:
      inline-flex !important;

    flex-direction:
      row !important;

    align-items:
      center !important;

    justify-content:
      flex-end !important;

    gap:
      5px !important;

    margin:
      0 !important;

    white-space:
      nowrap !important;
  }


  /*
     Slightly smaller components are enough
     to fit a normal 360–430px phone cleanly.
  */

  .topbar-item-v54,
  .topbar-location-v54 {

    font-size:
      .68rem !important;

    line-height:
      1.1 !important;
  }


  .topbar-icon-v54 {

    width:
      21px !important;

    height:
      21px !important;

    border-radius:
      7px !important;
  }


  .topbar-icon-v54 svg {

    width:
      13px !important;

    height:
      13px !important;
  }



  /* ========================================================
     HERO — REMOVE EXCESSIVE EMPTY SPACE ABOVE CONTENT
     ======================================================== */

  section.hero-compact-v57 {

    padding-top:
      18px !important;

    padding-bottom:
      22px !important;

    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;
  }


  /*
     Several historical premium rules may target either
     hero-grid or hero-inner. Reset both safely on mobile.
  */

  section.hero-compact-v57
  .hero-grid,

  section.hero-compact-v57
  .hero-inner {

    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    margin-top:
      0 !important;

    padding-top:
      0 !important;

    align-items:
      start !important;

    align-content:
      start !important;
  }


  section.hero-compact-v57
  .hero-copy {

    align-self:
      start !important;

    justify-self:
      stretch !important;

    min-height:
      0 !important;

    margin-top:
      0 !important;

    padding-top:
      0 !important;
  }


  /*
     CIRUGÍA PLÁSTICA · LIMA should appear
     shortly after the hero begins.
  */

  section.hero-compact-v57
  .section-label {

    margin-top:
      0 !important;

    margin-bottom:
      18px !important;

    padding-top:
      0 !important;
  }


  section.hero-compact-v57
  .hero-copy-slider-v55 {

    margin-top:
      0 !important;

    padding-top:
      0 !important;
  }

}


/* ==========================================================
   NARROW PHONES
   ========================================================== */

@media (max-width: 390px) {

  .topbar-inner-v54 {

    gap:
      5px !important;

    padding-left:
      10px !important;

    padding-right:
      10px !important;
  }


  .topbar-contact-v54 {

    gap:
      6px !important;
  }


  .topbar-item-v54,
  .topbar-location-v54 {

    font-size:
      .62rem !important;
  }


  .topbar-icon-v54 {

    width:
      19px !important;

    height:
      19px !important;
  }


  .topbar-icon-v54 svg {

    width:
      12px !important;

    height:
      12px !important;
  }


  section.hero-compact-v57 {

    padding-top:
      14px !important;
  }

}