/* Myandbank Autònoms · Qüestionari
   Escriptori: fidel al disseny de 1440 px (unitat --u = 1 px del disseny,
   escalada a l'amplada). Mòbil i tauleta: adaptació pròpia amb el mateix sistema. */

@font-face { font-family: "Blinker"; src: url("fonts/blinker-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Blinker"; src: url("fonts/blinker-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Blinker"; src: url("fonts/blinker-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Blinker"; src: url("fonts/blinker-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --taronja: #eb6036;
  --gris: #63656b;
  --blanc: #fff;
  --error: #b23a12;
  --fosc: #3d3f44;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--gris);
  font-family: "Blinker", system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: none; }

.pagina {
  container: pagina / inline-size;
  --u: calc(min(100cqi, 1440px) / 1440);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.marc {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- Capçalera ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--taronja);
  color: var(--blanc);
}

/* Mòbil: lema, títol i la fotògrafa traient el cap des de la vora blanca
   (la foto és un retall amb el tall recte a baix, que queda amagat). */
.hero__marc {
  --titol: min(calc((min(100cqi, 600px) - 48px) / 2.95), 205px);
  --foto: min(66cqi, 400px);
  padding-top: 36px;
  padding-bottom: calc(var(--foto) * 0.6);
}

.hero__lema {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(20px, 6cqi, 30px);
  font-weight: 600;
  line-height: 1.2;
}

.encerclat {
  position: relative;
  white-space: nowrap;
}

.encerclat__ovalo {
  position: absolute;
  left: -0.225em;
  top: 0.006em;
  width: 3.658em;
  height: 1.29em;
  pointer-events: none;
}

.hero__titol {
  position: relative;
  z-index: 2;
  margin: 28px 0 0;
  font-size: var(--titol);
  font-weight: 900;
  line-height: 0.806;
  letter-spacing: 0.0096em;
  font-kerning: none;
}

.hero__titol span { display: block; }
.hero__titol span:first-child { margin-left: 0.011em; }

.hero__foto {
  position: absolute;
  z-index: 1;
  right: -2%;
  bottom: calc(var(--foto) * -0.366);
  width: var(--foto);
  height: auto;
  transform: rotate(-5.106deg);
  transform-origin: 50% 50%;
}

/* ---------- Qüestionari ---------- */

.questionari { margin: 0; }

.enquesta {
  position: relative;
  overflow: hidden;
  background: var(--blanc);
}

.enquesta__marc {
  padding-top: 32px;
  padding-bottom: 56px;
}

.deco { position: absolute; pointer-events: none; height: auto; }

.deco--nube { top: 28px; right: 24px; width: 104px; }
.deco--arcs-dreta { top: 46%; right: -70px; width: 190px; z-index: 0; }
.deco--arcs-esquerra { bottom: -40px; left: -90px; width: 300px; z-index: 0; }
.deco--velo { display: none; }

.enquesta__titol {
  position: relative;
  margin: 76px 0 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.pregunta {
  position: relative;
  z-index: 1;
  margin: 36px 0 0;
}

.pregunta__text {
  display: block;
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gris);
}

fieldset.pregunta { border: 0; padding: 0; min-width: 0; }
fieldset.pregunta legend { float: left; width: 100%; padding: 0; }
.funcionalitats__nota { font-weight: 400; }

.camp {
  display: block;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 2px solid var(--gris);
  border-radius: 10px;
  background: var(--blanc);
  color: var(--gris);
  font: 400 19px/1.2 "Blinker", system-ui, sans-serif;
  appearance: none;
}

.camp:focus-visible {
  outline: 3px solid var(--taronja);
  outline-offset: 2px;
}

.camp[aria-invalid="true"] { border-color: var(--error); }

.opcions {
  clear: both;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
}

.opcio {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 34px;
  cursor: pointer;
}

.opcio input,
.consentiment__label input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.opcio__casella {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 2px solid var(--gris);
  border-radius: 7px;
  background: var(--blanc);
}

.opcio__casella::after,
.consentiment__casella::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 28%;
  height: 52%;
  border: solid var(--blanc);
  border-width: 0 0.18em 0.18em 0;
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0;
}

.opcio input:checked + .opcio__casella {
  background: var(--taronja);
  border-color: var(--taronja);
}

.opcio input:checked + .opcio__casella::after { opacity: 1; }

.opcio input:focus-visible + .opcio__casella {
  outline: 3px solid var(--taronja);
  outline-offset: 2px;
}

.opcio input:disabled ~ * { opacity: 0.4; }
.opcio:has(input:disabled) { cursor: not-allowed; }

.opcio__text {
  margin-left: 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.avis-maxim {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 600;
  min-height: 1.2em;
}

.avis-maxim:empty { display: none; }

/* ---------- Dades de contacte ---------- */

.contacte {
  background: var(--taronja);
  color: var(--blanc);
}

.contacte__marc {
  padding-top: 40px;
  padding-bottom: 48px;
}

.contacte__fila { display: grid; gap: 20px; }
.contacte__fila + .contacte__fila { margin-top: 20px; }

.dada__text {
  display: block;
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.camp--blanc { border-color: var(--blanc); }

.camp--blanc:focus-visible {
  outline: 3px solid var(--blanc);
  outline-offset: 3px;
}

.camp--blanc[aria-invalid="true"] {
  border-color: var(--fosc);
  box-shadow: inset 0 0 0 1px var(--fosc);
}

.error {
  margin: 8px 0 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.enviament {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}

.consentiment__label {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.consentiment__casella {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: -1px;
  border: 2px solid var(--blanc);
  border-radius: 6px;
}

.consentiment__casella::after { border-color: var(--taronja); }

.consentiment__label input:checked + .consentiment__casella { background: var(--blanc); }
.consentiment__label input:checked + .consentiment__casella::after { opacity: 1; }

.consentiment__label input:focus-visible + .consentiment__casella {
  outline: 3px solid var(--blanc);
  outline-offset: 3px;
}

.consentiment__label input[aria-invalid="true"] + .consentiment__casella {
  border-color: var(--fosc);
  box-shadow: inset 0 0 0 1px var(--fosc);
}

.enllac-privacitat { color: inherit; text-underline-offset: 0.15em; }
.enllac-privacitat:focus-visible { outline: 3px solid var(--blanc); outline-offset: 2px; border-radius: 2px; }

.boto-enviar {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 10px;
  background: var(--blanc);
  color: var(--taronja);
  font: 700 22px/1 "Blinker", system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.boto-enviar:hover { background: #fde4da; }
.boto-enviar:focus-visible { outline: 3px solid var(--blanc); outline-offset: 3px; }
.boto-enviar:disabled { cursor: progress; opacity: 0.75; }

/* ---------- Política de protecció de dades (finestra) ---------- */

.consentiment__label:has(input:disabled) .consentiment__casella { opacity: 0.55; }

.privacitat {
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--blanc);
  color: var(--gris);
  font-family: "Blinker", system-ui, sans-serif;
}

.privacitat[open] { display: flex; }
.privacitat::backdrop { background: rgba(61, 63, 68, 0.6); }
body:has(.privacitat[open]) { overflow: hidden; }

.privacitat__capcalera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px 24px;
  border-bottom: 1px solid #e4e4e6;
}

.privacitat__titol {
  margin: 0;
  color: var(--taronja);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.privacitat__tancar {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gris);
  cursor: pointer;
}

.privacitat__tancar:hover { background: #f1f1f2; }
.privacitat__tancar:focus-visible { outline: 3px solid var(--taronja); outline-offset: 2px; }

.privacitat__cos {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px 24px 28px;
  font-size: 17px;
  line-height: 1.5;
}

.privacitat__cos:focus-visible { outline: 3px solid var(--taronja); outline-offset: -3px; }
.privacitat__cos p { margin: 0 0 1em; }
.privacitat__cos h2 { margin: 1.6em 0 0.6em; color: var(--fosc); font-size: 19px; font-weight: 600; line-height: 1.25; }
.privacitat__cos h3 { margin: 1.4em 0 0.5em; color: var(--fosc); font-size: 17px; font-weight: 600; line-height: 1.3; }
.privacitat__cos h2 strong, .privacitat__cos h3 strong, .privacitat__cos h2 u, .privacitat__cos h3 u { font-weight: inherit; text-decoration: none; }
.privacitat__cos ul, .privacitat__cos ol { margin: 0 0 1em; padding-left: 1.4em; }
.privacitat__cos li { margin-bottom: 0.4em; }
.privacitat__cos a { color: var(--taronja); text-underline-offset: 0.15em; }
.privacitat__cos strong { color: var(--fosc); }

.privacitat__peu {
  display: grid;
  gap: 10px;
  padding: 14px 24px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid #e4e4e6;
  background: var(--blanc);
}

.privacitat__avis {
  margin: 0;
  min-height: 1.3em;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.privacitat__boto {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 10px;
  background: var(--taronja);
  color: var(--blanc);
  font: 700 20px/1 "Blinker", system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.privacitat__boto:hover { background: #d4512b; }
.privacitat__boto:focus-visible { outline: 3px solid var(--taronja); outline-offset: 3px; }
.privacitat__boto:disabled { cursor: not-allowed; opacity: 0.4; }

@media (min-width: 640px) {
  .privacitat {
    width: min(92vw, 760px);
    height: auto;
    max-height: min(86vh, 900px);
    margin: auto;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  }
  .privacitat__capcalera { padding: 22px 24px 16px 32px; }
  .privacitat__titol { font-size: 26px; }
  .privacitat__cos { padding: 24px 32px 32px; font-size: 18px; }
  .privacitat__cos h2 { font-size: 20px; }
  .privacitat__cos h3 { font-size: 18px; }
  .privacitat__peu {
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 24px;
    padding: 16px 32px 20px;
  }
  .privacitat__boto { width: auto; min-width: 220px; padding-inline: 28px; }
}

.parany {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.estat {
  margin: 16px 0 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.estat:empty { display: none; }

/* ---------- Gràcies ---------- */

.gracies {
  flex: 1;
  background: var(--taronja);
  color: var(--blanc);
  outline: none;
  box-shadow: 0 -1px 0 var(--taronja);
}

.gracies__marc { padding-top: 72px; padding-bottom: 96px; }

.gracies__titol {
  margin: 0;
  font-size: clamp(64px, 18cqi, 120px);
  font-weight: 900;
  line-height: 0.9;
}

.gracies__text {
  margin: 20px 0 0;
  font-size: clamp(22px, 6cqi, 30px);
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- Escriptori: el disseny de 1440 ---------- */

@container pagina (min-width: 900px) {
  .marc {
    max-width: 1440px;
    padding-inline: calc(var(--u) * 211.4);
  }

  .hero__marc {
    height: calc(var(--u) * 627.75);
    min-height: 0;
    padding: 0;
    display: block;
  }

  .hero__lema {
    position: absolute;
    left: calc(var(--u) * 149);
    top: calc(var(--u) * 106.96);
    font-size: calc(var(--u) * 47.3);
    line-height: calc(var(--u) * 50.09);
  }

  .hero__titol {
    position: absolute;
    left: calc(var(--u) * 149.09);
    top: calc(var(--u) * 296.64);
    margin: 0;
    font-size: calc(var(--u) * 229.7);
    line-height: calc(var(--u) * 165.6);
  }

  .hero__foto {
    right: auto;
    bottom: auto;
    left: calc(var(--u) * 691.74);
    top: calc(var(--u) * -107.23);
    width: calc(var(--u) * 735);
    height: calc(var(--u) * 960);
    transform: matrix(1.008402, -0.0901028, 0.0901028, 1.008402, 0, 0);
    transform-origin: 0 0;
  }

  .enquesta__marc {
    padding-top: calc(var(--u) * 87.82);
    padding-bottom: calc(var(--u) * 84);
  }

  .deco--nube { top: calc(var(--u) * 39.25); right: auto; left: calc(var(--u) * 1027.3); width: calc(var(--u) * 333.1); }
  /* Els arcs toquen la vora de la finestra també per sobre de 1440 px. */
  .deco--arcs-dreta { top: calc(var(--u) * 582.25); right: min(0px, calc((1440px - 100cqi) / 2)); width: calc(var(--u) * 346); }
  .deco--arcs-esquerra { top: calc(var(--u) * 929.25); bottom: auto; left: min(0px, calc((1440px - 100cqi) / 2)); width: calc(var(--u) * 571); }

  /* Vel blanc al 39 % del disseny: invisible sobre blanc, aclareix la nube i els arcs. */
  .deco--velo {
    display: block;
    left: calc(var(--u) * 181.98);
    top: calc(var(--u) * 156.18);
    width: calc(var(--u) * 1063.2);
    height: calc(var(--u) * 1641.6);
    border-radius: calc(var(--u) * 70.25);
    background: rgb(255 255 255 / 0.39);
  }

  .enquesta__titol {
    margin: 0;
    font-size: calc(var(--u) * 52.4);
  }

  .pregunta__text {
    margin: 0;
    font-size: calc(var(--u) * 31.5);
    line-height: 1.2;
  }

  .camp {
    height: calc(var(--u) * 67.6);
    padding: 0 calc(var(--u) * 22);
    border-width: calc(var(--u) * 2);
    border-radius: calc(var(--u) * 12.8);
    font-size: calc(var(--u) * 26);
  }

  .pregunta--1 { margin-top: calc(var(--u) * 77.3); }
  .pregunta--1 .camp { margin-top: calc(var(--u) * 25.85); }
  .pregunta--2 { margin-top: calc(var(--u) * 31.47); }
  .pregunta--2 .camp { margin-top: calc(var(--u) * 27.53); height: calc(var(--u) * 67.5); }
  .pregunta--3 { margin-top: calc(var(--u) * 39.75); }
  .pregunta--4 { margin-top: calc(var(--u) * 37.91); }
  .pregunta--4 .camp { margin-top: calc(var(--u) * 30.35); }

  .opcions {
    grid-template-columns: calc(var(--u) * 542.9) 1fr;
    grid-template-rows: repeat(7, auto);
    grid-auto-flow: column;
    row-gap: calc(var(--u) * 12.19);
    column-gap: 0;
    padding-top: calc(var(--u) * 39.85);
  }

  .opcio { min-height: 0; }

  .opcio__casella {
    width: calc(var(--u) * 48.8);
    height: calc(var(--u) * 48.8);
    border-width: calc(var(--u) * 2);
    border-radius: calc(var(--u) * 10);
  }

  .opcio__text {
    position: relative;
    top: calc(var(--u) * -1.76);
    margin-left: calc(var(--u) * 40.7);
    font-size: calc(var(--u) * 31.1);
  }

  .opcions li:nth-child(n + 8) .opcio__text { margin-left: calc(var(--u) * 36.6); }

  .avis-maxim { font-size: max(16px, calc(var(--u) * 22)); }

  .contacte__marc {
    padding-top: calc(var(--u) * 55.12);
    padding-bottom: calc(var(--u) * 52.2);
  }

  .contacte__fila--1 { grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 32.7); }
  .contacte__fila--2 { grid-template-columns: 557.3fr 430.2fr; column-gap: calc(var(--u) * 29.2); }
  .contacte__fila + .contacte__fila { margin-top: calc(var(--u) * 36.76); }

  .dada__text {
    margin: 0;
    font-size: calc(var(--u) * 34.4);
  }

  .contacte__fila--1 .camp { margin-top: calc(var(--u) * 6.2); }
  .contacte__fila--2 .camp { margin-top: calc(var(--u) * 2.26); }

  .camp--blanc {
    height: calc(var(--u) * 65.6);
    border-radius: calc(var(--u) * 11.8);
  }

  .error { font-size: max(19px, calc(var(--u) * 22)); }

  .enviament {
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: calc(var(--u) * 32);
    margin-top: calc(var(--u) * 44);
  }

  .consentiment__label { font-size: max(19px, calc(var(--u) * 22)); }

  .boto-enviar {
    width: calc(var(--u) * 250);
    height: calc(var(--u) * 65.6);
    border-radius: calc(var(--u) * 11.8);
    font-size: calc(var(--u) * 30.4);
  }

  .estat { font-size: max(19px, calc(var(--u) * 22)); }

  .gracies__marc {
    padding-top: calc(var(--u) * 120);
    padding-bottom: calc(var(--u) * 140);
  }

  .gracies__titol { font-size: calc(var(--u) * 160); }
  .gracies__text { margin-top: calc(var(--u) * 28); font-size: calc(var(--u) * 41.7); }
}