/* Ni ni pintan fondo —el export nunca declaró uno— y la página no
declara `color-scheme`, así que el lienzo lo pone el navegador: blanco en modo
claro, negro en modo oscuro y con el auto-dark de Chrome. Los textos SÍ traen
color explícito, así que el resultado es negro sobre negro.
Se declara el esquema y se pinta el fondo para que ningún navegador tenga que
adivinar. `only light` es el opt-out explícito del oscurecido forzado: con
`light` a secas, Chrome todavía puede aplicar su auto-dark. */
:root {
color-scheme: only light;
}
html,
body {
background-color: #fff;
}
/* El export de Webstudio trae anchos fijos en px (584px, 768px, 820px, 1280px…)
sin override en sus breakpoints angostos, y es item de un contenedor
con `min-width:auto`, así que no puede encogerse por debajo de su min-content:
en un viewport de 375px el layout se maquetaba a 976–1422px y el
`html{overflow-x:hidden}` de apos-edit-fix.css recortaba lo que sobraba en vez
de mostrarlo — en un teléfono se veía el tercio izquierdo de un layout de
escritorio, sin forma de llegar al resto.
Estas reglas NO rediseñan nada: dejan que las cajas se encojan
(`min-width:0`) y topan los anchos fijos al espacio disponible
(`max-width:100%`), con lo que sí entran en juego las reglas responsive que
el propio export ya trae (@media max-width 991/767/479 en webstudio.css).
Va en un archivo aparte porque webstudio.css se sirve intacto.
TODO va dentro de `max-width: 991px`. Aplicarlo también en desktop arregla el
desborde de 1408px que tienen varias páginas en un viewport de 1280 — pero al
topar los anchos, las rejillas de tarjetas colapsan a UNA columna (p.ej. las
3 tarjetas de /blog quedan apiladas desperdiciando media pantalla). Ese
remedio es peor que la enfermedad: el desborde de desktop queda como estaba,
preexistente y sin tocar. */
@media (max-width: 991px) {
body {
min-width: 0;
}
/* `w-element` es la convención de las páginas vivas; `src/captured/
guia-de-estilos.html` es de una vintage anterior del export y usa
`w-box`/`w-heading`/`w-text`/`w-image`/`w-button`. */
.w-element,
.w-box,
.w-heading,
.w-text,
.w-image {
max-width: 100%;
min-width: 0;
}
/* Los botones quedan fuera del `min-width:0`: encogerlos les recorta la
etiqueta ("Primary" → "Prim"). En su lugar hacen wrap con su fila. */
.w-button {
max-width: 100%;
}
img,
svg,
video,
iframe,
form,
table,
pre {
max-width: 100%;
}
/* El marquee de la home es una pista con DOS copias del mismo listado que se
desplazan en bucle (`animation-name: scroll`, clase atómica `c1gou9nq`),
dentro de un wrapper con `overflow:hidden`. Desborda a propósito: toparlo
al ancho disponible encima las dos copias y el texto se lee superpuesto. */
.c1gou9nq,
.c1gou9nq * {
max-width: none;
min-width: auto;
}
/* Sin esto, las secciones de imagen + texto se maquetan como fila también en
pantallas angostas: la columna de texto colapsa a 0 y queda empujada fuera
del viewport (p.ej. /nosotros, /blog, /identificacion-vehicular).
`c1e73mnu` es la clase atómica de `flex-direction:column` (verificado: 231
contenedores column la llevan, 0 contenedores row). Hay que excluirla
porque un contenedor *column* con `flex-wrap:wrap` desborda en COLUMNAS,
que es exactamente el bug que se intenta arreglar.
`c1gou9nq` (la pista del marquee) se excluye en la misma cadena `:not()` y
no en una regla aparte: `.w-element:not()` son dos clases y le gana por
especificidad a un `.c1gou9nq` suelto. Con wrap, sus dos copias se apilan
en dos filas en vez de correr en una sola.
El acople a los hashes es aceptable porque webstudio.css está congelado; si
algún día se re-exporta, revisar. */
.w-element:not(.c1e73mnu):not(.c1gou9nq),
.w-box {
flex-wrap: wrap;
}
}
/* Divisor "|" del bloque de calificación (hero-bloque--calificacion.html):
su fila (`c1a4rdvo`) usa `align-items:end`, pensado para alinear abajo el
texto de calificación con el del sello. El separador no es texto de línea
base como sus vecinos, así que queda descolgado del resto de la fila; se
centra sólo a él. */
.cro3m3f.cj4n8js.c1t33j66.c7dvv4p.cvxo3r2 {
align-self: center;
}
/* Insignias/números de 36×36 (`ceeg9wx`+`c8jn0kn`, ver imagen-texto--pasos*.html
y hero--home.html): son círculos por `border-radius:999px`, pero como hijos
de flex sin `flex-shrink:0` se achican por debajo de su ancho fijo cuando el
texto vecino no cabe (p.ej. /tramites-corportativos), y el círculo sale
ovalado. */
.ceeg9wx.c8jn0kn {
flex-shrink: 0;
}
/* Paginación del buscador de trámites (tramites-buscador--default.html):
controles generados por JS (sitio.js), sin equivalente en el export de
Webstudio, así que no traen clases `cXXXXXXX`. */
.tramites-paginacion {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px;
padding: 32px 0;
}
.tramites-paginacion__boton {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 4px;
border: 0;
border-radius: 8px;
background: transparent;
color: #475467;
font: inherit;
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.tramites-paginacion__boton--nav {
padding: 0 14px;
color: #1a1a1a;
font-weight: 500;
}
.tramites-paginacion__boton:hover:not(:disabled) {
background: #f2f4f7;
color: #1a1a1a;
}
.tramites-paginacion__boton:disabled {
opacity: 0.35;
cursor: not-allowed;
}
/* El activo es el único con relleno: en una fila de números planos, el peso
visual basta para ubicarse sin encerrar cada página en su propia caja. */
.tramites-paginacion__boton[aria-current='page'],
.tramites-paginacion__boton[aria-current='page']:hover {
background: rgb(153 0 0 / 1);
color: #fff;
font-weight: 600;
}
.tramites-paginacion__elipsis {
min-width: 24px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #98a2b3;
font-size: 14px;
user-select: none;
}