*{box-sizing:border-box}
body{margin:0;font-family:Arial;background:#f4f4f4}
.nav{background:#0e882e;color:white;padding:15px;display:flex;justify-content:space-between;position:sticky;top:0}
.nav a{color:white;text-decoration:none;margin-left:15px}
.logo{font-weight:bold}

.hero{
  height:90vh;
  background:
    linear-gradient(rgba(14,136,46,.75),rgba(14,136,46,.75)),
    url("img/fondo.jpg");
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:white;
}

.hero h1{font-size:48px;animation:fadeDown 1.2s}
.hero p{animation:fadeUp 1.5s}

.seccion{padding:60px;text-align:center}
.cards{display:flex;gap:30px;justify-content:center;flex-wrap:wrap}
.card{
  background:white;width:260px;border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
  text-decoration:none;color:black;
  transition:.4s;overflow:hidden;
}
.card img{width:100%;height:160px;object-fit:cover}
.card:hover{transform:translateY(-10px) scale(1.03)}

.galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.item{background:white;border-radius:12px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,.1)}
.item img{width:100%;height:160px;object-fit:cover}

.fade{opacity:0;transform:translateY(30px);transition:1s}
.show{opacity:1;transform:none}

iframe{width:100%;height:300px;border:none}

@keyframes fadeDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1}}

footer{background:#0e882e;color:white;text-align:center;padding:15px}
/* ===== TABLA DE FIADOS ===== */
.tabla-fiados {
  width: 80%;
  margin: 40px auto;
  border-collapse: collapse;
  background: white;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  border-radius: 12px;
  overflow: hidden;
}

.tabla-fiados th {
  background: #0e882e;
  color: white;
  padding: 12px;
  text-align: center;
}

.tabla-fiados td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.tabla-fiados tr:hover {
  background: #f2f2f2;
}

.tabla-fiados button {
  background: #c62828;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.tabla-fiados button:hover {
  background: #a91e1e;
}
.form-admin {
  width: 80%;
  margin: 30px auto;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.form-admin input {
  width: 30%;
  padding: 8px;
  margin: 10px;
}

.form-admin button {
  background: #0e882e;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
}

.mapa-cuadrado {
  width: 350px;
  height: 350px;
  margin: 30px auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.mapa-cuadrado iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 600px) {
  .mapa-cuadrado {
    width: 90vw;
    height: 90vw;
  }
}

.direccion {
  font-size: 16px;
  margin-bottom: 15px;
  color: #333;
  font-weight: 500;
}

.btn-maps {
  display: inline-block;
  margin-bottom: 20px;
  background: #0e882e;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
}
.btn-maps:hover {
  background: #0b6d24;
}