/*
  casa.nachofernandez.uy — la lámina que reciben las constructoras.

  El mundo visual es el del proyecto Chacra: noche de laguna, tinta de papel
  viejo, ámbar de campo al atardecer. Acá tiene una regla de más, y es la que
  ordena todo: el ÁMBAR sólo toca lo que se cotiza ahora (los 106 m², las
  acciones, la fecha que importa). Lo que va después se dibuja en línea de
  puntos y en gris de monte. Si algo está en ámbar, entra en el presupuesto.

  El LAGUNA es agua y vidrio: la piscina y las dos aberturas de 7,50 m.

  Todo lo que sea una medida, una cota, un código de lámina o una fecha va en
  mono. No como disfraz técnico: porque son números que se comparan en columna.
*/

/* ══════════════════════════════ TIPOGRAFÍAS ══════════════════════════════ */
@font-face { font-family:'Fraunces'; src:url('../fuentes/fraunces-latin-400-normal.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fuentes/fraunces-latin-600-normal.woff2') format('woff2');
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fuentes/fraunces-latin-700-normal.woff2') format('woff2');
             font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fuentes/inter-latin-400-normal.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fuentes/inter-latin-500-normal.woff2') format('woff2');
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fuentes/inter-latin-600-normal.woff2') format('woff2');
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fuentes/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fuentes/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
             font-weight:500; font-style:normal; font-display:swap; }

/* ════════════════════════════════ TOKENS ════════════════════════════════ */
:root{
  --bg:#0b1210;
  --bg2:#111a17;
  --bg3:#17231f;
  --tinta:#ede7da;
  --tenue:#a4b4ab;
  --tenue2:#7c8d84;
  --ambar:#c98a3b;
  --ambar-claro:#e4c77a;
  --laguna:#3fa6a0;
  --laguna-claro:#7fd1cb;
  --linea:#24332d;
  --linea2:#35473f;

  --display:'Fraunces', ui-serif, Georgia, serif;
  --cuerpo:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ancho:1180px;
  --gut:clamp(20px, 5vw, 56px);
  --salto:clamp(68px, 9vw, 112px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:24px;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--tinta);
  font-family:var(--cuerpo);
  font-size:clamp(16px, .55vw + 15px, 17.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Las superficies que no dibujé yo también son parte del diseño. */
::selection{ background:var(--ambar); color:#180f04; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--linea2); border-radius:8px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#486056; }
html{ scrollbar-color:var(--linea2) var(--bg); scrollbar-width:thin; }
:focus-visible{ outline:2px solid var(--ambar-claro); outline-offset:3px; border-radius:3px; }
input,button,textarea{ font:inherit; color:inherit; caret-color:var(--ambar); }
img,svg{ max-width:100%; }
img{ height:auto; display:block; }

h1,h2,h3{ font-family:var(--display); font-weight:600; margin:0; letter-spacing:-.018em;
          line-height:1.08; text-wrap:balance; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
b,strong{ font-weight:600; color:var(--tinta); }
a{ color:var(--laguna-claro); text-decoration-thickness:1px; text-underline-offset:.22em;
   text-decoration-color:color-mix(in srgb, var(--laguna-claro) 45%, transparent); }
a:hover{ text-decoration-color:var(--laguna-claro); }
ol,ul{ margin:0; padding:0; list-style:none; }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:60;
  background:var(--ambar); color:#180f04; padding:12px 18px; font-weight:600;
  border-radius:0 0 6px 0; text-decoration:none;
}
.saltar:focus{ left:0; }

/* ═════════════════════════════ ICONOGRAFÍA ═════════════════════════════ */
/* Un solo trazo, un solo peso, en todo el sitio. */
.ico{
  width:1.15em; height:1.15em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico--ok{ color:var(--ambar); stroke-width:2.1; }
.ico--ig{ width:1.5em; height:1.5em; color:var(--tenue2); stroke-width:1.5; }
.ico--ig path{ stroke-width:2.6; }

/* ══════════════════════════════ PORTADA ══════════════════════════════ */
.portada{
  position:relative;
  /* Mismo carril que las láminas: así el título, el rótulo y los encabezados
     arrancan en la misma línea, y el riel lateral no se le viene encima. */
  max-width:calc(var(--ancho) + var(--gut) * 2);
  margin:0 auto;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  padding:clamp(28px,5vh,54px) var(--gut) 0;
  overflow:hidden;
}
/* Papel de plano: una grilla de 10 mm, apenas visible. */
.portada::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--linea) 62%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--linea) 62%, transparent) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(120% 90% at 70% 35%, #000 5%, transparent 72%);
  pointer-events:none;
}
.portada > *{ position:relative; }

.portada__texto{ max-width:38ch; padding-bottom:clamp(18px,3vh,34px); }
.portada h1{
  font-size:clamp(2.1rem, 4.3vw, 3.35rem);
  font-weight:700;
  letter-spacing:-.028em;
  line-height:1.05;
}
.bajada{
  margin:clamp(18px,2.4vh,26px) 0 0;
  color:var(--tenue);
  font-size:clamp(1rem,.4vw + .95rem,1.12rem);
  max-width:44ch;
}
.acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(22px,3vh,32px); }

.portada__plano{
  margin:0;
  align-self:center;
  justify-self:center;
  width:100%;
  max-width:none;
}
.portada__plano picture{ display:block; }
.portada__plano img,
.portada__plano svg{ width:100%; height:auto; display:block; }

/* El único gesto de movimiento de la página: el plano se traza solo, una vez.
   La clase la pone el JS y se saca sola a los 4 s, así el estado final siempre
   es el plano entero, anime o no anime el navegador. */
.portada__plano.anima svg .muro{
  stroke-dasharray:var(--l); stroke-dashoffset:var(--l);
  animation:trazar 2s var(--ease) .15s forwards;
}
@keyframes trazar{ to{ stroke-dashoffset:0; } }
.portada__plano.anima svg text,
.portada__plano.anima svg .vidrio{
  opacity:0; animation:asomar .85s ease-out 1.05s forwards;
}
@keyframes asomar{ to{ opacity:1; } }

/* ════════════════════════════════ RÓTULO ════════════════════════════════ */
/* Como en cualquier lámina: cruza el pie del dibujo, en celdas con línea. */
.rotulo{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  border-top:1px solid var(--linea2);
  margin-top:clamp(20px,3vh,34px);
}
.rotulo__celda{
  padding:14px 16px 16px;
  border-right:1px solid var(--linea);
  display:flex; flex-direction:column; gap:5px;
  min-width:0;
}
.rotulo__celda:last-child{ border-right:0; }
.rotulo__k{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tenue2);
}
.rotulo__v{ font-size:.82rem; line-height:1.42; color:var(--tinta); }
.rotulo__v--ambar{ color:var(--ambar-claro); font-weight:500; }
.rotulo__celda--comitentes{ flex-direction:row; align-items:center; gap:12px; }
.rotulo__celda--comitentes img{
  width:44px; height:52px; object-fit:cover; object-position:50% 32%;
  border:1px solid var(--linea2); flex:none;
}
.rotulo__celda--comitentes > span{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.rotulo__celda--lam{ flex:none; }
@media (max-width:640px){
  .rotulo{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .rotulo__celda{ border-bottom:1px solid var(--linea); }
  .rotulo__celda:nth-child(2n){ border-right:0; }
  .rotulo__celda--comitentes{ grid-column:1 / -1; border-right:0; }
  .rotulo__celda--lam{ grid-column:1 / -1; border-bottom:0;
                       flex-direction:row; align-items:center; gap:12px; }
}
.rotulo__lam{
  font-family:var(--mono); font-size:1.5rem; color:var(--ambar); line-height:1;
  font-variant-numeric:tabular-nums;
}

@media (min-width:900px){
  .portada{ grid-template-columns:minmax(280px, 27rem) minmax(0,1fr); grid-template-rows:1fr auto; }
  .portada__texto{ grid-column:1; grid-row:1; align-self:center; padding-bottom:0; }
  .portada__plano{ grid-column:2; grid-row:1; padding-left:clamp(12px,2vw,40px); }
  .rotulo{ grid-column:1 / -1; grid-row:2; }
}

/* ═══════════════════════════ LISTA DE LÁMINAS ═══════════════════════════ */
.indice{
  border-bottom:1px solid var(--linea);
  padding:clamp(26px,4vw,38px) var(--gut);
  max-width:calc(var(--ancho) + var(--gut) * 2);
  margin:0 auto;
}
.indice__t{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tenue2); margin:0 0 16px;
}
.indice__l{
  display:grid; gap:2px 28px;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
}
.indice__l a{
  display:flex; gap:12px; align-items:baseline;
  padding:7px 0; color:var(--tinta); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.indice__l a:hover{ border-bottom-color:var(--ambar); color:var(--ambar-claro); }
.indice__l b{
  font-family:var(--mono); font-weight:500; font-size:.78rem; color:var(--ambar);
  font-variant-numeric:tabular-nums;
}

/* ══════════════════════════════ EL RIEL ══════════════════════════════ */
.riel{ display:none; }
@media (min-width:1480px){
  .riel{
    display:flex; flex-direction:column; gap:1px;
    position:fixed; left:22px; top:50%; transform:translateY(-50%); z-index:20;
    padding-left:2px;
  }
  .riel a{
    display:flex; align-items:center; gap:10px;
    padding:5px 8px 5px 0; text-decoration:none; color:var(--tenue2);
    font-size:.72rem; line-height:1.2;
    transition:color .2s var(--ease);
  }
  .riel i{
    font-family:var(--mono); font-style:normal; font-size:.68rem;
    font-variant-numeric:tabular-nums;
    border-left:2px solid var(--linea2); padding-left:9px;
    transition:border-color .2s var(--ease), color .2s var(--ease);
  }
  .riel span{ opacity:0; transform:translateX(-4px);
              transition:opacity .2s var(--ease), transform .2s var(--ease); }
  .riel:hover span,
  .riel a[aria-current="true"] span{ opacity:1; transform:none; }
  .riel a:hover,
  .riel a[aria-current="true"]{ color:var(--tinta); }
  .riel a:hover i,
  .riel a[aria-current="true"] i{ border-left-color:var(--ambar); color:var(--ambar); }
}

/* ══════════════════════════════ LÁMINAS ══════════════════════════════ */
main{ max-width:calc(var(--ancho) + var(--gut) * 2); margin:0 auto; padding:0 var(--gut); }

.lamina{
  padding:var(--salto) 0;
  border-bottom:1px solid var(--linea);
}
.lamina:last-child{ border-bottom:0; }

/* Encabezado de lámina: número, título y la línea que cruza hasta el borde. */
.lamina__t{
  display:flex; align-items:baseline; gap:clamp(12px,2vw,20px);
  font-size:clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom:clamp(26px,4vw,40px);
}
.lamina__t::after{
  content:''; flex:1 1 auto; height:1px; background:var(--linea2);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease);
}
.lamina.vista .lamina__t::after{ transform:scaleX(1); }
.lamina__n{
  font-family:var(--mono); font-weight:500;
  font-size:.7rem; letter-spacing:.1em; font-variant-numeric:tabular-nums;
  color:var(--ambar);
  border:1px solid color-mix(in srgb, var(--ambar) 45%, transparent);
  padding:5px 9px; border-radius:3px;
  position:relative; top:-.35em; flex:none;
}

.entrada{
  font-family:var(--display); font-size:clamp(1.18rem,1.5vw + .9rem,1.6rem);
  line-height:1.32; color:var(--tinta); letter-spacing:-.014em;
  margin-bottom:1.1em; text-wrap:pretty;
}
.entrada--ancha{ max-width:60ch; margin-bottom:clamp(30px,4vw,46px); }
.entrada--grande{ font-size:clamp(1.4rem,2.2vw + .9rem,2.05rem); max-width:22ch; }

.prosa{ max-width:62ch; }
.prosa p{ color:var(--tenue); }
.prosa .entrada{ color:var(--tinta); }

.remate{
  max-width:64ch; color:var(--tinta);
  border-left:1px solid var(--ambar);
  padding-left:clamp(16px,2vw,24px);
  margin-top:clamp(26px,4vw,40px);
}
.remate--grande{ font-family:var(--display); font-size:clamp(1.12rem,1.1vw + .9rem,1.4rem);
                 line-height:1.4; letter-spacing:-.012em; }

.dos{
  display:grid; gap:clamp(30px,4.5vw,64px);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:860px){
  .dos{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
  .dos--pareja{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ═════════════════════════ 01 · HECHOS DEL TERRENO ═════════════════════ */
.hechos{ display:flex; flex-direction:column; }
/* Nada de grilla en las listas con texto corrido: cada <b> y cada corrida de
   texto sería un ítem de grilla aparte y el párrafo se parte en pedazos. La
   marca va absoluta y el texto fluye como texto. */
.hechos li{
  position:relative; padding:15px 0 15px 30px;
  border-top:1px solid var(--linea);
  font-size:.94rem; color:var(--tenue); line-height:1.5;
}
.hechos li:last-child{ border-bottom:1px solid var(--linea); }
.hechos .ico{ position:absolute; left:0; top:calc(15px + .22em); }
.hechos__pend{ color:var(--tenue2); }
.hechos__pend .ico{ color:var(--tenue2); }

/* ═══════════════════════════════ GALERÍAS ═══════════════════════════════ */
.galeria{ display:grid; gap:clamp(14px,2vw,22px); margin-top:clamp(34px,5vw,56px); }
.galeria--dos{ grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.galeria--tres{ grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); }
.galeria--tres img{ aspect-ratio:16/9; object-fit:cover; }
.galeria--tres figure:nth-child(4) img{ object-position:50% 45%; }
.galeria figure{ margin:0; }
.galeria img{
  width:100%; border:1px solid var(--linea);
  background:var(--bg2);
}
.figura--retrato img{ aspect-ratio:4/3; object-fit:cover; object-position:50% 38%; }
.galeria figcaption,
.plano-ancho figcaption{
  margin-top:10px; font-size:.79rem; line-height:1.45; color:var(--tenue2);
  max-width:46ch;
}

.plano-ancho{ margin:0 0 clamp(34px,5vw,54px); }
.plano-ancho img{ width:100%; }
/* En celular el conjunto no entra legible: se desliza en su propio carril. */
.plano-ancho__scroll{ overflow-x:auto; overscroll-behavior-x:contain; }
.plano-ancho__scroll img{ min-width:640px; }
.solo-movil{ display:none; }
@media (max-width:780px){ .solo-movil{ display:inline; color:var(--laguna); } }
@media (min-width:781px){ .plano-ancho__scroll img{ min-width:0; } }

/* ══════════════════════ 02 · ENTRA / NO ENTRA ══════════════════════ */
.cuadro{ padding:clamp(20px,2.6vw,30px); border:1px solid var(--linea); background:var(--bg2); }
.cuadro h3{ font-size:1.12rem; margin-bottom:4px; }
.cuadro__m{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 18px;
}
.cuadro ul{ display:flex; flex-direction:column; gap:11px; }
.cuadro li{ position:relative; padding-left:19px; font-size:.93rem; color:var(--tenue); line-height:1.5; }
.cuadro li::before{
  content:''; position:absolute; left:0; top:.62em; width:9px; height:1px;
}
.cuadro--si{ border-color:color-mix(in srgb, var(--ambar) 40%, transparent);
             background:color-mix(in srgb, var(--ambar) 5%, var(--bg2)); }
.cuadro--si h3{ color:var(--ambar-claro); }
.cuadro--si .cuadro__m{ color:var(--ambar); }
.cuadro--si li::before{ background:var(--ambar); }
.cuadro--no .cuadro__m{ color:var(--tenue2); }
.cuadro--no li::before{ background:var(--linea2); }
.cuadro--no li{ color:var(--tenue2); }
.cuadro__nota{
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--linea);
  font-size:.86rem; color:var(--tenue); line-height:1.5;
}

.aviso{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  margin-top:clamp(30px,4vw,46px);
  padding:18px 20px;
  border:1px solid var(--linea2);
  background:var(--bg2);
  font-size:.9rem; line-height:1.55; color:var(--tenue);
  max-width:70ch;
}
.aviso .ico{ color:var(--laguna); margin-top:.15em; width:1.3em; height:1.3em; }
.aviso--opc .ico{ color:var(--ambar); }

/* ══════════════════════ 03 · LOS NUDOS TÉCNICOS ══════════════════════ */
.nudos{ counter-reset:nudo; display:grid; gap:0; }
.nudos > li{
  counter-increment:nudo;
  position:relative;
  padding:clamp(24px,3.4vw,34px) 0 clamp(24px,3.4vw,34px) clamp(42px,5vw,62px);
  border-top:1px solid var(--linea);
}
.nudos > li:last-child{ border-bottom:1px solid var(--linea); }
.nudos > li::before{
  content:counter(nudo, upper-alpha);
  position:absolute; left:0; top:calc(clamp(24px,3.4vw,34px) + .1em);
  font-family:var(--mono); font-size:.78rem; color:var(--laguna);
  border:1px solid color-mix(in srgb, var(--laguna) 40%, transparent);
  width:2em; height:2em; display:grid; place-items:center; border-radius:50%;
}
.nudos h3{ font-size:clamp(1.1rem,1.2vw + .85rem,1.34rem); margin-bottom:.5em; }
.nudos p{ color:var(--tenue); max-width:62ch; font-size:.96rem; }

.sistema{
  margin-top:clamp(34px,4.5vw,50px);
  padding:clamp(22px,3vw,32px);
  border:1px solid color-mix(in srgb, var(--ambar) 32%, transparent);
  background:color-mix(in srgb, var(--ambar) 4%, var(--bg2));
  max-width:74ch;
}
.sistema h3{ font-size:1.18rem; color:var(--ambar-claro); margin-bottom:.6em; }
.sistema p{ color:var(--tenue); font-size:.96rem; }
.sistema__p{ margin-top:1em; padding-top:1em; border-top:1px solid var(--linea); }

/* ═════════════════════════ 04 · LAS CUENTAS ═════════════════════════ */
.equipo{ border:1px solid var(--linea); background:var(--bg2); padding:clamp(20px,2.6vw,28px); }
.equipo h3{ font-size:1.05rem; margin-bottom:16px; }
.equipo ul{ display:flex; flex-direction:column; gap:9px; margin-bottom:18px; }
.equipo li{
  font-family:var(--mono); font-size:.8rem; color:var(--tinta);
  padding-left:16px; position:relative;
}
.equipo li::before{
  content:''; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--laguna);
}
.equipo p{ font-size:.86rem; color:var(--tenue2); margin:0; }

.cuentas{
  display:grid; gap:clamp(14px,2vw,20px); margin-top:clamp(34px,5vw,54px);
  grid-template-columns:repeat(auto-fit, minmax(290px,1fr));
}
.cuenta{
  display:flex; flex-direction:column; gap:6px;
  padding:clamp(22px,2.8vw,30px);
  border:1px solid var(--linea2); background:var(--bg2);
  text-decoration:none; color:var(--tinta);
  transition:border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.cuenta:hover{ border-color:var(--ambar); background:var(--bg3); transform:translateY(-2px); }
.cuenta__n{
  font-family:var(--mono); font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1;
  color:var(--ambar-claro); font-variant-numeric:tabular-nums; margin-top:12px;
}
.cuenta__h{ font-family:var(--mono); font-size:.86rem; color:var(--tenue); }
.cuenta__d{ font-size:.9rem; line-height:1.5; color:var(--tenue); margin-top:10px; }
.cuenta__ir{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-size:.8rem; color:var(--laguna-claro);
}
.cuenta:hover .cuenta__ir{ color:var(--ambar-claro); }

.pie-cuentas{
  margin-top:clamp(22px,3vw,30px); max-width:74ch;
  font-size:.92rem; color:var(--tenue); line-height:1.6;
}

/* ═══════════════════════════ 05 · EL TRATO ═══════════════════════════ */
.lamina--trato{ position:relative; }
.trato{ counter-reset:t; display:grid; gap:0; margin-top:clamp(30px,4vw,44px); }
.trato > li{
  counter-increment:t;
  position:relative;
  padding:clamp(24px,3.4vw,34px) 0 clamp(24px,3.4vw,34px) clamp(52px,6vw,78px);
  border-top:1px solid var(--linea);
}
.trato > li:last-child{ border-bottom:1px solid var(--linea); }
.trato > li::before{
  content:counter(t, decimal-leading-zero);
  position:absolute; left:0; top:calc(clamp(24px,3.4vw,34px) + .12em);
  font-family:var(--mono); font-size:1.5rem; color:var(--ambar);
  font-variant-numeric:tabular-nums; line-height:1;
}
.trato h3{ font-size:clamp(1.12rem,1.2vw + .88rem,1.4rem); margin-bottom:.5em; color:var(--ambar-claro); }
.trato p{ color:var(--tenue); max-width:62ch; font-size:.98rem; }

/* ═════════════════════════ 06 · LOS NOES ═════════════════════════ */
.noes{ display:grid; gap:0; max-width:76ch; }
.noes li{
  position:relative;
  padding:clamp(18px,2.4vw,24px) 0 clamp(18px,2.4vw,24px) 44px;
  border-top:1px solid var(--linea);
  color:var(--tenue); font-size:.98rem; line-height:1.55;
}
.noes li:last-child{ border-bottom:1px solid var(--linea); }
.noes__x{
  position:absolute; left:0; top:calc(clamp(18px,2.4vw,24px) + .1em);
  color:var(--tenue2); display:grid; place-items:center;
  width:1.7em; height:1.7em; border:1px solid var(--linea2); border-radius:50%;
}
.noes__x .ico{ width:.85em; height:.85em; }

/* ═════════════════════ 07 · LOS RECAUDOS (LA LISTA) ═════════════════════ */
.lista__barra{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  padding:14px 16px; border:1px solid var(--linea2); background:var(--bg2);
  margin-bottom:6px;
}
.lista__cont{
  margin:0; font-family:var(--mono); font-size:.78rem; color:var(--ambar);
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
}
.lista__acc{ display:flex; gap:8px; flex-wrap:wrap; }

.recaudos{ counter-reset:rec; display:grid; }
.recaudos > li{ counter-increment:rec; border-bottom:1px solid var(--linea); }
.recaudos label{
  display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:14px; align-items:start;
  padding:clamp(16px,2.2vw,22px) 4px; cursor:pointer;
}
.recaudos label::before{
  content:counter(rec, decimal-leading-zero);
  font-family:var(--mono); font-size:.74rem; color:var(--tenue2);
  font-variant-numeric:tabular-nums; margin-top:.35em;
}
.recaudos input{ position:absolute; opacity:0; width:1px; height:1px; }
.recaudos__caja{
  width:22px; height:22px; flex:none; margin-top:.12em;
  border:1px solid var(--linea2); border-radius:3px;
  display:grid; place-items:center;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.recaudos__caja svg{
  width:14px; height:14px; fill:none; stroke:#180f04; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:scale(.6);
  transition:opacity .18s var(--ease), transform .22s var(--ease);
}
.recaudos label:hover .recaudos__caja{ border-color:var(--ambar); }
.recaudos input:focus-visible + .recaudos__caja{ outline:2px solid var(--ambar-claro); outline-offset:3px; }
.recaudos input:checked + .recaudos__caja{ background:var(--ambar); border-color:var(--ambar); }
.recaudos input:checked + .recaudos__caja svg{ opacity:1; transform:none; }
.recaudos__txt{ font-size:.96rem; line-height:1.55; color:var(--tenue); }
.recaudos__txt b{ display:block; margin-bottom:2px; }
.recaudos input:checked ~ .recaudos__txt{ color:var(--tenue2); }
.recaudos input:checked ~ .recaudos__txt b{ color:var(--tenue); }

/* ═════════════════════════ 08 · LOS TIEMPOS ═════════════════════════ */
.tiempos{ display:grid; }
.tiempos li{
  display:grid; gap:4px 24px; align-items:baseline;
  grid-template-columns:minmax(0,1fr);
  padding:clamp(18px,2.4vw,24px) 0 clamp(18px,2.4vw,24px) 22px;
  border-top:1px solid var(--linea);
  position:relative;
}
.tiempos li:last-child{ border-bottom:1px solid var(--linea); }
.tiempos li::before{
  content:''; position:absolute; left:0; top:calc(clamp(18px,2.4vw,24px) + .38em);
  width:9px; height:9px; border-radius:50%;
  border:1px solid var(--linea2); background:var(--bg);
}
.tiempos li::after{
  content:''; position:absolute; left:4px; top:0; bottom:0; width:1px;
  background:var(--linea); z-index:-1;
}
.tiempos li:first-child::after{ top:50%; }
.tiempos li:last-child::after{ bottom:50%; }
.tiempos__c{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tenue2);
}
.tiempos__t{ font-family:var(--display); font-size:clamp(1.08rem,1.1vw + .86rem,1.32rem); color:var(--tinta); }
.tiempos__d{ font-size:.88rem; color:var(--tenue2); line-height:1.5; }
.tiempos__hecho::before{ background:var(--linea2); border-color:var(--linea2); }
.tiempos__hecho .tiempos__c{ color:var(--laguna); }
.tiempos__fuerte::before{ background:var(--ambar); border-color:var(--ambar);
                          box-shadow:0 0 0 4px color-mix(in srgb, var(--ambar) 16%, transparent); }
.tiempos__fuerte .tiempos__c{ color:var(--ambar); }
.tiempos__fuerte .tiempos__t{ color:var(--ambar-claro); }
@media (min-width:760px){
  .tiempos li{ grid-template-columns:16rem minmax(0,1fr); padding-left:26px; }
  .tiempos__c{ grid-row:1; }
  .tiempos__t{ grid-column:2; grid-row:1; }
  .tiempos__d{ grid-column:2; grid-row:2; }
}

/* ═════════════════════════ 09 · CIERRE ═════════════════════════ */
.pasos{ counter-reset:paso; display:grid; max-width:56ch; }
.pasos li{
  counter-increment:paso;
  position:relative; padding:16px 0 16px 42px;
  border-top:1px solid var(--linea);
  color:var(--tenue); font-size:.98rem; line-height:1.55;
}
.pasos li:last-child{ border-bottom:1px solid var(--linea); }
.pasos li::before{
  content:counter(paso);
  position:absolute; left:0; top:calc(16px + .05em);
  font-family:var(--mono); font-size:.76rem; color:var(--ambar);
  width:1.9em; height:1.9em; display:grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--ambar) 40%, transparent); border-radius:50%;
}
.contacto h3{ font-size:.98rem; margin-bottom:14px; }
.contacto__h2{ margin-top:30px; }
.contacto .boton{ margin-bottom:10px; }
.descarga{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center;
  padding:15px 17px; border:1px solid var(--linea); background:var(--bg2);
  text-decoration:none; color:var(--tinta); margin-bottom:10px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.descarga:hover{ border-color:var(--laguna); background:var(--bg3); }
.descarga .ico{ color:var(--laguna); width:1.5em; height:1.5em; }
.descarga b{ display:block; font-size:.92rem; }
.descarga em{ display:block; font-style:normal; font-size:.78rem; color:var(--tenue2); margin-top:2px; }

.lamina--cierre .cierre{
  font-family:var(--display); font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.2;
  letter-spacing:-.02em; margin-top:clamp(46px,7vw,80px); text-align:center; color:var(--tenue);
}
.lamina--cierre .cierre b{ color:var(--ambar-claro); font-weight:600; }
.firma{
  text-align:center; font-family:var(--mono); font-size:.78rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--tenue2); margin-top:18px;
}

/* ══════════════════════════════ BOTONES ══════════════════════════════ */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 20px;
  border:1px solid var(--linea2); border-radius:4px;
  background:transparent; color:var(--tinta);
  font-size:.9rem; font-weight:500; text-decoration:none; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.boton:hover{ border-color:var(--tinta); background:color-mix(in srgb, var(--tinta) 6%, transparent); }
.boton--fuerte{
  background:var(--ambar); border-color:var(--ambar); color:#180f04; font-weight:600;
}
.boton--fuerte:hover{ background:var(--ambar-claro); border-color:var(--ambar-claro); color:#180f04; }
.boton--ancho{ width:100%; }
.boton--chico{ padding:8px 13px; font-size:.78rem; }

/* ════════════════════════════════ PIE ════════════════════════════════ */
.pie{
  border-top:1px solid var(--linea);
  padding:clamp(34px,5vw,52px) var(--gut);
  max-width:calc(var(--ancho) + var(--gut) * 2); margin:0 auto;
  font-size:.78rem; color:var(--tenue2); line-height:1.6;
}
.pie p{ margin:0 0 6px; }
.pie__nota{ max-width:64ch; }

/* ══════════════════════════════ IMPRESIÓN ══════════════════════════════ */
@media print{
  :root{ --bg:#fff; --tinta:#111; --tenue:#333; --tenue2:#555; --linea:#ccc; --linea2:#999; }
  body{ background:#fff; color:#111; font-size:11pt; }
  .riel,.indice,.portada__plano,.galeria,.plano-ancho,.acciones,.lista__acc,.saltar{ display:none !important; }
  .lamina{ padding:18pt 0; page-break-inside:avoid; }
  .lamina--lista{ page-break-before:always; }
  .recaudos__caja{ border-color:#111; }
  .cuadro,.aviso,.sistema,.equipo,.cuenta,.descarga,.lista__barra{ background:#fff; border-color:#bbb; }
  a{ color:#111; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .lamina__t::after{ transform:scaleX(1); }
}