/* ── SHARED STYLES DOS ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary-100: #fce7ef; --primary-200: #f9bdd0; --primary-300: #f48fb0;
  --primary-400: #ee6090; --primary-500: #c0395d; --primary-600: #8b1538;
  --primary-700: #6d1029; --primary-800: #4f0b1d;
  --secondary-800: #1e293b; --secondary-900: #0f172a;
}
body { font-family: 'Inter', sans-serif; color: #111827; background: #fff; }

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: all .3s; background: transparent;
}
nav.scrolled { background: var(--secondary-900); box-shadow: 0 2px 20px rgba(0,0,0,.3); }
.nav-inner {
  max-width: 80rem; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between; height: 5rem;
}
.nav-logo { height: 4rem; width: auto; }
.nav-links { display: flex; align-items: center; gap: 1.75rem; }
.nav-links .nav-link {
  font-size: .875rem; font-weight: 500; color: #fff;
  text-decoration: none; transition: color .2s; white-space: nowrap;
}
.nav-links .nav-link:hover { color: var(--primary-300); }
.nav-links .nav-link.active { color: var(--primary-400); }
.nav-cta {
  background: var(--primary-600); color: #fff !important;
  padding: .625rem 1.5rem; border-radius: .5rem;
  font-size: .875rem; font-weight: 600;
  text-decoration: none; transition: background .2s; white-space: nowrap;
}
.nav-cta:hover { background: var(--primary-700) !important; }
.nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: .5rem; }

/* MOBILE MENU */
.mobile-menu {
  display: none; flex-direction: column;
  background: var(--secondary-900); padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  color: #fff; text-decoration: none; padding: .75rem 0;
  font-size: 1rem; font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: color .2s;
}
.mobile-menu a:hover { color: var(--primary-300); }
.mobile-menu .mobile-cta {
  margin-top: 1rem; background: var(--primary-600);
  text-align: center; border-radius: .5rem; padding: .875rem;
  border-bottom: none; font-weight: 600;
}

@media(max-width:768px) {
  .nav-links { display: none; }
  .nav-hamburger { display: block; }
}

/* SECTION COMMONS */
.section-center { text-align: center; margin-bottom: 4rem; }
.section-center h2 { font-size: clamp(1.75rem,5vw,3rem); font-weight: 700; color: #111827; margin-bottom: 1rem; }
.section-center h2 span { color: var(--primary-600); }
.section-center p { font-size: 1.125rem; color: #4b5563; max-width: 48rem; margin: 0 auto; }

/* PAGE HERO (per le pagine interne) */
.page-hero {
  background: linear-gradient(135deg, var(--secondary-900), var(--primary-800));
  padding: 10rem 1.5rem 6rem; text-align: center; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(192,57,93,.25) 0%, transparent 70%);
}
.page-hero-content { position: relative; z-index: 2; max-width: 56rem; margin: 0 auto; }
.page-hero-badge {
  display: inline-block; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2); color: var(--primary-300);
  padding: .4rem 1.2rem; border-radius: 9999px;
  font-size: .875rem; font-weight: 600; margin-bottom: 1.5rem;
  backdrop-filter: blur(4px);
}
.page-hero h1 { font-size: clamp(2rem,6vw,3.5rem); font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 1.25rem; }
.page-hero h1 span { color: var(--primary-400); }
.page-hero p { font-size: clamp(1rem,2.5vw,1.25rem); color: #d1d5db; line-height: 1.7; max-width: 44rem; margin: 0 auto; }

/* CARDS */
.card {
  background: #fff; border-radius: 1rem; padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.07); border: 1px solid #f3f4f6;
  transition: all .3s; display: flex; gap: 1.5rem; align-items: flex-start;
}
.card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.13); border-color: var(--primary-200); }
.card-icon {
  flex-shrink: 0; width: 4rem; height: 4rem;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  border-radius: .75rem; display: flex; align-items: center; justify-content: center; transition: transform .3s;
}
.card:hover .card-icon { transform: scale(1.1); }
.card-icon i { font-size: 1.875rem; color: #fff; }
.card h3 { font-size: 1.5rem; font-weight: 700; color: #111827; margin-bottom: .75rem; transition: color .2s; }
.card:hover h3 { color: var(--primary-600); }
.card p { color: #4b5563; line-height: 1.7; margin-bottom: 1rem; }
.card ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.card ul li { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: #374151; }
.card ul li i { color: var(--primary-600); }

/* GRID */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,26rem),1fr)); gap: 2rem; max-width: 80rem; margin: 0 auto; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,18rem),1fr)); gap: 2rem; max-width: 80rem; margin: 0 auto; }

/* CTA BANNER */
.section-cta {
  padding: 6rem 1rem;
  background: linear-gradient(135deg, var(--primary-600), var(--primary-800));
  position: relative; overflow: hidden;
}
.cta-blob { position: absolute; width: 24rem; height: 24rem; background: #fff; border-radius: 50%; filter: blur(80px); opacity: .1; }
.cta-blob.tl { top: 0; left: 0; } .cta-blob.br { bottom: 0; right: 0; }
.cta-inner { position: relative; z-index: 10; max-width: 56rem; margin: 0 auto; text-align: center; }
.cta-inner h2 { font-size: clamp(1.75rem,5vw,3rem); font-weight: 700; color: #fff; margin-bottom: 1.5rem; }
.cta-inner p { font-size: 1.25rem; color: var(--primary-100); margin-bottom: 2rem; line-height: 1.7; }
.cta-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }
.btn-white { background: #fff; color: var(--primary-600); padding: 1rem 2rem; border-radius: .5rem; font-size: 1.125rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: all .2s; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.btn-white:hover { background: #fdf2f5; transform: scale(1.05); }
.btn-outline-white { background: var(--primary-700); color: #fff; padding: 1rem 2rem; border-radius: .5rem; font-size: 1.125rem; font-weight: 600; text-decoration: none; white-space: nowrap; border: 2px solid rgba(255,255,255,.3); display: inline-flex; align-items: center; gap: .5rem; transition: all .2s; }
.btn-outline-white:hover { background: var(--primary-800); }
.cta-checks { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; color: var(--primary-100); }
.cta-checks div { display: flex; align-items: center; gap: .5rem; }
.cta-checks i { font-size: 1.5rem; }

/* FOOTER */
footer { background: linear-gradient(135deg, var(--secondary-800), var(--secondary-900)); color: #fff; padding: 4rem 1rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,12rem),1fr)); gap: 3rem; max-width: 80rem; margin: 0 auto 3rem; }
.footer-logo { height: 3.5rem; width: auto; background: #fff; border-radius: .5rem; padding: .5rem; margin-bottom: 1rem; }
.footer-desc { color: #9ca3af; font-size: .875rem; line-height: 1.6; }
footer h4 { font-size: 1.125rem; font-weight: 700; margin-bottom: 1rem; }
footer ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
footer ul li a { color: #9ca3af; text-decoration: none; font-size: .875rem; transition: color .2s; }
footer ul li a:hover { color: var(--primary-400); }
footer ul li { display: flex; align-items: flex-start; gap: .5rem; }
footer ul li i { color: var(--primary-400); margin-top: .1rem; }
.footer-bottom { border-top: 1px solid #374151; padding-top: 2rem; max-width: 80rem; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.footer-bottom p { color: #9ca3af; font-size: .875rem; }
.footer-bottom a { color: #9ca3af; font-size: .875rem; text-decoration: none; transition: color .2s; }
.footer-bottom a:hover { color: var(--primary-400); }