/* fonts.css */
/* QualeSpiaggia · self-hosted fonts (woff2) */

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fraunces-500-italic.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fraunces-500-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fraunces-500-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fraunces-400.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fraunces-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fraunces-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fraunces-500.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fraunces-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fraunces-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-600.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/fraunces-700.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/fraunces-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/fraunces-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-400.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-500.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-600.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-700.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-600.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-600.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-600.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-600.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* brand.css */
/* QualeSpiaggia · brand.css · v2.0
   Design tokens + typography + base components
   Based on official design handoff (16 schermate, Dec 2025) */

/* ═══════════════════════════════════════════════════════════════
   FONTS — self-hosted woff2 (vedi /css/fonts.css)
   Importali via <link rel="stylesheet" href="/css/fonts.css"> in <head>
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Colors — primary palette */
  --qs-sand: #FFF8EE;
  --qs-sand-dark: #F7EDDA;
  --qs-sand-warm: #FFF1DE;
  --qs-deep: #0B4F6C;
  --qs-deep-dark: #083A52;
  --qs-orange: #FF9E3D;
  --qs-orange-soft: rgba(255, 158, 61, 0.1);
  --qs-orange-dark: #E5882C;
  --qs-gold: #FFD89C;
  --qs-teal: #2AA7C7;

  /* Score colors */
  --qs-score-perfect: #2E8B6E;   /* verde 80+ */
  --qs-score-good: #7FA65C;      /* verde chiaro 65–79 */
  --qs-score-moderate: #FF9E3D;  /* arancio 50–64 */
  --qs-score-bad: #E5533D;       /* rosso <50 */

  /* Text */
  --qs-text: #0B4F6C;
  --qs-text-soft: rgba(11, 79, 108, 0.75);
  --qs-text-muted: rgba(11, 79, 108, 0.55);
  --qs-text-faint: rgba(11, 79, 108, 0.35);
  --qs-text-invert: #FFF8EE;
  --qs-text-invert-soft: rgba(255, 248, 238, 0.75);

  /* Borders */
  --qs-border: rgba(11, 79, 108, 0.08);
  --qs-border-strong: rgba(11, 79, 108, 0.15);
  --qs-border-invert: rgba(255, 248, 238, 0.12);

  /* Typography families */
  --qs-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --qs-font-body: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --qs-font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Radii */
  --qs-r-sm: 8px;
  --qs-r-md: 12px;
  --qs-r-lg: 14px;
  --qs-r-xl: 18px;
  --qs-r-2xl: 20px;
  --qs-r-pill: 999px;

  /* Shadows */
  --qs-shadow-sm: 0 1px 3px rgba(11, 79, 108, 0.04);
  --qs-shadow-md: 0 4px 24px rgba(11, 79, 108, 0.06);
  --qs-shadow-lg: 0 12px 40px rgba(11, 79, 108, 0.12);
  --qs-shadow-xl: 0 20px 60px rgba(11, 79, 108, 0.18);

  /* Spacing scale */
  --qs-space-1: 4px;
  --qs-space-2: 8px;
  --qs-space-3: 12px;
  --qs-space-4: 16px;
  --qs-space-5: 20px;
  --qs-space-6: 24px;
  --qs-space-8: 32px;
  --qs-space-10: 40px;
  --qs-space-12: 48px;
  --qs-space-16: 64px;
  --qs-space-20: 80px;
  --qs-space-24: 96px;

  /* Containers */
  --qs-container-sm: 680px;
  --qs-container-md: 960px;
  --qs-container-lg: 1200px;

  /* Transitions */
  --qs-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --qs-duration: 200ms;
}

/* ═══════════════════════════════════════════════════════════════
   RESET / BASE
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0;
  background: var(--qs-sand);
  color: var(--qs-text);
  font-family: var(--qs-font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html { overflow-x: clip; }

[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }
a { color: var(--qs-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */
.qs-display { font-family: var(--qs-font-display); font-weight: 500; letter-spacing: -0.02em; }
.qs-mono { font-family: var(--qs-font-mono); letter-spacing: 0.03em; }

/* Kicker — small uppercase eyebrow above headings */
.qs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--qs-orange);
  margin-bottom: 18px;
}
.qs-kicker::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--qs-orange);
}

/* Display headings */
.qs-h1 {
  font-family: var(--qs-font-display);
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0 0 20px;
  text-wrap: balance;
}
.qs-h1 em, .qs-accent {
  font-style: italic;
  color: var(--qs-orange);
  font-weight: 500;
}

.qs-h2 {
  font-family: var(--qs-font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 16px;
  text-wrap: balance;
}

.qs-h3 {
  font-family: var(--qs-font-display);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 12px;
}

.qs-lead {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--qs-text-soft);
  max-width: 640px;
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.qs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border: none;
  border-radius: var(--qs-r-pill);
  font-family: var(--qs-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--qs-duration) var(--qs-ease), box-shadow var(--qs-duration) var(--qs-ease), background var(--qs-duration) var(--qs-ease);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.qs-btn:hover { text-decoration: none; transform: translateY(-1px); }
.qs-btn:active { transform: translateY(0); }
.qs-btn:focus-visible { outline: 2px solid var(--qs-orange); outline-offset: 3px; }

.qs-btn-primary {
  background: var(--qs-deep);
  color: var(--qs-text-invert);
}
.qs-btn-primary:hover { background: var(--qs-deep-dark); box-shadow: var(--qs-shadow-md); }

.qs-btn-accent {
  background: var(--qs-orange);
  color: var(--qs-deep);
}
.qs-btn-accent:hover { background: #FF8A1C; }

.qs-btn-ghost {
  background: white;
  color: var(--qs-deep);
  border: 1px solid var(--qs-border-strong);
}
.qs-btn-ghost:hover { background: var(--qs-sand-dark); }

.qs-btn-sm { padding: 8px 14px; font-size: 13px; }
.qs-btn-lg { padding: 16px 26px; font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.qs-card {
  background: white;
  border-radius: var(--qs-r-xl);
  border: 1px solid var(--qs-border);
  overflow: hidden;
  transition: transform var(--qs-duration) var(--qs-ease), box-shadow var(--qs-duration) var(--qs-ease);
}
.qs-card-interactive { cursor: pointer; }
.qs-card-interactive:hover { transform: translateY(-2px); box-shadow: var(--qs-shadow-md); }

.qs-card-dark {
  background: var(--qs-deep);
  color: var(--qs-text-invert);
  border-color: var(--qs-border-invert);
}

/* ═══════════════════════════════════════════════════════════════
   SCORE PILL (used on beach cards)
   ═══════════════════════════════════════════════════════════════ */
.qs-score-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  background: rgba(255, 248, 238, 0.92);
  border-radius: var(--qs-r-pill);
  backdrop-filter: blur(6px);
  font-family: var(--qs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.qs-score-pill .score { font-size: 15px; line-height: 1; }
.qs-score-pill .label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.qs-score-perfect { color: var(--qs-score-perfect); }
.qs-score-good { color: var(--qs-score-good); }
.qs-score-moderate { color: var(--qs-score-moderate); }
.qs-score-bad { color: var(--qs-score-bad); }

/* ═══════════════════════════════════════════════════════════════
   CHIPS (category tags, filter pills)
   ═══════════════════════════════════════════════════════════════ */
.qs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255, 248, 238, 0.92);
  backdrop-filter: blur(6px);
  border-radius: var(--qs-r-pill);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--qs-deep);
  letter-spacing: 0.01em;
}
.qs-chip-outline {
  background: white;
  border: 1px solid var(--qs-border-strong);
}

/* ═══════════════════════════════════════════════════════════════
   NAV (desktop + mobile hamburger)
   ═══════════════════════════════════════════════════════════════ */
.qs-nav {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: rgba(255, 248, 238, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--qs-border);
}
.qs-nav-inner {
  max-width: var(--qs-container-lg);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.qs-nav-logo { display: flex; align-items: center; gap: 10px; }
.qs-nav-logo img { height: 36px; width: auto; }
.qs-nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.qs-nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--qs-text-soft);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.qs-nav-links a:hover { color: var(--qs-deep); text-decoration: none; }
.qs-nav-links a.active {
  color: var(--qs-deep);
  border-bottom-color: var(--qs-orange);
}
.qs-nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.qs-nav-lang {
  font-family: var(--qs-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--qs-text-muted);
  letter-spacing: 0.08em;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
}
.qs-nav-lang-wrap { position: relative; display: inline-block; }
.qs-nav-lang-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid rgba(11,79,108,0.12);
  border-radius: var(--qs-r-md);
  box-shadow: 0 8px 24px rgba(11,79,108,0.12);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  min-width: 170px;
  z-index: 50;
}
.qs-nav-lang-menu li { margin: 0; }
.qs-nav-lang-menu a {
  display: block;
  padding: 8px 14px;
  font-family: var(--qs-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--qs-text);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.qs-nav-lang-menu a:hover {
  background: rgba(11,79,108,0.06);
  color: var(--qs-deep);
}
.qs-nav-lang-menu a[aria-selected="true"] {
  color: var(--qs-deep);
  background: rgba(255,158,61,0.08);
}
.qs-nav-lang-menu[hidden] { display: none; }
.qs-nav-hamburger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--qs-r-md);
  background: var(--qs-deep);
  color: var(--qs-text-invert);
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .qs-nav-links, .qs-nav-actions .qs-btn { display: none; }
  .qs-nav-hamburger { display: inline-flex; }
  /* fix: BUG-B — hamburger flush a destra: ridotto padding orizzontale 20→12px */
  .qs-nav-inner { gap: 12px; padding: 14px 12px; }
  .qs-nav-actions { margin-left: auto; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE DRAWER (full-screen overlay menu)
   ═══════════════════════════════════════════════════════════════ */
.qs-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--qs-sand);
  color: var(--qs-deep);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 220ms var(--qs-ease);
  overflow: hidden;
}
.qs-drawer.is-open { transform: translateX(0); }
.qs-drawer::before, .qs-drawer::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.qs-drawer::before {
  top: -80px; right: -80px; width: 260px; height: 260px;
  background: radial-gradient(circle, var(--qs-gold) 0%, transparent 70%);
  opacity: 0.55;
}
.qs-drawer::after {
  bottom: -100px; left: -100px; width: 280px; height: 280px;
  background: radial-gradient(circle, var(--qs-teal) 0%, transparent 70%);
  opacity: 0.22;
}
.qs-drawer-header {
  display: flex;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--qs-border);
  position: relative;
  z-index: 2;
}
.qs-drawer-header .qs-nav-logo { flex: 1; }
.qs-drawer-close {
  width: 42px; height: 42px;
  border-radius: var(--qs-r-md);
  background: rgba(11, 79, 108, 0.06);
  border: none;
  color: var(--qs-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qs-drawer-nav {
  flex: 1;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 2;
  overflow-y: auto;
}
.qs-drawer-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  font-family: var(--qs-font-display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--qs-deep);
  border-bottom: 1px solid var(--qs-border);
  text-decoration: none;
}
.qs-drawer-nav a:hover { color: var(--qs-orange); text-decoration: none; }
.qs-drawer-nav a span { color: var(--qs-text-faint); font-size: 20px; }
.qs-drawer-footer {
  padding: 20px;
  border-top: 1px solid var(--qs-border);
  background: rgba(255, 248, 238, 0.9);
  position: relative;
  z-index: 2;
}
.qs-drawer-lang {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--qs-text-muted);
}
.qs-drawer-lang div { display: flex; gap: 4px; }
.qs-drawer-lang button {
  padding: 6px 10px;
  border-radius: var(--qs-r-sm);
  border: none;
  background: transparent;
  color: var(--qs-deep);
  font-family: var(--qs-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.qs-drawer-lang button.active {
  background: var(--qs-deep);
  color: var(--qs-text-invert);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.qs-footer {
  background: var(--qs-deep);
  color: var(--qs-text-invert);
  padding: 64px 24px 32px;
  margin-top: 80px;
}
.qs-footer-inner {
  max-width: var(--qs-container-lg);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
.qs-footer-brand img { height: 40px; width: auto; margin-bottom: 18px; }
.qs-footer-brand p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--qs-text-invert-soft);
  max-width: 280px;
  margin: 0;
}
.qs-footer-col h4 {
  font-family: var(--qs-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--qs-gold);
  margin: 0 0 16px;
}
.qs-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qs-footer-col a {
  color: var(--qs-text-invert);
  font-size: 14px;
  opacity: 0.85;
}
.qs-footer-col a:hover { opacity: 1; text-decoration: underline; }
.qs-footer-bottom {
  max-width: var(--qs-container-lg);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--qs-border-invert);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: var(--qs-font-mono);
  font-size: 12px;
  color: var(--qs-text-invert-soft);
  letter-spacing: 0.03em;
}
.qs-footer-social {
  display: inline-flex;
  gap: 6px;
}
.qs-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--qs-sand);
  transition: background 0.15s ease;
}
.qs-footer-social a:hover { background: rgba(255,248,238,0.12); }
.qs-footer-license { color: var(--qs-text-invert-soft); }
.qs-footer-license a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .qs-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .qs-footer-brand { grid-column: 1 / -1; }
  .qs-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   CONTAINERS / SECTIONS
   ═══════════════════════════════════════════════════════════════ */
.qs-section { padding: 80px 24px; }
.qs-section-dark { background: var(--qs-deep); color: var(--qs-text-invert); }
.qs-section-warm {
  background: linear-gradient(180deg, var(--qs-sand-dark) 0%, var(--qs-sand) 100%);
}

.qs-container {
  max-width: var(--qs-container-lg);
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 24px);
}
.qs-container-md { max-width: var(--qs-container-md); margin: 0 auto; padding-inline: clamp(20px, 4vw, 24px); }
.qs-container-sm { max-width: var(--qs-container-sm); margin: 0 auto; padding-inline: clamp(20px, 4vw, 24px); }

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */
.qs-input, .qs-select, .qs-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--qs-border-strong);
  border-radius: var(--qs-r-md);
  background: #FFFBF4;
  color: var(--qs-deep);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color var(--qs-duration) var(--qs-ease);
}
.qs-input:focus, .qs-select:focus, .qs-textarea:focus {
  outline: none;
  border-color: var(--qs-orange);
  box-shadow: 0 0 0 3px rgba(255, 158, 61, 0.15);
}
.qs-textarea { resize: vertical; min-height: 120px; }
.qs-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--qs-text-muted);
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.qs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.qs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.qs-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .qs-grid-3, .qs-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .qs-grid-3, .qs-grid-4 { grid-template-columns: 1fr; } }

/* Focus-visible default */
:focus-visible { outline: 2px solid var(--qs-orange); outline-offset: 2px; border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════
   ATMOSPHERE — paper grain overlay (editorial texture)
   ═══════════════════════════════════════════════════════════════ */
.qs-grain {
  position: relative;
  isolation: isolate;
}
.qs-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.31 0 0 0 0 0.42 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.qs-grain > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════
   MOTION — entrance animations (respects reduced-motion)
   ═══════════════════════════════════════════════════════════════ */
@keyframes qs-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes qs-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.qs-reveal {
  opacity: 0;
  animation: qs-rise 720ms var(--qs-ease) forwards;
}
.qs-reveal-1 { animation-delay: 80ms; }
.qs-reveal-2 { animation-delay: 200ms; }
.qs-reveal-3 { animation-delay: 320ms; }
.qs-reveal-4 { animation-delay: 440ms; }
.qs-reveal-5 { animation-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
  .qs-reveal,
  .qs-reveal-1, .qs-reveal-2, .qs-reveal-3, .qs-reveal-4, .qs-reveal-5 {
    animation: none;
    opacity: 1;
    transform: none;
  }
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   COOKIE BANNER (bottom-fixed, non-blocking)
   ═══════════════════════════════════════════════════════════════ */
.qs-cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 24px;
  background: white;
  border-radius: var(--qs-r-lg);
  box-shadow: var(--qs-shadow-xl);
  border: 1px solid var(--qs-border);
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 150;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 300ms var(--qs-ease), opacity 300ms var(--qs-ease);
}
.qs-cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.qs-cookie-ico {
  width: 44px;
  height: 44px;
  border-radius: var(--qs-r-md);
  background: var(--qs-sand-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.qs-cookie-body { flex: 1; min-width: 0; }
.qs-cookie-title {
  font-family: var(--qs-font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 3px;
  color: var(--qs-deep);
}
.qs-cookie-desc {
  font-size: 13px;
  color: var(--qs-text-soft);
  line-height: 1.45;
}
.qs-cookie-desc a { color: var(--qs-deep); font-weight: 600; }
.qs-cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }

@media (max-width: 640px) {
  .qs-cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
    bottom: 12px;
    left: 12px;
    right: 12px;
  }
  .qs-cookie-ico { width: 36px; height: 36px; font-size: 18px; }
  .qs-cookie-actions { width: 100%; justify-content: flex-end; }
}

/* home.css */
/* QualeSpiaggia · home.css · sezioni specifiche della homepage (variante A)
   Dipende da brand.css (già caricato prima). */

/* ═══════ HERO A ═══════ */
.home-hero {
  position: relative;
  padding: 72px 24px 96px;
  background: linear-gradient(180deg, var(--qs-sand) 0%, var(--qs-sand-dark) 100%);
  overflow: hidden;
}
.home-hero-bg {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--qs-gold) 0%, transparent 70%);
  opacity: 0.55;
  pointer-events: none;
}
.home-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.home-hero-copy .qs-h1 { margin-bottom: 24px; }
.home-hero-sub {
  font-size: 19px;
  line-height: 1.5;
  color: var(--qs-text-soft);
  max-width: 500px;
  margin: 0 0 32px;
  text-wrap: pretty;
}
.home-hero-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.home-hero-cta-note {
  font-size: 13px;
  color: var(--qs-text-muted);
}
.home-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.home-hero-pill {
  position: absolute;
  top: 64px;
  right: -12px;
  background: white;
  border-radius: var(--qs-r-pill);
  padding: 8px 16px 8px 14px;
  box-shadow: var(--qs-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--qs-border);
}
.home-hero-pill-label {
  font-family: var(--qs-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qs-text-muted);
}
.home-hero-pill-score {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: var(--qs-deep);
}
.home-hero-pill-score strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--qs-score-perfect);
}
.home-hero-pill-score .mono {
  font-family: var(--qs-font-mono);
  font-size: 12px;
  color: var(--qs-score-perfect);
  font-weight: 600;
}

/* ═══════ PHONE MOCKUP ═══════ */
.phone-frame {
  width: 280px;
  padding: 10px;
  border-radius: 44px;
  background: linear-gradient(160deg, #2a2a2a 0%, #0e0e0e 100%);
  box-shadow:
    0 40px 80px -20px rgba(11, 79, 108, 0.38),
    0 12px 32px -8px rgba(11, 79, 108, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  position: relative;
}
.phone-frame-sm { width: 220px; padding: 8px; border-radius: 34px; }
.phone-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: #1a1a1a;
  border-radius: 12px;
  z-index: 2;
}
.phone-frame-sm .phone-notch { width: 70px; height: 18px; top: 14px; }
.phone-screen {
  background: var(--qs-sand);
  border-radius: 34px;
  overflow: hidden;
  padding: 52px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 440px;
}
.phone-frame-sm .phone-screen { border-radius: 26px; padding: 40px 12px 12px; min-height: 320px; }
.phone-header { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.phone-greeting {
  font-family: var(--qs-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--qs-deep);
  letter-spacing: -0.01em;
}
.phone-sub {
  font-size: 11px;
  color: var(--qs-text-muted);
  font-weight: 500;
}
.phone-sun { color: var(--qs-orange); }

.phone-hero-card {
  position: relative;
  height: 130px;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.phone-hero-title {
  color: white;
  font-family: var(--qs-font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.phone-hero-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.phone-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.phone-mini-card {
  height: 80px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: white;
  position: relative;
}
.phone-mini-name {
  font-family: var(--qs-font-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
}
.phone-mini-score {
  font-family: var(--qs-font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #CDEFE0;
}
.phone-list-label {
  font-family: var(--qs-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--qs-text-muted);
  padding: 0 2px;
  margin-top: 2px;
}
.phone-list { display: flex; flex-direction: column; gap: 6px; }
.phone-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
}
.phone-list-thumb {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.phone-list-info { flex: 1; min-width: 0; }
.phone-list-name {
  font-family: var(--qs-font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--qs-deep);
  line-height: 1.2;
}
.phone-list-zone {
  font-size: 10px;
  color: var(--qs-text-muted);
  text-transform: lowercase;
}

/* ═══════ PROOF BAR ═══════ */
.home-proof {
  padding: 32px 24px;
  background: var(--qs-sand);
  border-top: 1px solid var(--qs-border);
  border-bottom: 1px solid var(--qs-border);
}
.home-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.home-proof-stat { text-align: center; }
.home-proof-stat .num {
  font-family: var(--qs-font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--qs-deep);
}
.home-proof-stat .lbl {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qs-text-muted);
  margin-top: 8px;
}

/* ═══════ HOW IT WORKS ═══════ */
.home-how { padding: 110px 24px; background: var(--qs-sand); }
.home-how-header {
  text-align: center;
  margin-bottom: 60px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.home-how-header .qs-kicker { justify-content: center; }
.home-how-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
}
.home-how-visual {
  background: white;
  border-radius: 28px;
  padding: 48px;
  box-shadow: var(--qs-shadow-md);
}
.home-how-visual-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}
.home-how-ring { position: relative; width: 220px; height: 220px; flex-shrink: 0; }
.home-how-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.home-how-ring-label .num {
  font-family: var(--qs-font-mono);
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--qs-deep);
}
.home-how-ring-label .txt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qs-score-perfect);
  margin-top: 4px;
}
.home-how-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 220px;
}
.home-how-bars li {
  display: grid;
  grid-template-columns: 28px 1fr 80px auto;
  align-items: center;
  gap: 8px;
}
.home-how-bars .ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-how-bars .lbl { font-size: 13px; font-weight: 600; color: var(--qs-deep); }
.home-how-bars .bar {
  height: 4px;
  background: rgba(11, 79, 108, 0.08);
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
}
.home-how-bars .fill { display: block; height: 100%; border-radius: 2px; }
.home-how-bars .pct {
  font-family: var(--qs-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--qs-deep);
  text-align: right;
}

.home-how-factors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.home-how-factors li { display: flex; gap: 14px; align-items: flex-start; }
.home-how-factors .ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.home-how-factors h4 {
  font-family: var(--qs-font-body);
  font-size: 16px;
  font-weight: 700;
  margin: 2px 0 4px;
  color: var(--qs-deep);
}
.home-how-factors p {
  font-size: 13.5px;
  color: var(--qs-text-soft);
  margin: 0;
  line-height: 1.5;
}

/* ═══════ ESPLORA (dark) ═══════ */
.home-explore {
  padding: 110px 24px;
  background: var(--qs-deep);
  color: var(--qs-text-invert);
}
.home-explore-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 40px;
}
.home-explore-kicker { color: var(--qs-gold) !important; }
.home-explore-kicker::before { background: var(--qs-gold) !important; }
.home-explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ═══════ BEACH CARD (riusabile) ═══════ */
.beach-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  color: var(--qs-deep);
  transition: transform var(--qs-duration) var(--qs-ease), box-shadow var(--qs-duration) var(--qs-ease);
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
a.beach-card { color: inherit; }
a.beach-card:hover { text-decoration: none; color: inherit; }
.beach-card:hover { transform: translateY(-3px); box-shadow: var(--qs-shadow-lg); }
.beach-card-media {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.beach-card-tag {
  align-self: flex-end;
  font-size: 11px;
  padding: 4px 10px;
}
.beach-card-body { padding: 16px 18px 18px; }
.beach-card-title {
  font-family: var(--qs-font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 4px;
}
.beach-card-zone {
  font-family: var(--qs-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qs-text-muted);
}
.beach-card-metrics {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  font-size: 12.5px;
  font-family: var(--qs-font-mono);
  color: var(--qs-deep);
  font-weight: 600;
}
.beach-card-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ═══════ SCARICA APP ═══════ */
.home-app { padding: 110px 24px; background: var(--qs-sand); }
.home-app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.home-app-features {
  list-style: none;
  margin: 28px 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.home-app-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--qs-deep);
}
.home-app-feat-ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--qs-orange-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home-app-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.home-app-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--qs-deep);
  color: var(--qs-text-invert);
  border-radius: var(--qs-r-pill);
  text-decoration: none;
  transition: background var(--qs-duration) var(--qs-ease);
}
.home-app-badge:hover { background: var(--qs-deep-dark); text-decoration: none; }
.home-app-badge span { display: flex; flex-direction: column; line-height: 1.1; }
.home-app-badge small {
  font-family: var(--qs-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}
.home-app-badge strong { font-size: 14px; font-weight: 600; }

.home-app-phones {
  display: flex;
  justify-content: center;
  gap: 16px;
  position: relative;
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 900px) {
  .home-hero { padding: 56px 20px 72px; }
  .home-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .home-hero-copy .qs-h1 { font-size: clamp(44px, 10vw, 64px); }
  .home-hero-sub { font-size: 17px; }
  .home-hero-pill { top: 24px; right: 8px; }

  .home-proof-grid { grid-template-columns: 1fr 1fr; gap: 24px; }

  .home-how { padding: 72px 20px; }
  .home-how-grid { grid-template-columns: 1fr; gap: 48px; }
  .home-how-visual { padding: 28px; }
  .home-how-visual-inner { gap: 28px; flex-direction: column; }

  .home-explore { padding: 72px 20px; }
  .home-explore-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .home-explore-grid { grid-template-columns: 1fr 1fr; }

  .home-app { padding: 72px 20px; }
  .home-app-grid { grid-template-columns: 1fr; gap: 40px; }
  .home-app-phones { order: -1; }
  .home-app-features { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .home-hero-copy .qs-h1 { font-size: 44px; }
  .home-hero-pill { display: none; }
  .phone-frame { width: 260px; }
  .home-explore-grid { grid-template-columns: 1fr; }
}

/* v2.css */
/* QualeSpiaggia v2 · v2.css — estensioni nazionali sopra brand/home/spiaggia/esplora.css */

/* Chip beta in nav */
.v2-beta-chip {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  background: var(--qs-orange-soft, rgba(255,158,61,.12)); color: var(--qs-orange-dark, #E5882C);
  font: 700 11px/1 var(--qs-font-mono); letter-spacing: .08em; text-transform: uppercase;
}

/* Paywall / newsletter / login: mai visibili in v2 (pagine statiche ereditate) */
[data-paywall-card], #qs-footer-newsletter, .qs-footer-newsletter, [data-action="open-signup"],
[data-action="open-magic-link"], #qs-newsletter-banner, #qs-signup-modal { display: none !important; }

/* Gradienti "mare" per card/hero senza foto */
.v2-sea-adriatico { --sea1: #2AA7C7; --sea2: #0B4F6C; }
.v2-sea-ionio     { --sea1: #39B8C9; --sea2: #0E5D78; }
.v2-sea-tirreno   { --sea1: #3D8FC7; --sea2: #0B3F6C; }
.v2-sea-ligure    { --sea1: #4A9BB8; --sea2: #123F5A; }
.v2-sea-sardegna  { --sea1: #34C3C0; --sea2: #0B5A6C; }
.v2-sea-sicilia   { --sea1: #2F9FD0; --sea2: #0A4569; }
.v2-sea-messina   { --sea1: #35AECB; --sea2: #0C5470; }
.v2-sea-x         { --sea1: #2AA7C7; --sea2: #0B4F6C; }
.v2-media {
  background-color: var(--sea2, #0B4F6C);
  background-image:
    radial-gradient(120% 80% at 85% 0%, rgba(255,216,156,.55) 0%, transparent 55%),
    repeating-linear-gradient(170deg, rgba(255,255,255,.07) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, var(--sea1, #2AA7C7) 0%, var(--sea2, #0B4F6C) 100%);
}
.beach-card-media.v2-media[style*="background-image"] { background-size: cover; }
.qs-score-na { background: rgba(255,255,255,.85); color: #5a6b73; }

/* Hero scheda senza foto */
.bch-hero--plain {
  min-height: 300px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255,216,156,.35) 0%, transparent 60%),
    repeating-linear-gradient(172deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px),
    linear-gradient(160deg, var(--sea1, #2AA7C7) 0%, var(--sea2, #0B4F6C) 75%);
}
.bch-hero--plain::before { background: linear-gradient(180deg, transparent 30%, rgba(11,47,68,.45) 100%); }
.bch-hero--plain .bch-hero-inner { min-height: 252px; }
.bch-hero--plain .bch-hero-title { font-size: clamp(40px, 6vw, 80px); }

/* Badge score compatto */
.v2-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 3px 9px;
  border-radius: 999px; color: #fff; font: 700 13px/1.4 var(--qs-font-mono); font-variant-numeric: tabular-nums;
}
.v2-badge-na { background: #c9d3d8; }

/* Layout pagine hub */
.v2-crumbs { max-width: 1200px; margin: 0 auto; }
.v2-wrap { max-width: 1200px; margin: 0 auto; padding: 24px 20px 72px; }
.v2-narrow { max-width: 880px; }
.v2-head { padding: 12px 0 8px; }
.v2-head .qs-lead { max-width: 760px; margin: 12px 0 20px; }
.v2-h1 { font-size: clamp(34px, 5vw, 56px); margin: 6px 0 0; }
.v2-h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 18px; }
.v2-h2s { font-family: var(--qs-font-display); font-size: 22px; color: var(--qs-deep); margin: 32px 0 8px; }
.v2-h3 { font-family: var(--qs-font-display); font-size: 19px; margin: 28px 0 10px; }
.v2-h3 a { color: var(--qs-deep); text-decoration: none; }
.v2-section { margin-top: 48px; }
.v2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.v2-grid .beach-card, .bch-nearby-grid .beach-card { text-decoration: none; color: inherit; }

.v2-map { height: 460px; border-radius: 18px; overflow: hidden; background: #D8EAEF; border: 1px solid var(--qs-border); }
.v2-map-error::after { content: "—"; display: block; padding: 20px; color: var(--qs-text-muted); }

.v2-prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.v2-prov-card {
  display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 14px; background: #fff;
  border: 1px solid var(--qs-border); text-decoration: none; color: var(--qs-deep); transition: box-shadow .15s;
}
.v2-prov-card:hover { box-shadow: var(--qs-shadow-md); }
.v2-prov-card strong { font-family: var(--qs-font-display); font-size: 18px; }
.v2-prov-card span { font-size: 14px; color: var(--qs-text-soft); }
.v2-prov-card .v2-prov-best { color: var(--qs-score-perfect, #2E8B6E); font-weight: 600; }

.v2-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v2-table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; border-radius: 14px; overflow: hidden; }
.v2-table th, .v2-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef2f4; }
.v2-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #5a6b73; background: #fbfaf7; }
.v2-table a { color: var(--qs-deep); font-weight: 600; text-decoration: none; }
.v2-table a:hover { text-decoration: underline; }
.v2-td-score { width: 70px; }
.v2-rank { color: #9aa7ad; width: 36px; font-variant-numeric: tabular-nums; }

.v2-chips { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.v2-chip {
  display: inline-block; padding: 10px 16px; border: 1px solid #d7e3ea; border-radius: 999px; background: #fff;
  color: #0B4F6C; text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.2;
}
.v2-chip:hover { border-color: var(--qs-deep); }

.v2-updated { font-size: 13px; color: #7a8990; margin: 6px 0 20px; }
.v2-answer { font-size: 17px; line-height: 1.6; color: #1a3540; }
.v2-answer a { color: var(--qs-deep); font-weight: 600; }
.v2-note { font-size: 14px; color: #5a6b73; }

/* Esplora */
.v2-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 20px; }
.v2-filters select, .v2-search input {
  height: 46px; border-radius: 12px; border: 1px solid var(--qs-border-strong); background: #fff;
  padding: 0 14px; font: inherit; font-size: 15px; color: var(--qs-deep);
}
.v2-search { flex: 1 1 260px; }
.v2-search input { width: 100%; box-sizing: border-box; }
.v2-filters select { flex: 0 1 200px; }
.v2-filters select:disabled { opacity: .5; }
.v2-explore { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.v2-explore .v2-map { height: 640px; position: sticky; top: 84px; }
.v2-count { font: 600 13px var(--qs-font-mono); color: var(--qs-text-muted); letter-spacing: .04em; margin: 0 0 10px; text-transform: uppercase; }
.v2-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.v2-row a {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff;
  border: 1px solid var(--qs-border); text-decoration: none; color: var(--qs-deep);
}
.v2-row a:hover { border-color: var(--qs-border-strong); box-shadow: var(--qs-shadow-sm); }
.v2-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v2-row-main strong { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-row-main span { font-size: 13px; color: var(--qs-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-row-type { font-size: 12px; color: var(--qs-text-soft); }
.v2-reg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.v2-reg-block { background: #fff; border: 1px solid var(--qs-border); border-radius: 16px; padding: 18px 20px; }
.v2-reg-block h3 { margin: 0 0 8px; font-family: var(--qs-font-display); font-size: 20px; }
.v2-reg-block h3 a { color: var(--qs-deep); text-decoration: none; }
.v2-reg-block h3 span { font: 600 12px var(--qs-font-mono); color: var(--qs-text-muted); margin-left: 6px; }
.v2-reg-block ul { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.v2-reg-block li a { color: var(--qs-deep); }
.v2-reg-block li span { color: var(--qs-text-faint); font-size: 12px; }
.v2-reg-today { font-size: 14px; font-weight: 600; color: var(--qs-orange-dark, #E5882C); text-decoration: none; }

/* Home */
.v2-home-hero .home-hero-grid { align-items: center; }
.v2-hero-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v2-hero-cards .beach-card { text-decoration: none; color: inherit; }
.v2-near { padding: 64px 0 40px; background: #fff; }
.v2-near .qs-lead { max-width: 640px; }
.v2-near-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0 12px; }
.v2-near-or { color: var(--qs-text-muted); font-size: 14px; }
.v2-near-actions select { height: 46px; border-radius: 12px; border: 1px solid var(--qs-border-strong); padding: 0 14px; font: inherit; background: #fff; color: var(--qs-deep); }
.v2-near-status { min-height: 1.4em; color: var(--qs-text-soft); font-size: 14px; }
.v2-regions { padding: 64px 0; margin-top: 0; background: #f8f6f1; }
.v2-reg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 28px; }
.v2-reg-card { background: #fff; border-radius: 16px; padding: 22px; border: 1px solid var(--qs-border); }
.v2-reg-card h3 { margin: 0 0 10px; font-family: var(--qs-font-display); font-size: 21px; }
.v2-reg-card h3 a { color: var(--qs-deep); text-decoration: none; }
.v2-top { list-style: none; counter-reset: top; padding: 0; margin: 0 0 14px; }
.v2-top li { counter-increment: top; display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f2f3; }
.v2-top li::before { content: counter(top); font: 700 12px var(--qs-font-mono); color: var(--qs-text-faint); width: 14px; }
.v2-top li a { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; color: var(--qs-deep); }
.v2-top-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-top-place { font-size: 12.5px; color: var(--qs-text-muted); }
.v2-reg-links { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.v2-reg-links a { color: var(--qs-orange-dark, #E5882C); font-weight: 600; text-decoration: none; }
.v2-factors { max-width: 880px; margin: 32px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* Scheda */
.v2-where { grid-template-columns: 1fr 1fr !important; align-items: stretch; }
.v2-minimap { min-height: 280px; border-radius: 16px; overflow: hidden; background: #D8EAEF; border: 1px solid var(--qs-border); }
.v2-day-slots { display: flex; justify-content: center; gap: 6px; font: 600 10.5px var(--qs-font-mono); color: var(--qs-text-muted); }
.v2-404 { text-align: center; padding-top: 80px; }

/* Pin mappa (anche fuori da esplora.css) */
.qs-map-pin {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 2.5px solid currentColor; font: 700 12px var(--qs-font-mono);
  box-shadow: 0 2px 6px rgba(11,79,108,.2);
}
.qs-map-cluster {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--c, #2F8F6F); color: #fff; font: 700 13px var(--qs-font-mono);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c, #2F8F6F) 25%, transparent);
}
.marker-cluster, .marker-cluster div { background: transparent !important; }

@media (max-width: 900px) {
  .v2-explore { grid-template-columns: 1fr; }
  .v2-explore .v2-map { position: static; height: 380px; }
  .v2-where { grid-template-columns: 1fr !important; }
  .v2-hero-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .v2-wrap { padding: 16px 16px 56px; }
  .v2-map { height: 360px; }
  .v2-filters select { flex: 1 1 45%; }
  .v2-factors { grid-template-columns: 1fr; }
  .v2-hero-cards { display: none; }
  .v2-row-type { display: none; }
  .v2-table th:nth-child(3), .v2-table td:nth-child(3) { display: none; }
  .v2-credits th:nth-child(3), .v2-credits td:nth-child(3) { display: table-cell; }
  .v2-beta-chip { display: none; }
}

/* Footer nazionale: brand + 4 colonne */
@media (min-width: 901px) {
  .qs-footer-inner { grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
}

/* FAQ scheda nuova: una colonna leggibile */
.v2-faq .bch-body-inner { display: block; max-width: 880px; }
.v2-faq .bch-faq-item { margin-bottom: 8px; }

/* Card: immagine sempre 16:9 anche su mobile (foto, vista aerea, mappa OSM e gradiente hanno la stessa
   altezza; un taglio più basso toglierebbe la dicitura © OpenStreetMap stampata in basso nelle mappe) */
.beach-card-media.v2-media { aspect-ratio: 16/9; background-position: center; }
@media (max-width: 600px) {
  .v2-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* Previsioni scheda nuova: su mobile tutti i 7 giorni con scroll orizzontale */
@media (max-width: 960px) {
  .v2-forecast .bch-forecast-grid { display: flex; overflow-x: auto; gap: 6px; scroll-snap-type: x proximity; padding-bottom: 4px; }
  .v2-forecast .bch-forecast-grid .bch-day { display: block !important; flex: 0 0 78px; scroll-snap-align: start; }
}
/* le colonne della griglia scheda non devono allargarsi al contenuto scrollabile (previsioni) */
.bch-body-inner > * { min-width: 0; }
.v2-stale { margin-top: 6px; font-size: 12.5px; color: #8a5a00; background: #fff4e0; border-radius: 8px; padding: 4px 8px; display: inline-block; }

/* Attribuzione foto (licenze CC: autore + licenza + link) */
.v2-photo-credit { display: block; margin-top: 8px; font-size: 11.5px; color: rgba(255,248,238,.8); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.v2-photo-credit a { color: inherit; text-decoration: underline; }

/* Home: mappa Italia completa */
.v2-bigmap { padding: 64px 0 56px; background: var(--qs-sand, #FFF8EE); scroll-margin-top: 72px; }
.v2-bigmap .qs-lead { max-width: 720px; }
.v2-bigmap-frame { position: relative; max-width: 1280px; margin: 20px auto 0; padding: 0 24px; }
.v2-bigmap .v2-map { height: 70vh; min-height: 420px; max-height: 860px; }
.v2-map-activate { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 500; box-shadow: var(--qs-shadow-lg); }
.v2-legend { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--qs-text-soft); }
.v2-legend li { display: inline-flex; align-items: center; gap: 7px; }
.v2-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(11,79,108,.2); }
.v2-legend-range { font: 600 11.5px var(--qs-font-mono); color: var(--qs-text-muted); }
@media (max-width: 600px) {
  .v2-bigmap { padding: 44px 0 40px; }
  .v2-bigmap-frame { padding: 0 12px; }
  .v2-bigmap .v2-map { height: 60vh; min-height: 340px; }
}
iframe.v2-minimap { border: 0; width: 100%; display: block; }
.bch-hero-glink { display: contents; }
/* vista aerea: etichetta per non scambiarla per una foto */
.v2-hero-badge { position: absolute; top: 16px; right: 16px; z-index: 2; padding: 4px 10px; border-radius: 999px;
  background: rgba(11,47,68,.72); color: var(--qs-sand); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
/* Places UI Kit (foto Google Maps, solo a runtime) */
.v2-gplace { width: 360px; max-width: 100%; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); color: #1b2a33; }
.v2-gplace gmp-place-details-compact { width: 100%; }
@media (max-width: 720px) { .v2-gplace { width: 100%; } }
/* vista satellite Mapbox (Static Images API): ancorata in basso, dove Mapbox stampa il logo */
.v2-sat-img { object-position: center bottom; }
/* stesso overlay delle schede con foto, alleggerito solo nell'angolo basso-sinistro (sfumato, senza bordi)
   dove Mapbox stampa il suo logo, che deve restare riconoscibile */
.v2-hero-sat::before {
  -webkit-mask-image: radial-gradient(ellipse 150px 70px at 0 100%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.25) 45%, #000 100%);
  mask-image: radial-gradient(ellipse 150px 70px at 0 100%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.25) 45%, #000 100%);
}
/* pulsante "Vista satellite" sugli hero con foto */
.v2-hero-tools { position: absolute; top: 16px; right: 16px; z-index: 3; display: flex; gap: 8px; align-items: center; }
.v2-hero-tools .v2-hero-badge { position: static; }
.v2-sat-toggle { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,248,238,.6); background: rgba(11,47,68,.72); color: var(--qs-sand); }
.v2-sat-toggle[aria-pressed="true"] { background: var(--qs-sand); color: var(--qs-deep); }
.v2-sat-toggle:focus-visible { outline: 2px solid var(--qs-gold); outline-offset: 2px; }

/* ── a11y (F3): skip link, titoli footer, lingua corrente, nota sezione Salento ── */
.v2-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 8px;
  background: var(--qs-deep); color: var(--qs-sand); font-weight: 700; text-decoration: none; }
.v2-skip:focus { top: 12px; outline: 2px solid var(--qs-gold); outline-offset: 2px; }
.qs-footer-col .qs-footer-h { font-family: var(--qs-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--qs-gold); margin: 0 0 16px; line-height: inherit; }
.qs-nav-lang-menu a[aria-current="true"] { color: var(--qs-deep); background: rgba(255,158,61,0.08); }
.v2-section-note { max-width: 1120px; margin: 12px auto 0; padding: 10px 16px; border-radius: 10px; font-size: 14px;
  background: rgba(11,79,108,0.06); color: var(--qs-deep); }
.v2-section-note a { color: inherit; font-weight: 700; }
@media (max-width: 1150px) { .v2-section-note { margin: 12px 16px 0; } }

/* ── hub e schede (F4/F5): filtri con etichetta visibile, testi calcolati, venti, guide, crediti ── */
.v2-filters { align-items: flex-end; }
.v2-fieldset { display: flex; flex-direction: column; gap: 4px; flex: 0 1 200px; }
.v2-fieldset select { flex: none; width: 100%; }
.v2-field-lbl { font: 600 11px var(--qs-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qs-text-muted); }
.v2-near-or { font-size: 14px; color: var(--qs-text-soft); }
.v2-prose { max-width: 820px; }
.v2-prose p, .v2-faq-item p { font-size: 16px; line-height: 1.65; color: #1a3540; }
.v2-prose a, .v2-faq-item a, .v2-note a, .v2-best-list a { color: var(--qs-deep); font-weight: 600; }
.v2-faq-item { max-width: 820px; border-bottom: 1px solid var(--qs-border); padding: 4px 0 10px; }
.v2-faq-item h3 { font-family: var(--qs-font-display); font-size: 18px; margin: 14px 0 6px; color: var(--qs-deep); }
.v2-more-link { margin: 8px 0 0; font-size: 14px; }
.v2-more-link a { color: var(--qs-orange-dark, #E5882C); font-weight: 600; text-decoration: none; }
.v2-best-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.v2-best-list li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.v2-byline { font-size: 13px; color: var(--qs-text-muted); margin: 12px 0 0; }
.v2-byline a { color: inherit; }
.v2-wind-table th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--qs-deep); background: none; }
.v2-wind-offshore td:last-child { color: var(--qs-score-perfect, #2E8B6E); font-weight: 600; }
.v2-wind-onshore td:last-child { color: #C2462F; font-weight: 600; }
.v2-winds .bch-body-inner, .v2-guide .bch-body-inner { display: block; max-width: 880px; }
.v2-toc { background: #fbfaf7; border: 1px solid var(--qs-border); border-radius: 12px; padding: 12px 18px; margin: 12px 0 20px; }
.v2-toc ol { margin: 0; padding-left: 18px; }
.v2-toc .v2-toc-l3 { margin-left: 14px; list-style: circle; }
.v2-sources { font-size: 14px; }
.v2-pager { display: flex; gap: 8px; margin: 12px 0; }
.v2-pager a { padding: 4px 10px; border: 1px solid var(--qs-border); border-radius: 8px; text-decoration: none; color: var(--qs-deep); }
.v2-pager a[aria-current="page"] { background: var(--qs-deep); color: #fff; }
.v2-credit-regions { columns: 3 220px; padding-left: 18px; }
.v2-credit-regions span { color: var(--qs-text-faint); font-size: 12px; }
@media (max-width: 600px) { .v2-filters .v2-fieldset { flex: 1 1 45%; } }
/* breadcrumb delle pagine della sezione Salento (zone/tipo/…): non caricano spiaggia.css */
.bch-breadcrumb { max-width: 1200px; margin: 0 auto; padding: 16px 24px 0; font-family: var(--qs-font-mono);
  font-size: 12.5px; color: var(--qs-text-muted); letter-spacing: 0.02em; }
.bch-breadcrumb a { color: var(--qs-text-muted); }
.bch-breadcrumb a:hover { color: var(--qs-deep); }
.bch-breadcrumb .sep { margin: 0 6px; }
.bch-breadcrumb .current { color: var(--qs-deep); font-weight: 600; }
/* schede legacy: link a provincia, regione e mare oggi */
.v2-geo-links.bch-nearby { padding-bottom: 8px; }
.v2-geo-links p { margin: 8px 0 0; line-height: 1.8; }
.v2-geo-links a { color: var(--qs-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* link affiliati GetYourGuide (sitelib/affiliate.py): card discreta con dicitura visibile */
.v2-aff { margin: 40px 0 0; max-width: 820px; background: #fbfaf7; border: 1px solid var(--qs-border); border-radius: 14px; padding: 16px 20px; }
.v2-guide .v2-aff { margin: 20px 0 8px; }
.v2-aff-h { margin: 0 0 8px; font: 700 11px/1.4 var(--qs-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--qs-text-muted); }
.v2-aff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.v2-aff-list a { color: var(--qs-deep); font-weight: 600; text-decoration: underline; text-decoration-color: var(--qs-border-strong); text-underline-offset: 3px; overflow-wrap: anywhere; }
.v2-aff-list a:hover { text-decoration-color: var(--qs-deep); }
.v2-aff-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--qs-text-muted); }