/* Fer Ayala Estudio · sistema base
   Paleta y tipografía en tokens.css. Este archivo solo define estructura y componentes. */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--charcoal);font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{display:block;max-width:100%}
figure{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:1rem;top:-4rem;background:var(--charcoal);color:#fff;padding:.7rem 1rem;z-index:100}
.skip-link:focus{top:1rem}
.shell{width:min(100%,var(--max-width));margin-inline:auto;padding-inline:var(--gutter)}


.display{font-family:var(--font-display);font-weight:400;letter-spacing:-.045em;line-height:1}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;height:76px;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-inline:var(--gutter);background:rgba(255,240,227,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.is-scrolled{border-color:var(--line)}
.wordmark{display:flex;flex-direction:column;line-height:1;flex-shrink:0}
.wordmark__name{font-family:var(--font-body);font-weight:800;font-size:1.35rem;letter-spacing:-.07em;text-transform:lowercase}
.wordmark__dot{color:var(--magenta)}
.wordmark__descriptor{font-size:.5rem;font-weight:600;letter-spacing:.2em;margin-top:.35rem;color:var(--muted)}
.nav{display:flex;align-items:center;gap:clamp(1.2rem,2.6vw,2.6rem);font-size:.78rem;font-weight:500}
.nav a{position:relative;padding:.3rem 0}
.nav a:not(.nav__cta)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--olive);transition:right .35s var(--ease-out)}
.nav a:not(.nav__cta):hover::after,.nav a[aria-current="page"]:not(.nav__cta)::after{right:0}
.nav__cta{padding:.7rem 1rem!important;border:1px solid var(--magenta);transition:background .25s,color .25s}
.nav__cta:hover,.nav__cta[aria-current="page"]{background:var(--magenta);color:#fff}
.menu-toggle{display:none;background:none;border:0;padding:.6rem;margin-right:-.6rem}
.menu-toggle span{display:block;width:22px;height:1px;background:var(--charcoal);transition:transform .3s var(--ease-out)}
.menu-toggle span+span{margin-top:6px}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

@media(max-width:820px){
  .site-header{height:64px}
  .menu-toggle{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;height:calc(100dvh - 64px);overflow-y:auto;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:2rem var(--gutter);background:var(--ivory);font-family:var(--font-display);font-size:2.3rem;font-weight:400;letter-spacing:-.04em;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .3s var(--ease-out),visibility .3s}
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav a{padding:.5rem 0;width:100%;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav__cta{border:0!important;padding:.5rem 0!important;color:var(--magenta)}
  .nav__cta:hover,.nav__cta[aria-current="page"]{background:none;color:var(--magenta)}
  body.menu-open{overflow:hidden}
}

/* ---------- Footer ---------- */
.site-footer{margin-top:clamp(4rem,9vw,8rem);background:var(--charcoal);color:rgba(255,240,227,.78);padding-block:2.2rem 2.4rem;font-size:.7rem}
body:has(.band--olive) .site-footer{margin-top:0}
.site-footer .shell{display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap}
.site-footer nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.site-footer a:hover{color:var(--ivory)}

/* ---------- Botones y enlaces ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;padding:.95rem 1.3rem;border:1px solid var(--charcoal);background:transparent;font-size:.75rem;font-weight:600;letter-spacing:.02em;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--charcoal);color:var(--paper)}
.btn--solid{background:var(--magenta);border-color:var(--magenta);color:#fff}
.btn--solid:hover{background:var(--charcoal);border-color:var(--charcoal)}
.btn[disabled]{opacity:.35;filter:grayscale(1);pointer-events:none}
.link{display:inline-flex;align-items:center;gap:.6rem;font-size:.75rem;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:.25rem;transition:border-color .25s,gap .25s var(--ease-out)}
.link:hover{border-color:var(--olive);gap:.9rem}
.link span{color:var(--terracotta)}

.wa-float{position:fixed;right:1.2rem;bottom:1.2rem;z-index:30;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:999px;background:var(--olive);color:var(--ivory);font-size:.7rem;font-weight:700;box-shadow:0 8px 26px rgba(45,16,54,.16);transition:transform .25s var(--ease-out)}
.wa-float:hover{transform:translateY(-2px)}

/* ---------- Animación de entrada ---------- */
/* Aparición: solo con .motion (la pone site.js); sin JS todo queda visible */
.motion .reveal{opacity:0;transform:translateY(16px)}
.motion .reveal.is-visible{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}

/* ==========================================================
   PORTAFOLIO · cuadrícula asimétrica
   Patrón de 5 piezas que se repite. Cada proyecto puede
   forzar su forma con data-forma (a, b, c, d, e).
   ========================================================== */
.portfolio{padding-top:clamp(1.5rem,4vw,3.5rem)}
.wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2.2vw,2.2rem);row-gap:clamp(1.75rem,4vw,4rem);align-items:start}
.tile{position:relative;display:block;min-width:0}
.tile__frame{position:relative;overflow:hidden;background:var(--sand)}
.tile__frame img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out),filter .5s}
.tile__shade{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.35rem;padding:clamp(1rem,2vw,1.75rem);background:rgba(45,16,54,0);color:#fff;opacity:0;transition:background .45s var(--ease-out),opacity .45s var(--ease-out)}
.tile__title{font-family:var(--font-display);font-size:clamp(1.4rem,2.3vw,2.4rem);line-height:1;letter-spacing:-.035em;transform:translateY(10px);transition:transform .55s var(--ease-out)}
.tile__meta{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;transform:translateY(10px);transition:transform .55s var(--ease-out) .04s}
.tile__caption{display:none}
@media(hover:hover){
  .tile:hover .tile__shade,.tile:focus-visible .tile__shade{background:rgba(45,16,54,.45);opacity:1}
  .tile:hover .tile__title,.tile:hover .tile__meta,.tile:focus-visible .tile__title,.tile:focus-visible .tile__meta{transform:none}
  .tile:hover img,.tile:focus-visible img{transform:scale(1.03)}
}

/* Formas. Las fotos se muestran completas (sin recorte): cada forma solo
   define columna y desfase; la altura la da la proporción de la foto. */
.tile__frame img{height:auto;display:block}
.tile[data-forma="a"]{grid-column:1 / span 7}
.tile[data-forma="b"]{grid-column:9 / span 4;margin-top:clamp(2rem,6vw,6rem)}
.tile[data-forma="c"]{grid-column:2 / span 5}
.tile[data-forma="d"]{grid-column:8 / span 5;margin-top:clamp(2.5rem,7vw,7rem)}
.tile[data-forma="e"]{grid-column:1 / span 4}
.tile[data-forma="f"]{grid-column:6 / span 7;margin-top:clamp(3rem,8vw,8rem)}
.tile[data-forma="g"]{grid-column:1 / span 6;margin-top:clamp(1.5rem,4vw,4rem)}
.tile[data-forma="h"]{grid-column:8 / span 5}
.tile[data-forma="solo"]{grid-column:3 / span 8}

@media(max-width:1000px){
  .tile[data-forma="a"]{grid-column:1 / span 7}
  .tile[data-forma="b"]{grid-column:8 / span 5}
  .tile[data-forma="c"]{grid-column:1 / span 6}
  .tile[data-forma="d"]{grid-column:7 / span 6}
  .tile[data-forma="e"]{grid-column:1 / span 5}
  .tile[data-forma="f"]{grid-column:6 / span 7}
  .tile[data-forma="g"]{grid-column:1 / span 6}
  .tile[data-forma="h"]{grid-column:7 / span 6}
  .tile[data-forma="solo"]{grid-column:2 / span 10}
}

/* Sin cursor (táctil) o pantalla angosta: título debajo de la foto */
@media(hover:none),(max-width:640px){
  .tile__shade{display:none}
  .tile__caption{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;margin-top:.6rem}
  .tile__caption strong{font-family:var(--font-display);font-weight:400;font-size:1.05rem;letter-spacing:-.02em;line-height:1.15}
  .tile__caption small{font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .tile:active .tile__frame img{filter:brightness(.82)}
}

/* Móvil: horizontales casi a todo lo ancho, verticales a dos tercios, alternando lados */
@media(max-width:640px){
  .wall{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:.75rem;row-gap:2rem}
  .tile[data-forma]{margin-top:0}
  .tile[data-forma="a"],.tile[data-forma="f"],.tile[data-forma="solo"]{grid-column:1 / -1}
  .tile[data-forma="b"]{grid-column:3 / -1}
  .tile[data-forma="e"]{grid-column:1 / span 4}
  .tile[data-forma="c"],.tile[data-forma="g"]{grid-column:1 / span 5}
  .tile[data-forma="d"],.tile[data-forma="h"]{grid-column:2 / -1}
  .tile__caption{flex-direction:column;gap:.15rem}
}

/* ==========================================================
   PROYECTO · ficha
   ========================================================== */
.project{padding-top:clamp(1.5rem,3vw,2.5rem)}
.project__back{display:inline-flex;gap:.5rem;font-size:.7rem;color:var(--muted);margin-bottom:clamp(1.5rem,4vw,3rem)}
.project__back:hover{color:var(--olive)}
.project__head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:1.5rem 3rem;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.project__head h1{font-size:clamp(2.6rem,7vw,7rem);margin:0}
.project__where{font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:right}
.project__hero{aspect-ratio:16/9;overflow:hidden;background:var(--sand)}
.project__hero img,.gallery img{width:100%;height:100%;object-fit:cover}
.project__body{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,7rem);padding-block:clamp(2.5rem,6vw,5.5rem)}
.project__lede{color:var(--charcoal);font-family:var(--font-display);font-size:clamp(1.35rem,2.1vw,2rem);line-height:1.25;letter-spacing:-.025em;margin:0;max-width:22ch}
.specs{margin:0;border-top:1px solid var(--line)}
.specs div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.specs dt{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:.15rem}
.specs dd{margin:0;font-size:.92rem}
.specs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.specs li{padding:.3rem .65rem;background:var(--sand);font-size:.75rem}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2.2vw,2.2rem);align-items:start}
.gallery button{all:unset;cursor:zoom-in;display:block;overflow:hidden;background:var(--sand)}
.gallery button:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.gallery button img{transition:transform 1s var(--ease-out)}
.gallery button:hover img{transform:scale(1.025)}
.gallery > :nth-child(4n+1){grid-column:1 / span 5;aspect-ratio:4/5}
.gallery > :nth-child(4n+2){grid-column:7 / span 6;aspect-ratio:4/3;margin-top:clamp(3rem,10vw,10rem)}
.gallery > :nth-child(4n+3){grid-column:2 / span 7;aspect-ratio:3/2}
.gallery > :nth-child(4n+4){grid-column:9 / span 4;aspect-ratio:3/4;margin-top:clamp(2rem,6vw,6rem)}
.project__next{display:grid;grid-template-columns:1fr auto;align-items:end;gap:1.5rem;margin-top:clamp(4rem,10vw,9rem);padding-top:1.5rem;border-top:1px solid var(--line)}
.project__next a{display:block}
.project__next small{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.project__next strong{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,5vw,4.5rem);letter-spacing:-.045em;line-height:1;transition:color .25s}
.project__next a:hover strong{color:var(--terracotta)}
@media(max-width:760px){
  .project__head{grid-template-columns:1fr}
  .project__where{text-align:left}
  .project__hero{aspect-ratio:4/5;margin-inline:calc(var(--gutter) * -1)}
  .project__body{grid-template-columns:1fr;gap:2rem}
  .specs div{grid-template-columns:1fr;gap:.35rem}
  .gallery{grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem}
  .gallery > :nth-child(4n+1){grid-column:1 / -1;aspect-ratio:4/5}
  .gallery > :nth-child(4n+2){grid-column:1 / span 3;aspect-ratio:3/4;margin-top:0}
  .gallery > :nth-child(4n+3){grid-column:4 / span 3;aspect-ratio:3/4;margin-top:2.5rem}
  .gallery > :nth-child(4n+4){grid-column:2 / -1;aspect-ratio:4/3;margin-top:0}
  .project__next{grid-template-columns:1fr}
}

/* Visor de fotos */
.viewer{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:rgba(45,16,54,.96);color:#fff}
.viewer::backdrop{background:rgba(45,16,54,.96)}
.viewer[open]{display:grid;place-items:center}
.viewer img{max-width:min(92vw,1600px);max-height:84vh;width:auto;height:auto;object-fit:contain}
.viewer__btn{position:absolute;background:none;border:0;color:#fff;font-size:1.6rem;padding:1rem;line-height:1;opacity:.75}
.viewer__btn:hover{opacity:1}
.viewer__close{top:.5rem;right:.75rem;font-size:1rem;letter-spacing:.12em}
.viewer__prev{left:.5rem;top:50%;transform:translateY(-50%)}
.viewer__next{right:.5rem;top:50%;transform:translateY(-50%)}
.viewer__count{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);font-size:.65rem;letter-spacing:.16em;opacity:.7}

/* ==========================================================
   EL TALLER
   ========================================================== */
.studio-intro{display:grid;grid-template-columns:6fr 5fr;gap:clamp(2rem,6vw,7rem);align-items:end;padding-top:clamp(2rem,6vw,5rem)}
.studio-intro h1{font-size:clamp(2.6rem,6.2vw,6.4rem);margin:1.4rem 0 0}
.studio-intro h1 em{font-style:italic;color:var(--olive)}
.studio-intro p{max-width:34ch;font-size:1.02rem;line-height:1.7;color:var(--texto-suave);margin:0}
.studio-figure{margin-top:clamp(2.5rem,6vw,5rem);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2.2vw,2.2rem);align-items:end}
.studio-figure figure{margin:0;overflow:hidden;background:var(--sand)}
.studio-figure figure:first-child{grid-column:1 / span 8;aspect-ratio:16/10}
.studio-figure figure:last-child{grid-column:9 / span 4;aspect-ratio:4/5}
.studio-figure img{width:100%;height:100%;object-fit:cover}

.materials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.2vw,2.2rem) clamp(1rem,2.2vw,2.2rem)}
.material{margin:0}
.material__img{aspect-ratio:1/1;overflow:hidden;background:var(--sand)}
.material__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.material:hover .material__img img{transform:scale(1.04)}
.material figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:.7rem;margin-top:.7rem;border-top:1px solid var(--sand)}
.material figcaption b{font-weight:600;font-size:.85rem}
.material figcaption span{font-size:.68rem;color:var(--muted)}
.materials > :nth-child(3n+2){margin-top:clamp(2rem,5vw,5rem)}
@media(max-width:820px){
  .studio-intro{grid-template-columns:1fr;gap:1.5rem}
  .studio-figure figure:first-child{grid-column:1 / -1}
  .studio-figure figure:last-child{grid-column:7 / -1;margin-top:-4rem;border:6px solid var(--ivory)}
  .materials{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem .75rem}
  .materials > :nth-child(3n+2){margin-top:0}
  .materials > :nth-child(2n){margin-top:2.5rem}
  .material figcaption{flex-direction:column;gap:0}
}

/* Bolsa de trabajo: discreta, plegada por defecto */
.careers{margin-top:clamp(5rem,11vw,10rem);border-top:1px solid var(--line)}
.careers summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem 0;cursor:pointer}
.careers summary::-webkit-details-marker{display:none}
.careers summary p{margin:0;font-size:.82rem;color:var(--muted)}
.careers summary i{font-style:normal;font-size:1.4rem;line-height:1;color:var(--olive);transition:transform .3s var(--ease-out)}
.careers[open] summary i{transform:rotate(45deg)}
.careers__body{display:grid;grid-template-columns:4fr 7fr;gap:clamp(2rem,6vw,6rem);padding:1rem 0 2.5rem}
.careers__body > p{margin:0;font-size:.9rem;color:var(--texto-suave);max-width:30ch}
@media(max-width:820px){.careers__body{grid-template-columns:1fr}.careers summary p{display:none}}

/* Campos de formulario (compartidos) */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1.5rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field--full{grid-column:1 / -1}
.field label:not(.btn),.field__label{font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.input{width:100%;padding:.75rem 0;border:0;border-bottom:1px solid var(--sand);background:transparent;border-radius:0;font-size:.95rem;transition:border-color .25s}
.input:focus{outline:none;border-color:var(--olive)}
textarea.input{resize:vertical;min-height:5.5rem;line-height:1.5}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--charcoal) 50%),linear-gradient(135deg,var(--charcoal) 50%,transparent 50%);background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:1.5rem}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.75rem;color:var(--texto-suave);line-height:1.5}
.consent input{margin-top:.2rem;accent-color:var(--olive)}
.consent a{text-decoration:underline;text-underline-offset:2px}
.form-status{font-size:.8rem;margin:0;min-height:1.2em}
.form-status.is-error{color:#9b2c1f}
.form-status.is-ok{color:var(--olive)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
@media(max-width:600px){.fields{grid-template-columns:1fr}}

/* ==========================================================
   PIEZAS DE AUTOR · catálogo
   ========================================================== */
.catalog-head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;padding-top:clamp(1.5rem,4vw,3.5rem);margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.catalog-head h1{font-size:clamp(2.4rem,5vw,5rem);margin:1rem 0 0}
.catalog-head p{margin:0;font-size:.8rem;color:var(--muted);max-width:30ch;text-align:right}
.filters{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.filters button{background:none;border:1px solid var(--line);padding:.45rem .85rem;font-size:.7rem;font-weight:500;transition:background .2s,color .2s,border-color .2s}
.filters button:hover{border-color:var(--chocolate)}
.filters button[aria-pressed="true"]{background:var(--chocolate);border-color:var(--chocolate);color:var(--ivory)}
.catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2.5rem,5vw,4.5rem) clamp(1rem,2.2vw,2.2rem)}
.piece{all:unset;display:block;cursor:pointer;min-width:0}
.piece:focus-visible{outline:2px solid var(--chocolate);outline-offset:4px}
.piece__img{aspect-ratio:4/5;overflow:hidden;background:var(--paper);position:relative}
.piece__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out),opacity .5s}
.piece__img img+img{position:absolute;inset:0;opacity:0}
@media(hover:hover){.piece:hover .piece__img img:first-child{transform:scale(1.03)}.piece:hover .piece__img img+img{opacity:1}}
.piece__info{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:.8rem}
.piece__info b{font-family:var(--font-display);font-weight:400;font-size:1.3rem;letter-spacing:-.025em;line-height:1.1}
.piece__info span{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);white-space:nowrap}
.catalog > :nth-child(3n+2){margin-top:clamp(2rem,5vw,4.5rem)}
.catalog [hidden]{display:none}
@media(max-width:820px){
  .catalog-head{flex-direction:column;align-items:flex-start}
  .catalog-head p{text-align:left}
  .catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem .75rem}
  .catalog > :nth-child(3n+2){margin-top:0}
  .piece__info{flex-direction:column;gap:.2rem}
  .piece__info b{font-size:1.05rem}
}

/* Ficha de pieza */
.sheet{border:0;padding:0;width:min(1100px,94vw);max-height:92vh;background:var(--ivory);color:var(--charcoal);overflow:auto}
.sheet::backdrop{background:rgba(45,16,54,.55);backdrop-filter:blur(3px)}
.sheet__inner{display:grid;grid-template-columns:6fr 5fr;background:var(--ivory)}
.sheet__media{display:grid;gap:.5rem;background:var(--paper)}
.sheet__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sheet__media img+img{aspect-ratio:4/3}
.sheet__text{background:var(--ivory);padding:clamp(1.5rem,4vw,3rem);display:flex;flex-direction:column;gap:1.5rem}
.sheet__close{position:absolute;top:.8rem;right:.8rem;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:var(--ivory);font-size:1.1rem;line-height:1}
.sheet h2{font-size:clamp(2rem,3.5vw,3.2rem);margin:0;color:var(--chocolate)}
.sheet__text > p{margin:0;font-size:.95rem;color:var(--texto-suave)}
.sheet__actions{display:flex;flex-direction:column;gap:.6rem}
.sheet__note{font-size:.7rem;color:var(--muted);margin:0}
@media(max-width:760px){
  .sheet{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;margin:0}
  .sheet__inner{grid-template-columns:1fr}
  .sheet__media{grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;gap:.4rem}
  .sheet__media img{scroll-snap-align:start;aspect-ratio:4/5!important}
  .sheet__text{position:static}
}

/* ==========================================================
   TENGO UN PROYECTO · conversación
   ========================================================== */
.talk{width:min(100%,720px);margin-inline:auto;padding:clamp(1.5rem,4vw,3.5rem) var(--gutter) 2rem}
.talk__head h1{font-size:clamp(2.4rem,5vw,4.4rem);margin:1rem 0 .6rem}
.talk__head p{margin:0;font-size:.85rem;color:var(--muted)}
.talk__progress{position:sticky;top:76px;z-index:5;height:2px;background:var(--line);margin:2rem 0 0}
.talk__progress span{display:block;height:100%;width:0;background:var(--olive);transition:width .6s var(--ease-out)}
@media(max-width:820px){.talk__progress{top:64px}}
.log{display:flex;flex-direction:column;gap:1.1rem;padding-top:2rem}
.msg{max-width:88%;animation:msgIn .5s var(--ease-out) both}
.msg--studio{align-self:flex-start;font-family:var(--font-display);font-size:clamp(1.25rem,2.2vw,1.65rem);line-height:1.25;letter-spacing:-.02em}
.msg--studio small{display:block;font-family:var(--font-body);font-size:.78rem;letter-spacing:0;color:var(--muted);margin-top:.35rem;line-height:1.5}
.msg--user{align-self:flex-end;display:flex;align-items:center;gap:.6rem}
.msg--user span{background:var(--sand);padding:.65rem 1rem;font-size:.9rem;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.msg--user button{background:none;border:0;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terracotta);padding:.3rem;opacity:0;transition:opacity .2s}
.msg--user:hover button,.msg--user button:focus-visible{opacity:1}
@media(hover:none){.msg--user button{opacity:.5}}
.typing{align-self:flex-start;display:flex;gap:5px;padding:.6rem 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dot 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.reply{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line);animation:msgIn .45s var(--ease-out) both}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{background:transparent;border:1px solid var(--sand);padding:.7rem 1rem;font-size:.82rem;text-align:left;transition:background .2s,border-color .2s,color .2s}
.chip:hover{border-color:var(--olive)}
.chip[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:var(--ivory)}
.reply__row{display:flex;gap:.6rem;align-items:flex-end}
.reply__row .input{flex:1}
.reply__actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.skip{background:none;border:0;font-size:.72rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:.3rem 0}
.skip:hover{color:var(--olive)}
.send{width:46px;height:46px;flex-shrink:0;border-radius:50%;border:0;background:var(--olive);color:var(--ivory);font-size:1.05rem;display:grid;place-items:center;transition:background .2s}
.send:hover{background:var(--charcoal)}
.send[disabled]{background:var(--line);pointer-events:none}
.reply__hint{font-size:.7rem;color:var(--muted);margin:.6rem 0 0}
.reply__error{font-size:.75rem;color:#9b2c1f;margin:.5rem 0 0;min-height:1em}
.file-pick{display:flex;flex-direction:column;gap:.9rem}
.file-pick label.btn{cursor:pointer;align-self:flex-start}
.file-list{list-style:none;margin:0;padding:0;font-size:.75rem;color:var(--muted)}
.summary{background:var(--paper);border:1px solid var(--sand);padding:clamp(1.2rem,3vw,2rem);display:flex;flex-direction:column;gap:1.2rem}
.summary dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem;font-size:.82rem}
.summary dt{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:.2rem}
.summary dd{margin:0;white-space:pre-wrap;word-break:break-word}
@media(max-width:520px){.summary dl{grid-template-columns:1fr;gap:.1rem}.summary dd{margin-bottom:.6rem}.msg{max-width:100%}}
.done{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.15;letter-spacing:-.03em}
.done b{color:var(--olive);font-weight:400}

/* ---------- Páginas simples ---------- */
.plain{max-width:760px;padding-top:clamp(2rem,5vw,4rem)}
.plain h1{font-size:clamp(2.4rem,5vw,4.4rem);margin:1rem 0 2rem}
.plain h2{font-size:1rem;font-weight:700;margin:2.2rem 0 .5rem}
.plain p{color:var(--texto-suave);margin:0 0 1rem}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

@media(max-width:640px){.wa-float{right:.75rem;bottom:.75rem;padding:.6rem .85rem;font-size:.62rem}}
.file-btn{display:flex;align-items:center;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--sand)}
.file-btn label.btn{padding:.55rem .9rem;cursor:pointer;text-transform:none;letter-spacing:0;font-size:.72rem;color:var(--charcoal)}
.file-btn span{font-size:.75rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Paleta por sección */
.btn--olive{background:var(--olive);border-color:var(--olive);color:var(--ivory)}
.btn--olive:hover{background:var(--charcoal);border-color:var(--charcoal)}

/* Bandas de color (El taller) */
.band{padding-block:clamp(4rem,9vw,8rem);margin-top:clamp(5rem,11vw,10rem)}
.band--sand{background:var(--ivory);border-top:1px solid var(--sand)}
.band--sand .material__img{background:var(--sand)}
.band--sand .material figcaption{border-top-color:var(--sand)}
.band--sand .material figcaption span{color:var(--chocolate)}
.band--olive{background:var(--olive);color:var(--ivory);margin-top:0;padding-block:clamp(2.5rem,6vw,5rem)}
.section-title{font-size:clamp(2.2rem,4.5vw,4.5rem);margin:0 0 clamp(1.5rem,3vw,2.5rem);color:var(--charcoal)}
.band--olive .careers{margin-top:0;border-top:0}
.careers__title{font-family:var(--font-display);font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.03em}
.band--olive .careers summary p,.band--olive .careers__body > p{color:rgba(255,240,227,.75)}
.band--olive .careers summary i{color:var(--ivory)}
.band--olive .field label:not(.btn),.band--olive .field__label{color:rgba(255,240,227,.7)}
.band--olive .input{border-color:rgba(255,240,227,.35);color:var(--ivory)}
.band--olive .input:focus{border-color:var(--ivory)}
.band--olive .input::placeholder{color:rgba(255,240,227,.45)}
.band--olive select.input{background-image:linear-gradient(45deg,transparent 50%,var(--ivory) 50%),linear-gradient(135deg,var(--ivory) 50%,transparent 50%)}
.band--olive select.input option{color:var(--charcoal)}
.band--olive .file-btn{border-color:rgba(255,240,227,.35)}
.band--olive .file-btn span,.band--olive .consent{color:rgba(255,240,227,.8)}
.band--olive .btn,.band--olive .file-btn label.btn{border-color:var(--ivory);color:var(--ivory)}
.band--olive .btn:hover{background:var(--ivory);color:var(--olive)}
.band--olive .consent input{accent-color:var(--ivory)}
.band--olive .form-status.is-ok{color:var(--ivory)}
.band--olive .form-status.is-error{color:var(--rosa)}
.band--olive :focus-visible{outline-color:var(--ivory)}

/* Botón chocolate (Piezas de autor) */
.btn--choc{border-color:var(--chocolate);color:var(--chocolate)}
.btn--choc:hover{background:var(--chocolate);color:var(--ivory)}

/* Conversación: botones de envío y campo de cantidad */
.send-options{display:flex;flex-wrap:wrap;gap:.6rem}
.amount{display:flex;gap:.6rem;align-items:flex-end;margin-top:1.1rem}
.amount .input{flex:1}
.amount span{font-size:.95rem;padding-bottom:.75rem;color:var(--muted)}
.wa-note{font-size:.72rem;color:var(--muted);margin:0}
.btn[aria-disabled="true"]{opacity:.35;filter:grayscale(1)}

/* Logotipo original (no recolorear) */
.logo{display:block;flex-shrink:0;line-height:0}
.logo img{width:56px;height:56px;object-fit:cover}
@media(max-width:820px){.logo img{width:46px;height:46px}}
.site-header{height:84px}
@media(max-width:820px){.site-header{height:64px}}
.talk__progress{top:84px}
@media(max-width:820px){.talk__progress{top:64px}}

/* Portada del proyecto: respeta la proporción original de la foto */
.project__hero{aspect-ratio:auto;background:none;display:flex;justify-content:center}
.project__hero img{width:auto;max-width:100%;height:auto;max-height:84vh;object-fit:contain}
@media(max-width:760px){.project__hero{margin-inline:0}.project__hero img{max-height:none;width:100%}}
.plain a{text-decoration:underline;text-underline-offset:3px}
.site-footer nav a[href^="mailto"]{text-transform:none}

/* ---------- Proporción de paleta ----------
   Marfil 55 · Carbón 20 · Olivo 12 · Arena 7 · Chocolate 3 · Terracota 2 · Magenta 1 */

/* Cierre en olivo antes del pie (Portafolio, Proyecto, Piezas) */
.cierre{margin-top:clamp(5rem,11vw,10rem);padding-block:clamp(4rem,9vw,7rem)}
.cierre__inner{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.cierre p{margin:0;font-size:clamp(1.9rem,4vw,3.6rem);max-width:20ch;color:var(--ivory)}
.btn--light{background:var(--ivory);border-color:var(--ivory);color:var(--olive)}
.btn--light:hover{background:transparent;color:var(--ivory)}
.btn--light span{color:var(--terracotta)}

/* Pie en carbón, más presente */
.site-footer{padding-block:clamp(4rem,8vw,7rem) clamp(2rem,4vw,3rem);font-size:.78rem}
body:has(.cierre) .site-footer{margin-top:0}
.site-footer .shell{align-items:flex-end}

/* Fichas del catálogo sobre arena */
.piece{background:var(--sand);padding:clamp(.6rem,1vw,.9rem)}
.piece__img{background:var(--ivory)}
.piece__info{padding:.8rem .2rem .2rem}
.piece__info b{color:var(--chocolate)}

/* Materiales: separador arena bajo cada foto */
.band--sand .material figcaption{border-top:1px solid var(--sand)}

/* Conversación: tarjeta de resumen en arena suave */
.summary{background:var(--rosa-suave)}

/* Siguiente proyecto: separador arena */
.project__next{border-top-color:var(--sand)}
.band--olive .btn--light{background:var(--ivory);border-color:var(--ivory);color:var(--olive)}
.band--olive .btn--light:hover{background:transparent;color:var(--ivory)}

/* Encabezado: logo + nombre discreto */
.logo{display:flex;align-items:center;gap:.75rem;line-height:1}
.logo span{font-family:var(--font-body);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal);white-space:nowrap}
@media(max-width:820px){.logo span{font-size:.62rem;letter-spacing:.12em}}

/* Título del portafolio */
.portfolio__title{font-size:clamp(2.2rem,4.5vw,4.5rem);margin:0 0 clamp(1.5rem,3vw,2.5rem)}
.studio-figure figure:only-child{grid-column:1 / -1;aspect-ratio:21/9;margin-top:0;border:0}
@media(max-width:820px){.studio-figure figure:only-child{aspect-ratio:4/3}}

/* Botón flotante de WhatsApp: magenta, discreto; se oculta sobre cierres y pie */
.wa-float{background:var(--magenta);color:#fff;gap:.55rem;padding:.7rem 1.05rem .7rem .85rem;transition:transform .25s var(--ease-out),opacity .3s,visibility .3s}
.wa-float svg{flex-shrink:0}
.wa-float.is-hidden{opacity:0;visibility:hidden;transform:translateY(10px)}
@media(max-width:640px){
  .wa-float{width:52px;height:52px;padding:0;justify-content:center;right:1rem;bottom:1rem;box-shadow:0 6px 20px rgba(45,16,54,.22)}
  .wa-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
}

/* Botón del cierre: estados de hover solo con cursor; en móvil ocupa el ancho */
.band--olive .btn--light:hover{background:var(--ivory);color:var(--olive)}
@media(hover:hover){.band--olive .btn--light:hover{background:transparent;color:var(--ivory)}}
.band--olive .btn--light:active{background:var(--sand)}
@media(max-width:640px){.cierre .btn--light{width:100%;padding:1.15rem 1.3rem;font-size:.82rem;justify-content:space-between}}

/* Terracota (2%): detalles editoriales visibles pero pequeños */
.nav a[aria-current="page"]:not(.nav__cta)::after{background:var(--terracotta)}
.tile__caption small{color:var(--terracotta)!important}
.project__where{color:var(--terracotta)}
.band--sand .material figcaption span{color:var(--terracotta)}
.site-footer a:hover{color:var(--terracotta)}
.display em,.portfolio__intro em{font-style:italic;color:var(--terracotta)}
.portfolio__title{margin-bottom:.6rem}
.portfolio__intro{margin:0 0 clamp(2rem,4vw,3.5rem);max-width:36ch;font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1.6;color:var(--texto-suave)}

/* ==========================================================
   PORTAFOLIO SIMÉTRICO (sustituye la composición asimétrica)
   3 columnas iguales; marco 4:3; la foto completa, sin recorte,
   apoyada en la base del marco.
   ========================================================== */
.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem);row-gap:clamp(2rem,4vw,3.5rem);align-items:start}
.wall .tile{grid-column:auto!important;margin-top:0!important}
.wall .tile__frame{aspect-ratio:4/3;container-type:inline-size;background:transparent;overflow:visible;display:flex;align-items:flex-end;justify-content:center}
.wall .tile__pic{position:relative;display:block;overflow:hidden;line-height:0}
.wall .tile__pic img{display:block;width:auto;height:auto;max-width:100cqw;max-height:75cqw;object-fit:contain;transition:transform 1s var(--ease-out)}
.wall .tile__shade{position:absolute;inset:0}
.wall .tile__title{font-size:clamp(1.15rem,1.7vw,1.7rem)}
@media(hover:hover){.wall .tile:hover .tile__pic img{transform:scale(1.03)}}
.wall .tile__caption{display:none}
@media(max-width:1000px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(hover:none),(max-width:640px){
  .wall .tile__shade{display:none}
  .wall .tile__caption{display:flex}
}
@media(max-width:640px){
  .wall{grid-template-columns:1fr;row-gap:2.2rem}
  .wall .tile__frame{aspect-ratio:auto;display:block}
  .wall .tile__pic img{max-width:100%;max-height:none;width:100%}
}

/* ==========================================================
   PIEZAS: carrusel por pieza (todas las fotos en el mismo lugar)
   ========================================================== */
.catalog > :nth-child(n){margin-top:0}
.piece{all:revert;display:block;min-width:0;background:var(--sand);padding:clamp(.6rem,1vw,.9rem)}
.piece[hidden]{display:none}
.piece__info{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.85rem .2rem .25rem}
.piece__info:focus-visible{outline:2px solid var(--chocolate);outline-offset:3px}
.piece__info b{font-family:var(--font-display);font-weight:400;font-size:1.3rem;letter-spacing:-.025em;line-height:1.1;color:var(--chocolate)}
.piece__info span{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);white-space:nowrap}
@media(max-width:820px){.piece__info{flex-direction:column;gap:.2rem}.piece__info b{font-size:1.05rem}}

.slider{position:relative;background:#fff}
.slider__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:4/5;cursor:zoom-in;overscroll-behavior-x:contain}
.slider__track::-webkit-scrollbar{display:none}
.slider__slide{flex:0 0 100%;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;background:#fff}
.slider__slide img{width:100%;height:100%;object-fit:contain;user-select:none}
.slider__btn{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,240,227,.92);color:var(--charcoal);font-size:.95rem;display:grid;place-items:center;opacity:0;transition:opacity .25s,background .2s;box-shadow:0 2px 10px rgba(45,16,54,.12)}
.slider__btn--prev{left:.6rem}.slider__btn--next{right:.6rem}
.slider__btn:hover{background:var(--ivory)}
.slider__btn[disabled]{opacity:0!important;pointer-events:none}
.slider:hover .slider__btn,.slider:focus-within .slider__btn{opacity:1}
@media(hover:none){.slider__btn{opacity:.85;width:32px;height:32px}}
.slider__dots{position:absolute;left:0;right:0;bottom:.7rem;display:flex;justify-content:center;gap:5px;pointer-events:none}
.slider__dots i{width:6px;height:6px;border-radius:50%;background:rgba(45,16,54,.22);transition:background .2s,transform .2s}
.slider__dots i.is-on{background:var(--terracotta);transform:scale(1.15)}
.slider__count{position:absolute;top:.6rem;right:.7rem;font-size:.6rem;letter-spacing:.12em;color:var(--muted);background:rgba(255,255,255,.85);padding:.15rem .45rem}
.slider.is-single .slider__btn,.slider.is-single .slider__dots,.slider.is-single .slider__count{display:none}
.slider:not(.slider--big) .slider__count{display:none}
@media(max-width:820px){.slider__dots{bottom:.45rem}.slider__dots i{width:5px;height:5px}}

/* Ficha: carrusel grande */
.sheet__media{display:block!important;background:#fff;overflow:visible!important}
.slider--big .slider__track{aspect-ratio:4/5;cursor:grab}
.slider--big .slider__btn{opacity:1}
@media(max-width:760px){.slider--big .slider__track{aspect-ratio:1/1}}
.slider__slide img{object-fit:cover}
.slider__slide img.is-wide{object-fit:contain;padding:6%}
.slider__dots i{background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(45,16,54,.18)}
.slider__dots i.is-on{background:var(--terracotta);box-shadow:none}
.slider__slide img.is-product{object-fit:contain;padding:5%;background:#fff}


/* ==========================================================
   IDENTIDAD v3 · Thorn Crown en títulos, botones y menú; Blood Bargain en fondos oscuros
   y tipografías Space Grotesk, DM Sans, Instrument Serif
   ========================================================== */
body{background:var(--marfil);color:var(--thorn)}
.display,h1,h2,.portfolio__title,.section-title{color:var(--thorn);font-family:var(--font-display);font-weight:500;letter-spacing:-.035em}
.display em,h1 em,h2 em,.cierre p em,.portfolio__intro,.catalog-head p,.talk__head p{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:0}
.display em,h1 em,h2 em{color:var(--thorn)}
.portfolio__intro,.catalog-head p{font-size:clamp(1.2rem,1.6vw,1.5rem);color:var(--thorn);line-height:1.35}
.talk__head p{font-size:1.15rem;color:var(--texto-suave)}

/* Encabezado y menú */
.site-header{background:rgba(255,240,227,.94)}
.site-header.is-scrolled{border-color:var(--rosa)}
.logo span{color:var(--thorn);font-family:var(--font-body);font-weight:700}
.nav{color:var(--thorn)}
.nav a:not(.nav__cta)::after{background:var(--rosa)}
.nav a[aria-current="page"]:not(.nav__cta)::after{background:var(--thorn)}
.nav__cta{border-color:var(--thorn);color:var(--thorn)}
.nav__cta:hover,.nav__cta[aria-current="page"]{background:var(--thorn);color:var(--marfil)}
@media(max-width:820px){.nav{background:var(--marfil);font-family:var(--font-display)}.nav a{border-color:var(--rosa)}.nav__cta{color:var(--thorn)}}
.menu-toggle span{background:var(--thorn)}

/* Botones */
.btn{border-color:var(--thorn);color:var(--thorn)}
.btn:hover{background:var(--thorn);color:var(--marfil)}
.btn--solid,.btn--olive{background:var(--thorn);border-color:var(--thorn);color:var(--marfil)}
.btn--solid:hover,.btn--olive:hover{background:var(--blood);border-color:var(--blood);color:var(--marfil)}
.btn--choc{border-color:var(--thorn);color:var(--thorn)}
.link{color:var(--cobalto);border-color:var(--rosa)}
.link:hover{border-color:var(--cobalto)}
.link span,.btn span[aria-hidden],.btn--light span{color:var(--cobalto)}
:focus-visible{outline-color:var(--cobalto)}

/* Fondos oscuros: Blood Bargain (cierres, bolsa de trabajo, pie, taller) */
.band--olive,.cierre{background:var(--blood);color:var(--marfil)}
.cierre p,.band--olive .careers__title{color:var(--marfil);font-family:var(--font-display);font-weight:500}
.cierre p em{color:var(--rosa)}
.cierre + .site-footer,body:has(.band--olive) .site-footer{border-top:1px solid rgba(216,166,186,.35)}
.btn--light,.band--olive .btn--light{background:var(--marfil);border-color:var(--marfil);color:var(--thorn)}
@media(hover:hover){.band--olive .btn--light:hover{background:var(--rosa);border-color:var(--rosa);color:var(--thorn)}}
.band--olive .btn--light:hover{background:var(--marfil);color:var(--thorn)}
@media(hover:hover){.band--olive .btn--light:hover{background:var(--rosa);color:var(--thorn)}}
.band--olive .careers summary i{color:var(--rosa)}
.band--olive .consent input{accent-color:var(--rosa)}
.site-footer{background:var(--blood);color:rgba(255,240,227,.8)}
.site-footer a:hover{color:var(--rosa)}

/* El taller: presentación sobre fondo oscuro */
.studio-dark{background:var(--blood);color:var(--marfil);padding-bottom:clamp(3rem,7vw,6rem)}
.studio-dark .studio-intro h1{color:var(--marfil)}
.studio-dark .studio-intro h1 em{color:var(--rosa);font-family:var(--font-accent);font-style:italic}
.studio-dark .studio-intro p{color:rgba(255,240,227,.82)}
body:has(.studio-dark) .site-header{background:rgba(107,7,51,.97);border-color:transparent}
body:has(.studio-dark) .site-header .logo span,body:has(.studio-dark) .nav{color:var(--marfil)}
body:has(.studio-dark) .nav__cta{border-color:var(--rosa);color:var(--marfil)}
body:has(.studio-dark) .nav__cta:hover{background:var(--rosa);color:var(--thorn)}
body:has(.studio-dark) .menu-toggle span{background:var(--marfil)}
@media(max-width:820px){body:has(.studio-dark) .nav{background:var(--blood)}body:has(.studio-dark) .nav a{border-color:rgba(216,166,186,.3)}body:has(.studio-dark) .nav__cta{color:var(--rosa)}}
.band--sand{background:var(--marfil);border-top:0}
.section-title{color:var(--thorn)}
.material figcaption b{color:var(--thorn)}
.band--sand .material figcaption{border-top-color:var(--rosa)}
.band--sand .material figcaption span{color:var(--texto-suave)}

/* Portafolio */
.tile__shade{color:var(--marfil)}
.wall .tile:hover .tile__shade,.wall .tile:focus-visible .tile__shade{background:rgba(107,7,51,.55)}
.tile__title{font-family:var(--font-display);font-weight:500}
.tile__caption strong{font-family:var(--font-display)!important;font-weight:500!important;color:var(--thorn)}
.tile__caption small{color:var(--texto-suave)!important}

/* Proyecto */
.project__back{color:var(--cobalto)}
.project__where{color:var(--texto-suave)}
.project__lede{font-family:var(--font-accent);font-style:italic;color:var(--thorn);font-size:clamp(1.5rem,2.3vw,2.2rem)}
.specs dt{color:var(--texto-suave)}
.specs li{background:var(--rosa-suave);color:var(--thorn)}
.specs div{border-color:var(--rosa)}
.project__next strong{color:var(--thorn);font-family:var(--font-display);font-weight:500}
.project__next a:hover strong{color:var(--cobalto)}

/* Piezas */
.filters button{border-color:var(--rosa);color:var(--thorn)}
.filters button:hover{border-color:var(--cobalto)}
.filters button[aria-pressed="true"]{background:var(--thorn);border-color:var(--thorn);color:var(--marfil)}
.piece{background:var(--rosa-suave)}
.piece__info b{font-family:var(--font-display);font-weight:500;color:var(--thorn)}
.piece__info span{color:var(--texto-suave)}
.slider__dots i.is-on{background:var(--cobalto)}
.slider__btn{color:var(--cobalto)}
.sheet h2{color:var(--thorn)}
.sheet__text{background:var(--marfil)}

/* Conversación */
.msg--studio{font-family:var(--font-display);color:var(--thorn);font-weight:400;letter-spacing:-.02em}
.msg--user span{background:var(--rosa-suave);color:var(--thorn)}
.msg--user button{color:var(--cobalto)}
.chip{border-color:var(--rosa);color:var(--thorn)}
.chip:hover{border-color:var(--cobalto)}
.chip[aria-pressed="true"]{background:var(--thorn);border-color:var(--thorn);color:var(--marfil)}
.talk__progress{background:var(--rosa-suave)}
.talk__progress span{background:var(--thorn)}
.send{background:var(--thorn);color:var(--marfil)}
.send:hover{background:var(--blood)}
.send[disabled]{background:var(--rosa-suave);color:var(--texto-suave)}
.skip{color:var(--cobalto)}
.done b{color:var(--thorn)}
.summary{background:var(--paper);border-color:var(--rosa)}
.input{border-color:var(--rosa)}
.input:focus{border-color:var(--thorn)}
.consent input{accent-color:var(--thorn)}
.consent a,.plain a{color:var(--cobalto)}

/* WhatsApp flotante */
.wa-float{background:var(--thorn);color:var(--marfil)}

/* Ilustración: trazo rosa bajo los títulos principales */
.portfolio__title,.catalog-head h1,.talk__head h1,.plain h1{position:relative;display:inline-block}
.portfolio__title::after{content:"";position:absolute;left:0;bottom:-.15em;width:2.2em;height:.12em;background:var(--rosa);border-radius:2px}
.portfolio__intro{margin-top:1.2rem}
.studio-dark + .band--sand{margin-top:0}
.studio-dark .studio-intro{padding-top:clamp(2.5rem,6vw,5rem)}
.wa-note{font-size:.78rem;line-height:1.5;color:var(--texto-suave);margin:0}
.wa-note.is-alert{color:var(--thorn);background:var(--rosa-suave);padding:.7rem .9rem;border-left:3px solid var(--thorn)}

/* ==========================================================
   NAVEGACIÓN COMPARTIDA (Fase 1): sin botón de plantilla.
   "Tengo un proyecto" destaca por peso y color, no por caja.
   Indicador de página activa: línea fina bajo el enlace.
   ========================================================== */
.nav{gap:clamp(1.1rem,2.2vw,2.2rem)}
.nav a:not(.nav__cta)::after{background:var(--thorn);height:1px}
.nav__cta{border:0!important;padding:.3rem 0!important;background:none!important;color:var(--thorn)!important;font-weight:700}
.nav__cta span{color:var(--cobalto);display:inline-block;margin-left:.25em;transition:transform .25s var(--ease-out)}
.nav__cta:hover span{transform:translateX(3px)}
.nav__cta::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--thorn);transition:right .35s var(--ease-out)}
.nav__cta[aria-current="page"]::after,.nav__cta:hover::after{right:0}
body:has(.studio-dark) .nav__cta{color:var(--rosa)!important}
body:has(.studio-dark) .nav__cta::after,body:has(.studio-dark) .nav a:not(.nav__cta)::after{background:var(--rosa)}
@media(max-width:820px){.nav__cta::after{display:none}}

/* Botón flotante de WhatsApp: círculo, no píldora */
.wa-float{width:54px;height:54px;padding:0;border-radius:50%;justify-content:center}
.wa-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* Paleta v3: flechas y enlaces en cobalto (sobre fondo claro). Sobre
   fondos oscuros, las flechas usan rosa para conservar el contraste. */
.nav a:hover,.logo:hover span{color:var(--thorn)}
body:has(.studio-dark) .nav__cta span{color:var(--rosa)}
.site-footer a:hover{color:var(--rosa)}

/* ==========================================================
   MICROINTERACCIONES (auditoría final)
   Discretas y breves. Sin colores, sombras ni adornos nuevos.
   Con movimiento reducido no hay desplazamientos ni escalas.
   ========================================================== */
@media print{.reveal{opacity:1!important;transform:none!important}}

/* Enlaces: color y subrayado en 200 ms */
a{transition:color .2s var(--ease-out),border-color .2s var(--ease-out),text-decoration-color .2s var(--ease-out)}

/* Botones y controles: cambio de color y 1 px hacia abajo al presionar */
.btn,.send,.chip,.filters button,.slider__btn,.sheet__close,.viewer__btn,.menu-toggle,.wa-float,.msg--user button,.skip{
  transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out),opacity .2s var(--ease-out),transform .15s var(--ease-out)
}
.btn:active,.send:active,.chip:active,.filters button:active,.sheet__close:active,.viewer__close:active,.wa-float:active{transform:translateY(1px)}
.viewer__prev:active,.viewer__next:active{transform:translateY(calc(-50% + 1px))}
.slider__btn:active{transform:translateY(calc(-50% + 1px))}

/* Imágenes enlazadas: escala máxima de 1.02, solo con cursor */
.pf-item__img,.home-work__img{display:block;overflow:hidden}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .pf-item .pf-item__img img,.home-work .home-work__img img{transition:transform .6s var(--ease-out),opacity .3s}
  .pf-item:hover .pf-item__img img,.home-work:hover .home-work__img img{transform:scale(1.02)}
}

/* Menú móvil: apertura breve (opacidad y 8 px), ya accesible */
@media(max-width:820px){.nav{transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility .25s}}

/* ==========================================================
   AVISO DE MEDICIÓN (solo aparece si medicion.js tiene
   identificadores configurados; hoy está inactivo)
   ========================================================== */
.medicion{position:fixed;left:var(--gutter);right:var(--gutter);bottom:1rem;z-index:60;max-width:760px;margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;padding:1.1rem 1.25rem;
  background:var(--marfil);color:var(--thorn);border:1px solid var(--rosa)}
.medicion p{flex:1 1 22rem;margin:0;font-size:.9rem;line-height:1.5}
.medicion a{color:var(--cobalto);text-decoration:underline;text-underline-offset:.2em}
.medicion__acciones{display:flex;gap:.6rem}
.medicion .btn{min-height:44px;font-size:.85rem}
.medicion__pref{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.medicion__pref:hover{color:var(--rosa)}
@media(max-width:600px){.medicion{bottom:.75rem;left:.75rem;right:.75rem}.medicion__acciones{width:100%}.medicion .btn{flex:1}}

/* Piezas de autor y Tengo un proyecto: título sin raya rosa */
.catalog-head h1::after,.talk__head h1::after{content:none}

/* ---------- Instagram en el pie: botón destacado ---------- */
.site-footer .ig-cta{display:inline-flex;align-items:center;gap:.85rem;padding:.85rem 1.25rem .85rem 1rem;background:var(--marfil);color:var(--thorn);text-decoration:none;border:0;transition:background .25s,color .25s,transform .25s var(--ease-out)}
.site-footer .ig-cta svg{flex-shrink:0;color:var(--blood)}
.site-footer .ig-cta span{display:flex;flex-direction:column;line-height:1.25}
.site-footer .ig-cta b{font-family:var(--font-display);font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.site-footer .ig-cta small{font-size:.78rem;color:var(--texto-suave)}
.site-footer .ig-cta i{font-style:normal;color:var(--cobalto);transition:transform .25s var(--ease-out)}
.site-footer .ig-cta:hover{background:var(--rosa)}
.site-footer .ig-cta:hover i{transform:translateX(3px)}
.site-footer .ig-cta:focus-visible{outline:2px solid var(--rosa);outline-offset:3px}
.site-footer .shell:has(.ig-cta){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;row-gap:2.5rem}
.site-footer .ig-cta{grid-column:1 / -1;justify-self:start;padding:1.05rem 1.5rem 1.05rem 1.2rem}
.site-footer .ig-cta b{font-size:1.2rem}
@media(max-width:820px){.site-footer .shell:has(.ig-cta){grid-template-columns:1fr;row-gap:1.5rem}}

/* ---------- Invitación de WhatsApp (se muestra una vez y se esconde sola) ---------- */
.wa-invite{position:fixed;right:1.2rem;bottom:calc(1.2rem + 54px + .75rem);z-index:31;display:flex;align-items:flex-start;gap:.25rem;max-width:min(300px,calc(100vw - 2rem));padding:.9rem .6rem .9rem 1.1rem;background:var(--marfil);color:var(--thorn);border:1px solid var(--rosa);box-shadow:0 12px 30px rgba(45,16,54,.18);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease-out)}
.wa-invite.is-open{opacity:1;transform:none}
.wa-invite::after{content:"";position:absolute;right:20px;bottom:-7px;width:12px;height:12px;background:var(--marfil);border-right:1px solid var(--rosa);border-bottom:1px solid var(--rosa);transform:rotate(45deg)}
.wa-invite a{display:flex;flex-direction:column;gap:.2rem;color:inherit;text-decoration:none}
.wa-invite b{font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.01em}
.wa-invite span{font-size:.88rem;line-height:1.4;color:var(--texto-suave)}
.wa-invite a:hover b{color:var(--cobalto)}
.wa-invite button{all:unset;cursor:pointer;flex-shrink:0;width:28px;height:28px;display:grid;place-items:center;font-size:.8rem;color:var(--texto-suave)}
.wa-invite button:hover{color:var(--thorn)}
.wa-invite button:focus-visible{outline:2px solid var(--cobalto)}
@media(max-width:640px){.wa-invite{right:1rem;bottom:calc(1rem + 54px + .7rem)}}
@media(prefers-reduced-motion:reduce){.wa-invite{transition:none;transform:none}}