/* Efecto de zoom suave en imágenes del carrusel */

/* Botón flotante de WhatsApp */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    border-radius: 50%;
    text-align: center;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* Imagen dentro del botón */
.whatsapp-float img {
    width: 35px;
    height: 35px;
}



.zoom-img {
    transition: transform 8s ease-in-out;
}

.carousel-item.active .zoom-img {
    transform: scale(1.1);
}

/* Mejorar legibilidad de los textos */
.carousel-caption h5 {
    font-size: 1.8rem;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}

.carousel-caption p {
    font-size: 1rem;
}


/* Variables */
:root{
  --brand: #3b82f6;
  --dark: #0f172a;
  --light: #f8fafc;
  --muted: #64748b;
  --radius: 16px;
}

*{box-sizing:border-box}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Noto Color Emoji;
  color:#0f172a; background:var(--light);
}
.container{max-width:1100px; margin:0 auto; padding: 0 20px;}
.center{text-align:center}
.muted{color:var(--muted)}
.list-unstyled{list-style:none; padding:0; margin:0}
a{color:inherit; text-decoration:none}
.btn{
  display:inline-block; padding:12px 18px; border-radius: calc(var(--radius));
  border:1px solid rgba(0,0,0,0.08); background:white; font-weight:600; transition:.2s transform, .2s box-shadow, .2s background;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{ background: var(--brand); color:white; border-color: transparent }
.btn-ghost{ background: transparent }

.site-header{
  position:sticky; top:0; z-index:10; backdrop-filter: blur(8px);
  background: rgba(248,250,252,.8); border-bottom:1px solid rgba(15,23,42,.06);
}
.header-grid{ display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:16px; padding:14px 0 }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800 }
.logo .logo-mark{ background: var(--brand); color:white; width:36px; height:36px; display:grid; place-items:center; border-radius: 12px; font-weight:900 }
.logo.small .logo-mark{ width:28px; height:28px; border-radius:10px }
.nav a{ margin:0 10px; opacity:.9 }
.nav a:hover{ opacity:1; text-decoration:underline }

.hero{ padding: 56px 0 }
.hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:center }
.hero h1{ font-size: clamp(28px, 4vw, 44px); margin:0 0 10px }
.hero p{ font-size: 18px; color:var(--muted) }
.hero .features{ display:flex; gap:14px; padding:0; margin-top:16px; list-style:none; flex-wrap:wrap }
.hero .features li{ background:white; border:1px solid rgba(0,0,0,.06); border-radius: 999px; padding:8px 12px }

.hero-card{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:12px;
  background: linear-gradient(180deg, white, #eef2ff);
  border:1px solid rgba(0,0,0,.06); border-radius: var(--radius); padding:18px;
  box-shadow: 0 20px 40px rgba(2,6,23,.06);
}
.stat{ background:white; padding:18px; border-radius:12px; border:1px solid rgba(0,0,0,.05); text-align:center }
.stat strong{ font-size:28px; display:block }

.card-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px }
.card{ background:white; border:1px solid rgba(0,0,0,.06); border-radius: var(--radius); padding:18px; transition:.2s transform, .2s box-shadow }
.card:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.08) }

.service-block{ background:white; border-radius: var(--radius); padding:22px; border:1px solid rgba(0,0,0,.06); margin: 16px 0 }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.chip{ background:#eef2ff; color:#334155; padding:6px 10px; border-radius:999px; font-size:12px }

.cta{ background: #111827; color:white; margin-top:40px; }
.cta-grid{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:28px 0 }

.form{ background:white; padding:20px; border:1px solid rgba(0,0,0,.06); border-radius: var(--radius); display:grid; gap:10px }
.form label{ display:block; font-weight:600; margin-bottom:6px }
.form input,.form select,.form textarea{
  width:100%; padding:12px; border-radius:12px; border:1px solid rgba(0,0,0,.12); background:#fff;
}
.form .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.form .full{ grid-column: 1 / -1 }

.table-wrap{ overflow:auto }
.table{ width:100%; border-collapse: collapse; background:white; border-radius: 12px; overflow:hidden }
.table th,.table td{ padding:10px; border-bottom:1px solid #eee; text-align:left }
.table th{ background:#f1f5f9 }

.site-footer{ margin-top:40px; padding:28px 0; border-top:1px solid rgba(0,0,0,.06) }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap:16px }

/* Animaciones suaves */
.reveal{ opacity:0; transform: translateY(10px); transition: .6s ease }
.reveal.visible{ opacity:1; transform:none }

/* Responsivo */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr }
  .card-grid{ grid-template-columns: 1fr 1fr }
  .form .grid-2{ grid-template-columns:1fr }
  .footer-grid{ grid-template-columns:1fr }
}