/* =============================================================
   MAREA EVENTS — Component & motif styles.
   Load order: tokens.css -> Tailwind (CDN) -> styles.css
   These are the reusable, brand-specific pieces that go beyond
   utility classes: buttons, cards, the wave motif, nav & footer.
   ============================================================= */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-blu-profondo);
  background-color: var(--c-pietra-tenue);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .font-display { font-family: var(--font-display); }
:target { scroll-margin-top: calc(var(--header-h) + 24px); }

.container-marea {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-marea-blu);
}

/* ---------- Buttons (all pill-shaped) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(0.99); }

/* Primary — solid Corallo, one main action per screen */
.btn-primary {
  background-color: var(--c-corallo);
  color: var(--c-bianco);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background-color: #d84616; transform: translateY(-2px); box-shadow: var(--shadow-float); }

/* Secondary — outline Blu */
.btn-secondary {
  background-color: transparent;
  color: var(--c-marea-blu);
  border: 2px solid var(--c-marea-blu);
}
.btn-secondary:hover { background-color: var(--c-marea-blu); color: var(--c-bianco); }

/* Ghost — minimal link style */
.btn-ghost {
  background: transparent;
  color: var(--c-blu-profondo);
  padding-inline: 0.6rem;
}
.btn-ghost:hover { color: var(--c-corallo); }

/* Circular — arrow button for cards/images */
.btn-circle {
  width: 48px; height: 48px;
  padding: 0;
  justify-content: center;
  border-radius: var(--r-pill);
  background-color: var(--c-marea-blu);
  color: var(--c-bianco);
}
.btn-circle:hover { background-color: var(--c-corallo); transform: rotate(-8deg); }

/* ---------- Cards ---------- */
.card {
  background-color: var(--c-bianco);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }

.card-media { aspect-ratio: 16 / 9; background: var(--c-sabbia); object-fit: cover; width: 100%; }

/* Pillar card — category badge tinted per pillar via --accent */
.pillar-card { --accent: var(--c-marea-blu); }
.pillar-card .badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.pillar-card .card-title { font-family: var(--font-display); font-size: 26px; margin-top: .5rem; }

/* Panel — large floating surface */
.panel {
  background: var(--c-bianco);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-float);
}
.panel-sabbia { background: var(--c-sabbia); }

/* ---------- Header / floating pill nav ----------
   Fixed to the top and layered above every section. Transparent over
   the hero (only the floating pill shows, so nav text stays legible on
   both light and dark heroes), then transitions to a solid Crema bar
   with a light shadow and condensed height once scrolled past the hero
   (JS toggles `.scrolled` — see main.js). */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 16px 0;
  background: transparent;
  transition: background-color .35s ease, box-shadow .35s ease,
              padding .35s ease, backdrop-filter .35s ease;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--c-crema) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px -14px rgba(18, 58, 82, 0.28);
  padding: 8px 0;
}
.nav-pill {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 10px 12px 10px 22px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-bianco) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(255,255,255,0.6);
  transition: background-color .35s ease, box-shadow .35s ease,
              border-color .35s ease, padding .35s ease;
}
/* Once the bar is solid, let the pill dissolve into it (no double surface). */
.site-header.scrolled .nav-pill {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-top: 6px; padding-bottom: 6px;
}
.nav-links { display: flex; gap: 1.4rem; align-items: center; }
.nav-links a {
  font-weight: 700; font-size: 15px; text-decoration: none;
  color: var(--c-blu-profondo); transition: color .2s ease;
}
.nav-links a:hover { color: var(--c-corallo); }
.lang-toggle a { font-size: 13px; font-weight: 800; color: var(--c-pietra); text-decoration: none; }
.lang-toggle a[aria-current="true"] { color: var(--c-marea-blu); }

/* ---------- Nav dropdown (Eventi → the six worlds) ----------
   Opens on hover and on focus-within, so it is reachable by keyboard
   without JS. The .nav-dd-panel is bridged to the trigger by padding-top
   on the wrapper, so the pointer can cross the gap without closing it. */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd-trigger { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.nav-dd-trigger i { font-size: 12px; transition: transform .2s ease; }
.nav-dd:hover .nav-dd-trigger i,
.nav-dd:focus-within .nav-dd-trigger i { transform: rotate(180deg); }
.nav-dd-panel {
  position: absolute; top: 100%; left: 50%;
  width: min(548px, 92vw);
  padding-top: 14px;
  transform: translate(-50%, 8px) scale(.97);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .26s ease, transform .32s cubic-bezier(.22, 1, .36, 1), visibility .32s;
}
.nav-dd:hover .nav-dd-panel,
.nav-dd:focus-within .nav-dd-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

/* Frosted glass slab: a translucent, blurred surface that picks up the
   hero photo behind it, lit by a specular seam along the top edge.
   The panel floats over the hero headline — 52px Cormorant in Blu
   Profondo, which survives blur alone and ghosts through the labels.
   The 80% Crema floor plus the brightness lift is what washes it out;
   below ~80% the headline reads through the bottom row. */
.nav-dd-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 10px;
  border-radius: 26px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 52%),
    color-mix(in srgb, var(--c-crema) 80%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.06);
  backdrop-filter: blur(30px) saturate(180%) brightness(1.06);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 28px 64px -20px rgba(18, 58, 82, .40),
    0 6px 18px -10px rgba(18, 58, 82, .18),
    inset 0 1px 0 rgba(255,255,255,.85);
}

/* Mini card, one per service */
.nav-dd-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .7rem; border-radius: 18px;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .24s cubic-bezier(.22, 1, .36, 1),
              background-color .24s ease, border-color .24s ease, box-shadow .24s ease;
}
/* Accent wash, faded in under the content on hover. */
.nav-dd-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 22%, transparent) 0%,
    color-mix(in srgb, var(--accent) 6%, transparent) 100%);
  opacity: 0; transition: opacity .24s ease;
}
.nav-dd-card:hover, .nav-dd-card:focus-visible {
  transform: translateY(-2px);
  background: rgba(255,255,255,.66);
  border-color: color-mix(in srgb, var(--accent) 32%, rgba(255,255,255,.5));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 10px 22px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.nav-dd-card:hover::before, .nav-dd-card:focus-visible::before { opacity: 1; }

/* Icon chip — tinted glass tile; the motif itself is masked in ::before,
   since a mask on the chip would clip its own background. */
.nav-dd-icon {
  position: relative; z-index: 1; flex: none;
  width: 38px; height: 38px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 15%, rgba(255,255,255,.55));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), background-color .24s ease;
}
.nav-dd-icon::before {
  content: ""; position: absolute; inset: 8px;
  background-color: var(--accent);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.nav-dd-card:hover .nav-dd-icon {
  transform: scale(1.06) rotate(-4deg);
  background: color-mix(in srgb, var(--accent) 24%, rgba(255,255,255,.55));
}

.nav-dd-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.nav-dd-card .nav-dd-label {
  font-size: 14px; font-weight: 800; line-height: 1.25;
  color: var(--c-blu-profondo);
}
.nav-dd-card .nav-dd-note {
  font-size: 11.5px; font-weight: 600; line-height: 1.3;
  letter-spacing: .01em;
  /* Pale pillar hues fail as text; ink them toward Blu Profondo. */
  color: color-mix(in srgb, var(--accent) 42%, var(--c-blu-profondo));
}

/* Backdrop-filter is what sells the effect; where it is unsupported or
   unwanted, fall back to an opaque panel rather than muddy text. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav-dd-inner { background: var(--c-crema); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav-dd-inner { background: var(--c-crema); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-dd-card { background: rgba(255,255,255,.9); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dd-panel { transition: opacity .15s ease, visibility .15s; transform: translate(-50%, 0); }
  .nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { transform: translate(-50%, 0); }
  .nav-dd-card, .nav-dd-icon { transition: none; }
  .nav-dd-card:hover { transform: none; }
  .nav-dd-card:hover .nav-dd-icon { transform: none; }
}

/* Mobile panel: the worlds are shown as an indented list, always open.
   Left-align every row so the indented sub-list reads as a child of
   "Eventi" rather than a separate centred block. */
.nav-mobile-panel { align-items: stretch; text-align: left; }
.nav-mobile-panel .nav-mobile-sub {
  display: flex; flex-direction: column; gap: .1rem;
  margin: .1rem 0 .3rem .9rem;
  padding-left: .75rem;
  border-left: 2px solid color-mix(in srgb, var(--c-sabbia) 90%, transparent);
}
.nav-mobile-panel .nav-mobile-sub a { font-size: 14px; font-weight: 600; color: var(--c-pietra); }
.nav-mobile-panel .nav-mobile-sub a:hover { color: var(--c-corallo); }

.nav-mobile-toggle { display: none; }
.nav-mobile-panel { display: none; }
@media (max-width: 860px) {
  .nav-links.primary { display: none; }
  .nav-mobile-toggle { display: inline-flex; }
  .nav-mobile-panel.open { display: flex; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-blu-profondo);
  color: var(--c-crema);
  margin-top: 0;
}
.site-footer a { color: var(--c-crema); text-decoration: none; opacity: .85; }
.site-footer a:hover { opacity: 1; color: var(--c-blu-onda); }

/* ---------- Wave motif ---------- */
/* Section divider wave (place at top/bottom of a section) */
.wave-divider { display: block; width: 100%; height: auto; line-height: 0; }
.wave-divider svg { display: block; width: 100%; height: 100%; }

/* Signature animated wave — ONE per page. Layered SVG that drifts. */
.signature-wave { position: relative; overflow: hidden; }
.signature-wave .wave-layer {
  position: absolute; bottom: 0; left: -25px; width: calc(100% + 50px);
  will-change: transform;
}
.signature-wave .wave-layer.l1 { animation: wave-drift 12s ease-in-out infinite; opacity: .5; }
.signature-wave .wave-layer.l2 { animation: wave-drift 9s ease-in-out infinite reverse; opacity: .8; }

@keyframes wave-drift {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(-25px); }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Staggered reveal — children fade up in sequence (hero, card grids) */
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .15s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .25s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .35s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .45s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .55s; }

@media (prefers-reduced-motion: reduce) {
  .signature-wave .wave-layer { animation: none; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =============================================================
   HOMEPAGE COMPONENTS — built to the approved reference.
   ============================================================= */

/* ---------- Shared section rhythm ---------- */
.section { padding-block: clamp(3.5rem, 8vw, 6rem); }

/* ---------- Section card ----------
   Every major section (Hero excluded) is wrapped in a .section-card:
   a contained, rounded surface with a soft Blu-Profondo-tinted shadow,
   consistent internal padding, and a vertical gap so the page background
   shows through between cards. Backgrounds alternate Crema / Sabbia for
   rhythm; feature sections (.story dark, .sunset) keep their own fill.
   Defined AFTER .section so its padding-block wins when both are present. */
.section-card {
  position: relative;
  width: min(1280px, calc(100% - 2 * clamp(1rem, 4vw, 2.75rem)));
  margin-inline: auto;
  margin-block: clamp(1.25rem, 3.5vw, 2.5rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-radius: 32px; /* rounded-3xl */
  background: var(--c-crema);
  box-shadow: 0 26px 60px -30px rgba(18, 58, 82, 0.30),
              0 6px 18px -10px rgba(18, 58, 82, 0.12);
  overflow: hidden; /* clip inner motifs / media to the rounded corners */
}
.section-card--crema  { background: var(--c-crema); }
.section-card--sabbia { background: var(--c-sabbia); }
/* First card sits just below the hero — trim its top gap. */
.section-card:first-of-type { margin-top: clamp(0.75rem, 2vw, 1.5rem); }

.section-head { max-width: 640px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-title { font-size: clamp(30px, 5vw, 44px); font-weight: 500; line-height: 1.1; color: var(--c-blu-profondo); }
.section-title em { font-style: italic; color: var(--c-corallo); }
.section-title .wave { font-style: italic; color: var(--c-blu-onda); }
.section-sub { margin-top: 1rem; font-size: var(--fs-subtitle); font-weight: 400; color: var(--c-pietra); line-height: 1.6; }

/* ---------- Decorative reef motif (recolored marea_elementi.svg) ---------- */
.reef {
  position: absolute; pointer-events: none; z-index: 0;
  background-repeat: no-repeat; background-size: contain;
  opacity: .10;
}
.reef-corallo { background-image: url("/assets/img/reef-corallo.svg"); }
.reef-blu     { background-image: url("/assets/img/reef-blu.svg"); }

/* ---------- Brand pattern motifs (from the official pattern board) ----------
   Same recipe as .reef (absolute, contain, low opacity, no pointer events):
   full illustrated tiles instead of the single-line reef silhouette, used as
   a quieter textile-like watermark behind hero/quote moments. One variant
   per pillar family so the six worlds keep their own accent even here. */
.reef-onde        { background-image: url("/assets/img/patterns/pattern-onde.webp"); }
.reef-alghe-corallo { background-image: url("/assets/img/patterns/pattern-alghe-corallo.webp"); }
.reef-alghe-blu   { background-image: url("/assets/img/patterns/pattern-alghe-blu.webp"); }
.reef-nautilus    { background-image: url("/assets/img/patterns/pattern-nautilus.webp"); }
.reef-fiori-oro   { background-image: url("/assets/img/patterns/pattern-fiori-oro.webp"); }
.reef-fiori-rosa  { background-image: url("/assets/img/patterns/pattern-fiori-rosa.webp"); }

/* Large single-composition illustrations (the reef/coral "moodboard" scene),
   used once per page as a signature editorial graphic rather than a tiled
   pattern — e.g. beside the About-page story. */
.illustration {
  position: absolute; pointer-events: none; z-index: 0;
  background-repeat: no-repeat; background-size: contain;
  opacity: .9;
}
.illustration-blu     { background-image: url("/assets/img/patterns/elemento-blu.webp"); }
.illustration-corallo { background-image: url("/assets/img/patterns/elemento-corallo.webp"); }

/* ---------- Hero brand mark ("M" of the logo) ----------
   Replaces the reef pattern in the service heroes. The monogram bleeds
   off the right edge; its outline traces itself, then a tide rises to
   fill the letter. Markup lives in /partials/hero-mark.html.
   Sits at z-index 1: above the photo + gradient, below the copy (z-index 2). */
.hero-mark {
  position: absolute; z-index: 1; pointer-events: none;
  top: 50%; right: clamp(1rem, 4vw, 3.5rem); transform: translateY(-52%);
  height: min(66%, 460px); aspect-ratio: 156 / 197;
  opacity: .7;
}
/* The tide path is wider than the viewBox so it can drift; the clip-path
   keeps it inside the letter, so nothing spills.
   No blend mode: the heroes run from photo to flat terracotta, and screen
   went muddy on the warm ones. A plain glow hugs the letterform instead of
   painting a halo over the background. */
.hero-mark .brand-mark {
  position: relative; width: 100%; height: 100%;
  filter: drop-shadow(0 1px 10px rgba(18, 58, 82, .45));
}

.brand-mark__stroke {
  fill: none;
  stroke: var(--c-crema);
  stroke-width: 1.1;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mark-trace 2.6s cubic-bezier(.65, 0, .35, 1) .25s forwards;
}
/* Rise + drift are split across two groups so each owns its transform. */
.brand-mark__rise {
  transform: translateY(250px);
  animation: mark-tide-rise 2.4s cubic-bezier(.33, 1, .68, 1) 1.35s forwards;
}
.brand-mark__wave {
  animation: mark-tide-drift 7s ease-in-out 3.6s infinite;
}

@keyframes mark-trace     { to { stroke-dashoffset: 0; } }
@keyframes mark-tide-rise { to { transform: translateY(12px); } }
@keyframes mark-tide-drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-46px); }
}

/* Narrow screens: the copy runs the full width, so there is no clear space
   left to give the mark. Drop it back to a watermark behind the text. */
@media (max-width: 900px) {
  .hero-mark { height: 46%; right: -1.5rem; opacity: .3; }
  .hero-mark .brand-mark { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark__stroke { stroke-dashoffset: 0; animation: none; }
  .brand-mark__rise   { transform: translateY(12px); animation: none; }
  .brand-mark__wave   { animation: none; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-top: var(--header-h); /* clear the fixed, transparent header */
  background: linear-gradient(165deg, var(--c-crema) 0%, var(--c-sabbia) 100%);
}
.hero-grid {
  position: relative; z-index: 2;
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1.05fr 0.95fr; align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.hero-title {
  font-size: clamp(42px, 7vw, 72px); font-weight: 500; line-height: 1.02;
  color: var(--c-blu-profondo); margin: .6rem 0 0;
}
.hero-title em { font-style: italic; color: var(--c-corallo); }
.hero-sub { margin-top: 1.4rem; max-width: 52ch; font-size: 18px; color: var(--c-pietra); line-height: 1.7; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.hero-media { position: relative; }
.hero-media img {
  width: 100%; height: 100%; max-height: 560px; object-fit: cover;
  object-position: top center;
  border-radius: var(--r-panel); box-shadow: var(--shadow-float);
  aspect-ratio: 4 / 5;
}
.hero .reef-corallo { top: -6%; right: -8%; width: 46%; height: 90%; opacity: .05; }

/* ---------- Stats row ---------- */
.stats-row {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.5rem);
  margin-top: 2.6rem; padding-top: 1.8rem;
  border-top: 1px solid color-mix(in srgb, var(--c-pietra) 25%, transparent);
}
.stat-num { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1; color: var(--c-corallo); }
.stat-label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-pietra); margin-top: .3rem; }

/* ---------- I nostri mondi — service card ----------
   The design-system service card (DS §07, "tall image style"): a tall
   photo tile with a roman-numeral badge and an arrow disc pinned to the
   top corners, and a white plate floating at the bottom carrying the
   name. Photos are shown at their natural colour, no tint or filter.
   Set --accent per card from the --pillar-* tokens; --accent-ink derives
   from it for the badge/plate text. */
.worlds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 3rem;
}

.world-card {
  --accent-ink: color-mix(in srgb, var(--accent, var(--c-marea-blu)) 62%, var(--c-blu-profondo));
  position: relative; display: block; overflow: hidden;
  /* DS specifies 3/4; trimmed to 4/5 so the six cards don't overrun the
     home. Any change here must keep the plate clear of the badge row. */
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  text-decoration: none; color: inherit;
  box-shadow: 0 12px 30px -20px rgba(18, 58, 82, .4);
  transition: transform .25s ease, box-shadow .25s ease;
}
.world-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }

.world-card-media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.world-card:hover .world-card-media { transform: scale(1.05); }

.world-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--c-bianco); color: var(--accent-ink);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.world-badge i { font-size: 13px; color: var(--accent); }

.world-arrow {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-bianco); color: var(--accent);
  font-size: 18px;
  transition: transform .25s ease;
}
.world-card:hover .world-arrow { transform: translate(2px, -2px); }

.world-plate {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-radius: 18px;
  background: var(--c-bianco);
}
.world-plate-text { min-width: 0; }
.world-name {
  font-family: var(--font-display); font-size: 24px; font-weight: 600;
  line-height: 1.05; color: var(--c-blu-profondo);
}
.world-tag {
  margin-top: 3px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent-ink);
}

/* Brand sea-motif, tinted via mask so one SVG serves every accent. It
   rides in the plate rather than on the photo: the client is having
   decorative graphics pulled off photography across the site. */
.world-motif {
  flex: none; width: 42px; height: 42px;
  background-color: var(--accent);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition: transform .3s ease;
}
.world-card:hover .world-motif { transform: scale(1.08) rotate(-4deg); }

@media (prefers-reduced-motion: reduce) {
  .world-card, .world-arrow, .world-motif { transition: none; }
  .world-card:hover { transform: none; }
  .world-card:hover .world-arrow { transform: none; }
  .world-card:hover .world-motif { transform: none; }
}

/* ---------- Sunset banner ---------- */
.sunset {
  position: relative; overflow: hidden; border-radius: var(--r-panel);
  color: var(--c-crema); box-shadow: var(--shadow-float);
  background: linear-gradient(115deg, #c0341a 0%, var(--c-corallo) 45%, #f4a24a 100%);
}
.sunset-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: clamp(2rem, 5vw, 3.2rem); }
.sunset-eyebrow { color: rgba(255,255,255,.85); }
.sunset-title { font-family: var(--font-display); font-style: italic; font-size: clamp(28px, 4vw, 40px); font-weight: 600; }
.sunset-text { margin-top: .6rem; font-size: 17px; opacity: .95; max-width: 46ch; }
.btn-onlight { background: var(--c-crema); color: var(--c-corallo); box-shadow: var(--shadow-soft); }
.btn-onlight:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-float); }

/* ---------- Brand story ---------- */
.story { position: relative; overflow: hidden; background: var(--c-blu-profondo); color: var(--c-crema); }
.story .reef-blu { bottom: -10%; left: -6%; width: 40%; height: 110%; opacity: .10; filter: brightness(0) invert(1); }
.story-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.story-media img { width: 100%; object-fit: cover; border-radius: var(--r-panel); box-shadow: var(--shadow-float); aspect-ratio: 3 / 4; }
.story .section-title { color: var(--c-crema); }
.story .section-title em { color: var(--c-blu-onda); font-style: italic; }
.story .section-sub { color: rgba(251,246,238,.82); }
.value-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.value-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 700; color: var(--c-crema);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
}
.value-badge i { color: var(--c-blu-onda); }

/* ---------- Gallery ---------- */
.gallery-head { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; grid-auto-flow: dense; gap: 1rem; margin-top: 2.2rem; }
.gallery-item { position: relative; overflow: hidden; border-radius: var(--r-image); box-shadow: var(--shadow-soft); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .9rem .8rem;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #fff;
  background: linear-gradient(to top, rgba(18,58,82,.72), transparent);
  opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease;
}
.gallery-item:hover figcaption { opacity: 1; transform: translateY(0); }
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }
/* Foto allineate in alto-centro (usato su Marea Lab) */
.gallery-top .gallery-item img { object-position: center top; }
/* Immagini del lightbox: cursore cliccabile */
.js-lightbox img { cursor: zoom-in; }

/* --- Icona menu mobile: hamburger/chiudi (bug fix 18.08: bottone era vuoto) --- */
.nav-mobile-toggle {
  width: 40px; height: 40px; padding: 0;
  align-items: center; justify-content: center;
}
.nav-mobile-toggle i { font-size: 22px; line-height: 1; }
.nav-mobile-icon-close { display: none; }
.nav-mobile-toggle.is-open .nav-mobile-icon-open { display: none; }
.nav-mobile-toggle.is-open .nav-mobile-icon-close { display: inline; }

/* ============================================================
   Bande di colore palette Marea (agg. 18.08).
   Una banda per pagina servizio, valori esatti dalla palette.
   ============================================================ */
.band-marea      { background: #387DBA; }
.band-onda       { background: #4EA0D5; }
.band-profondo   { background: #193547; }
.band-corallo    { background: #D75A34; }
.band-sole       { background: #EAB750; }
.band-conchiglia { background: #EFD2D3; }

/* Bande scure -> testo chiaro */
.band-marea, .band-onda, .band-profondo, .band-corallo { color: var(--c-crema); }
.band-marea .eyebrow, .band-onda .eyebrow, .band-profondo .eyebrow, .band-corallo .eyebrow,
.band-marea .section-title, .band-onda .section-title, .band-profondo .section-title, .band-corallo .section-title,
.band-marea .section-sub, .band-onda .section-sub, .band-profondo .section-sub, .band-corallo .section-sub {
  color: var(--c-crema);
}
.band-marea .section-title em, .band-onda .section-title em,
.band-profondo .section-title em, .band-corallo .section-title em { color: #EAB750; }
.band-marea .btn-secondary, .band-onda .btn-secondary,
.band-profondo .btn-secondary, .band-corallo .btn-secondary {
  border-color: var(--c-crema); color: var(--c-crema); background: transparent;
}
.band-marea .btn-secondary:hover, .band-onda .btn-secondary:hover,
.band-profondo .btn-secondary:hover, .band-corallo .btn-secondary:hover {
  background: var(--c-crema); color: var(--c-blu-profondo);
}

/* --- Elemento decorativo grande in filigrana dentro la banda --- */
.band-marea, .band-onda, .band-profondo,
.band-corallo, .band-sole, .band-conchiglia { position: relative; overflow: hidden; }
.band-marea > .container-marea, .band-onda > .container-marea, .band-profondo > .container-marea,
.band-corallo > .container-marea, .band-sole > .container-marea, .band-conchiglia > .container-marea {
  position: relative; z-index: 1;
}
.band-deco {
  position: absolute; right: -3%; top: 50%; transform: translateY(-50%);
  width: min(48vw, 480px); height: min(48vw, 480px);
  pointer-events: none; z-index: 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* colore della sagoma per banda (tono su tono) */
.band-marea    .band-deco { background: rgba(255,255,255,.20); }
.band-onda     .band-deco { background: rgba(255,255,255,.22); }
.band-corallo  .band-deco { background: rgba(255,255,255,.20); }
.band-profondo .band-deco { background: rgba(78,160,213,.28); }
.band-sole     .band-deco { background: rgba(18,58,82,.14); }
.band-conchiglia .band-deco { background: rgba(215,90,52,.20); }
/* quale elemento */
.deco-stella   { -webkit-mask-image: url(/assets/icons/marea_elementi_stella_marina.svg); mask-image: url(/assets/icons/marea_elementi_stella_marina.svg); }
.deco-conchiglia { -webkit-mask-image: url(/assets/icons/marea_elementi_conchiglia.svg); mask-image: url(/assets/icons/marea_elementi_conchiglia.svg); }
.deco-pesce    { -webkit-mask-image: url(/assets/icons/marea_elementi_pesce.svg); mask-image: url(/assets/icons/marea_elementi_pesce.svg); }
.deco-calamaro { -webkit-mask-image: url(/assets/icons/marea_elementi_calamaro.svg); mask-image: url(/assets/icons/marea_elementi_calamaro.svg); }
.deco-palma    { -webkit-mask-image: url(/assets/icons/marea_elementi_palma.svg); mask-image: url(/assets/icons/marea_elementi_palma.svg); }
.deco-sole     { -webkit-mask-image: url(/assets/icons/marea_elementi_sole.svg); mask-image: url(/assets/icons/marea_elementi_sole.svg); }
@media (max-width: 640px) {
  .band-deco { width: 62vw; height: 62vw; right: -16%; opacity: .8; }
}

/* ============================================================
   Cookie consent banner
   ============================================================ */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  display: flex; justify-content: center; padding: 16px;
  pointer-events: none;
}
.cookie-card {
  pointer-events: auto; position: relative; overflow: hidden;
  width: 100%; max-width: 660px;
  background: var(--c-crema); color: var(--c-blu-profondo);
  border: 1px solid color-mix(in srgb, var(--c-blu-profondo) 12%, transparent);
  border-radius: 18px; box-shadow: 0 18px 50px rgba(18,58,82,.22);
  transform: translateY(24px); opacity: 0;
  transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .32s ease;
}
.cookie-banner.is-in .cookie-card { transform: none; opacity: 1; }
.cookie-body { position: relative; z-index: 1; padding: 20px 22px; }
.cookie-title { font-size: 22px; margin: 0 0 .4rem; }
.cookie-text { font-size: 14px; line-height: 1.55; margin: 0 0 1rem;
  color: color-mix(in srgb, var(--c-blu-profondo) 82%, transparent); }
.cookie-text a { color: var(--c-marea-blu); text-decoration: underline; }
.cookie-prefs { display: grid; gap: .5rem; margin: 0 0 1rem; }
.cookie-toggle { display: flex; align-items: center; gap: .6rem; font-size: 14px; font-weight: 600; }
.cookie-toggle input { width: 18px; height: 18px; accent-color: var(--c-marea-blu); }
.cookie-toggle--locked { opacity: .65; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.cookie-actions .btn { padding: .7rem 1.35rem; font-size: 14px; }
.cookie-link { background: none; border: none; cursor: pointer; font: inherit;
  font-weight: 700; font-size: 14px; color: var(--c-blu-profondo);
  text-decoration: underline; padding: .5rem .6rem; }
.cookie-deco {
  position: absolute; right: -22px; top: -22px; width: 150px; height: 150px; z-index: 0;
  background: color-mix(in srgb, var(--c-blu-onda) 15%, transparent);
  -webkit-mask: url(/assets/icons/marea_elementi_conchiglia.svg) no-repeat center / contain;
  mask: url(/assets/icons/marea_elementi_conchiglia.svg) no-repeat center / contain;
}
@media (max-width: 560px) {
  .cookie-card { border-radius: 14px; }
  .cookie-actions .btn { flex: 1 1 auto; justify-content: center; }
  .cookie-deco { width: 110px; height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-card { transition: none; transform: none; opacity: 1; }
}

/* --- Pagine legali (privacy / cookie) --- */
.legal { max-width: 780px; }
.legal h1 { font-size: clamp(30px, 5vw, 42px); line-height: 1.1; margin: 0 0 .4rem; color: var(--c-blu-profondo); }
.legal .legal-meta { color: var(--c-pietra); font-size: 14px; margin: 0 0 2rem; }
.legal h2 { font-family: var(--font-display); font-size: 24px; margin: 2.2rem 0 .6rem; color: var(--c-blu-profondo); }
.legal h3 { font-size: 17px; margin: 1.3rem 0 .3rem; color: var(--c-blu-profondo); }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: color-mix(in srgb, var(--c-blu-profondo) 88%, transparent); }
.legal ul { margin: .4rem 0 1rem 1.2rem; display: grid; gap: .35rem; }
.legal a { color: var(--c-marea-blu); text-decoration: underline; }
.legal table { width: 100%; border-collapse: collapse; margin: .6rem 0 1.4rem; font-size: 14px; }
.legal th, .legal td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid color-mix(in srgb, var(--c-blu-profondo) 12%, transparent); vertical-align: top; }
.legal th { font-weight: 700; color: var(--c-blu-profondo); }

/* --- Esito invio form --- */
.form-status {
  margin: .4rem 0 0; padding: .9rem 1.1rem; border-radius: 12px;
  font-weight: 600; font-size: 15px; line-height: 1.4;
}
.form-status.is-ok  { background: color-mix(in srgb, #2e9e6b 14%, transparent); color: #1c6d49; }
.form-status.is-err { background: color-mix(in srgb, var(--c-corallo) 14%, transparent); color: #b23a1a; }
.footer-news .form-status { grid-column: 1 / -1; }

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.testi-card { background: var(--c-bianco); border-radius: var(--r-card); box-shadow: var(--shadow-soft); padding: 2rem 1.8rem; display: flex; flex-direction: column; gap: 1rem; border: 1px solid color-mix(in srgb, var(--c-sabbia) 60%, transparent); }
.stars { display: inline-flex; gap: .15rem; color: #f0a500; font-size: 17px; }
.testi-quote { font-family: var(--font-display); font-size: 20px; font-style: italic; line-height: 1.5; color: var(--c-blu-profondo); }
.testi-author { margin-top: auto; }
.testi-name { font-weight: 800; font-size: 15px; color: var(--c-blu-profondo); }
.testi-meta { font-size: 13px; color: var(--c-pietra); margin-top: .1rem; }
.trust-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid color-mix(in srgb, var(--c-pietra) 22%, transparent); }
.trust-item { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 15px; color: var(--c-blu-profondo); }
.trust-item i { color: var(--c-corallo); font-size: 20px; }

/* ---------- Contact form ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 3.5rem); }
.contact-list { list-style: none; display: grid; gap: .9rem; margin-top: 1.8rem; }
.contact-list a, .contact-list li { display: inline-flex; align-items: center; gap: .7rem; color: var(--c-blu-profondo); text-decoration: none; font-weight: 600; }
.contact-list i { color: var(--c-marea-blu); font-size: 20px; }
.contact-list a:hover { color: var(--c-corallo); }
.form-card { background: var(--c-bianco); border-radius: var(--r-panel); box-shadow: var(--shadow-float); padding: clamp(1.6rem, 4vw, 2.4rem); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-field { display: grid; gap: .4rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 800; letter-spacing: .03em; color: var(--c-blu-profondo); }
.form-field input, .form-field select, .form-field textarea {
  font: inherit; font-size: 15px; color: var(--c-blu-profondo);
  padding: .8rem 1rem; border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--c-pietra) 22%, transparent);
  background: var(--c-crema); transition: border-color .2s ease, box-shadow .2s ease;
}
.form-field textarea { border-radius: 18px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--c-marea-blu);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-marea-blu) 18%, transparent);
}

/* ---------- Footer additions ---------- */
.footer-brand-tag { max-width: 34ch; opacity: .8; font-size: 15px; margin-top: .8rem; line-height: 1.6; }
.footer-social { display: flex; gap: .7rem; margin-top: 1.2rem; }
.footer-social a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 20px; opacity: 1; }
.footer-social a:hover { background: var(--c-corallo); }
.footer-news { display: flex; gap: .5rem; margin-top: .9rem; max-width: 320px; }
.footer-news input { flex: 1; font: inherit; font-size: 14px; padding: .7rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--c-crema); }
.footer-news input::placeholder { color: rgba(251,246,238,.5); }
.footer-news button { border: none; cursor: pointer; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .worlds-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-grid, .story-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .story-media { order: -1; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .sunset-inner { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .worlds-grid { grid-template-columns: 1fr; }
  .world-card { min-height: 0; }
}
@media (max-width: 760px) {
  .site-footer > .container-marea > div { grid-template-columns: 1fr 1fr !important; }
  .footer-news { max-width: none; }
}
@media (max-width: 460px) {
  .site-footer > .container-marea > div { grid-template-columns: 1fr !important; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item.wide { grid-column: auto; }
}
/* On phones the top-bar "Preventivo" CTA is redundant with the mobile menu */
@media (max-width: 560px) {
  .nav-pill .btn-primary { display: none; }
  .site-header .container-marea { padding-inline: 12px; }
  .nav-pill { gap: .5rem; padding: 8px 10px 8px 16px; }
  .nav-pill .brand span { font-size: 21px !important; }
}

/* =============================================================
   GALLERY PAGE — filters, uniform grid & lightbox
   ============================================================= */
.gallery-filters { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin-top: 1.8rem; }
.gallery-filter {
  border: 1px solid color-mix(in srgb, var(--c-pietra) 32%, transparent);
  background: transparent; color: var(--c-blu-profondo);
  padding: .5rem 1.1rem; border-radius: 999px;
  font-family: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.gallery-filter:hover { border-color: var(--c-marea-blu); }
.gallery-filter.active { background: var(--c-marea-blu); border-color: var(--c-marea-blu); color: #fff; }

/* Uniform tiles so hiding items on filter never leaves gaps */
.gallery-grid--uniform { grid-auto-flow: row; grid-auto-rows: 220px; }
.gallery-grid--uniform .gallery-item { grid-row: auto; grid-column: auto; }
.gallery-item.is-hidden { display: none !important; }

.js-lightbox img { cursor: zoom-in; }

/* Lightbox overlay */
.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center;
  background: rgba(16, 30, 42, .93); padding: clamp(1rem, 4vw, 3rem);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.lightbox.open { display: flex; }
.lightbox-figure { margin: 0; max-width: min(1100px, 92vw); display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.lightbox-img { max-width: 100%; max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox-cap { color: var(--c-crema); font-family: var(--font-display); font-size: 1.05rem; text-align: center; }
.lightbox-close, .lightbox-nav {
  position: absolute; border: 0; color: #fff; background: rgba(255,255,255,.12);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; line-height: 1; transition: background-color .2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.26); }
.lightbox-close { top: 1rem; right: 1.2rem; width: 44px; height: 44px; font-size: 1.7rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; }
.lightbox-prev { left: 1.2rem; }
.lightbox-next { right: 1.2rem; }
.lightbox-count { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: .85rem; letter-spacing: .04em; }
@media (max-width: 600px) {
  .lightbox-nav { width: 42px; height: 42px; font-size: 1.5rem; }
  .lightbox-prev { left: .4rem; } .lightbox-next { right: .4rem; }
  .gallery-grid--uniform { grid-auto-rows: 150px; }
}

/* =============================================================
   ACCENTI BRAND sulle sezioni "a schede" (richiesta cliente 17.08:
   più colore/vivacità usando la brand identity — nessuna animazione).
   Ogni card piatta prende il colore della sua sezione (--accent),
   con fallback al blu Marea.
   ============================================================= */
.worlds-grid .panel {
  position: relative;
  border-top: 3px solid color-mix(in srgb, var(--accent, var(--c-marea-blu)) 62%, transparent);
  background: color-mix(in srgb, var(--accent, var(--c-marea-blu)) 5%, var(--c-bianco));
}
.worlds-grid .panel .card-title {
  color: color-mix(in srgb, var(--accent, var(--c-marea-blu)) 60%, var(--c-blu-profondo));
}