:root {
  --ink: #17282a;
  --muted: #617173;
  --line: #d7e2e0;
  --champagne: #edf5f4;
  --ivory: #f5f8f7;
  --gold: #b79251;
  --rose: #a77770;
  --teal: #078e98;
  --blue: #086d75;
  --white: #ffffff;
  --shadow: 0 22px 58px rgba(28, 62, 64, .12);
}

body {
  color: var(--ink);
  background: var(--ivory);
  font-family: "Segoe UI", Arial, sans-serif;
}

h1,
h2,
h3,
.collection strong,
.empty-category strong,
.footer-brand strong {
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 300;
}

.topbar {
  min-height: 76px;
  padding: 10px clamp(18px, 5vw, 72px);
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.brand-lockup img { width: 170px; }
.language-switch { border-color: var(--line); background: #fff; }
.lang-button { min-height: 40px; color: var(--muted); border-color: var(--line); }
.lang-button.active { background: var(--blue); }
.menu-toggle { min-height: 42px; color: var(--blue); background: #fff; border-color: var(--line); }
.site-menu { background: rgba(255,255,255,.98); border-color: var(--line); box-shadow: var(--shadow); }
.site-menu a:hover { color: var(--blue); background: var(--champagne); }

.hero {
  display: block;
  min-height: min(760px, calc(100svh - 76px));
  padding: clamp(60px, 8vw, 120px) clamp(24px, 7vw, 110px) 145px;
  background: #f3f8f7 url("assets/clinical-products-hero-v2.webp") center / cover no-repeat;
}

.hero-bg { display: none; }
.cover-logos { display: none; }

.hero-copy {
  position: relative;
  z-index: 3;
  width: min(380px, 30vw);
  margin-left: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hero-copy::before { display: none; }

.eyebrow {
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.hero h1 {
  max-width: 380px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(50px, 4.45vw, 66px);
  font-weight: 300;
  line-height: .98;
}

.hero h1 span { color: var(--teal); font-weight: 600; }
.hero .subline { display: none; }

.hero .intro {
  max-width: 345px;
  margin: 27px 0 32px;
  color: #4e5f60;
  font-size: 15px;
  line-height: 1.7;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button { min-height: 50px; padding: 0 22px; border-color: var(--blue); font-size: 10px; letter-spacing: .04em; }
.button.primary { color: #fff; background: var(--blue); box-shadow: none; }
.button.secondary { color: var(--blue); background: rgba(255,255,255,.76); }
.hero-scroll { display: none; }

.clinical-note {
  position: absolute;
  z-index: 4;
  right: auto;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 18px;
  width: min(760px, 56vw);
  min-height: 102px;
  padding: 18px clamp(24px, 4vw, 62px);
  color: #fff;
  background: rgba(8,109,117,.96);
}

.clinical-note > span { color: #b8dedc; font-size: 25px; font-weight: 300; }
.clinical-note div { display: grid; gap: 5px; }
.clinical-note strong { font-size: 12px; text-transform: uppercase; }
.clinical-note small { color: #cfe6e4; font-size: 10px; }

.brand-section {
  background: #fff;
  border-color: var(--line);
}

.brand-panel { min-height: 340px; padding: clamp(40px, 6vw, 82px); }
.brand-panel + .brand-panel { border-color: var(--line); }
.brand-panel img { height: 50px; margin-bottom: 32px; }
.brand-panel h2 { max-width: 520px; color: var(--ink); font-size: clamp(34px, 4vw, 54px); line-height: 1.04; }
.brand-panel p { color: var(--muted); }
.brand-panel span { color: #876727; letter-spacing: .08em; }
.miprimera-panel span { color: #006f77; }

.ingredient-guide {
  scroll-margin-top: 88px;
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(420px, 1.22fr);
  gap: clamp(48px, 7vw, 112px);
  padding: clamp(70px, 8vw, 112px) clamp(18px, 7vw, 112px);
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.ingredient-guide-heading {
  align-self: start;
  position: sticky;
  top: 108px;
}

.ingredient-guide-heading h2 {
  max-width: 520px;
  margin: 10px 0 24px;
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: 0;
}

.ingredient-guide-heading > #ingredientGuideIntro {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.ingredient-guide-audit {
  max-width: 480px;
  margin: 28px 0 0;
  padding: 20px 0 0;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.7;
}

.ingredient-guide-button {
  display: inline-grid;
  grid-template-columns: 1fr 28px;
  align-items: center;
  gap: 18px;
  min-width: 230px;
  min-height: 54px;
  margin-top: 28px;
  padding: 0 18px 0 22px;
  color: #fff;
  background: var(--blue);
  text-decoration: none;
}

.ingredient-guide-button span { font-size: 11px; font-weight: 800; text-transform: uppercase; }
.ingredient-guide-button i,
.ingredient-feature i { position: relative; width: 22px; height: 22px; }
.ingredient-guide-button i::before,
.ingredient-feature i::before { content: ""; position: absolute; top: 10px; left: 2px; width: 15px; height: 1px; background: currentColor; }
.ingredient-guide-button i::after,
.ingredient-feature i::after { content: ""; position: absolute; top: 7px; right: 4px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

.ingredient-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.ingredient-feature {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  gap: 14px;
  min-height: 172px;
  padding: 28px 22px;
  color: var(--ink);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background .2s ease;
}

.ingredient-feature:nth-child(2n) { border-right: 0; }
.ingredient-feature:hover { background: var(--mist); }
.ingredient-feature > span { color: var(--teal); font-size: 10px; font-weight: 800; }
.ingredient-feature div { display: grid; align-content: start; gap: 9px; }
.ingredient-feature small { color: var(--gold); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.ingredient-feature strong { font-size: 20px; font-weight: 500; line-height: 1.25; }
.ingredient-feature p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.ingredient-feature i { align-self: center; color: var(--teal); }

.ingredient-list { border-top: 1px solid var(--line); }
.ingredient-item { border-bottom: 1px solid var(--line); }

.ingredient-item summary {
  list-style: none;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  cursor: pointer;
}

.ingredient-item summary::-webkit-details-marker { display: none; }
.ingredient-item summary span { color: var(--teal); font-size: 11px; font-weight: 700; }
.ingredient-item summary strong { color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.35; }

.ingredient-item summary i {
  position: relative;
  width: 22px;
  height: 22px;
}

.ingredient-item summary i::before,
.ingredient-item summary i::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 4px;
  width: 14px;
  height: 1px;
  background: var(--blue);
  transition: transform .2s ease;
}

.ingredient-item summary i::after { transform: rotate(90deg); }
.ingredient-item[open] summary i::after { transform: rotate(0); }

.ingredient-item p {
  max-width: 720px;
  margin: 0;
  padding: 0 46px 28px 58px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.package-section {
  padding: clamp(58px, 7vw, 94px) clamp(18px, 6vw, 84px);
  background: #edf4f3;
  border-color: var(--line);
}

.section-heading { max-width: 1260px; margin-right: auto; margin-bottom: 34px; margin-left: auto; }
.section-heading h2 { color: var(--ink); font-size: clamp(40px, 5vw, 66px); line-height: 1.03; }
.section-heading p:last-child { color: var(--muted); font-size: 12px; letter-spacing: .06em; }
.package-grid { max-width: 1260px; margin: 0 auto; gap: 14px; }

.package-card,
.hydration-package,
.barrier-package,
.laser-package,
.clarity-package,
.pro-package,
.glow-package,
.eye-package,
.repair-package,
.body-package {
  background: rgba(255,255,255,.9);
  border-color: var(--line);
  box-shadow: none;
}

.package-card::after { display: none; }
.package-kicker,
.routine-flow strong,
.spot-package .package-kicker,
.spot-package .routine-flow strong,
.clarity-package .package-kicker,
.clarity-package .routine-flow strong,
.pro-package .package-kicker,
.pro-package .routine-flow strong { color: var(--blue); }
.package-card h3 { color: var(--ink); font-weight: 400; }
.package-card p { color: var(--muted); }
.routine-flow div { background: #f8fbfa; border-color: var(--line); box-shadow: none; }
.routine-flow div:hover { background: #fff; border-color: rgba(7,142,152,.48); box-shadow: 0 10px 24px rgba(28,62,64,.08); }
.routine-flow span { color: #425658; }

.product-shell {
  padding: clamp(58px, 7vw, 96px) clamp(18px, 6vw, 84px);
  background: var(--ivory);
}

.product-filter-bar {
  top: 0;
  max-width: 1260px;
  margin: -6px auto 26px;
  gap: 0;
  padding: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  background: rgba(245,248,247,.96);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.product-filter {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 19px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  font-size: 10px;
}

.product-filter.active { color: #fff; background: var(--blue); border-color: var(--blue); }
.active-guide-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: rgba(7, 142, 152, .08);
  border-color: var(--line);
  text-decoration: none;
  white-space: nowrap;
}
.active-guide-filter:hover,
.active-guide-filter:focus-visible {
  color: #fff;
  background: var(--blue);
  outline: none;
}
.product-grid { max-width: 1260px; margin: 0 auto; gap: 18px; }

.product-card {
  background: #fff;
  border-color: var(--line);
  box-shadow: none;
  border-radius: 2px;
}

.product-card::before { display: none; }
.product-card:hover { transform: translateY(-3px); border-color: rgba(7,142,152,.45); box-shadow: var(--shadow); }
.product-topline { color: var(--muted); }
.product-topline span,
.product-topline em { background: rgba(255,255,255,.86); border-color: var(--line); }
.product-topline em { color: var(--blue); }

.product-media,
.product-card[data-photo="true"] .product-media {
  height: 340px;
  padding: 66px 26px 28px;
  background: #f8fbfa;
  border-bottom: 4px solid var(--teal);
}

.product-card[data-brand="Neopink"] .product-media { border-bottom-color: var(--gold); }
.product-media::before { inset: 22px 18px 20px; background: #fff; border-color: var(--line); box-shadow: none; }
.product-media img,
.product-card[data-photo="true"] .product-media img { max-height: 240px; filter: drop-shadow(0 20px 24px rgba(28,62,64,.14)); }
.product-card[data-shape="cream"] .product-media img { max-height: 210px; }
.product-card[data-shape="tube"] .product-media img { max-height: 255px; }
.product-card[data-shape="set"] .product-media img { max-height: 236px; }

.product-body { padding: 24px; }
.brand-tag { color: #94703b; font-size: 10px; letter-spacing: .05em; }
.product-card[data-brand="MiPrimera"] .brand-tag { color: var(--blue); }
.product-body h3 { min-height: 54px; color: var(--ink); font-size: 25px; font-weight: 400; line-height: 1.08; }
.chips span { color: var(--muted); background: #fff; border-color: var(--line); }
.product-link { color: var(--blue); border-color: var(--line); font-size: 11px; }
.order-add { color: #fff; background: var(--blue); border-color: var(--blue); }
.order-add:hover { background: #055c63; box-shadow: 0 12px 26px rgba(8,109,117,.18); }
.product-stepper { border-color: rgba(8,109,117,.35); background: #fff; }
.product-stepper button { background: var(--blue); }
.product-stepper button:hover { background: #055c63; }
.product-stepper output { color: var(--ink); border-color: var(--line); }

.modal-backdrop { background: rgba(12,35,37,.58); }
.modal-panel { color: var(--ink); background: var(--ivory); border-color: var(--line); box-shadow: 0 28px 70px rgba(12,35,37,.24); }
.modal-close { color: var(--ink); background: rgba(255,255,255,.9); border-color: var(--line); }
.modal-media,
.product-modal[data-photo="true"] .modal-media { background: #edf5f4; }
.modal-media::before { background: #fff; border-color: var(--line); box-shadow: none; }
.modal-media img,
.product-modal[data-photo="true"] .modal-media img { filter: drop-shadow(0 24px 28px rgba(28,62,64,.15)); }
.modal-copy h2 { color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; font-weight: 300; }
.modal-copy p:not(.subline), .modal-info-block p { color: var(--muted); }
.modal-info-block { background: rgba(255,255,255,.68); border-left-color: var(--teal); }
.modal-info-block strong { color: var(--blue); }
.modal-navigation button { color: var(--blue); background: #fff; border-color: rgba(8,109,117,.35); }
.modal-return { background: var(--blue); border-color: var(--blue); }

footer {
  color: #536c6e;
  background: #e5f0ef;
  border-top: 3px solid var(--gold);
}

footer img { width: 160px; }
.footer-brand strong { color: var(--ink); font-weight: 400; }
.footer-contact { background: rgba(255,255,255,.55); border-color: rgba(8,109,117,.18); }
.footer-kicker { color: var(--blue); }
footer a { color: var(--blue); }
.footer-address { color: var(--muted); }
.footer-address:hover { color: var(--blue); }
.footer-instagram { color: #fff; background: var(--blue); box-shadow: none; }

.home-float,
.order-float { background: rgba(8,109,117,.96); border-color: rgba(255,255,255,.65); box-shadow: 0 16px 34px rgba(12,35,37,.18); }
.modal-open .home-float,
.modal-open .order-float { opacity: 0; pointer-events: none; }
.home-float:hover,
.order-float:hover { background: #055c63; }
.order-float strong { color: var(--blue); }
.order-float:hover strong { color: #055c63; }
.order-panel { background: #f7faf9; border-left-color: rgba(8,109,117,.4); box-shadow: -30px 0 60px rgba(12,35,37,.24); }
.order-close { background: #fff; border-color: var(--line); }
.order-panel h2 { color: var(--ink); font-weight: 300; }
.order-items { background: #fff; border-color: var(--line); }
.order-item { border-color: var(--line); }
.order-item span, .order-field span { color: var(--blue); }
.order-stepper { border-color: rgba(8,109,117,.28); }
.order-stepper button { color: var(--blue); }
.order-stepper button:hover { color: #fff; background: var(--blue); }
.order-stepper output { border-color: var(--line); background: #fff; }
.order-empty { border-color: var(--line); }
.order-field input,
.order-field textarea { border-color: var(--line); background: #fff; }
.order-field input:focus,
.order-field textarea:focus { border-color: var(--teal); outline-color: rgba(7,142,152,.18); }
.order-whatsapp { background: var(--blue); }

@media (max-width: 1100px) {
  .hero { min-height: 790px; background-position: left center; }
  .hero-copy { width: min(350px, 44vw); }
  .clinical-note { width: min(720px, 72vw); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .topbar { min-height: 68px; padding: 9px 14px; }
  .brand-lockup { min-width: 0; }
  .brand-lockup img { width: 126px; }
  .language-switch { display: none; }
  .menu-toggle { width: auto; padding: 0 13px; color: var(--blue); }
  .menu-toggle::after { color: var(--blue); }

  .hero {
    min-height: 760px;
    padding: 54px 20px 190px;
    background-color: #f3f8f7;
    background-position: center bottom 168px;
    background-size: 100% auto;
  }

  .hero-copy { width: 100%; }
  .hero h1 { max-width: 340px; font-size: 43px; line-height: 1; }
  .hero .intro { max-width: 340px; margin: 23px 0 27px; font-size: 14px; line-height: 1.6; }
  .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .button { min-width: 0; padding: 0 8px; font-size: 9px; }

  .clinical-note {
    grid-template-columns: 32px 1fr;
    gap: 10px 14px;
    width: 100%;
    min-height: 168px;
    padding: 20px;
  }

  .brand-section { grid-template-columns: 1fr; }
  .brand-panel { min-height: 0; padding: 54px 20px; }
  .brand-panel + .brand-panel { border-top: 1px solid var(--line); border-left: 0; }
  .brand-panel img { height: 42px; margin-bottom: 26px; }
  .brand-panel h2 { font-size: 38px; }

  .ingredient-guide {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 58px 20px 68px;
  }

  .ingredient-guide-heading { position: static; }
  .ingredient-guide-heading h2 { margin-bottom: 20px; font-size: 42px; }
  .ingredient-guide-heading > #ingredientGuideIntro { font-size: 14px; }
  .ingredient-guide-audit { font-size: 12px; }
  .ingredient-showcase { grid-template-columns: 1fr; }
  .ingredient-feature { min-height: 138px; border-right: 0; }
  .ingredient-feature strong { font-size: 19px; }
  .ingredient-item summary { grid-template-columns: 34px minmax(0, 1fr) 22px; gap: 12px; min-height: 72px; }
  .ingredient-item summary strong { font-size: 15px; }
  .ingredient-item p { padding: 0 34px 24px 46px; font-size: 13px; }

  .package-section,
  .product-shell { padding: 60px 16px 72px; }
  .section-heading h2 { font-size: 43px; }
  .package-grid { grid-template-columns: 1fr; }
  .package-card { padding: 20px; }
  .routine-flow { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .product-filter-bar { margin-bottom: 20px; }
  .product-filter { min-height: 46px; padding: 0 16px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-media,
  .product-card[data-photo="true"] .product-media { height: 350px; }
  .product-body { padding: 24px 20px; }

  .modal-panel { background: var(--ivory); }
  .modal-media,
  .product-modal[data-photo="true"] .modal-media { background: #edf5f4; }

  footer { background: #e5f0ef; }
  .footer-contact { background: rgba(255,255,255,.52); }
}

@media (max-width: 430px) {
  .hero { min-height: 750px; }
  .hero h1 { font-size: 41px; }
  .routine-flow { grid-template-columns: 1fr 1fr; }
  .product-media,
  .product-card[data-photo="true"] .product-media { height: 325px; }
  .product-order-control { grid-template-columns: minmax(0,1fr) 102px; }
  .product-stepper { grid-template-columns: 32px 36px 32px; }
}