:root{
  --verde:#1b7f3b;
  --verde-scuro:#145c2b;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: Arial, sans-serif;
  background:#f4f6f5;
  color:#222;
}

/* ===== HEADER (sticky + shrink) ===== */
header{
  position:sticky;
  top:0;
  z-index:3000;
  background:var(--verde);
  transform: translateZ(0);
}

.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 18px;
}

.header-top img{
  height:92px;
  width:auto;
}

body.home .header-top img{
  height:130px;
}

.header-title{
  flex:1;
  text-align:center;
  font-size:28px;
  font-weight:600;
  color:#fff;
}

/* shrink */
header.shrink .header-top{
  padding:6px 18px;
}

header.shrink .header-title{
  font-size:18px;
}

header.shrink .header-top img{
  height:70px;
}

body.home header.shrink .header-top img{
  height:95px;
}

/* ===== NAV ===== */
nav{
  background:var(--verde-scuro);
}

nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

nav li{
  position:relative;
}

nav a{
  display:block;
  padding:12px 14px;
  color:#fff;
  text-decoration:none;
  font-weight:700;
}

nav a:hover,
nav a.active{
  background:rgba(255,255,255,.12);
}

/* ===== DROPDOWN ===== */
.dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:240px;

  background:rgba(27,127,59,0.78);
  backdrop-filter:blur(8px);

  border:1px solid rgba(255,255,255,0.18);
  border-radius:12px;
  padding:8px 0;

  box-shadow:
    0 14px 28px rgba(0,0,0,0.18),
    0 10px 22px rgba(27,127,59,0.22);

  z-index:6000;
}

.dropdown-menu a{
  color:#fff;
  padding:12px 16px;
  font-weight:700;
  font-size:15px;
  white-space:nowrap;
}

.dropdown-menu a:hover{
  background:rgba(255,255,255,0.14);
}

.dropdown:hover .dropdown-menu{
  display:block;
}

/* ===== SLIDER ===== */
.slider{
  position:relative;
  height:450px;
  overflow:hidden;
  background:#111;
}

.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  display:none;
}

.slide.active{
  display:block;
}

.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:rgba(0,0,0,.5);
  color:#fff;
  font-size:30px;
  padding:10px 14px;
  cursor:pointer;
  border-radius:10px;
  z-index:10;
}

.arrow.left{
  left:12px;
}

.arrow.right{
  right:12px;
}

/* ===== SEZIONI HOME ===== */
.section{
  padding:38px 18px;
  max-width:1100px;
  margin:0 auto;
}

.section h2{
  text-align:center;
  color:var(--verde);
  margin:0 0 12px 0;
}

.cta-row{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

.cta-btn{
  display:inline-block;
  background:var(--verde);
  color:#fff;
  text-decoration:none;
  padding:10px 16px;
  border-radius:10px;
  font-weight:800;
}

/* ===== AZIONI HOME ===== */
.actions{
  padding:28px 18px;
  max-width:1100px;
  margin:0 auto;
}

.actions-wrap{
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
}

.action-box{
  background:#fff;
  border-radius:16px;
  padding:18px 16px;
  text-align:center;
  width:280px;
  cursor:pointer;
  box-shadow:0 3px 15px rgba(0,0,0,.10);
  transition:.25s;
}

.action-box:hover{
  transform:translateY(-5px);
}

.action-icon{
  width:110px;
  height:110px;
  object-fit:contain;
  margin-bottom:10px;
}

.action-box h3{
  margin:0;
  color:var(--verde);
}

.action-box p{
  margin:6px 0 0 0;
  color:#555;
  font-weight:600;
}

/* ===== SERVIZI GRID ===== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:18px;
}

.service-card{
  background:#fff;
  border-left:5px solid var(--verde);
  border-radius:14px;
  padding:14px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  cursor:pointer;
}

.service-card h4{
  margin:0 0 6px 0;
  color:var(--verde);
}

.service-card p{
  margin:0;
  color:#444;
}

/* ===== MAPPA ===== */
.map{
  max-width:1100px;
  margin:18px auto 0 auto;
  padding:0 18px;
}

.map iframe{
  width:100%;
  height:280px;
  border:0;
  border-radius:12px;
}

/* ===== PAGINE STANDARD ===== */
.page-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:22px 18px 20px 18px;
}

.page-title{
  background:#fff;
  border-left:5px solid var(--verde);
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  margin-top:18px;
}

.page-title h1{
  margin:0;
  color:var(--verde);
}

.page-card{
  background:#fff;
  border-left:5px solid var(--verde);
  border-radius:14px;
  padding:20px;
  margin:18px 0;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}

.btn{
  display:inline-block;
  background:var(--verde);
  color:#fff;
  text-decoration:none;
  padding:10px 16px;
  border-radius:10px;
  font-weight:800;
}

/* ===== MODALI ===== */
.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  z-index:7000;
  padding:18px;
  justify-content:center;
  align-items:center;
}

.modal-box{
  background:#fff;
  width:100%;
  max-width:640px;
  max-height:85vh;
  overflow-y:auto;
  padding:20px;
  border-radius:14px;
  position:relative;
}

.modal-close{
  position:absolute;
  top:10px;
  right:12px;
  font-size:26px;
  border:none;
  background:transparent;
  cursor:pointer;
}

.input,
.textarea,
select.input{
  width:100%;
  padding:10px;
  margin-bottom:12px;
  border-radius:10px;
  border:1px solid #ccc;
  font-size:15px;
}

.textarea{
  min-height:90px;
}

.submit-btn{
  background:var(--verde);
  color:#fff;
  border:none;
  padding:11px 16px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
}

/* ===== FOOTER ===== */
footer{
  background:#111;
  color:#fff;
  text-align:center;
  padding:22px 14px;
  margin-top:30px;
}

footer .name{
  font-weight:900;
  margin-bottom:8px;
}

footer a{
  color:#fff;
}

/* ===== TO TOP ===== */
#toTop{
  position:fixed;
  right:18px;
  bottom:18px;
  width:46px;
  height:46px;
  border-radius:999px;
  border:none;
  background:var(--verde);
  color:#fff;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  display:none;
  z-index:8000;
  box-shadow:0 8px 18px rgba(0,0,0,.2);
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .services-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media(max-width:768px){
  .header-title{
    font-size:20px;
  }

  body.home .header-top img{
    height:120px;
  }

  header.shrink .header-top img{
    height:60px;
  }

  nav ul{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
  }

  .slider{
    height:260px;
  }

  .slide{
    height:260px;
  }

  .services-grid{
    grid-template-columns:1fr;
  }

  .dropdown-menu{
    position:static;
    margin:0 10px 10px 10px;
  }

  .dropdown:hover .dropdown-menu{
    display:block;
  }
}

/* ===== SOCIAL ICONS ===== */
.social-row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}

.social-icon{
  width:44px;
  height:44px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  transition:transform .18s ease, box-shadow .18s ease;
}

.social-icon:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 18px rgba(0,0,0,.18);
}

.social-icon svg{
  display:block;
  width:26px;
  height:26px;
  fill:#fff;
}

/* colori brand */
.social-icon.fb{
  background:#1877F2;
}

.social-icon.ig{
  background:radial-gradient(
    circle at 30% 110%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285AEB 90%
  );
}

/* WhatsApp */
.social-icon.wa{
  background:#25D366;
}

.social-icon.wa svg,
.social-icon.wa svg *{
  fill:#fff !important;
  stroke:#fff !important;
}

.social-icon.wa svg{
  width:24px;
  height:24px;
}

/* ===== POPUP CORSO ===== */
#corso-popup{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.8);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
  padding:18px;
}

/* Banner */
.popup-content{
  position:relative;
  width:min(500px, 90vw);
  max-height:90vh;
}

/* Immagine banner */
.popup-content img{
  width:100%;
  height:auto;
  max-height:90vh;
  object-fit:contain;
  border-radius:12px;
  display:block;
}

/* X */
.close-popup{
  position:absolute;
  top:-10px;
  right:-10px;
  width:38px;
  height:38px;
  border-radius:999px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  cursor:pointer;
  user-select:none;
  z-index:2;
}

/* ===== BANNER SU TELEFONO ===== */
@media(max-width:768px){
  .popup-content{
    width:92vw;
    max-height:88vh;
  }

  .popup-content img{
    max-height:88vh;
  }
}

/* ================================
   AMBULANZA (HOME) - FERMA + LAMPEGGI A CONO
   ================================ */

.ambulanza-stage{
  max-width:1100px;
  margin:14px auto 0 auto;
  padding:0 18px;
  display:flex;
  justify-content:center;
}

.ambulanza-static{
  position:relative;
  width:320px;
  aspect-ratio:16 / 6;
  pointer-events:none;
}

.ambulanza-static img{
  width:100%;
  height:auto;
  display:block;
}

.luce-beacon{
  position:absolute;
  width:0;
  height:0;
  background:transparent;
  animation:flash 0.45s infinite;
}

.luce-beacon::after{
  content:"";
  position:absolute;
  top:50%;
  left:65%;
  width:175px;
  height:92px;
  transform:translateY(-50%) rotate(6deg);
  transform-origin:left center;
  background:linear-gradient(
    90deg,
    rgba(42,166,255,.72) 0%,
    rgba(42,166,255,.26) 55%,
    rgba(42,166,255,0) 100%
  );
  clip-path:polygon(0 50%,100% 0,100% 100%);
  opacity:.85;
  pointer-events:none;
}

/* ================================
   POSIZIONE PRECISA LAMPEGGIANTI
   ================================ */

.luce-front{
  top:28px;
  right:38px;
  width:1px;
  height:1px;
  background:transparent;
  box-shadow:none;
}

.luce-back{
  top:24px;
  left:26px;
  width:1px;
  height:1px;
  background:transparent;
  box-shadow:none;
  animation-delay:.18s;
}

.luce-beacon::after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:170px;
  height:90px;
  transform:translateY(-50%) rotate(6deg);
  transform-origin:left center;
  background:linear-gradient(
    90deg,
    rgba(42,166,255,.70) 0%,
    rgba(42,166,255,.28) 55%,
    rgba(42,166,255,0) 100%
  );
  clip-path:polygon(0 50%,100% 0,100% 100%);
  opacity:.85;
  pointer-events:none;
}

/* cono verso sinistra */
.luce-back::after{
  left:auto;
  right:0;
  transform:translateY(-50%) rotate(186deg);
  transform-origin:right center;
}

/* lampeggio */
@keyframes flash{
  0%,100%{
    opacity:.15;
  }

  50%{
    opacity:1;
  }
}

/* ===== MOBILE AMBULANZA ===== */

@media(max-width:768px){
  .ambulanza-static{
    width:220px;
  }

  .luce-beacon::after{
    width:130px;
    height:70px;
  }

  .luce-front{
    top:13%;
    right:19%;
  }

  .ambulanza-static .luce-back{
    position:absolute !important;
    top:42px !important;
    left:-115px !important;
  }

  .luce-back::after{
    right:0 !important;
    left:auto !important;
    transform:translateY(-50%) rotate(180deg) !important;
  }
}

/* =========================================
   FIX LAMPEGGI AMBULANZA
   ========================================= */

.ambulanza-static{
  position:relative;
}

.luce-beacon{
  width:0 !important;
  height:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

.luce-beacon::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:190px;
  height:95px;
  background:linear-gradient(
    90deg,
    rgba(42,166,255,.75) 0%,
    rgba(42,166,255,.28) 55%,
    rgba(42,166,255,0) 100%
  );
  clip-path:polygon(0 50%,100% 0,100% 100%);
  transform-origin:left center;
  filter:blur(.2px);
  opacity:.85;
  animation:flashCone .45s infinite;
}

/* ===== POSIZIONI ===== */

.luce-front{
  position:absolute !important;
  top:26% !important;
  left:70% !important;
}

.luce-back{
  position:absolute !important;
  top:5% !important;
  left:-45% !important;
}

.luce-back::after{
  transform:translateX(-100%) rotate(180deg);
  transform-origin:right center;
}

/* Lampeggio */
@keyframes flashCone{
  0%,100%{
    opacity:.18;
  }

  50%{
    opacity:1;
  }
}

/* Mobile: coni più corti */
@media(max-width:768px){
  .luce-beacon::after{
    width:150px;
    height:75px;
  }
}

/* ===== Bilanciamento luminosità coni ===== */

.luce-front::after{
  opacity:.60 !important;
  animation-duration:.52s !important;
  filter:blur(.3px) !important;
}

.luce-back::after{
  opacity:.95 !important;
  animation-duration:.42s !important;
  filter:blur(.15px) !important;
}

/* ================================
   LAMPEGGI ALTERNATI
   ================================ */

.luce-front::after{
  animation:flashAlt .6s infinite;
}

.luce-back::after{
  animation:flashAlt .6s infinite;
  animation-delay:.3s;
}

@keyframes flashAlt{
  0%{
    opacity:.15;
  }

  40%{
    opacity:1;
  }

  60%{
    opacity:1;
  }

  100%{
    opacity:.15;
  }
}

/* ================================
   DIFFERENZA LUMINOSITÀ
   ================================ */

/* cono davanti più luminoso */
.luce-front::after{
  opacity:1 !important;
  filter:blur(.15px);
}

/* cono dietro più debole */
.luce-back::after{
  opacity:.55 !important;
  filter:blur(.35px);
}