/* =====================================================================
   PÁGINA DE PROYECTO (ADR 0002)

   Componentes de los casos de estudio (<proyecto>.html). Se apoyan en los
   tokens de css/styles.css. Cada página define en <body> dos colores:
   --pc (panel claro) y --pd (panel oscuro).
   ===================================================================== */

/* ================= BARRA SUPERIOR ================= */
.pbar{ position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:calc(6px + env(safe-area-inset-top,0px)) 16px 6px; min-height:56px; background:var(--paper); border-bottom:1.5px solid var(--ink); }
.pbar a{ text-decoration:none; min-height:44px; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
.pbar b{ font-weight:800; font-variation-settings:"wdth" 125; }

/* ================= CABECERA: TÍTULO, FRASE, FICHA Y EN CORTO ================= */
.phead{ padding:36px 16px 0; }
.phead h1{ margin:0; font-weight:900; font-variation-settings:"wdth" 125; font-size:min(13vw,112px); line-height:.95; letter-spacing:-.02em; }
.phead h1.long{ font-size:min(9.4vw,112px); }
.phead .res{ font-size:min(6.4vw,34px); margin-top:14px; max-width:24ch; }

.pficha{ list-style:none; margin:0; padding:0; border-top:1.5px solid var(--ink); }
.pficha li{ display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:10px; padding:12px 0; border-bottom:1px solid rgba(0,0,0,.14); font-size:15px; font-weight:600; line-height:1.35; }
.pficha .pico{ grid-row:1 / span 2; margin-top:1px; color:var(--muted); }
.pficha li > small, .pficha li > span{ grid-column:2; }
/* Cada dato de la ficha lleva su etiqueta (Rol, Año, Formato…) para que no quede como un valor suelto. */
.pficha small{ display:block; margin-bottom:3px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.pcorto{ padding:32px 16px 0; display:flex; flex-direction:column; gap:32px; }
.pcorto h2{ margin:0; font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:400; font-size:min(7vw,32px); line-height:1.1; }
.pcorto .plead{ margin-top:12px; max-width:62ch; }
.pcover{ margin-top:32px; background:var(--pc); overflow:hidden; display:flex; justify-content:center; align-items:flex-start; gap:3vw; padding:9vw 16px 0; height:min(74vw,680px); }
.pcover img{ flex:0 0 auto; width:min(28vw,290px); height:auto; border-radius:min(5vw,34px); box-shadow:0 24px 60px rgba(0,0,0,.22); }
.pcover img:nth-child(odd){ margin-top:9vw; }
/* Las capturas llevan esquinas suaves: muchas traen las suyas (ventanas, teléfonos) y un marco recto con sombra cuadrada se veía mal.
   Los paneles, tarjetas y miniaturas siguen rectos. */
/* .duo: dos piezas apaisadas (las hojas de cálculo de antes), escalonadas y a buen tamaño. */
.pcover.duo{ height:auto; align-items:center; gap:4vw; padding:8vw 16px; }
.pcover.duo img{ width:min(42vw,520px); border-radius:0; box-shadow:0 24px 50px rgba(10,20,50,.18); }
.pcover.duo img:nth-child(odd){ margin-top:0; }
.pcover.duo img:nth-child(2){ margin-top:10vw; }
.pcover.wide{ height:auto; padding:7vw 16px 0; }
.pcover.wide img{ width:min(100%,1180px); margin:0; border-radius:14px 14px 0 0; }

.plead{ margin:0; font-size:min(4.9vw,24px); line-height:1.4; font-weight:500; }


/* ================= SECCIONES DEL CASO ================= */
.psec{ padding:64px 16px 0; scroll-margin-top:64px; }
.psec > header{ border-top:1.5px solid var(--ink); padding-top:12px; display:flex; gap:16px; align-items:baseline; }
.psec h2{ margin:0; font-weight:900; font-variation-settings:"wdth" 125; font-size:min(6.6vw,52px); line-height:1.02; letter-spacing:-.02em; max-width:18ch; min-width:0; overflow-wrap:break-word; }
.ptxt p, .ptext > p{ font-size:17px; line-height:1.6; max-width:62ch; margin:16px 0 0; }
.ptxt h3{ margin:0; font-weight:800; font-variation-settings:"wdth" 125; font-size:22px; line-height:1.12; letter-spacing:-.01em; max-width:22ch; }
.ptxt p b{ font-weight:700; }
.pbody{ margin-top:8px; }

.plist{ margin:18px 0 0; padding:0; list-style:none; border-top:1.5px solid var(--ink); max-width:62ch; }
.plist li{ padding:14px 0; border-bottom:1.5px solid var(--ink); font-size:17px; line-height:1.5; }
.plist b{ font-weight:800; }
.prow{ display:grid; gap:22px; margin-top:44px; align-items:center; }
.pfig{ margin:0; min-width:0; }
.pfig figcaption{ margin-top:10px; font-size:13px; line-height:1.3; color:var(--muted); }
.pfig figcaption b{ color:var(--ink); font-weight:600; }

.pzoom > div{ background:var(--pc); border-radius:var(--card-radius); padding:10% 12%; display:flex; justify-content:center; align-items:center; overflow:hidden; }
.pzoom.dark > div{ background:var(--pd); }
.pzoom img, .pzoom video{ display:block; width:100%; max-width:440px; height:auto; border-radius:14px; box-shadow:0 20px 48px rgba(0,0,0,.2); }
.pzoom.big img{ max-width:none; }
/* .ui: componentes de interfaz redibujados (PNG transparente con sus propias esquinas): sin recorte y con una sombra que sigue la forma. */
.pzoom.ui > div{ padding:9% 10%; }
.pzoom.ui img{ max-width:400px; border-radius:0; box-shadow:none; filter:drop-shadow(0 18px 30px rgba(10,20,50,.16)) drop-shadow(0 2px 4px rgba(10,20,50,.08)); }
.pzoom.ui.tall img{ max-width:360px; }
.pzoom.ui.wide img{ max-width:none; }
.pzoom.ui.dark img{ filter:drop-shadow(0 22px 40px rgba(0,0,0,.45)); }
.pzoom.bare img{ box-shadow:none; border-radius:0; mix-blend-mode:multiply; }
.pzoom.phone img, .pzoom.phone video{ max-width:300px; border-radius:30px; }

.pband{ margin:44px -16px 0; background:var(--pc); padding:8vw 16px; }
.pband.dark{ background:var(--pd); }
.pband img{ display:block; width:100%; max-width:1100px; height:auto; margin:0 auto; border-radius:14px; box-shadow:0 20px 48px rgba(0,0,0,.2); }
.pband figcaption{ max-width:1100px; margin:14px auto 0; color:var(--ink); }
.pband.dark figcaption{ color:var(--light); }
.pband.narrow img{ max-width:760px; }
.pband.narrow figcaption{ max-width:760px; }

.ptrio{ margin:44px -16px 0; background:var(--pd); padding:9vw 16px 7vw; }
.ptrio > div{ display:flex; justify-content:center; align-items:flex-start; gap:3vw; }
.ptrio img{ flex:0 0 auto; width:min(28vw,280px); height:auto; border-radius:min(4.5vw,30px); }
.ptrio img:nth-child(2){ margin-top:5vw; }
.ptrio figcaption{ max-width:920px; margin:22px auto 0; color:var(--light); }
.ptrio figcaption b{ color:var(--light); }

.pwindow > div{ border:1.5px solid var(--ink); border-radius:var(--card-radius); overflow:auto; max-height:min(78vh,760px); background:#DDD; }
.pwindow img{ display:block; width:100%; height:auto; }

.pnext{ margin:72px 16px 0; border-top:1.5px solid var(--ink); }
.pnext a{ display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:72px; border-bottom:1.5px solid var(--ink); text-decoration:none; }
.pnext small{ display:block; font-size:12px; color:var(--muted); }
.pnext strong{ font-weight:800; font-variation-settings:"wdth" 125; font-size:24px; letter-spacing:-.01em; }
.ppage footer a{ min-height:44px; display:inline-flex; align-items:center; }

@media (min-width:900px){
  .pbar, .phead, .pcorto, .psec{ padding-left:40px; padding-right:40px; }
  .pnext{ margin-left:40px; margin-right:40px; }
  .pcover{ gap:44px; padding-top:72px; height:600px; }
  .pcover img:nth-child(odd){ margin-top:72px; }
  .pcover.wide{ padding:64px 40px 0; }
    .psec{ padding-top:72px; }
  .prow{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; margin-top:48px; }
  .prow.flip > .ptxt{ order:2; }
  .prow.top{ align-items:start; }
  /* dos figuras lado a lado: marcos de la misma altura, con la imagen centrada */
  .prow.top:has(> .pfig + .pfig){ align-items:stretch; }
  .prow.top > .pfig.pzoom{ display:flex; flex-direction:column; }
  .prow.top > .pfig.pzoom > div{ flex:1; }
  .pband{ margin-left:-40px; margin-right:-40px; padding:64px 40px; }
  .ptrio{ margin-left:-40px; margin-right:-40px; padding:72px 40px 56px; }
  .ptrio > div{ gap:44px; }
  .ptrio img:nth-child(2){ margin-top:56px; }
    .ppage footer{ padding-left:40px; padding-right:40px; }
}
/* ================= ESCRITORIO ANCHO: DOS COLUMNAS ================= */
/* Desde 1000 px el texto deja de ir en una columna estrecha con media pantalla vacía:
   título a la izquierda y contenido a la derecha, en una retícula 4 / 8. */
@media (min-width:1000px){
  /* Encabezado en bloque: título, frase y etiquetas; debajo, la ficha en una fila de columnas a todo el ancho. */
  .phead{ padding-top:56px; }
  .phead h1, .phead h1.long{ font-size:clamp(56px,6.2vw,96px); }
  .phead .res{ font-size:clamp(24px,2.1vw,32px); max-width:32ch; margin-top:18px; }
  .phead .tags{ margin-top:16px; }

  /* «En corto» usa la misma retícula 4 / 8 y la misma línea que las secciones. */
  /* Ficha a la izquierda y «En corto» a la derecha, en la misma retícula 4 / 8 que las secciones. */
  .pcorto{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:64px; align-items:start; padding-top:48px; }
  .pficha{ border-top:0; }
  .pficha li:first-child{ padding-top:2px; }
  .pficha li:last-child{ border-bottom:0; }
  .pcorto h2{ font-size:clamp(28px,2.4vw,36px); }
  .pcorto .plead{ margin-top:16px; max-width:60ch; font-size:clamp(19px,1.45vw,22px); line-height:1.55; }

  .psec{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:64px; align-items:start; }
  .psec::before{ content:""; grid-column:1 / -1; border-top:1.5px solid var(--ink); margin-bottom:14px; }
  .psec > header{ grid-column:1; border-top:0; padding-top:0; }   /* sin sticky: al bajar se montaba sobre las imágenes a todo el ancho */
  .psec h2{ font-size:clamp(30px,3.1vw,46px); max-width:none; }
  .psec > .ptext{ grid-column:2; }
  .psec > header + .ptext{ grid-row:2; }
  .psec > .prow, .psec > .pfig, .psec > .pslider{ grid-column:1 / -1; }
  .ptext > p{ font-size:18px; max-width:66ch; }
  .ptext > p:first-child{ margin-top:0; }
  .ptext > .plist:first-child{ margin-top:0; }
  .plist{ max-width:66ch; }
  .plist li{ font-size:18px; }
  .ptxt p{ font-size:18px; }
  .ptxt h3{ font-size:26px; }
}
@media (prefers-reduced-motion: no-preference){
  .pzoom img, .pband img{ transition:transform .65s cubic-bezier(.16,1,.3,1); }
  .pzoom:hover img{ transform:scale(1.03); }
}

/* Portada de fotos (Cromática): tres fotos verticales de la sala en uso, la del centro más abajo. */
.pcover.fotos{ height:auto; align-items:flex-start; gap:3vw; padding:8vw 16px 9vw; background:var(--pd); }
.pcover.fotos img{ width:min(27vw,360px); border-radius:min(2.4vw,14px); box-shadow:0 24px 50px rgba(0,0,0,.3); }
.pcover.fotos img:nth-child(odd){ margin-top:0; }
.pcover.fotos img:nth-child(2){ margin-top:7vw; }

/* Texto al lado de una foto alta (Fantasía, «Antes»). */
.pzoom.tall img{ max-width:320px; }

/* Dos piezas en un mismo marco: la foto real y su dibujo (Fantasía, la bolsita). */
.pzoom.par > div{ gap:6%; padding:9% 7%; align-items:center; }
.pzoom.par img{ width:50%; min-width:0; max-width:300px; }
.pzoom.par img.dibujo{ box-shadow:none; border-radius:0; mix-blend-mode:multiply; }

/* Carrusel: se desliza con el dedo o el trackpad; las flechas las mueve js/proyecto.js. */
.pslider{ margin:44px -16px 0; background:var(--pc); padding:8vw 0 6vw; }
.pslider-pista{ position:relative; display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:0 max(32px, calc((100% - 1100px) / 2)); scroll-padding:0 max(32px, calc((100% - 1100px) / 2)); }
.pslider-pista::-webkit-scrollbar{ display:none; }
.pslider-pista:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.pslide{ flex:0 0 min(calc(100% - 64px), 1100px); margin:0; scroll-snap-align:center; }
.pslide img{ display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 20px 48px rgba(0,0,0,.18); }
.pslide figcaption{ margin-top:12px; }
.pslider-ctrl{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:22px; }
.pslider-ctrl button{ width:44px; height:44px; display:grid; place-items:center; border:1.5px solid var(--ink); border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; transition:background .2s, color .2s, opacity .2s; }
.pslider-ctrl button:hover:not(:disabled){ background:var(--ink); color:var(--paper); }
.pslider-ctrl button:disabled{ opacity:.3; cursor:default; }
.pslider-cuenta{ font-size:13px; font-weight:700; min-width:44px; text-align:center; }
@media (min-width:900px){
  .pcover.fotos{ gap:40px; padding:64px 40px 80px; }
  .pcover.fotos img:nth-child(2){ margin-top:64px; }
  .pslider{ margin-left:-40px; margin-right:-40px; padding:64px 0 48px; }
}