:root{
  --brand:#6b5b95; /* lavanda elegante */
  --accent:#f4a261; /* cálido spa */
  --dark:#0b0f14;
}

/* =========================
   BASE
   ========================= */
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol',sans-serif
}
.hero{background:#fff;padding:4rem 0 2rem}
.badge-soft{background:rgba(244,162,97,.12); color:#8b5b2e; border:1px solid rgba(244,162,97,.35)}
.btn-whatsapp{position:fixed; right:16px; bottom:16px; z-index:1030; border-radius:999px; padding:.85rem 1.15rem; font-weight:600}
.card{border-radius:1rem}
.icon-xl{font-size:2rem}
.footer{background:var(--dark);color:#e5e7eb}
.footer a{color:#e5e7eb;text-decoration:underline;text-underline-offset:2px}
.footer a:hover{ color:#fff; text-decoration:underline; }

/* Estrellas por defecto (pueden sobreescribirse en secciones) */
.review-stars{letter-spacing:2px; color:#c58f00}

/* =========================
   SECCIONES / TITULOS
   ========================= */
.section-title{
  text-align:center;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
}
.section-title .divider{
  width:120px;height:3px;background:#ffffff40;border-radius:3px;margin:.5rem auto 0;
}

/* =========================
   HEADER / LOGO
   ========================= */
.navbar.navbar-light.sticky-top{
  background:#fff; border-bottom:1px solid #eef0f3;
  backdrop-filter:saturate(140%) blur(4px);
}
.brand-logo{ height:32px; width:auto; }
@media (min-width: 992px){
  .brand-logo{ height:40px; }
}
/* Icono del toggler (si Bootstrap no trae el SVG por tema) */
.navbar .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(11,15,20,.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width:1.6rem; height:1.6rem;
}

/* =========================
   MENÚ OFFCANVAS — diseño pro
   ========================= */
.offcanvas{border-left:1px solid #eef0f3}
.offcanvas-header{ border-bottom:1px solid #f1f3f6; }
.offcanvas-title{ font-weight:700; letter-spacing:.01em; }
.offcanvas .nav-link{
  color:#0b0f14;
  font-weight:600;
  padding:.65rem .25rem;
  border-radius:.65rem;
  transition:background .15s ease, transform .15s ease;
}
.offcanvas .nav-link:hover{
  background:#f6f7fb;
  transform:translateX(2px);
  text-decoration:none;
}
.offcanvas .nav-link:active{ transform:translateX(1px); }
.offcanvas .btn-outline-secondary{
  border-radius:999px;
}

/* Offcanvas más ancho en desktop */
.offcanvas-end{ width: 310px; }
@media (min-width: 992px){
  .offcanvas-end{ width: 360px; }
}

/* =========================
   MÓDULO: SERVICIOS
   ========================= */
/* Fondo con bokeh cálido */
#servicios-modulo{
  background:
    radial-gradient(ellipse at 30% 10%, #8b4f2a55, transparent 60%),
    radial-gradient(ellipse at 70% 80%, #a7673a40, transparent 60%);
}

/* Card base */
.service-card{
  border:0;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  transition:transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.24);
}

/* Imagen */
.service-img{
  height:320px;
  background-size:cover;
  background-position:center;
  filter:saturate(1) contrast(1.02);
}
@media (min-width: 992px){
  .service-img{ height:360px; }
}

/* Overlay legible */
.service-overlay{
  position:absolute; inset:0; padding:18px; border-radius:18px;
  display:flex; flex-direction:column; justify-content:space-between;
  color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.46) 50%, rgba(0,0,0,.36) 100%);
  backdrop-filter:saturate(120%) blur(0.5px);
}
.service-overlay h3{
  margin:0 0 .25rem 0; letter-spacing:.04em;
}
.service-overlay p{
  margin:0; color:#e8e8e8; opacity:.95;
}

/* Precio opcional “Desde $” */
.badge.bg-price{
  background:#ffe29f !important;
  color:#3a2b00 !important;
  font-weight:700;
  border:1px solid #e7c96a;
}

/* Botones sobre imagen */
.service-card .btn{
  border-radius:20px;
  font-weight:700;
}
/* “Ver detalles” sólido claro para que no se vea “transparente” */
.service-card .btn-outline-light{
  --bs-btn-color:#0b0f14;
  --bs-btn-bg:#ffffffd9;
  --bs-btn-border-color:#ffffff;
  --bs-btn-hover-color:#0b0f14;
  --bs-btn-hover-bg:#fff;
  --bs-btn-hover-border-color:#fff;
}

/* =========================
   MODALES (detalles servicio)
   ========================= */
.modal-content{
  border:0; border-radius:1rem;
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}
.modal-header{ border-bottom:1px solid #f0f0f0; }
.modal-footer{ border-top:1px solid #f0f0f0; }

/* =========================
   UTILITARIOS SUAVES
   ========================= */
.text-shadow-sm{ text-shadow:0 1px 2px rgba(0,0,0,.25); }
.rounded-2xl{ border-radius:1.25rem; }
.shadow-soft{ box-shadow:0 10px 25px rgba(0,0,0,.12); }

/* =========================
   ACCESIBILIDAD
   ========================= */
a:focus, button:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 .25rem rgba(244,162,97,.25);
}

/* =========================
   AJUSTES EXISTENTES
   ========================= */
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ filter:brightness(0.95); }

/* ==========================================
   COBERTURA (MAPA)
   ========================================== */
.coverage-wrap{ position:relative; border-radius:18px; overflow:hidden; }
.coverage-leaflet{ height:520px; border-radius:18px; }

/* Leaflet contenedor */
.leaflet-container { border-radius:18px; border:1px solid #e5e7eb }

/* Controles sobre el mapa */
.leaflet-top, .leaflet-bottom{ z-index:401; }

/* Botón acción mapa */
.map-action{
  position:absolute; top:14px; right:14px; z-index:500;
}
.map-action .btn{
  background:#fff; border:1px solid #eef0f3;
  border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* Leyenda */
.map-legend{
  position:absolute; left:14px; bottom:14px; z-index:500;
  background:#fff; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.1);
  padding:10px 12px; display:flex; align-items:center; gap:14px; flex-wrap:wrap
}
.map-legend .dot{
  width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px
}
.map-legend .dot.blue{ background:#1d4ed8 }
.map-legend .dot.red{ background:#dc2626 }
.map-legend .btn-success{
  border-radius:999px; box-shadow:0 6px 14px rgba(37,211,102,.25)
}

/* Chips de zonas bajo el mapa */
.zone-chips{ gap:.5rem }
.zone-chips .btn{
  --bs-btn-padding-y:.35rem; --bs-btn-padding-x:.75rem; --bs-btn-border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.06)
}

/* ==========================================
   TESTIMONIOS (Lo que dicen nuestros clientes)
   ========================================== */
#reseñas .h3{
  font-weight:800;
  letter-spacing:.02em;
  margin-bottom:.75rem;
}
#reseñas .row{ row-gap:1.25rem }

#reseñas .card{
  position: relative;
  border: 1px solid #e9edf2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
#reseñas .card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  border-color: #e3e8ef;
}

/* Comillas grandes decorativas */
#reseñas .card::before{
  content: "“";
  position: absolute;
  top: -18px; left: 12px;
  font-size: 110px; line-height: 1;
  color: rgba(107,91,149,.10);
  font-family: Georgia, "Times New Roman", serif;
  pointer-events: none; user-select: none;
}

/* Nombre + estrellas */
#reseñas .card .d-flex strong{
  font-weight: 600;
  color: #0b0f14;
}
#reseñas .card .review-stars{
  letter-spacing: 2px;
  font-size: 14px;
  line-height: 1;
  color:#c58f00; /* DORADAS */
}

/* Texto */
#reseñas .card p{
  color: #4b5563;
  font-size: .975rem;
}

/* Pulso sutil en hover */
#reseñas .card:hover .review-stars{
  transform: translateY(-1px);
  transition: transform .15s ease;
}

/* Responsive */
@media (max-width: 575.98px){
  #reseñas .card::before{ font-size: 90px; top:-12px; left:10px; }
}

/* ==========================================
   CONFIANZA (cards con iconos)
   ========================================== */
.trust-wrap{
  background:
    radial-gradient(1200px 600px at 0% 0%, #f8efe8 0%, transparent 60%),
    radial-gradient(1000px 500px at 100% 100%, #efe9f8 0%, transparent 60%);
}
.trust-card{
  background:#fff;
  border:1px solid #e9edf2;
  border-radius:24px;
  padding:34px 22px;
  text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position:relative; overflow:hidden;
}
.trust-card::after{
  content:""; position:absolute; inset:auto -40% -60% -40%;
  height:180px; background: radial-gradient(closest-side, rgba(244,162,97,.18), transparent 70%);
  transform:translateY(40%); pointer-events:none;
}
.trust-card:hover{ transform:translateY(-4px); box-shadow:0 18px 46px rgba(0,0,0,.10); border-color:#e3e8ef; }
.trust-icon{
  width:72px; height:72px; margin:0 auto 10px; display:grid; place-items:center;
  border-radius:20px; background:linear-gradient(135deg, #fff 0%, #faf7ff 100%);
  border:1px solid #ece7f8; box-shadow:inset 0 1px 0 #fff, 0 8px 20px rgba(107,91,149,.12);
}
.trust-icon i{ font-size:34px; color:#6b5b95; }
.trust-title{ margin:10px 0 0; font-size:1.15rem; font-weight:700; color:#0b0f14; letter-spacing:.01em; }

@media (max-width: 575.98px){
  .trust-card{ padding:28px 18px; }
  .trust-icon{ width:64px; height:64px; border-radius:18px; }
  .trust-icon i{ font-size:28px; }
  .trust-title{ font-size:1.05rem; }
}