/* =====================================================================
   ZOOMUBIK · ESTILO LIMA  v0.3.1
   Azul + amarillo lima, rotulador a mano, pinceladas y ondas
   (el mismo lenguaje visual de las imágenes de promo).
   Todo va bajo body.zm-lima para ganar al tema y poder apagarlo.
   ===================================================================== */

@font-face{
  font-family:'ZM Marker';
  src:url('fonts/zm-marker.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --zm-lima:#E9F72B;
  --zm-lima-fuerte:#D6E600;
  --zm-azul:#0B3F94;
  --zm-azul-hondo:#082C6B;
  --zm-azul-medio:#15418A;
  --zm-azul-claro:#3BA1DA;
  --zm-fondo-suave:#F0F6FC;
  --zm-rotulador:'ZM Marker','Caveat Brush','Comic Sans MS',cursive;
  --zm-sombra-suave:0 10px 26px rgba(11,63,148,.16);
}

/* ---------- 1. Botones Publicar (cabecera y bloque de la página): verde con ribete lima sutil ---------- */
:root{--zm-verde-publicar:linear-gradient(90deg,#4caf50,#45a049)}
body.zm-lima a#zm-btn-publicar-desktop.zm-btn-publicar-header{
  background:var(--zm-verde-publicar)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:2px solid var(--zm-lima)!important;
  border-radius:12px!important;
  font-weight:800!important;
  box-shadow:none!important;
  filter:none!important;
  transition:transform .15s ease;
}
body.zm-lima a#zm-btn-publicar-desktop.zm-btn-publicar-header *{color:#fff!important;-webkit-text-fill-color:#fff!important}
body.zm-lima a#zm-btn-publicar-desktop.zm-btn-publicar-header:hover{transform:translateY(-2px)}
/* Botones con estilos en línea !important (Publicar gratis, Ver todas…): el ribete va como outline sobre el borde original */
body.zm-lima button[style*="rgb(76, 175, 80)"],
body.zm-lima button[style*="4caf50" i],
body.zm-lima a.zm-sl-btn{
  outline:4px solid var(--zm-lima)!important;
  outline-offset:-3px!important;
  transition:transform .15s ease;
}
body.zm-lima button[style*="rgb(76, 175, 80)"]:hover,
body.zm-lima button[style*="4caf50" i]:hover,
body.zm-lima a.zm-sl-btn:hover{transform:translateY(-2px)}

/* Botón "Publicar anuncio gratis" de las páginas de provincia: mismo verde y ribete lima */
body.zm-lima a.zm-cta-publicar{
  background:var(--zm-verde-publicar)!important;
  border:3px solid var(--zm-lima)!important;
  color:#fff!important;
  box-shadow:none!important;
  transition:transform .15s ease;
}
body.zm-lima a.zm-cta-publicar:hover{transform:translateY(-2px)}

/* ---------- 1b. Páginas de categoría: selector, "Volver arriba", píldoras de provincias ---------- */
body.zm-lima .zm-selector-btn{
  border:3px solid var(--zm-azul-claro)!important;
  border-radius:14px!important;
  font-weight:800!important;
  color:var(--zm-azul)!important;
  transition:transform .15s ease;
}
body.zm-lima .zm-selector-btn.active{
  background:var(--zm-azul)!important;
  color:#fff!important;
  border-color:var(--zm-lima)!important;
  box-shadow:none!important;
}
body.zm-lima .zm-selector-btn:hover{transform:translateY(-2px)}
body.zm-lima button[style*="3ba1da" i][onclick],
body.zm-lima button[style*="rgb(59, 161, 218)" i][onclick]{
  border:2px solid var(--zm-lima)!important;
}
body.zm-lima .zm-provs-dir-lista a{
  background:var(--zm-fondo-suave)!important;
  border:1.5px solid rgba(214,232,40,.85)!important;
  color:var(--zm-azul)!important;
  font-weight:700!important;
  transition:transform .12s ease,background .12s ease;
}
body.zm-lima .zm-provs-dir-lista a:hover{border-color:var(--zm-lima)!important;transform:translateY(-2px)}

/* ---------- 2. Portada: hero ---------- */
body.zm-lima .banner-hero-with-text{
  position:relative;
  border-radius:24px;
  overflow:hidden;
}
body.zm-lima .banner-hero-with-text .banner-overlay{
  background:linear-gradient(180deg,rgba(8,44,107,.32) 0%,rgba(11,63,148,.62) 100%)!important;
}
body.zm-lima .banner-title{
  font-family:var(--zm-rotulador)!important;
  font-weight:400!important;
  font-size:clamp(2.1rem,5.4vw,3.9rem)!important;
  line-height:1.08!important;
  color:#fff!important;
  letter-spacing:.3px;
  text-shadow:0 3px 14px rgba(8,44,107,.55);
  transform:rotate(-1.2deg);
  text-decoration:underline!important;
  text-decoration-color:var(--zm-lima)!important;
  text-decoration-thickness:.11em!important;
  text-underline-offset:.16em!important;
  text-decoration-skip-ink:none;
}
body.zm-lima .banner-subtitle{
  display:inline-block;
  font-family:var(--zm-rotulador)!important;
  font-weight:400!important;
  font-size:clamp(1.2rem,2.6vw,1.8rem)!important;
  color:var(--zm-azul)!important;
  background:var(--zm-lima);
  padding:.28em .9em .22em;
  margin:.6em auto .5em!important;
  transform:rotate(-2deg);
  clip-path:polygon(1% 14%,5% 3%,14% 9%,27% 2%,41% 8%,55% 1%,70% 7%,84% 2%,95% 8%,99% 22%,97% 48%,99% 74%,96% 94%,84% 98%,69% 92%,54% 99%,38% 93%,23% 99%,10% 93%,3% 97%,1% 74%,3% 46%);
  text-shadow:none!important;
}
/* Onda inferior que enlaza con la sección siguiente */
body.zm-lima .banner-hero-with-text::after{
  content:'';
  position:absolute;left:0;right:0;bottom:-1px;height:44px;z-index:5;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0 40 C 180 90 360 0 540 30 C 720 60 900 90 1080 50 C 1260 10 1350 30 1440 46 L1440 80 L0 80 Z' fill='%23F0F6FC'/></svg>") bottom/100% 100% no-repeat;
  pointer-events:none;
}

/* ---------- 3. Títulos de sección (rotulador azul, sin marcador) ---------- */
body.zm-lima .categoria-titulo,
body.zm-lima .mini-anuncios-titulo,
body.zm-lima .zm-sl-titulo{
  position:relative;
  isolation:isolate;
  display:block!important;
  width:fit-content!important;
  max-width:100%;
  margin:0 auto .55em!important;
  padding:0 .2em;
  font-family:var(--zm-rotulador)!important;
  font-weight:400!important;
  font-size:clamp(2.1rem,5vw,3.3rem)!important;
  line-height:1.1!important;
  color:var(--zm-azul)!important;
  text-decoration:none!important;
}

/* ---------- 4. Botones grandes de categoría ---------- */
body.zm-lima .zm-padre-btn{
  border-radius:18px!important;
  font-weight:800!important;
  transition:transform .15s ease,box-shadow .15s ease;
}
body.zm-lima .zm-padre-btn--vivienda{
  background:var(--zm-azul)!important;
  background-image:none!important;
  border:3px solid var(--zm-azul-hondo)!important;
  color:#fff!important;
  box-shadow:0 6px 0 var(--zm-azul-hondo);
}
body.zm-lima .zm-padre-btn--garaje{
  background:var(--zm-azul-claro)!important;
  border:3px solid var(--zm-lima)!important;
  color:#fff!important;
  box-shadow:0 6px 0 var(--zm-azul-hondo);
}
body.zm-lima .zm-padre-btn--vivienda{border-color:var(--zm-lima)!important}
/* Botón "Entra o regístrate" (menú de cuenta): mismo azul + ribete lima */
body.zm-lima .zm-action-bar .zm-action-btn--login,
body.zm-lima #zm-action-login-btn,
body.zm-lima .cuenta-menu-auth .cuenta-menu-btn-login,
body.zm-lima button.cuenta-menu-btn-login{
  background:var(--zm-azul)!important;background-image:none!important;
  color:#fff!important;
  border:2px solid var(--zm-azul)!important;
  border-radius:12px!important;
  font-weight:800!important;
  box-shadow:none!important;
}
body.zm-lima .zm-padre-btn:hover{transform:translateY(-3px)}
body.zm-lima .zm-padre-btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(8,44,107,.9)}

/* ---------- 5. Tarjetas de anuncio ---------- */
body.zm-lima .mini-anuncio-card,
body.zm-lima .zm-prof-ficha,
body.zm-lima .zm-cercanos-slider > a,
body.zm-lima .slider-wrapper > a{
  border:2px solid var(--zm-azul-claro)!important;
  border-radius:20px!important;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(11,63,148,.08);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
body.zm-lima .mini-anuncio-card:hover,
body.zm-lima .zm-prof-ficha:hover,
body.zm-lima .zm-cercanos-slider > a:hover,
body.zm-lima .slider-wrapper > a:hover{
  transform:translateY(-5px) rotate(-.4deg);
  border-color:var(--zm-azul)!important;
  box-shadow:0 5px 0 var(--zm-lima),var(--zm-sombra-suave);
}

/* Botones "Ver todas…": el HTML trae un degradado en línea con !important; se tapa con una capa de azul liso detrás del texto */
body.zm-lima a.zm-sl-btn{position:relative;isolation:isolate;overflow:hidden}
body.zm-lima a.zm-sl-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--zm-azul);
  border-radius:inherit;
}
body.zm-lima a.zm-sl-btn:hover::before{background:var(--zm-azul-hondo)}

/* ---------- 6b. Botones azules sueltos (CTA "Ver pisos…", "Quiero aparecer como profesional"): un solo azul + ribete lima ---------- */
body.zm-lima a.btn.btn-primary,
body.zm-lima a[style*="background:#3ba1da" i],
body.zm-lima a.zm-prof-cta-vacio-btn{
  background:var(--zm-azul)!important;background-image:none!important;
  color:#fff!important;
  border:2px solid var(--zm-lima)!important;
  border-radius:12px!important;
  font-weight:800!important;
  box-shadow:none!important;
  transition:transform .15s ease,background .15s ease;
}
body.zm-lima a.btn.btn-primary:hover,
body.zm-lima a[style*="background:#3ba1da" i]:hover,
body.zm-lima a.zm-prof-cta-vacio-btn:hover{background:var(--zm-azul-hondo)!important;transform:translateY(-2px)}

/* ---------- 6c. Profesionales: solo la etiqueta lleva ribete (la ficha conserva su borde original) ---------- */
body.zm-lima .zm-prof-badge{
  background:var(--zm-azul)!important;
  color:#fff!important;
  border:1.5px solid var(--zm-lima)!important;
}
body.zm-lima .zm-prof-ver-mas{
  color:var(--zm-azul)!important;
  font-weight:800!important;
}
body.zm-lima .zm-prof-ver-mas:hover{color:var(--zm-azul-hondo)!important;text-decoration:underline!important}

/* ---------- 6d. Bloque de profesionales: franja suave con fichas compactas (se distingue de los anuncios) ---------- */
body.zm-lima .zm-profesionales-bloque{
  background:var(--zm-fondo-suave)!important;
  border:2px solid rgba(214,232,40,.9)!important;
  border-radius:18px!important;
  padding:16px 20px 14px!important;
  margin-top:28px!important;margin-bottom:32px!important;
  box-shadow:none;
}
body.zm-lima .zm-profesionales-titulo{
  color:var(--zm-azul)!important;
  font-weight:800!important;
  font-size:1rem!important;
  margin:0 0 8px!important;
}
body.zm-lima .zm-profesionales-lista{
  gap:18px!important;
  justify-content:safe center;
  padding:6px 4px 10px!important;
  scrollbar-width:thin;
  scrollbar-color:#b9d3ee transparent;
}
body.zm-lima .zm-profesionales-lista::-webkit-scrollbar{height:6px}
body.zm-lima .zm-profesionales-lista::-webkit-scrollbar-track{background:transparent}
body.zm-lima .zm-profesionales-lista::-webkit-scrollbar-thumb{background:#b9d3ee;border-radius:6px}
body.zm-lima .zm-profesionales-bloque .zm-prof-ficha{
  flex:0 0 245px!important;
  width:245px!important;
  padding:10px!important;
  background:#fff!important;
  border-radius:16px!important;
}
body.zm-lima .zm-profesionales-bloque .zm-prof-media,
body.zm-lima .zm-profesionales-bloque .zm-prof-foto-portada{
  height:150px!important;
  border-radius:12px!important;
}
body.zm-lima .zm-profesionales-bloque .zm-prof-foto-portada{width:100%!important;object-fit:cover!important;image-rendering:-webkit-optimize-contrast}
body.zm-lima .zm-profesionales-bloque .zm-prof-badge{font-size:10px!important;padding:2px 8px!important}
body.zm-lima .zm-profesionales-bloque .zm-prof-nombre{font-size:16px!important;line-height:1.2!important;margin:6px 0 4px!important}
body.zm-lima .zm-profesionales-bloque .zm-prof-ver-mas{font-size:12px!important}
body.zm-lima .zm-profesionales-lista-wrap::before,
body.zm-lima .zm-profesionales-lista-wrap::after{display:none!important}
body.zm-lima .zm-profesionales-lista{align-items:flex-start!important}
body.zm-lima .zm-profesionales-bloque .zm-prof-ficha p{margin:0!important}
@media (max-width:600px){
  body.zm-lima .zm-profesionales-bloque .zm-prof-ficha{flex-basis:210px!important;width:210px!important}
  body.zm-lima .zm-profesionales-bloque .zm-prof-media,
  body.zm-lima .zm-profesionales-bloque .zm-prof-foto-portada{height:125px!important}
}

/* ---------- 7. Cabecera fija ---------- */
body.zm-lima .mobile-header-sticky{
  border-bottom:3px solid var(--zm-lima);
  box-shadow:0 4px 14px rgba(11,63,148,.10)!important;
}
body.zm-lima .header-search-bar{
  border:2px solid var(--zm-azul);
  box-shadow:0 3px 0 var(--zm-lima)!important;
}

/* ---------- 8. Tarjetas: textos y precio ---------- */
body.zm-lima .mini-anuncio-titulo{color:var(--zm-azul-hondo)!important;font-weight:700!important}
body.zm-lima .mini-anuncio-precio{
  font-family:var(--zm-rotulador)!important;
  font-weight:400!important;
  font-size:1.75em!important;
  letter-spacing:.3px!important;
  color:var(--zm-azul)!important;
  line-height:1.1;
  display:table;margin-left:auto!important;margin-right:auto!important;
}
/* Provincias más activas: el nombre va sobre la foto, en blanco */
body.zm-lima #provincias-activas-container .mini-anuncio-ciudad,
body.zm-lima #provincias-activas-container .mini-anuncio-titulo{
  color:#fff!important;
  text-shadow:0 2px 8px rgba(0,0,0,.65)!important;
}

/* ---------- 9. Ficha del anuncio ---------- */
body.zm-lima .detalle-marcador-titulo-grande{
  font-family:var(--zm-rotulador)!important;
  font-weight:400!important;
  color:var(--zm-azul)!important;
  font-size:clamp(1.9rem,4vw,2.9rem)!important;
  line-height:1.1!important;
}
body.zm-lima .btn-volver-sm{
  background:var(--zm-azul)!important;background-image:none!important;
  color:#fff!important;
  border:2px solid var(--zm-lima)!important;
  border-radius:999px!important;
  font-weight:800!important;
  box-shadow:none!important;
}
body.zm-lima .btn-volver-sm:hover{background:var(--zm-azul-hondo)!important}
body.zm-lima .precio-valor{
  font-family:var(--zm-rotulador)!important;
  font-weight:400!important;
  background:linear-gradient(transparent 58%,var(--zm-lima) 58%,var(--zm-lima) 90%,transparent 90%)!important;
  padding:0 .3em!important;
}

/* ---------- 10. Pie de página ---------- */
body.zm-lima .footer-principal{
  position:relative;
  background:linear-gradient(180deg,var(--zm-azul) 0%,var(--zm-azul-hondo) 100%)!important;
  margin-top:70px!important;
  padding-top:56px!important;
}
body.zm-lima .footer-principal::before{
  content:'';
  position:absolute;left:0;right:0;top:-1px;height:46px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0 0 L1440 0 L1440 40 C 1260 80 1080 10 900 40 C 720 70 540 90 360 50 C 220 20 100 30 0 54 Z' fill='%23ffffff'/></svg>") top/100% 100% no-repeat;
  pointer-events:none;
}
body.zm-lima .footer-columna h3{
  color:var(--zm-lima)!important;
  font-family:var(--zm-rotulador)!important;
  font-weight:400!important;
  font-size:1.5em!important;
  letter-spacing:.3px;
}
body.zm-lima .footer-links a:hover,
body.zm-lima .footer-contacto a:hover{color:var(--zm-lima)!important}
body.zm-lima .footer-btn-contacto{
  background:var(--zm-lima)!important;
  color:var(--zm-azul)!important;
  border:2px solid var(--zm-azul-hondo);
  border-radius:999px!important;
  font-weight:800!important;
  box-shadow:0 4px 0 var(--zm-azul-hondo);
}
body.zm-lima .footer-btn-contacto:hover{background:var(--zm-lima)!important;box-shadow:0 6px 0 var(--zm-azul-hondo)!important;transform:translateY(-2px)}
body.zm-lima .footer-redes-sociales a:hover{background:var(--zm-lima)!important;color:var(--zm-azul)!important}
body.zm-lima .footer-slogan{
  color:var(--zm-lima)!important;
  font-family:var(--zm-rotulador)!important;
  font-style:normal!important;
  font-size:1.35em!important;
}

/* ---------- 11. Barra inferior del móvil ---------- */
@media (max-width:1024px){
  body.zm-lima .mobile-footer-sticky{
    border-top:3px solid var(--zm-lima)!important;
    border-radius:18px 18px 0 0;
    box-shadow:0 -6px 18px rgba(11,63,148,.14)!important;
  }
}

/* ---------- 12. Descarga de la app ---------- */
body.zm-lima .app-promotion-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 94% 10%,rgba(233,247,43,.16) 0 96px,transparent 97px),
    radial-gradient(circle at 4% 96%,rgba(233,247,43,.10) 0 70px,transparent 71px),
    linear-gradient(135deg,#0B4DB0 0%,var(--zm-azul-hondo) 100%)!important;
  border-radius:28px!important;
  box-shadow:0 8px 0 var(--zm-azul-hondo),0 18px 36px rgba(8,44,107,.22);
  margin-bottom:56px!important;
}
body.zm-lima .app-promotion-section .app-promotion-content,
body.zm-lima .app-promotion-section .app-promotion-container{
  background:transparent!important;background-image:none!important;box-shadow:none!important;
}
body.zm-lima .app-promotion-section .app-promotion-content h2{
  display:inline-block!important;
  font-family:var(--zm-rotulador)!important;
  font-weight:400!important;
  font-size:clamp(1.9rem,3.4vw,2.7rem)!important;
  line-height:1.05!important;
  background:var(--zm-lima)!important;
  color:var(--zm-azul)!important;
  padding:.22em .8em .16em!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:rotate(-2deg);
  clip-path:polygon(1% 16%,5% 4%,15% 10%,28% 2%,42% 9%,56% 1%,71% 8%,85% 2%,95% 9%,99% 24%,97% 50%,99% 76%,96% 95%,84% 99%,69% 93%,54% 100%,38% 94%,23% 100%,10% 94%,3% 98%,1% 76%,3% 48%);
}
body.zm-lima .app-promotion-section .app-promotion-content p{
  color:#fff!important;
  text-shadow:none!important;
  font-weight:600!important;
  line-height:1.55!important;
}
body.zm-lima .app-promotion-section .app-promotion-qr{
  border-radius:16px!important;
  border:3px solid var(--zm-lima);
  padding:7px!important;
  box-shadow:0 5px 0 rgba(0,0,0,.28)!important;
}
body.zm-lima .app-promotion-section .app-promotion-image{position:relative}
body.zm-lima .app-promotion-section .app-promotion-image img{
  border-radius:22px!important;
  border:5px solid #fff;
  box-shadow:12px 12px 0 var(--zm-lima),0 14px 30px rgba(0,0,0,.28)!important;
  transform:rotate(2.2deg);
}
@media (max-width:768px){
  body.zm-lima .app-promotion-section{border-radius:20px!important;box-shadow:0 6px 0 var(--zm-azul-hondo)}
  body.zm-lima .app-promotion-section .app-promotion-content h2{transform:rotate(-1.5deg)}
}

/* ---------- Accesibilidad: sin animaciones si el usuario las desactiva ---------- */
@media (prefers-reduced-motion:reduce){
  body.zm-lima *{transition:none!important}
  body.zm-lima .mini-anuncio-card:hover,
  body.zm-lima .zm-padre-btn:hover{transform:none}
}

/* ---------- Móvil ---------- */
@media (max-width:600px){
  body.zm-lima .banner-hero-with-text{border-radius:16px}
  body.zm-lima .banner-title{transform:none}
  body.zm-lima .banner-hero-with-text::after{height:26px}
}

/* ---------- 6e. Botón "Enviar mensaje" de la ficha: ribete lima fijo (gris desactivado y verde activo) ---------- */
body.zm-lima #zm-contacto-enviar{border:2px solid var(--zm-lima)!important;border-radius:12px!important}

/* ---------- 6f. Fichas de profesionales: misma altura siempre (nombre a 2 líneas máx., "Ver ficha" abajo) ---------- */
body.zm-lima .zm-profesionales-lista{align-items:stretch!important}
body.zm-lima .zm-profesionales-bloque .zm-prof-ficha{display:flex!important;flex-direction:column!important;height:auto}
body.zm-lima .zm-profesionales-bloque .zm-prof-nombre{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;line-height:1.3}
body.zm-lima .zm-profesionales-bloque .zm-prof-ficha>p{margin-top:auto!important}