/* ============ LAS CIEN MANOS — el mapa como manifiesto ============
   Sobre la base de La Plaza (../plaza/plaza.css): mismo vacío oscuro,
   misma tinta cálida, mismo ámbar. Aquí no se vende nada: se declara
   un organismo. Sereno, numerado, honesto en sus estados. */

.hero--cien{min-height:0;padding-bottom:clamp(52px,9svh,96px)}
.hero--cien .scroll-mark{display:none}
.cien-lead{max-width:640px;margin:30px 0 0;font:400 clamp(16px,2vw,19px)/1.6 var(--sans);color:rgba(255,255,255,.78)}
.cien-norank{max-width:640px;margin:34px 0 0;font:italic 400 clamp(15.5px,1.9vw,18px)/1.55 var(--serif);color:rgba(255,255,255,.6)}

/* ---------- la leyenda de estados ---------- */
.cien-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:1180px;margin:44px 0 0}
.cien-state{border:1px solid var(--line);background:rgba(3,6,8,.6);backdrop-filter:blur(8px);padding:22px 24px 24px}
.cien-state__name{margin:0;font:500 10px/1.5 var(--sans);letter-spacing:.28em;text-transform:uppercase}
.cien-state__what{margin:10px 0 0;font:italic 400 15.5px/1.5 var(--serif);color:rgba(255,255,255,.75)}
.cien-state--on{border-color:rgba(230,184,95,.55)}
.cien-state--on .cien-state__name{color:var(--gold-soft)}
.cien-state--on .cien-state__name:before{content:'';display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(240,170,70,.8);vertical-align:1px}
.cien-state--building .cien-state__name{color:var(--blue)}
.cien-state--building .cien-state__name:before{content:'';display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;border:1px solid var(--blue);vertical-align:1px}
.cien-state--waiting .cien-state__name{color:rgba(255,255,255,.55)}
.cien-state--waiting .cien-state__name:before{content:'';display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;border:1px solid rgba(255,255,255,.35);vertical-align:1px}

/* ---------- el índice de familias ---------- */
.cien-index{position:relative;z-index:2;width:min(100% - 46px,1180px);margin:0 auto;padding:2svh 0 4svh}
.cien-index__list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.cien-index__list a{font:italic 400 15.5px/1.4 var(--serif);color:rgba(255,255,255,.68);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:3px;transition:color .3s,border-color .3s}
.cien-index__list a:hover{color:var(--gold-soft);border-bottom-color:var(--gold)}

/* ---------- las familias ---------- */
.cien-family{position:relative;z-index:2;width:min(100% - 46px,1180px);margin:0 auto;padding:9svh 0 2svh}
.cien-family__head{max-width:680px;margin-bottom:32px}
.cien-family__title{margin:14px 0 0;font:400 clamp(32px,4.4vw,50px)/1.06 var(--serif);letter-spacing:-.03em}
.cien-family__title em{color:var(--gold-soft)}
.cien-family__line{margin:16px 0 0;font:italic 400 clamp(16px,2vw,18.5px)/1.55 var(--serif);color:rgba(255,255,255,.7)}

/* ---------- las manos ---------- */
.cien-hands{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hand{display:flex;gap:18px;border:1px solid var(--line);background:rgba(3,6,8,.55);backdrop-filter:blur(8px);padding:22px 22px 24px}
.hand__num{flex:none;font:400 clamp(26px,2.6vw,34px)/1 var(--serif);color:rgba(255,255,255,.34);min-width:1.4em}
.hand__body{min-width:0}
.hand__name{margin:2px 0 0;font:400 clamp(17.5px,1.9vw,20.5px)/1.3 var(--serif);letter-spacing:-.01em;color:rgba(255,250,238,.94);text-wrap:balance}
.hand__state{margin:12px 0 0;font:500 8.5px/1.5 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.hand__state:before{content:'';display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;border:1px solid rgba(255,255,255,.35);vertical-align:1px}
.hand__note{margin:12px 0 0;font:italic 400 14.5px/1.55 var(--serif);color:rgba(255,255,255,.66)}
.hand__door{margin:14px 0 0}
.hand__door a{font:italic 400 15.5px/1.3 var(--serif);color:var(--gold-soft);text-decoration:none;border-bottom:1px solid rgba(230,184,95,.55);padding-bottom:2px;transition:border-color .3s}
.hand__door a:hover{border-bottom-color:var(--gold)}
.hand__door--second a{color:rgba(255,255,255,.75);border-bottom-color:rgba(255,255,255,.3)}
.hand__door--second a:hover{color:var(--gold-soft);border-bottom-color:var(--gold)}

/* encendida: el ámbar respira */
.hand--on{border-color:rgba(230,184,95,.5);background:linear-gradient(150deg,rgba(230,184,95,.07),rgba(3,6,8,.6) 58%)}
.hand--on .hand__num{color:var(--gold-soft)}
.hand--on .hand__state{color:var(--gold-soft)}
.hand--on .hand__state:before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px rgba(240,170,70,.75)}

/* en construcción: la luz azul de la casa, serena */
.hand--building{border-color:rgba(169,228,255,.35)}
.hand--building .hand__num{color:rgba(169,228,255,.75)}
.hand--building .hand__state{color:var(--blue)}
.hand--building .hand__state:before{border-color:var(--blue)}
.hand--building .hand__door a{color:var(--blue);border-bottom-color:rgba(169,228,255,.5)}
.hand--building .hand__door a:hover{border-bottom-color:var(--blue)}

/* en espera: presente en el mapa, sin fingir luz */
.hand--waiting .hand__name{color:rgba(255,250,238,.82)}

/* ---------- la silla vacía ---------- */
.cien-chair{position:relative;z-index:2;width:min(100% - 46px,760px);margin:0 auto;padding:14svh 0 4svh;text-align:center}
.cien-chair__mark{display:block;width:54px;height:1px;margin:30px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.cien-chair__title{margin:22px 0 0;font:400 clamp(38px,5.4vw,60px)/1.04 var(--serif);letter-spacing:-.03em}
.cien-chair__title em{color:var(--gold-soft)}
.cien-chair__num{margin:18px 0 0;font:400 clamp(64px,10vw,110px)/1 var(--serif);color:rgba(230,184,95,.4);letter-spacing:-.04em}
.cien-chair__line{max-width:600px;margin:26px auto 0;font:italic 400 clamp(17px,2.2vw,21px)/1.6 var(--serif);color:rgba(255,255,255,.84);text-wrap:balance}
.cien-chair__line--quiet{color:rgba(255,255,255,.58)}

/* ---------- el cierre y la nota honesta ---------- */
.cien-close{padding-top:10svh}
.foot .cien-honest{max-width:680px;margin:16px auto 0;font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.38)}

/* ---------- móvil ---------- */
@media(max-width:1020px){
  .cien-hands{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .cien-legend{grid-template-columns:1fr}
  .cien-index{width:calc(100% - 30px)}
  .cien-family{width:calc(100% - 30px)}
  .cien-chair{width:calc(100% - 30px)}
}
@media(max-width:620px){
  .cien-hands{grid-template-columns:1fr}
  .hand{padding:19px 18px 21px}
}
@media(prefers-reduced-motion:reduce){
  .cien-index__list a,.hand__door a{transition:none}
}

/* las 22 con casa: el acento del estado es el de su rótulo — el mismo
   en las casas, en la calle y aquí */
.hand .hand__state--pidelo{color:#f5bc8a}
.hand .hand__state--pidelo:before{border-color:#e8934f;background:rgba(232,147,79,.3)}
.hand .hand__state--instala{color:#f3d79f}
.hand .hand__state--instala:before{border-color:#e6b85f;background:rgba(230,184,95,.3)}
.hand .hand__state--cotiza{color:#a9e4ff}
.hand .hand__state--cotiza:before{border-color:#a9e4ff;background:rgba(169,228,255,.22)}