@import url('../font/font.css');

/*
 * Studio Dentistico Diaz – sito statico.
 * Misure prese dal sito originale (template Joomla) a 1536 e 1920 px di larghezza.
 */
:root {
    --verde: #969b1b;
    --grigio: #8b8f8e;
    --testo: #666;
    --scuro: #2a2a2a;
    --larghezza: 1400px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: 'Nunito', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.7; color: var(--testo); background: #fff; }
/* Home: sotto l'ultima sezione il fondo della pagina è verde, come nell'originale */
body.home { background: var(--verde); }
body.interna { background: #f9f9f9; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: 'Poppins', Arial, Helvetica, sans-serif; margin: 0; }
p { margin: 0 0 20px; }
.contenitore { width: 100%; max-width: var(--larghezza); margin: 0 auto; }

/* ---------- Intestazione: 146 px, logo 250×86, menu Roboto 14 px grassetto ---------- */
.intestazione { background: #fff; border-bottom: 1px solid #dee2e6; }
.intestazione .contenitore { display: flex; align-items: center; padding: 30px 0; }
.logo { flex: none; }
.logo img { width: 250px; height: 86px; }
.menu { margin-left: 316px; }
.menu > ul { list-style: none; margin: 0; padding: 0; display: flex; }
.menu li { position: relative; }
.menu a, .menu button { display: block; padding: 8px 16px; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 23.8px; font-weight: 700; text-transform: uppercase; color: #666; text-decoration: none; background: none; border: 0; cursor: pointer; }
.menu a:hover, .menu button:hover, .menu .attivo > a, .menu .attivo > button { color: #3e3e3e; }
.sottomenu { list-style: none; margin: 0; padding: 10px 0; position: absolute; top: 100%; left: 0; z-index: 20; min-width: 260px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .1); opacity: 0; visibility: hidden; transition: opacity .15s; }
.sottomenu a { padding: 6px 20px; text-transform: none; font-weight: 500; }
.ha-sottomenu:hover > .sottomenu, .ha-sottomenu:focus-within > .sottomenu, .ha-sottomenu.aperto > .sottomenu { opacity: 1; visibility: visible; }
.apri-menu { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; }
.apri-menu span { display: block; width: 26px; height: 2px; background: #333; margin: 6px 0; }

/* ---------- Home: immagine a tutta larghezza (1920×540) con frecce e pallini ---------- */
.principale { position: relative; width: 100%; aspect-ratio: 1920 / 540; overflow: hidden; background: #f8f9fa; }
.principale > img { width: 100%; height: 100%; object-fit: cover; }
.freccia { position: absolute; top: 50%; margin-top: -16px; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.freccia.indietro { left: 30px; }
.freccia.avanti { right: 30px; }
.pallini { position: absolute; left: 0; right: 0; bottom: 6.5%; display: flex; justify-content: center; gap: 10px; }
.pallini span { width: 13px; height: 13px; border-radius: 50px; border: 1.6px solid rgba(255, 255, 255, .8); }
.pallini span.attivo { background: #fff; border-color: #fff; }

/* ---------- Home: benvenuto (sezione 50/80 px, colonna foto 700 px, testo 640 px) ---------- */
.benvenuto { background: #fff; padding: 50px 0 80px; }
.benvenuto .contenitore { display: flex; align-items: center; }
.foto-sovrapposte { position: relative; flex: none; width: 760px; height: 787px; }
.foto-sovrapposte .foto-1 { position: absolute; left: 0; top: 0; width: 450px; height: 562px; object-fit: cover; border-radius: 10px; }
.foto-sovrapposte .foto-2 { position: absolute; left: 380px; top: 276px; width: 300px; height: 451px; object-fit: cover; border-radius: 10px; }
.fumetto { position: absolute; left: 380px; top: 42px; width: 300px; padding: 40px; background: #fff; border-radius: 500px; box-shadow: 0 5px 15px rgba(0, 0, 0, .08); text-align: center; }
.benvenuto .testo { width: 640px; }
.benvenuto .testo p { margin-bottom: 20px; }
.benvenuto h1 { font-size: 42px; line-height: 50.4px; font-weight: 600; color: #000; text-transform: uppercase; margin-bottom: 29px; }

/* ---------- Home: specializzazioni (tessere 320×280 che si girano) ---------- */
.specializzazioni { background: var(--grigio); padding: 50px 0 80px; text-align: center; }
.specializzazioni h2 { font-size: 32px; line-height: 41.6px; font-weight: 700; color: #fff; text-transform: uppercase; margin-bottom: 19px; }
.specializzazioni .sotto { color: #fff; margin: 0 0 50px; }
.griglia-servizi { display: grid; grid-template-columns: repeat(4, 320px); gap: 30px 40px; justify-content: space-between; }
.tessera { position: relative; display: block; width: 320px; height: 280px; perspective: 1000px; text-decoration: none; }
.tessera .faccia { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; backface-visibility: hidden; transform-style: preserve-3d; transition: transform .6s ease-in-out; }
.tessera .fronte { background-size: cover; background-position: 50% 50%; background-color: #fff; transform: rotateY(0deg); }
.tessera .retro { background: var(--verde); color: #fff; transform: rotateY(-178deg); }
.tessera:hover .fronte, .tessera:focus .fronte { transform: rotateY(178deg); }
.tessera:hover .retro, .tessera:focus .retro { transform: none; }
/* Come nell'originale il titolo ha 20 px di margine sotto anche sul fronte: resta un po' sopra il centro */
.tessera h3 { font-size: 29.936px; line-height: 35.92px; font-weight: 500; color: var(--scuro); margin-bottom: 20px; }
.tessera .retro p { margin: 0; }

/* ---------- Home: mappa ---------- */
.dove-siamo { background: #fff; padding: 50px 0 80px; }
.dove-siamo h2 { font-size: 36.88px; line-height: 44.26px; font-weight: 500; color: var(--scuro); margin-bottom: 20px; }
.mappa { display: block; width: 100%; height: 400px; border: 0; }
.spazio-verde { height: 101px; }

/* ---------- Pagine interne (fondo #f9f9f9, 100 px sotto l'intestazione) ---------- */
.pagina { padding-top: 100px; }
.pagina h1 { font-size: 32px; line-height: 41.6px; font-weight: 600; color: var(--scuro); text-transform: uppercase; margin-bottom: 29px; }
.pagina h2 { font-size: 24px; line-height: 33.6px; font-weight: 500; color: #333; margin-bottom: 20px; }
.due-colonne { display: grid; grid-template-columns: 680px 680px; gap: 40px; align-items: center; }
.due-colonne .testo { padding-left: 40px; }
.foto-pagina { width: 600px; border-radius: 10px; }
.testo ul { padding-left: 30px; margin: 0 0 16px; }

.schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.scheda { background: #fff; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, .08); padding: 80px 40px 40px; }

.tecnologie { padding-top: 50px; display: grid; grid-template-columns: repeat(3, 440px); gap: 40px; align-items: start; }
.tecnologie .colonna-foto { display: grid; gap: 30px; }
.tecnologie .colonna-foto img { width: 100%; border-radius: 10px; }

.contatti .due-colonne { align-items: center; }
.contatti .foto-pagina { width: 100%; max-width: none; }
.contatti a { color: inherit; text-decoration: none; }
.contatti a[href^="mailto"] { color: #222; }

/* ---------- Piè di pagina (in proporzione alla larghezza, come nell'originale) ---------- */
.piede { background: var(--verde); color: #fff; }
body.interna .piede { padding-top: 101px; }
.piede .colonne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; width: 74.4%; margin-left: 17.05%; padding-bottom: 11px; }
.piede h2 { font-size: 29.936px; line-height: 35.92px; font-weight: 500; color: #fff; margin-bottom: 20px; }
.piede p { margin: 0 0 20px; }
.piede ul { margin: 0 0 20px; padding-left: 30px; }
.piede a { color: #fff; text-decoration: none; }
.piede a:hover { text-decoration: underline; }
.copyright { background: #262626; color: #787878; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 14.44px; line-height: 25px; padding: 20px 0; }

/* ---------- Schermi più stretti ---------- */
@media (max-width: 1440px) {
    .contenitore { padding: 0 20px; }
    .menu { margin-left: auto; margin-right: auto; }
    .griglia-servizi { grid-template-columns: repeat(4, 1fr); gap: 30px 20px; }
    .tessera { width: auto; }
    .due-colonne { grid-template-columns: 1fr 1fr; }
    .foto-pagina { width: 100%; max-width: 600px; }
    .tecnologie { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1200px) {
    .benvenuto .contenitore { flex-direction: column; align-items: stretch; gap: 40px; }
    .foto-sovrapposte { width: 680px; max-width: 100%; margin: 0 auto; }
    .benvenuto .testo { width: auto; }
}
@media (max-width: 960px) {
    .apri-menu { display: block; }
    .intestazione .contenitore { position: relative; padding: 15px 20px; }
    .logo img { width: 180px; height: auto; }
    .menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, .1); display: none; margin: 0; }
    .menu.aperto { display: block; }
    .menu > ul { flex-direction: column; padding: 10px 20px 20px; }
    .sottomenu { position: static; opacity: 1; visibility: visible; box-shadow: none; display: none; padding: 0 0 0 12px; }
    .ha-sottomenu.aperto > .sottomenu { display: block; }
    .freccia { display: none; }
    .griglia-servizi { grid-template-columns: repeat(2, 1fr); }
    .due-colonne, .tecnologie, .schede { grid-template-columns: 1fr; gap: 30px; }
    .due-colonne .testo { padding-left: 0; }
    .pagina { padding-top: 50px; padding-bottom: 50px; }
    .piede .colonne { grid-template-columns: 1fr; width: auto; margin: 0 20px; gap: 0; }
    .copyright { padding: 20px; }
}
@media (max-width: 720px) {
    .foto-sovrapposte { height: auto; padding-bottom: 20px; }
    .foto-sovrapposte .foto-1 { position: relative; width: 66%; height: auto; }
    .foto-sovrapposte .foto-2 { left: 42%; top: 35%; width: 46%; height: auto; }
    .fumetto { left: 42%; top: 5%; width: auto; max-width: 56%; padding: 20px 26px; font-size: 13px; line-height: 1.5; }
    .benvenuto h1 { font-size: 28px; line-height: 1.2; }
    .tessera { height: auto; aspect-ratio: 320 / 280; }
    .tessera h3 { font-size: 20px; line-height: 1.2; }
    .tessera .retro p { font-size: 13px; line-height: 1.45; }
}