.v20-centre { overflow: hidden; }

.v20-centre-hero {
  padding-block: var(--section-y);
  background: var(--lt-crema);
}

.v20-centre-hero__grid {
  display: grid;
  align-items: center;
  gap: var(--sp-7);
}

.v20-centre-hero h1 { max-width: 12ch; }
.v20-centre-lead { max-width: 63ch; margin: var(--sp-5) 0 0; font-size: var(--fs-body-lg); }
.v20-centre-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

@media (max-width: 430px) {
  .v20-centre-actions { display: grid; }
  .v20-centre-actions .v20-button { width: 100%; }
}

.v20-centre-hero__media {
  display: block;
  overflow: hidden;
  border: var(--bw-frame);
  border-radius: var(--r-media);
  box-shadow: var(--shadow-raised);
}

.v20-centre-hero__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.v20-centre-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--bw-frame);
  background: var(--lt-blanco);
}

.v20-centre-field__band {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  color: var(--lt-blanco);
}

.v20-centre-field__band span {
  writing-mode: horizontal-tb;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.v20-centre-field__band--orange { background: var(--lt-marigold); color: var(--lt-tinta); }
.v20-centre-field__band--burgundy { background: var(--lt-rouge); }

.v20-centre-field__body { padding: var(--section-y) var(--gutter); }
.v20-centre-field__body h2 { max-width: 17ch; }
.v20-centre-field__body > p { max-width: 70ch; margin: var(--sp-5) 0 0; font-size: var(--fs-body-lg); }
.v20-centre-field__rail { display: none; }
.v20-centre-field__mobile-stat { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; width: fit-content; padding: var(--sp-3) var(--sp-4); border: var(--bw-frame); border-radius: var(--r-card); background: var(--lt-crema-deep); }
.v20-centre-field__mobile-stat strong { font-family: var(--font-display); font-size: var(--fs-card); }
.v20-centre-field__mobile-stat span { color: var(--lt-ink-soft); font-size: var(--fs-caption); }

.v20-centre-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}

.v20-centre-times li { padding: var(--sp-4); border: var(--bw-frame); border-radius: var(--r-card); background: var(--lt-crema); }
.v20-centre-times strong { display: block; font-family: var(--font-display); font-size: var(--fs-card); letter-spacing: 0.05em; }
.v20-centre-times span { display: block; color: var(--lt-ink-soft); font-size: var(--fs-caption); }

.v20-centre-faq { padding-block: var(--section-y); border-top: var(--bw-frame); background: var(--lt-crema-deep); }
.v20-centre-faq__grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.v20-centre-faq details { padding: var(--sp-5); border: var(--bw-frame); border-radius: var(--r-card); background: var(--lt-blanco); }
.v20-centre-faq summary { position: relative; padding-right: 2.75rem; cursor: pointer; list-style: none; }
.v20-centre-faq summary::-webkit-details-marker { display: none; }
.v20-centre-faq summary span::before,
.v20-centre-faq summary span::after { position: absolute; top: 50%; right: .35rem; width: 18px; height: 2px; background: var(--lt-rosa-deep); content: ""; }
.v20-centre-faq summary span::after { transform: rotate(90deg); }
.v20-centre-faq details[open] summary span::after { transform: none; }
.v20-centre-faq summary { cursor: pointer; font-weight: 700; }
.v20-centre-faq details p { margin: var(--sp-4) 0 0; color: var(--lt-ink-soft); }

@media (min-width: 768px) {
  .v20-centre-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr); }
  .v20-centre-field { grid-template-columns: 4.5rem minmax(0, 1fr) minmax(13rem, 22vw); }
  .v20-centre-field__band span { writing-mode: vertical-rl; transform: rotate(180deg); }
  .v20-centre-field__body { padding-inline: clamp(2rem, 5vw, 6rem); }
  .v20-centre-field__rail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-6);
    border-left: var(--bw-frame);
    background: var(--lt-crema-deep);
  }
  .v20-centre-field__mobile-stat { display: none; }
  .v20-centre-field__rail strong { max-width: 100%; font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 2rem); letter-spacing: 0.03em; line-height: 1.2; }
  .v20-centre-field__rail span { margin-top: var(--sp-3); color: var(--lt-ink-soft); }
  .v20-centre-field--reverse .v20-centre-field__rail { background: var(--lt-marigold-bright); }
  .v20-centre-field--reverse .v20-centre-field__rail strong,
  .v20-centre-field--reverse .v20-centre-field__rail span { color: var(--lt-tinta); }
  .v20-centre-times { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v20-centre-faq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .v20-centre-field { grid-template-columns: 4.5rem minmax(0, 70rem) minmax(13rem, 18rem); justify-content: center; }
}