/* Estilo moderno, predominancia de blanco */
:root{
  --bg:#ffffff;
  --muted:#6b6b6b;
  --accent:#0b5cff;
  --max-width:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#111;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:16px 24px;
}
.hero{
  padding:24px 0;
  text-align:left;
}
.hero h1{
  margin:0;
  font-family:Merriweather, serif;
  font-size:42px;
  color:#111;
  line-height:1.3;
  font-weight:700;
}
.hero .underline{
  text-decoration:underline;
}
.location-card{
  padding:12px 0;
  border-bottom:1px solid #f5f5f5;
}
.location-card h3{margin:0 0 4px 0;font-size:16px}.location-card p{margin:2px 0;font-size:14px;line-height:1.4}.location-card a[href^="tel"],.location-card a[href^="mailto"]{
  color:var(--accent);
  text-decoration:none;
}
.location-card a[href^="tel"]:hover,.location-card a[href^="mailto"]:hover{
  text-decoration:underline;
}
.btn{
  display:inline-block;
  padding:8px 14px;
  margin-top:8px;
  background:transparent;
  border:1px solid #ddd;
  color:#111;
  text-decoration:none;
  border-radius:6px;
  font-weight:600;
  transition:all 0.2s ease;
}
.btn:hover{
  background:#111;
  color:#fff;
  border-color:#111;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.site-footer{
  margin-top:20px;
  padding:12px 0;
  border-top:1px solid #eee;
  color:var(--muted);
  font-size:13px;
}
.site-footer a{
  color:var(--muted);
  text-decoration:none;
  cursor:pointer;
}
.site-footer a:hover{
  color:#111;
  text-decoration:underline;
}
.modal{
  display:none;
  position:fixed;
  z-index:1000;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
}
.modal-content{
  background:#fff;
  margin:5% auto;
  padding:30px;
  border-radius:8px;
  width:90%;
  max-width:700px;
  max-height:80vh;
  overflow-y:auto;
  box-shadow:0 4px 20px rgba(0,0,0,0.2);
  animation:modalFadeIn 0.3s ease;
}
@keyframes modalFadeIn{
  from{opacity:0;transform:translateY(-20px)}
  to{opacity:1;transform:translateY(0)}
}
.modal-close{
  color:#999;
  float:right;
  font-size:32px;
  font-weight:300;
  line-height:20px;
  cursor:pointer;
  transition:color 0.2s;
}
.modal-close:hover{
  color:#111;
}
.modal-content h2{
  margin:0 0 20px 0;
  font-family:Merriweather,serif;
  font-size:24px;
}
.modal-content p{
  margin:12px 0;
  line-height:1.6;
}
@media (max-width:600px){
  .hero h1{font-size:32px}
}