:root{
  --legal-dark:#090D19;
  --legal-purple:#6265FE;
  --legal-lila:#B6BBFF;
  --legal-grey:#4B5563;
  --legal-line:#DFDFDF;
  --legal-white:#FFFFFF;
  --legal-container:1245px;
}

.legal-page,
.legal-page *{box-sizing:border-box}
.legal-page{background:var(--legal-white);color:var(--legal-dark)}
.legal-page main{display:block}
.legal-container{width:min(var(--legal-container),calc(100% - 48px));margin-inline:auto}

/* Capçalera: mateix component global, sense CTA tal com apareix al Figma. */
.legal-page .home-header__inner{grid-template-columns:1fr auto 1fr}
.legal-page .home-nav{grid-column:2}
.legal-page .home-menu-button{grid-column:3;justify-self:end}

/* Hero desktop */
.legal-hero{
  min-height:297px;
  display:flex;
  background:var(--legal-purple);
  color:#fff;
}
.legal-page--notice .legal-hero{background:var(--legal-dark)}
.legal-hero__inner{
  min-height:297px;
  padding:124px 0 58px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.legal-hero h1{
  max-width:820px;
  margin:0;
  color:#fff;
  font:600 60px/normal Montserrat,sans-serif;
  letter-spacing:-.04em;
}
.legal-hero__date{
  margin:0;
  color:#fff;
  font:400 20px/33px "Afacad Flux",sans-serif;
}
.legal-date--mobile{display:none}

/* Cos legal desktop */
.legal-content{padding:56px 0 57px}
.legal-sections{display:flex;flex-direction:column;gap:57px}
.legal-section{width:100%;max-width:100%}
.legal-section h2{
  margin:0 0 26px;
  color:var(--legal-dark);
  font:500 30px/normal Montserrat,sans-serif;
  letter-spacing:-.025em;
}
.legal-section__number{font-weight:600;color:var(--legal-purple)}
.legal-section p,
.legal-section li{
  color:#000;
  font:400 20px/normal "Afacad Flux",sans-serif;
}
.legal-section p{margin:0;text-align:justify}
.legal-section p+p{margin-top:15px}
.legal-section ul{margin:15px 0 0;padding-left:30px}
.legal-section li+li{margin-top:5px}
.legal-section strong{font-weight:500}
.legal-section a{color:inherit;text-decoration:none;text-underline-offset:4px}
.legal-section a:hover,
.legal-section a:focus-visible{color:var(--legal-purple);text-decoration:underline;outline:none}
.legal-details{display:grid;gap:5px;margin-top:15px}
.legal-details p{text-align:left}

/* Footer legal + franja corporativa inferior. */
.legal-page .home-footer{
  position:relative;
  border-top:1px solid var(--legal-line);
}
.legal-page .home-footer::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  background:linear-gradient(90deg,#6265FE 0%,#090D19 25%,#B6BBFF 50%,#CFE7FF 75%,#FFFD98 100%);
}

@media(max-width:720px){
  .legal-page .home-header__inner{grid-template-columns:1fr auto}
  .legal-page .home-nav{grid-column:auto}
  .legal-page .home-menu-button{grid-column:auto}
  .legal-container{width:calc(100% - 40px)}

  .legal-hero{min-height:223px;align-items:center}
  .legal-hero__inner{
    min-height:0;
    padding:0;
    justify-content:center;
    gap:20px;
  }
  .legal-hero h1{
    max-width:362px;
    font-size:35px;
    line-height:45px;
    letter-spacing:-.035em;
  }
  .legal-title-break{display:block}
  .legal-hero__date{font-size:14px;line-height:33px}
  .legal-date--desktop{display:none}
  .legal-date--mobile{display:inline}

  .legal-content{padding:40px 0}
  .legal-sections{gap:20px}
  .legal-section h2{
    min-height:60px;
    margin:0;
    display:flex;
    align-items:center;
    font-size:20px;
    line-height:1.15;
    letter-spacing:-.02em;
  }
  .legal-section p,
  .legal-section li{
    font-size:14px;
    line-height:normal;
  }
  .legal-section p{text-align:left}
  .legal-section p+p{margin-top:15px}
  .legal-section ul{margin-top:15px;padding-left:21px}
  .legal-details{gap:5px;margin-top:15px}
  .legal-page .home-footer{border-top:1px solid var(--legal-line)!important}
}

@media(max-width:380px){
  .legal-container{width:calc(100% - 40px)}
  .legal-hero h1{max-width:330px}
}

@media(prefers-reduced-motion:reduce){
  .legal-section a{transition:none!important}
}