# CSS del sitio público (`page.css`) — reglas de edición

> Movido desde `CLAUDE.md`, que solo conserva el resumen de una línea. Leer antes de tocar
> `resources/css/page.css`.

`resources/css/page.css` es el CSS del sitio guest / page builder y **crece con cada parche**.
Se carga *después* del theme (`css/style.css`, `css/responsive.css`) en
`layouts/guest/general.blade.php` y `preview-admin.blade.php`, así que cualquier regla que se meta
ahí **gana por cascada** y es fácil llenarlo de overrides de una sola propiedad. Reglas:

- **Antes de agregar una regla, comprobar si el theme ya la resuelve** (`grep` en
  `public/css/style.css`). Muchos "bugs" de diseño son un override previo pisando al theme, no un
  estilo que falte.
- **NO editar `public/css/*.css`** (`style.css`, `responsive.css`, `owl.css`, `preloader.css`…): son
  la plantilla. Si hay que cambiar algo del theme, se neutraliza desde `page.css`, no tocando el
  original. Ojo: `style.css` importa `owl.css` y `preloader.css` con `@import`, y esos son
  *render-blocking* (no producen FOUC; no "arreglar" moviéndolos a `<link>`).
- **Acotar siempre al bloque** que lo necesita. Varios bloques del builder comparten clases del
  theme (p. ej. `.service-block-two` la usan el carousel `carousel_icons_description` dentro de
  `.service-section-two` **y** las cards `gallery_icon_cards` dentro de `.service-section-five`).
  Una regla sin prefijo repinta los dos. Prefijar por la sección contenedora.
- **Mínima especificidad que gane**, no la máxima: si `.service-section-two ._h4` basta contra
  `.dark-section p`, no escribir la cadena completa de 5 selectores.
- **Evitar `!important`** y no duplicar el mismo selector con valores distintos en el archivo
  (había dos `.icon-partner` globales con `!important`; ganaba la última y rompía el otro bloque).
- Los comentarios **no pesan** en producción (Vite los minifica): documentar *por qué* una regla
  lleva prefijo sí vale la pena, para que el siguiente cambio no vuelva a romper el otro bloque.

## Casos ya resueltos con esta metodología

Ver `docs/CLAUDE-DEPLOY-PRODUCCION-2026-09-17.md` §3, punto 2 (paginador del carrusel de blogs
pisando las tarjetas): ejemplo real de por qué `position:relative` en un ancestro no basta — gana el
más cercano, no la sección.