:root{
  --blue:#1E3A8A;
  --orange:#F97316;
  --bg:#0B1F5A;
  --text:#0f172a;
  --muted:#475569;
  --radius:1.25rem;
  --shadow:0 10px 30px rgba(0,0,0,.15);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  line-height:1.6;
  background:#f8fafc;
}
img{max-width:100%;height:auto}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.site-header{position:sticky;top:0;background:white;border-bottom:1px solid #e2e8f0;z-index:10}
.header-wrap{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--blue)}
.brand img{border-radius:12px}
.main-nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0;align-items:center}
.main-nav .btn,.btn{background:var(--orange);color:white;padding:.6rem 1rem;border-radius:999px;border:none;display:inline-block;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px)}
.btn-outline{border:2px solid var(--blue);padding:.55rem 1rem;border-radius:999px;color:var(--orange)}
.btn-outline:hover{background:var(--blue);color:white}
.nav-toggle{display:none;background:transparent;border:0;font-size:1.5rem}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;border-radius:.5rem;box-shadow:var(--shadow)}
.hero{background:linear-gradient(135deg,var(--blue),#0a2a9c);color:white;padding:3rem 0}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.hero-logo{filter:drop-shadow(0 10px 25px rgba(0,0,0,.35));border-radius:1rem; transition: transform 0.3s ease;}
.hero-logo:hover{transform: scale(1.05);}
.cta{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}
.center{text-align:center}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.card-icon {
  margin-bottom: 1rem;
}
.card .more{display:inline-block;margin-top:.75rem}
.band{padding:2.5rem 0}
.band-dark{background:#0f172a;color:#e2e8f0}
.checks{list-style:'✓ ';display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem 1rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.page-hero{background:#eef2ff;border-bottom:1px solid #e2e8f0;padding:1.5rem 0}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.plan{border:1px solid #e2e8f0;border-radius:var(--radius);padding:1rem;background:white;box-shadow:var(--shadow)}
.plan.featured{border-color:var(--orange);transform:scale(1.02)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.shot{background:white;border:1px solid #e2e8f0;border-radius:.75rem;padding:.5rem;text-align:center}
.faq details{background:white;border:1px solid #e2e8f0;border-radius:.75rem;padding:1rem;margin:.5rem 0}
.form{display:grid;gap:.75rem}
.form input,.form textarea,.form select{width:100%;padding:.6rem;border:1px solid #cbd5e1;border-radius:.6rem}
.site-footer{margin-top:3rem;padding:2rem 0;background:#0b1324;color:#94a3b8}
.site-footer a{color:#cbd5e1}
.small{font-size:.9rem;color:#94a3b8;margin-top:1rem;text-align:center}
.list-unstyled{list-style:none;margin:0;padding:0}
.cta-strip{background:linear-gradient(90deg,#0ea5e9,#6366f1);color:white;text-align:center;padding:2rem 0}
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:1fr}
  .main-nav ul{display:none;flex-direction:column;align-items:flex-start;background:white;position:absolute;right:1rem;top:64px;padding:1rem;border:1px solid #e2e8f0;border-radius:1rem;box-shadow:var(--shadow)}
  .main-nav ul.show{display:flex}
  .nav-toggle{display:block}
}
h1 {
  font-size: 3rem; /* Cambia el valor según el tamaño que desees */
  align-content: center;
}

.bounce-in {
  animation: bounceInLeft 1s cubic-bezier(.68,-0.55,.27,1.55) both;
}
@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-300px);
  }
  60% {
    opacity: 1;
    transform: translateX(30px);
  }
  80% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
/* Animación fade-in para hero-art */
.fade-in {
  animation: fade-in 1.2s ease-out both;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  80% {
    opacity: 0.7;
    transform: scale(1.01);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Animación zoom-in para párrafo principal */
.zoom-in {
  animation: zoom-in 1s cubic-bezier(.42,0,.58,1) both;
}

@keyframes zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Animación flip-in para botones principales */
.flip-in {
  animation: flip-in 1s cubic-bezier(.68,-0.55,.27,1.55) both;
}

@keyframes flip-in {
  0% {
    opacity: 0;
    transform: rotateY(90deg) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: rotateY(-10deg) scale(1.05);
  }
  80% {
    transform: rotateY(5deg) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1);
  }
}
/* Botón flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.whatsapp-float img {
  display: block;
  width: 44px;
  height: 44px;
}
/* Animación de entrada y pulso para el botón flotante de WhatsApp */
.whatsapp-float {
  animation: whatsapp-in 1.1s cubic-bezier(.36,.07,.19,.97) both, whatsapp-pulse 1.8s infinite 2.2s;
}

@keyframes whatsapp-in {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(80px);
  }
  60% {
    opacity: 1;
    transform: scale(1.1) translateY(-8px);
  }
  80% {
    transform: scale(0.95) translateY(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 4px 16px rgba(37,211,102,0.18), 0 0 0 0 rgba(37,211,102,0.3);
  }
  70% {
    box-shadow: 0 4px 16px rgba(37,211,102,0.18), 0 0 0 12px rgba(37,211,102,0);
  }
  100% {
    box-shadow: 0 4px 16px rgba(37,211,102,0.18), 0 0 0 0 rgba(37,211,102,0);
  }
}
/* Animación scroll-in para tarjetas de servicios */
.scroll-in {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: opacity 0.7s cubic-bezier(.42,0,.58,1), transform 0.7s cubic-bezier(.42,0,.58,1);
}
.scroll-in.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}