/* v5: proportional Hero layout. The rest of the approved v4 is retained. */
.hero {
  padding-top: clamp(28px, 3.2vw, 48px);
  padding-bottom: clamp(32px, 3.8vw, 56px);
  overflow: visible;
}
.hero-grid {
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: 28px;
  min-height: 0;
  align-items: center;
}
.hero-copy {
  min-width: 0;
  padding: 0;
}
.hero h1 {
  font-size: clamp(52px, 4.8vw, 76px);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.hero-title-line { display: block; }
.hero-title-brand { white-space: nowrap; }
.hero-title-brand sup {
  font-size: .36em;
  line-height: 0;
  vertical-align: .9em;
  letter-spacing: 0;
  margin-left: .08em;
}
.hero-title-detail {
  display: block;
  font-size: .72em;
  line-height: 1.16;
  color: var(--ink);
  margin-top: .12em;
}
.hero-copy > p {
  font-size: clamp(18px, 1.4vw, 21px);
  max-width: 620px;
  margin-top: 24px;
}
.hero-copy .hero-note {
  margin: 22px 0 24px !important;
  font-size: 18px !important;
}
.hero .eyebrow { font-size: 11px; gap: 12px; }
.hero .eyebrow span { flex: 0 0 36px; }
.hero-visual {
  height: auto;
  min-height: 0;
  min-width: 0;
  display: block;
  align-self: center;
}
.hero-image-wrap {
  width: 100%;
  height: auto;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent;
}
.hero-image-wrap::after { display: none; }
.hero-image-wrap img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}
/* The approved visual already contains the blue diagonal: no extra overlay. */
.hero .blue-slice { display: none; }

/* Prevent the two pre-existing percentage grids + gap from making the
   document wider than the viewport and shifting/clipping the initial view. */
@media (min-width: 1101px) {
  .benefits-grid { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
  .quote-grid { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  .benefit-list, .form-card { min-width: 0; }
}

/* Keep the entire image visible at every breakpoint; no fixed image height. */
@media (max-width: 1100px) and (min-width: 901px) {
  .hero-grid { gap: 24px; }
  .hero h1 { font-size: clamp(46px, 5.1vw, 56px); }
  .hero-title-detail { font-size: .69em; }
  .hero-copy > p { font-size: 17px; }
  .hero-copy .hero-note { font-size: 16px !important; }
  .hero .btn-lg { font-size: 16px; padding: 16px 22px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .15em; }
}
@media (max-width: 900px) {
  .hero { padding-top: 36px; padding-bottom: 40px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-copy { padding: 0; max-width: 700px; }
  .hero h1 { font-size: clamp(40px, 7vw, 62px); }
  .hero-title-detail { font-size: .74em; }
  .hero-copy > p { font-size: 18px; margin-top: 20px; }
  .hero-visual { width: 100%; max-width: 740px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .header-inner { gap: 12px; height: 72px; }
  .brand-link { min-width: 0; flex: 1 1 auto; }
  .logo-dosatron { width: 188px; max-width: 100%; height: auto; }
  .header-cta { flex: 0 0 auto; white-space: nowrap; font-size: 12px; padding: 12px; }
  .hero { padding-top: 28px; padding-bottom: 34px; }
  .hero-grid { gap: 24px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .17em; margin-bottom: 18px; }
  .hero .eyebrow span { flex-basis: 24px; }
  .hero-copy > p { font-size: 17px; line-height: 1.55; }
  .hero-copy .hero-note { font-size: 16px !important; margin: 18px 0 20px !important; }
  .hero .btn-lg { font-size: 16px; padding: 16px 22px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(34px, 10.4vw, 48px); }
  .hero-title-detail { font-size: .74em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Keep narrow viewports from inheriting intrinsic image widths elsewhere. */
@media (max-width: 1100px) {
  .shipping-card { grid-template-columns: minmax(0, 1fr); }
  .shipping-copy, .shipping-visual { min-width: 0; }
}
@media (max-width: 380px) {
  .footer-inner { gap: 16px; }
  .footer-inner img { min-width: 0; flex-shrink: 1; }
}


/* v9 — Hero: recuperar la composición visual aprobada sin recortar equipos */
.hero{background:linear-gradient(90deg,#fff 0%,#fff 47%,#f5faff 100%);overflow:hidden}
.hero-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:24px;align-items:center}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.hero-image-wrap{width:100%;max-width:870px;margin-left:auto;background:transparent;overflow:visible}
.hero-image-wrap img{width:100%;height:auto;display:block;object-fit:contain;object-position:center center}
@media (max-width:900px){
  .hero{background:linear-gradient(180deg,#fff 0%,#f6fbff 100%)}
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{max-width:760px;margin:0 auto;width:100%}
  .hero-image-wrap{max-width:760px;margin:0 auto}
}
@media (max-width:520px){
  .hero-image-wrap{width:108%;margin-left:-4%;margin-right:-4%}
}