/* Páginas de sección (vistas/comun/seccio.php): Cercadors y Editors.
   Con el aire de la portada (inici/estilo.css): una franja oscura con la
   trama de puntos y, montadas sobre su borde, las tarjetas de lo que cuelga
   de la sección, iguales que las de los buscadores de la portada. */

:root {
  --blau-upc: #007bc0;
  --blau-clar: #3fa9e0;
  --nit: #06131f;
  --fons: #f5f7f9;
  --vora: #e3e8ee;
  --tinta: #0f1f2e;
  --tinta-suau: #556270;
  --marge: clamp(16px, 3vw, 48px);   /* el de la cabecera */
  --ample: 1200px;                   /* las tarjetas, centradas */
  --solapa: 56px;                    /* cuánto se montan sobre la franja */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fons);
  color: var(--tinta);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p { margin: 0; }

/* El pie, siempre abajo, aunque la pantalla sea más alta que la página */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > .peu { margin-top: auto; }

/* ----- 1. La franja: título a la altura del logo, trama a la derecha ----- */
.seccio-cap {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 88px) var(--marge) calc(var(--solapa) + clamp(48px, 6vw, 72px));
  background:
    radial-gradient(55% 90% at 85% 30%, rgba(0, 123, 192, 0.26), transparent 70%),
    var(--nit);
  color: #ffffff;
}

.seccio-trama {
  position: absolute;
  top: 50%;
  right: -6%;
  width: max(min(900px, 80vw), 50vw);
  height: auto;
  transform: translateY(-50%);
  opacity: 0.8;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  pointer-events: none;
  user-select: none;
}

.seccio-cap-dins { position: relative; }

.seccio-etiqueta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: #7cc4ec;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.seccio-etiqueta::before {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
}

.seccio-cap h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

.seccio-intro {
  max-width: 40rem;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
}

/* ----- 2. Las tarjetas ----- */
.seccio-graella {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: calc(var(--ample) + 2 * var(--marge));
  margin: calc(-1 * var(--solapa)) auto 0;
  padding: 0 var(--marge) clamp(56px, 8vw, 96px);
}

.targeta {
  display: block;
  padding: 28px 28px 30px;
  background: #ffffff;
  border: 1px solid var(--vora);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 16px 40px rgba(16, 24, 40, 0.10);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.targeta:hover { border-color: #b9d7ec; }
.targeta:focus-visible { outline: 2px solid var(--blau-upc); outline-offset: 3px; }

.targeta-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.targeta-icona {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #e8f3fa;
}
.targeta-icona { position: relative; }
.targeta-icona img { width: 28px; height: 28px; }

/* Editors: un lápiz en la esquina del icono (se edita, no se consulta) */
.targeta-llapis {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 24px;
  height: 24px;
  padding: 4px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--blau-upc);
  color: #ffffff;
}

/* «Cercador» / «Editor», encima del título */
.targeta-etiqueta {
  display: block;
  margin-bottom: 6px;
  color: var(--tinta-suau);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.targeta-obrir {
  display: inline-flex;
  gap: 6px;
  color: var(--blau-upc);
  font-size: 14px;
  font-weight: 600;
}
.targeta-fletxa { transition: transform 0.2s ease; }

.targeta h2 {
  margin-bottom: 8px;
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: color 0.2s ease;
}

.targeta p {
  color: var(--tinta-suau);
  font-size: 15px;
  line-height: 1.55;
}

.targeta:hover h2 { color: var(--blau-upc); }
.targeta:hover .targeta-fletxa { transform: translateX(4px); }

@media (max-width: 767px) {
  :root { --solapa: 40px; }
  .seccio-trama { width: 170vw; right: -80vw; opacity: 0.45; }
  .seccio-graella { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .targeta { padding: 22px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .targeta,
  .targeta h2,
  .targeta-fletxa { transition: none; }
}

/* ----- La página de error (vistas/comun/error.php): solo la franja ----- */
.seccio-cap.seccio-cap--sola {
  min-height: calc(100vh - 72px);
  padding-bottom: clamp(48px, 7vw, 88px);
}
.seccio-tornar { margin-top: 28px; }
.seccio-tornar a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}
.seccio-tornar a:hover { text-decoration: underline; text-underline-offset: 4px; }
.seccio-tornar a:focus-visible { outline: 2px solid #cfe3f5; outline-offset: 3px; }