/* ============================================================
   Servilin — Landing page
   Estilos base + componentes + responsive
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Manrope,sans-serif;background:#fff;color:#22343a;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}

/* ---- Cards & hover effects ---- */
.svl-card{transition:transform .2s, box-shadow .2s, border-color .2s}
.svl-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(14,58,92,.13);border-color:#cfe0d4}

.svl-cta{transition:transform .18s, box-shadow .18s}
.svl-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(63,145,64,.4)}

.svl-gal{transition:transform .35s}
.svl-galwrap:hover .svl-gal{transform:scale(1.06)}

/* ---- Form inputs ---- */
.svl-in{font-family:Manrope,sans-serif;width:100%;border:1.5px solid #dde7e1;border-radius:10px;padding:13px 15px;font-size:15px;color:#22343a;background:#fff;outline:none;transition:border-color .16s, box-shadow .16s}
.svl-in:focus{border-color:#4ca52f;box-shadow:0 0 0 3px rgba(76,165,47,.15)}
.svl-in::placeholder{color:#9fb1ad}

/* ---- Footer links ---- */
.svl-flink{color:rgba(206,221,216,.72);text-decoration:none;font-size:14.5px;transition:color .16s}
.svl-flink:hover{color:#8fd14f}

/* ---- Nav links ---- */
.svl-navlink{color:rgba(255,255,255,.82);text-decoration:none;font-weight:600;font-size:15px;transition:color .18s}
.svl-navlink:hover{color:#fff}

/* ---- Mobile menu toggle (hamburger) ---- */
.svl-burger{display:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;width:46px;height:46px;border-radius:11px;cursor:pointer;align-items:center;justify-content:center;padding:0}
.svl-burger:hover{background:rgba(255,255,255,.2)}

/* Mobile dropdown panel */
.svl-mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;z-index:20;background:rgba(8,32,52,.98);backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.12);padding:14px clamp(20px,5vw,72px) 22px;flex-direction:column;gap:6px}
.svl-mobile-menu.open{display:flex}
.svl-mobile-menu a{color:#fff;text-decoration:none;font-weight:600;font-size:16px;padding:13px 8px;border-radius:9px}
.svl-mobile-menu a:hover{background:rgba(255,255,255,.08)}
.svl-mobile-menu .svl-mobile-cta{background:linear-gradient(135deg,#62b531,#3f9140);text-align:center;margin-top:6px}

/* ---- Floating WhatsApp button ---- */
.svl-wa{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:0;background:#25d366;color:#fff;border-radius:50px;padding:0;height:60px;width:60px;box-shadow:0 10px 30px rgba(37,211,102,.45);text-decoration:none;overflow:hidden;transition:width .28s ease, box-shadow .2s ease}
.svl-wa svg{width:32px;height:32px;flex-shrink:0;margin:0 14px}
.svl-wa .svl-wa-label{white-space:nowrap;font-weight:700;font-size:15px;opacity:0;transition:opacity .2s ease;padding-right:8px}
.svl-wa:hover{width:210px;box-shadow:0 14px 36px rgba(37,211,102,.55)}
.svl-wa:hover .svl-wa-label{opacity:1}

/* Pulsing ring */
.svl-wa::before{content:"";position:absolute;inset:0;border-radius:50px;box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:svl-wa-pulse 2.2s infinite}
@keyframes svl-wa-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ============================================================
   Responsive breakpoints (from original design + additions)
   ============================================================ */
@media(max-width:880px){.svl-2col{grid-template-columns:1fr!important}}
@media(max-width:560px){.svl-form2{grid-template-columns:1fr!important}}
@media(max-width:600px){.svl-hpad{padding-left:20px!important;padding-right:20px!important}}

/* Hero / nav responsive */
@media(max-width:860px){
  .svl-navlinks{display:none!important}
  .svl-burger{display:flex}
}
@media(min-width:861px){
  .svl-mobile-menu{display:none!important}
}

@media(max-width:600px){
  .svl-wa{right:16px;bottom:16px}
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important}
  .svl-card,.svl-cta,.svl-gal,.svl-wa{transition:none!important}
  .svl-wa::before{animation:none!important}
}