/* =========================================================
   NTO Boat Tours - Locandina A5 (148x210 mm)
   Stile "volantino turistico moderno" full-bleed:
   foto hero a tutta pagina, tipografia sans bold gigante,
   overlay navy controllato, box trust + QR/CTA prominenti.
   ========================================================= */

:root {
  /* ---------- Palette (ispirata alle foto: acqua turchese del Salento + gold del gommone) ---------- */
  --ink:        #07182A;   /* navy profondo, leggermente piu' saturo */
  --ink-soft:   #0F2A40;   /* navy con un tocco di teal */
  --sea-deep:   #0A8A8E;   /* turchese scuro, ombre dell'acqua */
  --sea:        #14B8B0;   /* turchese pieno, acqua media */
  --sea-light:  #2BD9C9;   /* turchese acceso, acqua in luce */
  --sea-soft:   #7BF0DD;   /* aqua brillante per accenti chiari */
  --sky:        #1E8FD4;   /* azzurro cielo per varianti */
  --terra:      #F4B41A;   /* gold vivido (trim gommone) */
  --terra-deep: #D69010;   /* gold piu' caldo per profondita' */
  --paper:      #F4EBD9;
  --white:      #FFFFFF;
  --check:      #2BD9C9;   /* spunte turchesi acceso */

  /* ---------- Geometria ---------- */
  --page-w: 148mm;
  --page-h: 210mm;
  --gutter: 8mm;

  /* ---------- Shadows ---------- */
  --shadow-card: 0 1.2mm 3mm rgba(0, 0, 0, 0.35);
  --shadow-page: 0 8mm 32mm rgba(0, 0, 0, 0.22);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 18px 12px;
  background:
    radial-gradient(1200px 600px at 50% -10%, #d7ddd0 0%, transparent 60%),
    linear-gradient(180deg, #ebe7dc 0%, #d8d4c8 100%);
}

/* ---------- Controls (visibili solo a video) ---------- */
.controls {
  position: fixed;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  z-index: 100;
}
.controls button {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(7, 24, 42, 0.3);
  transition: transform 0.15s ease, background 0.15s ease;
}
.controls button:hover {
  transform: translateY(-1px);
  background: var(--ink-soft);
}
.controls .lang-toggle {
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
}
.controls .lang-toggle:hover {
  background: var(--ink);
  color: var(--white);
}

/* ---------- Container locandina ---------- */
.locandina {
  width: var(--page-w);
  height: var(--page-h);
  position: relative;
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-page);
  border-radius: 1mm;
}

/* =========================================================
   Foto hero full-bleed + overlay multilivello
   ========================================================= */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
  filter: saturate(1.18) contrast(1.06);
}

/* Overlay scuro che cresce verso il basso, e leggermente piu' scuro a sx.
   Il valore centrale e' tenuto basso per far emergere il turchese dell'acqua. */
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(7, 24, 42, 0.48) 0%,
      rgba(7, 24, 42, 0.18) 18%,
      rgba(7, 24, 42, 0.0) 35%,
      rgba(7, 24, 42, 0.18) 60%,
      rgba(7, 24, 42, 0.92) 88%,
      rgba(7, 24, 42, 0.98) 100%
    ),
    linear-gradient(
      90deg,
      rgba(7, 24, 42, 0.35) 0%,
      rgba(7, 24, 42, 0) 45%,
      rgba(7, 24, 42, 0) 100%
    );
  z-index: 1;
  pointer-events: none;
}

/* =========================================================
   Logo top-center
   ========================================================= */
.brand {
  position: absolute;
  top: 5mm;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}
.logo-main {
  height: 9mm;
  width: auto;
  display: block;
  filter: drop-shadow(0 0.4mm 1mm rgba(0, 0, 0, 0.6));
}

.map-cta-top {
  position: absolute;
  top: 5mm;
  right: var(--gutter);
  z-index: 6;
}
.map-cta-top-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1mm;
  text-decoration: none;
  color: var(--white);
}
.map-cta-top-label {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  /* 2.5mm: micro-label uppercase d'angolo, allineata con la scala
     delle altre label tracked (.routes-private 2.4mm, .ci-text small
     2.6mm). Cresciuta da 2.1mm che era sotto soglia di leggibilita'
     in stampa A5 ed era la label piu' piccola di tutta la locandina. */
  font-size: 2.5mm;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 0.3mm 0.8mm rgba(0, 0, 0, 0.6);
}
.map-qr-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 1.2mm;
  box-shadow: 0 0.5mm 1.6mm rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
.map-qr-wrap-top {
  /* 18mm: cresciuto da 16mm per migliorare scansione in stampa A5
     e bilanciare meglio il logo a sinistra. Resta sotto il QR di
     prenotazione (25mm, CTA primaria) con rapporto 18:25 = 72%. */
  width: 18mm;
  height: 18mm;
  padding: 0.8mm;
}
.map-qr {
  width: 100%;
  height: 100%;
  display: block;
}
.map-qr-pin {
  position: absolute;
  right: -1.8mm;
  bottom: -1.8mm;
  /* 5.6mm: scalato proporzionalmente al QR (era 5mm su 16mm,
     stesso rapporto pin/QR ~31% con QR a 18mm). */
  width: 5.6mm;
  height: 5.6mm;
  border-radius: 50%;
  background: var(--sea-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.3mm 1mm rgba(0, 0, 0, 0.45);
  color: var(--ink);
}
.map-qr-pin svg {
  width: 3.6mm;
  height: 3.6mm;
}

/* =========================================================
   Headline: titolo display + script + subtitle + onde
   ========================================================= */
.headline {
  position: absolute;
  top: 17mm;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 5;
  color: var(--white);
}
.display-title {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-shadow:
    0 0.4mm 1.6mm rgba(0, 0, 0, 0.6),
    0 0 8mm rgba(0, 0, 0, 0.3);
}
.dt-small {
  display: block;
  font-weight: 700;
  font-size: 5.5mm;
  letter-spacing: 0.02em;
  margin-bottom: 1mm;
}
.dt-huge {
  display: block;
  font-weight: 900;
  font-size: 14.5mm;
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.dt-accent {
  color: var(--sea-soft);
  text-shadow:
    0 0.4mm 1.6mm rgba(0, 0, 0, 0.6),
    0 0 6mm rgba(43, 217, 201, 0.55);
}

.script-tagline {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 5.5mm;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  margin-top: 2mm;
  text-shadow:
    0 0.4mm 1.6mm rgba(0, 0, 0, 0.6),
    0 0 8mm rgba(0, 0, 0, 0.3);
}

.hero-sub {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 3.5mm;
  line-height: 1.35;
  color: #fff;
  margin-top: 3mm;
  text-shadow:
    0 0 0.6mm rgba(0, 0, 0, 0.95),
    0 0 1.6mm rgba(0, 0, 0, 0.8),
    0 0.4mm 1.4mm rgba(0, 0, 0, 0.6);
}

.waves {
  display: block;
  margin-top: 2mm;
  width: 32mm;
  height: 3mm;
  color: var(--sea-light);
  opacity: 0.85;
}

/* =========================================================
   4 plus icons (vantaggi comuni a tutte le escursioni)
   - Spostate in alto a 78mm: la fascia 100-132mm ospita la
     nuova sezione .routes (3 mini-card + riga famiglie),
     quindi la grid icone deve liberare quello spazio.
   - Sono i VANTAGGI condivisi da tutte le rotte: tour costiero,
     soste bagno, aperitivo, gruppi max 10. Stanno PRIMA della
     scelta di rotta e fanno da "manifesto" del servizio.
   ========================================================= */
.plus-grid {
  position: absolute;
  /* top 76mm (invariato). La griglia con 4 icone (12mm) + label
     (.plus-label 2.8mm * line-height 1.2) chiude a ~92mm.
     RESPIRO verso "LE NOSTRE ESCURSIONI": la sezione .routes e' stata
     spostata da top:94mm a top:97mm, quindi il gap netto fra plus-grid
     e titolo "LE NOSTRE ESCURSIONI" passa da ~2mm a ~5mm. */
  top: 76mm;
  left: var(--gutter);
  right: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3mm;
  z-index: 5;
  color: var(--white);
}
.plus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6mm;
  text-align: center;
}
.plus-icon {
  width: 12mm;
  height: 12mm;
  color: var(--white);
  filter:
    drop-shadow(0 0.3mm 1mm rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 0.4mm rgba(0, 0, 0, 0.55));
}
.plus-label {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  /* 2.8mm (~7.94pt ≈ 8pt): label sotto le 4 plus-icon, cresciuta da
     2.5mm per restare sopra soglia leggibilita' in stampa A5. */
  font-size: 2.8mm;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  /* "outline" via text-shadow: 4 ombre cardinali nere a corto raggio
     creano un contorno netto attorno al testo bianco, leggibile anche
     se finisce su zone chiare della foto. */
  text-shadow:
    0 0 0.5mm rgba(0, 0, 0, 0.95),
    0.25mm 0 0.4mm rgba(0, 0, 0, 0.9),
   -0.25mm 0 0.4mm rgba(0, 0, 0, 0.9),
    0 0.25mm 0.4mm rgba(0, 0, 0, 0.9),
    0 -0.25mm 0.4mm rgba(0, 0, 0, 0.9),
    0 0.5mm 1.4mm rgba(0, 0, 0, 0.55);
  max-width: 26mm;
}

/* =========================================================
   LE NOSTRE ESCURSIONI (3 mini-card)
   - Posizione: fascia 100-132mm, sotto plus-grid e sopra le card.
   - Layout: grid 3 colonne 1fr, le card si allineano in altezza
     grazie al grid (la card SUD ha 5 spot e impone l'altezza,
     le altre due si adeguano con `align-self: stretch`).
   - Stile card: navy semi-trasparente con bordo bianco appena
     percettibile + bordo SUPERIORE gold spesso (riga "decorativa"
     che separa la rotta dal contenuto sotto, stessa famiglia
     visiva delle altre eyebrow rule gold).
   - Tag NORD/SUD: pillola gold piena, ink dentro per massimo
     contrasto. Riconoscibile come "label di area" a colpo d'occhio.
   - Spots: bullet "·" gold, testo bianco. Niente liste numerate
     o bullet pesanti che appesantirebbero a queste dimensioni.
   - Times footer: separato da una linea dotted bianca,
     colore turchese chiaro = "info temporale" (stessa
     gerarchia cromatica delle onde nell'hero).
   - Family banner: pillola con bordo gold, "Famiglie:" in
     gold per separare la label dal payload.
   ========================================================= */
.routes {
  position: absolute;
  /* top 97mm + height 55mm = banda fissa 97-152mm. La banda parte 5mm
     sotto il bordo inferiore della .plus-grid (~92mm) per dare respiro
     visivo verso il titolo "LE NOSTRE ESCURSIONI", e chiude esattamente
     dove inizia la .info-card sotto (top:152mm).
     Height ridotta da 58 a 55mm cedendo 3mm di banda alla .info-card
     sotto (ora 43mm invece di 40mm) per dare piu' altezza alla foto del
     gommone (hero) che risultava brutalmente tagliata. Resto compensato
     comprimendo ~2mm di margin/padding interni (routes-head, routes-mode,
     route-card, routes-family) per non sacrificare il centering.
     I figli (routes-head, routes-mode, routes-grid, routes-family)
     vengono CENTRATI verticalmente nella banda via flex column +
     justify-content:center: cosi' l'eventuale spazio residuo (ora banda
     55mm vs contenuto ~48mm = ~7mm slack) viene distribuito META' SOPRA
     e META' SOTTO, invece di accumularsi tutto in fondo (cioe' il
     vecchio comportamento top-aligned che faceva sembrare la sezione
     "spostata in alto").
     Per ospitare i font cresciuti (route-spots, routes-mode,
     routes-family, route-tag/meta/times tutti >= ~8pt per stampa A5)
     sono stati ridotti padding/margin interni di routes-head, routes-mode,
     route-card, route-spots gap, route-spots line-height (1.2 -> 1.15)
     e routes-family margin. */
  top: 97mm;
  left: var(--gutter);
  right: var(--gutter);
  height: 55mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* z-index 7: sale SOPRA a TUTTO il blocco card sotto (.info-card a z=5
     e .card-qr a z=6) cosi' la pillola "Famiglie" in fondo alla sezione
     e' SEMPRE visibile, anche se i contenuti dovessero crescere e
     andare a coprire parzialmente i bordi superiori di info-card o
     card-qr. Prima era z-index 6 = stesso livello di card-qr, e la
     pillola FAMIGLIE veniva tagliata sulla destra perche' card-qr
     (piu' avanti in DOM) vinceva nel medesimo stacking level.
     La .qr-arrow (z-index 7 nel root) e' a destra estrema e non si
     sovrappone alla pillola FAMIGLIE centrata. */
  z-index: 7;
  color: var(--white);
}

.routes-head {
  position: relative;
  /* margin-bottom 1.6mm: simmetrico ai gap chip-turchese<->card (1.6mm)
     e card<->chip-gold (1.6mm). Cosi' la distanza visiva fra la riga
     "3 rotte · Costa Nord & Sud" e la chip turchese eguaglia quella
     fra la chip turchese e il bordo superiore delle route-card.
     Effetto collaterale "tirare su" ottenuto via justify-content:center
     della sezione .routes: aumentando questo margin il contenuto totale
     cresce di +1.2mm, lo slack si ridistribuisce per meta' sopra e
     meta' sotto, quindi la riga del titolo + chip gold "Anche tour
     privati" sale di ~0.6mm rispetto a prima. */
  padding-top: 0.6mm;
  margin-bottom: 1.6mm;
  display: flex;
  flex-direction: column;
  gap: 0.6mm;
}
.routes-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 7mm;
  height: 0.5mm;
  background: var(--terra);
}
/* Prima riga del header: titolo a sx + badge "Anche tour privati su
   richiesta" a dx, baseline-aligned. Il badge e' un piccolo pill gold
   outline che dichiara l'opzione "privato" gia' qui in apertura. */
.routes-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2mm;
}
.routes-title {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: 3.1mm;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow:
    0 0 0.6mm rgba(0, 0, 0, 0.95),
    0 0.3mm 0.9mm rgba(0, 0, 0, 0.65);
}
.routes-private-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.6mm 1.8mm;
  background: rgba(244, 180, 26, 0.18);
  /* glassmorphism: sfocatura del contenuto retrostante (foto hero) per
     dare profondita' alla pillola pur restando dichiaratamente
     semi-trasparente. -webkit-backdrop-filter incluso per Safari. */
  -webkit-backdrop-filter: blur(1.6mm) saturate(1.1);
  backdrop-filter: blur(1.6mm) saturate(1.1);
  border: 0.3mm solid var(--terra);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  /* 2.4mm (~6.8pt): badge "Anche tour privati su richiesta" - testo
     ausiliario nella stessa riga del titolo "LE NOSTRE ESCURSIONI",
     deve stare nella larghezza disponibile dell'header (no wrap).
     Cresciuto da 1.95mm pur restando sotto la soglia degli 8pt: il
     contenuto principale (tappe, prezzi, orari delle card) ha priorita'
     sulla pillola gold di servizio. */
  font-size: 2.4mm;
  letter-spacing: 0.03em;
  color: var(--terra);
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 0 0.5mm rgba(0, 0, 0, 0.75);
  box-shadow: 0 0.3mm 0.8mm rgba(0, 0, 0, 0.25);
}
.routes-sub {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  /* 2.6mm (~7.4pt): sotto-titolo "3 rotte · Costa Nord & Sud" - testo
     informativo secondario, cresciuto da 2.3mm. Vicino a 8pt ma non
     critico (l'info e' ribadita visivamente dalle 3 card sotto). */
  font-size: 2.6mm;
  letter-spacing: 0.04em;
  color: var(--sea-soft);
  text-shadow: 0 0 0.5mm rgba(0, 0, 0, 0.85);
}

/* Modalita' di partecipazione: pillola turchese sottile (UNA sola
   riga) tra l'header e le card. Dichiara in modo asciutto:
     - la capacita' del gommone: "Da 2 a 10 persone"
     - le due modalita' di fruizione: "privata o condivisa"
   Coerenza cromatica: gold = sconto/famiglie (banner sotto),
   turchese = modalita' di servizio (questa pillola).
   Stile del separatore "·" e del peso testuale in linea con gli altri
   separatori della locandina ("3 rotte · Costa Nord & Sud", "09:00 ·
   12:30"). UNA sola riga = altezza compatta: la sezione .routes resta
   nel budget e il banner "Famiglie" non collide con la .info-card
   ancorata a top:155mm.
   Gerarchia visiva:
     - <b> sui numeri (2 / 10): peso 800, turchese chiaro, fatti
       concreti e immediatamente leggibili
     - <strong> sulle due modalita': peso 900 uppercase con tracking,
       turchese soft, sono il cardine della scelta */
/* Stessa "famiglia di tag" del badge gold "Anche tour privati su
   richiesta" (.routes-private-badge): fondo tinta al 18%, bordo
   pieno tinta, testo nella stessa tinta = tag monocromatico,
   contenuto, leggero. Cambia solo la TINTA:
     - .routes-private-badge -> gold (--terra)  = opzione "privata"
     - .routes-mode          -> turchese (--sea-soft) = modalita' di
                                                       servizio
   Stessa altezza del badge gold (~4mm) = la sezione .routes non
   cresce e la "Famiglie" sotto resta sopra la quota 155mm (dove la
   .info-card e' ancorata in absolute).
   display:flex + margin:0 auto + width:fit-content = pillola
   realmente centrata orizzontalmente sotto l'header. */
.routes-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 1.4mm;
  /* margin-bottom 1.6mm: gap pulito tra la chip turchese e il bordo
     superiore delle 3 route-card sotto. Restituisce respiro dopo la
     fase di forte compressione (0.4mm) che avvicinava troppo la chip
     alle card; la sezione .routes ha ~7mm di slack da justify-content:
     center, quindi il costo verticale (~1.2mm extra) viene assorbito
     senza far esondare nulla verso la .info-card. */
  margin: 0 auto 1.6mm;
  /* padding leggermente piu' generoso (0.7 vert / 2.6 oriz) per
     bilanciare il testo cresciuto a 2.8mm. */
  padding: 0.7mm 2.6mm;
  /* Fondo scuro navy (stessa tinta delle route-card sotto, rgba 7,24,42)
     a 0.55 di alpha: piu' scuro del precedente velo aqua trasparente
     (rgba(123,240,221,0.18)) per garantire contrasto contro le zone
     chiare della foto hero (cielo/riflessi acqua) e far emergere
     nettamente sia il testo aqua --sea-soft che il bordo aqua. Mantengo
     glassmorphism (backdrop blur) per coerenza con le altre pillole. */
  background: rgba(7, 24, 42, 0.55);
  -webkit-backdrop-filter: blur(1.6mm) saturate(1.1);
  backdrop-filter: blur(1.6mm) saturate(1.1);
  border: 0.3mm solid var(--sea-soft);
  border-radius: 999px;
  box-shadow: 0 0.3mm 0.8mm rgba(0, 0, 0, 0.3);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  /* 2.8mm (~7.94pt ≈ 8pt): elemento esplicitamente richiesto per la
     leggibilita' in stampa A5. Cresciuto da 1.95mm; e' la pillola
     "Da 2 a 10 persone · PRIVATA o CONDIVISA" che dichiara modalita'
     di partecipazione e capacita' del gommone. */
  font-size: 2.8mm;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: var(--sea-soft);
  text-align: center;
  /* text-shadow un filo piu' marcato (alpha 0.9, raggio 0.6mm) per
     "incidere" le glifi aqua chiare sul fondo scuro = nitidezza in stampa. */
  text-shadow: 0 0 0.6mm rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  width: fit-content;
  max-width: 100%;
}
/* Numeri "2" e "10": stessa tinta, peso 800 = micro-evidenza
   senza rompere la monocromia del tag. */
.routes-mode b {
  font-style: normal;
  font-weight: 800;
}
/* Modalita' "privata" / "condivisa": uppercase tracked, peso 800.
   Le due parole-chiave restano nella stessa tinta turchese ma
   spiccano per maiuscolo + spacing, esattamente la stessa logica
   con cui il badge gold usa il maiuscolo per emergere. */
.routes-mode strong {
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.routes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4mm;
  align-items: stretch;
}

.route-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* gap 0.5mm (era 0.9): comprime fra header/spots/times per liberare
     budget verticale a favore dei font cresciuti (priorita' assoluta
     in stampa A5: zona/durata/prezzo/orari ben leggibili). */
  gap: 0.5mm;
  /* padding 0.7mm / 2mm / 0.7mm (era 1.8 / 2.4 / 1.8 -> 1 / 2 / 1):
     riduzione mirata per ospitare i font cresciuti (route-spots 2.2 ->
     2.8mm) e per cedere altri ~0.6mm alla .info-card cresciuta a 43mm,
     che permette ora di dare piu' altezza alla foto del gommone (hero).
     0.7mm vert e' il minimo che lascia respiro al border-top gold
     senza far sentire i contenuti "incollati" al bordo. */
  padding: 0.7mm 2mm 0.7mm;
  background: rgba(7, 24, 42, 0.62);
  /* glassmorphism: blur del fondo (foto hero) attraverso il navy 0.62.
     2mm di blur = piu' marcato delle chip (1.6mm) perche' la card e'
     piu' grande e regge un effetto vetro piu' deciso senza disturbare
     la leggibilita' dei contenuti interni (tag NORD/SUD, tappe, orari).
     Saturate leggero per non spegnere i colori della foto sotto.
     -webkit-backdrop-filter per Safari. */
  -webkit-backdrop-filter: blur(2mm) saturate(1.1);
  backdrop-filter: blur(2mm) saturate(1.1);
  border: 0.3mm solid rgba(255, 255, 255, 0.18);
  border-top: 0.7mm solid var(--terra);
  border-radius: 1.6mm;
  box-shadow: 0 0.5mm 1.4mm rgba(0, 0, 0, 0.35);
  /* SUD ha 5 spot (+ wrap di "Punta Palascia (Capo d'Otranto)") e
     NORD ESTESO ha 4 spot di cui 2 wrappano: il grid li equipara
     in altezza. */
  min-height: 0;
}

/* Card NORD ESTESO: stessa struttura delle altre due (tag + meta + elenco
   + orari). Variante cromatica leggera del bordo per dare un accento visivo
   che richiama il "delta" del tour lungo, ma senza rompere la consistenza
   con NORD 3h e SUD. */
.route-card-extended {
  border-color: rgba(123, 240, 221, 0.35);
  border-top-color: var(--terra);
}
/* NB: il tag .route-card-extended .route-tag ("NORD ESTESO", 11 caratteri)
   eredita ora le stesse dimensioni di "NORD" e "SUD" (font-size 2.8mm,
   letter-spacing 0.08em, padding 0.5mm 1.6mm di .route-tag). Possibile
   perche' il meta della card estesa e' stato semplificato a solo "4h"
   (rimosso "· da 70€"): rimane spazio sufficiente nell'header per
   ospitare la pillola full-size accanto al meta senza forzare flex-wrap.
   Beneficio: coerenza visiva fra le tre tag-pillole NORD/NORD ESTESO/SUD,
   tutte alla stessa scala tipografica (~8pt in stampa A5). */

.route-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2mm;
  flex-wrap: nowrap;
}

.route-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.5mm 1.6mm;
  /* Fondo gold semi-trasparente (alpha 0.82) per lasciar vedere il
     blur del fondo retrostante (route-card navy + foto hero) -> tab in
     stile glassmorphism, coerente con le pillole .routes-* sopra.
     L'alpha resta alta (0.82) perche' la label "NORD" e' un
     identificatore di area critico: non puo' diventare un vetro
     troppo trasparente o l'etichetta perde forza.
     Print fallback: in stampa il backdrop-filter non viene applicato,
     quindi il fondo a 0.82 vede la carta crema della card sotto - la
     leggibilita' della label nera resta garantita. */
  background: rgba(244, 180, 26, 0.82);
  -webkit-backdrop-filter: blur(1.4mm) saturate(1.15);
  backdrop-filter: blur(1.4mm) saturate(1.15);
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-weight: 900;
  /* 2.8mm (~7.94pt ≈ 8pt): "ZONA" (NORD/SUD) - elemento prioritario
     per leggibilita' in stampa A5, cresciuto da 2.4mm. */
  font-size: 2.8mm;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 0.3mm 0.7mm rgba(0, 0, 0, 0.3);
}
/* Tag SUD: stessa pillola ma col turchese profondo del Salento.
   Distingue immediatamente l'area senza dover leggere "SUD".
   Stessa logica glass: alpha 0.82 sul --sea-deep (#0A8A8E rgb 10,138,142)
   per ereditare il backdrop-filter definito su .route-tag. */
.route-card-sud .route-tag {
  background: rgba(10, 138, 142, 0.82);
  color: var(--white);
}

.route-meta {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  /* 2.85mm (~8.07pt): "DURATA · PREZZO" - elemento prioritario
     ("durata/prezzo"), cresciuto da 2.6mm. La h grossolana <b> e' a
     3.1mm per dare ulteriore evidenza al tempo del tour. */
  font-size: 2.85mm;
  letter-spacing: 0.02em;
  color: var(--white);
  white-space: nowrap;
  text-shadow: 0 0 0.5mm rgba(0, 0, 0, 0.9);
}
.route-meta b {
  font-weight: 900;
  font-size: 3.1mm;
  color: var(--sea-soft);
  letter-spacing: 0.01em;
}

.route-spots {
  list-style: none;
  display: flex;
  flex-direction: column;
  /* gap 0.3mm (era 0.4): leggero ritiro per ospitare il font cresciuto
     senza sforare il budget verticale. */
  gap: 0.3mm;
  margin: 0.2mm 0 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  /* 2.8mm (~7.94pt ≈ 8pt): nomi delle TAPPE nelle card - elemento
     esplicitamente richiesto per la leggibilita' in stampa A5.
     Cresciuto da 2.2mm. Su card larghe ~38mm i nomi piu' lunghi
     ("Punta Palascia (Capo d'Otranto)", "Tutte le tappe del tour
     Nord 3h") wrappano su 2 righe; il grid alza tutte le card alla
     stessa altezza, quindi il layout regge.
     line-height 1.15 (era 1.2) per recuperare budget verticale a
     parita' di font size: le linee restano comunque ben separate
     per la leggibilita'. */
  font-size: 2.8mm;
  line-height: 1.15;
  color: var(--white);
  flex: 1 1 auto;
}
.route-spots li {
  position: relative;
  padding-left: 2.4mm;
  text-shadow: 0 0 0.5mm rgba(0, 0, 0, 0.85);
}
.route-spots li::before {
  content: "·";
  position: absolute;
  left: 0;
  top: -0.1mm;
  color: var(--terra);
  font-weight: 900;
  font-size: 3.2mm;
  line-height: 1;
}
.route-spots em {
  font-style: normal;
  font-weight: 500;
  /* 1.8mm (~5.1pt): chiarificazione fra parentesi "(Capo d'Otranto)".
     Sotto soglia 8pt ma volutamente compatta per far stare l'intera
     voce "Punta Palascia (Capo d'Otranto)" su UNA SOLA RIGA nella
     card SUD (larghezza testo ~36mm), evitando il wrap che faceva
     crescere la card di un'intera riga. La parentesi e' chiarificazione
     ausiliaria ("Capo d'Otranto" e' sinonimo geografico di "Punta
     Palascia"): la tappa primaria resta leggibile a 2.8mm. */
  font-size: 1.8mm;
  opacity: 0.78;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* Prima voce della card NORD ESTESO: e' una sintesi ("tutte le tappe della
   NORD 3h") e non una singola tappa. La distinguiamo con un corsivo discreto
   + leggera opacita' per segnalare che e' un raccoglitore, mantenendo la
   stessa bullet gold delle altre voci e la consistenza con le altre card.
   Font ridotto a 2.2mm (~6.2pt, era 2.8mm ereditato da .route-spots) per
   far stare "Tutte le tappe del tour Nord 3h" (31 char) su UNA SOLA RIGA
   nella card NORD ESTESO (larghezza testo ~36mm), evitando il wrap.
   E' una voce di SINTESI, non una tappa primaria: ha senso che stia
   visivamente sussidiaria rispetto agli altri spot a 2.8mm. */
.route-spots-all {
  font-style: italic;
  opacity: 0.92;
  font-size: 2.2mm;
  letter-spacing: 0;
}

.route-times {
  margin-top: 0.3mm;
  /* padding-top 0.5mm (era 0.8): comprime per budget verticale. */
  padding-top: 0.5mm;
  border-top: 0.3mm dashed rgba(255, 255, 255, 0.28);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  /* 2.8mm (~7.94pt ≈ 8pt): ORARI - elemento prioritario per
     leggibilita' in stampa A5, cresciuto da 2.3mm. */
  font-size: 2.8mm;
  letter-spacing: 0.04em;
  color: var(--sea-soft);
  text-align: center;
  text-shadow: 0 0 0.5mm rgba(0, 0, 0, 0.85);
}

/* Famiglie: chiusura della sezione rotte con la fascia di
   sconto bambini. Pillola gold a piena larghezza centrata,
   "Famiglie:" in oro per dare il senso di label.
   - margin top 1.4mm per staccarla dalle card sopra
   - margin bottom 1.2mm come "respiro" prima dell'info-card sotto
     (ridotti dopo l'aumento dei font delle route-card per restare
     nel budget della sezione)
   - position: relative + z-index 7: e' SOPRA tutto, mai coperta */
.routes-family {
  position: relative;
  z-index: 7;
  /* margin-top 1.6mm: gap pulito tra il bordo inferiore delle 3
     route-card e la pillola gold "Famiglie" - simmetrico al gap
     superiore di .routes-mode. Restituisce respiro dopo la fase di
     forte compressione (0.4mm) che faceva sembrare la chip incollata
     ai prezzi.
     margin-bottom 0.3mm tenuto basso: il gap sotto (verso .info-card a
     top 152mm) e' gia' garantito dallo slack di justify-content:center
     della sezione .routes (~3.5mm residui). */
  margin: 1.6mm auto 0.3mm;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2mm;
  padding: 0.6mm 2.8mm;
  background: rgba(244, 180, 26, 0.22);
  /* glassmorphism: sfocatura del fondo (foto hero / card) per dare
     coerenza materica con le altre chip (.routes-private-badge,
     .routes-mode). Saturate per non spegnere il gold del bordo. */
  -webkit-backdrop-filter: blur(1.6mm) saturate(1.1);
  backdrop-filter: blur(1.6mm) saturate(1.1);
  border: 0.35mm solid rgba(244, 180, 26, 0.75);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  /* 2.8mm (~7.94pt ≈ 8pt): riga FAMIGLIE - elemento esplicitamente
     richiesto per la leggibilita' in stampa A5. Cresciuto da 2.1mm. */
  font-size: 2.8mm;
  letter-spacing: 0.02em;
  color: var(--white);
  text-shadow: 0 0 0.5mm rgba(0, 0, 0, 0.85);
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 0.4mm 1.2mm rgba(0, 0, 0, 0.35);
}
.routes-family strong {
  font-weight: 900;
  color: var(--terra);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* allineato al testo principale (2.8mm) per coerenza visiva. */
  font-size: 2.8mm;
}

/* =========================================================
   Cards (info + QR): redesign editoriale chiaro.
   Niente bordi, niente gradient, niente glow. Bianco caldo
   neutro, soft shadow, una sola riga oro come eyebrow rule,
   typography first. Caveat eliminato.
   ========================================================= */

/* Token specifici per le card chiare */
:root {
  --card-bg: #FAF8F3;        /* bianco caldo molto neutro */
  --card-ink: #07182A;       /* testo principale */
  --card-muted: rgba(7, 24, 42, 0.55);
  --card-shadow:
    0 2.2mm 7mm rgba(7, 24, 42, 0.22),
    0 0.6mm 2mm rgba(7, 24, 42, 0.10);
}

/* -------- INFO CARD (mosaico foto, sinistra) --------
   Layout:
   - mosaico foto "1 grande + 3 piccole" che riempie l'intera card
     (la grande in alto e' la "vista" principale, le 3 sotto sono
     i dettagli del servizio)
   - mini-itinerario in fondo RIMOSSO (era una striscia COSTA NORD ~
     OTRANTO ~ COSTA SUD con pin navy/gold + linea ondulata): info
     ridondante con le tag NORD/NORD ESTESO/SUD delle 3 route-card
     sopra, e il suo spazio verticale serviva per dare gap pulito
     tra la pillola FAMIGLIE e il bordo superiore di questa card.
   Niente trust-strip scura (ridondante con footer contatti) ne' caption
   orfana con dash gold: la card vive su un unico linguaggio visivo
   chiaro/cream, coerente con la card-qr a destra.

   Altezza 45mm a top 150mm: chiude a 195mm (quota di chiusura
   invariata, identica alla versione precedente), esattamente alla
   stessa quota della card-qr a destra (allineate in altezza), e
   lascia ~2mm di gap pulito col banner "Famiglie" sopra (vedi
   .routes-family margin-bottom). La card-qr DEVE avere stessi top
   e height (vedi sotto). */
.info-card {
  position: absolute;
  /* top 152mm, height 43mm: chiude a 195mm, allineata PIXEL-PERFECT
     con la .card-qr a destra (stesso top, stesso height) e lascia
     2mm di gap col footer.
     La foto (gommone.jpg) ora occupa l'intera area interna (height -
     padding = ~40.2mm x larghezza ~66.2mm = rapporto ~1.647:1),
     quindi gli height/top NON vanno cambiati senza ri-allineare la
     card-qr e ri-tarare il pre-crop in optimize_images.py. */
  top: 152mm;
  left: var(--gutter);
  width: calc(var(--page-w) - var(--gutter) * 2 - 60mm - 3mm);
  height: 43mm;
  border-radius: 3mm;
  overflow: hidden;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  padding: 1.4mm;
  /* gap rimosso (era 1mm fra mosaico e info-route): ora il mosaico e'
     l'unico figlio del card, niente gap necessario. */
}

/* Foto singola (solo gommone):
   - una sola cella che riempie l'intera area interna della .info-card
     (.info-mosaic ha flex:1 1 auto dentro la card, quindi va a piena
     altezza/larghezza disponibile dopo il padding di 1.4mm).
   - Cella: ~66.2 x 40.2mm -> rapporto ~1.647:1 (landscape moderato).
   - La foto sorgente e' PRE-CROPPATA da optimize_images.py al rapporto
     ESATTO della cella (vedi CROP_TARGETS), quindi object-fit:cover non
     taglia piu' nulla a runtime: cio' che vedi nel file JPG e' esattamente
     cio' che vedi nella cella.
   - Versione precedente: mosaico 1+3 con grid 3 colonne x 2 righe (hero
     + 3 thumb info-1, info-2, info-3). Rimossa per dare massima
     presenza visiva al gommone. Le regole .info-photo-thumb,
     .info-photo-cave, .info-photo-water, .info-photo-group sono state
     eliminate insieme alle <figure> corrispondenti.
   - NIENTE figcaption sulla foto: l'immagine parla da sola. */
.info-mosaic {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}
.info-photo {
  position: relative;
  margin: 0;
  flex: 1 1 auto;
  border-radius: 1.4mm;
  overflow: hidden;
  background: var(--ink-soft);
  box-shadow: 0 0.3mm 0.8mm rgba(0, 0, 0, 0.2);
}
.info-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.04);
}
/* gommone.jpg: l'object-position e' no-op perche' la sorgente e' gia'
   pre-croppata al rapporto della cella. Mantenuto 50/50 come safety net
   in caso di rigenerazione con bias diverso. */
.info-photo-boat img {
  object-position: 50% 50%;
}

/* Mini-itinerario "COSTA NORD ~ OTRANTO ~ COSTA SUD" RIMOSSO.
   Le regole .info-route, .info-route-stop, .info-route-pin,
   .info-route-name, .info-route-hub, .info-route-hub-pin,
   .info-route-hub-name, .info-route-line erano qui ma sono state
   eliminate insieme al markup HTML corrispondente: la striscia era
   informazione ridondante con le tag pillola NORD/NORD ESTESO/SUD
   delle 3 route-card sopra, e occupava ~5mm verticali che facevano
   seduta la pillola FAMIGLIE sul bordo superiore della .info-card.
   Le chiavi i18n info.north / info.hub / info.south restano in
   script.js come no-op (nessun elemento le legge), comodo se in
   futuro si decidesse di ripristinare la striscia. */

/* Freccia hand-drawn: PNG gia' pre-colorata in --terra (#F4B41A)
   dal preprocessing Python (vedi process_arrow.py). Aspect ratio
   del PNG: 408x672 ~ 0.607.
   Posizione: 148mm (parte ~4mm sopra la card QR a 152mm e curla giu'
   verso il QR vero e proprio, mantenendo la stessa relazione visiva
   anche dopo lo spostamento/riduzione di altezza delle card sotto). */
.qr-arrow {
  position: absolute;
  /* top 148mm: segue la .card-qr che e' stata rialzata di 3mm
     (da 155mm a 152mm) per far crescere la .info-card di pari
     misura e dare piu' altezza alla foto del gommone (hero).
     Mantiene la stessa relazione "parte ~4mm sopra la card e curla
     giu' verso il QR" del layout precedente. */
  top: 148mm;
  right: 1mm;
  width: 17mm;
  height: 27mm;
  object-fit: contain;
  z-index: 7;
  pointer-events: none;
  filter: drop-shadow(0 0.4mm 0.9mm rgba(7, 24, 42, 0.35));
}

/* -------- QR / CTA CARD (destra) --------
   Allineata all'info-card: top 150mm, height 45mm (esatto allineamento
   in altezza con la colonna sinistra). Chiude a 195mm come la card
   foto a sinistra (vincolo: stesse top e height in mm).
   Contenuti: label sopra ("SCANSIONA E PRENOTA"), QR (28mm = 2.8cm,
   sopra la soglia minima di 2cm richiesta per scansione affidabile
   da smartphone in A5 stampato) e CTA "PRENOTA ORA" come chiusura. */
.card-qr {
  position: absolute;
  /* top:152mm, height:43mm: stessa quota e stessa altezza della
     .info-card a sinistra, allineate pixel-perfect (vincolo di layout).
     Aggiornate da 155/40 a 152/43 per dare 3mm di altezza in piu' al
     mosaico foto della .info-card (in particolare alla foto del
     gommone hero che era brutalmente tagliata).
     Chiusura a 195mm, identica a prima della riorganizzazione.
     QR a 25mm = 2.5cm > minimo 2cm richiesto per scansione affidabile
     da smartphone in formato A5 stampato (margine ~25% oltre il minimo,
     comunque scansionabile a distanza naturale).
     Padding verticale 1.2mm + flex justify-content:center: i 3mm in
     piu' di altezza si distribuiscono come respiro fra label/QR/CTA,
     non serve ridimensionare nulla. */
  top: 152mm;
  right: var(--gutter);
  width: 60mm;
  height: 43mm;
  background: var(--card-bg);
  border-radius: 3mm;
  padding: 1.2mm 3.4mm;
  color: var(--card-ink);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9mm;
  text-align: center;
  box-shadow: var(--card-shadow);
}

/* Label sopra al QR: ora che il claim "in 30 secondi" e' stato
   rimosso, "SCANSIONA E PRENOTA" e' l'unico titolo e va trattato
   con piu' presenza (peso 800, dimensione 2.7mm, colore pieno
   sull'ink) per non sembrare timido sopra al codice QR. */
.qr-label {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  /* 2.85mm (~8pt): "SCANSIONA E PRENOTA" - sopra soglia leggibilita'
     A5, cresciuta da 2.7mm. */
  font-size: 2.85mm;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--card-ink);
}

/* QR di prenotazione: 25mm x 25mm = 2.5 x 2.5 cm.
   Vincolo: deve restare >= 2.0 x 2.0 cm reali in formato A5 stampato
   per garantire una scansione affidabile da smartphone (margine ~25%
   oltre il minimo). Ridotto da 28mm a 25mm per far stare il
   contenuto della card-qr (label + QR + CTA) nei 40mm di altezza
   della card, dopo lo spostamento giu' della coppia info-card /
   card-qr a top:155mm per dare gap pulito tra pillola FAMIGLIE e
   bordo superiore della foto del gommone. Generato a 400px via
   api.qrserver.com (vedi script.js > qrSrc) -> alta risoluzione
   anche dopo stampa. */
.qr-img {
  width: 25mm;
  height: 25mm;
  border-radius: 0;
  background: var(--white);
  padding: 0;
}

/* CTA "PRENOTA ORA": stile premium tipografico, come una headline
   editoriale. Niente bottone, niente bordo, niente ombre.
   - eyebrow rule gold sopra il testo (stessa famiglia visiva delle
     altre eyebrow rule gold)
   - colore sea-deep: il turchese profondo del Salento, leggibile su bianco
     e coerente con la palette di "DI OTRANTO" */
.cta-book {
  position: relative;
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: 4.6mm;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sea-deep);
  background: transparent;
  border: 0;
  padding: 2.2mm 0 0;
  margin-top: 0.4mm;
  cursor: pointer;
  transition: color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.cta-book::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 7mm;
  height: 0.5mm;
  background: var(--terra);
}
.cta-book:hover {
  color: var(--sea);
}

/* =========================================================
   Contact bar (footer alto su sfondo navy implicito)
   I tre blocchi (telefono, social, imbarco) condividono lo
   stesso pattern: gruppo di cerchi icona + testo su due righe
   (label piccola + valore in grassetto). Questo crea un ritmo
   orizzontale uniforme.
   ========================================================= */
.contact-bar {
  position: absolute;
  bottom: 6mm;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3mm;
  z-index: 5;
  color: var(--white);
  font-family: "Inter", sans-serif;
}
.ci {
  display: inline-flex;
  align-items: center;
  gap: 1.8mm;
  font-size: 2.8mm;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: inherit;
}
.ci strong {
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Gruppo di cerchi-icona: stretti tra loro, larghi rispetto al testo */
.ci-circles {
  display: inline-flex;
  align-items: center;
  gap: 1mm;
  flex-shrink: 0;
}

/* Cerchio outline standard: stesso trattamento per TUTTI i contatti
   (telefono, WhatsApp, IG, FB, TikTok, imbarco). Bordo bianco discreto
   + icona aqua --sea-soft (lo stesso accent di "DI OTRANTO" e onde),
   così tutto il footer parla un unico linguaggio cromatico coerente
   con la brand della locandina. */
.ci-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.6mm;
  height: 5.6mm;
  border: 0.4mm solid var(--white);
  border-radius: 50%;
  color: var(--sea-soft);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}
.ci-circle svg {
  width: 3.2mm;
  height: 3.2mm;
}

/* ---------- Phone/WhatsApp: enfasi extra ----------
   Il blocco telefono e' una vera CTA alternativa al QR di prenotazione:
   molti utenti (italiani in particolare) preferiscono scrivere su
   WhatsApp che scansionare un QR. Per questo lo trattiamo come
   secondary CTA visivamente piu' pesante:
   - cerchi piu' grandi (7mm vs 5.6mm)
   - cerchio WhatsApp "filled" col verde di brand (#25D366) -> riconoscibile
     immediatamente come WhatsApp da chiunque, senza dover leggere
   - cerchio chiamata "filled" oro (var(--terra)) -> coerente con la
     palette gold delle eyebrow rules e crea contrasto con il verde
   - numero in font-size piu' grande, le label sotto restano piccole */
.ci-phone .ci-circles {
  gap: 1.4mm;
}
.ci-phone .ci-circle {
  width: 6.8mm;
  height: 6.8mm;
  border-width: 0.5mm;
}
.ci-phone .ci-circle svg {
  width: 3.8mm;
  height: 3.8mm;
}
.ci-phone .ci-circle:nth-child(1) {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--ink);
  box-shadow: 0 0.4mm 1.1mm rgba(0, 0, 0, 0.35);
}
.ci-phone .ci-circle:nth-child(2) {
  background: #25D366;
  border-color: #25D366;
  color: var(--white);
  box-shadow: 0 0.4mm 1.1mm rgba(0, 0, 0, 0.35);
}
.ci-phone .ci-text small {
  /* 2.6mm (~7.4pt): label "Jacopo" sopra al numero, cresciuta da 2.2mm.
     Vicino agli 8pt, sotto soglia critica solo per equilibrio col valore
     (strong a 3.2mm) - resta abbondantemente leggibile. */
  font-size: 2.6mm;
}
.ci-phone .ci-text strong {
  font-size: 3.2mm;
  letter-spacing: 0.01em;
}

/* Testo a destra dei cerchi: label piccola + valore in grassetto.
   Stesso trattamento per telefono, social e imbarco -> ritmo uniforme.
   - color: var(--white) esplicito su small/strong per evitare qualsiasi
     tinta apparente dovuta a colori saturi adiacenti.
   - white-space: nowrap sul valore: "+39 350 582 9763" o "Marina di
     Otranto" NON devono mai andare a capo, altrimenti il footer si
     spezza in due righe e rompe il ritmo orizzontale. */
.ci-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  color: var(--white);
}
.ci-text small {
  /* 2.6mm (~7.4pt): label "Seguici su" / "Punto di imbarco", cresciuta
     da 2.2mm. Vicino agli 8pt; resta sotto al valore in strong (2.8mm)
     per mantenere la gerarchia visiva label/valore del footer. */
  font-size: 2.6mm;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.85;
  white-space: nowrap;
}
.ci-text strong {
  font-size: 2.85mm;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--white);
  white-space: nowrap;
}

/* =========================================================
   Flip note (in fondo, sotto contact bar)
   - Bandierina contestuale: UK quando lang="it", IT quando lang="en"
     (la lingua dell'<html> viene aggiornata dinamicamente in script.js)
   - Tipografia: Inter 800 uppercase, tracking ampio, bianco pieno.
     Sostituisce il vecchio Caveat turchese poco leggibile su navy.
   ========================================================= */
.flip-note {
  position: absolute;
  bottom: 1mm;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8mm;
  z-index: 5;
}
.flip-flag {
  display: inline-flex;
  width: 5mm;
  height: 3mm;
  flex-shrink: 0;
  border-radius: 0.4mm;
  overflow: hidden;
  box-shadow:
    0 0 0 0.2mm rgba(255, 255, 255, 0.5),
    0 0.3mm 0.8mm rgba(0, 0, 0, 0.55);
}
.flip-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Visibilita' contestuale: di default mostriamo la UK (IT->EN)
   e nascondiamo la tricolore italiana; in modalita' EN si invertono. */
.flip-flag-it { display: none; }
html[lang="en"] .flip-flag-it { display: inline-flex; }
html[lang="en"] .flip-flag-uk { display: none; }

.flip-note em {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 800;
  /* 2.8mm (~7.94pt ≈ 8pt): "ENGLISH VERSION ON THE BACK" - cresciuta
     da 2.6mm per restare sopra soglia leggibilita' in stampa A5. */
  font-size: 2.8mm;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 1;
  text-shadow:
    0 0 0.5mm rgba(0, 0, 0, 0.7),
    0 0.3mm 0.9mm rgba(0, 0, 0, 0.5);
}

/* =========================================================
   STAMPA
   ========================================================= */
@page {
  size: A5 portrait;
  margin: 0;
}
@media print {
  html,
  body {
    background: white !important;
  }
  body {
    margin: 0;
    padding: 0;
    display: block;
  }
  .controls {
    display: none !important;
  }
  .locandina {
    box-shadow: none;
    border-radius: 0;
    width: 148mm;
    height: 210mm;
    page-break-after: always;
  }
}