@charset "utf-8";



/* =========================================

   RESET E BASE

   ========================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    background-color: #FFFFFF; 

    color: #333;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    line-height: 1.5;

}



/* Uniforma la navbar con le altre pagine (evita lo spacing extra ereditato da home.css). */

.nav-links a {

    margin: 0 !important;

}



.page-diventa-donatore .navbar {

    top: 0;

    width: 100%;

    border-radius: 0;

    border-bottom: 2px solid #E22D2D;

    background: #ffffff !important;

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

}



.page-diventa-donatore .navbar.scrolled {

    background: rgba(255, 255, 255, 0.78) !important;

    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;

    border-radius: 999px !important;

    top: 0.75rem !important;

    width: min(92%, 1100px) !important;

}



.page-diventa-donatore .navbar.scrolled .logo {

    width: 120px !important;

    height: 44px !important;

}



/* =========================================

   HERO SECTION

   ========================================= */

#hero {

  

    position: relative;

    width: 100%;

    min-height: 90vh; /* Il contenitore occuperà il 70% dell'altezza dello schermo */

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    overflow: hidden;

}



.hero-image {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: cover; 

    z-index: 0;

    margin-top: 0% !important;

}



.hero-overlay {

    position: absolute;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.3); 

    z-index: 1;

}



.hero-content {

    text-align: center;

    z-index: 2;

    padding: 2rem;

    position: relative;

}



.hero-content h1 {

    font-size: clamp(1.8rem, 6vw, 3.5rem);

    color: white;

    text-shadow: 2px 2px 10px rgba(0,0,0,1);

    margin-bottom: 0.5rem;

    word-break: break-word;

}



.hero-content p {

    font-size: clamp(1rem, 3vw, 1.4rem);

    color: white;

    text-shadow: 1px 1px 6px rgba(0,0,0,1);

}



/* =========================================

   SEZIONE REQUISITI (GRIGLIA 3 COLONNE)

   ========================================= */

#about {

    padding: 4rem 5%;

    max-width: 1300px;

    margin: 0 auto;

}



.section-main-title {

    text-align: center;

    font-size: clamp(1.6rem, 5vw, 2.2rem);

    margin-bottom: 3rem;

    color: #333;

    font-weight: 700;

}



.about-floating-cards {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(clamp(15rem, 30vw, 22rem), 1fr));

    gap: clamp(1rem, 3vw, 1.5rem);

    margin-bottom: 2rem;

    align-items: stretch;

}



.requirement-box {

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2) !important;

    display: flex;

    align-items: flex-start;

    padding: clamp(1rem, 3vw, 1.5rem);

    border-radius: 20px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.1);

    transition: transform 0.3s ease;

    height: 100%;

    min-height: clamp(12rem, 25vw, 18rem);

    overflow: hidden;

}



.requirement-box:hover {

    transform: translateY(-5px);

}



.image-placeholder {

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0,0,0,0.1);

    height: 100%;

    min-height: 220px;

    background: #ffffff;

}



.image-placeholder img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 10px;

    display: block;

}



/* Colori Box Requisiti Standard */

.requirement-box:nth-child(1),

.requirement-box:nth-child(6),

.requirement-box:nth-child(7) {

    background: linear-gradient(135deg, #C01020, #E63946) !important;

}



.requirement-box:nth-child(3),

.requirement-box:nth-child(4),

.requirement-box:nth-child(9) {

    background: linear-gradient(135deg, #1A1FC8, #4A90E2) !important;

}



/* =========================================

   BOX CHI NON PUÒ DONARE (ESCLUSIONI)

   ========================================= */

.about-floating-cards:nth-of-type(2) .requirement-box:nth-child(1) {

    background: linear-gradient(135deg, #1A1FC8, #4A90E2) !important;

}



.about-floating-cards:nth-of-type(2) .requirement-box:nth-child(3) {

    background: linear-gradient(135deg, #C01020, #E63946) !important;

}



/* SPAZIATURA TITOLO ESCLUSIONI */

.exclusion-box h3 {

    margin-bottom: 1.5rem !important; /* Aggiunto spazio tra titolo e lista */

}



.requirement-box.image-only {

    padding: 0 !important;

    background: none !important;

    display: flex;

    justify-content: center;

    align-items: center;

}



.exclusion-list {

    list-style-type: disc;

    margin-left: 1.2rem;

    color: #FFFFFF;

    font-size: clamp(1rem, 2.5vw, 1.2rem);

    font-weight: 500;

}



.exclusion-list li {

    margin-bottom: 4px; /* Leggermente aumentata la distanza tra i punti */

}



.box-full-img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

    padding: 10px;

}



.box-icon {

    font-size: 2rem;

    margin-right: 1.2rem;

    min-width: 45px;

    text-align: center;

}



.box-text {

    flex: 1;

}



.box-text h3 {

    color: #FFFFFF !important;

    font-size: 1.4rem; 

    margin-bottom: 0.6rem;

    text-transform: uppercase;

    font-weight: 800;

}



.box-text p {

    color: #FFFFFF !important;

    font-size: 1.1rem; 

    font-weight: 500;

    margin: 0;

}



/* =========================================

   RETTANGOLI FINALI (SANGUE E PLASMA)

   ========================================= */

.info-columns-container {

    display: grid;

    grid-template-columns: 1fr 1fr; 

    gap: 30px;

    margin-top: 5rem;

    align-items: stretch; 

}



.info-column {

    background: #FFFFFF;

    border: 1px solid #eeeeee;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    display: flex;

    flex-direction: column;

    height: 100%; 

}



.gradient-bg {

    background: transparent !important;

    margin: -1px -1px 0 -1px;

    border-top-left-radius: 20px;

    border-top-right-radius: 20px;

    padding: 1.8rem;

    text-align: center;

    flex-shrink: 0;

}



/* COLONNA SINISTRA (Sangue) */

.info-column:first-child .gradient-bg {

    border: 3px solid #ff0000 !important; 

}



.info-column:first-child .gradient-bg h3 {

    color: #1A1FC8 !important; 

}



/* COLONNA DESTRA (Plasma) */

.info-column:last-child .gradient-bg {

    border: 3px solid #1A1FC8 !important; 

}



.info-column:last-child .gradient-bg h3 {

    color: #ff0000 !important; 

}



.gradient-bg h3 {

    font-size: 1.6rem;

    margin: 0;

}



.column-body {

    padding: 2.5rem;

    color: #444;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

    font-size: 1.2rem; 

}



.text-top-align {

    flex-grow: 1; 

}



/* Riquadri Frequenza Donazione */

.info-sub-section {

    padding: 1.5rem;

    border-radius: 12px;

    margin-top: 20px; 

}



/* SINISTRA (Sangue): Riquadro Blu */

.info-column:first-child .info-sub-section {

    background: #f0f4ff; 

    border-left: 5px solid #1A1FC8; 

}



.info-column:first-child .info-sub-section h4 {

    color: #1A1FC8; 

    margin-bottom: 0.8rem;

    font-size: 1.3rem; 

}



/* DESTRA (Plasma): Riquadro Rosso */

.info-column:last-child .info-sub-section {

    background: #fff5f5; 

    border-left: 5px solid #C01020; 

}



.info-column:last-child .info-sub-section h4 {

    color: #C01020; 

    margin-bottom: 0.8rem;

    font-size: 1.3rem; 

}



/* =========================================

   RESPONSIVE

   ========================================= */

@media (max-width: 1024px) {
    .about-floating-cards, 
    .info-columns-container {
        grid-template-columns: 1fr;
    }

    .image-placeholder, .requirement-box {

        min-height: auto;
    }
}

@media (max-width: 767px) {
    .page-diventa-donatore .navbar,
    .page-diventa-donatore .navbar.scrolled {
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        width: 100% !important;
        transform: none !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    .page-diventa-donatore .navbar.scrolled .logo {
        width: clamp(6.5rem, 32vw, 8.5rem) !important;
        height: 3rem !important;
    }
}