:root {
  --blue: #000000;       /* azul principal */
  --blue-light: #1b1b1b; /* azul secundario para botones y hover */
  --accent: #f4c97f;
  --whatsapp: #25D366;
  --bg: #fafafa;
  --maxw: 1100px;
  --radius: 14px;
}

/* RESET */
*{box-sizing:border-box;}
body{margin:0; font-family:Arial, sans-serif; background:var(--bg); color:#222;}
a{text-decoration:none;color:inherit;}

/* ===========================
  HEADER
=========================== */
header {
  position: sticky;
  top: 0;
  z-index: 1002; /* encima del nav */
  background: var(--blue);
  box-shadow: 0 2px 12px rgba(0,0,0,0.12, 85);
}

.header-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.logo-area img { height:45px; }
.logo-text { color:white; font-weight:400; font-size:13px; line-height:1.2; }

/* ===========================
  NAV
=========================== */
nav {
  display: flex;
  gap: 16px;
  align-items: center;
  transition: all 0.3s ease;
}

nav a {
  color:white;
  font-weight:600;
  padding:6px 14px;
  border-radius:12px;
  transition: background 0.25s ease, transform 0.25s ease;
}

nav a:hover {
  background: var(--blue-light);
  transform: translateY(-2px);
}

nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85); /* color y transparencia */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: -1; /* para que los links queden encima */
}

/* ===========================
  BOTÓN MÓVIL
=========================== */
.mobile-btn {
  display:none;
  color:white;
  font-size:28px;
  font-weight:700;
  background:none;
  border:none;
  cursor:pointer;
  position: relative;
  z-index: 1003; /* encima de todo */
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* ===========================
  MENÚ MÓVIL
=========================== */
@media(max-width:820px){
  .mobile-btn { display:block; }

  nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 240px;
    height: 100%;
    flex-direction: column;
    padding-top: 90px;
    background: var(--blue); /* azul sólido igual que header */
    gap: 20px;
    transition: right 0.36s ease;
    z-index: 1001;
  }

  nav.open { right:0; }

  nav a { padding:12px 16px; }
  nav a:hover { background: var(--blue-light); }
}

/* ===========================
  HERO
=========================== */
.hero {
  position: relative;
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  color:white;
  margin-bottom:18px;
  background: url('images/fondo.png') center/cover no-repeat;
}

.hero-inner{position:relative; z-index:1; max-width:900px;}
.hero h1{font-size:42px; margin:0 0 8px;}
.hero p{font-size:18px; margin:0 0 14px;}
.hero .btn{display:inline-block; background:var(--blue-light); color:white; padding:12px 20px; border-radius:12px; font-weight:700; text-decoration:none;}
.hero .btn:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.18);}

/* ===========================
  SECCIONES
=========================== */
.container{max-width:var(--maxw); margin:0 auto; padding:20px;}
h2{color: var(--blue); text-align:center; margin-bottom:12px;}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;}
.card{background:white; padding:18px; border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,0.08);}

/* ===========================
  CAROUSEL
=========================== */
.carousel-outer{position:relative; overflow:hidden; margin-top:20px;}
.carousel-track{display:flex; gap:20px; transition:transform 0.4s ease;}
.carousel-item{flex:0 0 calc((100% - 40px)/3); background:white; border-radius:var(--radius); padding:10px; box-shadow:0 8px 24px rgba(0,0,0,0.08);}
.carousel-item img{width:100%; height:230px; object-fit:cover; border-radius:var(--radius); cursor:pointer;}
.carousel-btn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.4); color:white; border:none; font-size:22px; padding:10px 14px; cursor:pointer; border-radius:10px; z-index:5;}
.carousel-btn.prev{left:10px;} .carousel-btn.next{right:10px;}
@media(max-width:768px){ .carousel-item{flex:0 0 calc(50% - 20px);} }
@media(max-width:480px){ .carousel-item{flex:0 0 100%;} }

/* ===========================
  FORMULARIO
=========================== */
.contact-card{max-width:520px; margin:22px auto; background:white; padding:22px; border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,0.10);}
.contact-card input, .contact-card textarea{width:100%; padding:12px; margin:8px 0; border:1px solid #ddd; border-radius:12px; font-size:15px;}
.contact-card button{width:100%; padding:12px; border-radius:12px; border:none; background:var(--blue); color:white; font-weight:700; cursor:pointer; font-size:16px;}

/* ===========================
  MAPA Y FOOTER
=========================== */
.map-container{width:100%; height:350px; border-radius:12px; overflow:hidden; margin-top:12px; box-shadow:0 10px 30px rgba(0,0,0,0.08);}
footer{background:var(--blue); color:#e6ecff; text-align:center; padding:18px; margin-top:22px;}

/* ===========================
  BOTONES FLOTANTES
=========================== */
/* .whatsapp-float{
  position:fixed; bottom:20px; right:20px; width:60px; height:60px;
  background:var(--whatsapp); border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 25px rgba(0,0,0,0.25); z-index:9999;
}
.whatsapp-float img{width:35px;} */
.facebook-float{
  position:fixed; bottom:20px; right:20px; width:60px; height:60px;
  background:#1877F2; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 25px rgba(0,0,0,0.25); z-index:9999;
  transition: transform 0.2s ease;
}
.facebook-float svg{ width:34px; height:34px; fill:white;}
.facebook-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.btn {
  display: inline-block;
  background: var(--blue-light);
  padding: 12px 28px;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn:hover {
  background: #4b4b4b;
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}
html { scroll-padding-top: 80px; }