/* ═══════════════════════════════════════════════════════
   01-base.css  —  Base del sitio: fichas de color, tipografia, retícula,
   componentes y texturas originales.
   Orden: las hojas se cargan 01→06 y el orden IMPORTA;
   cada una afina la anterior. No las reordenes.
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   3R Cocinas & Clósets — qué subió de nivel y por qué

   1. Materialidad real: las tramas de las tarjetas de servicio
      (veta, lino, cepillo, poro) se dibujan con degradados
      repetidos, sin pedir una sola imagen. La sección de
      acabados, que además usaba un sprite de textura, se retiró
      del sitio; con ella se fue el sprite.
   2. Grano global de 3.6 KB incrustado: quita el plano digital
      del negro sin una sola petición extra.
   3. Superficies táctiles: radio mínimo, luz superior de 1 px y
      sombra proyectada corta. El relieve solo se anima con
      transform y opacity, nunca con box-shadow ni con top.
   4. Los alzados ganan sombra propia dibujada en el SVG (no
      filter: drop-shadow, que es caro en gama baja) y se acotan
      al hover o focus.
   5. Galería editorial de 6 proyectos con <picture> AVIF+WebP y
      srcset. El markup de foto se inyecta solo para los slugs
      que declares: cero 404 mientras no haya fotos.
   6. Tipografía: el eje de ancho de Archivo separa jerarquías —
      122 en portada, 118 en títulos, 88 en etiquetas técnicas.
   7. PWA ligera: manifest e íconos; el service worker solo
      cachea estáticos y nunca intercepta el envío del formulario.
   ═══════════════════════════════════════════════════════════════ */

:root{
  color-scheme:dark;
  --noche:#131211; --carbon:#1C1B19; --carbon-alto:#232120;
  --filete:#6C6963; --filete-db:#322F2C;
  --cobre:#A56A3E; --cobre-luz:#C99164; --cobre-hondo:#6B421F;
  --hueso:#EDE6DD; --hueso-med:#A9A29A; --alarma:#E4826A; --exito:#8FBF8A;

  --tipo:"Archivo","Helvetica Neue",Arial,sans-serif;
  --t-xs:.8125rem; --t-s:.9375rem; --t-b:1.0625rem; --t-m:1.25rem;
  --t-l:clamp(1.4rem,1rem + 1.9vw,2rem);
  --t-xl:clamp(1.85rem,1.1rem + 3.4vw,3rem);
  --t-2xl:clamp(2.35rem,1.15rem + 5.4vw,4.4rem);

  --marco:clamp(1.15rem,4.5vw,3.25rem);
  --ancho:1280px;
  --aire:clamp(4rem,9vw,7.5rem);
  --barra:0px;

  --radio:3px;
  --luz-alta:inset 0 1px 0 rgba(237,230,221,.055);
  --sombra:0 10px 26px -18px rgba(0,0,0,.95);
  --sombra-alta:0 18px 40px -22px rgba(0,0,0,1);
  --curva:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:78px; }

body{
  margin:0; background:var(--noche); color:var(--hueso);
  font-family:var(--tipo); font-size:var(--t-b); line-height:1.6;
  font-variation-settings:"wdth" 100; -webkit-font-smoothing:antialiased;
  padding-bottom:var(--barra);
  /* grano: teselado de 80×80, incrustado. Sin petición, sin capa fija. */
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQBAMAAAB8P++eAAAAD1BMVEWgoKCQkJCAgIBwcHBgYGDkA8j7AAAKhElEQVR42gXBj3PTRqIA4F0tWD8C0q6S2JIhtqS0iR2mIQl3D+jdvZL2774B3psppTNgJz2IbRpLsiGW7Fq7KxNLsrH2vg+5Tv1Bm7aLHxdtzbOt+G/tUDoXqDXDD5NfeH1/QlrW6lGbI/xNoRc1LUj5wUjEWK1efq/6mhbnNQirPV15AIrISd89QrD95vSaR+dyke9mmlr5ZOTcJLs2FELhrtKNcVmQK/MaaZpM95X9D6O2Oq5HYe5mzJnADotSV1v1ZYbt7FHkXrtIA7g/Ofn4BEYbWeFKIw0PJcknp3qNZLXmqE3JGl/c1hFSc/9nPV8UzIkLqTackg3j0U+zfKvDvX+D1tX+++bHp98aAXoetT4yr+BGLzuqMFA4+3Gqa02mKAoO2Tjf1datV7hjIcOZraRJDZqTn3+t2+pSohPw4CNqvtUXsooTONV1FU/qTbQF1Ptc8vFueuV9gP2jzKgdhvY1s8ffBVlRa9r5gHoFz5CXfgY1IE0NR19z3aXuamRPs9UzbqxzY9a4E9racktuAGl+7QR3oANS0S3PkZBSnYXzZO+SQF/nL8I5DnS0Ya+30QJYU0v2lQO2tiZiLaqhU7ir+JD5P/E2JTVcFDaIly560ZydxBVob2m3k+zbrvKbGy65eLacVVGsBo3xhe5rS/nJS+S8Njf9IjeL3s3q6c2d2LKKqaVBuNnZEH4Djbg5Bfb0wxny3PfxqXMl97Mnrc7OnlVOJN3c/dVaVafx13UjTeNmK2O1GhJ47E0i2xNSsxzsDTQKnD8qgQIXN+tvBJKM6gqfbR7GyH3zQsCjjSyVdGxZuTqpyyFWHpEviB2qozw6Vyc2c/QuqqtSuepkhWKRjOU8sJXIjWJILdMyPlnRSc9sxtaoMJA9ve/XKo9IJKZOb/suxqn3wc0ifWVlM/tu3YcOm4ojNkJKFbA7EEbiochqijLx2HzaKtwB7miBdbm7n/PKEC1DXRql/4ElndMxTcUfJHQ7MPyJNYYYnjFx/74UAucOMQxMkcCmJY+k+TFO1mX/2cyySFwARmCtd/LJhRZ+aY82i7kJTz6XgJQUM0gl897Ovc9697F5cfweI+Aw8u0rJddnycVJF02fyfvvPCkV+0fS7gziuRrJocGsgrd8VaasVIyM4ZzAX5I0wfw0GJ6nf925x0fgvgkDCP51ofOzLjN0L8A6AP8vENQUVg/0PIU5YKkMDsNTTpxaDqWllrT8FF+1+Vb4g4PMrHb1yEA13CNhXeaSkyqDx71yVltuKWXd9Q8d1M/oZI2A2vHgXFEV8xZ+D9y+qBtEiaLKdhHI5tvhi8t4md88ogfoGaxpFE6KIctQPGymFohr8K61/d4pDn/Tf2TBkcafZjxDo8qWqAKak9zje48WBv4ynj/oi77OiB78I+idCENRK2uCzv3whoRNUouZod4UWZLaWVVVsh05eRiSQleYRBM+1KTR4uSMiUu+YKeIgURalMZpSDrYkP42NzqCQgmQFBEH/uIzikkDDbk7hxgGgIj0mEH9NYHfiAmMV8efG3yIEQJSO8VMHWjKrukHNckqDHBRSwihrgeGwLezo7fckW30pJPqMB9qtdqF4oUruUdW9PmbdHxTs1My8OgR/NXVjZmDHJG3hwt3d5vPpfcveo3D7Y49bBfKM3P0OU9yoRqG3VVkCZH1wTjeAw8TpgDzQrpZ1GhNigzVBDBM3JbCobSq1i8VSXJelfpovJFwUxjAkXjQpIJAsKHBiSe92pZwWIYvHwu09R6x50DYH7zXrnTITjZ4MXZ20Zd8cLuyPp4nWu4WPFMlZGI3wiu5u254yhtqTUw6wix2bVQ96rXhyFEi/qEuZIoSFhnOBW4ql75pY/hxCwCAp3tdagxsf3IwkDUlq0xhE527lFAMLFR5XCS2ShV2WpXUITRlqTEg46ocJmejwsqR+VZWUUPKLxkxCJ/Ej9fzr9Xk3rKg9SvLrs3KVt5tK8kRUtlzBo2ZYk2sfi2Sjv+4S7RVVd/SYab5h4M5W8huGTlTREBB7d9pFoBM0qzrqWGQt9U8J+tJW7THy39go58TqXeMTJWlLVwTJm7LjLWKUfXPdrD/tqzHtwU3fArWJUgPvnuJDFSBVn7Jm/lFhedZeB7dehkWtL77ubrM+fPP7epKvsRLhGTOaFIXtH53Z/g0bcYi8j0Zzz7AmmQv3Ax2cd84eWujOg5d9QhPG100NFflVGHPUhD05B9BYndu6kw0iDFAooJwTqiiL4zuWSnNSfOK2p+bN9ghv7cYWx+Mv4cX6aJ1VfuMnNgKm78rH09AfOYQmNqwoOjo4+JQMS+XGea2iKuVuDlBscbyqaPfy6tZyvXXdQBa9SWZAppTbKj8Zrv3v6Gk9yE6vyHHrL2Wo0Kaa+GhYlOmU5AcT+s30fawODOkznN/du6hcMv6ZPCekq9qpF+dePNBs1cQEk9baj1Lf779fS/ylKUaoV+qA7d3BqixCrOn5hW8OhUoTwPDu8LvPDWZ7v5lG1cSKCXRwXPS2Zwtmj81/H/vlAinw3JPbBtz8YTeN2DoiBQ2hIQ4h7FVLbq365it8vaWfHESKry1UYEi5K8aPTCF7wSWLAnv2DW2+QvwA35cuqHvnr88ZqJMh6P0wtz4AJWhlyJ8iX7soOHRq7yx86aZS8SQ3vO80HAmeUblcBy2OCuW4QYvANwH9HEIwTU8xcmClfTOD5xuN/m3UOyHWC8X2Jfo3nflBQLq4WVLrB5vv/e3nAo60y+hU5VuQ1JPItEc1KSNItpMqaOHe58r2/1d7aMND0Nl0qu31SC2+0z4Bt6CQBWZu4aUv5P2XjuL7jEC26EhCHYa32iHNd674JSwdA8zyIBfgn0qoRFWkiSIScG9ym8MuAVjJ2A/wsMnMi1KqW+wQrsC7Qby2rkwYdbeHPXkyAKGPK7m9pBX7s2nzXXFChs7w/RFd/gVgWpupROz9ygZToFkRZeWcEGqhthv64ErDPNXAAUonsGTFFNUNscMNLqOsQBAsAZd8H91T8MSpwHYmOk/A7btI2V84+RDXP/iwlo2qzSCyuFUKjKMAjlN1McAYnCV1vcMJP3dk1OJ34UrxVfUsBmrnClVbUkSZQkKZWakbnx6o+6go9U04cxSbeGTQMp2oHFlp8RKCiuGTTh4DvVEYEwDid53FslZYwSpZHjJkz9x50lzb/6KiFByAS8FTUbIQKiJKOmdeJHAvRzsv3MmHm+Q4V+VU02E1rIe/3htfGra8m+pBZ+EDZAsToM/PeDy+6P5tu9ADuZncMMwa3IcYjKEAhlIa/UDNwAOV5PBAQxOU3dib+JjFqcZU3aWuUJoEcDbAIl+S1OqNWZePccxVQnwyZVQqcWJks2SBSzIjbO4f48gVSEVHv1ZJQJx6Jvv1qcJNNvaqGz5+3E72RJSZMvRUkHPFf/rMtXBaKkPDFEUT4NmNuLMqCtaQibwC66AkZjJCuJjmT9LywcGiFelB3QRbcUHZba1+3+WJXH4P/BOzBJPweifzaLZ3zO70and2LqOPDyQo7otW6HT1S+tGzwCN8YDITQEeEIXWqXI3deiZzt40QpbnRRrkNIjvb7RBDC2WLSd/RdBAOFY+lRxkQAAAABJRU5ErkJggg==");
  background-repeat:repeat; background-size:80px 80px;
  background-blend-mode:overlay;
}
body.trabado{ overflow:hidden; }

h1,h2,h3{ margin:0; font-weight:700; font-variation-settings:"wdth" 118;
  line-height:1.05; letter-spacing:-.022em; text-wrap:balance; }
p{ margin:0 0 1em; max-width:60ch; } p:last-child{ margin-bottom:0; }
img,svg{ display:block; max-width:100%; }
a{ color:var(--cobre-luz); text-underline-offset:3px; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--cobre-luz); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--cobre-hondo); color:var(--hueso); }

.saltar{ position:absolute; left:var(--marco); top:-4rem; z-index:80;
  background:var(--cobre-luz); color:var(--noche); padding:.7rem 1.1rem;
  border-radius:var(--radio); font-size:var(--t-s); font-weight:600;
  text-decoration:none; transition:transform .15s var(--curva); }
.saltar:focus{ transform:translateY(4.7rem); }

.marco{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--marco); }
.seccion{ padding-block:var(--aire); }
.linea-sec{ border-top:1px solid var(--filete-db); }

.rotulo{ display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1.15rem;
  font-size:var(--t-xs); font-weight:600; font-variation-settings:"wdth" 88;
  letter-spacing:.04em; color:var(--cobre-luz); }
.rotulo::before{ content:""; width:2rem; border-top:1px solid currentColor; }
.titulo{ font-size:var(--t-xl); max-width:20ch; }
.guia{ margin-top:1.05rem; color:var(--hueso-med); max-width:56ch; }

.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.9rem 0 0; padding:0; list-style:none; }
.tags li{ font-size:.6875rem; font-weight:600; font-variation-settings:"wdth" 86;
  letter-spacing:.07em; color:var(--cobre-luz); border:1px solid var(--filete-db);
  border-radius:2px; padding:.22rem .5rem; }

/* ── encabezado ─────────────────────────────────────────────── */
.techo{ position:sticky; top:0; z-index:50; background:rgba(19,18,17,.88);
  backdrop-filter:blur(12px) saturate(120%); border-bottom:1px solid var(--filete-db); }
.techo .marco{ display:flex; align-items:center; gap:1rem; min-height:68px; }
.firma{ display:flex; align-items:center; gap:.7rem; text-decoration:none;
  color:var(--hueso); margin-right:auto; }
.firma picture{ display:flex; flex:none; }
.firma img{ width:46px; height:auto; flex:none; display:block; }
.firma .pal{ border-left:1px solid var(--filete-db); padding-left:.7rem; line-height:1.25; }
.firma b{ display:block; font-size:.8125rem; font-weight:700;
  font-variation-settings:"wdth" 112; letter-spacing:.14em; }
.firma i{ display:block; font-style:normal; font-size:.625rem; color:var(--hueso-med);
  font-variation-settings:"wdth" 88; letter-spacing:.16em; }
.timon{ display:none; gap:clamp(.9rem,2vw,1.8rem); }
@media (min-width:960px){ .timon{ display:flex; } }
.timon a{ position:relative; color:var(--hueso-med); text-decoration:none;
  font-size:var(--t-s); font-weight:500; padding:.65rem .2rem;
  transition:color .16s var(--curva); }
.timon a::after{ content:""; position:absolute; left:0; right:0; bottom:.35rem;
  height:1px; background:var(--cobre-luz); transform:scaleX(0);
  transform-origin:left; transition:transform .22s var(--curva); }
.timon a:hover{ color:var(--hueso); }
.timon a:hover::after{ transform:scaleX(1); }

.hamburguesa{ display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; background:transparent; border:1px solid var(--filete);
  border-radius:var(--radio); cursor:pointer; box-shadow:var(--luz-alta); }
@media (min-width:960px){ .hamburguesa{ display:none; } }
.hamburguesa svg{ width:20px; height:20px; }
.techo .boton{ display:none; }
@media (min-width:560px){ .techo .boton{ display:inline-flex; } }

.panel{ position:fixed; inset:0; z-index:70; background:var(--noche);
  display:flex; flex-direction:column; padding:1.1rem var(--marco) 2rem;
  transform:translateY(-100%); transition:transform .3s var(--curva); visibility:hidden; }
.panel.abierto{ transform:translateY(0); visibility:visible; }
.panel-arriba{ display:flex; justify-content:flex-end; margin-bottom:1.5rem; }
.panel nav{ display:flex; flex-direction:column; }
.panel nav a{ color:var(--hueso); text-decoration:none; font-size:1.5rem; font-weight:700;
  font-variation-settings:"wdth" 112; letter-spacing:-.02em; padding:.9rem 0;
  border-bottom:1px solid var(--filete-db); }
.panel .mandos{ margin-top:auto; padding-top:2rem; }
.panel .boton{ width:100%; }

/* ── botones ────────────────────────────────────────────────── */
.boton{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:46px; font-size:var(--t-s); font-weight:600; padding:.78rem 1.4rem;
  border-radius:var(--radio); cursor:pointer; text-decoration:none;
  border:1px solid var(--cobre-luz); background:var(--cobre-luz); color:var(--noche);
  box-shadow:var(--sombra);
  transition:background .16s var(--curva),border-color .16s var(--curva),
             color .16s var(--curva),transform .16s var(--curva); }
.boton:hover{ background:#DCAB82; border-color:#DCAB82; transform:translateY(-1px); }
.boton:active{ transform:translateY(0); }
.boton--hueco{ background:transparent; color:var(--hueso); border-color:var(--filete);
  box-shadow:var(--luz-alta); }
.boton--hueco:hover{ background:var(--carbon-alto); border-color:var(--hueso); color:var(--hueso); }
.boton[disabled]{ opacity:.55; cursor:progress; transform:none; }
.boton--chico{ padding:.52rem 1rem; font-size:var(--t-xs); min-height:42px; }
.mandos{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.85rem; }

/* ── portada ────────────────────────────────────────────────── */
.portada{ padding-block:clamp(2.2rem,5.5vw,4rem) var(--aire); }
.portada-reja{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
@media (min-width:940px){ .portada-reja{ grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); } }
.portada h1{ font-size:var(--t-2xl); font-weight:800;
  font-variation-settings:"wdth" 122; letter-spacing:-.036em; max-width:13ch; }
.lema{ display:inline-flex; align-items:center; gap:.65rem; margin-bottom:1.05rem;
  font-size:var(--t-s); font-weight:500; font-variation-settings:"wdth" 90;
  letter-spacing:.01em; color:var(--cobre-luz); }
.lema::before{ content:""; width:2.25rem; border-top:1px solid currentColor; }
.entrada{ margin-top:1.25rem; font-size:var(--t-m); color:var(--hueso-med);
  line-height:1.45; max-width:38ch; }

/* lámina técnica: la foto manda, el monograma flota, el despiece explica */
.escenario{ position:relative; display:grid; grid-template-rows:1fr auto;
  gap:clamp(.7rem,1.8vw,1.1rem); padding:clamp(.65rem,1.8vw,1.1rem);
  border:1px solid var(--filete-db); border-radius:var(--radio);
  background:#0E0D0C; box-shadow:var(--sombra-alta); overflow:hidden; }
.foco{ position:relative; z-index:3; display:grid; place-items:center;
  padding:clamp(1.1rem,4vw,2.6rem) 0 clamp(.5rem,1.8vw,1.2rem); }
.foco::before{ content:""; position:absolute; width:min(88%,410px); aspect-ratio:1;
  border-radius:50%; border:1px solid var(--cobre); opacity:.34; }
.mira{ position:absolute; inset:0; z-index:2; opacity:.5; pointer-events:none; }

/* trama de plano encima de la foto, abierta en el centro */
.trama{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--filete-db) 1px,transparent 1px),
                   linear-gradient(90deg,var(--filete-db) 1px,transparent 1px);
  background-size:clamp(32px,5.5vw,50px) clamp(32px,5.5vw,50px);
  -webkit-mask-image:radial-gradient(ellipse at 50% 36%,transparent 18%,#000 64%);
          mask-image:radial-gradient(ellipse at 50% 36%,transparent 18%,#000 64%); }

/* foto de portada: ahora protagonista, no telón de fondo */
.fondo-portada{ position:absolute; inset:0; z-index:0;
  overflow:hidden; opacity:0; transition:opacity .6s var(--curva); }
.fondo-portada.viva{ opacity:1; }
.fondo-portada picture{ position:absolute; inset:0; display:block; }
.fondo-portada img{ width:100%; height:100%; object-fit:cover;
  filter:contrast(1.09) saturate(.94) brightness(1.1); transform:scale(1.03); }
.fondo-portada::after{ content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse at 50% 34%,rgba(19,18,17,.10),rgba(19,18,17,.52) 56%,rgba(19,18,17,.86)),
    linear-gradient(to top,rgba(19,18,17,.94),rgba(19,18,17,.12) 48%),
    linear-gradient(145deg,rgba(165,106,62,.16),transparent 58%); }
.pieza picture{ display:block; width:100%; height:100%; }
.pieza img{ width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.65)); }
.pieza-giro{ display:none; }

/* despiece: cuatro cortes de la misma cocina, cada uno con su dato */
.despiece{ list-style:none; margin:0; padding:0; position:relative; z-index:4;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.35rem,1vw,.6rem); }
.corte{ position:relative; aspect-ratio:1; overflow:hidden; border-radius:2px;
  border:1px solid var(--filete-db); background:var(--carbon); box-shadow:var(--luz-alta);
  transition:border-color .3s var(--curva); }
.corte::before{ content:""; position:absolute; inset:0;
  background-image:url("../img/portada/hero-1400.webp");
  background-size:340%; background-position:var(--x) var(--y);
  filter:grayscale(.3) contrast(1.06) brightness(1.12);
  transform:scale(1.03); transform-origin:var(--x) var(--y);
  transition:transform .55s var(--curva), filter .4s var(--curva); }
.corte::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(14,13,12,.95) 20%,rgba(14,13,12,.45) 58%,rgba(14,13,12,.08)); }
.corte .num{ position:absolute; z-index:2; top:.38rem; left:.45rem; font-size:.625rem;
  font-weight:600; letter-spacing:.16em; color:var(--cobre-luz); }
.corte .dato{ position:absolute; z-index:2; left:.45rem; right:.45rem; bottom:.4rem;
  display:grid; gap:.08rem; }
.corte b{ font-size:.75rem; font-weight:600; line-height:1.15; color:var(--hueso);
  font-variation-settings:"wdth" 92; }
.corte i{ font-style:normal; font-size:.625rem; line-height:1.2; color:var(--hueso-med);
  letter-spacing:.02em; }
.corte:hover::before,.corte:focus-within::before{ transform:scale(1.16);
  filter:grayscale(0) contrast(1.1) brightness(1.18); }
.corte:hover{ border-color:var(--cobre-hondo); }
@media (max-width:560px){
  .despiece{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .corte{ aspect-ratio:16/10; }
}

.duros{ list-style:none; margin:clamp(2.2rem,5vw,3rem) 0 0; padding:1.4rem 0 0;
  border-top:1px solid var(--filete-db); display:grid; gap:1.2rem; }
@media (min-width:560px){ .duros{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; } }
.duros li{ display:flex; align-items:center; gap:.8rem; padding-right:1rem; }
@media (min-width:560px){ .duros li + li{ border-left:1px solid var(--filete-db); padding-left:1.2rem; } }
.duros svg{ width:30px; height:30px; flex:none; stroke:var(--cobre-luz); fill:none;
  stroke-width:1.4; stroke-linecap:square; }
.duros b{ display:block; font-size:var(--t-s); font-weight:700; }
.duros span span{ display:block; font-size:var(--t-xs); color:var(--hueso-med); }

/* barra de datos dentro de una seccion: mismo lenguaje que .duros
   de portada, pero arriba del contenido y con filete abajo. */
.duros--sec{ margin:1.9rem 0 0; padding:0 0 1.4rem;
  border-top:0; border-bottom:1px solid var(--filete-db); }

/* ── dibujo técnico ─────────────────────────────────────────── */
.dibujo{ stroke:var(--cobre); fill:none; stroke-width:1.4; stroke-linecap:square; }
.dibujo-fino{ stroke:var(--cobre); fill:none; stroke-width:.8; opacity:.72; }
.sombra-dib{ stroke:#000; fill:none; stroke-width:2.6; opacity:.55; }
.cota-l{ stroke:var(--cobre-luz); fill:none; stroke-width:.7; }
.cota-p{ fill:var(--cobre-luz); stroke:none; }
.cota-t{ fill:var(--cobre-luz); font-family:var(--tipo); font-size:9.5px;
  font-weight:600; font-variation-settings:"wdth" 92; font-variant-numeric:tabular-nums; }
.cotas{ opacity:0; transition:opacity .24s var(--curva); }
.arte{ transition:transform .3s var(--curva); }
.modulo:hover .cotas,.modulo:focus-visible .cotas{ opacity:1; }
.modulo:hover .arte,.modulo:focus-visible .arte{ transform:translateY(-4px) scale(1.015); }

/* ── servicios ──────────────────────────────────────────────── */
.modulos{ display:grid; margin-top:2.6rem; border-top:1px solid var(--filete-db); }
@media (min-width:640px){ .modulos{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1060px){ .modulos{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.modulo{ display:block; text-decoration:none; color:inherit;
  padding:1.6rem 1.25rem 1.8rem; border-bottom:1px solid var(--filete-db);
  transition:background .2s var(--curva); }
.modulo:hover{ background:var(--carbon); }
@media (min-width:640px){
  .modulo{ border-right:1px solid var(--filete-db); }
  .modulo:nth-child(2n){ border-right:0; }
}
@media (min-width:1060px){
  .modulo{ border-right:1px solid var(--filete-db); border-bottom:0; }
  .modulo:nth-child(2n){ border-right:1px solid var(--filete-db); }
  .modulo:last-child{ border-right:0; }
}
.modulo svg{ width:100%; height:auto; margin-bottom:1rem; }
.modulo h3{ font-size:var(--t-m); font-variation-settings:"wdth" 108; }
.modulo p{ margin-top:.55rem; font-size:var(--t-s); color:var(--hueso-med); }

/* ── proyectos ──────────────────────────────────────────────── */
.cabeza-obras{ display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end;
  justify-content:space-between; }
/* ── proyectos: una fila editorial por obra ──────────────────
   Antes eran tarjetas de 1/2/3 columnas con la foto recortada a
   4:3. El recorte era el problema: de las seis fotos del taller
   tres son verticales y una es panorámica, así que a cuatro de
   seis les quitaba medio encuadre, y la retícula lo enseñaba
   todo junto, cada una cortada por un sitio distinto. Eso es lo
   que se leía como desordenado.

   Ahora cada obra es una fila: la foto entera a un lado y su
   ficha al otro, alternando el lado. Una fila no compite con la
   de al lado, así que da igual que una foto sea vertical y la
   siguiente panorámica — que es justo lo que son.               */
.obras{ display:grid; gap:clamp(3.2rem,7vw,5.5rem); margin-top:clamp(2.6rem,5vw,3.6rem); }

/* La fila NO es una tarjeta: no lleva marco, ni fondo, ni sombra.
   El marco se lo queda la foto (.lienzo). Con seis cajas grandes
   una debajo de otra, el borde de la caja pelea con el borde de
   la foto y se ven dos rectángulos concéntricos en cada fila. */
.obra{ container-type:inline-size; margin:0; display:grid;
  gap:clamp(1.3rem,3vw,2.4rem); align-items:center; }

/* ── la forma de la fila la decide la foto ───────────────────
   sitio.js le pone a cada <figure> su clase según la proporción
   REAL del original (ver formaDe en sitio.js). Son tres tramos,
   no una fórmula continua: un reparto distinto por foto haría
   que ninguna fila se pareciera a otra, y volveríamos al mismo
   desorden por el otro lado.

     es-ancha    apaisada    la foto pide más columna que el texto
     es-alta     vertical    al revés: si no, la fila mide 750 px
                             de alto y la ficha nada al lado
     es-pano     panorámica  no cabe en media fila: se la queda
                             entera y la ficha va debajo
     es-cuadrada             mitad y mitad                        */
.obra{ --col-foto:1fr; --col-texto:1fr; }
.obra.es-ancha{ --col-foto:1.22fr; --col-texto:.78fr; }
.obra.es-alta { --col-foto:.82fr;  --col-texto:1.18fr; }

@media (min-width:880px){
  .obra{ grid-template-columns:var(--col-foto) var(--col-texto); }
  /* alterna el lado. Va por nth-of-type y no por una clase para
     que al agregar un proyecto no haya que acordarse de nada. */
  .obra:nth-of-type(even){ grid-template-columns:var(--col-texto) var(--col-foto); }
  .obra:nth-of-type(even) .lienzo{ grid-column:2; grid-row:1; }
  .obra:nth-of-type(even) figcaption{ grid-column:1; grid-row:1; }

  /* la panorámica rompe el reparto: fila entera y ficha debajo, en
     dos columnas para que no quede una línea de datos larguísima */
  .obra.es-pano{ grid-template-columns:minmax(0,1fr); }
  .obra.es-pano .lienzo,.obra.es-pano figcaption{ grid-column:1; grid-row:auto; }
  .obra.es-pano figcaption{ display:grid; gap:0 clamp(2rem,4vw,3.4rem);
    grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
  .obra.es-pano h3{ grid-column:1/-1; }
}

/* ── el marco de la foto ─────────────────────────────────────
   Aquí no hay aspect-ratio ni object-fit, y es a propósito: son
   las dos formas de recortar una foto y esta sección existe para
   no recortar ninguna. El alto sale de `height:auto` sobre un
   ancho conocido, y el hueco está reservado antes de que la foto
   baje porque sitio.js le escribe al <img> sus width/height
   nativos (ver montaFoto).

   El aspect-ratio 4/3 que queda es solo para el dibujo técnico:
   es el encuadre de su viewBox, y solo se ve mientras un slug no
   tenga foto. En cuanto la tiene, sitio.js marca .con-foto y
   manda la foto.                                                */
.lienzo{ position:relative; aspect-ratio:4/3; background:var(--noche);
  border:1px solid var(--filete-db); border-radius:var(--radio);
  overflow:hidden; box-shadow:var(--luz-alta),var(--sombra);
  transition:border-color .25s var(--curva); }
.lienzo.con-foto{ aspect-ratio:auto; }
.obra:hover .lienzo,.obra:focus-within .lienzo{ border-color:var(--filete); }
.lienzo svg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.lienzo picture{ display:block; }
.lienzo img{ display:block; width:100%; height:auto; z-index:1; position:relative;
  opacity:0; transition:opacity .45s var(--curva); }
.lienzo img.cargada{ opacity:1; }

/* ── la ficha, siempre visible y siempre fuera de la foto ────
   Antes Material y Plazo vivían en un velo encima de la imagen,
   que aparecía al pasar el cursor. Eso escondía el dato a quien
   entra por teléfono y además tapaba la foto justo cuando la
   estabas mirando. Ahora se lee siempre, sin interactuar. */
.obra figcaption{ padding:0; }
.obra h3{ font-size:clamp(var(--t-m),2.4vw,1.55rem); font-variation-settings:"wdth" 106;
  line-height:1.18; }
.ficha{ margin:1.1rem 0 0; font-size:var(--t-xs); }
.ficha div{ display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0;
  border-top:1px solid var(--filete-db); }
.ficha dt{ color:var(--hueso-med); }
.ficha dd{ margin:0; font-weight:600; text-align:right; }
@container (max-width:260px){ .ficha div{ flex-direction:column; gap:0; } .ficha dd{ text-align:left; } }

/* ── las claves del proyecto ─────────────────────────────────
   Eran tres recuadros cuadrados flotando sobre la foto, cada uno
   con un reencuadre de la propia imagen hecho con coordenadas
   --x/--y puestas a ojo. Al dejar de recortar, esas coordenadas
   apuntaban a otro sitio; y calibrarlas nunca fue sostenible:
   cambiar una foto obligaba a recalibrar tres puntos a mano, sin
   que nada avisara si se quedaban mal. Ahora son texto. */
.claves{ list-style:none; margin:1.4rem 0 0; padding:1.1rem 0 0;
  border-top:1px solid var(--filete-db); display:grid; gap:.85rem; }
.clave{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.75rem;
  align-items:baseline; }
.clave .num{ font-size:.625rem; font-weight:700; letter-spacing:.14em;
  color:var(--cobre-luz); font-variant-numeric:tabular-nums; }
.clave .dato{ display:grid; gap:.1rem; }
.clave b{ font-size:var(--t-xs); font-weight:600; line-height:1.25; color:var(--hueso); }
.clave i{ font-style:normal; font-size:.75rem; line-height:1.35; color:var(--hueso-med); }

/* toda la foto es el botón que abre el visor */
.lupa{ position:absolute; inset:0; z-index:3; width:100%; height:100%; background:transparent;
  border:0; cursor:zoom-in; padding:0; }
.lupa[hidden]{ display:none; }
.mas-obras{ margin-top:clamp(2.4rem,5vw,3.4rem); display:flex; justify-content:center; }

/* El tamaño del visor NO se decide aqui: lo pone 11-galeria.css, que lo
   calcula con la proporcion nativa de cada foto para enmarcarla entera.
   Aqui quedan solo el color, el filete y la sombra. */
dialog.visor{ border:1px solid var(--filete-db); border-radius:var(--radio);
  background:var(--carbon); color:var(--hueso); padding:0;
  box-shadow:var(--sombra-alta); }
dialog.visor::backdrop{ background:rgba(10,9,9,.86); }
.visor-pie{ display:flex; gap:1rem; align-items:center; justify-content:space-between;
  padding:.9rem 1.1rem; border-top:1px solid var(--filete-db); font-size:var(--t-s); }

/* ── proceso ────────────────────────────────────────────────── */
.etapas{ list-style:none; margin:2.6rem 0 0; padding:0; }
.etapa{ position:relative; display:grid; gap:.3rem 1.4rem;
  padding:0 0 2.3rem 2.7rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:880px){
  .etapa{ grid-template-columns:minmax(0,15rem) minmax(0,1fr) 9rem; align-items:baseline; }
}
.etapa::before,.etapa::after{ content:""; position:absolute; left:.46rem; top:1.6rem;
  bottom:-.35rem; width:1px; }
.etapa::before{ background:var(--filete-db); }
.etapa::after{ background:var(--cobre-luz); transform:scaleY(0); transform-origin:top;
  transition:transform .8s var(--curva); }
.etapa.visto::after{ transform:scaleY(1); }
.etapa:last-child::before,.etapa:last-child::after{ display:none; }
.punto{ position:absolute; left:0; top:.6rem; width:.95rem; height:.95rem;
  border-radius:50%; border:1px solid var(--filete); background:var(--noche);
  transition:border-color .35s var(--curva),transform .35s var(--curva); }
.etapa.visto .punto{ border-color:var(--cobre-luz); transform:scale(1.18); }
.etapa h3{ font-size:var(--t-m); font-variation-settings:"wdth" 104; }
.etapa p{ margin:.3rem 0 0; font-size:var(--t-s); color:var(--hueso-med); }
.plazo{ font-size:var(--t-s); font-weight:600; color:var(--cobre-luz);
  font-variant-numeric:tabular-nums; margin-top:.4rem; }
@media (min-width:880px){ .plazo{ text-align:right; margin-top:0; } }

/* ── reseñas ────────────────────────────────────────────────── */
.dichos{ display:grid; gap:1.3rem; margin-top:2.4rem; }
@media (min-width:760px){ .dichos{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.dicho{ margin:0; border-left:2px solid var(--cobre); padding:.2rem 0 .2rem 1.15rem; }
.dicho p{ font-size:var(--t-s); }
.dicho figcaption{ margin-top:.75rem; font-size:var(--t-xs); color:var(--hueso-med); }

/* ── preguntas ──────────────────────────────────────────────── */
.preguntas{ margin-top:2.4rem; border-top:1px solid var(--filete-db); max-width:72ch; }
.preguntas details{ border-bottom:1px solid var(--filete-db); }
.preguntas summary{ cursor:pointer; list-style:none; padding:1.15rem 2.2rem 1.15rem 0;
  position:relative; font-weight:600; font-size:var(--t-b); min-height:46px; }
.preguntas summary::-webkit-details-marker{ display:none; }
.preguntas summary::after{ content:""; position:absolute; right:.4rem; top:1.6rem;
  width:9px; height:9px; border-right:1.5px solid var(--cobre-luz);
  border-bottom:1.5px solid var(--cobre-luz); transform:rotate(45deg);
  transition:transform .22s var(--curva); }
.preguntas details[open] summary::after{ transform:rotate(-135deg); }
.preguntas p{ margin:0 0 1.2rem; font-size:var(--t-s); color:var(--hueso-med); max-width:64ch; }

/* ── cotización ─────────────────────────────────────────────── */
.cotiza-reja{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
@media (min-width:940px){ .cotiza-reja{ grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); } }
.tipos{ border:0; margin:0 0 1.2rem; padding:0; }
.tipos legend{ font-size:var(--t-s); font-weight:600; padding:0; margin-bottom:.55rem; }
.rejilla-tipos{ display:grid; gap:.55rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:520px){ .rejilla-tipos{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.tipo-op{ position:relative; }
.tipo-op input{ position:absolute; inset:0; opacity:0; width:100%; height:100%;
  margin:0; cursor:pointer; }
.tipo-op span{ display:flex; flex-direction:column; align-items:center; gap:.45rem;
  min-height:78px; justify-content:center; text-align:center; padding:.6rem .3rem;
  border:1px solid var(--filete-db); border-radius:var(--radio); background:var(--carbon);
  box-shadow:var(--luz-alta); font-size:var(--t-xs); font-weight:600;
  transition:border-color .16s var(--curva),color .16s var(--curva); }
.tipo-op svg{ width:26px; height:26px; stroke:var(--cobre-luz); fill:none; stroke-width:1.4; }
.tipo-op input:hover + span{ border-color:var(--filete); }
.tipo-op input:focus-visible + span{ outline:2px solid var(--cobre-luz); outline-offset:2px; }
.tipo-op input:checked + span{ border-color:var(--cobre-luz); color:var(--cobre-luz);
  background:var(--carbon-alto); }

.campos{ display:grid; gap:1.15rem; }
@media (min-width:620px){
  .campos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .completo{ grid-column:1/-1; }
}
.campo{ display:flex; flex-direction:column; gap:.35rem; }
.campo label{ font-size:var(--t-s); font-weight:600; }
.opcional{ color:var(--hueso-med); font-weight:400; }
.campo input,.campo select,.campo textarea{ width:100%; font-family:inherit;
  font-size:var(--t-b); color:var(--hueso); background:var(--carbon);
  border:1px solid var(--filete); border-radius:var(--radio); padding:.74rem .82rem;
  min-height:46px; box-shadow:var(--luz-alta);
  transition:border-color .16s var(--curva); }
.campo input:hover,.campo select:hover,.campo textarea:hover{ border-color:var(--hueso-med); }
.campo textarea{ min-height:8.5rem; resize:vertical; line-height:1.5; }
.campo select{ appearance:none; padding-right:2.4rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--hueso) 50%),linear-gradient(135deg,var(--hueso) 50%,transparent 50%);
  background-position:calc(100% - 18px) 53%,calc(100% - 13px) 53%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.campo input::placeholder,.campo textarea::placeholder{ color:#8B857D; }
.aviso{ margin:0; font-size:var(--t-xs); color:var(--hueso-med); min-height:1.15em; }
.campo[data-mal] input,.campo[data-mal] select,.campo[data-mal] textarea{ border-color:var(--alarma); }
.campo[data-ok] input,.campo[data-ok] select,.campo[data-ok] textarea{ border-color:var(--exito); }
.campo[data-mal] .aviso{ color:var(--alarma); }
.estado{ margin:1.15rem 0 0; font-size:var(--t-s); color:var(--hueso-med); }
.estado[data-tono="mal"]{ color:var(--alarma); }
.nota{ margin-top:.9rem; font-size:var(--t-xs); color:var(--hueso-med); }
.recibido{ border-top:2px solid var(--cobre-luz); padding-top:1.5rem; }
.recibido h3{ font-size:var(--t-l); margin-bottom:.7rem; }
[hidden]{ display:none !important; }
.datos{ margin:1.8rem 0 0; font-size:var(--t-s); }
.datos div{ padding:.85rem 0; border-top:1px solid var(--filete-db); display:grid; gap:.15rem; }
.datos dt{ font-size:var(--t-xs); color:var(--hueso-med); }
.datos dd{ margin:0; font-weight:600; }
.datos a{ text-decoration:none; }

/* ── remate ─────────────────────────────────────────────────── */
.remate{ border-top:1px solid var(--filete-db); padding-block:2.8rem; font-size:var(--t-s); }
.remate-reja{ display:grid; gap:1.9rem; }
@media (min-width:720px){ .remate-reja{ grid-template-columns:1.4fr 1fr 1fr; } }
.remate h4{ margin:0 0 .75rem; font-size:var(--t-xs); font-weight:600;
  font-variation-settings:"wdth" 88; color:var(--cobre-luz); letter-spacing:.09em; }
.remate ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.remate a{ color:var(--hueso-med); text-decoration:none; }
.remate a:hover{ color:var(--cobre-luz); }
.remate-lema{ color:var(--hueso-med); max-width:34ch; margin-top:.7rem; }
.remate-abajo{ margin-top:2.1rem; padding-top:1.25rem; border-top:1px solid var(--filete-db);
  color:var(--hueso-med); font-size:var(--t-xs); }

/* ── barra móvil ────────────────────────────────────────────── */
.barra-movil{ position:fixed; left:0; right:0; bottom:0; z-index:45;
  padding:.65rem var(--marco) calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(19,18,17,.95); backdrop-filter:blur(12px);
  border-top:1px solid var(--filete-db);
  transform:translateY(115%); transition:transform .26s var(--curva); }
.barra-movil.fuera{ transform:translateY(115%) !important; }
.barra-movil .boton{ width:100%; }
@media (max-width:959px){
  .barra-movil{ transform:translateY(0); }
  body{ --barra:78px; }
}

/* ═══════════════════════════════════════════════════════════════
   TEXTURAS 2.0 — materia sin peso
   Todo se pinta con gradientes repetidos: cero peticiones, cero
   KB, y el navegador las rasteriza una vez. Cada superficie lleva
   isolation:isolate, así el ::before entra ENTRE el fondo y el
   texto (z-index:-1) sin tocar el orden de nada más.
   ═══════════════════════════════════════════════════════════════ */
.vt{ position:relative; isolation:isolate; }
.vt::before{ content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none; border-radius:inherit; contain:paint; }

/* veta de madera: tres frecuencias, como un tablero enchapado */
.vt-veta::before{ opacity:.55; background-image:
  repeating-linear-gradient(91deg,rgba(237,230,221,.030) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(91deg,rgba(0,0,0,.20) 0 1px,transparent 1px 7px),
  repeating-linear-gradient(91deg,rgba(201,145,100,.045) 0 2px,transparent 2px 23px); }

/* lino: dos tramas cruzadas, para lo que se lee */
.vt-lino::before{ opacity:.5; background-image:
  repeating-linear-gradient(45deg,rgba(237,230,221,.028) 0 1px,transparent 1px 4px),
  repeating-linear-gradient(-45deg,rgba(0,0,0,.18) 0 1px,transparent 1px 4px); }

/* metal cepillado: jaladeras, herraje, pie de página */
.vt-cepillo::before{ opacity:.6; background-image:
  repeating-linear-gradient(0deg,rgba(237,230,221,.035) 0 1px,transparent 1px 2px),
  linear-gradient(100deg,transparent 18%,rgba(237,230,221,.05) 46%,transparent 64%); }

/* poro de tablero: punteado fino de melamina */
.vt-poro::before{ opacity:.5; background-size:5px 5px; background-image:
  radial-gradient(circle at 50% 50%,rgba(0,0,0,.32) .5px,transparent .7px); }

/* ═══ LOGO — respira, se inclina y gira su aro de cobre ═══════
   Solo transform y opacity: nada que obligue a recalcular diseño.
   El float va en .pieza (translate) y la inclinación en la imagen
   (rotate), así la animación y el puntero nunca pelean por la
   misma propiedad.                                              */
.pieza{ position:relative; z-index:2; width:100%; max-width:350px;
  aspect-ratio:832/1248; perspective:900px;
  animation:flotar 7.5s ease-in-out infinite; }
.pieza img{ transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-origin:50% 60%; transition:transform .5s var(--curva);
  animation:asienta .9s var(--curva) both .15s; }
.pieza.viva img{ transition:transform .12s linear; }
@keyframes flotar{ 0%,100%{ transform:translate3d(0,0,0); }
                   50%   { transform:translate3d(0,-11px,0); } }
@keyframes asienta{ from{ opacity:0; transform:rotateY(-16deg) translateY(18px); }
                    to  { opacity:1; } }

/* aro de cobre que orbita detrás del monograma */
.foco::after{ content:""; position:absolute; width:min(88%,410px); aspect-ratio:1;
  border-radius:50%; z-index:1; pointer-events:none; opacity:.7;
  background:conic-gradient(from 0deg,transparent 0 58%,
             rgba(201,145,100,.62) 76%,rgba(201,145,100,0) 90%);
  -webkit-mask:radial-gradient(closest-side,transparent 96.5%,#000 97.5%);
          mask:radial-gradient(closest-side,transparent 96.5%,#000 97.5%);
  animation:orbita 16s linear infinite; }
@keyframes orbita{ to{ transform:rotate(360deg); } }
.foco::before{ transition:opacity .6s var(--curva); }
.escenario:hover .foco::before{ opacity:.55; }

/* logo del encabezado y del pie: gira un poco al pasar encima */
.firma{ perspective:420px; }
.firma img{ transition:transform .45s var(--curva),filter .3s var(--curva);
  transform-origin:50% 60%; }
.firma:hover img,.firma:focus-visible img{
  transform:rotateY(26deg) scale(1.05);
  filter:drop-shadow(0 4px 10px rgba(201,145,100,.42)); }

/* ── revelado: lo pinta un solo observador compartido ──────── */
[data-revela]{ opacity:0; transform:translate3d(0,16px,0);
  transition:opacity .55s var(--curva),transform .55s var(--curva);
  transition-delay:var(--d,0ms); }
[data-revela].revelado{ opacity:1; transform:none; }

/* ── encabezado: se encoge sin un solo listener de scroll ──── */
.techo{ transition:background .25s var(--curva),box-shadow .25s var(--curva); }
.techo .marco{ transition:min-height .25s var(--curva); }
.techo.encogido{ background:rgba(19,18,17,.95); box-shadow:0 12px 34px -26px #000; }
.techo.encogido .marco{ min-height:58px; }
#tope{ position:absolute; top:0; left:0; width:1px; height:1px; }

/* pestaña en segundo plano: se pausa todo y no gasta batería */
html.quieto *,html.quieto *::before,html.quieto *::after{
  animation-play-state:paused !important; }

/* contención: cada tarjeta repinta lo suyo y nada más */
.dicho,.corte{ contain:layout paint style; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .cotas{ opacity:1; }
  .etapa::after{ transform:scaleY(1); }
  .arte{ transform:none !important; }
  .pieza,.foco::after{ animation:none !important; }
  .pieza img{ animation:none !important; opacity:1 !important; transform:none !important; }
  [data-revela]{ opacity:1 !important; transform:none !important; }
}