:root{--primary:#0A2E6E;--secondary:#0DB9B1;--accent:#FFC857;--bg:#0B1220;--text:#E8EEF6;--muted:#9FB2C7}
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#0B1220 0%,#0A203F 100%)}
a{color:var(--secondary);text-decoration:none}img{max-width:100%;height:auto;display:block}
.nav {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: rgba(11, 18, 32, 0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 9999;
}

/* Contenedor del logo + texto */
.nav .brand {
  display: flex;
  align-items: center;      /* Centra verticalmente */
  gap: 10px;                /* Espacio entre logo y texto */
  font-weight: 800;
  color: var(--text);
}

/* Ajuste del logo */
.nav .brand img {
  height: 60px;             /* Aumenta el tamaño del logo */
  width: auto;              /* Mantiene proporciones */
  margin-right: 10px;       /* Separación del texto */
  vertical-align: middle;   /* Alineación perfecta */
  filter: drop-shadow(0 0 6px rgba(13,185,177,0.4)); /* Brillo sutil opcional */
}

/* Enlaces del menú */
.nav nav a {
  margin: 0 10px;
  padding: 8px 10px;
  border-radius: 12px;
}

/* Botón de inicio de sesión */
.nav nav a.login {
  background: var(--secondary);
  color: #00151B;
  font-weight: 700;
}

.hero{position:relative;min-height:82vh;display:grid;place-items:center;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(80% 80% at 50% 50%,rgba(13,185,177,.25) 0%,rgba(10,32,63,.8) 70%,#0B1220 100%)}
.hero-content{position:relative;max-width:980px;text-align:center;padding:48px}
.hero h1{font-size:clamp(28px,4.5vw,54px);line-height:1.05;margin:0 0 12px}
.hero p{font-size:clamp(16px,2.2vw,20px);color:var(--muted)}
.btn{display:inline-block;background:var(--secondary);color:#00151B;padding:12px 18px;border-radius:14px;font-weight:800;margin:10px 8px;transition:.25s transform,.25s box-shadow}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(13,185,177,.3)}
.btn.alt{background:var(--accent);color:#1B1400}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:48px 24px;max-width:1100px;margin:auto}
.tiles article{background:rgba(255,255,255,.04);padding:22px;border:1px solid rgba(255,255,255,.06);border-radius:18px}
.tiles h3{margin:0 0 8px}
.promise{display:grid;place-items:center;padding:28px;text-align:center;background:linear-gradient(90deg,rgba(13,185,177,.15),rgba(255,200,87,.15));border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.section{max-width:1100px;margin:40px auto;padding:0 24px}
.section h2{font-size:clamp(22px,3vw,38px)}
.gallery{max-width:1100px;margin:10px auto 60px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;padding:0 24px}
.gallery figure{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden}
.gallery figcaption{padding:12px 14px;color:var(--muted)}
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;padding:0 24px}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:20px;text-align:center}
.card .price{font-size:22px;font-weight:800;color:var(--accent)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1100px;margin:auto;padding:0 24px}
.form{display:grid;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px}
input,select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2);color:var(--text)}
.small{color:var(--muted);font-size:12px}
.footer{padding:32px 24px;border-top:1px solid rgba(255,255,255,.07)}
.footer .grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;max-width:1100px;margin:auto}
.link{background:none;border:none;color:var(--secondary);text-decoration:underline;cursor:pointer}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:16px;z-index:99999}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:#0E1B34;border:1px solid rgba(255,255,255,.1);border-radius:16px;max-width:820px;width:100%;padding:24px;position:relative}
.close{position:absolute;top:10px;right:10px;background:#152345;color:#fff;border:0;border-radius:50%;width:32px;height:32px;cursor:pointer}
.floating-cta{position:fixed;right:16px;bottom:16px;background:linear-gradient(135deg,var(--secondary),var(--accent));color:#00151B;padding:14px 16px;border-radius:999px;font-weight:900;box-shadow:0 10px 28px rgba(0,0,0,.35);z-index:10000}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}



/* BOTÓN FLOTANTE DE WHATSAPP */
.floating-cta {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #25D366; /* verde oficial WhatsApp */
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden; /* evita que el SVG se salga */
}

.floating-cta:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* Ícono SVG */
.floating-cta img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1); /* vuelve el ícono blanco */
}