/* ==========================================================================
   IL MAGAZINE DELLA FESTA - STYLESHEET PRINCIPALE
   Erede storico di Cartaria Ciampino
   Colori: Primary #E8604C (corallo), Secondary #7A9E7E (salvia), BG #FAF3E8 (crema)
   ========================================================================== */

/* 1. RESET E VARIABILI GLOBALI */
:root {
    --primary: #E8604C;
    --primary-hover: #D14E3B;
    --secondary: #7A9E7E;
    --secondary-hover: #688B6C;
    --accent: #E8604C;
    --accent-hover: #D14E3B;
    --dark: #2E2A26;
    --medium: #8A7F74;
    --light: #FAF3E8;
    --white: #FFFFFF;
    --border: #E4D9C8;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 10px 30px rgba(232, 96, 76, 0.15);
    --font-heading: 'Fraunces', serif;
    --font-body: 'Nunito Sans', sans-serif;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --transition: all 0.3s ease;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--light);
    color: var(--dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* 2. COMPONENTI TIPOGRAFICI E LAYOUT GLOBALE */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--dark);
    font-weight: 700;
    line-height: 1.3;
}

p {
    margin-bottom: 1.2rem;
    font-size: 1.05rem;
    font-weight: 500;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--primary-hover);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.container-narrow {
    max-width: 800px;
    margin: 0 auto;
}

.text-center {
    text-align: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 700;
    text-align: center;
    padding: 12px 28px;
    border-radius: 30px;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 1rem;
    gap: 8px;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(232, 96, 76, 0.3);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232, 96, 76, 0.4);
}

.btn-secondary {
    background-color: var(--accent);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(232, 96, 76, 0.3);
}

.btn-secondary:hover {
    background-color: var(--accent-hover);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232, 96, 76, 0.4);
}

.btn-outline {
    background-color: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-outline:hover {
    background-color: var(--primary);
    color: var(--white);
}

.btn-sm {
    padding: 8px 18px;
    font-size: 0.9rem;
}

.btn-lg {
    padding: 15px 36px;
    font-size: 1.1rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

.section-header {
    margin-bottom: 50px;
}

.section-tag {
    display: inline-block;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.section-header p {
    color: var(--medium);
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
}

/* 3. HEADER (NAVIGAZIONE) */
.main-header {
    background-color: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    font-size: 2.2rem;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--primary);
    line-height: 1.1;
}

.logo-subtitle {
    font-size: 0.75rem;
    color: var(--medium);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.main-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 30px;
}

.main-nav a {
    color: var(--dark);
    font-weight: 700;
    font-size: 1.05rem;
}

.main-nav a:hover, .main-nav a.active {
    color: var(--primary);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.menu-toggle .bar {
    width: 100%;
    height: 3px;
    background-color: var(--primary);
    border-radius: 10px;
    transition: var(--transition);
}

/* 4. HERO SECTION */
.hero-section {
    position: relative;
    background-image: url('https://images.pexels.com/photos/16220888/pexels-photo-16220888.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200');
    background-size: cover;
    background-position: center;
    height: 600px;
    display: flex;
    align-items: center;
    color: var(--white);
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(232, 96, 76, 0.85) 0%, rgba(46, 42, 38, 0.8) 100%);
    z-index: 1;
}

.hero-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: 650px;
}

.hero-tag {
    display: inline-block;
    background-color: var(--accent);
    color: var(--white);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.hero-content h1 {
    font-size: 3.5rem;
    color: var(--white);
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.25rem;
    margin-bottom: 35px;
    color: rgba(255, 255, 255, 0.9);
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* 5. CALCULATOR SECTION */
.calculator-section {
    padding: 80px 0;
    background-color: var(--white);
    border-bottom: 1px solid var(--border);
}

.calculator-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: stretch;
}

.calculator-form-box {
    background-color: var(--light);
    border-radius: var(--radius-md);
    padding: 35px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.calculator-form-box h3, .calculator-results-box h3 {
    font-size: 1.6rem;
    margin-bottom: 25px;
    color: var(--primary);
    border-bottom: 2px solid var(--secondary);
    padding-bottom: 10px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: var(--dark);
}

.form-control {
    width: 100%;
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    background-color: var(--white);
    color: var(--dark);
    transition: var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(232, 96, 76, 0.15);
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-group.half {
    width: 50%;
}

.calculator-results-box {
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 35px;
    box-shadow: var(--shadow);
    transition: opacity 0.15s ease;
}

.result-category {
    margin-bottom: 25px;
}

.result-category h4 {
    font-size: 1.15rem;
    color: var(--dark);
    margin-bottom: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
}

.result-label {
    color: var(--medium);
    font-weight: 600;
}

.result-value {
    font-weight: 700;
    color: var(--primary);
}

.calc-affiliation-box {
    background-color: rgba(122, 158, 126, 0.15);
    border-left: 4px solid var(--secondary);
    padding: 20px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-top: 30px;
}

.calc-affiliation-box h5 {
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 8px;
}

.calc-affiliation-box p {
    font-size: 0.95rem;
    margin-bottom: 15px;
}

/* 6. EDITORIAL ARTICLES GRID */
.articles-section, .services-section {
    padding: 80px 0;
}

.articles-section {
    background-color: var(--light);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.articles-grid, .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.article-card, .service-card {
    background-color: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: var(--transition);
}

.article-card:hover, .service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

.article-image-wrapper, .service-image-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.article-image-wrapper img, .service-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.article-card:hover .article-image-wrapper img, .service-card:hover .service-image-wrapper img {
    transform: scale(1.05);
}

.article-category-badge, .service-category-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--primary);
    color: var(--white);
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-category-badge {
    background-color: var(--accent);
}

.article-card-content, .service-card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.article-meta {
    font-size: 0.85rem;
    color: var(--medium);
    margin-bottom: 12px;
    display: flex;
    gap: 15px;
}

.article-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.article-card-content h3, .service-card-content h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.article-card-content h3 a {
    color: var(--dark);
}

.article-card-content h3 a:hover {
    color: var(--primary);
}

.article-card-content p, .service-card-content p {
    color: var(--medium);
    font-size: 0.95rem;
    margin-bottom: 20px;
    flex-grow: 1;
}

.article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border);
    padding-top: 15px;
    font-size: 0.85rem;
}

.article-author {
    font-weight: 700;
    color: var(--dark);
}

.read-more-link {
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 7. LOCAL SERVICES DIRECTORY */
.services-section {
    background-color: var(--white);
}

.service-location {
    font-size: 0.95rem;
    color: var(--primary) !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px !important;
}

.service-contacts {
    font-size: 0.9rem;
    color: var(--medium);
    border-top: 1px solid var(--border);
    padding-top: 15px;
    margin-bottom: 15px;
}

/* 8. ABOUT EXCERPT & SPONSOR CTAs */
.about-excerpt-section {
    padding: 100px 0;
    background-color: var(--light);
}

.split-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: center;
}

.img-rounded {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
}

.sponsor-cta-section {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: var(--white);
    padding: 80px 0;
}

.sponsor-cta-section h2 {
    color: var(--white);
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.sponsor-cta-section p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 35px auto;
}

/* 9. DETTAGLIO ARTICOLO (article.php) */
.breadcrumb-bar {
    background-color: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
}

.breadcrumb {
    list-style: none;
    display: flex;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
}

.breadcrumb li::after {
    content: "/";
    margin-left: 10px;
    color: var(--medium);
}

.breadcrumb li:last-child::after {
    content: "";
}

.breadcrumb a {
    color: var(--medium);
}

.breadcrumb .active {
    color: var(--primary);
    font-weight: 700;
}

.article-detail-section, .service-detail-section {
    padding: 60px 0;
    background-color: var(--light);
}

.article-layout-grid, .service-layout-grid {
    display: grid;
    grid-template-columns: 2.3fr 1fr;
    gap: 40px;
    align-items: start;
}

.article-main-content, .service-main-content {
    background-color: var(--white);
    border-radius: var(--radius-md);
    padding: 40px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.article-header {
    margin-bottom: 30px;
}

.article-header h1 {
    font-size: 3rem;
    margin-top: 15px;
    margin-bottom: 15px;
}

.article-meta-info {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: var(--medium);
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
}

.article-meta-info .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.article-featured-image {
    margin-bottom: 35px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.article-body-text {
    font-size: 1.1rem;
    line-height: 1.8;
}

.article-body-text h2 {
    font-size: 1.8rem;
    margin-top: 40px;
    margin-bottom: 15px;
    color: var(--primary);
}

.article-body-text h3 {
    font-size: 1.4rem;
    margin-top: 25px;
    margin-bottom: 12px;
}

.article-body-text p {
    margin-bottom: 25px;
}

.article-budget-box {
    background-color: var(--light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin: 40px 0;
    overflow: hidden;
}

.budget-header {
    background-color: var(--primary);
    color: var(--white);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.budget-header h3 {
    color: var(--white);
    font-size: 1.3rem;
    margin: 0;
}

.budget-body {
    padding: 30px;
}

.budget-body ul {
    list-style: none;
}

.budget-body li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px dashed var(--border);
    font-weight: 600;
}

.budget-body li.total-row {
    border-top: 2px solid var(--primary);
    border-bottom: none;
    padding-top: 18px;
    font-size: 1.3rem;
}

.budget-body li.total-row span {
    color: var(--primary);
    font-weight: 800;
}

.budget-note {
    font-size: 0.85rem;
    color: var(--medium);
    margin-top: 15px;
    margin-bottom: 0;
}

.article-shopping-list {
    background-color: rgba(122, 158, 126, 0.1);
    border: 1px solid rgba(122, 158, 126, 0.3);
    border-radius: var(--radius-md);
    padding: 40px;
    margin-top: 50px;
}

.shopping-header {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--primary);
    margin-bottom: 15px;
}

.shopping-header h3 {
    color: var(--primary);
    font-size: 1.6rem;
    margin: 0;
}

.products-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 25px;
}

.product-item-card {
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.product-info h4 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.product-info p {
    font-size: 0.95rem;
    color: var(--medium);
    margin: 0;
}

.product-action-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-width: 180px;
}

.product-price {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary);
}

.affiliate-disclosure {
    font-size: 0.8rem;
    color: var(--medium);
    margin-top: 25px;
    margin-bottom: 0;
    line-height: 1.4;
}

/* SIDEBAR COMPONENTS */
.sidebar-widget {
    background-color: var(--white);
    border-radius: var(--radius-md);
    padding: 30px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    margin-bottom: 30px;
}

.sidebar-widget h3 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--secondary);
    padding-bottom: 10px;
}

.widget-badge {
    display: inline-block;
    background-color: var(--accent);
    color: var(--white);
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 10px;
    margin-bottom: 12px;
}

.sponsor-brand {
    background-color: var(--light);
    padding: 20px;
    border-radius: var(--radius-sm);
    margin-top: 15px;
}

.sponsor-brand h4 {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.sponsor-brand p {
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.rec-item {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    align-items: center;
}

.rec-item img {
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.rec-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 700;
}

.rec-info h4 {
    font-size: 0.95rem;
    color: var(--dark);
    margin: 0;
    line-height: 1.3;
}

.rec-item:hover h4 {
    color: var(--primary);
}

/* COMMENTS SECTION */
.comments-section {
    margin-top: 60px;
    border-top: 2px solid var(--border);
    padding-top: 40px;
}

.comments-section h3 {
    font-size: 1.6rem;
    margin-bottom: 30px;
}

.comment-item {
    background-color: var(--light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin-bottom: 20px;
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--medium);
    margin-bottom: 10px;
}

.comment-meta strong {
    color: var(--dark);
}

.comment-item p {
    margin: 0;
    font-size: 0.95rem;
}

.comment-form {
    margin-top: 40px;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 30px;
}

.comment-form h4 {
    font-size: 1.3rem;
    margin-bottom: 20px;
}

/* 10. DETTAGLIO SERVIZIO LOCALE (service-local.php) */
.service-header-detail h1 {
    font-size: 3rem;
    margin-top: 15px;
    margin-bottom: 8px;
}

.service-lead-location {
    font-size: 1.1rem;
    color: var(--medium);
    margin-bottom: 0;
}

.service-contact-card .contact-detail-item {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
}

.contact-detail-item i {
    color: var(--primary);
}

.contact-detail-item div {
    display: flex;
    flex-direction: column;
}

.contact-detail-item span {
    font-size: 0.8rem;
    color: var(--medium);
    text-transform: uppercase;
}

.contact-detail-item strong {
    font-size: 1.05rem;
    color: var(--dark);
}

.contact-badge-certified {
    background-color: rgba(232, 96, 76, 0.1);
    color: var(--primary);
    text-align: center;
    padding: 10px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 15px;
}

.lead-form-section {
    background-color: var(--light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 40px;
    margin-top: 50px;
}

.lead-form-section h3 {
    margin-bottom: 12px;
}

.lead-form {
    margin-top: 25px;
}

.lead-form label {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 6px;
    display: block;
}

/* 11. CHI SIAMO (about.php) */
.about-hero, .contacts-hero {
    background: linear-gradient(135deg, rgba(122, 158, 126, 0.2) 0%, rgba(232, 96, 76, 0.05) 100%);
    padding: 80px 0;
    border-bottom: 1px solid var(--border);
}

.about-hero h1, .contacts-hero h1 {
    font-size: 3.5rem;
    margin-top: 10px;
    margin-bottom: 15px;
}

.about-hero p, .contacts-hero p {
    font-size: 1.25rem;
    color: var(--medium);
}

.about-story-block, .about-vision-block, .about-values-block {
    padding: 80px 0;
}

.about-vision-block {
    background-color: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.about-vision-block h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.about-vision-block p {
    font-size: 1.15rem;
    line-height: 1.8;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.value-item-card {
    background-color: var(--white);
    border-radius: var(--radius-md);
    padding: 30px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    text-align: center;
}

.value-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.value-item-card h3 {
    font-size: 1.35rem;
    margin-bottom: 12px;
}

/* 12. CONTATTI (contatti.php) */
.contacts-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding: 80px 24px;
}

.contact-form-box {
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 40px;
    box-shadow: var(--shadow);
}

.contact-form-box h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.editorial-advertising-box h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.lead-editorial {
    font-size: 1.15rem;
    color: var(--medium);
    margin-bottom: 30px;
}

.partnership-advantages h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
}

.partnership-advantages ul {
    list-style: none;
    margin-bottom: 35px;
}

.partnership-advantages li {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 1rem;
}

.icon-success {
    color: #7A9E7E;
    flex-shrink: 0;
}

.seo-metrics-callout {
    background-color: rgba(232, 96, 76, 0.05);
    border: 1px solid rgba(232, 96, 76, 0.1);
    border-radius: var(--radius-sm);
    padding: 25px;
    margin-bottom: 30px;
}

.seo-metrics-callout h4 {
    font-size: 1.15rem;
    margin-bottom: 8px;
    color: var(--primary);
}

.contact-direct-editorial {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
}

.contact-direct-editorial i {
    color: var(--primary);
}

.contact-direct-editorial strong {
    color: var(--primary);
    font-size: 1.1rem;
}

.historical-note-box {
    border-left: 3px solid var(--accent);
    padding-left: 15px;
}

.historical-note-box h5 {
    color: var(--accent);
    font-size: 0.95rem;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.historical-note-box p {
    font-size: 0.85rem;
    margin: 0;
}

/* 13. PAGE 404 */
.page-404-section {
    padding: 120px 0;
}

.icon-404 {
    font-size: 6rem;
    margin-bottom: 25px;
    animation: bounce 2s infinite;
}

.page-404-section h1 {
    font-size: 3.5rem;
    margin-bottom: 15px;
}

.page-404-section h2 {
    font-size: 1.8rem;
    color: var(--medium);
    margin-bottom: 25px;
}

.page-404-section p {
    font-size: 1.15rem;
    max-width: 600px;
    margin: 0 auto 40px auto;
}

.actions-404 {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.help-404 {
    font-size: 0.95rem;
    color: var(--medium);
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* 14. FOOTER */
.main-footer {
    background-color: var(--dark);
    color: rgba(255, 255, 255, 0.8);
    padding: 80px 0 0 0;
    border-top: 4px solid var(--primary);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 60px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 40px;
}

.footer-brand .footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-brand h3 {
    color: var(--white);
    font-size: 1.4rem;
}

.footer-pitch {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-socials {
    display: flex;
    gap: 15px;
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: var(--white);
}

.footer-socials a:hover {
    background-color: var(--primary);
    color: var(--white);
    transform: translateY(-3px);
}

.footer-links h4, .footer-categories h4, .footer-newsletter h4 {
    color: var(--white);
    font-size: 1.15rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 8px;
}

.footer-links h4::after, .footer-categories h4::after, .footer-newsletter h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background-color: var(--primary);
}

.footer-links ul, .footer-categories ul {
    list-style: none;
}

.footer-links li, .footer-categories li {
    margin-bottom: 12px;
}

.footer-links a, .footer-categories a {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.footer-links a:hover, .footer-categories a:hover {
    color: var(--secondary);
    padding-left: 5px;
}

.footer-newsletter p {
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.newsletter-form input {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    padding: 12px 18px;
    border-radius: 30px;
    font-family: var(--font-body);
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--primary);
}

.footer-bottom {
    background-color: #241F1B;
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-links-bottom a {
    color: rgba(255, 255, 255, 0.5);
    margin-left: 15px;
}

.footer-links-bottom a:hover {
    color: var(--white);
}

/* 15. EFFETTO REVEAL ON SCROLL */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 16. MEDIA QUERIES (RESPONSIVENESS) */
@media (max-width: 1024px) {
    .calculator-grid {
        grid-template-columns: 1fr;
    }
    
    .articles-grid, .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .d-none-mobile {
        display: none !important;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    /* Menu mobile di navigazione */
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--white);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    
    .main-nav.nav-open {
        display: block;
    }
    
    .main-nav ul {
        flex-direction: column;
        padding: 20px;
        gap: 15px;
    }
    
    .main-nav li {
        width: 100%;
        text-align: center;
    }
    
    /* Menu Hamburger active animation */
    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    
    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
    
    .hero-section {
        height: auto;
        padding: 100px 0;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .split-layout, .article-layout-grid, .service-layout-grid, .contacts-layout-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .about-excerpt-image-box, .about-image-box {
        order: -1;
    }
    
    .article-main-content, .service-main-content {
        padding: 20px;
    }
    
    .article-header h1, .service-header-detail h1 {
        font-size: 2.2rem;
    }
    
    .product-item-card {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .product-action-box {
        width: 100%;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .articles-grid, .services-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .form-group.half {
        width: 100%;
    }
    
    .about-hero h1, .contacts-hero h1 {
        font-size: 2.5rem;
    }
}
/* ===== SLATEWAYS-TOOLS-CSS : styles partagés des strumenti (05-tools) ===== */
.tool-hero{padding:64px 0 40px;background:var(--fill);}
.tool-hero h1{margin:12px 0 16px;font-size:2.4rem;}
.tool-hero p{max-width:640px;margin:0 auto;color:var(--medium);}
.section-tag{display:inline-block;background:var(--primary);color:var(--white);font-family:var(--font-body);font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;padding:6px 14px;border-radius:999px;}
.tool-wrap{padding:48px 0 72px;}
.tool-card{max-width:820px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:36px;}
.tool-form{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;}
.tool-form .field{display:flex;flex-direction:column;}
.tool-form .field.full{grid-column:1/-1;}
.tool-form label{font-weight:700;margin-bottom:6px;font-size:.95rem;}
.tool-form input,.tool-form select,.tool-form textarea{padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:1rem;background:var(--white);color:var(--dark);}
.tool-form input:focus,.tool-form select:focus,.tool-form textarea:focus{outline:2px solid var(--primary);border-color:var(--primary);}
.tool-form small{color:var(--medium);font-size:.82rem;margin-top:6px;}
.tool-actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;}
.tool-result{margin-top:28px;border-top:2px dashed var(--border);padding-top:24px;}
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;}
.result-box{background:var(--fill);border-radius:var(--radius-md);padding:18px;text-align:center;}
.result-box .num{font-family:var(--font-heading);font-size:1.8rem;font-weight:700;color:var(--primary);line-height:1.1;}
.result-box .lbl{font-size:.85rem;color:var(--medium);margin-top:6px;}
.result-total{margin-top:18px;background:var(--secondary);color:var(--white);border-radius:var(--radius-md);padding:18px 22px;font-size:1.1rem;font-weight:700;text-align:center;}
.tool-note{max-width:820px;margin:28px auto 0;border-radius:var(--radius-md);padding:20px 24px;background:#EAF0E8;border:1px solid #C9D8C6;}
.tool-note p{margin:0;color:#3F5A44;font-style:italic;}
.tool-explain{max-width:820px;margin:40px auto 0;}
.tool-explain h2{margin:28px 0 12px;font-size:1.5rem;}
.gen-output{background:var(--fill);border-radius:var(--radius-md);padding:20px 22px;margin-bottom:16px;white-space:pre-wrap;line-height:1.6;}
.gen-output h4{margin:0 0 8px;color:var(--primary);}
.timeline-step{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--border);}
.timeline-when{flex:0 0 96px;font-weight:700;color:var(--primary);}
.timeline-tasks{flex:1;}
.timeline-tasks label{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;cursor:pointer;}
.timeline-tasks input{margin-top:4px;}
.timeline-tasks .done{text-decoration:line-through;color:var(--medium);}
@media(max-width:640px){.tool-form{grid-template-columns:1fr;}.tool-hero h1{font-size:1.9rem;}}
/* ===== /SLATEWAYS-TOOLS-CSS ===== */

/* ===== SLATEWAYS-PILLAR-CSS : pages pilastro (06-pages-pilier) ===== */
.pillar-hero{padding:72px 0 48px;background:var(--fill);border-bottom:1px solid var(--border);}
.pillar-hero h1{font-size:2.5rem;margin:14px 0 16px;max-width:820px;}
.pillar-hero .lead{max-width:720px;font-size:1.12rem;color:var(--medium);}
.pillar-body{padding:52px 0 72px;}
.pillar-grid{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start;}
.pillar-toc{position:sticky;top:24px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px;}
.pillar-toc h3{font-size:1rem;text-transform:uppercase;letter-spacing:.04em;color:var(--medium);margin-bottom:12px;}
.pillar-toc a{display:block;padding:6px 0;font-weight:600;color:var(--dark);border-bottom:1px solid var(--border);}
.pillar-toc a:last-child{border-bottom:0;}
.pillar-toc a:hover{color:var(--primary);}
.pillar-content h2{font-size:1.7rem;margin:40px 0 14px;scroll-margin-top:90px;}
.pillar-content h2:first-child{margin-top:0;}
.pillar-content h3{font-size:1.25rem;margin:24px 0 10px;}
.pillar-content p{margin-bottom:1.1rem;}
.pillar-content ul{margin:0 0 1.2rem 1.2rem;}
.pillar-content li{margin-bottom:.5rem;}
.pillar-table{width:100%;border-collapse:collapse;margin:18px 0 24px;}
.pillar-table th,.pillar-table td{border:1px solid var(--border);padding:10px 12px;text-align:left;font-size:.95rem;}
.pillar-table th{background:var(--fill);font-family:var(--font-body);}
.read-next{margin-top:44px;background:var(--fill);border-radius:var(--radius-lg);padding:32px;}
.read-next h2{margin-top:0;}
.read-next ul{list-style:none;margin:0 0 20px;}
.read-next li{padding:12px 0;border-bottom:1px solid var(--border);font-weight:600;}
.read-next li:last-child{border-bottom:0;}
.pillar-cta{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0;}
.pillar-cta .btn{text-decoration:none;}
@media(max-width:880px){.pillar-grid{grid-template-columns:1fr;}.pillar-toc{position:static;}.pillar-hero h1{font-size:1.9rem;}}
/* ===== /SLATEWAYS-PILLAR-CSS ===== */

/* ===== SLATEWAYS-DROPDOWN-CSS : sous-menu Strumenti (header) ===== */
.main-nav .has-dropdown{position:relative;}
.main-nav .dropdown-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.main-nav .caret{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;transition:transform .2s ease;}
.main-nav .has-dropdown:hover .caret,.main-nav .has-dropdown.open .caret{transform:rotate(180deg);}
.dropdown-menu{list-style:none;display:none;position:absolute;top:calc(100% + 12px);left:0;min-width:270px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-hover);padding:8px;margin:0;z-index:300;}
.dropdown-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
.main-nav .has-dropdown:hover .dropdown-menu,.main-nav .has-dropdown.open .dropdown-menu{display:block;}
.dropdown-menu li{width:100%;text-align:left;}
.dropdown-menu a{display:block;padding:11px 14px;border-radius:var(--radius-sm);font-size:.97rem;font-weight:600;color:var(--dark);white-space:nowrap;}
.dropdown-menu a:hover{background:var(--fill);color:var(--primary);padding-left:18px;}
@media (max-width:768px){
  .main-nav .dropdown-menu{position:static;display:block;box-shadow:none;border:none;padding:6px 0 0;min-width:0;background:transparent;}
  .main-nav .has-dropdown .caret{display:none;}
  .main-nav .dropdown-menu a{text-align:center;color:var(--medium);font-weight:600;padding:8px;}
  .main-nav .dropdown-menu a:hover{padding-left:8px;}
}
/* ===== /SLATEWAYS-DROPDOWN-CSS ===== */

/* ===== SLATEWAYS-TOOLS-CSS-V2 : mode switch + faq + tabella (05-tools v2) ===== */
.mode-switch{display:flex;gap:0;background:var(--fill);border:1px solid var(--border);border-radius:999px;padding:5px;margin-bottom:26px;max-width:460px;}
.mode-switch button{flex:1;border:none;background:transparent;padding:11px 16px;border-radius:999px;font-family:var(--font-body);font-weight:700;font-size:.98rem;color:var(--medium);cursor:pointer;transition:var(--transition);}
.mode-switch button.active{background:var(--primary);color:var(--white);box-shadow:0 2px 8px rgba(232,96,76,.25);}
.mode-intro{color:var(--medium);margin:-6px 0 22px;font-size:.98rem;}
.field-hint{background:#EAF0E8;border:1px solid #C9D8C6;color:#3F5A44;border-radius:var(--radius-sm);padding:10px 14px;font-size:.9rem;margin-top:14px;}
.pill-choice{display:flex;gap:8px;flex-wrap:wrap;}
.pill-choice button{border:1px solid var(--border);background:var(--white);color:var(--dark);border-radius:999px;padding:8px 16px;font-family:var(--font-body);font-weight:700;cursor:pointer;transition:var(--transition);}
.pill-choice button.active{background:var(--secondary);color:var(--white);border-color:var(--secondary);}
.tool-faq{max-width:820px;margin:40px auto 0;}
.tool-faq h2{font-size:1.6rem;margin-bottom:10px;}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:12px;background:var(--white);overflow:hidden;}
.faq-item summary{cursor:pointer;padding:16px 20px;font-family:var(--font-heading);font-weight:600;font-size:1.08rem;list-style:none;position:relative;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";position:absolute;right:20px;top:14px;font-size:1.4rem;color:var(--primary);transition:var(--transition);}
.faq-item[open] summary::after{content:"\2013";}
.faq-item .faq-body{padding:0 20px 18px;color:var(--text-secondary,var(--medium));}
.color-table{width:100%;border-collapse:collapse;margin:16px 0 8px;}
.color-table th,.color-table td{border:1px solid var(--border);padding:10px 12px;text-align:left;font-size:.95rem;}
.color-table th{background:var(--fill);font-family:var(--font-body);}
.swatch{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid var(--border);vertical-align:middle;margin-right:6px;}
/* ===== /SLATEWAYS-TOOLS-CSS-V2 ===== */