.hsp-pantallas {
  --paper:#fff; --ink:#102f47; --muted:#425e74; --blue:#07688f; --deep:#075373;
  --hero:#e9f1f5; --well:#f4f7f9; --rule:#d4e0e8; --input:#9bb4c5; --focus:#0074ac;
  --font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --width:1184px; --gutter:clamp(16px,4.1vw,52px); --section:clamp(36px,4.4vw,60px); --radius:6px;
}
.hsp-pantallas *, .hsp-pantallas *::before, .hsp-pantallas *::after { box-sizing:border-box; }
.hsp-pantallas html, .hsp-pantallas body { overflow-x:clip; }
.hsp-pantallas { margin:0; background:var(--paper); color:var(--ink); font:16px/1.5 var(--font); }
.hsp-pantallas [hidden] { display:none!important; }
.hsp-pantallas :focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.hsp-pantallas a { color:var(--deep); text-decoration:none; }
.hsp-pantallas a:hover { color:var(--blue); text-decoration:underline; text-underline-offset:.2em; }
.hsp-pantallas button, .hsp-pantallas input, .hsp-pantallas textarea { font:inherit; color:inherit; }
.hsp-pantallas button { cursor:pointer; }
.hsp-pantallas button:disabled { cursor:not-allowed; background:var(--well); color:var(--muted); }
.hsp-pantallas img { display:block; max-width:100%; height:auto; }
.hsp-pantallas h1, .hsp-pantallas h2, .hsp-pantallas h3, .hsp-pantallas h4, .hsp-pantallas p, .hsp-pantallas ol, .hsp-pantallas ul, .hsp-pantallas dl, .hsp-pantallas dd, .hsp-pantallas figure { margin:0; }
.hsp-pantallas h1, .hsp-pantallas h2, .hsp-pantallas h3, .hsp-pantallas h4 { min-width:0; overflow-wrap:break-word; }
.hsp-pantallas h1, .hsp-pantallas h2 { letter-spacing:-.035em; text-wrap:balance; }
.hsp-pantallas h2 { font-size:clamp(25px,3vw,36px); line-height:1.14; font-weight:750; }
.hsp-pantallas h3 { font-size:clamp(21px,2.3vw,28px); line-height:1.18; font-weight:740; letter-spacing:-.02em; }
.hsp-pantallas h4 { font-size:19px; line-height:1.24; font-weight:740; }
.hsp-pantallas .wrap { width:min(var(--width),calc(100% - 2 * var(--gutter))); margin-inline:auto; }
.hsp-pantallas .button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border:1px solid var(--input); border-radius:var(--radius); background:var(--paper); color:var(--deep); font-size:14px; font-weight:700; line-height:1.25; text-align:center; }
.hsp-pantallas .button:hover { border-color:var(--blue); text-decoration:none; }
.hsp-pantallas .button:active { transform:translateY(1px); }
.hsp-pantallas .button.primary { background:var(--blue); border-color:var(--blue); color:var(--paper); }
.hsp-pantallas .button.primary:hover { background:var(--deep); color:var(--paper); }
.hsp-pantallas .button.secondary { background:transparent; }
.hsp-pantallas .button.secondary:hover { background:var(--paper); }
.hsp-pantallas .breadcrumb ol { display:flex; flex-wrap:wrap; gap:4px 8px; list-style:none; padding:12px 0; color:var(--muted); font-size:13px; }
.hsp-pantallas .breadcrumb li + li::before { content:"/"; margin-inline-end:8px; }
.hsp-pantallas .breadcrumb a { color:var(--muted); }
.hsp-pantallas .breadcrumb [aria-current] { font-weight:660; color:var(--ink); }

.hsp-pantallas .hero-band { background:var(--hero); border-block:1px solid var(--rule); }
.hsp-pantallas .hero { display:grid; grid-template-columns:minmax(0,1.34fr) minmax(0,1fr); gap:clamp(20px,4vw,52px); align-items:center; padding-block:32px; }
.hsp-pantallas .hero h1 { font-size:clamp(37px,4.1vw,57px); font-weight:770; line-height:1.04; max-width:22ch; text-wrap:initial; }
.hsp-pantallas .hero p { margin-top:12px; max-width:54ch; color:var(--muted); font-size:clamp(16px,1.4vw,18px); }
.hsp-pantallas .actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.hsp-pantallas .hero-photo { display:grid; place-items:center; min-height:232px; }
.hsp-pantallas .hero-photo img { width:auto; max-width:min(100%,455px); max-height:268px; object-fit:contain; object-position:center; mix-blend-mode:multiply; }

.hsp-pantallas .catalogue { padding-block:var(--section); }
.hsp-pantallas .section-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin-bottom:16px; }
.hsp-pantallas .section-head p { font-size:14px; color:var(--muted); }
.hsp-pantallas .motion-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding-bottom:16px; border-bottom:1px solid var(--rule); }
.hsp-pantallas .motion-nav a, .hsp-pantallas .related-links a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border:1px solid var(--rule); border-radius:var(--radius); background:var(--well); font-size:14px; font-weight:700; }
.hsp-pantallas .motion-nav a:hover, .hsp-pantallas .related-links a:hover { border-color:var(--blue); text-decoration:none; }
.hsp-pantallas .group { margin-top:36px; scroll-margin-top:20px; }
.hsp-pantallas .group h3 { margin-bottom:12px; }
.hsp-pantallas .product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:16px; }
.hsp-pantallas .product-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.hsp-pantallas .model { min-width:0; border:1px solid var(--rule); border-radius:var(--radius); scroll-margin-top:16px; }
.hsp-pantallas .model:target { border-color:var(--blue); }
.hsp-pantallas .model-face { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); min-height:232px; }
.hsp-pantallas .model-photo { display:grid; place-items:center; min-width:0; padding:16px; background:var(--well); border-radius:var(--radius) 0 0 0; border-inline-end:1px solid var(--rule); }
.hsp-pantallas .model-photo img { width:auto; max-width:100%; max-height:146px; object-fit:contain; object-position:center; mix-blend-mode:multiply; }
.hsp-pantallas .model-content { padding:16px; min-width:0; }
.hsp-pantallas .model-code { color:var(--deep); font-size:14px; font-weight:740; margin-bottom:4px; overflow-wrap:anywhere; }
.hsp-pantallas .model h4 a { color:var(--ink); }
.hsp-pantallas .model-spec { margin-top:12px; padding-top:8px; border-top:1px solid var(--rule); display:grid; gap:4px; font-size:14px; }
.hsp-pantallas .model-spec div { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr); gap:8px; align-items:baseline; }
.hsp-pantallas .model-spec dt { color:var(--muted); }
.hsp-pantallas .model-spec dd { text-align:right; font-weight:680; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.hsp-pantallas .product-grid.three .model-face { display:block; }
.hsp-pantallas .product-grid.three .model-photo { height:146px; border-inline-end:0; border-bottom:1px solid var(--rule); border-radius:var(--radius) var(--radius) 0 0; }
.hsp-pantallas .product-grid.three .model-photo img { max-height:115px; max-width:86%; }
.hsp-pantallas .product-grid.three .model-content { min-height:214px; }
.hsp-pantallas .product-grid.three .model h4 { min-height:2.5em; }
.hsp-pantallas .card-actions { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:4px 16px; min-height:48px; border-top:1px solid var(--rule); }
.hsp-pantallas .card-actions a, .hsp-pantallas .variant-actions a { display:inline-block; padding-block:6px; font-size:14px; font-weight:700; }
.hsp-pantallas .card-actions a[data-quote] { margin-inline-start:auto; }
.hsp-pantallas .variants { border-top:1px solid var(--rule); }
.hsp-pantallas .variants summary, .hsp-pantallas .faq summary { position:relative; cursor:pointer; list-style:none; }
.hsp-pantallas .variants summary::-webkit-details-marker, .hsp-pantallas .faq summary::-webkit-details-marker { display:none; }
.hsp-pantallas .variants summary { padding:12px 40px 12px 16px; color:var(--deep); font-size:14px; font-weight:720; }
.hsp-pantallas .variants summary:hover, .hsp-pantallas .faq summary:hover { background:var(--well); }
.hsp-pantallas .variants summary::after, .hsp-pantallas .faq summary::after { content:"+"; position:absolute; top:50%; inset-inline-end:16px; transform:translateY(-50%); color:var(--deep); font-size:18px; }
.hsp-pantallas .variants[open] summary::after, .hsp-pantallas .faq details[open] summary::after { content:"−"; }
.hsp-pantallas .variant-list { list-style:none; padding:0 16px; }
.hsp-pantallas .variant { border-top:1px solid var(--rule); padding:8px 0; }
.hsp-pantallas .variant-header { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 8px; font-size:14px; font-variant-numeric:tabular-nums; }
.hsp-pantallas .variant-torque { color:var(--muted); }
.hsp-pantallas .variant-actions { display:flex; gap:0 16px; flex-wrap:wrap; align-items:center; }

.hsp-pantallas .engineering-band, .hsp-pantallas .quote-band { background:var(--hero); border-block:1px solid var(--rule); }
.hsp-pantallas .engineering, .hsp-pantallas .quote-layout { display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,1fr); gap:clamp(20px,4vw,48px); align-items:center; padding-block:var(--section); }
.hsp-pantallas .engineering p, .hsp-pantallas .quote-copy p, .hsp-pantallas .related p, .hsp-pantallas .quality p { margin-top:12px; color:var(--muted); }
.hsp-pantallas .engineering p a, .hsp-pantallas .related p a { font-weight:700; text-decoration:underline; text-underline-offset:.2em; }
.hsp-pantallas .drawing { background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); padding:12px; }
.hsp-pantallas .drawing img { width:100%; }
.hsp-pantallas .drawing figcaption { margin-top:8px; color:var(--muted); font-size:14px; }
.hsp-pantallas .drawing figcaption a { font-weight:700; }
.hsp-pantallas .related { padding-block:var(--section); }
.hsp-pantallas .related-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.hsp-pantallas .related-links a { background:var(--paper); min-height:54px; }
.hsp-pantallas .quote-band { scroll-margin-top:16px; }
.hsp-pantallas .quote-layout { grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr); align-items:start; }
.hsp-pantallas .quote-copy p { max-width:38ch; }
.hsp-pantallas .htan-rfq-form { background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); padding:clamp(16px,2vw,24px); }
.hsp-pantallas .hsp-compact-attachment-form__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.hsp-pantallas .htan-form-field { display:grid; align-content:start; gap:4px; min-width:0; }
.hsp-pantallas .htan-form-field-wide { grid-column:1/-1; }
.hsp-pantallas .htan-form-field label, .hsp-pantallas .htan-form-label { font-size:14px; font-weight:670; }
.hsp-pantallas .htan-form-field input:not([type="checkbox"],[type="file"]), .hsp-pantallas .htan-form-field textarea { width:100%; min-width:0; min-height:42px; padding:8px 12px; border:1px solid var(--input); border-radius:var(--radius); background:var(--paper); }
.hsp-pantallas .htan-form-field textarea { min-height:84px; resize:vertical; }
.hsp-pantallas .htan-form-field input::placeholder, .hsp-pantallas .htan-form-field textarea::placeholder { color:var(--muted); font-size:14px; }
.hsp-pantallas .htan-upload-field input[type="file"] { position:absolute; width:1px; height:1px; clip-path:inset(50%); }
.hsp-pantallas .htan-upload-field input[type="file"]:focus-visible + .hsp-file-picker { outline:2px solid var(--focus); outline-offset:3px; }
.hsp-pantallas .hsp-file-picker { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:8px; border:1px dashed var(--input); border-radius:var(--radius); background:var(--well); cursor:pointer; }
.hsp-pantallas .hsp-file-picker__action { padding:4px 8px; background:var(--hero); border:1px solid var(--rule); border-radius:var(--radius); color:var(--deep); }
.hsp-pantallas .hsp-file-picker__name { color:var(--muted); font-weight:400; overflow-wrap:anywhere; }
.hsp-pantallas .htan-upload-field small { font-size:13px; color:var(--muted); }
.hsp-pantallas .htan-consent label { font-weight:450; }
.hsp-pantallas .htan-consent a, .hsp-pantallas .form-result a { text-decoration:underline; }
.hsp-pantallas .htan-consent input { accent-color:var(--blue); }
.hsp-pantallas .htan-form-field .button { justify-self:start; }
.hsp-pantallas .quality { display:grid; grid-template-columns:minmax(0,88px) minmax(0,1fr); gap:20px; align-items:center; padding-block:var(--section); border-bottom:1px solid var(--rule); }
.hsp-pantallas .certificate { display:block; border:1px solid var(--rule); }
.hsp-pantallas .quality-links { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:8px; }
.hsp-pantallas .quality-links a { font-weight:700; }
.hsp-pantallas .faq { padding-block:var(--section); }
.hsp-pantallas .faq-list { margin-top:16px; border-top:1px solid var(--rule); }
.hsp-pantallas .faq details { border-bottom:1px solid var(--rule); }
.hsp-pantallas .faq summary { padding:16px 44px 16px 0; font-weight:700; }
.hsp-pantallas .faq p { max-width:77ch; color:var(--muted); padding-bottom:16px; }

@media(max-width:980px) {
  .hsp-pantallas .model-face { display:block; }
  .hsp-pantallas .model-photo { height:132px; border-inline-end:0; border-bottom:1px solid var(--rule); border-radius:var(--radius) var(--radius) 0 0; }
  .hsp-pantallas .model-photo img { max-height:105px; }
  .hsp-pantallas .product-grid.three .model-content { min-height:unset; }
}
@media(max-width:740px) {
  .hsp-pantallas .breadcrumb ol { font-size:12px; }
  .hsp-pantallas .hero, .hsp-pantallas .engineering, .hsp-pantallas .quote-layout { grid-template-columns:minmax(0,1fr); gap:16px; }
  .hsp-pantallas .hero { padding-block:24px 16px; }
  .hsp-pantallas .hero h1 { font-size:clamp(34px,7.3vw,46px); }
  .hsp-pantallas .hero p { margin-top:8px; }
  .hsp-pantallas .hero-photo { min-height:0; }
  .hsp-pantallas .hero-photo img { max-width:min(80%,400px); max-height:175px; }
  .hsp-pantallas .motion-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hsp-pantallas .product-grid.three { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hsp-pantallas .related-links { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:520px) {
  .hsp-pantallas .product-grid, .hsp-pantallas .product-grid.three, .hsp-pantallas .hsp-compact-attachment-form__grid { grid-template-columns:minmax(0,1fr); }
  .hsp-pantallas .model-face, .hsp-pantallas .product-grid.three .model-face { display:grid; grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr); min-height:0; }
  .hsp-pantallas .model-photo, .hsp-pantallas .product-grid.three .model-photo { height:auto; min-height:104px; padding:8px; border-inline-end:1px solid var(--rule); border-bottom:0; border-radius:var(--radius) 0 0 0; }
  .hsp-pantallas .model-photo img, .hsp-pantallas .product-grid.three .model-photo img { max-height:108px; max-width:100%; }
  .hsp-pantallas .model-content, .hsp-pantallas .product-grid.three .model-content { padding:12px; min-height:0; }
  .hsp-pantallas .model h4, .hsp-pantallas .product-grid.three .model h4 { font-size:17px; min-height:0; }
  .hsp-pantallas .model-spec { font-size:13px; }
  .hsp-pantallas .model-spec div { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:4px; }
  .hsp-pantallas .quality { grid-template-columns:minmax(0,64px) minmax(0,1fr); gap:12px; }
}
@media(prefers-reduced-motion:reduce) {
}

.hsp-pantallas section[id] { scroll-margin-top: 96px; }
.hsp-pantallas .quote-layout .htan-form-wrap { margin: 0; width: 100%; border: 0; padding: 0; box-shadow: none; }
.hsp-pantallas .quote-layout .htan-rfq-form .wp-element-button {
  min-height: 44px; padding: 8px 16px; background: var(--blue); color: var(--paper);
  border: 1px solid var(--blue); border-radius: var(--radius); font-size: 14px; font-weight: 700;
}
.hsp-pantallas .quote-layout .htan-rfq-form .wp-element-button:hover { filter: brightness(.87); }
.hsp-pantallas .hsp-compact-attachment-form .hsp-file-picker__action { background: var(--blue); color: var(--paper); }
.hsp-pantallas .hsp-compact-attachment-form .hsp-file-picker__action:hover { filter: brightness(.87); }
