/* ARITTE · base compartida por las 3 propuestas: fondos, letras, encabezado, botones, materiales, visor */
:root{
  --fondo:#EEE9E1;
  --panel:#F5F1EB;
  --bloque:#D4C7B0;
  --acento:#94604F;
  --sobre-acento:#FFFFFF;
  --texto:#2B2521;
  --suave:#6F6760;
  --linea:#DDD5CA;
  --etiqueta-bg:#F4F0EA;
  --etiqueta-tx:#3A332E;
  --pill-activo:#5C483C;
  --pill-activo-tx:#FFFFFF;
  --borde-boton:#BDB3A6;
  --titulo:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --sans:"DM Sans",system-ui,sans-serif;
}
html[data-fondo="grafito"]{
  --fondo:#1C221F; --panel:#202824; --bloque:#3A4A3E; --acento:#C8B49A; --sobre-acento:#26221E;
  --texto:#F1EEE8; --suave:#B9BEB7; --linea:#323B35; --etiqueta-bg:#1C221F; --etiqueta-tx:#F1EEE8;
  --pill-activo:#C8B49A; --pill-activo-tx:#26221E; --borde-boton:#5C665F; color-scheme:dark;
}
html[data-fondo="original"]{
  --fondo:#FFFFFF; --panel:#F8F8F6; --bloque:#E1E5DF; --acento:#DED3CF; --sobre-acento:#2A2A28;
  --texto:#2A2A28; --suave:#6B6B67; --linea:#E6E6E2; --etiqueta-bg:#FFFFFF; --etiqueta-tx:#2A2A28;
  --pill-activo:#2A2A28; --pill-activo-tx:#FFFFFF; --borde-boton:#CFCFCA;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--fondo);color:var(--texto);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .4s ease,color .4s ease}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.envoltura{max-width:1280px;margin:0 auto;padding-inline:clamp(16px,4vw,56px)}
.eyebrow{font:600 .78rem/1.3 var(--titulo);letter-spacing:.26em;text-transform:uppercase}
h1,h2,h3{font-family:var(--titulo);text-wrap:balance}
.vertical{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--titulo);line-height:.86;white-space:nowrap}
.vertical.fuerte{font-weight:800;letter-spacing:-.01em}
.vertical.fina{font-weight:200;letter-spacing:.01em}

/* botones */
.boton{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:1.05em 1.9em;font:500 1rem/1 var(--sans);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background-color .25s ease,background-size .4s cubic-bezier(.6,0,.2,1),color .3s ease,border-color .25s ease,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.boton svg{width:1.15em;height:1.15em}
.boton-acento{background:var(--acento);color:var(--sobre-acento)}
.boton-linea{border-color:var(--borde-boton);color:var(--texto);background:linear-gradient(var(--texto),var(--texto)) no-repeat left bottom / 0% 100%}
.boton-invertido{background:var(--sobre-acento);color:var(--acento)}

/* animaciones: se elevan al pasar el mouse, se hunden al tocarlos; el de contorno se rellena */
@media (hover:hover){
  .boton:hover{transform:translateY(-3px);box-shadow:0 14px 26px -12px rgba(0,0,0,.45)}
  .boton-linea:hover{background-size:100% 100%;color:var(--fondo);border-color:var(--texto)}
}
.boton:active{transform:translateY(0) scale(.97);box-shadow:none;transition-duration:.08s}
/* destello que cruza los botones de color: cada pocos segundos y al pasar el mouse */
.boton-acento::after,.boton-invertido::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-120%);background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);animation:destello 7s ease-in-out 1.5s infinite}
.boton-invertido::after{background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,currentColor 22%,transparent) 50%,transparent 70%)}
.boton-acento:hover::after,.boton-invertido:hover::after{animation:destello-corto .75s ease}
@keyframes destello{0%{transform:translateX(-120%)}14%,100%{transform:translateX(120%)}}
@keyframes destello-corto{from{transform:translateX(-120%)}to{transform:translateX(120%)}}

/* encabezado */
.barra .envoltura{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:22px}
.logo{text-decoration:none;display:flex;flex-direction:column;gap:6px;line-height:1}
.logo b{font:500 clamp(1.7rem,2.6vw,2.15rem)/1 var(--titulo);letter-spacing:.22em}
.logo span{font:600 .66rem/1 var(--titulo);letter-spacing:.34em}
.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
.nav a.texto,footer nav a{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat left 100% / 0 1px;padding-bottom:3px;transition:background-size .3s ease,color .2s ease}
.nav a.texto{font-weight:500;font-size:1rem}
.nav a.texto:hover,footer nav a:hover{background-size:100% 1px}
.nav .boton{padding:.95em 1.5em;font-weight:600}

/* materiales */
.materiales{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.material{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--linea);background:var(--fondo);min-width:0;transition:background-color .4s ease}
.material i{width:58px;height:58px;flex:none;background-size:cover;background-position:center}
.material i.herreria{background:linear-gradient(135deg,#4a4d4b,#1b1c1b)}
.material b{display:block;font:600 .95rem/1.25 var(--titulo)}
.material span{font-size:.88rem;color:var(--suave)}

/* pasos */
.pasos{list-style:none;counter-reset:p;border-top:1px solid var(--linea)}
.pasos li{counter-increment:p;display:grid;grid-template-columns:64px 1fr;gap:4px 18px;padding:26px 0;border-bottom:1px solid var(--linea)}
.pasos li::before{content:counter(p,decimal-leading-zero);grid-row:span 2;font:300 1.9rem/1 var(--titulo);color:var(--acento)}
html[data-fondo="original"] .pasos li::before{color:#9C8F8A}
.pasos h3{font-weight:600;font-size:1.12rem;letter-spacing:.08em;text-transform:uppercase}
.pasos p{color:var(--suave)}

/* pie */
footer{border-top:1px solid var(--linea);padding-block:40px 120px}
footer .envoltura{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
footer nav{display:flex;gap:28px;flex-wrap:wrap}
footer nav a{text-decoration:none;color:var(--suave);font-size:.95rem}
footer small{color:var(--suave);font-size:.88rem}

/* selector de fondos */
.fondos{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:4px;padding:7px 7px 7px 24px;border-radius:999px;background:var(--panel);border:1px solid var(--linea);box-shadow:0 14px 40px rgba(0,0,0,.14);transition:background-color .4s ease}
.fondos > span{font:500 .78rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--suave);margin-right:14px}
.fondos button{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:11px 20px;border-radius:999px;cursor:pointer;font-size:1.02rem;font-weight:500;color:var(--texto);transition:background-color .25s ease,color .25s ease,transform .15s ease}
.fondos button:hover:not([aria-pressed="true"]){background:color-mix(in srgb,var(--texto) 8%,transparent)}
.fondos button:active{transform:scale(.95)}
.fondos button i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.18);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.fondos button:hover i,.fondos button[aria-pressed="true"] i{transform:scale(1.3)}
.fondos button[aria-pressed="true"]{background:var(--pill-activo);color:var(--pill-activo-tx)}
.whatsapp{position:fixed;right:18px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.2);transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s ease}
.whatsapp::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:#25D366;animation:latido 2.8s ease-out infinite}
@keyframes latido{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.75);opacity:0}}
.whatsapp:hover{transform:scale(1.1) rotate(-8deg);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.whatsapp:active{transform:scale(.94)}
.whatsapp svg{width:27px;height:27px}
.otras{transition:transform .2s ease,box-shadow .2s ease;position:fixed;left:18px;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:40;font:500 .85rem/1 var(--sans);text-decoration:none;background:var(--panel);border:1px solid var(--linea);padding:10px 14px;border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.1)}


.otras:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.14)}
/* "Ver N fotos" de las tarjetas: flecha que avanza y subrayado que se vuelve a dibujar */
.pieza .ver,.obra .ver,.trabajo .ver{border-bottom:0!important;background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 100% 1px;padding-bottom:3px}
.pieza .ver::after,.obra .ver::after,.trabajo .ver::after{content:"→";display:inline-block;margin-left:.35em;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .pieza button:hover .ver,.obra button:hover .ver,.trabajo button:hover .ver{animation:subraya .6s ease}
  .pieza button:hover .ver::after,.obra button:hover .ver::after,.trabajo button:hover .ver::after{transform:translateX(5px)}
}
@keyframes subraya{0%{background-size:100% 1px;background-position:100% 100%}45%{background-size:0 1px;background-position:100% 100%}55%{background-size:0 1px;background-position:0 100%}100%{background-size:100% 1px;background-position:0 100%}}
@keyframes aparece{from{opacity:.25}to{opacity:1}}

/* Más ideas: mosaico sin recortes, cada foto conserva su proporción */
.mas-trabajos{padding-block:clamp(64px,8vw,110px);border-top:1px solid var(--linea)}
.mas-trabajos .encabezado-mas{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 40px;align-items:end;margin-bottom:clamp(32px,4vw,52px)}
.mas-trabajos h2{font-weight:500;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.03em;margin-top:18px}
.mas-trabajos .encabezado-mas > p{color:var(--suave);font-size:1.05rem}
.mas-trabajos-grid{columns:4 230px;column-gap:20px}
.trabajo{break-inside:avoid;margin:0 0 22px}
.trabajo button{all:unset;cursor:pointer;display:block;width:100%}
.trabajo button:focus-visible{outline:2px solid var(--acento);outline-offset:4px}
.trabajo .foto-t{display:block;overflow:hidden;background:var(--panel)}
.trabajo img{width:100%;height:auto;transition:transform .7s ease}
.trabajo button:hover img{transform:scale(1.04)}
.trabajo figcaption{display:grid;gap:3px;padding:12px 2px 0}
.trabajo .eyebrow{font-size:.62rem;color:var(--suave)}
.trabajo b{font:500 1.05rem/1.25 var(--titulo)}
.trabajo .ver{justify-self:start;font-size:.82rem;font-weight:600;margin-top:4px}

/* fotos de los muebles: cada archivo ya viene en la proporción de su marco (4:3, o ancho para la portada),
   así que lo llenan sin recortar el mueble */
img[src*="muebles/"]{background-color:#ECEAE6}

/* colores de muestra junto a cada mueble */
.colores{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-top:14px}
.colores-nombre{font-size:.86rem;color:var(--suave)}
.colores-nombre b{color:var(--texto);font-weight:600}
.colores-opciones{display:flex;gap:8px;flex-wrap:wrap}
/* selector doble: las tarjetas de Cartel y Galería reinician sus botones con all:unset */
.colores .colores-opciones > button{width:26px;height:26px;display:block;border-radius:50%;padding:0;cursor:pointer;background:var(--muestra);border:1px solid color-mix(in srgb,var(--texto) 22%,transparent);outline:2px solid transparent;outline-offset:6px;transition:transform .25s cubic-bezier(.3,1.6,.5,1),outline-color .25s ease,outline-offset .25s ease}
.colores .colores-opciones > button:hover{transform:scale(1.18)}
.colores .colores-opciones > button[aria-pressed="true"]{outline-color:var(--texto);outline-offset:2px;animation:elegido .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes elegido{0%{transform:scale(.75)}100%{transform:scale(1)}}
.colores .colores-opciones > button:focus-visible{outline:2px solid var(--acento);outline-offset:3px}

/* visor de fotos */
dialog.visor{border:0;padding:0;background:transparent;margin:auto;width:100%;max-width:min(1080px,94vw)}
dialog.visor::backdrop{background:rgba(20,18,16,.88)}
.visor .marco{background:var(--panel);color:var(--texto)}
.visor img{width:100%;max-height:74vh;object-fit:contain;background:#111}
.visor .pie{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 20px}
.visor .pie b{font:500 1.15rem/1.2 var(--titulo)}
.visor .pie span{color:var(--suave);font-size:.92rem;margin-left:10px}
.visor .controles{display:flex;gap:8px}
.visor button{width:46px;height:46px;border:1px solid var(--borde-boton);background:transparent;cursor:pointer;font-size:1.1rem;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .15s ease}
.visor button:hover{background:var(--acento);color:var(--sobre-acento);border-color:var(--acento)}
.visor button:active{transform:scale(.92)}
.visor .cerrar:hover{transform:rotate(90deg)}
.visor img{animation:aparece .35s ease}

@media (max-width:980px){
  .nav a.texto{display:none}
  .mas-trabajos .encabezado-mas{grid-template-columns:1fr}
  .materiales{grid-template-columns:1fr 1fr}
  .otras{display:none}
}
@media (max-width:560px){
  .colores .colores-opciones > button{width:30px;height:30px}
  .mas-trabajos-grid{columns:2;column-gap:12px}
  .trabajo{margin-bottom:16px}
  .trabajo b{font-size:.95rem}
  .logo b{letter-spacing:.16em}
  .nav .boton{padding:.85em 1em;font-size:.9rem}
  .materiales{grid-template-columns:1fr}
  .fondos{padding-left:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .fondos > span{display:none}
  .fondos button{padding:10px 13px;font-size:.92rem}
  .whatsapp{bottom:calc(84px + env(safe-area-inset-bottom,0px));width:52px;height:52px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}html{scroll-behavior:auto}}