* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: "Poppins", sans-serif;

}

.section-bordered {

  border-top: 2px solid var(--accent);

}





:root {

  --dark: #121826;

  --dark-2: #1b2235;

  --accent: #ff7a18;

  --light: #f4f5f7;

  --white: #ffffff;

  --text: #1e1e1e;

  --beige: #f6f2e7;

}



html { scroll-behavior: smooth; }



body {

  background: var(--light);

  color: var(--text);

}





/* --- DEFINIZIONE ANIMAZIONE KEYFRAMES --- */

/* Crea l'effetto di scivolamento dall'alto e dissolvenza */

@keyframes headerSlideDown {

    from {

        opacity: 0;

        transform: translateY(-30px); /* Parte 30px sopra */

    }

    to {

        opacity: 1;

        transform: translateY(0);     /* Arriva alla posizione naturale */

    }

}



/* --- APPLICAZIONE AL LOGO --- */

.logo {



* Crea un contenitore flex per gestire l'allineamento */

    display: flex;

    flex-direction: column;

    justify-content: center;

    

    /* LA RIGA VERTICALE SOTTILE */

    border-left: 3px solid var(--accent); /* Spessore 3px (più sottile) */

    padding-left: 15px;                   /* Spazio tra riga e testo */

    height: 50px;

 

}



/* --- APPLICAZIONE AI LINK DI NAVIGAZIONE --- */

nav a {

    /* Impostiamo lo stato iniziale come nascosto, altrimenti si vedono prima di animarsi */

    opacity: 0;

    /* Esegue l'animazione con un ritardo di 0.3s per un effetto a cascata dopo il logo */

    animation: headerSlideDown 0.8s ease-out forwards 0.3s;

}

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

header {

  position: fixed;

  top: 0;

  width: 100%;

  height: 90px;

  background: var(--dark);

  z-index: 1000;

  border-radius: 0; 

}



.header-container {

  width: 90%;

  height: 100%;

  margin: auto;

  display: grid;

  grid-template-columns: auto 1fr;

  align-items: center;

}



.logo .name {

  color: var(--white);

    font-size: 20px;

    font-weight: bold;

    font-family: Arial, sans-serif;

    text-transform: uppercase;

    line-height: 1;           /* Riduce lo spazio tra le righe */

    margin-bottom: 4px;       /* Piccolo spazio prima del sottotitolo */

}



.logo .subtitle {

  font-size: 13px;

    color: var(--accent) !important; /* COLORE ARANCIONE FORZATO */

    font-weight: 500;

    letter-spacing: 1px;

    /* Essendo dentro il container .logo con padding-left, 

       si allinea automaticamente sotto la "D" di Dott. */

    text-align: left;

}



nav { text-align: center; }



nav a {

  margin: 0 18px;

  text-decoration: none;

  color: var(--white);

  font-size: 15px;

  position: relative;

  display: inline-block;

  transition: transform 0.25s ease, color 0.25s ease;

}



nav a::after {

  content: "";

  position: absolute;

  width: 0;

  height: 2px;

  background: var(--accent);

  left: 0;

  bottom: -6px;

  transition: 0.3s;

}



nav a:hover {

  transform: translateY(-5px);

  color: var(--accent);

}



nav a:hover::after { width: 100%; }



/* ===== HERO SLIDER ===== */

.slider {

 margin-top: 90px;

  height: calc(100vh - 90px);

  min-height: calc(100vh - 90px);

  position: relative;

  overflow: hidden;

}



.slide {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  opacity: 0;

  transition: opacity 1.5s ease;

}



.slide.active { opacity: 1; }



/* Immagini esistenti */

.slide1 { background-image: url("img/running.jpeg"); }

.slide2 { background-image: url("img/osteopatia-2.jpg"); }

.slide3 { background-image: url("img/MAIN-photo-spine.jpg"); }



/* CONTENITORE TESTO */

.slider-text-wrapper {

  position: absolute;

  top: 45%; /* Spostato più in alto come richiesto */

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  width: 80%;

  max-width: 900px;

  z-index: 10;

}



/* IL NOME (FISSO, NON CLICCABILE) */

.slider-title {

  font-size: 48px;

  font-weight: 600;

  color: var(--white);

  margin-bottom: 20px;

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

}



/* IL LINK CHE CONTIENE LE FRASI (CLICCABILE) */

.slider-link-container {

  display: inline-block;

  text-decoration: none;

  transition: transform 0.3s ease, opacity 0.3s ease;

  cursor: pointer;

}



/* Animazione di transizione del testo */

.text-anim {

  opacity: 1;

  transform: translateY(0);

  transition: opacity 0.5s ease, transform 0.5s ease;

}



/* Stato nascosto (scivolato in basso) */

.text-hidden {

  opacity: 0;

  transform: translateY(30px); /* Scende verso il basso */

}



/* Frase in Italiano */

.slider-quote-it {

  font-size: 22px;

  font-weight: 400;

  color: #fff;

  margin-bottom: 5px;

  text-shadow: 0 2px 5px rgba(0,0,0,0.5);

}



/* Frase in Inglese */

.slider-quote-en {

  font-size: 16px;

  font-weight: 300;

  font-style: italic;

  color: #ddd; /* Leggermente più grigio */

  text-shadow: 0 2px 5px rgba(0,0,0,0.5);

}



/* Hover sul link delle frasi */

.slider-link-container:hover .slider-quote-it {

  color: var(--accent); /* Diventa arancione al passaggio del mouse */

}

/* Impedisce al testo di cambiare colore se il link non è presente */

.slider-link-container:not([href]):hover .slider-quote-it {

  color: #fff; /* Resta bianco se non c'è il link */

}



/* FRECCE */

.arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  font-size: 42px;

  color: var(--white);

  cursor: pointer;

  user-select: none;

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

  padding: 10px;

  border-radius: 50%;

  transition: 0.3s;

  z-index: 20;

}



.arrow:hover { background: rgba(255, 122, 24, 0.8); }

.arrow.left { left: 20px; }

.arrow.right { right: 20px; }



/* Media query per mobile */

@media (max-width: 768px) {

  .slider-title { font-size: 32px; }

  .slider-quote-it { font-size: 18px; }

  .slider-quote-en { font-size: 14px; }

}





/* ===== SEZIONE BIOGRAFIA ===== */

/* ===== SEZIONE BIOGRAFIA CON BACKGROUND ===== */



.bio-section{

  padding: 8% 8% 10% 8%;

}



/* Ripristiniamo il layout a due colonne pulito */

.bio-container{

  display: grid;

  grid-template-columns: 60% 42%;

  gap: 4%;

  align-items: center;

  width: 88%;

  margin: 0 auto;

}

/* CONTENITORE IMMAGINE (Ex bio-card) */

.bio-card{

  width: 75%;

  margin-left: auto;

  transform: translateX(6%);

  text-align: center;

}



/* L'IMMAGINE: Angoli vivi e niente fronzoli */

.bio-image {

    width: 100%;

    height: auto;

    border-radius: 0; /* Angoli a 90 gradi */

    overflow: hidden;

    margin-bottom: 15px;

    border: none;

    box-shadow: none;

}



.bio-image img{

  width: 105%;

  height: auto;

}



/* SCRITTA SOTTO L'IMMAGINE */

.bio-card h2 {

  font-family: "Arial", sans-serif; /* carattere classico */

  font-size: 1.1vw; /* leggermente più piccolo */

  font-weight: 700; /* grassetto */

  letter-spacing: 0.05vw;

  margin-top: 1.2%;

  text-transform: uppercase;

  white-space: nowrap; /* impedisce l'andare a capo */

}

.bio-text{

  font-size: 1.06vw;

  line-height: 1.9;

  text-align: justify;

  width: 95%;

  margin-left: -2%;

}



/* RESPONSIVE */

@media (max-width: 900px) {

    .bio-container {

        grid-template-columns: 1fr; /* Torna a colonna singola su mobile */

    }

    .bio-card {

        margin: 20px auto; /* Centra l'immagine sotto il testo su mobile */

    }

}



/* ===== FASCIA TITOLO ARTICOLI DIVULGATIVI ===== */

/* ===== FASCIA TITOLO ARTICOLI ===== */

.articoli-title-band {

  text-align: center;

  background: #ebe7dc; /* colore distinto dal beige */

  padding: 70px 20px 50px;

  width: 100%;

}



.articoli-title-band h2 {

  font-family: Arial, sans-serif; /* Forza Arial */

  font-size: 33px;               /* Dimensione più decisa */

 /* font-weight: bold; */             /* Grassetto come il logo */

  color: white;                /* Lo stesso blu scuro della barra sopra */

  text-transform: uppercase;     /* Tutto maiuscolo per uno stile moderno */

  letter-spacing: -1px;          /* Lettere leggermente più vicine */

}



/* Questa regola serve per colorare solo la parola che metteremo nello span */

.articoli-title-band h2 span {

  color: #ff7a18;      /* Il tuo arancione */

  margin-left: 0.8%;

}



/* scroll perfetto sotto header */

#articoli {

  scroll-margin-top: 110px;

}





/* ===== ARTICOLI ===== */

/* ===== SEZIONE ARTICOLI EDITORIALI (NUOVA VERSIONE) ===== */

.articoli-editoriali {

  position: relative;

  padding: 0 0 60px 0;

  background-color: --light; /* Sfondo a tinta unita (bianco) */

}



.articoli-title-band {

  text-align: center;

  background: #121826;

  padding: 3.5% 3.5%;

  width: 100%;

}

#articoli {

  scroll-margin-top: 90px;

  padding: 0;

}



/* GESTIONE GRIGLIA EDITORIALE */

.articoli-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 6% 8%; /* Spaziatura in percentuale: verticale 6%, orizzontale 4% */

  width: 80%; /* Prende il 90% dello schermo (puoi portarlo al 100% se vuoi che tocchi i bordi) */

  max-width: 1400px;

  margin: 60px auto 100px auto;

}



/* Stile singolo articolo */

.article-item {

  display: flex;

  flex-direction: column;

  text-decoration: none;

  color: inherit;

  transition: opacity 0.3s ease;

}



.article-item:hover {

  opacity: 0.8; /* Leggero effetto sbiadimento al passaggio del mouse */

}



/* Immagine con proporzioni fisse */

.img-wrapper {

  width: 100%;

  aspect-ratio: 16 / 9; /* Garantisce che le foto siano tutte allineate e della stessa altezza */

  overflow: hidden;

  margin-bottom: 15px;

}



.img-wrapper img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}



.article-item:hover .img-wrapper img {

  transform: scale(1.05); /* Effetto zoom sull'immagine che avevi prima */

}



/* Testo dell'articolo */

.article-content {

  display: flex;

  flex-direction: column;

}



.article-title {

  font-size: 1.1rem;

  font-family: 'Georgia', serif; /* Font graziato in stile testata giornalistica */

  color: #111;

  margin: 0 0 10px 0;

  line-height: 1.3;

}



.category-text {

  color: #d35400; /* Arancione stile giornale */

  font-weight: 700;

  margin-right: 5px;

  font-family: 'Arial', sans-serif; /* Categoria spesso senza grazie */

}



.article-author {

  font-size: 0.85rem;

  color: #666;

  font-style: italic; /* Autore in corsivo */

  margin: 0 0 10px 0;

}



.article-desc {

  font-size: 1.05rem;

  color: #333;

  line-height: 1.5;

  margin: 0;

  /* Taglia il testo dopo 3 righe se la descrizione è troppo lunga */

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



/* === RESPONSIVE DESIGN (Adattamento schermi) === */

@media (max-width: 992px) {

  .articoli-grid {

    grid-template-columns: repeat(2, 1fr); /* 2 articoli per riga sui tablet */

    gap: 8% 5%;

  }

}



@media (max-width: 768px) {

  .articoli-grid {

    grid-template-columns: 1fr; /* 1 articolo per riga su smartphone */

    width: 90%;

    gap: 40px 0;

  }

  

  .img-wrapper {

    aspect-ratio: 3 / 2; /* Su mobile l'immagine può essere leggermente più alta */

  }

}

/* ===== SEZIONE TRANSIZIONE STAGE (FOTO) ===== */

.stage-transition {

  position: relative;

  background-color: var(--dark); /* stesso colore header */

  padding: 80px 0;

  z-index: 5;



  clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);

  margin-bottom: -150px;

}



.stage-content {

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  justify-content: center;  /* 🔥 centra tutto il blocco */

  align-items: center;

  gap: 2%;                /* 🔥 distanza tra testo e bottone */

  padding: 0 20px;

  transform: translateY(-15px);

}



.stage-content p {

 transform: translateX(-20%); /* sposta a destra */

  font-size: 22px;

  color: #ffffff;

  margin: 0;

  white-space: nowrap;      /* resta su una riga */

}

/* contenitore bottoni */

.stage-buttons {

  display: flex;

  gap: 20px;

}



/* bottone */

.btn-stage {

  background-color: var(--accent);

  color: white;

  text-decoration: none;

  padding: 16px 36px;     /* più grande */

  font-size: 15px;        /* più proporzionato */

  font-weight: 600;

  border-radius: 4px;

  transition: none;

  white-space: nowrap;



}



.btn-stage:hover {

  background-color: #e96a0f;

  transform: none; /* micro effetto figo */

}

.stage-transition::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 120px;



  background: linear-gradient(

    to bottom,

    rgba(18, 24, 38, 0) 0%,

    rgba(18, 24, 38, 0.4) 40%,

    rgba(18, 24, 38, 0.7) 70%,

    rgba(18, 24, 38, 1) 100%

  );



  pointer-events: none;

}



/* ===== SEZIONE PARALLAX IMMAGINE ===== */

/* ===== PARALLAX HERO EDITORIALE ===== */

/* ===== PARALLAX HERO (VERSIONE LUSSO) ===== */

.parallax-section {

  position: relative;

  /* Aumentata l'altezza come richiesto */

  min-height: 95vh; 

  width: 100%;

  background-image: url("img/slider2.jpeg"); /* Assicurati che l'immagine sia di alta qualità */

  background-size: cover;

  background-position: center;

  background-attachment: fixed; /* Effetto scorrimento */

  

  /* Flexbox per centrare il contenuto verticalmente */

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  

  /* Toglie margini per attaccarsi al footer */

  margin-bottom: 0; 

  padding-bottom: 0;

}



/* Overlay scuro per far leggere il testo */

.parallax-section::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(

    180deg,

    rgba(0,0,0,0.6) 0%,   /* Più scuro in alto per il taglio bianco */

    rgba(0,0,0,0.3) 50%,

    rgba(0,0,0,0.8) 100%  /* Molto scuro in basso per fondersi col footer */

  );

  z-index: 1;

}



/* FIRMA (Spinta in basso e decorata) */

.parallax-name {

  position: absolute;

  /* Scende al 25% dell'altezza per uscire dalla zona del taglio bianco */

  top: 25%; 

  left: 10%; /* Spostato un po' più dentro */

  z-index: 2;

  

  color: #fff;

  font-family: 'Poppins', sans-serif;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 4px;

  text-transform: uppercase;

  

  /* LA BARRA ARANCIONE RICHIESTA */

  border-left: 4px solid var(--accent);

  padding-left: 15px; 

  opacity: 0.9;

}



/* FRASE CENTRALE (Più grande e curata) */

.parallax-quote {

  position: relative; /* Cambiato da absolute a relative per gestire meglio lo spazio */

  z-index: 2;

  max-width: 1000px;

  padding: 0 20px;

  text-align: center;

  text-decoration: none !important;

  

  

  /* Stile testo migliorato */

  font-family: 'Times New Roman', serif; /* O un font serif elegante */

  font-size: 280%; /* Molto più grande */

  font-weight: 400;

  font-style: italic;

  color: #f6f2e7; 

  line-height: 1.6;

  

  /* Ombra per staccare dallo sfondo */

  text-shadow: 0 4px 15px rgba(0,0,0,0.5);

  margin-top: 60px; /* Un po' di aria rispetto al nome */

}



/* Responsive per cellulari */

@media (max-width: 768px) {

  .parallax-section {

    min-height: 70vh; /* Un po' meno alto su mobile */

  }

  .parallax-name {

    top: 20%;

    left: 20px;

    font-size: 12px;

  }

  .parallax-quote {

    font-size: 24px;

    margin-top: 40px;

  display: block; /* mantiene comportamento da blocco */

   text-decoration: none !important;

  color: inherit !important;

  }

}



.parallax-quote:hover {

  opacity: 0.85; /* effetto elegante hover */

  cursor: pointer;

}



/* ===== FOOTER NUOVO COMPATTO ===== */



.footer-main {

  background: #0f1626;

  color: #d0d3d8;

  font-size: 13px;

}



/* Contenitore centrale */

.footer-2col {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;

  max-width: 700px;

  margin: 0 auto;

  padding: 12px 20px;   /* altezza dimezzata */

  align-items: start;

}



/* Colonne */

.footer-col {

  text-align: center;   /* centrato come richiesto */

}



/* Titoli */

.footer-col h4 {

  font-size: 15px;

  margin-bottom: 8px;

  font-weight: 600;

}



/* Testi */

.footer-col p,

.footer-links li {

  margin-bottom: 4px;

  line-height: 1.3;

}



/* Link */

.footer-main a {

  color: #d0d3d8;

  text-decoration: none;

}



.footer-main a:hover {

  color: #ff7a18;

}



/* Lista sitemap */

.footer-links {

  list-style: none;

  padding: 0;

  margin: 0;

}



/* Parte finale */

.footer-bottom {

  border-top: 1px solid rgba(255,255,255,0.08);

  text-align: center;

  padding: 6px;

  font-size: 11px;

  color: #aaa;

}



/*Logo creator*/



/* Contenitore per allineare gli elementi */

.footer-bottom-content {

  display: flex;

  justify-content: space-between; /* Mette il copyright a sinistra e Simone a destra */

  align-items: center;

  max-width: 900px; /* O la larghezza del tuo sito */

  margin: 0 auto;

  padding: 0 20px;

  flex-wrap: wrap; /* Per il mobile: si mettono uno sotto l'altro */

}



.created-by {

  font-style: italic;

  font-size: 14px;

  letter-spacing: 0.5px;

  font-weight: 800;

}



.created-by a {

  color: #ff7a18; /* Arancione come il tuo hover per richiamare il brand */

  font-weight: 600;

  text-decoration: none;

  transition: opacity 0.3s;

}



.created-by a:hover {

  text-decoration: underline;

  opacity: 0.8;



}



/* Fix per mobile: centra tutto quando lo schermo è piccolo */

@media (max-width: 600px) {

  .footer-bottom-content {

    flex-direction: column;

    gap: 5px;

    text-align: center;

  }

}