/* p-iconos.css · /sistema/iconos/ · solo var(--…) de tokens.css: sin hex, sin sombras, sin degradados.
   Las animaciones de cada icono están en p-iconos-anim.css (generado). Aquí: el icono base y la disposición de la página. */

/* ---- icono base: trazo 1,75 (token), color del texto, tamaño por --ic ---- */
.ic-svg{display:block;flex:none;width:var(--ic,28px);height:var(--ic,28px);overflow:visible;fill:none;stroke:currentColor;stroke-width:var(--sw,var(--icono-trazo));stroke-linecap:round;stroke-linejoin:round}
.ic-em{--ic:var(--icono-tam)}
.sec-head h2,.sec-head .lede{text-wrap:balance}
.ic-grande{--ic:88px}

/* ---- portada ---- */
.hero.ic-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-48);align-items:center}
.ic-hero h1{max-width:9em;text-wrap:balance}
.ic-seis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-32) var(--s-24);padding:var(--s-32) var(--s-24) 72px;width:100%}
.ic-hx{display:flex;align-items:center;gap:var(--s-16);color:var(--texto)}
.ic-hx .ic-svg{--ic:44px}
.ic-hx b{display:block;font-size:var(--t-15);line-height:1.25}
.ic-hx em{display:block;font-style:normal;font-size:var(--t-12);color:var(--texto-2);margin-top:2px;font-variant-numeric:tabular-nums}
@media (max-width:900px){.hero.ic-hero{grid-template-columns:minmax(0,1fr)}.ic-hero h1{max-width:12em}}
@media (max-width:620px){.ic-seis{grid-template-columns:minmax(0,1fr);gap:var(--s-16);padding:var(--s-24) var(--s-16) 72px}.ic-hx .ic-svg{--ic:36px}}

/* ---- la idea ---- */
.ic-idea{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-48);align-items:center}
.ic-reglas{list-style:none;margin:0;padding:0}
.ic-reglas li{padding:var(--s-12) 0;border-top:var(--borde-ancho) solid var(--borde);color:var(--texto-2)}
.ic-reglas li:last-child{border-bottom:var(--borde-ancho) solid var(--borde)}
.ic-reglas b{color:var(--texto)}
.ic-cuadros{position:sticky;top:calc(var(--cabecera) + 24px)}
.ic-cuad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-12)}
.ic-cuad figure{margin:0;min-width:0}
.ic-cuad figcaption{font-size:var(--t-12);color:var(--texto-2);font-variant-numeric:tabular-nums;margin-top:var(--s-4)}
.ic-cuadro{aspect-ratio:3/2;display:grid;place-items:center;background:var(--elevado);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-captura);color:var(--texto)}
.ic-cuadro .ic-svg{--ic:44px}
.ic-cuadros figcaption{margin-top:var(--s-12)}
@media (max-width:900px){.ic-idea{grid-template-columns:minmax(0,1fr)}.ic-cuadros{position:static}}

/* ---- los 28 ---- */
.ic-herr{display:flex;flex-wrap:wrap;gap:var(--s-12) var(--s-24);align-items:flex-start;justify-content:space-between;margin-bottom:var(--s-16)}
.ic-herr .filtros{margin-bottom:0;flex:1 1 360px}
.ic-lab{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-32);align-items:start}
.ic-grupo+.ic-grupo{margin-top:var(--s-24)}
.ic-grupo[hidden]{display:none}
.ic-grupo-t{font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;font-weight:var(--bold);color:var(--texto-2);margin:0 0 var(--s-8)}
.ic-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(204px,1fr));column-gap:var(--s-16);border-bottom:var(--borde-ancho) solid var(--borde)}
.ic-row{display:flex;align-items:center;gap:var(--s-12);min-height:56px;padding:6px 12px;border:0;border-top:var(--borde-ancho) solid var(--borde);border-radius:0;background:transparent;font:inherit;color:var(--texto-2);text-align:left;cursor:pointer;min-width:0;transition:background var(--dur-micro) var(--mov-micro),color var(--dur-micro) var(--mov-micro)}
.ic-row[hidden]{display:none}
.ic-row:hover{background:var(--superficie);color:var(--texto)}
.ic-row .ic-svg{--ic:28px}
.ic-t{display:block;min-width:0}
.ic-n{display:block;font-size:var(--t-15);line-height:1.2;color:var(--texto)}
.ic-row code{display:block;font-family:inherit;font-size:var(--t-12);line-height:1.3;color:var(--texto-2);overflow-wrap:anywhere}
.ic-row.on{background:var(--acento-suave);color:var(--acento);outline:var(--borde-encendido) solid var(--acento);outline-offset:-1.5px}
.ic-row.on .ic-n{font-weight:var(--bold)}
.ic-row:focus-visible{outline-offset:-2px}

.ic-ficha{position:sticky;top:calc(var(--cabecera) + 24px);display:flex;flex-direction:column;gap:var(--s-16);background:var(--superficie);border-radius:var(--r-tarjeta);padding:var(--s-24)}
.ic-ficha h3{font-size:var(--t-24);letter-spacing:var(--trk-24);line-height:var(--lh-titulo-24)}
.ic-f-nombre{margin:var(--s-4) 0 0;color:var(--texto-2)}
.ic-prev{position:relative;height:200px;display:grid;place-items:center;background:var(--elevado);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-captura);color:var(--texto)}
.ic-prev .ic-svg{--ic:96px}
.ic-prev .btn{position:absolute;left:12px;bottom:10px;min-height:28px;padding:0 12px;font-size:var(--t-12)}
.ic-ficha .kv{grid-template-columns:max-content minmax(0,1fr);gap:var(--s-4) var(--s-16);font-size:var(--t-15)}
.ic-acc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8)}
.ic-acc .btn{padding:0 var(--s-12);white-space:nowrap}
.ic-acc .btn-dl::before{flex:none}
.ic-cerrar{display:none}
@media (max-width:900px){
  .ic-lab{display:block}
  .ic-ficha{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:90;max-height:80vh;overflow:auto;border-radius:var(--r-tarjeta) var(--r-tarjeta) 0 0;background:var(--elevado);border-top:var(--borde-ancho) solid var(--borde);padding:var(--s-16) var(--s-16) var(--s-24);gap:var(--s-12);transform:translateY(105%);visibility:hidden;transition:transform var(--dur-entrada) var(--mov-entrada),visibility 0s linear var(--dur-entrada)}
  .ic-ficha.is-open{transform:none;visibility:visible;transition-delay:0s}
  .ic-prev{height:132px;background:var(--superficie)}
  .ic-prev .ic-svg{--ic:72px}
  .ic-cerrar{display:inline-flex;align-self:flex-end;order:-1}
  .ic-ficha h3{font-size:var(--t-19)}
}
@media (max-width:620px){.ic-lista{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-8)}.ic-row{gap:var(--s-8);padding:6px var(--s-8);min-height:52px}.ic-row .ic-svg{--ic:24px}}

/* ---- comunes y a medida ---- */
.ic-com{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-16) var(--medianil)}
.ic-tres{display:flex;gap:var(--s-16);align-items:center;color:var(--texto);padding-bottom:36px}
.ic-tres .ic-svg{--ic:44px}
.ic-uno{color:var(--texto);padding-bottom:30px}
.ic-medida{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-32) var(--medianil)}
.ic-med h3{font-size:var(--t-24);letter-spacing:var(--trk-24);margin:var(--s-4) 0 var(--s-8)}
.ic-med .stage{margin-bottom:var(--s-16)}
.ic-et{font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;font-weight:var(--bold);color:var(--texto-2);margin:0}
.ic-et code{font-family:inherit;text-transform:none;letter-spacing:0;font-weight:var(--regular)}
.ic-med p.muted{font-size:var(--t-15);margin:0}
.ic-pasos{list-style:none;margin:var(--s-16) 0 0;padding:0;display:grid;gap:var(--s-12)}
.ic-pasos li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s-12);font-size:var(--t-15);line-height:1.3}
.ic-pasos em{font-style:normal;font-size:var(--t-12);color:var(--texto-2);font-variant-numeric:tabular-nums;white-space:nowrap;align-self:center}
.ic-pasos i{grid-column:1/-1;position:relative;height:3px;border-radius:var(--r-pill);background:var(--borde)}
.ic-pasos i::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--a) * 1%);width:calc((var(--b) - var(--a)) * 1%);border-radius:var(--r-pill);background:var(--texto)}
.ic-medida-p{gap:var(--s-32) var(--medianil)}
.ic-med-p h3{font-size:var(--t-19);letter-spacing:var(--trk-19);margin:var(--s-4) 0 0}
@media (max-width:900px){.ic-com{grid-template-columns:repeat(2,minmax(0,1fr))}.ic-medida{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ic-tres{gap:var(--s-12)}.ic-tres .ic-svg{--ic:36px}.ic-med h3{font-size:var(--t-19);letter-spacing:var(--trk-19)}.ic-medida-p{grid-template-columns:minmax(0,1fr)}}

/* ---- tamaño, trazo y alineación ---- */
.ic-tam{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-24);align-items:end;border-bottom:var(--borde-ancho) solid var(--borde);padding-bottom:var(--s-24)}
.ic-tam-c{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-12);color:var(--texto);min-width:0}
.ic-tam-l b{display:block;font-size:var(--t-19)}
.ic-tam-l em{display:block;font-style:normal;font-size:var(--t-12);color:var(--texto-2);font-variant-numeric:tabular-nums;line-height:1.5}
@media (max-width:900px){.ic-tam{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-32)}}
@media (max-width:620px){.ic-tam{grid-template-columns:minmax(0,1fr);row-gap:var(--s-16)}.ic-tam-c{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s-16)}.ic-tam-l{text-align:right}}
.ic-prueba{margin:0;max-width:960px}
.code pre{padding-right:80px}   /* deja sitio al botón «Copiar» de los bloques de código */
.ic-al{margin-top:var(--s-16)}
.ic-al-f{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s-24);align-items:center;padding:var(--s-12) 0;border-top:var(--borde-ancho) solid var(--borde)}
.ic-al-f:last-child{border-bottom:var(--borde-ancho) solid var(--borde)}
.ic-al-e{font-size:var(--t-12);color:var(--texto-2);font-variant-numeric:tabular-nums}
.ic-con{display:inline-flex;align-items:center;gap:.45em;line-height:1.5;color:var(--texto);min-width:0}
@media (max-width:620px){.ic-al-f{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}}

/* ---- con texto y en botones ---- */
.ic-uso{align-items:start}
.ic-demo{background:var(--superficie);border-radius:var(--r-tarjeta);padding:var(--s-24);min-height:220px}
@media (max-width:620px){.ic-demo{min-height:0}}
.ic-demo-t{font-size:var(--t-19);font-weight:var(--bold);letter-spacing:var(--trk-19);margin:0 0 var(--s-16);color:var(--texto)}
.ic-li{display:flex;align-items:center;gap:var(--s-12);min-height:44px;padding:0 var(--s-12);border-radius:var(--r-captura);font-size:var(--t-15);color:var(--texto-2);background:var(--elevado)}
.ic-li+.ic-li{margin-top:var(--s-4)}
.ic-li .ic-svg{--ic:var(--icono-tam)}
.ic-li.on{background:var(--acento-suave);color:var(--texto);font-weight:var(--bold);outline:var(--borde-encendido) solid var(--acento);outline-offset:-1.5px}
.ic-li.on .ic-svg{color:var(--acento)}
.ic-demo-btn{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s-24)}
.ic-sec{display:inline-flex;align-items:center;gap:var(--s-8);font-weight:var(--bold);font-size:var(--t-15);color:var(--texto);text-decoration:none;min-height:var(--tocable)}
.ic-sec .ic-svg{--ic:var(--icono-tam)}
.ic-incluye{list-style:none;margin:0;padding:0;font-size:var(--t-15);color:var(--texto)}
.ic-incluye li{display:flex;align-items:center;gap:var(--s-12);min-height:40px}
.ic-cuenta{margin:var(--s-24) 0 0}
.ic-incluye .ic-svg{--ic:var(--icono-tam)}

/* ---- bien y mal ---- */
/* las cajas crecen con lo que llevan: min-height en vez de proporción fija, así nada se recorta al achicarse */
.ratio.ic-r{display:grid;min-height:150px}
.ratio.ic-r>*{position:static;inset:auto;width:100%;height:auto;min-height:150px}
.ic-fila{display:flex;align-items:center;justify-content:center;gap:var(--s-12);color:var(--texto);flex-wrap:wrap;padding:var(--s-8)}
.ic-fila .ic-svg{--ic:32px}
.ic-relleno .ic-svg{fill:currentColor}
.ic-dos .ic-svg *:nth-child(even){stroke:var(--acento)}
.ic-grueso .ic-svg{--sw:3.4}
.ic-lista-ok{flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s-12);padding:var(--s-24);font-size:var(--t-15)}
.ic-lista-ok>div{display:flex;align-items:center;gap:var(--s-12);color:var(--texto)}
.ic-lista-ok .ic-svg{--ic:var(--icono-tam);color:var(--texto-2)}
.ic-ia{gap:var(--s-16)}
.ic-ia>div{display:flex;flex-direction:column;align-items:center;gap:var(--s-8);background:var(--elevado);border-radius:var(--r-tarjeta);padding:var(--s-16) var(--s-12);text-align:center;font-size:var(--t-12);font-weight:var(--bold);line-height:1.25;min-width:96px}
.ic-ia>div span{font-weight:var(--regular);color:var(--texto-2)}
.ic-ia-i{display:block}
.ic-ia-i .ic-svg{color:var(--texto-2)}
.ic-ia-6{gap:var(--s-8);flex-wrap:nowrap}
.ic-ia-6>div{flex:1 1 0;min-width:0;padding:var(--s-12) var(--s-4);gap:var(--s-4)}
@media (max-width:620px){.ic-ia-6{flex-wrap:wrap}.ic-ia-6>div{flex:0 0 calc(33.3% - 8px)}}
.ic-ia-6 .ic-svg{color:var(--texto-2)}
/* lo que NO se hace, mostrado: rebota y brilla, y se repite. Solo existe para este «No». */
@keyframes ic-bote{0%{transform:scale(.55)}45%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes ic-brillo{0%,100%{filter:none}50%{filter:drop-shadow(0 0 7px var(--acento))}}
.ic-svg.ic-bote.is-play{transform-box:fill-box;transform-origin:center;animation:ic-bote 700ms cubic-bezier(.3,1.9,.5,1) 3 both,ic-brillo 700ms linear 3 both}
@media (max-width:620px){.ic-fila{gap:var(--s-8);padding:var(--s-8)}.ic-fila .ic-svg{--ic:22px}.ic-lista-ok{padding:var(--s-16)}.ratio.ic-r,.ratio.ic-r>*{min-height:116px}
  .ic-pares .stage-bar span{display:none}}

/* ---- bloques plegables y pares ---- */
.ic-mas{margin-top:var(--s-24)}
.ic-pares{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-32) var(--s-48)}
.ic-pares .pair{gap:var(--s-12)}
.ic-pares .stage{min-height:150px}
.ic-pares .stage-bar .btn{white-space:nowrap}
.ic-pares.ic-1{grid-template-columns:minmax(0,1fr);gap:var(--s-32)}
.ic-pares.ic-1 .pair{gap:var(--medianil)}
.ic-pares.ic-1 .ratio.ic-r,.ic-pares.ic-1 .ratio.ic-r>*{min-height:190px}
/* Sí y No se quedan lado a lado también en el celular (el pair del sitio los apila a 700 px) */
/* dos pares por fila solo cuando cada caja mide lo bastante para los cuatro iconos */
@media (max-width:1130px){.ic-pares{grid-template-columns:minmax(0,1fr);gap:var(--s-24)}.ic-pares .pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ic-pares.ic-1 .pair{gap:var(--s-12)}.ic-pares.ic-1 .ratio.ic-r,.ic-pares.ic-1 .ratio.ic-r>*{min-height:150px}}

/* ---- descargas ---- */
.ic-licencia{margin-top:var(--s-32);max-width:46em}
.mt-0.acciones{margin-top:0}

/* en celular el botón «Copiar» va en su propia franja y no tapa el código */
@media (max-width:700px){.code{padding-top:var(--s-48)}}