(si no, contenido.js lo mete dentro del envoltorio del índice y en pantalla ancha quedaría encajonado en una columna). */ /* Cartón prensado, el mismo del pie y del marco normativo de la portada: color + un canalado muy tenue que lo separa de "un div oscuro". */ .pie { background-color: var(--carton); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 2px, transparent 2px 7px); color: #A8C3DE; padding: var(--e8) 0; font-size: var(--txt-chico); } /* El relleno lateral va acá y no en .pie: así el ancho máximo lo incluye, igual que en

, y el primer enlace del pie cae en la misma vertical que el cuerpo en vez de 20px a la izquierda. */ .pie-int { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e5); } /* En pantalla ancha el cuerpo crece para dejar sitio al índice; el pie acompaña ese ancho para que su primer enlace alinee con el índice. */ @media (min-width: 64rem) { body.con-indice .pie-int { max-width: calc(var(--ancho) + var(--ancho-indice) + 3rem); } } .pie nav { display: flex; flex-wrap: wrap; gap: 0 var(--e6); margin-bottom: var(--e2); } .pie nav a { display: inline-flex; align-items: center; min-height: var(--toque); font-size: 0.9375rem; font-weight: var(--peso-cuerpo); color: #F6F9FC; text-decoration: none; } .pie nav a:hover { color: #fff; text-decoration: underline; } .pie nav a:focus-visible { outline-color: #fff; } .pie p { margin: 0; line-height: 1.6; } /* ── Llamada al asistente guiado ─────────────────────────────────── */ /* Es la acción que queremos que la gente tome, así que es el único bloque con el color del trámite lleno: en una página de texto corrido, la mancha de color se ve antes que cualquier título. */ .asistente { /* Mismo bug que tenía `.campana-cab`: `--tema` por defecto (páginas sin `data-tramite`: publicidad, contacto, tramites.html) es `#5B4FE9`, idéntico al blob #1 del mesh gradient de más abajo — el blob quedaba invisible (mismo color sobre sí mismo). Mismo arreglo, mismo porcentaje. */ background: var(--tema); /* fallback sin color-mix() */ background: color-mix(in oklab, var(--tema) 80%, black); color: #fff; border-radius: var(--radio); padding: var(--e5); margin: var(--e6) 0; } .asistente h2 { margin: 0 0 var(--e2); color: #fff; font-size: var(--txt-h2); } .asistente p { color: #fff; } .asistente p:last-of-type { margin-bottom: 0; } .asistente p:has(.boton) { margin: var(--e4) 0 0; } /* Botón invertido: blanco sobre el color del trámite. */ .asistente .boton { background: #fff; color: var(--tema-texto, var(--tema)); font-weight: var(--peso-titulo); } .asistente .boton:hover { background: #F6F9FC; } .asistente a:focus-visible { outline-color: #fff; } /* Texto secundario dentro del bloque: blanco atenuado, nunca gris. */ .asistente .apunte { font-size: var(--txt-chico); color: rgba(255, 255, 255, 0.88); margin: var(--e4) 0 0; } /* ── Impresión: la checklist se lleva al hospital en papel ───────── */ @media print { .cabecera, .pie nav, .saltar, .migas, .boton, .asistente, .ayuda-secciones, .indice-lateral, .intro-retrato { display: none; } .seccion, .seccion:first-of-type { border: 0; } .seccion > summary { padding: 0; margin: 0; min-height: 0; color: #000; background: none; } .seccion > summary::after { display: none; } .seccion-cuerpo { padding: 0; } body { background: #fff; font-size: 12pt; } main, main.con-indice { max-width: none; padding: 0; display: block; } h1, h2 { color: #000; } .nota, .aviso, .datos li { border: 1px solid #999; background: #fff; } .docs li::before { background: #fff; border: 1px solid #333; color: #000; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .boton:active { transform: none; } } /* ── Móvil angosto ───────────────────────────────────────────────── */ @media (max-width: 30rem) { :root { --txt-h1: 1.375rem; --txt-h2: 1.125rem; } main { padding: var(--e4) var(--e4) var(--e7); } .entradilla { font-size: var(--txt); } .asistente { padding: var(--e4); } .intro { gap: var(--e3); } /* El botón ocupa el ancho: más fácil de acertar con el pulgar. */ .boton { display: flex; width: 100%; } } /* Pantallas muy angostas (360px y menos): que nada se desborde. */ @media (max-width: 22.5rem) { .intro-retrato { width: 64px; height: 64px; } .datos { grid-template-columns: 1fr; } .cabecera-nav { padding: var(--e3) var(--e1); } } /* Fragmentos técnicos (atributos HTML, nombres de parámetros). Solo aparecen en publicidad.html, donde hay que citar `rel="sponsored"` con exactitud. */ /* Sin fondo ni caja a propósito: un recuadro con relleno deja un hueco visible antes de la coma o el punto que sigue, y estos fragmentos aparecen siempre en medio de una frase. */ code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; color: var(--tinta); overflow-wrap: anywhere; } /* ── Espacio patrocinado dentro de una guía ────────────────────────────── Es un .banner, pero enlazado y rotulado. Lo inserta contenido.js; sin JS no aparece, y la guía se lee igual. La proporción va FIJA (16:10, el mismo recorte que en el asistente): la imagen llega después que el texto y, sin alto reservado, empujaría hacia abajo lo que la persona está leyendo. */ .banner--patrocinado { display: block; text-decoration: none; color: inherit; position: relative; } .banner--patrocinado:hover { border-color: var(--regla); } .banner--patrocinado:focus-visible { outline: 3px solid var(--tema); outline-offset: 3px; } /* El rótulo va ENCIMA de la imagen y no debajo: tiene que verse antes que la pieza, no después de haberla leído como si fuera contenido de la guía. */ .banner-rotulo { position: absolute; top: var(--e2); left: var(--e2); z-index: 2; background: var(--carton); color: #F6F9FC; font-family: var(--mono); font-size: var(--txt-chico); font-weight: var(--peso-medio); letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--radio); } .banner-arte-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bg); border-bottom: 1px solid var(--borde); } .banner--patrocinado .banner-texto { display: block; padding: var(--e4) var(--e5); } .banner-titulo { display: block; font-weight: var(--peso-titulo); color: var(--tinta); line-height: 1.3; margin-bottom: 2px; } .banner-linea { display: block; color: var(--mute-deep); line-height: 1.45; } /* ── Mesh gradient animado ───────────────────────────────────────── Fondo decorativo para el héroe de la portada y las cajas de CTA (.asistente, .campana-cab). Nunca detrás de texto de cuerpo: solo detrás de superficies con su propio color de texto ya resuelto (blanco sobre el bloque), para no arriesgar contraste. Los blobs son pseudo-elementos de `.asistente`/`.campana-cab` directamente — ninguna clase nueva que haya que acordarse de agregar en el HTML. */ .asistente, .campana-cab { position: relative; overflow: hidden; } .asistente::before, .asistente::after, .campana-cab::before, .campana-cab::after { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: 0.55; z-index: 0; pointer-events: none; } .asistente::before, .campana-cab::before { background: #5B4FE9; top: -20%; left: -10%; animation: meshFlota1 26s ease-in-out infinite alternate; } .asistente::after, .campana-cab::after { background: #0B6E77; bottom: -25%; right: -15%; animation: meshFlota2 30s ease-in-out infinite alternate; } @keyframes meshFlota1 { to { transform: translate(8%, 10%) scale(1.15); } } @keyframes meshFlota2 { to { transform: translate(-10%, -6%) scale(1.1); } } @media (prefers-reduced-motion: reduce) { .asistente::before, .asistente::after, .campana-cab::before, .campana-cab::after { animation: none; } } .asistente > *, .campana-cab > * { position: relative; z-index: 1; }