:root{
  --p1:#f38185; --p2:#a94745; --p3:#eb5065; --p4:#b87d64; --p5:#ed6a71;
  --violeta:#5B2D9E; --violeta-osc:#45207a; --tinta:#1c1622; --papel:#f6f3ee; --papel-2:#ece6dc;
  --gris:#5d5866; --linea:#d9d2c6;
  --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--violeta)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,4.1rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:1.3rem}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(16px,4vw,48px);background:rgba(246,243,238,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--linea)}
.brand{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--tinta);text-decoration:none;white-space:nowrap}
.brand span{color:var(--violeta)}
.top nav{display:flex;gap:clamp(10px,2vw,28px)}
.top nav a{color:var(--tinta);text-decoration:none;font-size:.92rem;font-weight:500}
.top nav a:hover{color:var(--violeta)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:600;color:var(--violeta);margin:0 0 .8em}
.lead{font-size:1.12rem;color:#3a3442;max-width:34em}
.btn{display:inline-block;background:var(--violeta);color:#fff;border:0;border-radius:2px;padding:14px 26px;font:600 1rem var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--violeta-osc)}
.btn:focus-visible,.chip:focus-visible,.filtro:focus-visible,.pieza:focus-visible,.mini:focus-visible{outline:3px solid #f0b840;outline-offset:2px}

/* Primer bloque */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(20px,4vw,56px) clamp(16px,4vw,48px)}
.hero-text .btn{margin:6px 0 22px}
.otros{list-style:none;padding:0;margin:0;border-top:1px solid var(--linea)}
.otros li{padding:10px 0;border-bottom:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:space-between;font-size:.95rem}
.otros span{color:var(--gris)}
.otros a{font-weight:600;text-decoration:none}
.hero-visor{margin:0}
.hero-visor figcaption,.visor-fig figcaption{display:flex;flex-direction:column;gap:10px;margin-top:12px}

/* Visor de ambientes */
.visor{position:relative;width:100%;aspect-ratio:5/4;overflow:hidden;background:var(--papel-2)}
.visor .escena{position:absolute;left:0;top:0;transform-origin:0 0}
.visor .escena>img.foto{position:absolute;left:0;top:0;width:100%;height:100%}
.marco-obra{position:absolute;left:0;top:0;transform-origin:0 0;box-sizing:border-box;background:#faf9f6;border:4px solid #1d1b1f;box-shadow:0 10px 22px -6px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.25)}
.marco-obra img{width:100%;height:100%;object-fit:contain;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.marco-obra::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.08),rgba(0,0,0,.06));pointer-events:none}
.marco-obra.marco-blanco{border-color:#f2f0ea;box-shadow:0 4px 10px -3px rgba(0,0,0,.35)}
.pantalla-escena{position:absolute;box-sizing:content-box;padding:2.2%;background:#ecebe6;border-radius:3px;box-shadow:0 12px 26px -8px rgba(0,0,0,.5),0 0 0 1px #d6d4cc}
.pantalla-escena img{width:100%;height:100%;object-fit:cover;display:block}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips[hidden]{display:none}
.chip{border:1px solid var(--linea);background:#fff;color:var(--tinta);border-radius:20px;padding:6px 13px;font:500 .86rem var(--sans);cursor:pointer}
.chip.activo{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.tira{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.mini{display:flex;flex-direction:column;gap:3px;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:var(--gris);font:500 .68rem/1.15 var(--sans)}
.mini img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid transparent}
.mini.activo img{border-color:var(--violeta)}
.mini.activo{color:var(--tinta)}
.pie-visor{font-size:.8rem;color:var(--gris);margin:0}
/* Bloques */
.bloque{padding:clamp(40px,7vw,96px) clamp(16px,4vw,48px);border-top:1px solid var(--linea)}
.bloque-claro{background:#fff}
.bloque-cab{max-width:46em;margin-bottom:28px}
.bloque-cab p{color:#3a3442}
.num{font-family:var(--serif);font-size:1rem;color:var(--violeta);border-left:6px solid var(--p1);padding-left:8px;transition:border-color .6s;margin:0 0 .4em;letter-spacing:.06em}
.filtros{display:flex;gap:8px;margin-bottom:18px}
.filtro{border:0;border-bottom:2px solid transparent;background:none;padding:6px 2px;margin-right:12px;font:500 .95rem var(--sans);color:var(--gris);cursor:pointer}
.filtro.activo{color:var(--tinta);border-color:var(--violeta)}
.catalogo{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(16px,2.4vw,32px)}
.catalogo[hidden]{display:none}
.pieza{display:block;width:100%;text-align:left;border:0;background:none;padding:0;cursor:pointer;color:inherit;font:inherit}
.pieza .marco{background:#fff;padding:9%;box-shadow:0 1px 0 var(--linea),0 10px 24px -14px rgba(28,22,34,.35);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center}
.pieza .marco img{max-height:100%;width:auto;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pieza:hover .marco{box-shadow:0 1px 0 var(--linea),0 16px 30px -14px rgba(91,45,158,.45)}
.pieza h3{font-size:1.1rem;margin:14px 0 2px}
.pieza .ver{font-size:.88rem;color:var(--violeta);font-weight:600}
.pasos{counter-reset:p;list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pasos li{counter-increment:p;border-top:2px solid var(--tinta);padding-top:14px}
.pasos li::before{content:counter(p,decimal-leading-zero);display:block;font-family:var(--serif);color:var(--violeta);margin-bottom:6px}
.pasos strong{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:600;margin-bottom:4px}
.dudas{margin:0 0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dudas dt{font-weight:600;margin-bottom:4px}
.dudas dd{margin:0;color:#3a3442}
.fuente{font-size:.8rem;color:var(--gris);white-space:nowrap}
.hueco{background:#fff3c4;color:#5c4400;font-family:ui-monospace,Menlo,monospace;font-size:.85em;padding:1px 4px}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.recibe{padding-left:1.1em;margin:0 0 14px}
.recibe li{margin-bottom:6px}
.nota{font-size:.88rem;color:var(--gris)}
.visor-fig{margin:0;position:sticky;top:80px}

/* Formularios */
.form{margin-top:26px;background:var(--papel);border:1px solid var(--linea);padding:clamp(16px,2.5vw,28px)}
.bloque-claro .form{background:var(--papel)}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-bottom:16px}
.campos label{display:flex;flex-direction:column;gap:4px;font-size:.86rem;font-weight:500}
.campos .ancho{grid-column:1/-1}
input,select,textarea{font:inherit;font-size:1rem;padding:10px 11px;border:1px solid #bdb5a8;border-radius:2px;background:#fff;color:var(--tinta);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--violeta);outline-offset:0;border-color:var(--violeta)}
.oculto{position:absolute;left:-9999px}

.ficha-tec{padding-left:1.1em;margin:0 0 6px}
.ficha-tec li{margin-bottom:8px}

/* Artista y pie */
.artista{padding:clamp(40px,6vw,80px) clamp(16px,4vw,48px);background:var(--violeta);color:#fff}
.artista h2{color:#fff}
.artista a{color:#fff;font-weight:600}
.artista .enlaces{font-size:1.05rem}
.pie{display:grid;grid-template-columns:2fr 1fr;gap:24px;padding:32px clamp(16px,4vw,48px);font-size:.85rem;color:var(--gris)}
.pie h3{font-family:var(--sans);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--tinta)}
.pie ul{padding-left:1em;margin:0 0 8px}

/* Ficha */
.ficha{border:0;padding:0;width:min(1180px,96vw);max-height:94vh;overflow:auto;background:var(--papel);color:var(--tinta)}
.ficha::backdrop{background:rgba(28,22,34,.6)}
.ficha-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px;padding:24px}
.ficha-grid .chips{margin-top:10px}
.ficha-texto h2{margin-bottom:.3em}
.datos{margin:16px 0;border-top:1px solid var(--linea)}
.datos div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--linea)}
.datos dt{font-weight:600}.datos dd{margin:0;text-align:right}
.ficha .form{margin-top:10px}
.cerrar{position:absolute;right:10px;top:6px;border:0;background:none;font-size:2rem;line-height:1;cursor:pointer;color:var(--tinta);z-index:2}

@media (max-width:900px){
  .hero,.duo,.ficha-grid{grid-template-columns:minmax(0,1fr)}
  .visor-fig{position:static}
  .pasos,.dudas{grid-template-columns:1fr}
  .pie{grid-template-columns:1fr}
}
@media (max-width:560px){
  .top{flex-wrap:wrap;gap:6px 16px;padding-bottom:8px}
  .top nav{width:100%;overflow-x:auto;gap:18px}
  .campos{grid-template-columns:1fr}
  .catalogo{grid-template-columns:1fr 1fr;gap:14px}
  .pieza h3{font-size:.98rem}
  .ficha-grid{padding:16px 12px}
}

/* Tinte tomado de la pieza elegida */
.tinte{display:grid;grid-template-columns:2fr 1fr 3fr 1fr 2fr;height:14px;margin-bottom:18px;max-width:340px}
.tinte i{display:block;transition:background-color .6s}
.tinte i:nth-child(1){background:var(--p1);clip-path:polygon(0 0,100% 0,85% 100%,0 100%)}
.tinte i:nth-child(2){background:var(--p2);clip-path:polygon(15% 0,100% 0,100% 100%,0 100%)}
.tinte i:nth-child(3){background:var(--p3);clip-path:polygon(0 0,92% 0,100% 100%,8% 100%)}
.tinte i:nth-child(4){background:var(--p4);clip-path:polygon(0 0,100% 0,80% 100%,20% 100%)}
.tinte i:nth-child(5){background:var(--p5);clip-path:polygon(10% 0,100% 0,100% 100%,0 100%)}
.hero{background:linear-gradient(180deg,color-mix(in srgb,var(--p1) 10%,var(--papel)),var(--papel) 70%);transition:background .6s}
.filtro.activo{border-color:var(--p1)}
.btn-linea{border:1.5px solid var(--tinta);background:#fff;color:var(--tinta);border-radius:2px;padding:9px 16px;font:600 .9rem var(--sans);cursor:pointer}
.btn-linea:hover{background:var(--tinta);color:#fff}
.btn-linea:focus-visible{outline:3px solid #f0b840;outline-offset:2px}
.accion-visor{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.accion-visor .nota{margin:0}
.enlace{border:0;background:none;padding:0;color:var(--violeta);font:inherit;text-decoration:underline;cursor:pointer}
.tira{grid-template-columns:repeat(8,minmax(0,1fr))}
.catalogo{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.catalogo{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tira{grid-template-columns:repeat(4,minmax(0,1fr))}}