:root {
  --c1:  rgb(0, 255, 255);
  --c2:  rgb(255, 0, 255);
  --c3:  rgb(255, 255, 0);
  --c4:  rgb(255, 0, 0);
  --c5:  rgb(0, 255, 0);
  --c6:  rgb(0, 0, 255);
  --c7:  rgb(0, 0, 64);
  --c8:  rgb(249, 182, 252);
  --c9:  rgb(255, 51, 51);
  --c10: rgb(250, 249, 242);
  --c11: rgb(251, 220, 144);
  --c12: rgb(143, 191, 170);

  --topbar-height: 100px;
  --font-body: 'Roboto', sans-serif;
  --col-text: var(--c7);

  /* Durada de la transició del site cap amunt */
  --intro-transition: 1500ms;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #000;
  font-family: var(--font-body);
  color: var(--col-text);
}

/* ── INTRO VÍDEO ──────────────────────────────────── */

.intro-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 9000;
  overflow: hidden;
}

.intro-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  background: #000;
}

/* Quan ja s'ha completat la transició, traiem el vídeo del DOM */
.intro-video.is-hidden {
  display: none;
}

/* ── SITE WRAPPER ────────────────────────────────────
   Durant la intro, el .site és una capa fixed que
   parteix de translateY(100%) (just sota del viewport)
   i puja fins a translateY(0) cobrint TOT el vídeo.
   Quan acaba la transició, traiem position:fixed perquè
   els elements interns position:fixed funcionin bé.
*/

.site {
  position: fixed;
  inset: 0;
  z-index: 9500; /* per damunt del vídeo */
  width: 100vw;
  height: 100vh;
  background: #fff;
  transform: translateY(100%);
  transition: transform var(--intro-transition) cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
  overflow: hidden;
}

/* Quan acaba el vídeo, el JS afegeix is-revealed al body */
body.is-revealed .site {
  transform: translateY(0);
}

/* Quan ja s'ha completat la transició, només traiem la transform. */
body.is-settled .site {
  transform: none;
  transition: none;
}

/* ── TOPBAR ──────────────────────────────────────── */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #fff;
  z-index: 100;
  align-items: center;
}

.topbar__col {
  display: flex;
  align-items: center;
}

.topbar__col--2 {
  justify-content: flex-start;
}

.topbar__col--3 {
  justify-content: space-between;
  padding-right: 16px;
}

.topbar__label {
  font-family: var(--font-body);
  font-size: clamp(11px, 1.26vw, 21px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--col-text);
  transform: translateY(12px);
}

.topbar__logo {
  color: var(--col-text);
  display: flex;
  align-items: center;
  cursor: pointer;
}

.topbar__logo img {
  height: 52px;
  width: auto;
  display: block;
}

/* ── GRID ────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: calc(100vh - var(--topbar-height));
  margin-top: var(--topbar-height);
  overflow: hidden;
  position: relative;
}

/* ── COLS ────────────────────────────────────────── */

.col {
  height: calc(100vh - var(--topbar-height));
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
}

.col::-webkit-scrollbar {
  display: none;
}

/* ── COL 1: SLIDES ───────────────────────────────── */

.col--1 {
  position: relative;
}

/* ── H1 SEO ────────────────────────────────────────
   "Coworking Girona" vertical, centrat verticalment
   a la dreta de la columna 1. És un h1 real al DOM
   (per SEO) però visualment camuflat: color crema
   (var --c10) sobre fons crema. Quan una slide té
   fons NO-crema (vermell --c9, groc --c11), el text
   apareix retallat sobre el color.
   
   Posicionament fixed perquè es mantingui ancorat al
   viewport mentre la columna 1 fa scroll intern. El
   z-index és mig (10): per sobre les slides però per
   sota del títol vertical "LA BASSA." (z 5000) i del
   botó Contacte (z 6000).
   
   La columna 1 ocupa el primer terç del viewport
   (left: 0 → 33.33vw). El situem a la dreta d'aquest
   terç amb un petit marge.
*/
.col1__h1 {
  position: fixed;
  top: 50%;
  left: calc(33.333vw - 32px); /* dreta de la col 1 amb marge */
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  /* Color crema: invisible sobre fons crema (--c10)
     que és el predominant. Apareix sobre fons --c9
     (vermell) i --c11 (groc). */
  color: var(--c10);
  /* Vertical: lletres rotades 90° a la dreta. La base
     queda a baix, el text llegit de baix a dalt és el
     que s'escriu en HTML. */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  z-index: 10;
  /* No interactiu: és pur SEO i decoració, no ha de
     captar clicks ni interferir amb les slides */
  pointer-events: none;
  user-select: none;
}

.col1__title {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  /* Ample limitat perquè no bloquegi clicks/scroll
     de les slides de col 1 */
  width: clamp(40px, 4.5vw, 70px);
  z-index: 5000;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: default;
  overflow: hidden;
  /* Deixem passar els clicks/scroll a través del contenidor,
     només les lletres animades són clicables (vegeu .col1__title-item) */
  pointer-events: none;
}

/* Contenidor que conté els dos exemplars apilats verticalment.
   El primer està al viewport visible, el segon està
   per sobre (fora de pantalla per dalt). Quan tot el
   conjunt baixa 100vh, el primer surt per baix i el
   segon ocupa la posició del primer. */
.col1__title-marquee {
  position: absolute;
  top: 0;
  left: 10px;
  width: 1.5em;
  height: 200vh;
  /* L'animació només s'aplica quan el body té la classe
     is-title-animating, que el JS afegeix amb retard
     personalitzat des del moment que la web comença a pujar */
  will-change: transform;
}

body.is-title-animating .col1__title-marquee {
  animation: marquee-vertical 13s linear infinite;
}

.col1__title-item {
  position: absolute;
  left: 0;
  font-family: var(--font-body);
  font-size: clamp(28px, 3.5vw, 50px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--col-text);
  mix-blend-mode: multiply;
  white-space: nowrap;
  /* Només les lletres animades són clicables */
  pointer-events: auto;
  cursor: pointer;
}

/* Segon exemplar: per sobre del primer, fora de pantalla per dalt */
.col1__title-item:nth-child(1) {
  top: calc(var(--topbar-height) + 30px);
}

/* Primer exemplar: a la posició visible inicial */
.col1__title-item:nth-child(2) {
  top: calc(100vh + var(--topbar-height) + 30px);
}

@keyframes marquee-vertical {
  /* Comença amb el primer exemplar visible (top: 100vh)
     i el segon fora de pantalla per dalt (top: 0).
     Els desplacem tots dos cap avall 100vh: el primer
     surt per baix, el segon arriba a la posició visible. */
  from { transform: translateY(-100vh); }
  to   { transform: translateY(0); }
}

/* Quan l'usuari prefereix moviment reduït, desactivem animació */
@media (prefers-reduced-motion: reduce) {
  .col1__title-marquee {
    animation: none;
    transform: translateY(-100vh);
  }
}

.slides {
  display: flex;
  flex-direction: column;
}

.slide {
  position: relative;
  min-height: calc(100vh - var(--topbar-height));
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 32px 28px 16px 56px;
  scroll-snap-align: start;
}

.slide__text {
  margin-bottom: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slide__text p,
.slide__text h2 {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.47vw, 21px);
  font-weight: 400;
  margin: 0;
  color: var(--col-text);
  line-height: 1.2;
}

.slide__text--single p,
.slide__text--single h2 {
  font-size: clamp(13px, 1.47vw, 21px);
}

.slide__quote {
  margin-top: 40px;
  align-self: flex-end;
  text-align: right;
  font-family: var(--font-body);
  font-size: clamp(11px, 1.33vw, 19px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--col-text);
  margin-bottom: 6px;
}

/* ── COL 2 & 3: IMATGES ──────────────────────────── */

.col--2,
.col--3 {
  background: #e8e8e8;
}

.col__images {
  display: flex;
  flex-direction: column;
}

.img-slide {
  min-height: calc(100vh - var(--topbar-height));
  width: 100%;
  overflow: hidden;
  scroll-snap-align: start;
}

.img-slide img {
  width: 100%;
  height: calc(100vh - var(--topbar-height));
  object-fit: cover;
  display: block;
}

/* ── PORTADA COMPARTIDA COL 2 + COL 3 ─────────────────
   La primera diapositiva de cada columna mostra la
   meitat corresponent de la mateixa imatge gran
   (portada_de_labassa.jpg), de manera que visualment
   sembla una única imatge travessant les dues columnes.
*/
.img-slide--portada-left,
.img-slide--portada-right {
  background-image: url('assets/portada_de_labassa.jpg');
  background-repeat: no-repeat;
  background-size: 200% 100%;
}

.img-slide--portada-left {
  background-position: left center;
}

.img-slide--portada-right {
  background-position: right center;
}

/* ── MÒBIL: amagat al desktop ───────────────────── */

.mobile-scroll {
  display: none;
}

.mobile-logo {
  display: none;
}

/* ── BOTÓ CONTACTE FIX ──────────────────────────── */

.contact-toggle {
  position: fixed;
  right: 16px;
  bottom: 26px;
  z-index: 6000;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--col-text);
  font-family: var(--font-body);
  font-size: clamp(13px, 1.47vw, 21px);
  font-weight: 300;
  line-height: 1.2;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  color: #fff;
  mix-blend-mode: difference;
}
.contact-toggle span {
  display: inline-block;
}

/* ── PANELL FORMULARI CONTACTE ────────────────────── */

.contact-panel {
  position: fixed;
  right: 0;
  bottom: 0;
  width: calc((100vw / 3) * 1.45);
  height: calc((100vh - var(--topbar-height)) / 2);
  background-color: var(--c8);
  color: var(--col-text);
  z-index: 5500;
  transform: translateY(100%);
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  overflow-y: auto;
  scrollbar-width: none;
}

.contact-panel::-webkit-scrollbar {
  display: none;
}

.contact-panel.is-open {
  transform: translateY(0);
}

.contact-panel__close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: var(--col-text);
  line-height: 0;
}

.contact-panel__inner {
  padding: 24px 28px 24px 28px;
  padding-right: 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-panel__title {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.26vw, 18px);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--col-text);
  text-transform: uppercase;
}

/* ── FORMULARI ──────────────────────────────────── */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-form__input {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 400;
  color: var(--col-text);
  background: transparent;
  border: 0;
  outline: 0;
  padding: 2px 0;
  width: 100%;
  resize: none;
}

.contact-form__input::placeholder {
  color: var(--col-text);
  opacity: 0.45;
}

.contact-form__textarea {
  min-height: 1.2em;
  overflow: hidden;
}

.contact-form__submit {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 500;
  color: var(--col-text);
  background: transparent;
  border: 0;
  padding: 2px 0;
  margin-top: 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── BLOC INFO ──────────────────────────────────── */

.contact-panel__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-panel__block {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--col-text);
}

.contact-panel__block a {
  color: inherit;
  text-decoration: none;
}

.contact-panel__block a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ════════════════════════════════════════════════════
   ════════════════ VERSIÓ MÒBIL ══════════════════════
   ════════════════════════════════════════════════════

   Concepte: "cinemàtic vertical"
   - Una sola columna que ocupa tot el viewport
   - Cada pantalla = 100vh amb scroll-snap obligatori
   - Alterna imatges (gegants) i slides de text
   - El títol "LA BASSA." vertical es manté fix amb
     mix-blend-mode multiply per crear signatura
   - El vídeo intro funciona igual
   - Botó de contacte: bottom-sheet a 100% d'ample
*/

@media (max-width: 768px) {

  :root {
    /* Sense topbar al mòbil → més espai vertical */
    --topbar-height: 0px;
  }

  /* ── ESTRATÈGIA D'SCROLL AL MÒBIL ──────────────────
     Volem dues coses que sembraven incompatibles:
     1) Que la barra URL es retiri amb el scroll (per
        veure les imatges a tota pantalla).
     2) Que cada secció encaixi al viewport sense glitch
        quan la barra apareix/desapareix.
     
     Solució: scroll programàtic dins d'un wrapper intern
     amb overflow:scroll. iOS Safari 15+ retira la barra
     URL quan detecta scroll significatiu dins d'un
     contenidor intern (no només al body). I com que
     controlem el scrollTop nosaltres (no el navegador),
     no hi ha conflicte amb scroll-snap durant la
     transició viewport.
     
     html/body queden bloquejats (sense scroll natiu).
     El scroll passa a .mobile-scroll. Cada .m-screen
     fa 100dvh i s'omple sempre l'espai visible real.
     La transició entre seccions s'anima amb JavaScript
     (touchstart/touchend).
     
     IMPORTANT: posicionament fixed del body només quan
     is-settled. Durant la intro mantenim el
     comportament del desktop (que ja funciona bé).
  */
  html, body {
    overflow: hidden;
    height: 100%;
    width: 100%;
  }

  body.is-settled {
    position: fixed;
    top: 0;
    left: 0;
  }

  /* ── .site al mòbil ───────────────────────────────
     Fixed durant la intro (mateix comportament que
     desktop). Quan acaba (is-settled), passa a ser
     un wrapper estàtic perquè el scroll passi al
     .mobile-scroll de sota.
  */
  body.is-settled .site {
    position: static;
    height: 100%;
    width: 100%;
    overflow: hidden;
    transform: none;
    transition: none;
  }

  /* Amaguem la topbar al mòbil. "Un espai. Moltes maneres."
     ja apareix com a primera pantalla de text del recorregut. */
  .topbar {
    display: none;
  }

  .grid {
    display: block;
    height: 100%;
    margin-top: 0;
    overflow: hidden;
  }

  .col {
    display: none;
  }

  /* H1 al mòbil: visualment ocult però present al DOM
     per SEO mobile-first. Tècnica estàndard de "visually
     hidden" — Google ho indexa exactament igual que si
     fos visible. */
  .col1__h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    /* sobreescrivim les regles del desktop */
    top: auto;
    left: auto;
    transform: none;
    writing-mode: horizontal-tb;
  }

  /* Però mantenim el títol vertical "LA BASSA." amb el seu marquee */
  .col1__title {
    width: clamp(36px, 12vw, 60px);
    z-index: 5000;
    /* IMPORTANT: position:fixed respecte al viewport, no
       respecte a cap containing block. Mentre la intro
       puja, .site té transform → això fa de containing
       block. Però quan is-settled, .site ja no té transform
       i el fixed és respecte al viewport real. */
  }

  .col1__title-item {
    font-size: clamp(26px, 7vw, 40px);
  }

  /* Recol·loquem el marquee perquè ara la topbar no existeix */
  .col1__title-item:nth-child(1) {
    top: 24px;
  }

  .col1__title-item:nth-child(2) {
    top: calc(100dvh + 24px);
  }

  /* ── WRAPPER MÒBIL: SCROLL CONTROLAT ─────────────
     Aquest és el scroll-container. JavaScript anima el
     seu scrollTop quan l'usuari fa swipe. iOS Safari
     veu el scrollTop canviar i retira la barra URL.
     
     scroll-snap-type NO s'aplica aquí: el snap el fem
     a mà des de JS, així evitem que el navegador re-
     calculi els punts d'ancoratge quan canvia el
     viewport (que és el que provoca el "salt").
     
     overscroll-behavior: contain evita el "rebot"
     d'iOS i que el scroll passi al body.
  */
  .mobile-scroll {
    display: block;
    width: 100vw;
    height: 100dvh;
    height: 100svh;     /* fallback */
    overflow-y: scroll;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
  }

  .mobile-scroll::-webkit-scrollbar {
    display: none;
  }

  /* Cada pantalla = viewport real visible (dinàmic).
     dvh canvia quan la barra URL apareix/desapareix,
     però com que NOSALTRES controlem el scroll i no
     fem servir scroll-snap natiu, el canvi no afecta
     la posició actual ni provoca salts. */
  .m-screen {
    width: 100vw;
    height: 100dvh;
    height: 100svh;     /* fallback per navegadors sense dvh */
    position: relative;
    overflow: hidden;
  }

  /* Quan dvh està disponible, sobrescriu. Aquesta
     duplicació serveix com a override perquè en
     navegadors moderns dvh guanyi. */
  @supports (height: 100dvh) {
    .mobile-scroll { height: 100dvh; }
    .m-screen { height: 100dvh; }
  }

  /* Pantalles d'imatge: imatge a tota pantalla amb cover */
  .m-screen--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Portada: versió específica per a mòbil (vertical/recadrada),
     diferent del desktop que fa servir portada_de_labassa.jpg
     a tota amplada partint-la entre col 2 i col 3. */
  .m-screen--portada {
    background-image: url('assets/portada_de_labassa_mobile.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  /* Pantalles de text: fons de color + text alineat */
  .m-screen--text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    /* Padding generós:
       - Esquerra (60px): espai per al títol vertical "LA BASSA."
       - Dreta (60px): espai reservat al botó "Contacte." vertical
       - Avall (90px): espai inferior per evitar solapament amb "Contacte."
       - Dalt (32px): respiració superior */
    padding: 32px 60px 90px 60px;
  }

  .m-screen__text-content {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Limitem amplada perquè el text no envaeixi la franja dreta
       on hi ha el botó "Contacte." vertical */
    max-width: 100%;
  }

  /* Variant centrada per la portada de text "Un espai. Moltes maneres." */
  .m-screen__text-content--center {
    text-align: center;
    align-self: center;
    margin: auto 0;
    flex: 1;
    justify-content: center;
  }

  .m-screen--text:has(.m-screen__text-content--center) {
    align-items: center;
    justify-content: center;
    /* La portada centrada no necessita evitar la zona del Contacte
       perquè el text està al centre, lluny del botó */
    padding: 32px 60px 32px 60px;
  }

  /* Variant per a frases curtes single-line */
  .m-screen__text-content--single {
    align-self: flex-end;
    margin: auto 0;
    flex: 1;
    justify-content: center;
    display: flex;
    flex-direction: column;
  }

  .m-screen--text:has(.m-screen__text-content--single) {
    justify-content: center;
  }

  .m-screen__text-content p,
  .m-screen__text-content h2 {
    font-family: var(--font-body);
    font-size: clamp(20px, 5.5vw, 32px);
    font-weight: 400;
    line-height: 1.25;
    margin: 0;
    color: var(--col-text);
  }

  /* "Un espai. Moltes maneres." més gran encara */
  .m-screen__big {
    font-size: clamp(36px, 11vw, 64px) !important;
    line-height: 1.1 !important;
    font-weight: 400;
  }

  .m-screen__quote {
    margin-top: 28px;
    align-self: flex-end;
    text-align: right;
    font-family: var(--font-body);
    font-size: clamp(15px, 4vw, 22px);
    font-weight: 300;
    line-height: 1.2;
    color: var(--col-text);
    margin-bottom: 0;
  }

  /* ── LOGO FIX MÒBIL ───────────────────────────────
     Signatura persistent a dalt a la dreta. Apareix
     sobre totes les pantalles (text i imatge) i fa
     servir mix-blend-mode multiply per integrar-se
     amb els fons clars. Sobre imatges fosques caldria
     una versió blanca; per ara amb multiply queda
     suficientment integrat. Clicable per recarregar.
  */
  .mobile-logo {
    display: block;
    position: fixed;
    top: 18px;
    right: 14px;
    z-index: 5500;
    cursor: pointer;
    /* mix-blend-mode: multiply fa que el logo blau es
       mantingui llegible sobre fons clars i s'integri
       (es fa més fosc) sobre imatges */
    mix-blend-mode: multiply;
    pointer-events: auto;
  }

  .mobile-logo img {
    height: 38px;
    width: auto;
    display: block;
  }

  /* ── BOTÓ CONTACTE MÒBIL ──────────────────────────
     Al desktop fem servir mix-blend-mode: difference per
     adaptar el color al fons. Al mòbil ho desactivem
     perquè:
     1) El canvi de stacking context (.site passa a static
        en mode is-settled) pot trencar el mix-blend.
     2) Sobre imatges molt variades el difference dona
        resultats imprevisibles.
     3) Volem garantir que el botó es vegi SEMPRE.
     
     Solució: color blau marí sòlid (igual que la resta
     de tipografia de la web), i amb z-index alt per
     assegurar que queda sobre qualsevol contingut.
     
     position:fixed bottom amb safe-area-inset per
     respectar dispositius amb notch.
  */
  .contact-toggle {
    right: 10px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    font-size: 15px;
    color: var(--col-text);
    mix-blend-mode: normal;
    z-index: 6000;
  }

  /* També el logo: respectem la safe-area del notch superior */
  .mobile-logo {
    top: calc(18px + env(safe-area-inset-top, 0px));
  }

  /* ── PANELL CONTACTE MÒBIL: bottom-sheet 100% ──── */
  .contact-panel {
    width: 100vw;
    height: auto;
    max-height: 80vh;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  .contact-panel__inner {
    padding: 28px 24px 32px 24px;
    padding-right: 60px;
    gap: 24px;
  }

  .contact-panel__title {
    font-size: 16px;
  }

  .contact-form__input,
  .contact-form__submit,
  .contact-panel__block {
    font-size: 16px; /* 16px evita el zoom automàtic a iOS al fer focus */
  }

  /* Al mòbil, el lock del scroll del body quan el panell està obert.
     Es gestiona via classe addicional si volem evitar scroll de fons. */
}

/* ── MÒBIL EN LANDSCAPE ───────────────────────────
   En orientació horitzontal mantenim la versió desktop
   si l'ample ho permet. Si és un mòbil en landscape
   amb poca alçada, mantenim el mòbil però fem servir
   100svh per evitar problemes amb barres dinàmiques.
*/
@media (max-height: 480px) and (orientation: landscape) {
  .m-screen {
    height: 100svh;
  }
}