/* ============================================================ corpus.css — la costura entre el sistema de diseño y lo que ya existía. ORDEN DE CARGA (lo pone includes/header.php y no es negociable): 1. assets/css/style.css el sistema, calcado de seguroobligatoriopatinete.com 2. css/app.css las ~60 clases del corpus, ya retokenizadas sobre (1) 3. assets/css/corpus.css ESTE fichero: solo lo que (1) y (2) no resuelven solos QUÉ ENTRA AQUÍ Y QUÉ NO · Entra: colisiones de nombre entre las dos hojas, y los componentes del corpus cuya FORMA (no solo su color) tenía que cambiar para leerse como el sistema. · No entra: colores. Si aquí aparece un #hex que no esté en style.css, hay dos paletas. · No entra: nada que se pueda arreglar retocando un token en css/app.css. POR QUÉ HAY COLISIONES Las dos hojas vienen de convenciones distintas —el sistema nombra en español largo (.contenedor, .tarjeta, .seccion) y el corpus heredó los nombres cortos del kit de la red (.container, .card, .hero)—, así que coinciden en cuatro sitios: .hero, .btn, .chip y .cuenta. En las páginas del corpus manda app.css porque carga después, que es lo correcto para su contenido; lo que hace este fichero es devolverle al SISTEMA sus propias clases dentro de la cabecera y el pie, que son suyos y aparecen en todas las páginas. ============================================================ */ /* ------------------------------------------------------------------ 1. Los botones del sistema, estén donde estén ------------------------------------------------------------------ `.btn` existe en las dos hojas y son dos botones distintos: el del sistema es una píldora menta con el texto en azul noche; el del corpus es un rectángulo redondeado, relleno de --brand y con el texto en blanco. Como app.css carga después, en la home y en cotizar.php TODOS los botones del sistema salían con la forma y el color del corpus: el «Ver mi precio» del cotizador en verde oscuro, y el secundario «No sé cuál es la mía» indistinguible del principal, que es justo lo que un botón secundario no puede ser. No se arregla a base de selectores más específicos por sitio —se escapa alguno siempre—, sino por el MODIFICADOR: `.btn-primario`, `.btn-borde` y `.btn-oscuro` son nombres que el corpus no usa, así que identifican sin ambigüedad un botón del sistema esté donde esté. Se le devuelve aquí la base que app.css le había pisado (píldora, relleno, tamaño) y su color. Los botones propios del corpus —`.btn` a secas, `.btn-2`, `.btn-lg`— no se tocan: son suyos y en sus páginas están bien. */ .btn-primario, .btn-borde, .btn-oscuro { font-family: var(--f-cuerpo); font-size: 1rem; font-weight: 700; line-height: 1; gap: .55em; min-height: 0; padding: .95em 1.65em; border: 1px solid transparent; border-radius: 999px; letter-spacing: 0; text-transform: none; transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease, color .16s ease; } .btn-primario { background: var(--menta); color: var(--tinta); box-shadow: 0 8px 20px rgba(0,201,167,.32); } .btn-primario:hover { background: #12DCB9; color: var(--tinta); box-shadow: 0 12px 26px rgba(0,201,167,.42); } .btn-borde { background: var(--blanco); border-color: var(--borde-fuerte); color: var(--tinta); } .btn-borde:hover { background: var(--blanco); border-color: var(--tinta); color: var(--tinta); } .btn-oscuro { background: var(--tinta); color: var(--blanco); } .btn-oscuro:hover { background: var(--tinta-2); color: var(--blanco); } /* `.chip` es la otra colisión: en el sistema es la pastilla flotante del hero y en el corpus, la letra del índice A-Z. Dentro de la cabecera y el pie manda el sistema. */ .navbar .chip, .footer .chip { all: unset; } /* La barra vieja y el pie viejo ya no se emiten (los sustituyen includes/navbar.php e includes/footer.php), pero una plantilla olvidada podría pintarlos y saldrían dos cabeceras. Que no se vean es más barato que buscarlas una por una. */ .nav, .site-footer { display: none; } /* ------------------------------------------------------------------ 2. El hero del corpus, con la dirección de arte nueva ------------------------------------------------------------------ Es el cambio visual que más se nota, porque hay 22 tipos de página y todas empiezan con él. Antes: bloque oscuro a sangre con degradado, texto blanco encima. Era la convención del kit de la red y funcionaba, pero al lado del hero del sistema —claro, con el título en Bricolage y la cifra en mono— parecía otra web. Ahora: fondo claro de nube, título en la display del sistema y un filete de menta arriba. La estructura del marcado NO se toca (hero(), .hero-content, .hero-title, .hero-stats siguen siendo los mismos), así que ninguna de las 22 plantillas necesita cambiar una línea. */ .hero { background: var(--nube); border-bottom: 1px solid var(--borde); box-shadow: inset 0 3px 0 var(--menta); color: var(--tinta); padding-block: clamp(2rem, 5vw, 3.5rem); } /* La variante «plana» del corpus: legales y estáticas, que no deben competir con la portada. En app.css la pinta `.hero.hero-flat` con --brand-dark, o sea un bloque de teal oscuro con el titular encima; con la paleta nueva ese titular es azul noche sobre verde oscuro y NO SE LEE. Se necesita la misma especificidad (0,2,0) para ganarle, no basta con `.hero-flat`. Plana aquí significa lo mismo que significaba: más callada que el hero normal. Fondo blanco en vez del gris nube, y el resto igual. */ .hero.hero-flat { background: var(--blanco); } .hero-content { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-4); /* El corpus lo pintaba en blanco para su hero oscuro. Es el padre del titular, así que sin esta línea cualquier texto suelto del hero sale blanco sobre blanco. */ color: var(--tinta); } .hero-title { font-family: var(--f-display); font-weight: 800; letter-spacing: -.025em; line-height: 1.06; color: var(--tinta); } .hero-subtitle { color: var(--tinta-suave); max-width: 62ch; } /* Las cifras del hero se leen como las .metricas del sistema: número en mono, etiqueta pequeña debajo. La mono no es decoración —marca lo que es un dato— y aquí lo son. */ .hero-stats { border-top: 1px solid var(--borde); padding-top: var(--s-5); margin-top: var(--s-5); } .stat-hero .stat-number { font-family: var(--f-mono); font-weight: 500; color: var(--menta-hondo); } .stat-hero .stat-label { color: var(--tinta-suave); } /* El buscador del hero, con la forma de los campos del cotizador */ .search-input, .search-box .btn { border-radius: 999px; border: 1px solid var(--borde-fuerte); background: var(--blanco); } .search-box .btn { background: var(--menta); color: var(--tinta); border: 0; font-weight: 700; } /* ------------------------------------------------------------------ 3. Titulares del cuerpo ------------------------------------------------------------------ El corpus escribía todos los títulos con la tipografía de sistema del navegador. Con las familias propias cargadas, no usarlas en 11.000 páginas sería tener dos sitios. */ .container h1, .container h2, .container h3, .prosa h2, .prosa h3, .bloque h2, .bloque h3 { font-family: var(--f-display); letter-spacing: -.025em; } /* Lo que es dato verificable va en mono, que es la regla del sistema. Aquí los datos del corpus son las puntuaciones, los percentiles y los importes de las calculadoras. */ .distintivo-pct, .podio-pct, .pct, .coste-cifra, .coste-total, .resultado-cifra, .filtro-valor, .progreso-cifra, .cuenta { font-family: var(--f-mono); font-weight: 500; } /* ------------------------------------------------------------------ 4. Tarjetas de raza ------------------------------------------------------------------ La rejilla se queda como está —cuatro columnas, foto arriba, nombre debajo: funciona y es de esta casa— pero adopta el radio, el borde y la sombra del sistema para que una rejilla de razas y una rejilla de .tarjeta del sistema no se contradigan en la misma página. */ .tarjeta-raza { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } .tarjeta-raza:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); } .tarjeta-nombre { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; } /* El gesto de la casa —filete izquierdo de 3 px que se tiñe al pasar por encima— se conserva, porque es lo que hace que un listado de este sitio se reconozca. Solo cambia de color. */ .list-item:hover { border-left-color: var(--menta); } /* ------------------------------------------------------------------ 5. Módulo de seguro dentro del corpus ------------------------------------------------------------------ El bloque que aparece en cada ficha de raza (includes/modulo-seguro.php). No es una tarjeta más: es la única pieza comercial de una página de contenido, así que se separa con el borde de menta del sistema y NADA más. Sin fondo de color, sin sombra grande y sin exclamaciones: una ficha de raza que grita «¡CONTRATA!» deja de ser una ficha de raza. */ .modulo-seguro { border: 1px solid var(--borde); border-top: 3px solid var(--menta); border-radius: var(--radio); padding: clamp(1.25rem, 3vw, 1.75rem); margin: var(--s-6) 0; background: var(--blanco); } .modulo-seguro h2 { font-family: var(--f-display); font-size: var(--fs-h3); margin-top: 0; } .modulo-seguro .modulo-veredicto { font-family: var(--f-mono); font-size: .9rem; color: var(--menta-hondo); display: block; margin-bottom: var(--s-2); } .modulo-seguro.es-ppp { border-top-color: var(--coral); } .modulo-seguro.es-ppp .modulo-veredicto { color: var(--coral-hondo); } .modulo-seguro.es-cruce { border-top-color: var(--sol); } .modulo-seguro.es-cruce .modulo-veredicto { color: var(--sol-hondo); } .modulo-precio { font-family: var(--f-mono); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 500; color: var(--tinta); line-height: 1.1; margin: var(--s-3) 0 var(--s-1); } .modulo-precio small { font-size: .45em; color: var(--tinta-suave); font-family: var(--f-cuerpo); } .modulo-seguro .fuente { margin-top: var(--s-4); } /* ------------------------------------------------------------------ 6. Anuncios ------------------------------------------------------------------ AdSense sigue en el corpus y no en el embudo. Un hueco de anuncio sin marcar dentro de un sitio que ahora vende seguros se confunde con contenido propio, así que se etiqueta y se separa: es una cuestión de honestidad antes que de diseño. */ .ad-slot { border-top: 1px solid var(--borde); padding-top: var(--s-3); margin-block: var(--s-6); } .ad-slot::before { content: 'Publicidad'; display: block; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--s-2); } /* ------------------------------------------------------------------ 7. Piezas del motor de páginas que el sistema aún no tenía ------------------------------------------------------------------ El motor de includes/pagina.php nació aquí, no en el proyecto hermano, así que tres de sus bloques no tienen estilo en style.css. Van en este fichero y no allí a propósito: style.css es una copia del sistema del hermano y conviene poder volver a copiarla entera el día que aquél cambie. Lo que es solo de este sitio, vive aquí. */ .bloque-contenido { margin-bottom: clamp(2rem, 4vw, 3rem); } .bloque-contenido > h2 { margin-bottom: 1rem; } .bloque-contenido > p { margin-bottom: 1rem; max-width: 68ch; } /* Una tabla ancha no puede desbordar la página: rueda dentro de su caja. */ .tabla-scroll { overflow-x: auto; margin-block: 1.25rem; } /* Cita literal de una norma. Va en mono porque es LO CONTRASTABLE: la regla de la casa es que se distinga de un vistazo lo que dice el BOE de lo que decimos nosotros. */ .cita-norma { margin: 1.5rem 0; padding: 1.1rem 1.4rem; border-left: 3px solid var(--cielo); background: var(--cielo-tenue); border-radius: 0 var(--radio) var(--radio) 0; } .cita-norma p { font-family: var(--f-mono); font-size: .93rem; line-height: 1.6; margin: 0; } .cita-norma cite { display: block; margin-top: .7rem; font-style: normal; font-size: .8rem; color: var(--tinta-suave); } /* ------------------------------------------------------------------ 8. El hero del SISTEMA, cuando convive con el del corpus ------------------------------------------------------------------ Dos páginas del embudo —la home y cotizar.php— cargan css/app.css porque usan componentes del corpus (la rejilla de razas). Eso arrastra el `.hero` del corpus, que carga después y es otro hero completamente distinto: centrado, oscuro, con degradado y 5rem de relleno. El resultado era una home con el titular y el cotizador centrados, que no es el diseño. No se puede resolver bajando la especificidad ni cambiando el orden de las hojas: son dos componentes que se llaman igual y los dos tienen derecho a su nombre. Se resuelve distinguiéndolos en el marcado —`.hero-sistema`— y devolviéndole aquí al del sistema lo que el del corpus le había pisado. Es la misma solución que el punto 1 con la cabecera y el pie. Si alguna vez se rehace el corpus con los nombres largos del sistema (.contenedor, .seccion, .tarjeta), este bloque entero y el punto 1 desaparecen. */ .hero-sistema { text-align: initial; color: var(--tinta); padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); margin-bottom: 0; box-shadow: none; border-bottom: 0; background: radial-gradient(70% 60% at 85% 12%, rgba(0,201,167,.20) 0%, rgba(0,201,167,0) 60%), radial-gradient(60% 55% at 8% 0%, rgba(47,107,255,.14) 0%, rgba(47,107,255,0) 55%), linear-gradient(180deg, var(--nube-2) 0%, var(--nube) 45%, var(--blanco) 100%); } /* El velo de dos degradados blancos que el corpus pinta encima de su hero oscuro. Sobre un fondo claro solo lo deslava. */ .hero-sistema::before { content: none; } /* ------------------------------------------------------------------ 9. El resaltado del titular ------------------------------------------------------------------ El del H1 de la home resalta «todavía no te pueden multar», que es la mitad de la frase que nadie más cuenta. Sin regla propia se quedaba con el amarillo del navegador —que no es de nadie— o con el menta del corpus, que en este sistema significa «puedes actuar» y aquí significa lo contrario. Va en SOL, que en esta paleta es «ojo, hay una salvedad», que es exactamente lo que dice esa frase. Y con un filete inferior en vez de un bloque de color: sobre un titular de 3rem, un rectángulo relleno pesa más que el propio titular. */ .hero-sistema h1 mark, .articulo-cabecera h1 mark { background: linear-gradient(180deg, transparent 62%, var(--sol) 62%, var(--sol) 92%, transparent 92%); color: inherit; padding: 0 .08em; border-radius: 0; } /* ------------------------------------------------------------------ 10. Los legales, en la letra pequeña ------------------------------------------------------------------ Fila de enlaces horizontal justo encima del bloque legal, en vez de una columna más de la rejilla. Ver el porqué en includes/footer.php. */ .footer-legales { list-style: none; padding: 0; margin: 0 0 1.1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; } .footer-legales a { font-size: .86rem; } /* ------------------------------------------------------------------ 11. Semáforos dentro de la columna de lectura ------------------------------------------------------------------ `.rejilla` está calculada para el ancho completo del sistema (1240 px), donde da tres o cuatro columnas holgadas. Dentro del artículo la columna mide 854 px, así que salían tres tarjetas de 215 px —con el título partido en tres líneas— y una cuarta huérfana debajo. Dos columnas: cuatro situaciones caen 2×2 y tres caen 2+1, que es un remate normal. El mínimo va con min() para que en móvil no fuerce un desbordamiento horizontal. */ .articulo-cuerpo .rejilla { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } /* ------------------------------------------------------------------ 12. Las migas de pan, unificadas ------------------------------------------------------------------ El corpus pintaba la miga como una barra rellena de color de marca, ancha y con su propio fondo. Era coherente con el kit del que venía, pero al lado de la miga del sistema —texto pequeño, apagado, sin caja— parecen dos webs otra vez, y además una barra de color pesa más que el H1 que tiene justo debajo. Las dos usan el mismo separador «›», así que basta con quitarle la caja y bajarle el tono: el marcado de las 15 plantillas no se toca. */ .breadcrumb { background: none; padding: 0; margin-bottom: var(--s-5); font-size: .84rem; color: var(--tinta-suave); } .breadcrumb a { color: var(--tinta-suave); text-decoration: none; } .breadcrumb a:hover { color: var(--cielo); text-decoration: underline; } .breadcrumb > *:last-child { color: var(--tinta); font-weight: 600; } /* ------------------------------------------------------------------ 13. La cabecera de la tabla comparativa ------------------------------------------------------------------ Era un bloque sólido de azul noche con texto blanco. Funcionaba en la paleta anterior, pero ahora es la ÚNICA cabecera de tabla oscura del sitio: la del sistema (.tabla thead th) es clara, con la etiqueta en mono y en mayúsculas pequeñas. Dos convenciones para lo mismo. Se alinea con la del sistema y se le deja el `position: sticky` que ya tenía, que ahí sí aporta: la tabla del comparador es larga y los nombres de las razas tienen que seguir a la vista mientras se baja. */ .comparativa thead th { background: var(--nube); color: var(--tinta); border-bottom: 1px solid var(--borde-fuerte); } .comparativa thead th a { color: var(--tinta); } .comparativa .gana { background: var(--menta-tenue); } /* ------------------------------------------------------------------ 14. Páginas sin hero ------------------------------------------------------------------ El arquetipo D del corpus —búsqueda, blog— no lleva hero a propósito: quien busca quiere resultados, no una portada. Pero sin hero el H1 quedaba pegado a la barra de estado normativo, sin un solo píxel de aire, y se leía como si fuera parte de la barra. Solo cuando el contenedor es lo primero del
: si hay hero, el aire ya lo pone él. */ main > .container:first-child { padding-top: clamp(1.75rem, 4vw, 2.75rem); } /* ------------------------------------------------------------------ 15. El índice A-Z, que se caía encima de sí mismo ------------------------------------------------------------------ `.chips` y `.chip` existen en las dos hojas y son cosas MUY distintas: · en el sistema, las pastillas flotantes del hero → `position: absolute; inset: 0` · en el corpus, el índice de letras A-Z → una fila de 22 enlaces cuadrados Como el sistema carga primero pero sus reglas de posición no las pisa nadie, las 22 letras se apilaban las 22 en la esquina superior izquierda de la página, una encima de otra, con `pointer-events: none` heredado: ni se veían ni se podían pulsar. Estaba roto en /razas, en el índice por letra, en la búsqueda y en la 404. Las distingue el elemento: las del sistema van en un `
` dentro del hero y las del corpus, en un `