/* Approved usability refinements; identical behaviour and styles in ES and EN. */
:root{--control-boundary:#7b827e;--type-label:13px;--type-control:14px;--type-body:16px}
:is(button,.button,.text-link,.language-switch a){min-height:44px}
input[type=range]{min-height:44px;touch-action:pan-y}
.site-footer a,.site-footer nav a,.header-access,.site-header nav a,.caption,.small,.proof-note,.proof-tabs small,.plugin-preview__top,.plugin-preview__foot,.plugin-preview__vendor,.plugin-preview__price>span,.quote-story__reading small{font-size:var(--type-label)}
.site-header nav.language-switch a{min-width:36px;min-height:44px;font-size:13px}
:is(.quote-story__nav button,.pa-controls button,.ct-controls button,.experience-controls button,.mj-controls button,.media-controls button){min-height:44px;min-width:44px;font-size:14px;border-color:var(--control-boundary)}
:is(.pa-controls,.ct-controls,.experience-controls,.mj-controls){min-height:56px;height:auto;flex-shrink:0}
:is(.pa-controls,.ct-controls,.experience-controls,.mj-controls) label{font-size:13px}
.pa-photo>span,.pa-detail>span,.cf-frame span{font-size:max(13px,1cqw)}
.pa-detail p{font-size:max(14px,1.12cqw)}
.pa-detail{width:28%}.pa-identity,.pa-material{left:1%}.pa-commercial{right:1%}
.media-controls{display:flex;align-items:center;gap:12px;flex:0 0 auto;width:100%;padding:6px 12px;background:var(--brand-primary);color:#fff;font:500 14px/1.3 var(--brand-body-font);min-height:58px}
.media-controls button{background:transparent;color:inherit;border:1px solid var(--brand-mint);padding:8px 12px;flex:0 0 auto;font:inherit;cursor:pointer}.media-controls input{flex:1;min-width:40px;accent-color:var(--brand-mint)}.media-time{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}
.media-controls button:focus-visible,.media-controls input:focus-visible{outline:2px solid white;outline-offset:3px}
.hero-render.wow-film-frame,.film-experience{display:flex;flex-direction:column}.hero-render.wow-film-frame>video{width:100%;min-height:0;flex:1;object-fit:contain}.film-experience .film-media{height:0;flex:1;min-height:0}.wow-ae video{display:block;width:100%}.wow-film-toggle{position:static}
.compact-slide .film-experience{aspect-ratio:auto}.compact-slide .film-experience .film-media{height:auto;aspect-ratio:16/9;flex:none}
.qf-sheet .quote-enlarge span{position:static;display:block;text-align:center;font-size:13px;padding:10px;min-height:44px}.qf-sheet .quote-enlarge img{height:calc(100% - 44px)}
.quote-proof-summary{font:500 14px/1.5 var(--brand-body-font);color:var(--brand-primary);margin:12px 0;display:flex;gap:16px;flex-wrap:wrap}.quote-proof-summary strong{font-weight:700}
.quote-proof-summary p{margin:0}.quote-proof-summary small{font-size:13px}
.page-hero h1,.page-section h2,.quote-showcase__intro h3{text-wrap:balance;overflow-wrap:normal}.quote-showcase__intro h3{font-size:clamp(25px,2.2vw,34px);line-height:1.15}
@media(min-width:901px){.deck-surface{max-width:calc((100dvh - 365px)*16/9);margin-inline:auto}.slide .media-controls button,.slide .experience-controls button,.slide .pa-controls button,.slide .ct-controls button,.slide .mj-controls button{min-height:calc(44px / var(--scale,1));min-width:calc(44px / var(--scale,1));font-size:calc(14px / var(--scale,1))}.slide :is(.media-controls,.experience-controls,.pa-controls,.ct-controls,.mj-controls){min-height:calc(58px / var(--scale,1))}.slide .media-controls input{min-height:calc(44px / var(--scale,1))}.theater .deck-surface{max-width:none}.slide [data-element=folio]{background:var(--brand-primary);color:white!important;width:auto!important;min-width:38px;padding:6px 10px;border-radius:2px;height:auto!important}}
@media(max-width:760px){.media-controls{gap:6px;flex-wrap:wrap;padding:6px 8px}.media-controls button{padding-inline:8px}.media-time{display:none}.site-header .brand img{max-width:100px}.proof-tabs small{font-size:13px}.quote-showcase__detail{display:block}.quote-showcase__intro h3{max-width:24ch}.pa-detail p{font-size:16px}.pa-detail>span{font-size:13px}.quote-story__nav button{min-height:44px}}
.demo-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.demo-status-error{color:#8d2345}.demo-status-success{color:#245846}

.wow-mood.film-experience{aspect-ratio:auto}.wow-mood.film-experience .film-media{height:auto;aspect-ratio:16/9;flex:none}.wow-product .pa-detail p{font-size:16px}.wow-product .pa-detail>span{font-size:13px}

.quote-key-facts{font-size:16px!important;margin-top:16px}.quote-viewer>.quote-proof-summary{padding:12px 24px;margin:0}.element.image:has(img[src*="quote-sierra"])>img{height:calc(100% - 48px);object-position:top center}.element.image:has(img[src*="quote-sierra"]) .quote-enlarge span{bottom:0;right:0;min-height:44px;font-size:18px}.compact-slide .has-enlarge:has(img[src*="quote-sierra"]){padding-bottom:48px}.compact-slide .has-enlarge:has(img[src*="quote-sierra"]) .quote-enlarge span{bottom:0;min-height:44px}
@media(max-width:760px){.quote-proof-summary{gap:6px 16px}.quote-proof-summary span{flex-basis:100%}.wow-product{height:760px}.wow-product .pa-detail p{font-size:16px}.wow-product .pa-material{bottom:5%}.wow-product .pa-photo{height:40%}.wow-product .pa-identity,.wow-product .pa-commercial{top:47%}}

.quote-showcase__intro h3,.service-split h3{color:var(--brand-primary)}
@media(min-width:901px){.slide [data-element=folio]{font-size:calc(13px / var(--scale,1))!important;min-width:calc(30px / var(--scale,1))}.slide :is(.ct-controls,.pa-controls,.experience-controls,.mj-controls) input[type=range]{min-height:calc(44px / var(--scale,1))}.slide :is(.ct-controls,.pa-controls,.experience-controls,.mj-controls) label{font-size:calc(13px / var(--scale,1))}}

.section-copy h2{color:var(--brand-primary)}.page-integraciones .page-hero h1{max-width:16ch}.page-integraciones .page-hero h1 em{display:inline-block}

/* Visual QA fixes 2026-09-23 · website only unless noted. Same rules serve ES and EN. */
/* Media control bars (site and decks): buttons keep their full label; the slider takes the remaining space. */
:is(.pa-controls,.ct-controls,.experience-controls,.mj-controls,.media-controls) button{flex:none;white-space:nowrap}
/* Hero film fills its frame instead of showing striped bands at laptop widths. */
.hero-render.wow-film-frame>video{object-fit:cover}
/* Videos sized by width until metadata loads (the height attribute alone produced a 1080px box on phones). */
.wow-ae video{height:auto;aspect-ratio:16/9}
/* SketchUp model journey fills its frame when the rail sits beside it. */
@media(min-width:701px){.wow-model .mj-frame{object-fit:cover}}
/* Quote viewer: the enlarge label sits under each page, never over the total. */
.quote-page-open span{position:static;display:block;text-align:center;padding:11px 12px}
.quote-viewer__bar a{min-height:44px;display:inline-flex;align-items:center}
/* Heading and paragraph were touching in the dark quote section. */
.quote-proof__copy h2{margin:0 0 20px}
body:has(.site-header) :is(h1,h2,h3){text-wrap:balance}
/* Minimum text size 13px for captions, labels and route links. */
body:has(.site-header) :is(.expand-label,.hero-bottom p,.hero-bottom a,figcaption,.caption,p.small,.ct-state,.footer-bottom span,.wow-note,.comparison-caption,.comparison-caption p){font-size:13px}
/* Tap targets of at least 44px. */
.site-header nav.language-switch a{min-width:44px}
.site-header .brand{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:374px){.site-header:has(.menu-button[aria-expanded=false])>.language-switch{display:none}}
@media(max-width:420px){.media-controls input{order:3;flex:1 0 100%}}
/* Phones: the pinned quote image covers the text scrolling beneath it. */
@media(max-width:760px){.quote-story__visual{top:0;padding-top:12px;box-shadow:0 8px 0 #fff}}
/* Phones: the product card stacks photo and details instead of overlapping columns. */
@media(max-width:760px){
 .wow-product{height:auto}
 .wow-product .pa-scene{display:flex;flex-direction:column;gap:22px;padding:18px 18px 22px;perspective:none}
 .wow-product .pa-connections{display:none}
 .wow-product .pa-photo{position:relative;left:auto;top:auto;width:min(72%,280px);height:auto;align-self:center}
 .wow-product .pa-photo img{height:auto}
 .wow-product .pa-detail{position:static;width:auto;translate:none;text-align:left}
 .wow-product .pa-detail h3,.wow-product .pa-material h3{display:block;font-size:26px;margin:6px 0 8px}
 .wow-product .pa-detail p{font-size:16px;line-height:1.55}
 .wow-product .pa-detail>span{font-size:13px}
}
/* Keeps the crowded desktop header within the viewport now that ES/EN have 44px targets. */
@media(min-width:901px) and (max-width:1150px){.site-header{gap:14px}.site-header nav{gap:14px}.site-header nav.language-switch{margin-left:0;gap:0}}
/* Hero headlines follow their grid column; the 13ch cap broke them into one-word lines with the brand serif. */
.page-hero h1{max-width:none}

/* Deck QA fixes 2026-09-24. */
/* Films and the SketchUp drawing fill their frames on slides instead of showing side bands. */
.slide .film-experience .film-media,.slide .model-journey .mj-frame{object-fit:cover}
/* Micro labels never render below 12px when the 1440px slide is scaled down; they keep their size on large screens. */
@media(min-width:901px){
 .slide :is(.ct-state,.ct-controls span,.mj-step>span,.qf-sheet .quote-enlarge span,.pa-photo>span,.pa-detail>span,.cf-frame span){font-size:max(13px,calc(12px / var(--scale,1)))!important}
 .slide :is(.experience-controls span,.qf-total span){font-size:max(16px,calc(12px / var(--scale,1)))!important}
}
/* Short laptop screens: compact chrome so the slide can grow. */
@media(min-width:901px) and (max-height:820px){.deck-header{min-height:64px;padding-block:8px}.deck-index{margin-bottom:8px}.presenter-bar{padding-top:8px}.shortcut-hint{display:none}.deck-surface{max-width:calc((100dvh - 274px)*16/9)}}
/* Phones: keep the logo as the way home; 44px language targets and 13px stage controls. */
.deck-header nav.language-switch a{min-width:44px}
#part-previous,#part-next,#part-status{font-size:13px}
@media(max-width:580px){body:not(.theater) .deck-header .home-link{display:flex;align-items:center;min-height:44px}body:not(.theater) .deck-header{justify-content:space-between}}
/* Reading mode (phones): the product card shows complete and stacked; stepping is for presenting. */
.compact-slide .product-anatomy{height:auto}
.compact-slide .product-anatomy .pa-scene{display:flex;flex-direction:column;gap:22px;padding:18px;perspective:none}
.compact-slide .product-anatomy .pa-connections,.compact-slide .product-anatomy .pa-controls{display:none}
.compact-slide .product-anatomy .pa-photo{position:relative;left:auto;top:auto;width:min(72%,280px);height:auto;align-self:center;transform:none!important}
.compact-slide .product-anatomy .pa-photo img{height:auto}
.compact-slide .product-anatomy .pa-detail{position:static;width:auto;translate:none;text-align:left;opacity:1!important;transform:none!important}
.compact-slide .product-anatomy .pa-detail h3{display:block;font-size:26px;margin:6px 0 8px}
.compact-slide .product-anatomy .pa-detail p{font-size:16px;line-height:1.55}
.compact-slide .product-anatomy .pa-detail>span{font-size:13px}
/* Larger slide labels: keep the campaign captions inside their frames and the product blocks apart. */
@media(min-width:901px){.slide .cf-frame span{padding:7px 10px;line-height:1.25}.slide .product-anatomy .pa-identity{top:22%}.slide .product-anatomy .pa-material{top:73.5%}}
@media(min-width:901px){.slide .cf-frame-0{top:5%}.slide .cf-frame-1{width:17%;top:3%}.slide .cf-frame-2{width:11.5%;top:3%}}