/* Fatos triptych. iPhone / landscape iPad Pro / MacBook Pro are real HTML
   shells. We reuse the existing iPhone (df-*) and MacBook (mbp-*) material
   stack. Their center and side previews are the SAME physical DOM nodes. */
#editorial[data-editorial-story] .es-stage {
  box-sizing:border-box;position:relative;isolation:isolate;
  perspective:1500px;perspective-origin:50% 48%;
  display:block;width:min(100%,960px);min-height:0;padding:0;overflow:visible;
  transition:none;
}
#editorial .es-stage>.es-object {
  position:absolute;top:50%;left:50%;display:block;
  width:max-content;max-width:none;height:auto;aspect-ratio:auto;
  min-width:0;min-height:0;padding:0;margin:0;border:0;border-radius:0;
  background:transparent;overflow:visible;transform-origin:center;
  transform-style:preserve-3d;backface-visibility:visible;
  filter:none;transition:none;pointer-events:none;
}
#editorial[data-editorial-motion="transition"] .es-object{will-change:transform,opacity}
#editorial .es-object>.es-hardware{position:relative;margin:0;max-width:none;pointer-events:none}
#editorial .es-object>.es-device{pointer-events:auto}
#editorial .es-object>.es-object-select {
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:transparent;border-radius:12px;cursor:pointer;pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}
#editorial .es-object-select[hidden]{display:none!important}
#editorial .es-object-select:focus-visible{outline:3px solid #366caa;outline-offset:5px}
#editorial .es-panel{position:relative;z-index:1}
#editorial .es-tabs{position:relative;z-index:8;isolation:isolate}
#editorial .es-tabs>button{position:relative;z-index:9}
#editorial .es-swipe-nav{position:relative;z-index:7;isolation:isolate}
#editorial .es-swipe-nav>button{position:relative;z-index:8}
/* Previews retain each screen's own grid/flex composition. */
#editorial .es-preview-piece{pointer-events:none}
#editorial .es-preview-piece[hidden]{display:none!important}
#editorial .es-hardware{box-sizing:border-box;flex:none;max-width:none}
#editorial .es-hardware--iphone{transform:translateZ(0)}
#editorial .es-hardware--iphone .es-screen{position:absolute;inset:0}
#editorial .es-hardware--iphone .es-piece{overflow:hidden}

/* iPad Pro landscape: physical 281.6 x 215.5 mm frame, 4:3 display,
   front camera on the LONG edge. No phone-style Dynamic Island. */
#editorial .es-hardware--ipad {
  position:relative;display:block;
  width:var(--es-ipad-width,540px);
  aspect-ratio:281.6 / 215.5;
  border-radius:clamp(13px,2vw,24px);
  filter:drop-shadow(0 13px 19px #162a2b38);
}
#editorial .ipad-pro-body {
  position:absolute;inset:0;padding:clamp(6px,1.55%,12px);
  box-sizing:border-box;border-radius:inherit;
  background:linear-gradient(134deg,#e9ece9 0%,#8b9490 12%,#e1e4e2 36%,#868e8b 73%,#dfe4e0 100%);
  border:1px solid #919c97;
  box-shadow:inset 0 1px 1px #fffefccc,inset 0 -1px 2px #40564a64,0 2px 4px #34463937;
}
#editorial .ipad-pro-metal{position:absolute;inset:2px;pointer-events:none;border-radius:inherit;border:1px solid #ffffff6c}
#editorial .ipad-pro-glass{
  position:relative;box-sizing:border-box;
  width:100%;height:100%;padding:clamp(3px,1.2%,8px);
  background:#080b10;
  border-radius:clamp(8px,1.5vw,18px);
  box-shadow:0 0 0 1px #454c4b,inset 0 1px 1px #000;
}
#editorial .ipad-pro-screen{
  position:relative;box-sizing:border-box;
  width:100%;height:100%;min-width:0;min-height:0;
  overflow:hidden;border-radius:clamp(5px,1vw,12px);
  background:#0d47a2;
}
#editorial .ipad-pro-camera{
  position:absolute;z-index:8;top:clamp(2px,.55%,6px);left:50%;
  transform:translateX(-50%);display:grid;place-items:center;
  width:clamp(5px,1.8%,10px);aspect-ratio:1;
  border-radius:50%;background:#10151b;pointer-events:none;
  box-shadow:0 0 0 1px #aab1aa;
}
#editorial .ipad-pro-camera i{
  width:62%;height:62%;border-radius:50%;
  background:radial-gradient(circle at 42% 39%,#2b5271 0 14%,#080e17 51%,#020304 86%);
}
#editorial .ipad-pro-home{
  position:absolute;z-index:8;bottom:clamp(3px,.8%,6px);left:50%;
  transform:translateX(-50%);width:14%;height:clamp(2px,.4vw,4px);
  background:#e6e9e8c5;border-radius:999px;pointer-events:none;
}
#editorial .ipad-pro-power,#editorial .ipad-pro-volume{
  position:absolute;pointer-events:none;
  background:#99a4a0;border:1px solid #75827d;box-shadow:inset 0 1px #edf1eac0;
}
#editorial .ipad-pro-power{top:17%;right:-2px;width:3px;height:12%;border-radius:0 3px 3px 0}
#editorial .ipad-pro-volume{top:0;left:12%;width:16%;height:3px;border-radius:3px 3px 0 0}

/* Fatos adapts the SAME editorial content to an iPad 4:3 screen. */
#editorial .es-ipad-editorial{
  display:grid;grid-template-columns:52% 48%;background:#0d45a8;
  color:white;font-family:var(--sans,Inter,Arial,sans-serif);
}
#editorial .es-ipad-info{
  position:relative;z-index:1;min-width:0;
  display:flex;flex-direction:column;
  padding:calc(5 * var(--es-device-unit)) calc(4.4 * var(--es-device-unit)) calc(3.6 * var(--es-device-unit));
}
#editorial .es-ipad-brand{display:flex;align-items:center;gap:calc(1.5 * var(--es-device-unit));font-weight:750;font-size:calc(2.45 * var(--es-device-unit));line-height:1.2}
#editorial .es-ipad-brand img{width:calc(5.2 * var(--es-device-unit));height:calc(5.2 * var(--es-device-unit));border-radius:50%;flex:none}
#editorial .es-ipad-brand small{display:block;font-size:calc(1.5 * var(--es-device-unit));letter-spacing:.075em;font-weight:550;margin-top:2px}
#editorial .es-ipad-step{display:block;margin-top:auto;font-size:calc(1.75 * var(--es-device-unit));letter-spacing:.12em;color:#bddafa}
#editorial .es-ipad-editorial h3{font-weight:680;font-size:calc(4.4 * var(--es-device-unit));letter-spacing:-.055em;line-height:1.04;margin:calc(1.3 * var(--es-device-unit)) 0}
#editorial .es-ipad-editorial .es-mask>span{display:block}
#editorial .es-ipad-editorial p{font-size:calc(1.95 * var(--es-device-unit));line-height:1.43;color:#d6e6ff;max-width:33ch;margin:0 0 auto}
#editorial .es-ipad-functions{display:flex;flex-wrap:wrap;gap:calc(.65 * var(--es-device-unit));align-items:center;margin-top:calc(1.8 * var(--es-device-unit))}
#editorial .es-ipad-functions span{display:flex;align-items:center;gap:3px;padding:calc(.6 * var(--es-device-unit)) calc(.8 * var(--es-device-unit));background:#ffffff17;border:1px solid #ffffff3c;border-radius:5px;font-size:calc(1.5 * var(--es-device-unit));white-space:nowrap}
#editorial .es-ipad-functions svg{width:calc(1.8 * var(--es-device-unit));height:calc(1.8 * var(--es-device-unit))}
#editorial .es-ipad-visual{position:relative;min-height:0;overflow:hidden;background:#4b758d}
#editorial .es-ipad-visual img{width:100%;height:100%;object-fit:cover;object-position:center}
#editorial .es-ipad-visual:after{content:'';position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#0b2e51a8);pointer-events:none}
#editorial .es-ipad-visual span{position:absolute;z-index:1;bottom:7%;left:8%;right:8%;font-size:calc(1.6 * var(--es-device-unit));letter-spacing:.075em;font-weight:600;color:white}

/* MacBook Pro uses the SAME mbp-* lid/hinge/base classes as Casa Costa.
   Only the editorial screen changes. The notebook shell does not. */
#editorial .es-hardware--macbook{
  display:flex;align-items:center;justify-content:center;
  position:relative;width:var(--es-macbook-width,700px);
  padding:0 4.4%;margin:0;box-sizing:border-box;
  filter:drop-shadow(0 10px 19px #22382b36);
}
#editorial .es-hardware--macbook .mbp-device{width:100%;max-width:none}
#editorial .es-hardware--macbook .mbp-lid{aspect-ratio:1.59}
#editorial .es-hardware--macbook .mbp-screen{position:relative;display:block}
#editorial .es-screen--macbook{position:absolute;inset:0;background:#f4f3ef}
#editorial .es-macbook-editorial{display:flex;flex-direction:column;background:#f1f4ef;color:#163426}
#editorial .es-mac-browser{
  flex:none;box-sizing:border-box;height:calc(2.6 * var(--es-device-unit));
  display:flex;gap:7px;align-items:center;padding:0 calc(1.3 * var(--es-device-unit));
  background:#e2e8df;border-bottom:1px solid #bccbc0;
}
#editorial .es-mac-browser>span{display:flex;gap:3px}
#editorial .es-mac-browser i{display:block;width:calc(.6 * var(--es-device-unit));height:calc(.6 * var(--es-device-unit));border-radius:50%;background:#91ac96}
#editorial .es-mac-browser b{font-size:calc(.95 * var(--es-device-unit));letter-spacing:.07em;margin:auto;color:#657f6b}
#editorial .es-mac-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 calc(2.8 * var(--es-device-unit));min-height:calc(6 * var(--es-device-unit));background:#f5f7f2}
#editorial .es-mac-nav strong{font-size:calc(2.5 * var(--es-device-unit));font-weight:800;letter-spacing:-.03em}
#editorial .es-mac-nav span{font-size:calc(1.2 * var(--es-device-unit));color:#59725e;white-space:nowrap}
#editorial .es-mac-nav small{font-size:calc(1.25 * var(--es-device-unit));font-weight:600;color:#4e6c57}
#editorial .es-mac-hero{position:relative;flex:1;min-height:0;overflow:hidden;background:#144ea1}
#editorial .es-mac-hero>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 57%}
#editorial .es-mac-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#091e39db 0%,#1227478f 47%,transparent 95%);pointer-events:none}
#editorial .es-mac-hero-copy{position:absolute;z-index:1;left:calc(3.4 * var(--es-device-unit));right:36%;bottom:calc(3 * var(--es-device-unit));color:white;min-width:0}
#editorial .es-mac-hero-copy>small{display:block;font-size:calc(1.2 * var(--es-device-unit));font-weight:650;letter-spacing:.11em;margin-bottom:calc(1 * var(--es-device-unit))}
#editorial .es-mac-hero-copy h3{font-size:calc(5.2 * var(--es-device-unit));font-weight:660;line-height:1.04;letter-spacing:-.05em;margin:0}
#editorial .es-mac-hero-copy p{font-size:calc(1.75 * var(--es-device-unit));max-width:37ch;line-height:1.45;margin:calc(1.2 * var(--es-device-unit)) 0 0;color:#e5eefb}


/* Each viewport has one stable stage, independent of the selected model. */
@media(max-width:700px){
 #editorial .es-ipad-editorial h3{font-size:calc(4.15 * var(--es-device-unit))}
 #editorial .es-ipad-editorial p{font-size:calc(1.85 * var(--es-device-unit))}
 #editorial .es-mac-nav span{display:none}
 #editorial .es-mac-hero-copy{right:22%}
 #editorial .es-mac-hero-copy h3{font-size:calc(4.65 * var(--es-device-unit))}
 #editorial .es-mac-hero-copy p{display:none}
}