/* examen-mir.es · estils comuns Direcció gràfica: "El full de respostes" (la home, src/pages/home.mjs, n'és la referència). Mobile first. Regles: un sol color de tinta, cantonades rectes, sense ombres en repòs ni degradats. */ @font-face { font-family: "General Sans"; src: url("../fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("../fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("../fonts/general-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --paper: #ffffff; /* caixes blanques (REVISIO-UX-2.md, 1.9) */ --ground: #ebf0ee; --ground-2: #e1e9e6; --ink: #06525c; --ink-strong: #043f47; --muted: #2f737d; --field: #06525c; --field-ink: #ffffff; --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem); --step-display: clamp(2.75rem, 1.2rem + 5.2vw, 5.5rem); --m: clamp(16px, 2vw, 28px); --gap: 12px; --measure: 68ch; --ease-out: cubic-bezier(.16, 1, .3, 1); --font: "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 2px; } a:hover { text-decoration-thickness: 3px; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } p, ul, ol { margin: 0; } [hidden] { display: none !important; } .skip { position: absolute; left: var(--m); top: -100px; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 30; } .skip:focus { top: 8px; } /* ---------- Botons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 52px; padding: 0 24px; border: 0; background: var(--ink); color: var(--paper); font: 500 var(--step-body)/1 var(--font); text-decoration: none; cursor: pointer; transition: transform 180ms var(--ease-out), background-color 180ms; } .btn:hover { background: var(--ink-strong); transform: translateY(-2px); } .btn:active { transform: translateY(1px); } .link { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 2px; cursor: pointer; } /* ---------- Marques de lectura òptica: l'únic ornament ---------- */ .marks { height: 10px; margin: 0 var(--m); background: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 28px); } /* ---------- Capçalera ---------- Fixa a dalt (sticky: l'espai queda reservat, sense salts). Amb JS (site.js) s'amaga en baixar i torna en pujar; sense JS queda sempre visible. */ html { scroll-padding-top: 96px; } .site-head { position: sticky; top: 0; z-index: 20; background: var(--paper); transition: transform 200ms var(--ease-out); } .site-head.is-hidden { transform: translateY(-100%); } #contenido:focus { outline: none; } .site-head-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 16px var(--m) 18px; } .wordmark { font-weight: 700; font-size: var(--step-lead); letter-spacing: -0.01em; text-decoration: none; } .nav { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; } .menu-toggle { display: none; } @media (max-width: 859px) { .site-head-row { align-items: center; } .js .menu-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 0; background: var(--ground); color: var(--ink); font: 500 var(--step-body)/1 var(--font); cursor: pointer; } .js .menu-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); } .mainnav { width: 100%; display: flex; flex-direction: column; align-items: flex-end; } .js .site-head-row { flex-wrap: nowrap; } .js .mainnav { width: auto; } .js .nav { display: none; } .js .nav.is-open { display: grid; position: absolute; left: 0; right: 0; top: 100%; z-index: 15; gap: 0; padding: 8px var(--m) 16px; background: var(--paper); } .js .nav.is-open a { display: block; padding: 12px 0; font-size: var(--step-lead); } } .nav a { text-decoration: none; display: inline-block; padding: 6px 0; } .nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; } /* ---------- Contingut ---------- */ .page { padding: 0 var(--m) clamp(64px, 10vw, 140px); } .crumbs { padding: 16px 0 0; font-size: var(--step-small); } .crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .crumbs li { display: flex; align-items: center; } .crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--muted); } .crumbs a { text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; } .crumbs a:hover { text-decoration: underline; } .sheet { --pad: clamp(20px, 4vw, 56px); background: var(--paper); padding: var(--pad); margin-top: var(--gap); } .page-title { font-size: var(--step-display); line-height: 0.95; max-width: 18ch; overflow-wrap: break-word; hyphens: auto; } .lede { margin-top: 24px; font-size: var(--step-lead); line-height: 1.3; max-width: 40ch; } .meta-row { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: var(--step-small); color: var(--muted); } .actualizado, .fuente { font-size: var(--step-small); color: var(--muted); } .prose { max-width: var(--measure); } .prose > * + * { margin-top: 1em; } .prose h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); margin-top: 1.6em; } .prose h3 { font-size: var(--step-lead); margin-top: 1.4em; } .prose ul, .prose ol { padding-left: 1.2em; } .prose li + li { margin-top: 0.4em; } .sheet.prose { max-width: none; } .sheet.prose > * { max-width: var(--measure); } .prose > :first-child { margin-top: 0; } .prose > .nota, .prose > table { max-width: var(--measure); } /* Files del full: una fita o un pas per fila, amb la seva casella d'estat */ .rows { display: grid; gap: 6px; } .rows details, .rows .row { background: var(--ground); } .rows summary, .rows .row { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 10px 18px; font-weight: 500; } .rows summary { list-style: none; cursor: pointer; } .rows summary::-webkit-details-marker { display: none; } .rows summary:hover { background: var(--ground-2); } .rows .name { flex: 1; } .rows .plus { font-size: 1.4em; line-height: 1; } .rows details[open] .plus { transform: rotate(45deg); } .rows .panel { padding: 0 18px 20px; display: grid; gap: 10px; } .rows details:not([open]) .panel { display: none; } .rows .panel { margin: 0; } .rows .panel div { display: grid; gap: 2px; min-width: 0; } .rows .panel dt { color: var(--muted); font-size: var(--step-small); } .rows .panel dd { margin: 0; overflow-wrap: anywhere; } .rows .panel .cita { white-space: normal; } .rows summary .name { min-width: 0; } @media (min-width: 600px) { .rows .panel div { display: flex; justify-content: space-between; gap: 16px; } .rows .panel dd { text-align: right; } } .state { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step-small); font-weight: 400; color: var(--muted); } /* Caselles: buida amb contorn fosc = pendent · plena = publicada · plena amb marca = tancada (contrast ≥ 3:1, no només color) */ .bubble { width: 18px; height: 18px; border-radius: 50%; background: transparent; border: 2px solid var(--ink); flex: none; position: relative; } .bubble.is-filled { background: var(--ink); } .bubble.is-closed { background: var(--ink); } .bubble.is-closed::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); } .leyenda { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--step-small); } .leyenda li { display: flex; align-items: center; gap: 8px; } .rows .name { display: flex; flex-direction: column; gap: 2px; } .estimada-corta, .oficial-corta { font-size: var(--step-small); font-weight: 400; color: var(--muted); } .estimada-corta { font-style: italic; } .plazo-corta { font-size: var(--step-small); font-weight: 500; color: var(--ink); } .rows .fila.is-next { outline: 3px solid var(--ink); outline-offset: -3px; } .rows .fila.is-next summary { flex-wrap: wrap; padding-top: 14px; } .next-tag { flex-basis: 100%; font-size: var(--step-small); font-weight: 700; } .rows .estimada dd { font-style: italic; border-left: 3px dashed var(--muted); padding-left: 10px; } .estimada-base { display: block; margin-top: 4px; font-size: var(--step-small); color: var(--muted); font-style: normal; } .rows .panel .cita { display: block; } .rows .cita { font-size: var(--step-small); color: var(--muted); } /* ---------- Hubs, eines i pàgines pendents ---------- */ .sheet-title { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1; margin-bottom: 24px; } .soon { color: var(--muted); } .soon-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; background: var(--ground); color: var(--muted); font-size: var(--step-small); font-weight: 400; vertical-align: middle; } /* Llistes d'enllaços (REVISIO-UX-2.md, 1.6): tota la fila és l'enllaç; la fletxa "›" és l'indicador a tot el web */ .lista-enlaces { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .fe-caja { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; min-height: 44px; padding: 14px 18px; background: var(--ground); color: inherit; text-decoration: none; } a.fe-caja { cursor: pointer; transition: background-color 160ms; } a.fe-caja:hover { background: var(--ground-2); } a.fe-caja:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; } .fe-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .fe-nombre { font-weight: 700; font-size: var(--step-body); line-height: 1.25; } .fe-tag { font-size: var(--step-small); color: var(--muted); border: 1px solid currentColor; padding: 0 6px; line-height: 1.5; white-space: nowrap; } .fe-desc { grid-column: 1; display: block; margin-top: 4px; color: var(--muted); max-width: 60ch; } .fe-flecha { grid-column: 2; grid-row: 1 / span 2; font-size: 1.75rem; line-height: 1; font-weight: 700; } .is-soon .fe-caja { background: transparent; border: 2px solid var(--ground); } .is-soon .fe-nombre { color: var(--muted); } .sheet .more { margin-top: 20px; font-weight: 500; } .sheet-title + .lista-enlaces, .sheet-title + p + .lista-enlaces { margin-top: 0; } .cita { font-size: var(--step-small); color: var(--muted); white-space: nowrap; padding-block: 3px; } .prose .cita { margin-left: 4px; } .more + .lista-enlaces { margin-top: 24px; } .nota { background: var(--ground); padding: 14px 18px; } .prose table { border-collapse: collapse; width: 100%; max-width: var(--measure); } .prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 2px solid var(--ground); vertical-align: top; } .prose th { font-weight: 500; color: var(--muted); } .sheet-id { margin: 24px 0 0; max-width: 460px; display: grid; gap: 6px; } .sheet-id div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; background: var(--ground); padding: 11px 18px; } .sheet-id dt { font-size: var(--step-small); color: var(--muted); } .sheet-id dd { margin: 0; font-weight: 500; text-align: right; } @media (min-width: 860px) { .sheet > .lista-enlaces, nav.sheet .lista-enlaces { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 859px) { .sheet { padding: 28px 20px; } .sheet + .sheet { margin-top: 24px; } } /* ---------- Especialitats: comparador i fitxes ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .page-title--ficha { font-size: var(--step-head); max-width: 22ch; overflow-wrap: break-word; hyphens: auto; } .sheet .intro { max-width: 60ch; } .tabla-wrap { margin-top: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .comparador, .tabla-ccaa { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; } .comparador th, .comparador td, .tabla-ccaa th, .tabla-ccaa td { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--ground); vertical-align: baseline; } .comparador th:first-child, .comparador td:first-child, .tabla-ccaa th:first-child { padding-left: 0; } .comparador thead th, .tabla-ccaa thead th { font-size: var(--step-small); font-weight: 500; color: var(--muted); vertical-align: bottom; } .comparador tbody th, .tabla-ccaa tbody th { font-weight: 500; } .comparador tfoot th, .comparador tfoot td { font-weight: 700; border-bottom: 0; } .comparador .num, .tabla-ccaa .num { text-align: right; white-space: nowrap; } .comparador tbody th a { text-decoration-thickness: 1px; display: inline-block; padding: 6px 0; } .comparador tbody th a:hover { text-decoration-thickness: 2px; } .comparador .pct { color: var(--muted); font-size: var(--step-small); } .comparador .corto { display: none; } @media (max-width: 599px) { .comparador .col-ant { display: none; } } .sin-dato { color: var(--muted); font-size: var(--step-small); } .asterisco { font-size: 12px; font-weight: 700; margin-left: 2px; vertical-align: super; line-height: 0; } .notas .asterisco { font-size: 14px; vertical-align: baseline; margin: 0 4px 0 0; } .th-sort { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: 6px; } .th-sort:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .th-sort::after { content: "↕"; opacity: 0.45; } [aria-sort="ascending"] .th-sort::after { content: "↑"; opacity: 1; } [aria-sort="descending"] .th-sort::after { content: "↓"; opacity: 1; } .filtro { margin-top: 24px; display: grid; gap: 8px; max-width: 460px; } .filtro label { font-weight: 500; } .filtro input { font: inherit; color: inherit; background: var(--ground); border: 0; border-bottom: 2px solid var(--ink); padding: 12px 14px; min-height: 48px; } .filtro-n { font-size: var(--step-small); color: var(--muted); } .notas { margin-top: 24px; display: grid; gap: 8px; max-width: 72ch; font-size: var(--step-small); color: var(--muted); } .notas .cita { white-space: normal; } .centros { margin-top: 20px; display: grid; gap: 6px; } .centros details { background: var(--ground); } /* Eines pendents de /herramientas/, plegades al final (REVISIO-UX-5.md, 4.3). L'etiqueta "Próximamente" ja és al títol. */ .proximamente > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; cursor: pointer; list-style: none; } .proximamente > summary::-webkit-details-marker { display: none; } .proximamente > summary::after { content: "+"; font-size: 1.5rem; line-height: 1; transition: transform 180ms var(--ease-out); } .proximamente[open] > summary::after { transform: rotate(45deg); } .proximamente > summary .sheet-title { margin: 0; } .proximamente .fe-tag { display: none; } .proximamente .lista-enlaces { margin-top: 16px; } /* Capçalera amb graella fixa (REVISIO-UX-2.md, 2.5): nom i recompte a l'esquerra, "+"/"×" sempre a la dreta */ .centros summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; min-height: 56px; padding: 10px 18px; font-weight: 500; list-style: none; cursor: pointer; } .centros summary::-webkit-details-marker { display: none; } .centros summary:hover { background: var(--ground-2); } .centros summary .name { min-width: 0; } .centros-n { display: block; margin-top: 2px; font-size: var(--step-small); font-weight: 400; color: var(--muted); } .nota-cupo { margin: 0 18px 8px; padding: 10px 12px; border-left: 3px solid var(--ink); background: var(--paper); font-size: var(--step-small); } .centros .plus { font-size: 1.4em; line-height: 1; } .centros details[open] .plus { transform: rotate(45deg); } .centros ul { list-style: none; margin: 0; padding: 0 18px 14px; display: grid; } .centros li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 2px solid var(--paper); } .centros .centro { min-width: 0; overflow-wrap: anywhere; } .centros .donde { display: block; font-size: var(--step-small); color: var(--muted); } .centros .privado { font-size: var(--step-small); color: var(--muted); border: 1px solid currentColor; padding: 0 6px; margin-left: 4px; white-space: nowrap; } .centros li .n { font-weight: 700; font-variant-numeric: tabular-nums; } /* Taula de cookies de /cookies/ (REVISIO-UX-5.md, 3) */ .tabla-cookies { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--step-small); } .tabla-cookies th, .tabla-cookies td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ground-2); } .tabla-cookies thead th { font-weight: 500; color: var(--muted); } .tabla-cookies tbody th { font-weight: 600; } .tabla-cookies code { font-size: 0.95em; overflow-wrap: anywhere; } .fuente-linea { margin-top: 16px; font-size: var(--step-small); line-height: 1.5; color: var(--muted); max-width: 72ch; } .fuente-linea a { color: inherit; } .nota-dato { margin-top: 12px; max-width: 460px; font-size: var(--step-small); color: var(--muted); } .nota-ref { font-size: var(--step-small); color: var(--muted); } @media (max-width: 559px) { .comparador { font-size: var(--step-small); } .comparador th, .comparador td { padding: 10px 4px; } .comparador .pct { display: none; } .comparador .th-sort { gap: 2px; } .comparador tbody th { hyphens: auto; overflow-wrap: break-word; } .comparador .largo { display: none; } .comparador .corto { display: inline; } .sheet-id div { flex-wrap: wrap; } .sheet-id dd .cita { display: block; white-space: normal; } .tabla-ccaa th, .tabla-ccaa td { padding: 10px 6px; } .tabla-ccaa thead .cita { white-space: normal; } .tabla-ccaa tbody th { font-size: var(--step-small); } } /* ---------- Eines: guia per passos i comprovador ---------- */ .btn--ghost { background: var(--ground); color: var(--ink); } .btn--ghost:hover { background: var(--ground-2); } .btn:disabled { opacity: 0.4; cursor: default; transform: none; } .pasos { padding-left: 1.4em; display: grid; gap: 28px; } .paso h3 { margin-top: 0; } .paso > * + * { margin-top: 0.8em; } .pasos-nav { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } .pasos-n { font-size: var(--step-small); color: var(--muted); } .req-form { display: grid; gap: 12px; margin-top: 8px; } .req-q { border: 0; margin: 0; padding: 18px; background: var(--ground); display: grid; gap: 10px; } .req-q legend { float: left; width: 100%; padding: 0; font-weight: 500; margin-bottom: 4px; } .req-q label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .req-q input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--ink); flex: none; } .req-resultado { margin-top: 20px; background: var(--field); color: var(--field-ink); padding: 24px; } .req-resultado h3 { font-size: var(--step-lead); } .req-resultado ul { margin-top: 12px; padding-left: 1.2em; display: grid; gap: 6px; } .req-resultado p { margin-top: 8px; } /* ---------- Recomanació de Mirial: targeta externa, amb el color i el logotip de Mirial ---------- Estructura orientada a la conversió (REVISIO-UX-3-CRO.md, 2): etiqueta, logotip, títol amb el compte enrere, context, descripció, beneficis, botons i vídeo. En mòbil, el vídeo vertical va al final; en escriptori, a la columna dreta. */ .mirial { --mirial: #01529a; --mirial-suave: #e8f0f8; margin: clamp(48px, 8vw, 120px) auto 0; max-width: 680px; background: #fff; color: #1b2733; border-radius: 16px; padding: clamp(24px, 4vw, 40px); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; display: grid; gap: 28px; } @media (min-width: 860px) { .mirial { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: center; max-width: 920px; } } .mirial-tag { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--mirial); background: var(--mirial-suave); border-radius: 999px; padding: 3px 10px; } .mirial-brand { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mirial); } .mirial-brand .mirial-logo { width: 24px; height: 24px; } .mirial-titulo { margin-top: 10px; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); line-height: 1.15; letter-spacing: -0.015em; color: #10202e; text-wrap: balance; } .mirial-prueba { margin-top: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--mirial); } .mirial-academia { margin-top: 14px; font-size: 0.9375rem; color: #4a5866; } .mirial-texto { margin-top: 14px; font-size: 1.0625rem; line-height: 1.45; } .mirial-que { margin-top: 10px; font-size: 1.0625rem; font-weight: 600; } .mirial-beneficios { list-style: none; margin-top: 16px; padding: 0; display: grid; gap: 10px; } .mirial-beneficios li { position: relative; padding-left: 26px; line-height: 1.45; } /* el rombe del logotip de Mirial com a pic */ .mirial-beneficios li::before { content: ""; position: absolute; left: 3px; top: 0.42em; width: 10px; height: 10px; background: var(--mirial); transform: rotate(45deg) scaleY(1.3); } /* Botons de descàrrega segons el dispositiu (site.js posa data-so). A l'escriptori i sense JS, les dues insígnies a la mateixa alçada, l'una al costat de l'altra, i a sota l'enllaç web. */ .descarga { margin-top: 24px; display: grid; gap: 10px; justify-items: start; min-width: 0; } .descarga .badges { margin-top: 0; justify-content: flex-start; } .descarga[data-so="ios"] .badges, .descarga[data-so="android"] .badges { --badge-h: 60px; } .descarga-otra { font-size: 0.9375rem; color: #4a5866; } .descarga-otra a, .descarga-web a { color: var(--mirial); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; } /* Vídeo vertical (Short, 9:16) amb façana. En mòbil, com a molt un 70vh d'alçada i centrat. */ .mirial-video { width: min(100%, calc(70vh * 9 / 16)); margin: 0 auto; } @media (min-width: 860px) { .mirial-video { width: 100%; } } .mirial-video-enlace { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; background: var(--mirial-suave); color: #fff; text-decoration: none; } .mirial-video-portada { width: 100%; height: 100%; object-fit: cover; } .mirial-video-enlace:focus-visible { outline: 3px solid var(--mirial); outline-offset: 3px; } .mirial-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--mirial); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85); } .mirial-play::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; } .mirial-video-boton { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; border-radius: 10px; background: var(--mirial); color: #fff; font-weight: 600; font-size: 0.9375rem; text-align: center; line-height: 1.3; } .mirial-video-enlace:hover .mirial-video-boton { background: #013f78; } .mirial-video-aviso { margin-top: 8px; font-size: 0.8125rem; color: #4a5866; text-align: center; } .mirial-video-marco { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #000; } .mirial-video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Vídeo sense consentiment de contingut de tercers (REVISIO-UX-5.md, 3): el missatge i els dos botons, a dins mateix */ .mirial-video-permiso { aspect-ratio: 9 / 16; border-radius: 14px; background: var(--mirial-suave); display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 12px; padding: 20px; text-align: center; color: #10202e; } .mirial-video-permiso p { font-weight: 600; line-height: 1.35; } .mirial-video-aceptar, .mirial-video-externo { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border-radius: 10px; font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; } .mirial-video-aceptar { border: 0; background: var(--mirial); color: #fff; } .mirial-video-aceptar:hover { background: #013f78; } .mirial-video-externo { border: 2px solid var(--mirial); color: var(--mirial); background: #fff; } .mirial-video-aceptar:focus-visible, .mirial-video-externo:focus-visible { outline: 3px solid var(--mirial); outline-offset: 3px; } /* Sense vídeo (PUBLIC_MIRIAL_VIDEO_ID buit): la captura del mode individual */ .mirial-captura { display: block; width: 80%; max-width: 440px; height: auto; margin: 0 auto; } @media (min-width: 860px) { .mirial-captura { width: 100%; } } /* Mòduls de mirial.es (REVISIO-UX-5.md, 2.6 i REVISIO-UX-8.md, 4 i 5): la identitat del bloc de Mirial, en petit */ .mirial-mini { --mirial: #01529a; margin-top: 28px; max-width: 560px; background: #fff; color: #1b2733; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; border: 2px solid var(--mirial); border-radius: 14px; padding: 20px 22px; display: grid; gap: 10px; justify-items: start; } .mirial-mini .mirial-brand { margin-top: 0; } .sheet > .mirial-mini:first-child { margin-top: 0; } .prose .mirial-mini-titulo { margin-top: 0; font-size: var(--step-lead); line-height: 1.2; color: #10202e; } .mirial-mini p { margin: 0; } .mirial-mini-boton { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 20px; line-height: 1.25; border-radius: 10px; background: var(--mirial); color: #fff; font-weight: 600; text-decoration: none; } .mirial-mini-boton:hover { background: #013f78; } .mirial-mini-boton:focus-visible { outline: 3px solid var(--mirial); outline-offset: 3px; } .mirial-line { margin-top: 40px; display: flex; align-items: center; gap: 10px; font-size: var(--step-small); color: var(--muted); } .mirial-line a { color: #01529a; font-weight: 500; } .badges { list-style: none; padding: 0; margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; } .badges { --badge-h: 50px; } .badges img { height: var(--badge-h); width: auto; } /* La insígnia oficial de Google Play porta 15 px de marge transparent a dalt i a baix (de 130): s'amplia perquè la part visible faci la mateixa alçada que la de l'App Store, sense canviar l'alçada de la fila (REVISIO-UX-4.md, 1). */ .badges [data-os="android"] img { height: calc(var(--badge-h) * 130 / 100); margin-block: calc(var(--badge-h) * -15 / 100); } .badges a { display: inline-block; transition: transform 180ms var(--ease-out); } .badges a:hover { transform: translateY(-2px); } /* ---------- Consentiment ---------- */ /* Banner de cookies (REVISIO-UX-5.md, 3 i REVISIO-UX-6.md, 1). Modal centrada a la pantalla visible, amb un fons semitransparent: és una superposició fixed, no mou res (CLS 0). Mentre bloqueja, la pàgina no fa scroll; el gutter de la barra de scroll es reserva perquè el contingut no es mogui en escriptori. A les pàgines legals (data-legal), banner fix a baix, sense fons i sense bloquejar. Els tres botons de la primera capa tenen la mateixa classe i la mateixa mida (tres columnes iguals). La caixa fa scroll a dins. */ .consent { position: fixed; z-index: 25; inset: 0; display: grid; place-items: center; padding: var(--gap); background: rgba(3, 38, 43, 0.72); overscroll-behavior: contain; } .consent-caja { width: 100%; max-width: 560px; max-height: calc(100dvh - 2 * var(--gap)); overflow-y: auto; background: var(--paper); color: var(--ink); padding: 20px; font-size: var(--step-small); } .consent[data-legal] { inset: auto var(--gap) var(--gap); display: block; max-width: 560px; padding: 0; background: none; } .consent[data-legal] .consent-caja { box-shadow: 0 8px 32px rgba(4, 63, 71, 0.25); } /* El gutter reservat queda fora del fons fixed: es pinta del mateix color que el fons sobre --ground */ html.consent-bloqueo { scrollbar-gutter: stable; background: #445f62; } html.consent-bloqueo body { overflow: hidden; } .consent-caja:focus { outline: none; } .consent-caja:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; } .consent-title { font-weight: 700; font-size: var(--step-body); } .consent p + p { margin-top: 6px; } .consent-actions { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .consent-btn { min-height: 48px; padding: 0 8px; font-size: var(--step-small); } html:not(.js) .consent-abrir { display: none; } .consent-panel { margin-top: 16px; border-top: 1px solid var(--ground-2); padding-top: 14px; } .consent-panel fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; } .consent-panel legend { font-weight: 700; padding: 0; margin-bottom: 4px; } .consent-cat-nombre { display: flex; align-items: center; gap: 10px; font-weight: 600; min-height: 32px; } .consent-cat-nombre input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); flex: none; } .consent-siempre { margin-left: auto; font-weight: 400; color: var(--muted); } .consent-cat-desc { color: var(--muted); } .consent p.consent-cat-desc { margin-top: 2px; } .consent-guardar { margin-top: 14px; width: 100%; min-height: 48px; font-size: var(--step-small); } .consent-cerrar { display: block; margin: 12px auto 0; min-height: 44px; } /* ---------- Peu: el revers del full ---------- */ .site-foot { background: var(--field); padding: 48px var(--m) var(--m); } .scallops { display: flex; } .scallops span { flex: 1; aspect-ratio: 2 / 1; background: var(--paper); border-radius: 999px 999px 0 0; } .site-foot-body { background: var(--paper); padding: 24px clamp(20px, 4vw, 56px) 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 16px; } .site-foot-body > div { grid-column: 1 / -1; } .site-foot-name { font-weight: 700; font-size: var(--step-head); letter-spacing: -0.02em; line-height: 1; margin-bottom: 16px; } .site-foot-body p { max-width: 42ch; } .site-foot ul { list-style: none; padding: 0; display: grid; gap: 4px; } .site-foot ul a { display: inline-flex; align-items: center; min-height: 32px; } .site-foot-fuentes { margin-top: 20px; } .site-foot-imprint { background: var(--paper); padding: 0 clamp(20px, 4vw, 56px) 24px; font-size: var(--step-small); } /* ---------- Añadir a mi calendario (REVISIO-UX-3-CRO.md, 5) ---------- Sense JS: el títol i tres enllaços. Amb JS: un botó que obre el menú per sobre del contingut. */ .cal-add { display: grid; gap: 8px; justify-items: start; margin-bottom: 28px; } .cal-add-titulo { font-weight: 700; } .cal-add-control { position: relative; } .cal-add-boton { gap: 10px; } .cal-add-boton::after { content: ""; border-style: solid; border-width: 6px 5px 0; border-color: currentColor transparent transparent; transition: transform 180ms var(--ease-out); } .cal-add-boton[aria-expanded="true"]::after { transform: rotate(180deg); } .cal-add-menu { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .cal-add-menu a { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 8px 16px; background: var(--ground); text-decoration: none; font-weight: 500; } .cal-add-menu a:hover { background: var(--ground-2); } .cal-add-desc { font-size: var(--step-small); font-weight: 400; color: var(--muted); } .cal-add.is-menu .cal-add-menu { position: absolute; z-index: 12; top: calc(100% + 6px); left: 0; width: max-content; min-width: 100%; max-width: calc(100vw - 2 * var(--m) - 16px); padding: 6px; background: var(--paper); box-shadow: 0 8px 28px rgba(4, 63, 71, 0.22); } .cal-add-nota { font-size: var(--step-small); color: var(--muted); max-width: 48ch; } /* Amb JS (html.js), abans que site.js posi el botó: el títol ja té la seva forma i el menú no es veu (sense salts) */ .js .cal-add:not(.is-menu) .cal-add-menu { display: none; } .js .cal-add:not(.is-menu) .cal-add-titulo { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; background: var(--ground); font-weight: 500; } .js .cal-add:not(.is-menu) .cal-add-titulo::after { content: ""; margin-left: 10px; border-style: solid; border-width: 6px 5px 0; border-color: currentColor transparent transparent; } /* ---------- Foto de capçalera d'una pàgina, a l'atzar del pool (REVISIO-UX-7.md, 6; abans REVISIO-UX-4.md, 4.2) ---------- Mòbil: franja de capçalera de com a molt un 22vh, de vora a vora del full, a sobre de l'H1. Escriptori: a la dreta de la capçalera. El contenidor reserva l'alçada de la foto abans que l'script la insereixi (sense CLS); el i el