*{box-sizing:border-box; margin:0; padding:0}
body{font-family:'Segoe UI', system-ui, sans-serif; background:#f6f3ee; color:#2b2b2b; line-height:1.6}
a{text-decoration:none; color:inherit}
img{max-width:100%; display:block}
header{background:#fdfaf5; padding:18px 40px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e8e2d9; position:sticky; top:0; z-index:20}
.logo{font-weight:800; font-size:1.35rem; color:#4a3f35}
nav a{margin-left:24px; font-size:0.95rem; color:#5a5a5a; font-weight:500}
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  right: 0; /* CAMBIO CLAVE: alinea a la derecha */
  left: auto;
  background: white;
  min-width: 360px; /* más ancho para que no corte el texto */
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  border-radius: 10px;
  z-index: 9999;
  padding: 8px 0;
  border: 1px solid #eee;
}
.dropdown-content a {
  color: #222;
  padding: 12px 18px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  white-space: nowrap; /* que no haga salto raro */
  text-align: left;
}
.dropdown-content a:hover { background: #FFF8E1; color: #C8A415; }
.dropdown:hover .dropdown-content { display: block; }
.dropdown-content a:hover { background: #FFF8E1; color: #C8A415; }
.dropdown:hover .dropdown-content { display: block; }
.dropbtn { cursor: pointer; }

/* Para mobile: que se abra al tocar */
@media (max-width: 768px) {
  .dropdown-content { position: static; box-shadow: none; }
  .dropdown.active .dropdown-content { display: block; }
}
.hero {
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.65)), url('images/eremo-san-bartolomeo-banner-abruzzo.webp');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  padding: 90px 20px;
  text-align: center;
  color: #fff;
}
.hero h1{font-size:2.9rem; font-weight:700; margin-bottom:12px}
.hero p{font-size:1.15rem; opacity:0.92; max-width:700px; margin:0 auto}
.container{max-width:1180px; margin:45px auto; padding:0 24px; display:grid; grid-template-columns:repeat(3, 1fr); gap:28px}
.card{background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,0.07); transition:0.2s}
.card:hover{transform:translateY(-5px)}
.card img{width:100%; height:195px; object-fit:cover}
.card-body{padding:20px}
.card-body h3{font-size:1.15rem; margin-bottom:7px}
.card-body p{font-size:0.88rem; color:#777; min-height:42px}
.badge{font-size:0.75rem; background:#eef6ee; padding:5px 10px; border-radius:20px; display:inline-block; margin-top:6px}
.btn{display:inline-block; margin-top:14px; background:#8b7355; color:#fff!important; padding:9px 18px; border-radius:6px; font-size:0.85rem; font-weight:600}
.affiliato-box{background:#fff8e1; border:2px solid #ffcc02; padding:20px; border-radius:12px}
.btn-affiliato{display:inline-block; background:#003580; color:#fff!important; padding:12px 22px; border-radius:8px; font-weight:bold; margin-top:12px}
.btn-affiliato:hover{background:#00224f}
.seo-text{max-width:800px; margin:60px auto; padding:0 24px}
.seo-text h2{font-size:1.6rem; margin-bottom:12px}
.seo-text p{color:#555; margin-bottom:16px}
footer{text-align:center; padding:40px; color:#999; font-size:0.85rem; background:#fff; margin-top:40px; border-top:1px solid #eee}
@media(max-width:900px){.container{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:2.1rem}header{padding:14px 20px}}
@media(max-width:600px){.container{grid-template-columns:1fr; padding:0 16px}.hero{padding:65px 16px}.hero h1{font-size:1.65rem}nav{display:none}header{justify-content:center}}