/* Selección de diseño: imágenes completas y estilos limitados a la galería. */
#diseno { scroll-margin-top: 110px; }
.design-heading { display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:end; margin-bottom:36px; }
.design-heading h2 { margin:0; font-size:clamp(2.7rem,5.5vw,5.7rem); line-height:.9; letter-spacing:-.065em; text-transform:uppercase; }
.design-heading > p { color:var(--muted); max-width:450px; margin:0; line-height:1.7; }
.design-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
.design-card { min-width:0; border:3px solid var(--line); background:#0b0b0b; box-shadow:8px 8px 0 var(--yellow); }
.design-preview { width:100%; position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; padding:28px; border:0; border-bottom:3px solid var(--line); background:#f3f0e9; cursor:zoom-in; overflow:hidden; }
.design-preview img { display:block; max-width:100%; width:100%; height:100%; object-fit:contain; transition:transform .25s ease; }
.design-preview--ilustracion-nina-gato { background:#25261f; }
.design-preview--patron-fractal { background:#e5e5e1; }
.design-preview:hover img { transform:scale(1.025); }
.design-open { position:absolute; bottom:12px; right:12px; padding:8px 12px; border:2px solid #111; background:var(--yellow); color:#111; font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.design-caption { padding:24px; }
.design-category { color:var(--yellow); font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.design-caption h3 { margin:14px 0 12px; font-size:clamp(1.6rem,2.5vw,2.4rem); line-height:1; letter-spacing:-.04em; text-transform:uppercase; }
.design-caption p { color:var(--muted); line-height:1.65; margin:0; }
.design-dialog { width:min(1100px,calc(100% - 28px)); max-height:calc(100dvh - 28px); padding:0; border:3px solid var(--yellow); color:var(--ink); background:#0b0b0b; }
.design-dialog::backdrop { background:rgba(0,0,0,.88); }
.design-dialog-bar,.design-dialog-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; }
.design-dialog-bar { border-bottom:2px solid var(--line); }
.design-dialog-bar p { margin:0; font-weight:800; }
.design-dialog-image { display:block; width:100%; height:min(68dvh,780px); object-fit:contain; background:#f3f0e9; }
.design-dialog button { cursor:pointer; color:var(--ink); background:#111; border:2px solid var(--line); padding:10px 12px; font:inherit; font-size:.8rem; font-weight:800; }
.design-dialog .design-close { color:#111; background:var(--yellow); border-color:var(--yellow); white-space:nowrap; }
.design-counter { color:var(--muted); font-size:.8rem; }
.design-preview:focus-visible,.design-dialog button:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
body.design-viewing { overflow:hidden; }
@media(max-width:700px) {
  .design-heading,.design-grid { grid-template-columns:1fr; }
  .design-heading { gap:20px; }
  .design-preview { padding:20px; }
  .design-dialog-bar,.design-dialog-footer { gap:8px; padding:12px; }
  .design-dialog button { padding:10px 8px; font-size:.72rem; }
  .design-dialog-image { height:60dvh; }
}
@media(prefers-reduced-motion:reduce) { .design-preview img { transition:none; } }


/* Jesucrisis: proceso de gráfica animada */
.jesucrisis-feature { margin-top:72px; padding-top:52px; border-top:3px solid var(--line); }
.jesucrisis-intro { display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:end; margin-bottom:32px; }
.jesucrisis-intro h3 { margin:8px 0 0; font-size:clamp(2rem,4vw,3.8rem); line-height:.95; letter-spacing:-.05em; text-transform:uppercase; }
.jesucrisis-intro > p { margin:0; color:var(--muted); line-height:1.7; max-width:560px; }
.jesucrisis-card .design-preview { background:#101010; padding:18px; }
.jesucrisis-card .design-preview img { object-fit:contain; }
.jesucrisis-card .design-caption { min-height:205px; }
@media(max-width:700px) {
  .jesucrisis-feature { margin-top:54px; padding-top:40px; }
  .jesucrisis-intro { grid-template-columns:1fr; gap:18px; }
  .jesucrisis-card .design-caption { min-height:0; }
}

/* Jabones Camii: caso visual dentro de Diseño */
.jabones-dialog{width:min(1180px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:0;border:3px solid var(--yellow);background:#0b0b0b;color:var(--ink)}
.jabones-dialog::backdrop{background:rgba(0,0,0,.9);backdrop-filter:blur(2px)}
.jabones-dialog-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border-bottom:2px solid var(--line);background:#0b0b0b}
.jabones-dialog-bar h2{margin:6px 0 0;font-size:clamp(1.8rem,3vw,3.1rem);line-height:.9;text-transform:uppercase;letter-spacing:-.04em}
.jabones-close{border:0;background:var(--yellow);color:#111;padding:10px 13px;font:inherit;font-size:.8rem;font-weight:900;cursor:pointer;white-space:nowrap}
.jabones-dialog-content{padding:30px}
.jabones-case-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:start;padding-bottom:30px;border-bottom:2px solid var(--line)}
.jabones-case-intro h3,.jabones-result h3{margin:8px 0 0;font-size:clamp(2rem,4vw,4rem);line-height:.92;letter-spacing:-.05em;text-transform:uppercase}
.jabones-case-intro p,.jabones-result p,.jabones-case-points p{color:var(--muted);line-height:1.7}
.jabones-case-points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:28px 0}
.jabones-case-points article{border:2px solid var(--line);padding:17px;background:#111}
.jabones-case-points strong{display:block;color:var(--yellow);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.jabones-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.jabones-gallery figure{margin:0;border:2px solid var(--line);background:#151515;min-width:0}
.jabones-gallery img{display:block;width:100%;height:300px;object-fit:contain;background:#f2f0e9;padding:18px}
.jabones-gallery .jabones-wide{grid-column:span 2}
.jabones-gallery .jabones-wide img{height:360px}
.jabones-gallery figcaption{display:grid;gap:6px;padding:14px 16px}
.jabones-gallery figcaption strong{font-size:.78rem;text-transform:uppercase;color:var(--yellow)}
.jabones-gallery figcaption span{font-size:.86rem;line-height:1.5;color:var(--muted)}
.jabones-result{margin-top:30px;padding:28px;border:3px solid var(--line);background:#111;box-shadow:7px 7px 0 var(--yellow)}
.jabones-result p{max-width:780px}
body.jabones-viewing{overflow:hidden}
@media(max-width:850px){
  .jabones-case-intro{grid-template-columns:1fr;gap:16px}
  .jabones-case-points{grid-template-columns:1fr 1fr}
  .jabones-gallery{grid-template-columns:1fr 1fr}
  .jabones-gallery .jabones-wide{grid-column:span 2}
}
@media(max-width:620px){
  .jabones-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}
  .jabones-dialog-bar{padding:12px}
  .jabones-dialog-content{padding:16px}
  .jabones-case-points,.jabones-gallery{grid-template-columns:1fr}
  .jabones-gallery .jabones-wide{grid-column:span 1}
  .jabones-gallery img,.jabones-gallery .jabones-wide img{height:auto;max-height:380px}
}