/* ==========================================================================
   Portada (vistas/inici/portada.php), como la de la web del ICE. Sin
   Bootstrap: la letra es Inter, la de la cabecera, y la paleta, el azul de
   la UPC.
   ========================================================================== */
:root {
  --blau-upc: #007bc0;
  --blau-clar: #3fa9e0;
  --blau-cel: #7cc4ec;
  --nit: #06131f;
  --fons: #f5f7f9;
  --vora: #e3e8ee;
  --tinta: #0f1f2e;
  --tinta-suau: #556270;
  --marge: clamp(16px, 3vw, 48px);
  /* Todo el texto va en una columna centrada, como el contenido de la web
     del ICE (Plone); los fondos, de punta a punta. */
  --ample: 1200px;
}

*,
*::before,
*::after { 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, h3, p { margin: 0; }

.enllac-fletxa {
  display: inline-flex;
  gap: 6px;
  color: var(--blau-upc);
  font-weight: 600;
  text-decoration: none;
}
.enllac-fletxa:hover { text-decoration: underline; text-underline-offset: 4px; }

/* La columna centrada */
.portada-columna {
  width: 100%;
  max-width: calc(var(--ample) + 2 * var(--marge));
  margin: 0 auto;
  padding: 0 var(--marge);
}

/* ==========================================================================
   2. LA TRAMA DE PUNTOS, de punta a punta, con qué es esta web
   ========================================================================== */
.portada-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(440px, 62vh, 640px);
  padding: 64px 0;
  background:
    radial-gradient(55% 75% at 82% 38%, rgba(0, 123, 192, 0.28), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(0, 123, 192, 0.14), transparent 70%),
    var(--nit);
  color: #ffffff;
}

/* La trama entra por la derecha y se apaga hacia el texto y hacia abajo */
.portada-trama {
  position: absolute;
  top: 50%;
  right: -4%;
  width: max(min(1100px, 92vw), 62vw);   /* en pantalla grande crece con ella */
  height: auto;
  transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 50%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 50%, transparent 92%);
  mask-composite: intersect;
  pointer-events: none;
  user-select: none;
}

.portada-hero .portada-columna { position: relative; }

.portada-lema {
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.portada-entrada {
  max-width: 38rem;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
}

/* ==========================================================================
   3. QUÈ FEM: una tarjeta de color por sección (los azules de la UPC, como
   los ámbitos de la portada de la web del ICE)
   ========================================================================== */
.portada-quefem {
  padding-top: clamp(56px, 7vw, 88px);      /* solo arriba y abajo: los lados son los de la columna */
  padding-bottom: clamp(56px, 7vw, 88px);
}

.portada-quefem-titol {
  margin-bottom: 28px;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.portada-blocs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.portada-blocs--1 { grid-template-columns: minmax(0, 1fr); }
.portada-blocs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bloc {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 230px;
  padding: 28px 28px 72px;
  border-radius: 4px;
  background: var(--color);
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.25s ease-in, box-shadow 0.25s ease-in;
}
.bloc:hover,
.bloc:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 5px 10px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.05);
}
.bloc:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.bloc--1 { --color: #007bc0; }
.bloc--2 { --color: #0b2b45; }
.bloc--3 { --color: #00708f; }

.bloc-icona {
  width: 36px;
  height: 36px;
}
.bloc-titol {
  margin: 18px 0 8px;
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.bloc-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.55;
}
.bloc-fletxa {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 30px;
  height: 30px;
  transition: transform 0.2s ease;
}
.bloc:hover .bloc-fletxa { transform: translateX(4px); }

/* ==========================================================================
   4. SOBRE L'ICE
   ========================================================================== */
.portada-ice {
  margin-top: 0;
  padding: clamp(56px, 8vw, 96px) 0;
  background: #ffffff;
  border-top: 1px solid var(--vora);
}

.portada-ice-dins {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
}

.portada-etiqueta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--blau-upc);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.portada-etiqueta::before {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
}

.portada-ice-intro h2 {
  margin-bottom: 18px;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.portada-ice-intro p:not(.portada-etiqueta) {
  max-width: 36rem;   /* a todo lo ancho, las líneas serían ilegibles */
  margin-bottom: 24px;
  color: var(--tinta-suau);
  font-size: 17px;
  line-height: 1.65;
}

.portada-linies-titol {
  margin-bottom: 4px;
  color: var(--tinta-suau);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.portada-linies {
  margin: 0;
  padding: 0;
  list-style: none;
}

.portada-linies a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  gap: 16px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--vora);
  color: inherit;
  text-decoration: none;
}

.portada-linia-num {
  padding-top: 2px;
  color: var(--blau-clar);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.portada-linia-titol {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.portada-linia-desc {
  display: block;
  color: var(--tinta-suau);
  font-size: 15px;
  line-height: 1.55;
}
.portada-linia-fletxa {
  padding-top: 2px;
  color: #9aa6b2;
  transition: transform 0.2s ease, color 0.2s ease;
}
.portada-linies a:hover .portada-linia-titol { color: var(--blau-upc); }
.portada-linies a:hover .portada-linia-fletxa { color: var(--blau-upc); transform: translateX(4px); }

/* ==========================================================================
   Pantalla grande: las tres líneas de actuación, una al lado de otra
   ========================================================================== */
@media (min-width: 1600px) {
  .portada-ice-dins { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .portada-linies {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-top: 20px;
  }
  .portada-linies a {
    grid-template-columns: minmax(0, 1fr) 24px;
    height: 100%;
    padding: 20px 0 24px;
    border-top: 2px solid var(--tinta);
    border-bottom: 0;
  }
  .portada-linia-num { grid-column: 1 / -1; }
}

/* ==========================================================================
   Tableta y teléfono
   ========================================================================== */
@media (max-width: 900px) {
  .portada-blocs--3 { grid-template-columns: minmax(0, 1fr); }
  .portada-ice-dins { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .portada-hero { min-height: 0; padding-top: 56px; }
  .portada-trama { width: 170vw; right: -70vw; opacity: 0.55; }
  .portada-blocs--2 { grid-template-columns: minmax(0, 1fr); }
  .bloc { min-height: 0; padding: 22px 20px 56px; }
}

@media (max-width: 560px) {
  .portada-linies a { grid-template-columns: 34px minmax(0, 1fr); }
  .portada-linia-fletxa { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bloc,
  .bloc-fletxa,
  .portada-linia-titol,
  .portada-linia-fletxa { transition: none; }
}