/* ===================================================================== * Las tres páginas de automatizaciones · /automatizaciones /agentes /dashboard * * Un solo archivo para las tres porque son hermanas: misma estructura, mismo * esqueleto, lo único que cambia es la demo del medio y el texto. Tres CSS * idénticos serían tres lugares donde arreglar el mismo bug. * * ⚠ Todo va acotado bajo `.auto-pg` (la clase del ). No es manía: ya * pasó dos veces que un nombre genérico de una página se colara en el resto * del sitio —`.caso` pisando las tarjetas de la home fue la última—. Está * contado en docs/GOTCHAS.md §4. * * Ni un hex suelto: todo sale de tokens.css o del :root de estilos.css. * ===================================================================== */ /* ---------- la grilla de ejemplos ---------- Tarjetas planas, sin borde de caja: son una lista con aire, no objetos que se tocan. El manual (§4) deja gastar un borde solo cuando el elemento dice «entrá acá», y estas no llevan a ningún lado. */ .auto-pg .ejemplos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-6) var(--sp-7); } .auto-pg .ejemplo h3{ font-family:var(--tit); font-weight:800; font-size:var(--fs-lg); letter-spacing:-.01em; margin-block-end:var(--sp-3); padding-block-start:var(--sp-4); border-block-start:2px solid var(--oro-borde); } .auto-pg .ejemplo p{ color:var(--muted); font-size:var(--fs-md); line-height:1.55 } /* ---------- hace / no hace ---------- Las dos columnas tienen que leerse como pares, no como «lo bueno y la letra chica»: mismo peso visual, y lo único que las distingue es el color del título y el de las viñetas. */ .auto-pg .par{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-7) } .auto-pg .par-tit{ font-family:var(--baj); font-weight:700; font-size:var(--fs-sm); letter-spacing:.18em; text-transform:uppercase; padding-block-end:var(--sp-4); margin-block-end:var(--sp-5); border-block-end:1px solid var(--line); } .auto-pg .par-tit-si{ color:var(--ok) } .auto-pg .par-tit-no{ color:var(--subtle) } /* Las viñetas de la columna «no hace» van apagadas: si fueran doradas como las de al lado, las dos listas se leerían como una sola de nueve items. */ .auto-pg .lista-no li::before{ background:var(--line-2) } /* ---------- las otras dos ---------- El puente entre las tres páginas. Mismo patrón que `.sistema` pero más liviano: acá no hay que convencer de nada, solo abrir la puerta de al lado. */ .auto-pg .hermanas{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5) } .auto-pg .hermana{ display:flex; flex-direction:column; gap:var(--sp-3); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-6); text-decoration:none; color:inherit; transition:border-color var(--ease), background var(--ease); } .auto-pg a.hermana:hover{ border-color:var(--gold); background:var(--panel-2) } .auto-pg .hermana-tit{ font-family:var(--tit); font-weight:800; font-size:var(--fs-xl); letter-spacing:-.02em } .auto-pg .hermana-frase{ color:var(--muted); font-size:var(--fs-md); line-height:1.5 } .auto-pg .hermana-ir{ margin-block-start:auto; padding-block-start:var(--sp-4); font-weight:700; font-size:var(--fs-md); color:var(--gold); } /* ===================================================================== * Pantallas chicas * * Los cortes están donde el contenido se rompe, no en anchos de catálogo. * A 1000px la demo ya pasó a una columna (lo hace estilos.css), así que las * grillas de tres y de dos acompañan ahí mismo. * ===================================================================== */ @media (max-width:1000px){ .auto-pg .ejemplos{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-6) } .auto-pg .par{ gap:var(--sp-6) } } @media (max-width:760px){ /* Una sola columna: a dos, cada tarjeta queda con renglones de cuatro palabras y se lee peor que en una lista corrida. */ .auto-pg .ejemplos{ grid-template-columns:minmax(0,1fr) } .auto-pg .par{ grid-template-columns:minmax(0,1fr) } .auto-pg .hermanas{ grid-template-columns:minmax(0,1fr) } .auto-pg .hermana{ padding:var(--sp-5) } }