/* ATERRIZA EU — R4 (21/09/2026): vestido nuevo para las páginas públicas de * CONTENIDO (pasos, fichas, hubs de fase, /fichas/, /guia-casero/, /dossier/, * legales, /estado-del-contenido/). * * Carga SIEMPRE después de tokens.css + aterriza.css + componentes.css (el * sistema de R1): reutiliza sus variables y sus componentes (.boton, .tarjeta, * .insignia...) y solo añade lo que R1 no cubrió porque su encargo era la * portada y /marca/, no el cuerpo de un artículo largo ni un formulario de * varios pasos. * * Es el reemplazo de /css/aterrizaeu.css (S1, 15/09/2026) sobre los tokens * nuevos: MISMOS nombres de clase (paginas.routes.js, dossier.js y los 5 * HTML estáticos no se tocan más que en cabecera/pie/), colores y * medidas nuevos. `aterrizaeu.css` NO se borra (lo siguen sirviendo páginas * que R4 no toca hoy — ninguna, pero la regla de la casa es no borrar * ficheros que un cliente pueda tener cacheados). * * /dossier/ es la única página que SIGUE cargando además /css/aterrizaeu.css * y /css/mi.css (después de esta hoja, no antes de tokens.css — ver su * ): el formulario de varias preguntas que dossier.js monta al vuelo * usa clases de mi.css (.campo, .opcion, .opciones, .campo--casilla) que no * se han vuelto a auditar aquí porque las genera JavaScript, no HTML fijo — * tocar ese fichero es su propia sesión (regla de la casa: cambio quirúrgico * sobre página legada, no reestructuración). Lo que SÍ es nuevo en dossier * es su cabecera, su pie, sus botones y sus tarjetas (.tarjeta, .boton, * .cabecera, .pie ya vienen de componentes.css/aquí y ganan la cascada por * ir después). */ /* ========================================================================= TOKENS DERIVADOS — el sistema de R1 no trae un tono "atención suave" (el viejo :root de aterrizaeu.css sí, para OBLIGATORIO/HABITUAL/etc.). Se deriva con color-mix() del AMARILLO de marca — nunca un hex nuevo — en vez de inventar un color de estado que no está en el doc 01 §12. ========================================================================= */ :root { --color-atencion-bg: color-mix(in srgb, var(--color-amarillo) 30%, var(--color-crema)); --color-atencion-fg: var(--color-carbon-90); --color-atencion-borde: color-mix(in srgb, var(--color-amarillo) 55%, var(--color-crema)); --color-neutro-bg: var(--color-carbon-15); --color-neutro-fg: var(--color-carbon-70); --ancho-articulo: 44rem; } /* ========================================================================= CABECERA — copia exacta de R1_SRC/web/html/css/home.css (mismas clases, mismo aspecto en TODAS las páginas). No se toca home.css: la portada no depende de este fichero, y así ninguna de las dos puede romper a la otra. ========================================================================= */ .cabecera { background: var(--color-crema); padding-block: var(--espacio-4); position: sticky; top: 0; z-index: var(--z-cabecera); border-bottom: 1px solid var(--color-borde); } .cabecera-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-4); flex-wrap: wrap; } .cabecera-nav__marca img { height: 34px; width: auto; } .cabecera-nav ul { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-5); } .cabecera-nav a { text-decoration: none; font-weight: var(--peso-semibold); font-size: var(--texto-sm); color: var(--color-carbon-70); } .cabecera-nav a:hover { color: var(--color-carbon); } .cabecera-nav li:last-child a { background: var(--color-carbon); color: var(--color-crema); padding: 0.5em 1em; border-radius: var(--radio-completo); } /* ========================================================================= MIGAS (breadcrumbs) — mismo ancho que
, sin envoltura anidada (evita el doble padding:
ya pone su propio padding-inline). ========================================================================= */ .migas { max-width: var(--ancho-articulo); margin-inline: auto; padding: var(--espacio-3) var(--gutter) 0; } .migas ol { display: flex; flex-wrap: wrap; gap: var(--espacio-2); font-size: var(--texto-xs); color: var(--color-carbon-50); } .migas li + li::before { content: "›"; margin-right: var(--espacio-2); } .migas a { color: var(--color-carbon-50); text-decoration: none; } .migas a:hover { color: var(--color-carbon); text-decoration: underline; } /* ========================================================================= CONTENIDO — el artículo/formulario, centrado y de ancho cómodo de leer. A PROPÓSITO más estrecho que `.envoltura` (1180px, pensada para secciones anchas de la portada): un artículo de una sola columna se lee peor por encima de ~45rem. Por eso
NO lleva `.envoltura` dentro -- pondría dos paddings horizontales, uno de
y otro del div. ========================================================================= */ main#contenido, main#principal { max-width: var(--ancho-articulo); margin-inline: auto; padding: var(--espacio-6) var(--gutter) var(--espacio-12); } main#contenido h1, main#principal h1 { margin-top: 0; } main#contenido p.u-ancho-libre, main#principal p.u-ancho-libre { max-width: none; } .entradilla { font-size: var(--texto-md); color: var(--color-carbon-70); max-width: none; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--color-neutro-bg); padding: 0.1em 0.35em; border-radius: var(--radio-sm); } /* ========================================================================= ETIQUETAS DE CERTEZA / CAPA — StatusBadge, sobre .insignia de componentes.css ========================================================================= */ .etiquetas { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin-bottom: var(--espacio-4); } .etiqueta { display: inline-block; font-size: var(--texto-xs); font-weight: var(--peso-bold); letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3em 0.85em; border-radius: var(--radio-completo); background: var(--color-neutro-bg); color: var(--color-neutro-fg); } .etiqueta--obligatorio { background: var(--color-alerta-bg); color: var(--color-alerta-fg); } .etiqueta--habitual { background: var(--color-atencion-bg); color: var(--color-atencion-fg); } .etiqueta--depende { background: var(--color-atencion-bg); color: var(--color-atencion-fg); } .etiqueta--puede_ocurrir { background: var(--color-neutro-bg); color: var(--color-neutro-fg); } .etiqueta--consejo_practico { background: var(--color-completado-bg); color: var(--color-completado-fg); } .etiqueta--mito { background: var(--color-alerta-bg); color: var(--color-alerta-fg); } .etiqueta--capa { background: var(--color-superficie); color: var(--color-carbon-50); border: 1px solid var(--color-borde); } /* ========================================================================= FICHA TÉCNICA del paso — SourceBadge con datos, no solo la fuente ========================================================================= */ .ficha-tecnica { background: var(--color-superficie); border: 1px solid var(--color-borde); border-left: 4px solid var(--color-salvia); border-radius: var(--radio-md); padding: var(--espacio-5); margin: var(--espacio-5) 0; } .ficha-tecnica dl { margin: 0; display: grid; gap: var(--espacio-3); } .ficha-tecnica dt { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-carbon-50); font-weight: var(--peso-bold); } .ficha-tecnica dd { margin: 0; } @media (min-width: 46rem) { .ficha-tecnica dl { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================= LISTAS DE FASES, PASOS Y FICHAS — ResourceCard aplicado a la lista (mismo HTML de paginas.routes.js, solo cambia el vestido) ========================================================================= */ .lista-fases, .lista-pasos, .lista-fichas { list-style: none; padding: 0; } .lista-fases > li, .lista-pasos > li, .lista-fichas > li { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); padding: var(--espacio-5); margin-bottom: var(--espacio-4); box-shadow: var(--sombra-sm); transition: box-shadow var(--duracion-media) var(--curva), transform var(--duracion-media) var(--curva); } .lista-fases > li:hover, .lista-pasos > li:hover, .lista-fichas > li:hover { box-shadow: var(--sombra-md); transform: translateY(-2px); } .lista-fases h2, .lista-pasos h2, .lista-fichas h2 { margin-top: 0; font-size: var(--texto-lg); } .lista-fases h2 a, .lista-pasos h2 a, .lista-fichas h2 a { text-decoration: none; color: var(--color-carbon); } .lista-fases h2 a:hover, .lista-pasos h2 a:hover, .lista-fichas h2 a:hover { color: var(--color-salvia); } .lista-fases p:last-child, .lista-pasos p:last-child, .lista-fichas p:last-child { margin-bottom: 0; } .meta { font-size: var(--texto-sm); color: var(--color-carbon-50); } /* ========================================================================= FUENTES, RECOMENDADOS, VERIFICADO — el bloque de confianza (doc 03 §10) ========================================================================= */ .fuentes, .recomendados { border-top: 1px solid var(--color-borde); padding-top: var(--espacio-4); margin-top: var(--espacio-6); font-size: var(--texto-sm); } .fuentes h2, .recomendados h2 { font-size: var(--texto-md); margin-top: 0; } .fuentes a { word-break: break-word; color: var(--color-carbon-70); } .recomendados a { color: var(--color-carbon-70); } .verificado { font-size: var(--texto-xs); color: var(--color-carbon-50); border-top: 1px solid var(--color-borde); padding-top: var(--espacio-3); margin-top: var(--espacio-5); } .verificado a { color: var(--color-carbon-70); } .volver { margin-top: var(--espacio-5); font-size: var(--texto-sm); } .volver a { color: var(--color-carbon-70); } /* ========================================================================= BOTÓN SECUNDARIO — componentes.css lo pensó para fondos oscuros (superficie-oscura de la portada); el cuerpo de un artículo/formulario público es SIEMPRE claro, así que aquí se corrige el contraste. ========================================================================= */ .boton--secundario { color: var(--color-carbon); } .boton--secundario:hover { color: var(--color-carbon); } .acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-3); margin-bottom: var(--espacio-5); } /* «Abrir en la app» (R4, nuevo): mismo botón terciario, con la flecha del resto del sitio. Solo lo pintan pasos y fichas (paginas.routes.js pasa `abrirEnApp`). */ .abrir-en-app { margin: var(--espacio-4) 0 0; } .cita { border-left: 4px solid var(--color-salvia); background: var(--color-superficie); padding: var(--espacio-4); border-radius: 0 var(--radio-md) var(--radio-md) 0; margin: var(--espacio-5) 0; } .cita p:last-child { margin-bottom: 0; } .firma { font-family: var(--fuente-manuscrita); color: var(--color-carbon-50); } .aviso { background: var(--color-atencion-bg); color: var(--color-atencion-fg); border-radius: var(--radio-md); padding: var(--espacio-4); margin: var(--espacio-5) 0; } .aviso p:last-child { margin-bottom: 0; } .aviso a { color: inherit; text-decoration-color: currentColor; } /* ========================================================================= PIE — copia exacta de R1_SRC/web/html/css/home.css, misma cabecera de sección. `.envoltura` (aterriza.css) centra el bloque. ========================================================================= */ .pie { background: var(--color-carbon); color: rgba(247, 245, 239, 0.75); padding-block: var(--espacio-8); } .pie__marca img { height: 30px; width: auto; margin-bottom: var(--espacio-5); } .pie-aviso { font-size: var(--texto-sm); max-width: var(--ancho-lectura); margin-bottom: var(--espacio-5); } .pie__enlaces ul, .pie nav[aria-label="Legal"] ul { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-5); margin-bottom: var(--espacio-4); } .pie a { color: var(--color-crema); text-decoration: underline; text-decoration-color: rgba(247, 245, 239, 0.35); } .pie-cuenta { margin-bottom: var(--espacio-5); font-weight: var(--peso-semibold); } .pie-cuenta a { text-decoration: none; color: var(--color-amarillo); } .pie-sello { font-size: var(--texto-xs); color: rgba(247, 245, 239, 0.55); } /* ========================================================================= PÁGINAS LEGALES — alemán principal, español de cortesía debajo (regla fija) ========================================================================= */ .legal-es { border-top: 2px solid var(--color-borde); margin-top: var(--espacio-8); padding-top: var(--espacio-6); } .legal-es .nota-traduccion { font-style: italic; color: var(--color-carbon-50); } .tabla-legal { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); } .tabla-legal th, .tabla-legal td { border: 1px solid var(--color-borde); padding: var(--espacio-2) var(--espacio-3); text-align: left; vertical-align: top; } .tabla-legal th { background: var(--color-superficie); } .envoltorio-tabla { overflow-x: auto; margin-bottom: var(--espacio-4); } /* ========================================================================= TABLAS Y CITAS DEL CONTENIDO (S4) — lo que trae el markdown de la fase «Vivir aquí» ========================================================================= */ main table { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); margin: var(--espacio-5) 0; display: block; overflow-x: auto; } main table th, main table td { border: 1px solid var(--color-borde); padding: var(--espacio-2) var(--espacio-3); text-align: left; vertical-align: top; } main table th { background: var(--color-superficie); font-weight: var(--peso-semibold); color: var(--color-carbon); } main blockquote { margin: var(--espacio-5) 0; padding: var(--espacio-3) var(--espacio-4); border-left: 4px solid var(--color-salvia); background: var(--color-superficie); color: var(--color-carbon-70); } main blockquote p { margin: 0 0 var(--espacio-2); } main blockquote p:last-child { margin-bottom: 0; } @media (min-width: 46rem) { main table { display: table; overflow-x: visible; } } /* --- /estado-del-contenido/ --------------------------------------------- */ .tabla-estado caption { text-align: left; font-size: var(--texto-sm); color: var(--color-carbon-50); padding-bottom: var(--espacio-2); } .lista-borradores { padding-left: var(--espacio-5); } .lista-borradores li { margin-bottom: var(--espacio-2); } .ficha-tecnica-lista { margin: var(--espacio-4) 0; display: grid; gap: var(--espacio-3); } .ficha-tecnica-lista dt { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-carbon-50); } .ficha-tecnica-lista dd { margin: 0; font-weight: var(--peso-semibold); } @media (min-width: 46rem) { .ficha-tecnica-lista { grid-template-columns: repeat(4, 1fr); } } .plazo--verde { background: var(--color-completado-bg); color: var(--color-completado-fg); padding: var(--espacio-1) var(--espacio-2); border-radius: var(--radio-sm); } .plazo--ambar { background: var(--color-atencion-bg); color: var(--color-atencion-fg); padding: var(--espacio-1) var(--espacio-2); border-radius: var(--radio-sm); } .plazo--rojo { background: var(--color-alerta-bg); color: var(--color-alerta-fg); padding: var(--espacio-1) var(--espacio-2); border-radius: var(--radio-sm); } .plazo--gris { background: var(--color-neutro-bg); color: var(--color-neutro-fg); padding: var(--espacio-1) var(--espacio-2); border-radius: var(--radio-sm); } /* ========================================================================= VOZ (S8, QW-1) e INSTALAR (S8, QW-4) — mismas clases, tokens nuevos ========================================================================= */ .articulo-leible { position: relative; } .voz-boton { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-block-end: var(--espacio-3); border: 1px solid var(--color-borde); border-radius: var(--radio-completo); background: var(--color-superficie); color: var(--color-carbon); font-size: 1.1rem; cursor: pointer; } .voz-boton:hover, .voz-boton:focus-visible { border-color: var(--color-salvia); color: var(--color-salvia); } .voz-boton--leyendo { border-color: var(--color-amarillo); color: var(--color-carbon); background: var(--color-amarillo); } .voz-boton--preparando { opacity: 0.6; cursor: wait; } .voz-interruptor { display: flex; flex-direction: column; gap: var(--espacio-1); margin-block-end: var(--espacio-3); } .voz-interruptor__switch { align-self: flex-start; padding: var(--espacio-2) var(--espacio-4); border: 1px solid var(--color-borde); border-radius: var(--radio-md); background: var(--color-superficie); color: var(--color-carbon); font-size: var(--texto-sm); cursor: pointer; } .voz-interruptor__switch--on { border-color: var(--color-salvia); background: var(--color-salvia); color: var(--color-crema); } .voz-interruptor__ayuda { font-size: var(--texto-xs); margin: 0; max-width: var(--ancho-lectura); color: var(--color-carbon-50); } .pwa-banner { position: fixed; left: var(--espacio-4); right: var(--espacio-4); bottom: var(--espacio-4); z-index: 40; max-width: 28rem; margin-inline: auto; padding: var(--espacio-4); border: 1px solid var(--color-borde); border-radius: var(--radio-md); background: var(--color-superficie); box-shadow: var(--sombra-md); } .pwa-banner__texto { margin: 0 0 var(--espacio-3); font-size: var(--texto-sm); } .pwa-banner__acciones { display: flex; gap: var(--espacio-2); flex-wrap: wrap; } .pwa-banner__btn { flex: 1 1 auto; } .franja-version { position: fixed; left: var(--espacio-4); right: var(--espacio-4); top: var(--espacio-4); z-index: 41; max-width: 28rem; margin-inline: auto; display: flex; align-items: center; gap: var(--espacio-3); padding: var(--espacio-3) var(--espacio-4); border-radius: var(--radio-md); background: var(--color-carbon); color: var(--color-crema); box-shadow: var(--sombra-md); font-size: var(--texto-sm); } .franja-version p { margin: 0; flex: 1 1 auto; } .franja-version__btn { flex-shrink: 0; background: var(--color-crema); color: var(--color-carbon); border: none; border-radius: var(--radio-md); padding: var(--espacio-2) var(--espacio-4); font-weight: var(--peso-bold); cursor: pointer; } .compartir-envoltura { margin: var(--espacio-4) 0; } .compartir-boton { display: inline-flex; align-items: center; gap: var(--espacio-2); background: transparent; color: var(--color-carbon); border: 1px solid var(--color-carbon-30); border-radius: var(--radio-md); padding: var(--espacio-3) var(--espacio-5); font-size: var(--texto-sm); font-weight: var(--peso-bold); font-family: inherit; cursor: pointer; } .compartir-boton:hover, .compartir-boton:focus { background: var(--color-carbon); color: var(--color-crema); border-color: var(--color-carbon); } /* ========================================================================= /dossier/ — piezas que no vienen de componentes.css (vista por pasos, ficha del formulario, resumen antes de pagar). Mismas clases que dossier.js/formulario.js ya esperan; solo el vestido cambia. ========================================================================= */ .vista { padding-block: var(--espacio-2) 0; } .seccion { margin-block: var(--espacio-6); } .tarjeta.destacado { border-left: 4px solid var(--color-salvia); } .progreso-pasos { color: var(--color-carbon-50); font-size: var(--texto-sm); margin-bottom: var(--espacio-3); } .formulario--paso h2 { font-size: clamp(1.25rem, 4.5vw, var(--texto-lg)); } .ayuda { color: var(--color-carbon-50); font-size: var(--texto-sm); } .aviso--fijo { background: var(--color-atencion-bg); color: var(--color-atencion-fg); border-radius: var(--radio-md); padding: var(--espacio-3); margin-bottom: var(--espacio-4); } .aviso-formulario:empty { display: none; } .aviso-formulario { margin: 0; padding: var(--espacio-3); border-radius: var(--radio-md); font-size: var(--texto-sm); background: var(--color-atencion-bg); color: var(--color-atencion-fg); } .aviso-formulario.es-error { background: var(--color-alerta-bg); color: var(--color-alerta-fg); } .aviso-formulario.es-ok { background: var(--color-completado-bg); color: var(--color-completado-fg); } .enlace-boton { font: inherit; background: none; border: 0; padding: 0; color: var(--color-carbon-70); text-decoration: underline; cursor: pointer; } .enlace-boton:hover { color: var(--color-carbon); } .compra-casilla { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--espacio-3); margin: var(--espacio-5) 0; padding: var(--espacio-4); background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-md); } .compra-casilla input { margin-top: 0.2rem; width: 1.4rem; height: 1.4rem; } .compra-casilla label { font-weight: var(--peso-regular); } .compra-casilla label > span { display: block; } .compra-casilla label > span + span { margin-top: var(--espacio-2); } #btn-pagar[disabled] { opacity: 0.5; cursor: not-allowed; }