/* Iteración 3: reglas limitadas al header y a la unidad comercial del hero. */
html { scroll-padding-top: 100px; }
.commercial-header {
  position: sticky; top: 0; z-index: 25;
  background: #fff; box-shadow: 0 3px 12px #11223306;
}
.commercial-header .header-inner {
  width: min(1200px, calc(100% - 64px)); margin-inline: auto;
  min-height: 86px; gap: 24px;
}
.commercial-header .header-brand { gap: 11px; flex-shrink: 0; }
.commercial-header .header-brand img {
  width: 62px; height: 62px; object-fit: contain;
}
.commercial-header .brand-context {
  font-size: .78rem; font-weight: 700; letter-spacing: .035em; line-height: 1.4;
}
.commercial-header .brand-context small {
  font-size: .69rem; font-weight: 400; letter-spacing: .045em; color: var(--muted); margin-top: 5px;
}
.commercial-header .desktop-navigation {
  display: flex; align-items: center; gap: 22px; margin-left: auto;
  font-size: .76rem; white-space: nowrap;
}
.commercial-header .desktop-navigation a { padding-block: 15px; }
.commercial-header .header-contact {
  background: #25d366; color: #083b24; border: 0; padding: 11px 19px;
  min-height: 46px; font-size: .78rem; font-weight: 600; flex-shrink: 0;
}
.commercial-header .header-contact:hover { background: #40dc7a; }
.commercial-header .header-contact svg { width: 21px; height: 21px; }
.commercial-header .header-contact svg { color: #fff; }
.commercial-header .brand-context small { font-style: normal; }
.gt-flag { display:inline-block;width:24px;height:16px;object-fit:contain;vertical-align:middle;border-radius:2px;box-shadow:0 0 0 1px #11223316;flex-shrink:0; }
.country-shipping { display:inline-flex;align-items:center;gap:7px; }
.contact-dock .whatsapp-float {width:auto;height:auto;min-height:66px;max-width:300px;padding:10px 11px 10px 15px;gap:11px;border:1px solid #c8e9d6;border-radius:14px;background:#fff;box-shadow:0 5px 20px #1028421c;color:#18394b;}
.contact-dock .whatsapp-float:hover {background:#f1fbf5;}
.contact-dock .whatsapp-float>span {position:static;width:auto;height:auto;clip-path:none;overflow:visible;}
.contact-dock .help-copy {display:grid;gap:4px;max-width:206px;}
.contact-dock .help-copy strong {font-size:.7rem;line-height:1.4;font-weight:600;}
.contact-dock .help-copy>span {font-size:.65rem;color:#35614c;line-height:1.4;}
.contact-dock .whatsapp-float .help-icon {display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border-radius:50%;background:#25d366;color:#fff;}
.contact-dock .help-icon svg {width:25px;height:25px;}
.mobile-navigation { display: none; }
.commercial-hero {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-rows: auto; grid-template-areas: "visual overview";
  gap: 38px; align-items: start; padding-block: 6px 32px;
}
.product-overview { grid-area: overview; min-width: 0; }
.commercial-hero .product-heading { padding: 0; }
.commercial-hero .eyebrow { margin-bottom: 10px; }
.commercial-hero h1 { font-size: clamp(2.65rem, 4.4vw, 3.5rem); line-height: 1.05; }
.commercial-hero .product-purpose {
  font-size: 1rem; line-height: 1.45; font-weight: 600;
  margin-top: 14px; max-width: 470px;
}
.commercial-hero .product-description {
  display: block; font-size: .79rem; line-height: 1.65;
  margin-top: 10px; max-width: 510px;
}
.commercial-hero .purchase-price {
  display: grid; grid-template-columns: max-content max-content;
  justify-content: start; align-items: center; gap: 5px 18px;
  margin: 19px 0 17px;
}
.commercial-hero .purchase-price strong { font-size: 3.1rem; }
.commercial-hero .purchase-price small {
  grid-column: 1 / -1; color: var(--muted); font-size: .71rem;
}
.commercial-hero .purchase-price .status { font-size: .68rem; }
.commercial-hero .purchase-panel>.button {
  min-height: 52px; font-size: .86rem; padding-inline: 22px;
}
.hero-wholesale {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 16px; padding: 15px 17px; margin-top: 16px;
  background: #f1f6ff; border: 1px solid #d7e5fa; border-radius: 10px;
}
.hero-wholesale strong { font-size: .79rem; font-weight: 600; }
.hero-wholesale p { font-size: .68rem; line-height: 1.6; margin-top: 4px; }
.wholesale-action-link {
  display: inline-flex; gap: 6px; align-items: center; min-height: 44px;
  color: var(--blue-dark); font-size: .69rem; font-weight: 600;
  text-underline-offset: 4px;
}
.wholesale-action-link>svg:first-child { display: none; }
.wholesale-action-link>svg:last-child { width: 15px; height: 15px; }
.commercial-hero .purchase-assurance {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 17px;
  margin: 18px 0 0; padding: 0; border: 0; list-style: none;
}
.commercial-hero .purchase-assurance li {
  display: flex; gap: 7px; align-items: baseline; font-size: .7rem;
}
.commercial-hero .purchase-assurance li>span { color: var(--blue-dark); font-weight: 600; }
.commercial-hero .purchase-note { font-size: .61rem; margin-top: 12px; max-width: none; }
.commercial-hero .product-visual {
  align-self: center; width: 100%; display: block; height: auto;
  border: 1px solid #dde6f0; background: #f0f4f8;
}
.product-media { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.product-media img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.commercial-hero .visual-top { padding: 18px 20px 0; }
.commercial-hero .product-visual figcaption {
  padding: 10px 12px 16px; color: #4d6073; font-size: .62rem; text-align: center;
}
/* Menú nativo: las acciones principales siguen funcionando sin JavaScript. */
@media (max-width: 1100px) {
  .commercial-header .desktop-navigation { display: none; }
  .commercial-header .header-inner { gap: 16px; min-height: 78px; }
  .commercial-header .header-brand img { width: 54px; height: 54px; }
  .mobile-navigation { display: block; margin-left: auto; }
  .mobile-navigation>summary {
    display: flex; align-items: center; gap: 7px; padding: 10px 12px;
    min-height: 44px; font-size: .73rem; border: 1px solid var(--line);
    border-radius: 7px; line-height: 1.4;
  }
  .mobile-navigation>summary:after { display: none; }
  .mobile-navigation>summary svg { width: 18px; height: 18px; }
  .commercial-header .mobile-navigation nav {
    position: absolute; top: 100%; right: 32px; width: 265px;
    max-height: calc(100dvh - 100px); overflow-y: auto;
    display: grid; gap: 0; padding: 9px 16px;
    background: white; border: 1px solid var(--line);
    border-radius: 0 0 10px 10px; box-shadow: 0 12px 24px #11223316;
    margin: 0; z-index: 26;
  }
  .commercial-header .mobile-navigation nav a {
    display: block; padding: 12px 6px; min-height: 44px;
    font-size: .82rem; text-decoration: none;
  }
  .commercial-hero { gap: 27px; }
  .hero-wholesale { grid-template-columns: 1fr; gap: 2px; padding: 13px 15px; }
  .wholesale-action-link { justify-self: start; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .commercial-hero { grid-template-columns: .88fr 1.12fr; gap: 23px; }
  .commercial-hero h1 { font-size: 2.65rem; }
  .commercial-hero .product-purpose { font-size: .85rem; }
  .commercial-hero .product-description { font-size: .72rem; }
  .commercial-hero .purchase-panel>.button { font-size: .75rem; padding-inline: 17px; }
  .commercial-hero .purchase-assurance { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 90px; scroll-padding-bottom: 24px; }
  body { padding-bottom: 0; }
  /* El header fijo ya mantiene WhatsApp visible: evitamos dos barras persistentes. */
  .contact-dock { display: none; }
  a, summary { scroll-margin-block: 12px 24px; }
  .commercial-header .header-inner {
    width: calc(100% - 32px); min-height: 72px; gap: 10px;
  }
  .commercial-header .header-brand img { width: 48px; height: 48px; }
  .commercial-header .header-contact { min-height: 44px; padding: 10px 13px; font-size: .72rem; gap: 6px; }
  .commercial-header .header-contact svg { width: 20px; height: 20px; }
  .commercial-header .mobile-navigation nav { right: 16px; width: min(300px, calc(100vw - 32px)); }
  .mobile-navigation>summary { padding-inline: 10px; font-size: .69rem; gap: 5px; }
  .breadcrumb { padding-block: 11px; }
  .commercial-hero {
    grid-template-columns: minmax(0, .84fr) minmax(0, 1fr);
    grid-template-areas: "heading heading" "visual price" "buy buy" "description description" "wholesale wholesale" "benefits benefits" "note note";
    gap: 13px 17px; padding-block: 2px 26px; align-items: center;
  }
  .commercial-hero .product-overview, .commercial-hero .purchase-panel { display: contents; }
  .commercial-hero .product-heading { grid-area: heading; }
  .commercial-hero h1 { font-size: 2rem; line-height: 1.12; }
  .commercial-hero h1 br { display: none; }
  .commercial-hero .eyebrow { margin-bottom: 8px; font-size: .6rem; }
  .commercial-hero .product-purpose { font-size: .83rem; margin-top: 9px; max-width: none; line-height: 1.45; }
  .commercial-hero .product-description { grid-area: description; font-size: .72rem; margin: 0; }
  .commercial-hero .purchase-price { grid-area: price; margin: 0; grid-template-columns: 1fr; gap: 6px; }
  .commercial-hero .purchase-price strong { font-size: 2.85rem; }
  .commercial-hero .purchase-price small { font-size: .63rem; grid-row: 2; }
  .commercial-hero .purchase-price .status { justify-self: start; font-size: .64rem; grid-row: 3; }
  .commercial-hero .purchase-panel>.button { grid-area: buy; min-height: 51px; font-size: .82rem; }
  .commercial-hero .product-visual { align-self: start; border-radius: 10px; }
  .commercial-hero .visual-top { display: none; }
  .commercial-hero .product-visual figcaption { font-size: .52rem; line-height: 1.4; padding: 0 7px 10px; }
  .hero-wholesale { grid-area: wholesale; margin: 0; grid-template-columns: 1fr auto; gap: 10px; padding: 12px; }
  .hero-wholesale strong { font-size: .72rem; }
  .hero-wholesale p { font-size: .62rem; }
  .wholesale-action-link { font-size: .65rem; max-width: 90px; align-self: center; }
  .commercial-hero .purchase-assurance { grid-area: benefits; margin: 1px 0 0; gap: 8px 10px; }
  .commercial-hero .purchase-assurance li { font-size: .62rem; gap: 5px; }
  .commercial-hero .purchase-note { grid-area: note; margin: 0; font-size: .59rem; }
}
@media (max-width: 600px) {
  .commercial-header .brand-context { display: none; }
}
@media (max-width: 359px) {
  .commercial-hero h1 { font-size: 1.73rem; }
  .commercial-hero .product-purpose { font-size: .76rem; }
  .commercial-hero .purchase-price strong { font-size: 2.5rem; }
  .commercial-hero .purchase-price small { font-size: .57rem; }
  .hero-wholesale { grid-template-columns: 1fr; gap: 1px; }
  .wholesale-action-link { max-width: none; }
  .commercial-hero .purchase-assurance li { font-size: .57rem; }
}