. 21:9 con recorte centrado. */ main p > img,main figure img{display:block;width:100%;aspect-ratio:21/9;height:auto;object-fit:cover;border:3px solid color-mix(in srgb,var(--acento) 50%,var(--linea));border-radius:3px} main figure{margin:0 0 1.4rem} main figcaption{margin-top:.45rem;font:400 .74rem/1.5 var(--mono);color:var(--apagado)} /* 20 guías traen tablas. Acá salen como tabla real; el embed de Discord las degrada a bloque de código por límites de la plataforma. */ .tabla-scroll{overflow-x:auto;margin:1.2rem 0} table{border-collapse:collapse;width:100%;font-size:.92rem} th,td{border:1px solid var(--linea);padding:.45rem .7rem;text-align:left;vertical-align:top} th{background:var(--panel);color:var(--acento);font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase} code{background:var(--panel);border:1px solid var(--linea);padding:.1em .35em;border-radius:2px;font-size:.9em} pre{background:var(--panel);border:1px solid var(--linea);border-left:3px solid var(--acento);padding:1rem;border-radius:2px;overflow-x:auto} pre code{background:none;border:none;padding:0} hr{border:none;border-top:1px solid var(--linea);margin:2.2rem 0} .pie{margin-top:3.5rem;border-top:1px solid var(--linea);padding-top:1.1rem;font-size:.82rem;color:var(--apagado)} .pie p{margin:0} /* La firma va un punto por debajo de la nota de la página: es autoría, no contenido del rol, y no debe competir con lo que el lector vino a leer. */ .pie .firma{margin-top:.35rem;font-size:.76rem} .pie .firma a{color:var(--apagado);text-decoration:underline;text-underline-offset:3px} .pie .firma a:hover,.pie .firma a:focus-visible{color:var(--acento)} .pie .disclaimer{margin-top:.9rem;max-width:62ch;font-size:.72rem;line-height:1.5;opacity:.8} /* ===== Portada / ===== */ /* Una sola pantalla: la entradilla explica y los tres destinos se tocan sin scroll. Nada de contenido de ingeniería acá —eso vive en /about—. */ main.inicio{max-width:none} .inicio .entrada{margin:0 0 2.2rem;max-width:58ch;font-size:1.12rem;color:var(--texto)} .acciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1rem} .accion{display:flex;flex-direction:column;gap:.45rem;padding:1.35rem 1.25rem;background:var(--panel);border:1px solid var(--linea);border-left:2px solid var(--acento);border-radius:2px;color:var(--texto)} .accion:hover,.accion:focus-visible{border-color:var(--acento);text-decoration:none} .accion .rotulo{font-size:1.5rem;font-weight:700;line-height:1.1;color:var(--acento)} .accion .detalle{font-size:.82rem;color:var(--apagado)} .inicio .como-funciona{margin-top:1.8rem} /* ===== Case study /about ===== */ /* Los dos idiomas viajan en el HTML y acá se esconde el que no toca. El servidor emite data-idioma="es", así que sin JS se ve el español entero y nunca las dos versiones encimadas. */ :root[data-idioma="es"] [data-lang="en"]{display:none} :root[data-idioma="en"] [data-lang="es"]{display:none} /* Gemelo del toggle de tema, corrido a su izquierda. */ .idioma{right:5.1rem} main.about{max-width:none} .about > section{margin-top:2.8rem} .about p{max-width:68ch} .about .entrada-hero{font-size:.95rem;line-height:1.6;max-width:62ch;text-wrap:pretty} .cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:1px;margin:0;padding:0;list-style:none;background:var(--linea);border:1px solid var(--linea)} .cifra{display:flex;flex-direction:column;gap:.25rem;padding:1.1rem 1rem;background:var(--tinta)} .cifra .valor{font:500 1.7rem/1 var(--mono);color:var(--acento)} .cifra .etiqueta{font-size:.76rem;line-height:1.35;color:var(--apagado)} .about .corte{margin-top:.7rem} .diagrama-marco{margin:1.6rem 0 1.9rem;padding:0;overflow-x:auto} .diagrama{display:flex;align-items:stretch;gap:.55rem;min-width:min-content} .nodo{display:flex;flex-direction:column;justify-content:center;gap:.2rem;flex:1 1 0;min-width:120px;padding:.85rem .8rem;background:var(--panel);border:1px solid var(--linea);border-radius:2px;text-align:center} .nodo.destacado{border-color:var(--acento)} .nodo-tit{font-size:.92rem;font-weight:600;line-height:1.2} .nodo.destacado .nodo-tit{color:var(--acento)} .nodo-pie{font:400 .68rem/1.2 var(--mono);color:var(--apagado)} .flecha{align-self:center;color:var(--apagado);font-size:1.1rem} .about .bullets{margin:0;padding-left:1.3rem;max-width:68ch} .about .bullets li{margin:.6rem 0} .about .bullets strong{color:var(--texto)} .about .stack{margin-top:1.4rem} .subsistemas{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem;margin:1.4rem 0 0;padding:0;list-style:none} .subsistema{padding:.95rem 1rem;background:var(--panel);border:1px solid var(--linea);border-radius:2px} .subsistema h3{display:block;margin:0 0 .3rem;padding:0;border:none;background:none;font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--acento)} .subsistema p{margin:0;max-width:none;font-size:.86rem;line-height:1.5;color:var(--apagado)} /* ===== Índice /guias ===== */ /* El listado usa el ancho completo: 68ch es medida de lectura, no de rejilla. */ main.listado{max-width:none} .buscador{margin:0 0 1.5rem} .buscador input{width:min(420px,100%);padding:.7rem .9rem;background:var(--panel);border:1px solid var(--linea);border-radius:2px;color:var(--texto);font:400 .95rem/1.4 var(--mono)} .buscador input::placeholder{color:var(--apagado)} .buscador input:focus-visible{outline:2px solid var(--acento);outline-offset:1px;border-color:var(--acento)} .categorias{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 2.2rem} .categorias a{padding:.42rem .7rem;border:1px solid var(--linea);border-radius:2px;font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--apagado)} .categorias a:hover,.categorias a:focus-visible{color:var(--acento);border-color:var(--acento);text-decoration:none} .grupo h2{font-size:1.5rem;margin-top:2.4rem} .cuenta{margin-left:.45rem;font:500 .7rem var(--mono);color:var(--apagado);vertical-align:middle} .rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.1rem} /* Cada tarjeta trae su propio acento inline (--ac-d/--ac-c) porque en esta página conviven las 16 paletas; el resto del sitio tiñe por página. */ .tarjeta{--acento:var(--ac-d);display:block;color:var(--texto)} :root[data-theme="light"] .tarjeta{--acento:var(--ac-c)} .tarjeta .lamina{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--panel);border:2px solid color-mix(in srgb,var(--acento) 38%,var(--linea));border-radius:3px} .tarjeta .lamina img{display:block;width:100%;height:100%;object-fit:cover} .tarjeta .lamina.vacia{background:radial-gradient(120% 130% at 22% 0%,color-mix(in srgb,var(--acento) 28%,transparent),transparent 72%),var(--panel)} .tarjeta .nombre{display:block;margin-top:.55rem;font-size:1rem;line-height:1.3;font-weight:600;text-wrap:balance} .tarjeta:hover,.tarjeta:focus-visible{text-decoration:none} .tarjeta:hover .lamina,.tarjeta:focus-visible .lamina{border-color:var(--acento)} .tarjeta:hover .nombre,.tarjeta:focus-visible .nombre{color:var(--acento)} main.listado > .sin-resultados{font-size:.95rem;color:var(--apagado)} /* .tarjeta es display:block, así que pisa el display:none del user agent. */ [hidden]{display:none!important} /* ===== Tabla /plazas ===== */ /* El estado de cada plaza se ve ANTES de filtrar: la fila llena se apaga y la libre lleva el acento. La pregunta que trae al lector —«¿queda algo?»— se responde escaneando, y el buscador es para cuando ya sabe qué busca. */ .leyenda{margin:0 0 1.6rem;padding:.85rem 1rem;background:var(--panel);border:1px solid var(--linea);border-left:2px solid var(--acento);border-radius:2px;font-size:.86rem;color:var(--apagado)} .leyenda strong{color:var(--texto)} .leyenda code{font-family:var(--mono);font-size:.9em;color:var(--texto)} .filtros{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin:0 0 1.5rem} .filtros input[type="search"]{width:min(380px,100%);padding:.7rem .9rem;background:var(--panel);border:1px solid var(--linea);border-radius:2px;color:var(--texto);font:400 .95rem/1.4 var(--mono)} .filtros input[type="search"]::placeholder{color:var(--apagado)} .filtros input[type="search"]:focus-visible{outline:2px solid var(--acento);outline-offset:1px;border-color:var(--acento)} .filtros .check{display:inline-flex;align-items:center;gap:.45rem;font:500 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--apagado);cursor:pointer} .filtros .check input{accent-color:var(--acento);width:1rem;height:1rem;cursor:pointer} .filtros .check:hover{color:var(--acento)} .cuenta-visible{font:500 .72rem var(--mono);color:var(--acento)} .grupo-plazas h2{font-size:1.5rem;margin-top:2.6rem;scroll-margin-top:1rem} /* La tabla scrollea DENTRO de su marco: la página nunca se va de ancho. */ .tabla-marco{overflow-x:auto;border:1px solid var(--linea);border-radius:2px;background:var(--panel)} .tabla-plazas{width:100%;border-collapse:collapse;font-size:.88rem} .tabla-plazas thead th{position:sticky;top:0;background:var(--panel);text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--linea);font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--apagado);white-space:nowrap} .tabla-plazas td,.tabla-plazas tbody th{padding:.5rem .8rem;border-bottom:1px solid color-mix(in srgb,var(--linea) 55%,transparent);vertical-align:top;text-align:left;font-weight:400} .tabla-plazas tbody tr:last-child td,.tabla-plazas tbody tr:last-child th{border-bottom:none} .tabla-plazas tbody tr:hover{background:color-mix(in srgb,var(--acento) 7%,transparent)} /* El nombre es un th scope="row" por semántica —encabeza su fila—, pero la regla global de th es la de las tablas markdown del corpus: mono, VERSALITAS y letter-spacing. Aplicada a 370 nombres propios los volvía ilegibles y ensanchaba la columna sin necesidad. Acá se devuelve al tipo de lectura del sitio; el encabezado real (thead) conserva el tratamiento. */ .tabla-plazas tbody th.nombre{font:600 .95rem/1.4 var(--serif);letter-spacing:normal;text-transform:none} /* width:1% + nowrap encoge las tres primeras columnas a su contenido, así el sobrante se lo queda OCUPANTES —la única que crece con los datos— en vez de repartirse como aire después del nombre. */ .tabla-plazas .nombre,.tabla-plazas .cupos,.tabla-plazas .plazas{width:1%;white-space:nowrap} .tabla-plazas .ocupantes{width:auto} .tabla-plazas .cupos,.tabla-plazas .plazas{font-family:var(--mono)} .tabla-plazas .cupos{text-align:right;color:var(--apagado)} .marca{display:inline-block;min-width:3.2rem;text-align:center;padding:.12rem .4rem;border:1px solid var(--linea);border-radius:2px;font-size:.82rem} .marca.libre{border-color:color-mix(in srgb,var(--acento) 55%,var(--linea));color:var(--acento)} .marca.llena{color:var(--apagado)} .marca.infinita{border-style:dashed;color:var(--apagado)} .fila.llena .nombre{color:var(--apagado)} .fila.llena .nombre a{color:var(--apagado)} .ocupantes{color:var(--texto)} .ocupantes .sep{margin:0 .45em;color:var(--apagado)} .ocupantes .vacio{color:var(--apagado)} .ocupante.heredada{color:var(--apagado);border-bottom:1px dotted var(--linea);cursor:help} @media (max-width: 780px){ .marco{grid-template-columns:minmax(0,1fr);gap:0} .indice{position:static;padding-top:1.4rem} .indice summary{pointer-events:auto;cursor:pointer} .indice details:not([open]) ol{display:none} .banner-texto{gap:1rem;padding-top:1.8rem} .emblema{width:64px;height:64px} .rejilla{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem} .categorias{margin-bottom:1.6rem} .tabla-plazas{font-size:.82rem} /* En pantalla angosta el nombre largo manda: mejor que envuelva a que empuje la tabla a un scroll horizontal en la primera columna. */ .tabla-plazas .nombre{white-space:normal} .tabla-plazas tbody th.nombre{font-size:.9rem} .filtros{gap:.7rem} /* El diagrama pasa a columna: cinco cajas en fila no caben sin encoger el texto hasta lo ilegible. La flecha gira con ellas. */ .diagrama{flex-direction:column;min-width:0} .flecha{transform:rotate(90deg)} .cifra .valor{font-size:1.45rem} }