/* Alphyx v6 — presentación del ejemplo Estudio Espacios en el bloque Páginas web (portada) y en
 * paginas-web.html. Se añade a styles.css/motion.css sin modificarlos (salvo la regla de foco al final
 * de styles.css). Movimiento en piloto.js. Las fotos (o sus marcadores «Fotografía pendiente») usan las
 * mismas clases .ee-media/.ee-fill/.ee-ph que el ejemplo, con estilo propio aquí. Identidad Alphyx:
 * tipografía del sistema, tinta #191b20, azul #0068d9, superficies #f5f5f7 y noche #080a0e. */

.pilot-link { display:inline-flex; align-items:center; min-height:44px; margin-top:10px; font-size:15px; color:var(--blue); }
.pilot-link:hover { text-decoration:underline; text-underline-offset:4px; }
.detail-hero .pilot-hero-link { background:transparent; color:var(--light-blue); border-color:var(--light-blue); }
.detail-hero .pilot-hero-link:hover { background:#182536; }
.detail-hero .pilot-hero-link:focus-visible { outline-color:var(--light-blue); }

/* ——— Fotografía y marcadores ——— */
.pw-stack .ee-media, .pw-shot .ee-media { position:relative; overflow:hidden; background:#dcdcd6; }
.pw-stack .ee-fill, .pw-shot .ee-fill { position:absolute; inset:0; }
.pw-stack .ee-fill img, .pw-shot .ee-fill img { width:100%; height:100%; object-fit:cover; }
.pw-stack .ee-ph, .pw-shot .ee-ph { background:radial-gradient(ellipse at 72% 18%, #ffffff80, transparent 58%), linear-gradient(160deg,#e4e3dd,#cecdc6); }
.pw-stack .ee-ph-note, .pw-shot .ee-ph-note { position:absolute; left:8px; bottom:8px; padding:3px 7px; background:#f6f6f3eb; color:#4f5256; font-size:11px; line-height:1.3; }

/* ——— Composición navegador + teléfono ——— */
.pw-stack { position:relative; width:min(920px, calc(100% - 64px)); margin:0 auto; padding:0 9% 5% 0; text-align:left; }
.pw-browser { position:relative; border-radius:12px; overflow:hidden; background:#f6f6f3; color:#151616; box-shadow:0 0 0 1px #c9ccd1, 0 30px 60px #12263f24, 0 2px 6px #12263f14; }
.pw-chrome { display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#eceef1; border-bottom:1px solid #d7dbe0; font-size:11px; color:#595f69; }
.pw-chrome i { width:9px; height:9px; border-radius:50%; background:#c4c9d0; }
.pw-chrome span { margin-left:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pw-site { padding:0; }
.pw-site-nav { display:flex; align-items:center; gap:14px; padding:10px 4.5%; border-bottom:1px solid #d4d3cd; font-size:11px; color:#4f5256; }
.pw-site-nav b { margin-right:auto; font-weight:500; font-size:13px; color:#151616; letter-spacing:-.01em; }
.pw-site-nav .pw-cta { background:#151616; color:#f6f6f3; padding:4px 9px; border-radius:2px; }
.pw-site-title { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding:5% 4.5% 4%; }
.pw-site-title strong { font-weight:300; font-size:clamp(24px,4.2vw,50px); line-height:.95; letter-spacing:-.045em; }
.pw-site-title small { max-width:15em; font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif; font-size:clamp(11px,1.2vw,14px); color:#4f5256; }
.pw-photo--site { aspect-ratio:2/1; }
.pw-phone { position:absolute; right:0; bottom:0; width:25%; min-width:128px; padding:7px; border-radius:26px; background:#191b20; box-shadow:0 28px 50px #0b162440; }
.pw-phone-screen { border-radius:20px; overflow:hidden; background:#f6f6f3; color:#151616; padding-bottom:14px; }
.pw-phone-bar { display:flex; justify-content:space-between; padding:10px 12px 8px; font-size:10px; color:#4f5256; }
.pw-phone-bar b { font-weight:500; color:#151616; }
.pw-photo--phone { aspect-ratio:4/5; }
.pw-phone-screen small { display:block; margin:10px 12px 0; font:400 9px/1.3 ui-monospace,Consolas,monospace; color:#4f5256; }
.pw-phone-screen strong { display:block; margin:4px 12px 0; font-weight:300; font-size:clamp(15px,1.7vw,21px); line-height:1.05; letter-spacing:-.03em; }
.pw-phone-screen p { margin:6px 12px 0; font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif; font-size:10px; line-height:1.4; color:#4f5256; }
.pw-promo .pw-promo-art { padding:10px 0 0; }
.pw-hero-art { margin-top:52px; }
.pw-hero .pw-browser { box-shadow:0 0 0 1px #3a414b, 0 40px 80px #0009; }
.pw-hero .pw-phone { box-shadow:0 0 0 1px #3a414b, 0 30px 60px #000a; }

/* ——— #ejemplo: pantalla por pantalla ——— */
.pw-example { padding:120px 0 110px; background:#fff; }
.pw-example-head { max-width:1120px; }
.pw-example-head h2 { font-size:clamp(34px,4.3vw,60px); max-width:760px; }
.pw-example-head p:not(.eyebrow) { font-size:19px; color:var(--muted); max-width:620px; margin-top:24px; }
.pw-rows { list-style:none; margin-top:72px; padding:0; display:grid; gap:96px; }
.pw-row { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:48px 64px; align-items:center; }
.pw-row:nth-child(even) .pw-row-media { order:2; }
.pw-row:nth-child(even) { grid-template-columns:minmax(0,4fr) minmax(0,7fr); }
.pw-shot { border-radius:12px; overflow:hidden; background:#f6f6f3; color:#151616; box-shadow:0 0 0 1px #d7dbe0, 0 24px 48px #12263f1a; }
.pw-mini { position:relative; aspect-ratio:16/10; overflow:hidden; }
.pw-mini--home .pw-mini-title { display:flex; justify-content:space-between; align-items:flex-end; padding:5% 5% 3.5%; }
.pw-mini--home .pw-mini-title b { font-weight:300; font-size:clamp(18px,2.6vw,34px); line-height:.95; letter-spacing:-.045em; }
.pw-mini--home .pw-mini-title small { font-size:11px; color:#4f5256; }
.pw-mini-hero { position:absolute !important; left:0; right:0; bottom:0; height:62%; }
.pw-mini--index { padding:4% 5%; display:grid; align-content:start; gap:10px; }
.pw-mini-tabs { display:flex; gap:14px; padding-bottom:8px; border-bottom:1px solid #d4d3cd; font-size:11px; color:#4f5256; }
.pw-mini-tabs b { color:#151616; font-weight:500; box-shadow:inset 0 -2px 0 #151616; }
.pw-mini-row { display:grid; grid-template-columns:40% 1fr; gap:14px; align-items:end; }
.pw-mini-row:nth-child(odd) { grid-template-columns:1fr 40%; }
.pw-mini-row:nth-child(odd) .ee-media { order:2; }
.pw-mini-row .ee-media { aspect-ratio:3/1.25; }
.pw-mini-row p { display:grid; font-size:11px; color:#4f5256; }
.pw-mini-row p b { font-weight:400; font-size:clamp(12px,1.3vw,16px); color:#151616; letter-spacing:-.02em; }
.pw-mini--ficha .pw-mini-name { position:absolute; left:5%; top:6%; font-weight:300; font-size:clamp(18px,2.6vw,34px); letter-spacing:-.045em; }
.pw-mini--ficha .pw-mini-hero { height:52%; bottom:22%; }
.pw-mini--ficha dl { position:absolute; left:5%; right:5%; bottom:4%; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0; font-size:11px; }
.pw-mini--ficha dl div { border-top:1px solid #d4d3cd; padding-top:4px; }
.pw-mini--ficha dt { color:#4f5256; }
.pw-mini--ficha dd { margin:0; }
.pw-mini--form { display:grid; grid-template-columns:1fr 1fr; }
.pw-mini--form > .ee-media { height:100%; }
.pw-mini-form { display:grid; align-content:center; gap:5px; padding:6% 8%; font-size:11px; color:#4f5256; }
.pw-mini-form b { font-weight:300; font-size:clamp(16px,2vw,26px); color:#151616; letter-spacing:-.03em; margin-bottom:6px; }
.pw-mini-form i { display:block; height:22px; border:1px solid #8a8d91; background:#fff; margin-bottom:6px; }
.pw-mini-form i.pw-tall { height:46px; }
.pw-row-text h3 { font-size:clamp(26px,2.6vw,36px); margin-top:8px; }
.pw-row-text p:not(.pw-step) { font-size:17px; color:var(--muted); margin-top:14px; max-width:44ch; }
.pw-step { font-size:14px; color:var(--muted); }
.pw-open { display:inline-flex; align-items:center; min-height:44px; margin-top:14px; font-size:17px; }
.pw-open:hover { text-decoration:underline; text-underline-offset:4px; }
.pw-example-foot { margin-top:88px; text-align:center; }
.pw-example-foot .actions { justify-content:center; }

/* ——— #detalles ——— */
.pw-notes { background:var(--soft); padding:110px 0; }
.pw-notes-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px 64px; }
.pw-notes h2 { font-size:clamp(32px,3.6vw,50px); max-width:520px; }
.pw-notes-list { margin:0; border-top:1px solid var(--line); }
.pw-notes-list div { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,7fr); gap:8px 32px; padding:24px 0; border-bottom:1px solid var(--line); }
.pw-notes-list dt { font-size:21px; font-weight:600; letter-spacing:-.02em; }
.pw-notes-list dd { margin:0; font-size:17px; color:var(--muted); }

/* ——— Créditos visibles de las fotografías (autor + enlace + licencia) ——— */
.pw-credits { font-size:12px; line-height:1.5; color:var(--muted); text-align:center; margin:6px 20px 0; }
.pw-credits a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.pw-hero .pw-credits { color:#b9bec8; }
.pw-hero .pw-credits a { color:var(--light-blue); }
.pw-hero .pw-credits a:focus-visible { outline-color:var(--light-blue); }

/* ——— Escena «Del escritorio al teléfono» (paginas-web.html) ———
 * Sin JS o con movimiento reducido: una sección normal con la ventana de escritorio en la portada y los
 * cuatro pasos en texto. Con movimiento (.pw-scene-live, piloto.js): la sección mide varias pantallas, el
 * contenido queda fijo (sticky) y el scroll nativo estrecha la ventana hasta la forma de un teléfono y
 * recorre las cuatro pantallas. El contenido de cada pantalla se reorganiza con container queries. */
.pw-scene { background:var(--soft); padding:104px 0 88px; }
.pw-scene-head { text-align:center; }
.pw-scene-head h2 { font-size:clamp(34px,4.3vw,60px); }
.pw-scene-stage { display:flex; justify-content:center; align-items:center; width:min(1040px,calc(100% - 40px)); margin:48px auto 0; }
.pw-device { position:relative; display:flex; flex-direction:column; width:min(980px,100%); aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:#f6f6f3; color:#151616; box-shadow:0 0 0 1px #c9ccd1, 0 30px 60px #12263f24, 0 2px 6px #12263f14; }
.pw-device-bar { flex:none; display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#eceef1; border-bottom:1px solid #d7dbe0; font-size:11px; color:#595f69; overflow:hidden; }
.pw-device-bar i { flex:none; width:9px; height:9px; border-radius:50%; background:#c4c9d0; }
.pw-device-bar span { margin-left:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pw-device-screens { position:relative; flex:1; min-height:0; container-type:size; }
.pw-screen { position:absolute; inset:0; display:flex; flex-direction:column; background:#f6f6f3; }
.pw-screen:not(:first-child) { visibility:hidden; }
.pw-s-nav { flex:none; display:flex; align-items:center; gap:12px; padding:9px 4%; border-bottom:1px solid #d4d3cd; font-size:11px; color:#4f5256; white-space:nowrap; overflow:hidden; }
.pw-s-nav b { margin-right:auto; font-weight:500; font-size:13px; color:#151616; letter-spacing:-.01em; }
.pw-s-nav .pw-cta { background:#151616; color:#f6f6f3; padding:4px 9px; border-radius:2px; }
.pw-s-tab { color:#151616; box-shadow:inset 0 -2px 0 #151616; }
.pw-device .ee-media { position:relative; overflow:hidden; min-height:0; background:#dcdcd6; }
.pw-device .ee-fill { position:absolute; inset:0; }
.pw-device .ee-fill img { width:100%; height:100%; object-fit:cover; }
.pw-s-home { flex:1; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); }
.pw-s-home strong { padding:4% 4% 3%; font-weight:300; font-size:clamp(18px,9cqh,56px); line-height:.95; letter-spacing:-.045em; }
.pw-s-list { flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3%; padding:4%; }
.pw-s-item { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:8px; min-height:0; }
.pw-s-item p { display:grid; margin:0; font-size:11px; color:#4f5256; }
.pw-s-item b { font-weight:400; font-size:clamp(12px,4cqh,18px); color:#151616; letter-spacing:-.02em; }
.pw-s-ficha { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:4%; padding:4%; }
.pw-s-ficha dl { align-self:end; margin:0; font-size:11px; }
.pw-s-ficha dl div { padding:6px 0; border-top:1px solid #d4d3cd; }
.pw-s-ficha dt { color:#4f5256; }
.pw-s-ficha dd { margin:0; font-size:13px; }
.pw-s-form { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.pw-s-fields { display:grid; align-content:center; gap:5px; padding:6% 8%; font-size:11px; color:#4f5256; }
.pw-s-fields i { display:block; height:22px; border:1px solid #8a8d91; background:#fff; margin-bottom:6px; }
.pw-s-fields i.pw-tall { height:46px; }
.pw-s-fields em { justify-self:start; margin-top:4px; padding:6px 12px; background:#151616; color:#f6f6f3; font-style:normal; }
@container (aspect-ratio < 1) {
  .pw-s-nav span:not(.pw-cta):not(.pw-s-tab) { display:none; }
  .pw-s-home strong { font-size:clamp(18px,6cqw,40px); padding:7% 7% 5%; }
  .pw-s-list { grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(3,minmax(0,1fr)); padding:6%; gap:4%; }
  .pw-s-item { grid-template-columns:44% minmax(0,1fr); grid-template-rows:minmax(0,1fr); align-items:center; }
  .pw-s-item b { font-size:clamp(12px,5.5cqw,18px); }
  .pw-s-ficha { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; padding:6%; }
  .pw-s-form { grid-template-columns:minmax(0,1fr); grid-template-rows:30% minmax(0,1fr); }
}
.pw-scene-steps { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px 28px; margin-top:40px; padding:0; max-width:1040px; }
.pw-scene-steps li { font-size:15px; line-height:1.45; color:var(--muted); }
.pw-scene-steps b { color:var(--ink); font-weight:600; }
.pw-scene-bar { display:block; height:2px; margin-bottom:14px; background:var(--line); overflow:hidden; }
.pw-scene-bar span { display:block; height:100%; background:var(--ink); transform-origin:0 50%; transform:scaleX(0); }
.pw-scene-steps li:first-child .pw-scene-bar span { transform:none; }
.pw-scene .pw-credits { margin-top:20px; }
.pw-scene-live { height:360vh; min-height:2400px; padding:0; }
.pw-scene-live .pw-scene-pin { position:sticky; top:var(--pw-nav-h,64px); height:calc(100svh - var(--pw-nav-h,64px)); display:flex; flex-direction:column; justify-content:center; padding:28px 0 20px; overflow:hidden; }
.pw-scene-live .pw-scene-stage { flex:1; min-height:0; margin-top:24px; }
.pw-scene-live .pw-device { aspect-ratio:auto; flex:none; }
.pw-scene-live .pw-screen { visibility:hidden; }
.pw-scene-live .pw-screen.is-on { visibility:visible; }
.pw-scene-live .pw-scene-steps { margin-top:24px; }
.pw-scene-live .pw-scene-steps li:first-child .pw-scene-bar span { transform:scaleX(0); }

/* Estados previos a la revelación: solo con JS, IntersectionObserver y movimiento permitido. */
.pilot-motion .pilot-pending .pw-browser, .pilot-motion .pilot-pending.pw-row-media .pw-shot { clip-path:inset(100% 0 0 0 round 12px); }
.pilot-motion .pilot-pending .pw-phone { opacity:0; }
.pilot-motion .pw-row-media.pilot-pending + .pw-row-text > * { opacity:0; }

@media(max-width:1020px) {
  .pw-row, .pw-row:nth-child(even) { grid-template-columns:minmax(0,1fr); gap:28px; }
  .pw-row:nth-child(even) .pw-row-media { order:0; }
  .pw-notes-grid { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:760px) {
  .pw-scene { padding:72px 0 64px; }
  .pw-scene-head h2 { font-size:34px; }
  .pw-scene-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; margin-top:28px; }
  .pw-scene-steps li { font-size:13px; }
  .pw-scene-bar { margin-bottom:8px; }
  .pw-scene-live .pw-scene-pin { padding:16px 0 12px; }
  .pw-scene-live .pw-scene-stage { margin-top:14px; }
  .pw-scene-live .pw-scene-steps { margin-top:14px; }
  .pw-stack { width:calc(100% - 40px); padding-right:14%; }
  .pw-site-nav span:not(.pw-cta) { display:none; }
  .pw-site-title small { display:none; }
  .pw-phone { width:34%; min-width:0; padding:5px; border-radius:18px; }
  .pw-phone-screen { border-radius:14px; }
  .pw-phone-screen p, .pw-phone-bar span { display:none; }
  .pw-example { padding:72px 0; }
  .pw-rows { margin-top:48px; gap:64px; }
  .pw-mini-tabs span:nth-child(n+3) { display:none; }
  .pw-notes { padding:72px 0; }
  .pw-notes-list div { grid-template-columns:minmax(0,1fr); }
  .pw-hero-art { margin-top:36px; }
}
@media(prefers-reduced-motion:reduce) {
  .pilot-link, .pw-open { transition:none!important; }
}