/* La interfaz gana el espacio principal; la identidad de portada no se toca. */
.sales-hero:has(.product-stage-immersive) { padding-block:0; }
.sales-hero-frame { position:relative; padding-block:24px 32px; }
.sales-hero-intro .marca-lockup,
.sales-hero-intro .marca-lockup:hover {
  justify-content:flex-start; gap:12px; min-height:44px; margin:0; padding:0;
  border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none;
}
.sales-hero-intro .marca-lockup .marca-wm {
  height:calc(var(--wm-h,22px) * 1.5); width:auto; max-width:100%; object-fit:contain;
  transform:translateY(calc(var(--wm-dy,0px) * 1.5));
}
.sales-hero-intro .marca-lockup-ico img { width:34px; height:34px; }
.sales-hero-intro .marca-lockup-n { font-size:1.4rem; }
.sales-hero-intro .marca-lockup .marca-wm[src$="/marca-amazon-web-service-oscuro.png"] {
  height:48px; transform:none;
}
.sales-hero:has(.product-stage-immersive) .sales-hero-grid {
  max-width:1540px; grid-template-columns:minmax(300px,.78fr) minmax(0,1.35fr); gap:42px;
}
.sales-hero-intro h1 { font-size:clamp(2.1rem,3.2vw,3.3rem); }
.sales-hero-details .lead { font-size:1rem; line-height:1.65; }
.story-explanation { display:grid; max-width:500px; margin:0 0 24px; }
.story-note { grid-area:1/1; visibility:hidden; }
.story-note.is-active { visibility:visible; }
.story-explanation strong { display:block; color:#8cddb1; font-size:.88rem; font-weight:700; margin-bottom:8px; }
.story-explanation p { color:#d0dce2; font-size:.88rem; line-height:1.55; margin:0; }
.story-explanation small { display:block; color:#a7b9c4; font-size:.7rem; margin-top:8px; }
.story-explanation small:empty { display:none; }
.media-enlarge-note { color:#a7b9c4; font-size:.72rem; margin:12px 0 0; }
.media-video-more { margin-top:16px; color:#d0dce2; font-size:.8rem; }
.media-video-more summary { cursor:pointer; min-height:44px; padding-block:12px; }
.media-video-more[open] summary { margin-bottom:8px; }
.product-stage-captures .media-viewport { display:grid; align-items:center; min-height:var(--capture-height,0px); }
.product-stage-captures .media-viewport>figure { grid-area:1/1; min-width:0; margin:0; }
.sales-page .sales-secondary { min-height:44px; }
.sales-hero .product-stage-immersive { perspective:1400px; transform-origin:50% 45%; }
.sales-hero .product-stage-immersive .stage-nav { margin:0 0 16px auto; }
.sales-hero .product-stage-immersive .stage-nav button { min-height:44px; }
.product-stage-immersive .media-viewport { min-width:0; }
.sales-hero .product-stage-immersive .stage-image {
  display:flex; align-items:center; justify-content:center; padding:0; aspect-ratio:auto; height:auto; min-height:0; width:100%;
}
.sales-hero .product-stage-immersive .stage-image img {
  width:auto; height:auto; max-width:100%; max-height:clamp(280px,calc(100svh - 300px),620px); object-fit:contain;
  border-radius:14px; filter:drop-shadow(0 22px 28px #0004);
}
.sales-hero .product-stage-immersive .media-viewport-wide .stage-image { aspect-ratio:auto; }
.sales-hero .product-stage-immersive figcaption {
  text-align:left; padding:12px 0 0; min-height:56px; font-size:.84rem; font-weight:500;
}
.sales-hero .product-stage-immersive figcaption span { font-size:.68rem; line-height:1.5; }
.sales-hero .product-stage-captures figcaption.sr-only { padding:0; min-height:0; }
.media-thumbs { display:flex; gap:10px; margin-top:16px; }
.media-thumbs button {
  display:flex; align-items:center; flex:1; min-width:0; min-height:62px; gap:10px;
  text-align:left; color:#bfd0d5; background:#ffffff06;
  border:1px solid #a9c4cf30; border-radius:12px; padding:7px;
  font:500 .74rem/1.35 var(--font-body); cursor:pointer;
  transition:background .2s,border-color .2s;
}
.media-thumbs button img { width:62px; height:44px; object-fit:cover; object-position:top; border-radius:6px; background:#eaf1ee; }
.media-thumbs button span { padding-right:5px; }
.media-thumbs button[aria-selected=true] { color:white; background:#25704d3b; border-color:#72c59f; }
.media-thumbs button:hover { background:#ffffff0e; }
.media-thumbs button:focus-visible { outline:2px solid #82dbba; outline-offset:3px; }
.product-stage-immersive [hidden] { display:none!important; }
.stage-video { aspect-ratio:16/9; background:#06111b; border-radius:14px; overflow:hidden; box-shadow:0 22px 38px #0004; }
.stage-video video { display:block; width:100%; height:100%; object-fit:contain; }
.product-stage-immersive .product-demo { min-height:420px; }
@media(min-width:1800px) {
  .sales-hero:has(.product-stage-immersive) .sales-hero-grid { gap:64px; }
}
@media(max-width:1100px) and (min-width:761px) {
  .sales-hero:has(.product-stage-immersive) .sales-hero-grid { grid-template-columns:.85fr 1.15fr; gap:28px; }
  .media-thumbs button { flex-direction:column; gap:6px; text-align:center; }
  .media-thumbs button img { width:100%; height:45px; }
  .media-thumbs button span { padding:0; }
  .sales-hero .product-stage-immersive .stage-nav { gap:1px; padding:4px; }
  .sales-hero .product-stage-immersive .stage-nav button { padding:8px; font-size:.67rem; }
  /* A tablet has two hero columns, so this panel is only ~390px wide at 768px. */
  .product-stage-immersive .demo-board { gap:8px; }
  .product-stage-immersive .demo-column { padding:8px; }
  .product-stage-immersive .demo-column-label { font-size:.6rem; }
  .product-stage-immersive .demo-task { padding:8px; }
  .product-stage-immersive .demo-task strong { font-size:.7rem; }
  .product-stage-immersive .demo-task-footer { flex-wrap:wrap; }
  /* AWS uses the standalone demo: keep its three services legible in the narrower column. */
  .sales-hero [data-demo="amazon-web-service"] .demo-cloud { grid-template-columns:1fr; min-height:0; gap:8px; }
  .sales-hero [data-demo="amazon-web-service"] .demo-cloud>div { display:grid; grid-template-columns:30px minmax(0,1fr); gap:4px 12px; padding:12px 16px; text-align:left; }
  .sales-hero [data-demo="amazon-web-service"] .demo-cloud svg { grid-row:1/3; align-self:center; }
  .sales-hero [data-demo="amazon-web-service"] .demo-cloud strong,
  .sales-hero [data-demo="amazon-web-service"] .demo-cloud span { min-width:0; }
}
@media(max-width:760px) {
  .sales-hero-frame { padding-block:24px 32px; }
  .sales-hero-intro .marca-lockup .marca-wm {
    height:calc(var(--wm-h,22px) * 1.35);
    transform:translateY(calc(var(--wm-dy,0px) * 1.35));
  }
  .sales-hero-intro .marca-lockup .marca-wm[src$="/marca-amazon-web-service-oscuro.png"] {
    height:40px; transform:none;
  }
  .sales-hero:has(.product-stage-immersive) .sales-hero-grid { display:flex; flex-direction:column; gap:24px; align-items:stretch; }
  .sales-hero:has(.product-stage-immersive) .sales-hero-copy { display:contents; }
  .sales-hero-intro { order:0; }
  .sales-hero:has(.product-stage-immersive) .sales-visual { order:1; width:100%; max-width:620px; }
  .sales-hero-details { order:2; }
  .sales-hero-intro h1 { margin:14px 0 0; font-size:clamp(2rem,7.7vw,2.7rem); }
  .sales-hero-copy .sales-kicker { margin-top:18px; font-size:.72rem; }
  .sales-hero .product-stage-immersive .stage-nav { margin:0 auto 16px; gap:2px; }
  .sales-hero .product-stage-immersive .stage-nav button { min-height:44px; padding:8px 10px; font-size:.69rem; }
  .sales-hero .product-stage-immersive .stage-image { height:auto; aspect-ratio:auto; }
  .sales-hero .product-stage-immersive .stage-image img { max-height:390px; border-radius:10px; }
  .sales-hero .product-stage-immersive figcaption { min-height:0; padding-top:14px; font-size:.78rem; }
  .media-thumbs { gap:7px; margin-top:14px; }
  .media-thumbs button { flex-direction:column; gap:6px; min-height:80px; padding:6px; font-size:.67rem; text-align:center; }
  .media-thumbs button img { width:100%; height:48px; }
  .media-thumbs button span { padding:0; }
  .sales-hero-details .lead { font-size:.92rem; max-width:620px; margin-bottom:20px; }
  .sales-hero-details .sales-actions { gap:16px; }
  .sales-hero-details .sales-assurance { margin-top:16px; }
  .product-stage-immersive .product-demo { min-height:0; }
}
@media(prefers-reduced-motion:reduce) {
  .media-thumbs button { transition:none; }
}

/* Un tramo por vista. Sticky nativo mantiene la captura completa sin capturar gestos. */
.sales-hero.sales-hero-story { overflow:visible; }
.sales-hero-story, .sales-hero-story .sales-visual { overflow-anchor:none; }
.sales-hero-story .sales-hero-grid { position:relative; align-items:center; z-index:1; }
.sales-hero-story .sales-visual { margin-block:0; }
.sales-hero-story .product-stage-immersive { perspective:none; }
.sales-hero-story .product-stage-captures .stage-image { min-height:var(--capture-height,0px); }
.sales-hero-story.is-story-active .media-viewport {
  transform:scale(var(--story-scale,1)); transform-origin:center center;
}
/* Antes de que zen.js mida, el visor ya parte en la escala inicial del recorrido
   (.88 en escritorio): al cargar no se ve encogerse de golpe. */
@media(min-width:761px) and (prefers-reduced-motion:no-preference) {
  .sales-hero-story:not(.is-story-auto) .media-viewport,
  .sales-hero-story.is-story-active .media-viewport { transform:scale(var(--story-scale,.88)); transform-origin:center center; }
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference) {
  .sales-hero-story.is-story-active .media-viewport { transform:scale(var(--story-scale,.95)); }
}
/* Fundido cruzado entre vistas (zen.js): la que entra pinta encima de la que sale. */
.sales-hero-story [data-media-panel] { position:relative; z-index:1; }
.sales-hero-story [data-media-panel].is-leaving { z-index:0; pointer-events:none; }
/* Gana a «.product-stage-immersive [hidden] { display:none!important }» sólo durante el fundido. */
.sales-hero-story [data-media-panel].is-leaving[hidden] { display:block!important; }
.sales-hero-story .media-steps { display:flex; gap:16px; margin-top:14px; }
.media-steps button {
  flex:1; display:flex; align-items:center; gap:8px; min-width:0; min-height:44px;
  padding:10px 0; border:0; border-top:2px solid #a9c4cf30; border-radius:0;
  background:transparent; color:#a5babe; cursor:pointer; text-align:left;
  font:500 .76rem/1.35 var(--font-body); transition:color .2s,border-color .2s;
}
.media-steps button small { color:#74918e; font-size:.65rem; }
.media-steps button[aria-selected=true] { color:#f0fbf5; border-color:#70daa6; }
.media-steps button[aria-selected=true] small { color:#70daa6; }
.media-steps button:focus-visible { outline:2px solid #82dbba; outline-offset:4px; }
.sales-hero-story [data-product-story] { min-height:var(--story-height,0px); }
.sales-hero-story.is-story-auto:not(.is-story-active) [data-product-story] { min-height:0; }
.sales-hero-story .zen-cloud-a { right:-8px; top:16px; width:clamp(200px,20vw,340px); opacity:.48; }
.sales-hero-story .zen-cloud-b { left:-16px; top:auto; bottom:16px; width:clamp(170px,18vw,300px); opacity:.4; }
@media(min-width:761px) {
  .sales-hero-story.is-story-active:not(.is-story-visual-only) { height:calc(var(--story-frame-height) + var(--story-distance)); }
  .sales-hero-story.is-story-active:not(.is-story-visual-only) .sales-hero-frame {
    position:sticky; top:var(--story-top); min-height:var(--story-frame-height);
    display:grid; align-items:center;
  }
  .sales-hero-story.is-story-visual-only .sales-visual { height:calc(var(--story-height) + var(--story-distance)); align-self:start; }
  .sales-hero-story.is-story-visual-only [data-product-story] { position:sticky; top:var(--story-top); }
  /* Si sólo se fija el visor, el texto arranca arriba junto a él y no centrado en
     la fila alta del recorrido (dejaba la columna izquierda vacía al cargar). */
  .sales-hero-story.is-story-visual-only .sales-hero-copy { align-self:start; }
  /* zen.js reduce la captura completa para que texto y visor quepan fijos juntos. */
  .sales-hero.sales-hero-story .product-stage-immersive .stage-image img { max-height:min(var(--story-image-limit,620px),clamp(280px,calc(100svh - 300px),620px)); }
}
@media(max-width:760px) {
  .sales-hero-story .sales-hero-grid { align-items:stretch; }
  .sales-hero-story .zen-cloud-a { top:10px; right:-8px; width:160px; opacity:.35; }
  .sales-hero-story .zen-cloud-b { top:280px; bottom:auto; left:-30px; width:180px; opacity:.28; }
  .sales-hero-story .media-steps { gap:12px; }
  .media-steps button { font-size:.69rem; gap:6px; }
  .media-steps button small { font-size:.61rem; }
  .sales-hero-story.is-story-active .sales-visual { height:calc(var(--story-height) + var(--story-distance)); }
  .sales-hero-story.is-story-active [data-product-story] { position:sticky; top:var(--story-top); }
  .sales-hero.sales-hero-story .product-stage-immersive .stage-image img { max-height:min(var(--story-image-limit,390px),clamp(180px,calc(100svh - 380px),390px)); }
  .sales-hero-story .product-stage-captures figcaption.sr-only {
    position:static; width:auto; height:auto; clip:auto; clip-path:none; overflow:visible;
    white-space:normal; margin:0; padding:16px 0 0; min-height:144px;
  }
  .sales-hero-story .product-stage-captures figcaption strong { display:block; color:#8cddb1; }
  .sales-hero-story .product-stage-captures figcaption span { display:block; color:#c0d0da; font-size:.75rem; }
  .sales-hero-story .product-stage-captures figcaption span:empty { display:none; }
  .sales-hero-story .sales-hero-details .story-explanation { display:none; }
  .sales-hero-story.is-story-active [data-product-story]::before {
    content:''; position:absolute; inset:-24px -24px -16px; z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse at 90% 5%,#1a667333,transparent 58%),#071424;
    /* Sus bordes eran una raya recta de lado a lado sobre el hero (23-10-2026):
       el fondo entra y sale en los mismos 24 y 16 px que sobresale del visor. */
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 16px),transparent);
    mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 16px),transparent);
  }
}
@media(prefers-reduced-motion:reduce) {
  .media-steps button { transition:none; }
  .sales-hero-story.is-story-active { height:auto; }
  .sales-hero-story.is-story-active .sales-visual { height:auto; }
  .sales-hero-story.is-story-active .sales-hero-frame,
  .sales-hero-story.is-story-active [data-product-story],
  .sales-hero-story [data-product-story] { position:relative; top:auto; min-height:0; }
  .sales-hero-story .media-viewport { transform:none!important; }
}