/*
 Theme Name: OceanWP Child
 Theme URI: https://oceanwp.org/
 Author: Luis
 Author URI: https://solorzanoluis.net
 Template: oceanwp
 Version: 1.0
*/

/* Import Google Font - Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary-color: #2d89ef;
    --secondary-color: #32BAA4;
    --text-dark: #333;
    --text-medium: #555;
    --text-light: #666;
    --card-shadow: 0 4px 12px rgba(0,0,0,0.08);
    --card-hover-shadow: 0 8px 20px rgba(0,0,0,0.1);
    --border-radius: 12px;
    --standard-spacing: 20px;
}

/* Layout generale */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero del blog */
.blog-hero {
    text-align: center;
    margin: 40px 0;
    padding: 0 20px;
}

.blog-hero h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

/* Barra di ricerca */
.blog-search {
    display: flex;
    justify-content: center;
    margin: 30px auto;
    max-width: 700px;
    padding: 0 20px;
}

.blog-search form {
    width: 100%;
}

.blog-search input[type="search"] {
    width: 100%;
    padding: 12px 20px;
    border-radius: 30px;
    border: 1px solid #ddd;
    font-size: 16px;
}

/* Titoli delle sezioni */
.blog-categorie h2, 
.blog-recent-posts h2,
.blog-all-posts h2 {
    font-size: 2rem;
    max-width: 1200px;
    padding: 20px 20px;
    margin: 0 auto;
}

/* Griglia per categorie e articoli */
.categorie-grid,
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Sezione categorie */
.blog-categorie {
    margin: 40px 0;
}

/* Card categoria */
.categoria-card {
    background: #fff;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    position: relative;
    display: flex;
    flex-direction: column;
}

.categoria-card > img,
.categoria-image-wrapper img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.categoria-card > h3,
.categoria-image-wrapper h3 {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    margin: 0;
    font-size: 1.8rem;
    font-weight: bold;
    z-index: 2;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

.categoria-card > .conteggio,
.categoria-image-wrapper .conteggio {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.9rem;
    z-index: 2;
}

.categoria-card > p {
    padding: 15px 20px 0;
    margin: 0 0 15px;
    color: var(--text-light);
}

.categoria-card > a {
    display: inline-block;
    margin: 0 0 15px 20px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
}

/* Overlay per l'immagine */
.categoria-card::before,
.categoria-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    pointer-events: none;
}

/* Immagine wrapper per struttura alternativa */
.categoria-image-wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
}

/* Sezione articoli recenti */
.blog-recent-posts,
.blog-all-posts {
    margin: 60px 0;
    padding: 0 20px;
}

/* Card articolo */
.article-card {
    background: #fff;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.article-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #fff;
    color: var(--text-dark);
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.article-category:hover {
    background: var(--primary-color);
    color: #fff;
}

.article-meta {
    display: flex;
    padding: 15px 20px 0;
    font-size: 0.9rem;
    color: var(--text-light);
}

.article-date::after {
    content: '•';
    margin: 0 6px;
}

/* Stili comuni per titoli di articoli */
.article-title {
    margin: 0 0 15px;
    font-weight: 700;
    line-height: 1.3;
}

/* Titolo articolo in card */
.article-card .article-title {
    padding: 10px 20px;
    font-size: 1.4rem;
}

/* Titolo articolo nella pagina categoria */
.article-item .article-title {
    font-size: 1.8rem;
}

.article-title a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

/* Stili comuni per estratti */
.article-excerpt {
    margin: 0 0 15px;
    line-height: 1.6;
    color: var(--text-light);
}

.article-card .article-excerpt {
    padding: 0 20px;
    flex-grow: 1;
}

/* Link "Leggi di più" */
.article-read-more, 
.read-more {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
    position: relative;
}

.article-read-more {
    margin: 0 0 20px 20px;
}

.article-read-more::after,
.read-more::after {
    content: '→';
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.article-read-more:hover::after,
.read-more:hover::after {
    transform: translateX(3px);
}

.read-more svg {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.read-more:hover svg {
    transform: translateX(3px);
}

/* CTA per articoli */
.articles-cta {
    text-align: center;
    margin-top: 40px;
}

/* Paginazione unificata */
.blog-pagination,
.category-pagination {
    margin-top: 40px;
    text-align: center;
}

.blog-pagination .page-numbers,
.category-pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 3px;
    background-color: white;
    border-radius: 6px;
    color: var(--text-dark);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.blog-pagination .page-numbers.current,
.category-pagination .page-numbers.current {
    background-color: var(--primary-color);
    color: white;
}

.blog-pagination .page-numbers:hover:not(.current),
.category-pagination .page-numbers:hover:not(.current) {
    background-color: #f0f0f0;
}

.blog-pagination .page-numbers.next,
.blog-pagination .page-numbers.prev,
.category-pagination .page-numbers.next,
.category-pagination .page-numbers.prev {
    padding: 8px 15px;
}

/* Pagina categoria */
.category-page {
    background-color: #f8f9fa;
}

/* Breadcrumb */
.category-breadcrumb {
    background-color: var(--secondary-color);
    padding: 15px 0;
    color: white;
}

.breadcrumb-links {
    font-size: 14px;
}

.breadcrumb-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-links a:hover {
    color: white;
}

.breadcrumb-links .separator {
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.5);
}

.breadcrumb-links .current {
    color: white;
}

/* Header della categoria */
.category-header {
    background-color: var(--secondary-color);
    color: white;
    padding: 40px 0 60px;
}

.header-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.header-text {
    max-width: 800px;
}

.category-header h1 {
    font-size: 3rem;
    margin: 0 0 20px;
    font-weight: 700;
    line-height: 1.2;
}

.category-description {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.9;
}

/* Layout del contenuto categoria */
.category-content {
    padding: 60px 0;
}

.content-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

/* Articoli principali nella pagina categoria */
.main-content {
    background-color: transparent;
}

.article-item {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Sidebar */
.category-sidebar {
    align-self: start;
}

.sidebar-widget {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.sidebar-widget h3 {
    margin-top: 0;
    font-size: 1.4rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.sidebar-widget h3:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--primary-color);
}

.sidebar-article {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.sidebar-article:last-child {
    border-bottom: none;
}

.sidebar-article h4 {
    margin: 0 0 8px;
    font-size: 1.1rem;
}

.sidebar-article h4 a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.sidebar-article h4 a:hover {
    color: var(--primary-color);
}

.sidebar-article p {
    margin: 0 0 10px;
    color: var(--text-light);
    font-size: 16px;
    line-height: 1.5;
}

.sidebar-read-more {
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    color: var(--primary-color);
}

/* Responsive */
@media (max-width: 992px) {
    .content-layout {
        grid-template-columns: 1fr;
    }
    
    .category-header h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .category-header {
        padding: 30px 0 50px;
    }
    
    .category-header h1,
    .blog-hero h1 {
        font-size: 2rem;
    }
    
    .category-description {
        font-size: 1rem;
    }
    
    .article-title {
        font-size: 1.5rem;
    }
    
    .categorie-grid,
    .articles-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   BOOKING CARD - DESIGN CORRETTO
   =================================== */

.booking-card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 0px 0px 12px 12px;
    margin-bottom: 32px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: visible; /* IMPORTANTE: permette al badge di uscire */
}

.booking-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.booking-card-content {
    position: relative;
}

/* ===================================
   BADGE PREZZO - ARROTONDATO A SINISTRA
   =================================== */
.booking-price {
    position: absolute;
    top: -8px;
    right: -28px; /* Esce dalla card */
    background: linear-gradient(135deg, #d4a017 0%, #f0b429 100%);
    border-radius: 50px 0 0 50px; /* ⭐ SOLO A SINISTRA */
    padding: 24px 40px 24px 32px;
    display: flex;
    align-items: baseline;
    gap: 3px;
    box-shadow: -4px 4px 16px rgba(212, 160, 23, 0.25);
    z-index: 10;
    min-width: 220px;
    justify-content: flex-end;
}

.price-amount {
    font-size: 64px;
    font-weight: 700;
    line-height: 0.9;
    color: #ffffff;
    letter-spacing: -3px;
}

.price-currency {
    font-size: 32px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.price-period {
    font-size: 15px;
    color: #ffffff;
    opacity: 1;
    font-weight: 500;
}

/* ===================================
   HEADER - TITOLO E SOTTOTITOLO
   =================================== */
.booking-header {
    margin-bottom: 32px;
    padding-right: 200px; /* Spazio per il badge */
    padding-top: 8px;
}

.booking-title {
    font-size: 26px;
    font-weight: 700;
    color: #0a4d4d;
    margin: 0 0 16px 0;
    line-height: 1.25;
    max-width: 90%;
}

.booking-subtitle {
    font-size: 16px;
    color: #7a7a7a;
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
}

.booking-subtitle::before {
    content: '→ ';
    color: #0a4d4d;
    font-weight: 600;
    margin-right: 4px;
}

/* ===================================
   BOTTONE PRENOTA ORA
   =================================== */
.booking-button {
    display: inline-block;
    padding: 16px 48px;
    background: transparent;
    border: 3px solid #33B9A4;
    border-radius: 60px;
    color: #1a1a1a;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 24px;
    cursor: pointer;
}

.booking-button:hover {
    background: #33B9A4;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(212, 160, 23, 0.35);
}

/* ===================================
   DESCRIZIONE CATEGORIA IN BASSO
   =================================== */
.category-description-bottom {
    margin-top: 56px;
    padding: 36px;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: 5px solid #d4a017;
}

.description-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
}

.description-content p {
    margin-bottom: 16px;
}

.description-content p:last-child {
    margin-bottom: 0;
}

/* ===================================
   RESPONSIVE - TABLET
   =================================== */
@media (max-width: 1024px) {
    .booking-header {
        padding-right: 180px;
    }
    
    .booking-price {
        right: -20px;
        padding: 20px 32px 20px 28px;
        min-width: 200px;
    }
    
    .price-amount {
        font-size: 56px;
    }
    
    .price-currency {
        font-size: 28px;
    }
    
    .booking-title {
        font-size: 24px;
    }
}

/* ===================================
   RESPONSIVE - MOBILE
   =================================== */
@media (max-width: 768px) {
    .booking-card {
        padding: 32px 20px 28px 20px;
        margin-left: 8px;
        margin-right: 8px;
    }
    
    .booking-header {
        padding-right: 0;
        margin-bottom: 80px; /* Più spazio per il badge in mobile */
    }
    
    /* Badge diventa orizzontale in alto */
    .booking-price {
        top: -20px;
        right: -20px;
        left: auto;
        border-radius: 50px 0 0 50px;
        padding: 18px 32px 18px 24px;
        min-width: auto;
    }
    
    .price-amount {
        font-size: 48px;
    }
    
    .price-currency {
        font-size: 26px;
    }
    
    .price-period {
        font-size: 13px;
    }
    
    .booking-title {
        font-size: 22px;
        max-width: 100%;
        padding-right: 0;
    }
    
    .booking-subtitle {
        font-size: 15px;
    }
    
    .booking-button {
        display: block;
        width: 100%;
        padding: 15px 32px;
    }
    
    .category-description-bottom {
        margin-top: 40px;
        padding: 28px 20px;
    }
}

/* ===================================
   RESPONSIVE - MOBILE SMALL
   =================================== */
@media (max-width: 480px) {
    .booking-price {
        padding: 14px 24px 14px 20px;
    }
    
    .price-amount {
        font-size: 40px;
        letter-spacing: -2px;
    }
    
    .price-currency {
        font-size: 22px;
    }
    
    .price-period {
        font-size: 12px;
    }
    
    .booking-title {
        font-size: 20px;
    }
    
    .booking-subtitle {
        font-size: 14px;
    }
    
    .booking-button {
        font-size: 16px;
        padding: 14px 28px;
    }
}

/* ===================================
   SIDEBAR LAYOUT
   =================================== */
.category-sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
}

@media (max-width: 991px) {
    .category-sidebar {
        position: static;
        margin-top: 48px;
    }
}

/* === BOOKING PRICE: corner badge come nel mock === */

/* La card deve "tagliare" il badge sull'angolo, quindi hidden */
.booking-card{
  border-radius: 16px;
  overflow: hidden; /* prima era visible */
  position: relative;
}

/* Badge ancorato dentro l'angolo in alto-dx */
.booking-price{
  top: 0;
  right: 0;
  left: auto;
  background: #2394FF;
  /* TL  TR  BR  BL  -> vogliamo curva solo in basso-sx */
  border-radius: 0 16px 0 56px;
  padding: 22px 24px 22px 28px;
  min-width: 0;
  width: auto;
  box-shadow: none;         /* niente ombra che “stacca” dal bordo */
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

/* Tipografia un filo più compatta per non “invadere” l’header */
.price-amount{ font-size: 16px; line-height: .9; letter-spacing: -2px; }
.price-currency{ font-size: 16px; margin-bottom: 2px; }
.price-period{ font-size: 16px; font-weight: 600; }

/* Spazio a destra del titolo per non sovrapporsi al badge */
.booking-header{
  padding-right: 220px; /* ~ larghezza percepita del badge */
}

/* Tablet */
@media (max-width:1024px){
  .booking-header{ padding-right: 190px; }
  .price-amount{ font-size: 50px; }
  .price-currency{ font-size: 26px; }
}

/* Mobile: badge resta nell’angolo, più compatto */
@media (max-width:768px){
  .booking-header{
    padding-right: 0;       /* niente colonna a dx in mobile */
    margin-bottom: 72px;    /* spazio sotto per il badge che occupa l’angolo */
  }
  .booking-price{
    border-radius: 0 16px 0 44px;
    padding: 16px 18px 16px 22px;
  }
  .price-amount{ font-size: 44px; }
  .price-currency{ font-size: 22px; }
  .price-period{ font-size: 12px; }
}

/* Mobile small */
@media (max-width:480px){
  .booking-price{ border-radius: 0 14px 0 38px; }
  .price-amount{ font-size: 38px; letter-spacing: -1px; }
  .price-currency{ font-size: 20px; }
}

.category-carousel {
  margin-top: 24px;
  border-top: 1px solid #eee;
  padding-top: 16px;
}

.category-carousel .carousel-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

.category-carousel .carousel-nav button {
  border: 1px solid #ddd;
  background: #fff;
  padding: 8px 12px;
  cursor: pointer;
}
.category-carousel .carousel-nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.category-carousel .carousel-items.is-loading {
  opacity: 0.5;
  pointer-events: none;
}



/* ===================================
   TEMPLATE EFFICACIA - STILI
   =================================== */

/* Container principale */
.efficacia-template {
    background-color: #FDFBF7;
    color: #1a3a3d;
}

.container-efficacia {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

@media (min-width: 768px) {
    .container-efficacia {
        padding: 4rem 1.5rem;
    }
}

/* ===================================
   SEZIONE 1: DATO PRINCIPALE
   =================================== */

.sezione-dato-principale {
    text-align: center;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .sezione-dato-principale {
        margin-bottom: 5rem;
    }
}

.titolo-principale {
    color: #0D5C63;
    margin-bottom: 1rem;
}

.sottotitolo-principale {
    color: #4b5563;
    margin-bottom: 1.5rem;
}

.testo-intro {
    max-width: 720px;
    margin: 0 auto 2rem;
    color: #4b5563;
}

.card-efficacia {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    max-width: 42rem;
    margin: 0 auto;
    border: 1px solid #e5e7eb;
}

.testo-efficacia-sopra {
    color: #1f2937;
}

.numero-efficacia {
    color: #0D5C63;
    margin: 1rem 0;
    line-height: 1;
}

.testo-efficacia-sotto {
    color: #1f2937;
}

.fonte-dato {
    color: #6b7280;
    margin-top: 1rem;
}

/* ===================================
   SEZIONE 2: GRAFICO
   =================================== */

.sezione-grafico {
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .sezione-grafico {
        margin-bottom: 6rem;
    }
}

.intestazione-grafico {
    text-align: center;
    margin-bottom: 2rem;
}

.titolo-grafico {
    color: #0D5C63;
    margin-bottom: 0.5rem;
}

.descrizione-grafico {
    max-width: 48rem;
    margin: 0 auto;
    color: #4b5563;
}

.contenitore-grafico {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

@media (min-width: 640px) {
    .contenitore-grafico {
        padding: 1.5rem;
    }
}

.chart-wrapper {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    height: 300px;
}

@media (min-width: 768px) {
    .chart-wrapper {
        height: 400px;
    }
}

/* ===================================
   SEZIONE 3: METODOLOGIA
   =================================== */

.sezione-metodologia {
    margin-bottom: 4rem;
}

@media (min-width: 768px) {
    .sezione-metodologia {
        margin-bottom: 6rem;
    }
}

.intestazione-metodologia {
    text-align: center;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .intestazione-metodologia {
        margin-bottom: 3rem;
    }
}

.titolo-metodologia {
    color: #0D5C63;
    margin-bottom: 0.5rem;
}

.descrizione-metodologia {
    max-width: 48rem;
    margin: 0 auto;
    color: #4b5563;
}

.griglia-metodologia {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .griglia-metodologia {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card-metodologia {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    transition: box-shadow 0.3s ease;
}

.card-metodologia:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.icona-metodologia {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: rgba(229, 178, 93, 0.2);
    margin: 0 auto 1.5rem;
}

.titolo-card-metodologia {
    text-align: center;
    margin-bottom: 1rem;
    color: #0D5C63;
}

.testo-card-metodologia {
    color: #4b5563;
    text-align: center;
}

/* ===================================
   SEZIONE 4: CONCLUSIONE
   =================================== */

.conclusione-efficacia {
    text-align: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

@media (min-width: 768px) {
    .conclusione-efficacia {
        margin-top: 6rem;
    }
}

.testo-conclusione {
    max-width: 48rem;
    margin: 0 auto;
    color: #1f2937;
}



/* ===================================
   TIPOGRAFIA GLOBALE - HEADINGS
   Dimensioni aumentate per maggiore impatto
   =================================== */

body h1, 
.efficacia-template h1,
.metodo-strategico-template h1,
h1 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 6rem !important; /* 96px - molto più grande */
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: normal !important;
    margin-bottom: 1.5rem;
}

body h2,
.efficacia-template h2,
.metodo-strategico-template h2,
h2 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 4.5rem !important; /* 72px */
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: normal !important;
    margin-bottom: 1.25rem;
}

body h3,
.efficacia-template h3,
.metodo-strategico-template h3,
h3 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 3.5rem !important; /* 56px */
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    margin-bottom: 1rem;
}

body h4,
.efficacia-template h4,
.metodo-strategico-template h4,
h4 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 2.5rem !important; /* 40px */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    margin-bottom: 0.875rem;
}

body h5,
.efficacia-template h5,
.metodo-strategico-template h5,
h5 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 2rem !important; /* 32px */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    margin-bottom: 0.75rem;
}

body h6,
.efficacia-template h6,
.metodo-strategico-template h6,
h6 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.5rem !important; /* 24px */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    margin-bottom: 0.625rem;
}

/* Responsive headings - Mobile */
@media (max-width: 767px) {
    body h1,
    .efficacia-template h1,
    .metodo-strategico-template h1,
    h1 {
        font-size: 3rem !important; /* 48px mobile */
    }
    
    body h2,
    .efficacia-template h2,
    .metodo-strategico-template h2,
    h2 {
        font-size: 2.5rem !important; /* 40px */
    }
    
    body h3,
    .efficacia-template h3,
    .metodo-strategico-template h3,
    h3 {
        font-size: 2rem !important; /* 32px */
    }
    
    body h4,
    .efficacia-template h4,
    .metodo-strategico-template h4,
    h4 {
        font-size: 1.75rem !important; /* 28px */
    }
    
    body h5,
    .efficacia-template h5,
    .metodo-strategico-template h5,
    h5 {
        font-size: 1.5rem !important; /* 24px */
    }
    
    body h6,
    .efficacia-template h6,
    .metodo-strategico-template h6,
    h6 {
        font-size: 1.25rem !important; /* 20px */
    }
}

/* Responsive headings - Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    body h1,
    .efficacia-template h1,
    .metodo-strategico-template h1,
    h1 {
        font-size: 4.5rem !important; /* 72px tablet */
    }
    
    body h2,
    .efficacia-template h2,
    .metodo-strategico-template h2,
    h2 {
        font-size: 3.5rem !important; /* 56px */
    }
    
    body h3,
    .efficacia-template h3,
    .metodo-strategico-template h3,
    h3 {
        font-size: 2.75rem !important; /* 44px */
    }
}

/* Paragrafi e testo base */
body p,
.efficacia-template p,
.metodo-strategico-template p,
p {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
    line-height: 1.6;
}

/* Strong e bold */
strong, b {
    font-weight: 700 !important;
}

/* Emphasis */
em, i {
    font-style: italic;
}

/* ===================================
   PARAGRAFI - STILI SPECIFICI

/* ===================================
   PARAGRAFI - STILI SPECIFICI
   Dimensioni basate su Tailwind text-xl
   =================================== */

body p,

/* ===================================
   PARAGRAFI - STILI SPECIFICI
   Dimensioni esatte da Tailwind text-lg/text-xl
   =================================== */

body p,

/* ===================================
   PARAGRAFI - STILI SPECIFICI
   Arial REGULAR (non bold)
   =================================== */

body p,
.efficacia-template p,
.metodo-strategico-template p,
p {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
    font-size: 20px !important; /* text-xl desktop */
    line-height: 28px !important; /* 1.75rem = 28px */
    font-weight: normal !important; /* esplicitamente regular */
    font-style: normal !important;
    margin-bottom: 1rem;
}

/* Paragrafi responsive - Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    body p,
    .efficacia-template p,
    .metodo-strategico-template p,
    p {
        font-size: 19px !important;
        line-height: 27px !important;
        font-weight: normal !important;
    }
}

/* Paragrafi responsive - Mobile */
@media (max-width: 767px) {
    body p,
    .efficacia-template p,
    .metodo-strategico-template p,
    p {
        font-size: 18px !important; /* text-lg mobile */
        line-height: 26px !important;
        font-weight: normal !important;
    }
}

/* Forzo Arial Regular anche per strong dentro paragrafi se necessario */
p strong,
p b {
    font-weight: 700 !important; /* solo strong/b devono essere bold */
}

/*
 Theme Name: OceanWP Child
 Theme URI: https://oceanwp.org/
 Author: Luis
 Author URI: https://solorzanoluis.net
 Template: oceanwp
 Version: 1.0
*/

/* Import Google Font - Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary-color: #2d89ef;
    --secondary-color: #32BAA4;
    --text-dark: #333;
    --text-medium: #555;
    --text-light: #666;
    --card-shadow: 0 4px 12px rgba(0,0,0,0.08);
    --card-hover-shadow: 0 8px 20px rgba(0,0,0,0.1);
    --border-radius: 12px;
    --standard-spacing: 20px;
}

/* Layout generale */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero del blog */
.blog-hero {
    text-align: center;
    margin: 40px 0;
    padding: 0 20px;
}

.blog-hero h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

/* Barra di ricerca */
.blog-search {
    display: flex;
    justify-content: center;
    margin: 30px auto;
    max-width: 700px;
    padding: 0 20px;
}

.blog-search form {
    width: 100%;
}

.blog-search input[type="search"] {
    width: 100%;
    padding: 12px 20px;
    border-radius: 30px;
    border: 1px solid #ddd;
    font-size: 16px;
}

/* Titoli delle sezioni */
.blog-categorie h2, 
.blog-recent-posts h2,
.blog-all-posts h2 {
    font-size: 2rem;
    max-width: 1200px;
    padding: 20px 20px;
    margin: 0 auto;
}

/* Griglia per categorie e articoli */
.categorie-grid,
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Sezione categorie */
.blog-categorie {
    margin: 40px 0;
}

/* Card categoria */
.categoria-card {
    background: #fff;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    position: relative;
    display: flex;
    flex-direction: column;
}

.categoria-card > img,
.categoria-image-wrapper img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.categoria-card > h3,
.categoria-image-wrapper h3 {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    margin: 0;
    font-size: 1.8rem;
    font-weight: bold;
    z-index: 2;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

.categoria-card > .conteggio,
.categoria-image-wrapper .conteggio {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.9rem;
    z-index: 2;
}

.categoria-card > p {
    padding: 15px 20px 0;
    margin: 0 0 15px;
    color: var(--text-light);
}

.categoria-card > a {
    display: inline-block;
    margin: 0 0 15px 20px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
}

/* Overlay per l'immagine */
.categoria-card::before,
.categoria-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    pointer-events: none;
}

/* Immagine wrapper per struttura alternativa */
.categoria-image-wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
}

/* Sezione articoli recenti */
.blog-recent-posts,
.blog-all-posts {
    margin: 60px 0;
    padding: 0 20px;
}

/* Card articolo */
.article-card {
    background: #fff;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.article-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #fff;
    color: var(--text-dark);
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.article-category:hover {
    background: var(--primary-color);
    color: #fff;
}

.article-meta {
    display: flex;
    padding: 15px 20px 0;
    font-size: 0.9rem;
    color: var(--text-light);
}

.article-date::after {
    content: '•';
    margin: 0 6px;
}

/* Stili comuni per titoli di articoli */
.article-title {
    margin: 0 0 15px;
    font-weight: 700;
    line-height: 1.3;
}

/* Titolo articolo in card */
.article-card .article-title {
    padding: 10px 20px;
    font-size: 1.4rem;
}

/* Titolo articolo nella pagina categoria */
.article-item .article-title {
    font-size: 1.8rem;
}

.article-title a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

/* Stili comuni per estratti */
.article-excerpt {
    margin: 0 0 15px;
    line-height: 1.6;
    color: var(--text-light);
}

.article-card .article-excerpt {
    padding: 0 20px;
    flex-grow: 1;
}

/* Link "Leggi di più" */
.article-read-more, 
.read-more {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
    position: relative;
}

.article-read-more {
    margin: 0 0 20px 20px;
}

.article-read-more::after,
.read-more::after {
    content: '→';
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.article-read-more:hover::after,
.read-more:hover::after {
    transform: translateX(3px);
}

.read-more svg {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.read-more:hover svg {
    transform: translateX(3px);
}

/* CTA per articoli */
.articles-cta {
    text-align: center;
    margin-top: 40px;
}

/* Paginazione unificata */
.blog-pagination,
.category-pagination {
    margin-top: 40px;
    text-align: center;
}

.blog-pagination .page-numbers,
.category-pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 3px;
    background-color: white;
    border-radius: 6px;
    color: var(--text-dark);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.blog-pagination .page-numbers.current,
.category-pagination .page-numbers.current {
    background-color: var(--primary-color);
    color: white;
}

.blog-pagination .page-numbers:hover:not(.current),
.category-pagination .page-numbers:hover:not(.current) {
    background-color: #f0f0f0;
}

.blog-pagination .page-numbers.next,
.blog-pagination .page-numbers.prev,
.category-pagination .page-numbers.next,
.category-pagination .page-numbers.prev {
    padding: 8px 15px;
}

/* Pagina categoria */
.category-page {
    background-color: #f8f9fa;
}

/* Breadcrumb */
.category-breadcrumb {
    background-color: var(--secondary-color);
    padding: 15px 0;
    color: white;
}

.breadcrumb-links {
    font-size: 14px;
}

.breadcrumb-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-links a:hover {
    color: white;
}

.breadcrumb-links .separator {
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.5);
}

.breadcrumb-links .current {
    color: white;
}

/* Header della categoria */
.category-header {
    background-color: var(--secondary-color);
    color: white;
    padding: 40px 0 60px;
}

.header-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.header-text {
    max-width: 800px;
}

.category-header h1 {
    font-size: 3rem;
    margin: 0 0 20px;
    font-weight: 700;
    line-height: 1.2;
}

.category-description {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.9;
}

/* Layout del contenuto categoria */
.category-content {
    padding: 60px 0;
}

.content-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

/* Articoli principali nella pagina categoria */
.main-content {
    background-color: transparent;
}

.article-item {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Sidebar */
.category-sidebar {
    align-self: start;
}

.sidebar-widget {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.sidebar-widget h3 {
    margin-top: 0;
    font-size: 1.4rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.sidebar-widget h3:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--primary-color);
}

.sidebar-article {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.sidebar-article:last-child {
    border-bottom: none;
}

.sidebar-article h4 {
    margin: 0 0 8px;
    font-size: 1.1rem;
}

.sidebar-article h4 a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.sidebar-article h4 a:hover {
    color: var(--primary-color);
}

.sidebar-article p {
    margin: 0 0 10px;
    color: var(--text-light);
    font-size: 16px;
    line-height: 1.5;
}

.sidebar-read-more {
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    color: var(--primary-color);
}

/* Responsive */
@media (max-width: 992px) {
    .content-layout {
        grid-template-columns: 1fr;
    }
    
    .category-header h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .category-header {
        padding: 30px 0 50px;
    }
    
    .category-header h1,
    .blog-hero h1 {
        font-size: 2rem;
    }
    
    .category-description {
        font-size: 1rem;
    }
    
    .article-title {
        font-size: 1.5rem;
    }
    
    .categorie-grid,
    .articles-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   BOOKING CARD - DESIGN CORRETTO
   =================================== */

.booking-card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 0px 0px 12px 12px;
    margin-bottom: 32px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: visible; /* IMPORTANTE: permette al badge di uscire */
}

.booking-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.booking-card-content {
    position: relative;
}

/* ===================================
   BADGE PREZZO - ARROTONDATO A SINISTRA
   =================================== */
.booking-price {
    position: absolute;
    top: -8px;
    right: -28px; /* Esce dalla card */
    background: linear-gradient(135deg, #d4a017 0%, #f0b429 100%);
    border-radius: 50px 0 0 50px; /* ⭐ SOLO A SINISTRA */
    padding: 24px 40px 24px 32px;
    display: flex;
    align-items: baseline;
    gap: 3px;
    box-shadow: -4px 4px 16px rgba(212, 160, 23, 0.25);
    z-index: 10;
    min-width: 220px;
    justify-content: flex-end;
}

.price-amount {
    font-size: 64px;
    font-weight: 700;
    line-height: 0.9;
    color: #ffffff;
    letter-spacing: -3px;
}

.price-currency {
    font-size: 32px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.price-period {
    font-size: 15px;
    color: #ffffff;
    opacity: 1;
    font-weight: 500;
}

/* ===================================
   HEADER - TITOLO E SOTTOTITOLO
   =================================== */
.booking-header {
    margin-bottom: 32px;
    padding-right: 200px; /* Spazio per il badge */
    padding-top: 8px;
}

.booking-title {
    font-size: 26px;
    font-weight: 700;
    color: #0a4d4d;
    margin: 0 0 16px 0;
    line-height: 1.25;
    max-width: 90%;
}

.booking-subtitle {
    font-size: 16px;
    color: #7a7a7a;
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
}

.booking-subtitle::before {
    content: '→ ';
    color: #0a4d4d;
    font-weight: 600;
    margin-right: 4px;
}

/* ===================================
   BOTTONE PRENOTA ORA
   =================================== */
.booking-button {
    display: inline-block;
    padding: 16px 48px;
    background: transparent;
    border: 3px solid #33B9A4;
    border-radius: 60px;
    color: #1a1a1a;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 24px;
    cursor: pointer;
}

.booking-button:hover {
    background: #33B9A4;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(212, 160, 23, 0.35);
}

/* ===================================
   DESCRIZIONE CATEGORIA IN BASSO
   =================================== */
.category-description-bottom {
    margin-top: 56px;
    padding: 36px;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: 5px solid #d4a017;
}

.description-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
}

.description-content p {
    margin-bottom: 16px;
}

.description-content p:last-child {
    margin-bottom: 0;
}

/* ===================================
   RESPONSIVE - TABLET
   =================================== */
@media (max-width: 1024px) {
    .booking-header {
        padding-right: 180px;
    }
    
    .booking-price {
        right: -20px;
        padding: 20px 32px 20px 28px;
        min-width: 200px;
    }
    
    .price-amount {
        font-size: 56px;
    }
    
    .price-currency {
        font-size: 28px;
    }
    
    .booking-title {
        font-size: 24px;
    }
}

/* ===================================
   RESPONSIVE - MOBILE
   =================================== */
@media (max-width: 768px) {
    .booking-card {
        padding: 32px 20px 28px 20px;
        margin-left: 8px;
        margin-right: 8px;
    }
    
    .booking-header {
        padding-right: 0;
        margin-bottom: 80px; /* Più spazio per il badge in mobile */
    }
    
    /* Badge diventa orizzontale in alto */
    .booking-price {
        top: -20px;
        right: -20px;
        left: auto;
        border-radius: 50px 0 0 50px;
        padding: 18px 32px 18px 24px;
        min-width: auto;
    }
    
    .price-amount {
        font-size: 48px;
    }
    
    .price-currency {
        font-size: 26px;
    }
    
    .price-period {
        font-size: 13px;
    }
    
    .booking-title {
        font-size: 22px;
        max-width: 100%;
        padding-right: 0;
    }
    
    .booking-subtitle {
        font-size: 15px;
    }
    
    .booking-button {
        display: block;
        width: 100%;
        padding: 15px 32px;
    }
    
    .category-description-bottom {
        margin-top: 40px;
        padding: 28px 20px;
    }
}

/* ===================================
   RESPONSIVE - MOBILE SMALL
   =================================== */
@media (max-width: 480px) {
    .booking-price {
        padding: 14px 24px 14px 20px;
    }
    
    .price-amount {
        font-size: 40px;
        letter-spacing: -2px;
    }
    
    .price-currency {
        font-size: 22px;
    }
    
    .price-period {
        font-size: 12px;
    }
    
    .booking-title {
        font-size: 20px;
    }
    
    .booking-subtitle {
        font-size: 14px;
    }
    
    .booking-button {
        font-size: 16px;
        padding: 14px 28px;
    }
}

/* ===================================
   SIDEBAR LAYOUT
   =================================== */
.category-sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
}

@media (max-width: 991px) {
    .category-sidebar {
        position: static;
        margin-top: 48px;
    }
}

/* === BOOKING PRICE: corner badge come nel mock === */

/* La card deve "tagliare" il badge sull'angolo, quindi hidden */
.booking-card{
  border-radius: 16px;
  overflow: hidden; /* prima era visible */
  position: relative;
}

/* Badge ancorato dentro l'angolo in alto-dx */
.booking-price{
  top: 0;
  right: 0;
  left: auto;
  background: #2394FF;
  /* TL  TR  BR  BL  -> vogliamo curva solo in basso-sx */
  border-radius: 0 16px 0 56px;
  padding: 22px 24px 22px 28px;
  min-width: 0;
  width: auto;
  box-shadow: none;         /* niente ombra che “stacca” dal bordo */
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

/* Tipografia un filo più compatta per non “invadere” l’header */
.price-amount{ font-size: 16px; line-height: .9; letter-spacing: -2px; }
.price-currency{ font-size: 16px; margin-bottom: 2px; }
.price-period{ font-size: 16px; font-weight: 600; }

/* Spazio a destra del titolo per non sovrapporsi al badge */
.booking-header{
  padding-right: 220px; /* ~ larghezza percepita del badge */
}

/* Tablet */
@media (max-width:1024px){
  .booking-header{ padding-right: 190px; }
  .price-amount{ font-size: 50px; }
  .price-currency{ font-size: 26px; }
}

/* Mobile: badge resta nell’angolo, più compatto */
@media (max-width:768px){
  .booking-header{
    padding-right: 0;       /* niente colonna a dx in mobile */
    margin-bottom: 72px;    /* spazio sotto per il badge che occupa l’angolo */
  }
  .booking-price{
    border-radius: 0 16px 0 44px;
    padding: 16px 18px 16px 22px;
  }
  .price-amount{ font-size: 44px; }
  .price-currency{ font-size: 22px; }
  .price-period{ font-size: 12px; }
}

/* Mobile small */
@media (max-width:480px){
  .booking-price{ border-radius: 0 14px 0 38px; }
  .price-amount{ font-size: 38px; letter-spacing: -1px; }
  .price-currency{ font-size: 20px; }
}

.category-carousel {
  margin-top: 24px;
  border-top: 1px solid #eee;
  padding-top: 16px;
}

.category-carousel .carousel-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

.category-carousel .carousel-nav button {
  border: 1px solid #ddd;
  background: #fff;
  padding: 8px 12px;
  cursor: pointer;
}
.category-carousel .carousel-nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.category-carousel .carousel-items.is-loading {
  opacity: 0.5;
  pointer-events: none;
}



/* ===================================
   TEMPLATE EFFICACIA - STILI
   =================================== */

/* Container principale */
.efficacia-template {
    background-color: #FDFBF7;
    color: #1a3a3d;
}

.container-efficacia {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

@media (min-width: 768px) {
    .container-efficacia {
        padding: 4rem 1.5rem;
    }
}

/* ===================================
   SEZIONE 1: DATO PRINCIPALE
   =================================== */

.sezione-dato-principale {
    text-align: center;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .sezione-dato-principale {
        margin-bottom: 5rem;
    }
}

.titolo-principale {
    color: #0D5C63;
    margin-bottom: 1rem;
}

.sottotitolo-principale {
    color: #4b5563;
    margin-bottom: 1.5rem;
}

.testo-intro {
    max-width: 48rem;
    margin: 0 auto 2rem;
    color: #4b5563;
}

.card-efficacia {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    max-width: 42rem;
    margin: 0 auto;
    border: 1px solid #e5e7eb;
}

.testo-efficacia-sopra {
    color: #1f2937;
}

.numero-efficacia {
    color: #0D5C63;
    margin: 1rem 0;
    line-height: 1;
}

.testo-efficacia-sotto {
    color: #1f2937;
}

.fonte-dato {
    color: #6b7280;
    margin-top: 1rem;
}

/* ===================================
   SEZIONE 2: GRAFICO
   =================================== */

.sezione-grafico {
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .sezione-grafico {
        margin-bottom: 6rem;
    }
}

.intestazione-grafico {
    text-align: center;
    margin-bottom: 2rem;
}

.titolo-grafico {
    color: #0D5C63;
    margin-bottom: 0.5rem;
}

.descrizione-grafico {
    max-width: 48rem;
    margin: 0 auto;
    color: #4b5563;
}

.contenitore-grafico {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

@media (min-width: 640px) {
    .contenitore-grafico {
        padding: 1.5rem;
    }
}

.chart-wrapper {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    height: 300px;
}

@media (min-width: 768px) {
    .chart-wrapper {
        height: 400px;
    }
}

/* ===================================
   SEZIONE 3: METODOLOGIA
   =================================== */

.sezione-metodologia {
    margin-bottom: 4rem;
}

@media (min-width: 768px) {
    .sezione-metodologia {
        margin-bottom: 6rem;
    }
}

.intestazione-metodologia {
    text-align: center;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .intestazione-metodologia {
        margin-bottom: 3rem;
    }
}

.titolo-metodologia {
    color: #0D5C63;
    margin-bottom: 0.5rem;
}

.descrizione-metodologia {
    max-width: 48rem;
    margin: 0 auto;
    color: #4b5563;
}

.griglia-metodologia {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .griglia-metodologia {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card-metodologia {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    transition: box-shadow 0.3s ease;
}

.card-metodologia:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.icona-metodologia {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: rgba(229, 178, 93, 0.2);
    margin: 0 auto 1.5rem;
}

.titolo-card-metodologia {
    text-align: center;
    margin-bottom: 1rem;
    color: #0D5C63;
}

.testo-card-metodologia {
    color: #4b5563;
    text-align: center;
}

/* ===================================
   SEZIONE 4: CONCLUSIONE
   =================================== */

.conclusione-efficacia {
    text-align: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

@media (min-width: 768px) {
    .conclusione-efficacia {
        margin-top: 6rem;
    }
}

.testo-conclusione {
    max-width: 48rem;
    margin: 0 auto;
    color: #1f2937;
}



/* ===================================
   TIPOGRAFIA GLOBALE - HEADINGS
   Dimensioni aumentate per maggiore impatto
   =================================== */

body h1, 
.efficacia-template h1,
.metodo-strategico-template h1,
h1 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 6rem !important; /* 96px - molto più grande */
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: normal !important;
    margin-bottom: 1.5rem;
}

body h2,
.efficacia-template h2,
.metodo-strategico-template h2,
h2 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 4.5rem !important; /* 72px */
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: normal !important;
    margin-bottom: 1.25rem;
}

body h3,
.efficacia-template h3,
.metodo-strategico-template h3,
h3 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 3.5rem !important; /* 56px */
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    margin-bottom: 1rem;
}

body h4,
.efficacia-template h4,
.metodo-strategico-template h4,
h4 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 2.5rem !important; /* 40px */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    margin-bottom: 0.875rem;
}

body h5,
.efficacia-template h5,
.metodo-strategico-template h5,
h5 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 2rem !important; /* 32px */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    margin-bottom: 0.75rem;
}

body h6,
.efficacia-template h6,
.metodo-strategico-template h6,
h6 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.5rem !important; /* 24px */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    margin-bottom: 0.625rem;
}

/* Responsive headings - Mobile */
@media (max-width: 767px) {
    body h1,
    .efficacia-template h1,
    .metodo-strategico-template h1,
    h1 {
        font-size: 3rem !important; /* 48px mobile */
    }
    
    body h2,
    .efficacia-template h2,
    .metodo-strategico-template h2,
    h2 {
        font-size: 2.5rem !important; /* 40px */
    }
    
    body h3,
    .efficacia-template h3,
    .metodo-strategico-template h3,
    h3 {
        font-size: 2rem !important; /* 32px */
    }
    
    body h4,
    .efficacia-template h4,
    .metodo-strategico-template h4,
    h4 {
        font-size: 1.75rem !important; /* 28px */
    }
    
    body h5,
    .efficacia-template h5,
    .metodo-strategico-template h5,
    h5 {
        font-size: 1.5rem !important; /* 24px */
    }
    
    body h6,
    .efficacia-template h6,
    .metodo-strategico-template h6,
    h6 {
        font-size: 1.25rem !important; /* 20px */
    }
}

/* Responsive headings - Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    body h1,
    .efficacia-template h1,
    .metodo-strategico-template h1,
    h1 {
        font-size: 4.5rem !important; /* 72px tablet */
    }
    
    body h2,
    .efficacia-template h2,
    .metodo-strategico-template h2,
    h2 {
        font-size: 3.5rem !important; /* 56px */
    }
    
    body h3,
    .efficacia-template h3,
    .metodo-strategico-template h3,
    h3 {
        font-size: 2.75rem !important; /* 44px */
    }
}

/* Paragrafi e testo base */
body p,
.efficacia-template p,
.metodo-strategico-template p,
p {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
    line-height: 1.6;
}

/* Strong e bold */
strong, b {
    font-weight: 700 !important;
}

/* Emphasis */
em, i {
    font-style: italic;
}

/* ===================================
   PARAGRAFI - STILI SPECIFICI

/* ===================================
   PARAGRAFI - STILI SPECIFICI
   Dimensioni basate su Tailwind text-xl
   =================================== */

body p,

/* ===================================
   PARAGRAFI - STILI SPECIFICI
   Dimensioni esatte da Tailwind text-lg/text-xl
   =================================== */

body p,

/* ===================================
   PARAGRAFI - STILI SPECIFICI
   Arial REGULAR (non bold)
   =================================== */

body p,
.efficacia-template p,
.metodo-strategico-template p,
p {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
    font-size: 20px !important; /* text-xl desktop */
    line-height: 28px !important; /* 1.75rem = 28px */
    font-weight: normal !important; /* esplicitamente regular */
    font-style: normal !important;
    margin-bottom: 1rem;
}

/* Paragrafi responsive - Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    body p,
    .efficacia-template p,
    .metodo-strategico-template p,
    p {
        font-size: 19px !important;
        line-height: 27px !important;
        font-weight: normal !important;
    }
}

/* Paragrafi responsive - Mobile */
@media (max-width: 767px) {
    body p,
    .efficacia-template p,
    .metodo-strategico-template p,
    p {
        font-size: 18px !important; /* text-lg mobile */
        line-height: 26px !important;
        font-weight: normal !important;
    }
}

/* Forzo Arial Regular anche per strong dentro paragrafi se necessario */
p strong,
p b {
    font-weight: 700 !important; /* solo strong/b devono essere bold */
}

/* ===================================
   TEMPLATE ARCHITETTURA DEL CAMBIAMENTO
   =================================== */

/* Container principale */
.architettura-template {
    background-color: #f0f4f8;
    color: #1f2937;
}

.container-architettura {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

@media (min-width: 768px) {
    .container-architettura {
        padding: 4rem 1.5rem;
    }
}

/* ===================================
   HEADER
   =================================== */

.architettura-header {
    text-align: center;
    margin-bottom: 4rem;
}

.architettura-titolo-principale {
    margin-bottom: 1rem;
}

.architettura-sottotitolo {
    max-width: 48rem;
    margin: 0 auto;
    color: #6b7280;
}

/* Gradient per titolo principale */
.architettura-template .gradient {
    background: linear-gradient(45deg, #58508d, #bc5090, #ff6361);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===================================
   MAIN E SEZIONI
   =================================== */

.architettura-main {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.sezione-architettura {
    margin-bottom: 2rem;
}

.titolo-sezione-architettura {
    text-align: center;
    margin-bottom: 2.5rem;
    color: #1f2937;
}

/* ===================================
   CARD BASE
   =================================== */

.card-architettura {
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-architettura:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

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

.titolo-card-architettura {
    margin-bottom: 1rem;
    color: #003f5c;
}

.testo-card-architettura {
    color: #6b7280;
}

/* ===================================
   SEZIONE 1: FONDAMENTI
   =================================== */

.griglia-fondamenti {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .griglia-fondamenti {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .griglia-fondamenti {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Icona grande */
.icona-grande {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Card Causalità */
.confronto-causalita {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.box-causalita {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 2px solid;
    text-align: center;
}

.box-lineare {
    background-color: #fef2f2;
    border-color: #fca5a5;
}

.box-circolare {
    background-color: #f0fdf4;
    border-color: #86efac;
}

.causalita-titolo {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.box-lineare .causalita-titolo {
    color: #b91c1c;
}

.box-circolare .causalita-titolo {
    color: #15803d;
}

.causalita-testo {
    font-size: 14px;
    margin: 0;
}

.box-lineare .causalita-testo {
    color: #dc2626;
}

.box-circolare .causalita-testo {
    color: #16a34a;
}

.freccia-causalita {
    font-size: 2rem;
    color: #58508d;
    margin: 0.5rem 0;
}

/* Card Logiche */
.card-logiche {
}

@media (min-width: 768px) {
    .card-logiche {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .card-logiche {
        grid-column: span 1;
    }
}

.lista-logiche {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.item-logica {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.emoji-logica {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.logica-paradosso {
    color: #bc5090;
}

.logica-contraddizione {
    color: #ff6361;
}

.logica-credenza {
    color: #ffa600;
}

/* ===================================
   SEZIONE 2: DINAMICA
   =================================== */

/* Card Loop */
.card-loop {
    margin-bottom: 3rem;
}

.titolo-loop {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #58508d;
}

.descrizione-loop {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 1.5rem;
    color: #6b7280;
}

.contenitore-loop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .contenitore-loop {
        flex-direction: row;
        justify-content: center;
    }
}

.box-loop {
    padding: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    width: 100%;
}

@media (min-width: 768px) {
    .box-loop {
        width: 33.333%;
    }
}

.box-spr {
    background-color: #dbeafe;
}

.box-ts {
    background-color: #f3e8ff;
}

.titolo-box-loop {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.box-spr .titolo-box-loop {
    color: #1e40af;
}

.box-ts .titolo-box-loop {
    color: #6b21a8;
}

.testo-box-loop {
    margin: 0;
}

.box-spr .testo-box-loop {
    color: #1e3a8a;
}

.box-ts .testo-box-loop {
    color: #581c87;
}

.freccia-loop {
    font-size: 2.5rem;
    font-weight: 900;
    color: #58508d;
    transform: rotate(90deg);
}

@media (min-width: 768px) {
    .freccia-loop {
        transform: rotate(0deg);
    }
}

/* Griglia Dinamica */
.griglia-dinamica {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .griglia-dinamica {
        grid-template-columns: repeat(2, 1fr);
    }
}

.descrizione-grafico {
    text-align: center;
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 1rem;
}

/* Chart Wrappers */
.chart-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.chart-ts {
    max-width: 800px;
    height: 350px;
}

.chart-stratagemmi {
    max-width: 800px;
    height: 350px;
}

/* Card EEC */
.card-eec {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.descrizione-eec {
    color: #6b7280;
    margin-bottom: 1rem;
}

.kpi-eec {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(45deg, #58508d, #bc5090, #ff6361);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.label-eec {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.spiegazione-eec {
    color: #6b7280;
    margin: 0;
}

/* ===================================
   SEZIONE 3: TECNOLOGIA
   =================================== */

.griglia-tecnologia {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .griglia-tecnologia {
        grid-template-columns: 2fr 3fr;
    }
}

/* Card Dialogo */
.card-dialogo {
}

.timeline-dialogo {
    position: relative;
    padding-left: 1.5rem;
}

.timeline-dialogo::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #e5e7eb;
}

.fase-dialogo {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.fase-dialogo:last-child {
    margin-bottom: 0;
}

.punto-timeline {
    position: absolute;
    left: -1.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.punto-1 { background-color: #58508d; }
.punto-2 { background-color: #bc5090; }
.punto-3 { background-color: #ff6361; }
.punto-4 { background-color: #ffa600; }
.punto-5 { background-color: #003f5c; }

.fase-label {
    font-weight: 700;
}

.fase-1 { color: #58508d; }
.fase-2 { color: #bc5090; }
.fase-3 { color: #ff6361; }
.fase-4 { color: #ffa600; }
.fase-5 { color: #003f5c; }

/* Card Stratagemmi */
.card-stratagemmi {
}

@media (min-width: 1024px) {
    .card-stratagemmi {
        grid-column: span 1;
    }
}

/* ===================================
   SEZIONE 4: TECNICHE
   =================================== */

.griglia-tecniche {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .griglia-tecniche {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .griglia-tecniche {
        grid-template-columns: repeat(4, 1fr);
    }
}

.card-tecnica {
    padding: 1.5rem;
}

.titolo-tecnica {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.tecnica-1 { color: #58508d; }
.tecnica-2 { color: #bc5090; }
.tecnica-3 { color: #ff6361; }
.tecnica-4 { color: #ffa600; }

.testo-tecnica {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

/* ===================================
   FOOTER
   =================================== */

.architettura-footer {
    text-align: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.footer-principale {
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.footer-disclaimer {
    font-size: 14px;
    color: #9ca3af;
    margin: 0;
}

/* ===================================
   ARCHITETTURA
   =================================== */
/*
 Theme Name: OceanWP Child
 Theme URI: https://oceanwp.org/
 Author: Luis
 Author URI: https://solorzanoluis.net
 Template: oceanwp
 Version: 1.0
*/

/* Import Google Font - Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary-color: #2d89ef;
    --secondary-color: #32BAA4;
    --text-dark: #333;
    --text-medium: #555;
    --text-light: #666;
    --card-shadow: 0 4px 12px rgba(0,0,0,0.08);
    --card-hover-shadow: 0 8px 20px rgba(0,0,0,0.1);
    --border-radius: 12px;
    --standard-spacing: 20px;
}

/* Layout generale */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero del blog */
.blog-hero {
    text-align: center;
    margin: 40px 0;
    padding: 0 20px;
}

.blog-hero h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

/* Barra di ricerca */
.blog-search {
    display: flex;
    justify-content: center;
    margin: 30px auto;
    max-width: 700px;
    padding: 0 20px;
}

.blog-search form {
    width: 100%;
}

.blog-search input[type="search"] {
    width: 100%;
    padding: 12px 20px;
    border-radius: 30px;
    border: 1px solid #ddd;
    font-size: 16px;
}

/* Titoli delle sezioni */
.blog-categorie h2, 
.blog-recent-posts h2,
.blog-all-posts h2 {
    font-size: 2rem;
    max-width: 1200px;
    padding: 20px 20px;
    margin: 0 auto;
}

/* Griglia per categorie e articoli */
.categorie-grid,
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Sezione categorie */
.blog-categorie {
    margin: 40px 0;
}

/* Card categoria */
.categoria-card {
    background: #fff;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    position: relative;
    display: flex;
    flex-direction: column;
}

.categoria-card > img,
.categoria-image-wrapper img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.categoria-card > h3,
.categoria-image-wrapper h3 {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    margin: 0;
    font-size: 1.8rem;
    font-weight: bold;
    z-index: 2;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

.categoria-card > .conteggio,
.categoria-image-wrapper .conteggio {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.9rem;
    z-index: 2;
}

.categoria-card > p {
    padding: 15px 20px 0;
    margin: 0 0 15px;
    color: var(--text-light);
}

.categoria-card > a {
    display: inline-block;
    margin: 0 0 15px 20px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
}

/* Overlay per l'immagine */
.categoria-card::before,
.categoria-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    pointer-events: none;
}

/* Immagine wrapper per struttura alternativa */
.categoria-image-wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
}

/* Sezione articoli recenti */
.blog-recent-posts,
.blog-all-posts {
    margin: 60px 0;
    padding: 0 20px;
}

/* Card articolo */
.article-card {
    background: #fff;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.article-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #fff;
    color: var(--text-dark);
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.article-category:hover {
    background: var(--primary-color);
    color: #fff;
}

.article-meta {
    display: flex;
    padding: 15px 20px 0;
    font-size: 0.9rem;
    color: var(--text-light);
}

.article-date::after {
    content: '•';
    margin: 0 6px;
}

/* Stili comuni per titoli di articoli */
.article-title {
    margin: 0 0 15px;
    font-weight: 700;
    line-height: 1.3;
}

/* Titolo articolo in card */
.article-card .article-title {
    padding: 10px 20px;
    font-size: 1.4rem;
}

/* Titolo articolo nella pagina categoria */
.article-item .article-title {
    font-size: 1.8rem;
}

.article-title a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

/* Stili comuni per estratti */
.article-excerpt {
    margin: 0 0 15px;
    line-height: 1.6;
    color: var(--text-light);
}

.article-card .article-excerpt {
    padding: 0 20px;
    flex-grow: 1;
}

/* Link "Leggi di più" */
.article-read-more, 
.read-more {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
    position: relative;
}

.article-read-more {
    margin: 0 0 20px 20px;
}

.article-read-more::after,
.read-more::after {
    content: '→';
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.article-read-more:hover::after,
.read-more:hover::after {
    transform: translateX(3px);
}

.read-more svg {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.read-more:hover svg {
    transform: translateX(3px);
}

/* CTA per articoli */
.articles-cta {
    text-align: center;
    margin-top: 40px;
}

/* Paginazione unificata */
.blog-pagination,
.category-pagination {
    margin-top: 40px;
    text-align: center;
}

.blog-pagination .page-numbers,
.category-pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 3px;
    background-color: white;
    border-radius: 6px;
    color: var(--text-dark);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.blog-pagination .page-numbers.current,
.category-pagination .page-numbers.current {
    background-color: var(--primary-color);
    color: white;
}

.blog-pagination .page-numbers:hover:not(.current),
.category-pagination .page-numbers:hover:not(.current) {
    background-color: #f0f0f0;
}

.blog-pagination .page-numbers.next,
.blog-pagination .page-numbers.prev,
.category-pagination .page-numbers.next,
.category-pagination .page-numbers.prev {
    padding: 8px 15px;
}

/* Pagina categoria */
.category-page {
    background-color: #f8f9fa;
}

/* Breadcrumb */
.category-breadcrumb {
    background-color: var(--secondary-color);
    padding: 15px 0;
    color: white;
}

.breadcrumb-links {
    font-size: 14px;
}

.breadcrumb-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-links a:hover {
    color: white;
}

.breadcrumb-links .separator {
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.5);
}

.breadcrumb-links .current {
    color: white;
}

/* Header della categoria */
.category-header {
    background-color: var(--secondary-color);
    color: white;
    padding: 40px 0 60px;
}

.header-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.header-text {
    max-width: 800px;
}

.category-header h1 {
    font-size: 3rem;
    margin: 0 0 20px;
    font-weight: 700;
    line-height: 1.2;
}

.category-description {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.9;
}

/* Layout del contenuto categoria */
.category-content {
    padding: 60px 0;
}

.content-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

/* Articoli principali nella pagina categoria */
.main-content {
    background-color: transparent;
}

.article-item {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Sidebar */
.category-sidebar {
    align-self: start;
}

.sidebar-widget {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.sidebar-widget h3 {
    margin-top: 0;
    font-size: 1.4rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.sidebar-widget h3:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--primary-color);
}

.sidebar-article {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.sidebar-article:last-child {
    border-bottom: none;
}

.sidebar-article h4 {
    margin: 0 0 8px;
    font-size: 1.1rem;
}

.sidebar-article h4 a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.sidebar-article h4 a:hover {
    color: var(--primary-color);
}

.sidebar-article p {
    margin: 0 0 10px;
    color: var(--text-light);
    font-size: 16px;
    line-height: 1.5;
}

.sidebar-read-more {
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    color: var(--primary-color);
}

/* Responsive */
@media (max-width: 992px) {
    .content-layout {
        grid-template-columns: 1fr;
    }
    
    .category-header h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .category-header {
        padding: 30px 0 50px;
    }
    
    .category-header h1,
    .blog-hero h1 {
        font-size: 2rem;
    }
    
    .category-description {
        font-size: 1rem;
    }
    
    .article-title {
        font-size: 1.5rem;
    }
    
    .categorie-grid,
    .articles-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   BOOKING CARD - DESIGN CORRETTO
   =================================== */

.booking-card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 0px 0px 12px 12px;
    margin-bottom: 32px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: visible; /* IMPORTANTE: permette al badge di uscire */
}

.booking-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.booking-card-content {
    position: relative;
}

/* ===================================
   BADGE PREZZO - ARROTONDATO A SINISTRA
   =================================== */
.booking-price {
    position: absolute;
    top: -8px;
    right: -28px; /* Esce dalla card */
    background: linear-gradient(135deg, #d4a017 0%, #f0b429 100%);
    border-radius: 50px 0 0 50px; /* ⭐ SOLO A SINISTRA */
    padding: 24px 40px 24px 32px;
    display: flex;
    align-items: baseline;
    gap: 3px;
    box-shadow: -4px 4px 16px rgba(212, 160, 23, 0.25);
    z-index: 10;
    min-width: 220px;
    justify-content: flex-end;
}

.price-amount {
    font-size: 64px;
    font-weight: 700;
    line-height: 0.9;
    color: #ffffff;
    letter-spacing: -3px;
}

.price-currency {
    font-size: 32px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.price-period {
    font-size: 15px;
    color: #ffffff;
    opacity: 1;
    font-weight: 500;
}

/* ===================================
   HEADER - TITOLO E SOTTOTITOLO
   =================================== */
.booking-header {
    margin-bottom: 32px;
    padding-right: 200px; /* Spazio per il badge */
    padding-top: 8px;
}

.booking-title {
    font-size: 26px;
    font-weight: 700;
    color: #0a4d4d;
    margin: 0 0 16px 0;
    line-height: 1.25;
    max-width: 90%;
}

.booking-subtitle {
    font-size: 16px;
    color: #7a7a7a;
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
}

.booking-subtitle::before {
    content: '→ ';
    color: #0a4d4d;
    font-weight: 600;
    margin-right: 4px;
}

/* ===================================
   BOTTONE PRENOTA ORA
   =================================== */
.booking-button {
    display: inline-block;
    padding: 16px 48px;
    background: transparent;
    border: 3px solid #33B9A4;
    border-radius: 60px;
    color: #1a1a1a;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 24px;
    cursor: pointer;
}

.booking-button:hover {
    background: #33B9A4;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(212, 160, 23, 0.35);
}

/* ===================================
   DESCRIZIONE CATEGORIA IN BASSO
   =================================== */
.category-description-bottom {
    margin-top: 56px;
    padding: 36px;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: 5px solid #d4a017;
}

.description-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
}

.description-content p {
    margin-bottom: 16px;
}

.description-content p:last-child {
    margin-bottom: 0;
}

/* ===================================
   RESPONSIVE - TABLET
   =================================== */
@media (max-width: 1024px) {
    .booking-header {
        padding-right: 180px;
    }
    
    .booking-price {
        right: -20px;
        padding: 20px 32px 20px 28px;
        min-width: 200px;
    }
    
    .price-amount {
        font-size: 56px;
    }
    
    .price-currency {
        font-size: 28px;
    }
    
    .booking-title {
        font-size: 24px;
    }
}

/* ===================================
   RESPONSIVE - MOBILE
   =================================== */
@media (max-width: 768px) {
    .booking-card {
        padding: 32px 20px 28px 20px;
        margin-left: 8px;
        margin-right: 8px;
    }
    
    .booking-header {
        padding-right: 0;
        margin-bottom: 80px; /* Più spazio per il badge in mobile */
    }
    
    /* Badge diventa orizzontale in alto */
    .booking-price {
        top: -20px;
        right: -20px;
        left: auto;
        border-radius: 50px 0 0 50px;
        padding: 18px 32px 18px 24px;
        min-width: auto;
    }
    
    .price-amount {
        font-size: 48px;
    }
    
    .price-currency {
        font-size: 26px;
    }
    
    .price-period {
        font-size: 13px;
    }
    
    .booking-title {
        font-size: 22px;
        max-width: 100%;
        padding-right: 0;
    }
    
    .booking-subtitle {
        font-size: 15px;
    }
    
    .booking-button {
        display: block;
        width: 100%;
        padding: 15px 32px;
    }
    
    .category-description-bottom {
        margin-top: 40px;
        padding: 28px 20px;
    }
}

/* ===================================
   RESPONSIVE - MOBILE SMALL
   =================================== */
@media (max-width: 480px) {
    .booking-price {
        padding: 14px 24px 14px 20px;
    }
    
    .price-amount {
        font-size: 40px;
        letter-spacing: -2px;
    }
    
    .price-currency {
        font-size: 22px;
    }
    
    .price-period {
        font-size: 12px;
    }
    
    .booking-title {
        font-size: 20px;
    }
    
    .booking-subtitle {
        font-size: 14px;
    }
    
    .booking-button {
        font-size: 16px;
        padding: 14px 28px;
    }
}

/* ===================================
   SIDEBAR LAYOUT
   =================================== */
.category-sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
}

@media (max-width: 991px) {
    .category-sidebar {
        position: static;
        margin-top: 48px;
    }
}

/* === BOOKING PRICE: corner badge come nel mock === */

/* La card deve "tagliare" il badge sull'angolo, quindi hidden */
.booking-card{
  border-radius: 16px;
  overflow: hidden; /* prima era visible */
  position: relative;
}

/* Badge ancorato dentro l'angolo in alto-dx */
.booking-price{
  top: 0;
  right: 0;
  left: auto;
  background: #2394FF;
  /* TL  TR  BR  BL  -> vogliamo curva solo in basso-sx */
  border-radius: 0 16px 0 56px;
  padding: 22px 24px 22px 28px;
  min-width: 0;
  width: auto;
  box-shadow: none;         /* niente ombra che “stacca” dal bordo */
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

/* Tipografia un filo più compatta per non “invadere” l’header */
.price-amount{ font-size: 16px; line-height: .9; letter-spacing: -2px; }
.price-currency{ font-size: 16px; margin-bottom: 2px; }
.price-period{ font-size: 16px; font-weight: 600; }

/* Spazio a destra del titolo per non sovrapporsi al badge */
.booking-header{
  padding-right: 220px; /* ~ larghezza percepita del badge */
}

/* Tablet */
@media (max-width:1024px){
  .booking-header{ padding-right: 190px; }
  .price-amount{ font-size: 50px; }
  .price-currency{ font-size: 26px; }
}

/* Mobile: badge resta nell’angolo, più compatto */
@media (max-width:768px){
  .booking-header{
    padding-right: 0;       /* niente colonna a dx in mobile */
    margin-bottom: 72px;    /* spazio sotto per il badge che occupa l’angolo */
  }
  .booking-price{
    border-radius: 0 16px 0 44px;
    padding: 16px 18px 16px 22px;
  }
  .price-amount{ font-size: 44px; }
  .price-currency{ font-size: 22px; }
  .price-period{ font-size: 12px; }
}

/* Mobile small */
@media (max-width:480px){
  .booking-price{ border-radius: 0 14px 0 38px; }
  .price-amount{ font-size: 38px; letter-spacing: -1px; }
  .price-currency{ font-size: 20px; }
}

.category-carousel {
  margin-top: 24px;
  border-top: 1px solid #eee;
  padding-top: 16px;
}

.category-carousel .carousel-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

.category-carousel .carousel-nav button {
  border: 1px solid #ddd;
  background: #fff;
  padding: 8px 12px;
  cursor: pointer;
}
.category-carousel .carousel-nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.category-carousel .carousel-items.is-loading {
  opacity: 0.5;
  pointer-events: none;
}



/* ===================================
   TEMPLATE EFFICACIA - STILI
   =================================== */

/* Container principale */
.efficacia-template {
    background-color: #FDFBF7;
    color: #1a3a3d;
}

.container-efficacia {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

@media (min-width: 768px) {
    .container-efficacia {
        padding: 4rem 1.5rem;
    }
}

/* ===================================
   SEZIONE 1: DATO PRINCIPALE
   =================================== */

.sezione-dato-principale {
    text-align: center;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .sezione-dato-principale {
        margin-bottom: 5rem;
    }
}

.titolo-principale {
    color: #0D5C63;
    margin-bottom: 1rem;
}

.sottotitolo-principale {
    color: #4b5563;
    margin-bottom: 1.5rem;
}

.testo-intro {
    max-width: 48rem;
    margin: 0 auto 2rem;
    color: #4b5563;
}

.card-efficacia {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    max-width: 42rem;
    margin: 0 auto;
    border: 1px solid #e5e7eb;
}

.testo-efficacia-sopra {
    color: #1f2937;
}

.numero-efficacia {
    color: #0D5C63;
    margin: 1rem 0;
    line-height: 1;
}

.testo-efficacia-sotto {
    color: #1f2937;
}

.fonte-dato {
    color: #6b7280;
    margin-top: 1rem;
}

/* ===================================
   SEZIONE 2: GRAFICO
   =================================== */

.sezione-grafico {
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .sezione-grafico {
        margin-bottom: 6rem;
    }
}

.intestazione-grafico {
    text-align: center;
    margin-bottom: 2rem;
}

.titolo-grafico {
    color: #0D5C63;
    margin-bottom: 0.5rem;
}

.descrizione-grafico {
    max-width: 48rem;
    margin: 0 auto;
    color: #4b5563;
}

.contenitore-grafico {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

@media (min-width: 640px) {
    .contenitore-grafico {
        padding: 1.5rem;
    }
}

.chart-wrapper {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    height: 300px;
}

@media (min-width: 768px) {
    .chart-wrapper {
        height: 400px;
    }
}

/* ===================================
   SEZIONE 3: METODOLOGIA
   =================================== */

.sezione-metodologia {
    margin-bottom: 4rem;
}

@media (min-width: 768px) {
    .sezione-metodologia {
        margin-bottom: 6rem;
    }
}

.intestazione-metodologia {
    text-align: center;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .intestazione-metodologia {
        margin-bottom: 3rem;
    }
}

.titolo-metodologia {
    color: #0D5C63;
    margin-bottom: 0.5rem;
}

.descrizione-metodologia {
    max-width: 48rem;
    margin: 0 auto;
    color: #4b5563;
}

.griglia-metodologia {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .griglia-metodologia {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card-metodologia {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    transition: box-shadow 0.3s ease;
}

.card-metodologia:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.icona-metodologia {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: rgba(229, 178, 93, 0.2);
    margin: 0 auto 1.5rem;
}

.titolo-card-metodologia {
    text-align: center;
    margin-bottom: 1rem;
    color: #0D5C63;
}

.testo-card-metodologia {
    color: #4b5563;
    text-align: center;
}

/* ===================================
   SEZIONE 4: CONCLUSIONE
   =================================== */

.conclusione-efficacia {
    text-align: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

@media (min-width: 768px) {
    .conclusione-efficacia {
        margin-top: 6rem;
    }
}

.testo-conclusione {
    max-width: 48rem;
    margin: 0 auto;
    color: #1f2937;
}



/* ===================================
   TIPOGRAFIA GLOBALE - HEADINGS
   Dimensioni aumentate per maggiore impatto
   =================================== */

body h1, 
.efficacia-template h1,
.metodo-strategico-template h1,
h1 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 6rem !important; /* 96px - molto più grande */
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: normal !important;
    margin-bottom: 1.5rem;
}

body h2,
.efficacia-template h2,
.metodo-strategico-template h2,
h2 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 4.5rem !important; /* 72px */
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: normal !important;
    margin-bottom: 1.25rem;
}

body h3,
.efficacia-template h3,
.metodo-strategico-template h3,
h3 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 3.5rem !important; /* 56px */
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    margin-bottom: 1rem;
}

body h4,
.efficacia-template h4,
.metodo-strategico-template h4,
h4 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 2.5rem !important; /* 40px */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    margin-bottom: 0.875rem;
}

body h5,
.efficacia-template h5,
.metodo-strategico-template h5,
h5 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 2rem !important; /* 32px */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    margin-bottom: 0.75rem;
}

body h6,
.efficacia-template h6,
.metodo-strategico-template h6,
h6 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.5rem !important; /* 24px */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    margin-bottom: 0.625rem;
}

/* Responsive headings - Mobile */
@media (max-width: 767px) {
    body h1,
    .efficacia-template h1,
    .metodo-strategico-template h1,
    h1 {
        font-size: 3rem !important; /* 48px mobile */
    }
    
    body h2,
    .efficacia-template h2,
    .metodo-strategico-template h2,
    h2 {
        font-size: 2.5rem !important; /* 40px */
    }
    
    body h3,
    .efficacia-template h3,
    .metodo-strategico-template h3,
    h3 {
        font-size: 2rem !important; /* 32px */
    }
    
    body h4,
    .efficacia-template h4,
    .metodo-strategico-template h4,
    h4 {
        font-size: 1.75rem !important; /* 28px */
    }
    
    body h5,
    .efficacia-template h5,
    .metodo-strategico-template h5,
    h5 {
        font-size: 1.5rem !important; /* 24px */
    }
    
    body h6,
    .efficacia-template h6,
    .metodo-strategico-template h6,
    h6 {
        font-size: 1.25rem !important; /* 20px */
    }
}

/* Responsive headings - Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    body h1,
    .efficacia-template h1,
    .metodo-strategico-template h1,
    h1 {
        font-size: 4.5rem !important; /* 72px tablet */
    }
    
    body h2,
    .efficacia-template h2,
    .metodo-strategico-template h2,
    h2 {
        font-size: 3.5rem !important; /* 56px */
    }
    
    body h3,
    .efficacia-template h3,
    .metodo-strategico-template h3,
    h3 {
        font-size: 2.75rem !important; /* 44px */
    }
}

/* Paragrafi e testo base */
body p,
.efficacia-template p,
.metodo-strategico-template p,
p {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
    line-height: 1.6;
}

/* Strong e bold */
strong, b {
    font-weight: 700 !important;
}

/* Emphasis */
em, i {
    font-style: italic;
}

/* ===================================
   PARAGRAFI - STILI SPECIFICI

/* ===================================
   PARAGRAFI - STILI SPECIFICI
   Dimensioni basate su Tailwind text-xl
   =================================== */

body p,

/* ===================================
   PARAGRAFI - STILI SPECIFICI
   Dimensioni esatte da Tailwind text-lg/text-xl
   =================================== */

body p,

/* ===================================
   PARAGRAFI - STILI SPECIFICI
   Arial REGULAR (non bold)
   =================================== */

body p,
.efficacia-template p,
.metodo-strategico-template p,
p {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
    font-size: 20px !important; /* text-xl desktop */
    line-height: 28px !important; /* 1.75rem = 28px */
    font-weight: normal !important; /* esplicitamente regular */
    font-style: normal !important;
    margin-bottom: 1rem;
}

/* Paragrafi responsive - Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    body p,
    .efficacia-template p,
    .metodo-strategico-template p,
    p {
        font-size: 19px !important;
        line-height: 27px !important;
        font-weight: normal !important;
    }
}

/* Paragrafi responsive - Mobile */
@media (max-width: 767px) {
    body p,
    .efficacia-template p,
    .metodo-strategico-template p,
    p {
        font-size: 18px !important; /* text-lg mobile */
        line-height: 26px !important;
        font-weight: normal !important;
    }
}

/* Forzo Arial Regular anche per strong dentro paragrafi se necessario */
p strong,
p b {
    font-weight: 700 !important; /* solo strong/b devono essere bold */
}



/* ===================================
   TEMPLATE ARCHITETTURA DEL CAMBIAMENTO
   Design completo dall'HTML originale
   =================================== */

/* Container principale */
.architettura-template {
    background-color: #f0f4f8 !important;
    color: #1f2937 !important;
    min-height: 100vh;
}

.container-architettura {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

@media (min-width: 768px) {
    .container-architettura {
        padding: 2rem;
    }
}

/* ===================================
   HEADER
   =================================== */

.architettura-header {
    text-align: center;
    margin-bottom: 4rem;
}

.architettura-template .architettura-titolo-principale {
    margin-bottom: 1rem;
}

/* Gradient per titolo principale */
.architettura-template .gradient {
    background: linear-gradient(45deg, #58508d, #bc5090, #ff6361) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline-block;
}

.architettura-template .architettura-sottotitolo {
    max-width: 48rem;
    margin: 0 auto;
    color: #6b7280 !important;
}

/* ===================================
   MAIN E SEZIONI
   =================================== */

.architettura-main {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.sezione-architettura {
    margin-bottom: 0;
}

.architettura-template .titolo-sezione-architettura {
    text-align: center;
    margin-bottom: 2.5rem;
    color: #1f2937 !important;
    font-weight: 700 !important;
}

/* ===================================
   CARD BASE
   =================================== */

.card-architettura {
    background-color: #ffffff !important;
    border-radius: 1rem !important;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-architettura:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

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

.architettura-template .titolo-card-architettura {
    margin-bottom: 1rem;
    color: #003f5c !important;
    font-weight: 700 !important;
}

.architettura-template .testo-card-architettura {
    color: #6b7280 !important;
}

/* ===================================
   SEZIONE 1: FONDAMENTI
   =================================== */

.griglia-fondamenti {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .griglia-fondamenti {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .griglia-fondamenti {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Icona grande */
.icona-grande {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Card Causalità */
.confronto-causalita {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.box-causalita {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 2px solid;
    text-align: center;
}

.box-lineare {
    background-color: #fef2f2 !important;
    border-color: #fca5a5 !important;
}

.box-circolare {
    background-color: #f0fdf4 !important;
    border-color: #86efac !important;
}

.architettura-template .causalita-titolo {
    font-weight: 700 !important;
    margin-bottom: 0.25rem;
}

.box-lineare .causalita-titolo {
    color: #b91c1c !important;
}

.box-circolare .causalita-titolo {
    color: #15803d !important;
}

.architettura-template .causalita-testo {
    margin: 0;
}

.box-lineare .causalita-testo {
    color: #dc2626 !important;
}

.box-circolare .causalita-testo {
    color: #16a34a !important;
}

.freccia-causalita {
    font-size: 2rem;
    color: #58508d;
    margin: 0.5rem 0;
}

/* Card Logiche */
@media (min-width: 768px) {
    .card-logiche {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .card-logiche {
        grid-column: span 1;
    }
}

.lista-logiche {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.item-logica {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.emoji-logica {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.architettura-template .logica-paradosso {
    color: #bc5090 !important;
    font-weight: 700 !important;
}

.architettura-template .logica-contraddizione {
    color: #ff6361 !important;
    font-weight: 700 !important;
}

.architettura-template .logica-credenza {
    color: #ffa600 !important;
    font-weight: 700 !important;
}

/* ===================================
   SEZIONE 2: DINAMICA
   =================================== */

/* Card Loop */
.card-loop {
    margin-bottom: 3rem;
    padding: 2rem !important;
}

@media (min-width: 768px) {
    .card-loop {
        padding: 2.5rem !important;
    }
}

.architettura-template .titolo-loop {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #58508d !important;
    font-weight: 700 !important;
}

.architettura-template .descrizione-loop {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 1.5rem;
    color: #6b7280 !important;
}

.contenitore-loop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .contenitore-loop {
        flex-direction: row;
        justify-content: center;
    }
}

.box-loop {
    padding: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    width: 100%;
}

@media (min-width: 768px) {
    .box-loop {
        width: 33.333%;
    }
}

.box-spr {
    background-color: #dbeafe !important;
}

.box-ts {
    background-color: #f3e8ff !important;
}

.architettura-template .titolo-box-loop {
    font-weight: 700 !important;
    margin-bottom: 0.5rem;
}

.box-spr .titolo-box-loop {
    color: #1e40af !important;
}

.box-ts .titolo-box-loop {
    color: #6b21a8 !important;
}

.architettura-template .testo-box-loop {
    margin: 0;
}

.box-spr .testo-box-loop {
    color: #1e3a8a !important;
}

.box-ts .testo-box-loop {
    color: #581c87 !important;
}

.freccia-loop {
    font-size: 2.5rem;
    font-weight: 900 !important;
    color: #58508d;
    transform: rotate(90deg);
}

@media (min-width: 768px) {
    .freccia-loop {
        transform: rotate(0deg);
    }
}

/* Griglia Dinamica */
.griglia-dinamica {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .griglia-dinamica {
        grid-template-columns: repeat(2, 1fr);
    }
}

.architettura-template .descrizione-grafico {
    text-align: center;
    color: #6b7280 !important;
    margin-bottom: 1rem;
}

/* Chart Wrappers */
.chart-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.chart-ts {
    max-width: 800px;
    height: 350px;
}

.chart-stratagemmi {
    max-width: 800px;
    height: 350px;
}

@media (min-width: 768px) {
    .chart-ts,
    .chart-stratagemmi {
        height: 450px;
    }
}

/* Card EEC */
.card-eec {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem !important;
}

.architettura-template .descrizione-eec {
    color: #6b7280 !important;
    margin-bottom: 1rem;
}

.kpi-eec {
    font-size: 4rem;
    font-weight: 900 !important;
    line-height: 1;
    background: linear-gradient(45deg, #58508d, #bc5090, #ff6361);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.architettura-template .label-eec {
    font-weight: 700 !important;
    margin-bottom: 0.5rem;
}

.architettura-template .spiegazione-eec {
    color: #6b7280 !important;
    margin: 0;
}

/* ===================================
   SEZIONE 3: TECNOLOGIA
   =================================== */

.griglia-tecnologia {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .griglia-tecnologia {
        grid-template-columns: 2fr 3fr;
    }
}

/* Card Dialogo */
.card-dialogo {
}

.timeline-dialogo {
    position: relative;
    padding-left: 1.5rem;
}

.timeline-dialogo::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #e5e7eb;
}

.fase-dialogo {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.fase-dialogo:last-child {
    margin-bottom: 0;
}

.punto-timeline {
    position: absolute;
    left: -1.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.punto-1 { background-color: #58508d; }
.punto-2 { background-color: #bc5090; }
.punto-3 { background-color: #ff6361; }
.punto-4 { background-color: #ffa600; }
.punto-5 { background-color: #003f5c; }

.architettura-template .fase-label {
    font-weight: 700 !important;
}

.fase-1 { color: #58508d !important; }
.fase-2 { color: #bc5090 !important; }
.fase-3 { color: #ff6361 !important; }
.fase-4 { color: #ffa600 !important; }
.fase-5 { color: #003f5c !important; }

/* Card Stratagemmi */
.card-stratagemmi {
}

@media (min-width: 1024px) {
    .card-stratagemmi {
        grid-column: span 1;
    }
}

/* ===================================
   SEZIONE 4: TECNICHE
   =================================== */

.griglia-tecniche {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .griglia-tecniche {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .griglia-tecniche {
        grid-template-columns: repeat(4, 1fr);
    }
}

.card-tecnica {
    padding: 1.5rem;
}

.architettura-template .titolo-tecnica {
    font-weight: 700 !important;
    margin-bottom: 0.5rem;
}

.tecnica-1 { color: #58508d !important; }
.tecnica-2 { color: #bc5090 !important; }
.tecnica-3 { color: #ff6361 !important; }
.tecnica-4 { color: #ffa600 !important; }

.architettura-template .testo-tecnica {
    color: #6b7280 !important;
    margin: 0;
}

/* ===================================
   FOOTER
   =================================== */

.architettura-footer {
    text-align: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.architettura-template .footer-principale {
    color: #6b7280 !important;
    margin-bottom: 0.5rem;
}

.architettura-template .footer-disclaimer {
    color: #9ca3af !important;
    margin: 0;
}

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 767px) {
    .architettura-header {
        margin-bottom: 2rem;
    }
    
    .architettura-main {
        gap: 3rem;
    }
    
    .card-architettura {
        padding: 1.25rem;
    }
    
    .card-loop {
        padding: 1.5rem !important;
    }
    
    .chart-ts,
    .chart-stratagemmi {
        height: 300px;
    }
}

/* ===================================
   TEMPLATE VADEMECUM TBS
   Palette: Brilliant Blues (#03045E, #0077B6, #00B4D8, #90E0EF, #CAF0F8)
   =================================== */

/* Container principale */
.vademecum-template {
    background-color: #CAF0F8 !important;
    color: #1f2937 !important;
    min-height: 100vh;
}

.container-vademecum {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

@media (min-width: 768px) {
    .container-vademecum {
        padding: 2rem;
    }
}

/* ===================================
   HEADER
   =================================== */

.vademecum-header {
    text-align: center;
    margin-bottom: 3rem;
}

.vademecum-template .vademecum-titolo-principale {
    color: #03045E !important;
    margin-bottom: 0.5rem;
    font-weight: 900 !important;
}

.vademecum-template .vademecum-sottotitolo {
    color: #0077B6 !important;
}

/* ===================================
   MAIN E SEZIONI
   =================================== */

.vademecum-main {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.sezione-vademecum {
    margin-bottom: 0;
}

.vademecum-template .titolo-sezione-vademecum {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #03045E !important;
    font-weight: 700 !important;
}

.vademecum-template .descrizione-sezione {
    text-align: center;
    color: #6b7280 !important;
    margin-bottom: 2rem;
}

.vademecum-template .descrizione-sezione.centered {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

/* ===================================
   CARD BASE
   =================================== */

.card-vademecum {
    background-color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

@media (min-width: 768px) {
    .card-vademecum {
        padding: 2rem;
    }
}

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

/* ===================================
   SEZIONE 1: FONDAMENTI - FLOWCHART
   =================================== */

.card-fondamenti {
    padding: 2rem !important;
}

@media (min-width: 768px) {
    .card-fondamenti {
        padding: 2.5rem !important;
    }
}

.flowchart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .flowchart-container {
        flex-direction: row;
        justify-content: center;
    }
}

.flowchart-node {
    text-align: center;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid #0077B6;
    background-color: #90E0EF;
    color: #03045E;
    width: 12rem;
}

.flowchart-node strong {
    font-weight: 700 !important;
    display: block;
    margin-bottom: 0.25rem;
}

.flowchart-node .node-desc {
    font-size: 14px;
    display: block;
}

.node-mantenimento {
    background-color: #0077B6 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.flowchart-arrow {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0077B6;
    transform: rotate(90deg);
}

@media (min-width: 768px) {
    .flowchart-arrow {
        transform: rotate(0deg);
    }
}

/* ===================================
   SEZIONE 2: LOGICHE NON ORDINARIE
   =================================== */

.griglia-logiche {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .griglia-logiche {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card-logica {
    padding: 1.5rem !important;
}

.icona-logica {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.vademecum-template .titolo-logica {
    color: #0077B6 !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem;
}

.vademecum-template .testo-logica {
    color: #6b7280 !important;
}

/* ===================================
   SEZIONE 3: AREE DI INTERVENTO
   =================================== */

.card-aree {
    padding: 2rem !important;
}

@media (min-width: 768px) {
    .card-aree {
        padding: 2.5rem !important;
    }
}

.chart-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.chart-disorders {
    max-width: 600px;
    height: 300px;
}

@media (min-width: 768px) {
    .chart-disorders {
        height: 350px;
    }
}

.vademecum-template .nota-grafico {
    text-align: center;
    color: #6b7280 !important;
    margin-top: 1rem;
    font-size: 14px !important;
}

/* ===================================
   SEZIONE 4: TECNICHE
   =================================== */

.griglia-tecniche {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .griglia-tecniche {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card-tecnica {
    display: flex;
    flex-direction: column;
    padding: 1.5rem !important;
}

.vademecum-template .titolo-tecnica {
    color: #0077B6 !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem;
}

.vademecum-template .indicata-per {
    color: #6b7280 !important;
    font-size: 14px !important;
    margin-bottom: 0.75rem;
}

.vademecum-template .descrizione-tecnica {
    color: #6b7280 !important;
    flex-grow: 1;
    margin-bottom: 1rem;
}

.vademecum-template .effetto-correttivo {
    font-size: 14px !important;
    color: #03045E !important;
}

.vademecum-template .effetto-correttivo strong {
    font-weight: 700 !important;
}

/* ===================================
   SEZIONE 5: RISULTATI
   =================================== */

.griglia-risultati {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 640px) {
    .griglia-risultati {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .griglia-risultati {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card-risultato {
    background-color: #003459 !important;
    color: #ffffff !important;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    text-align: center;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .griglia-risultati .card-risultato:nth-child(3) {
        grid-column: span 2;
    }
}

.numero-risultato {
    font-size: 3.75rem;
    font-weight: 900 !important;
    line-height: 1;
    color: #ffffff !important;
}

.label-risultato {
    color: #90E0EF !important;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.vademecum-template .descrizione-risultato {
    font-size: 14px !important;
    color: #CAF0F8 !important;
    margin: 0;
}

/* ===================================
   FOOTER
   =================================== */

.vademecum-footer {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #00B4D8;
}

.vademecum-template .footer-text {
    font-size: 14px !important;
    color: #0077B6 !important;
}

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 767px) {
    .vademecum-header {
        margin-bottom: 2rem;
    }
    
    .vademecum-main {
        gap: 3rem;
    }
    
    .card-vademecum {
        padding: 1.25rem;
    }
    
    .card-fondamenti,
    .card-aree {
        padding: 1.5rem !important;
    }
    
    .flowchart-node {
        width: 100%;
        max-width: 16rem;
    }
}