:root{
  --m1:#6c2bd9 !important;
  --m2:#4f0fb6 !important;
  --bg-free:#f9fafb !important;
  --ink:#0f172a !important;
  --muted:#6b7280 !important;
}
*{box-sizing:border-box;margin:0;padding:0}

body{font-family:'Poppins', sans-serif;background:#fff;color:var(--ink);}

body {
  padding-top: 34px !important;
}




    /* FOOTER */
    footer { background:#00010a; color:#bbb; padding: 2rem 0; text-align:center; }
    footer a { color:#bbb; text-decoration:none; }
    footer a:hover { color:#fff; }


    /* HERO */
.hero{
  background: linear-gradient(180deg, #0b0220 , #43107a );
  color: white;
  padding: 40px 20px; /* un poco menos alto que home */
  text-align: center;
}
.hero p  { font-size: 1rem; opacity: .9; }
    .navbar {
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
 /*NAV */
    .navbar {
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .er-nav {
      background: linear-gradient(90deg, #0b0220 0%, #43107a 100%);
    }
    
    .er-nav .navbar-brand,
    .er-nav .nav-link {
      color: #fff;
    }
    
    .er-nav .nav-link:hover {
      opacity: 0.9;
    }
        /* Texto dorado para Plan Premium */
    .premium-link {
      color: #FFD700 !important;   /* dorado */
      font-weight: bold;
    }
    .premium-link:hover {
      color: #FFC107 !important;   /* dorado más brillante en hover */
    }             
    



/* Cards */
.card{background:var(--bg-free);border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin-bottom:16px}
.card h3{margin-bottom:8px}
.helper{color:var(--muted);font-size:.9rem}

/* Badges */
.badge{font-size:.75rem;padding:4px 8px;border-radius:999px;font-weight:600}
.badge.free{background:#e0e7ff;color:#4338ca}
.badge.cat{background:#f3f4f6;color:#374151}
.badge.verificado{background:#d1fae5;color:#065f46}
.badge.noverificado{background:#fee2e2;color:#991b1b}
.badge.servicio {
  background: #e0f2fe; /* azul claro */
  color: #1e3a8a;     /* azul fuerte */
}

/* Botones */
.btn{display:inline-block;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:600;font-size:.9rem;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--m1),var(--m2));color:#fff}
.btn.ghost{background:#fff;border:1px solid #d1d5db;color:#374151}
.btn.soft {
  background: #f3f4f6;
  color: #111827;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid #d1d5db; /* 👈 le da borde más claro */
  box-shadow: 0 2px 4px rgba(0,0,0,.08); /* 👈 un poquito de relieve */
  transition: all 0.2s ease;
}

.btn.soft:hover {
  background: #e5e7eb;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0,0,0,.12);
}

.report-card {
      max-width: 750px;   /* ajusta este valor */
  margin: 0 auto;     /* centra el contenedor */
}


.report-card h3 {
  font-size: 1rem;   /* más pequeño */
  font-weight: 700;
  margin-bottom: 6px;
  color: #b91c1c; /* rojo alerta */
}

.report-text {
  font-size: 0.85rem;  /* más chico que antes */
  color: #374151;
  margin-bottom: 12px;
  line-height: 1.4;
}



/* Ajuste adicional en móviles */
@media (max-width: 480px) {
  .report-card h3 {
    font-size: 0.9rem;  /* aún más discreto */
  }
  .report-text {
    font-size: 0.8rem;
    line-height: 1.3;
  }

}

/* Escritorio: solo ancho del texto */
@media (min-width: 481px) {
  .report-btn {
    display: inline-block !important;  /* ignora Bootstrap */
    width: auto !important;            /* evita que se expanda */
    font-weight: 600;
    white-space: nowrap;               /* evita salto de línea */
  }
}



.btn.call{background:#10b981;color:#fff;border:none} /* verde llamar */
.btns-row{display:flex;gap:10px;flex-wrap:wrap}

/* Datos básicos */
.item{margin-bottom:12px}
.item strong{display:block;font-size:.9rem;margin-bottom:2px}

/* Teléfonos en columna */
.phone-list{list-style:none;padding-left:0;margin:6px 0 0 0}
.phone-list li{margin:6px 0}
.phone-list a{color:#111827;text-decoration:none}
.phone-list a:hover{opacity:.85}

/* Quitar subrayado solo dentro de ads */
a.ad *, a.ad:visited *{text-decoration:none}

/* Sticky en escritorio */
.aside{display:none}
@media(min-width:992px){
  .aside{display:block}
  .aside-sticky{position:sticky;top:16px}
}

/* Mobile: ads primero después de datos */
.ads-mobile{display:block}
@media(min-width:992px){
  .ads-mobile{display:none}
}

/* Upsell Premium */
.card.upsell {
  border:2px solid transparent;
  background:#fff;
  border-image: linear-gradient(90deg, var(--m1), var(--m2)) 1;
}


/* Ads Premium — ÚNICO BLOQUE VÁLIDO */
/* Contenedor de los ads */
.ads {
  display: grid;
  gap: 8px;              /* menos espacio entre tarjetas */
}

/* Cada tarjeta */
a.ad {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 8px;    /* menos padding vertical */
  border: 2px solid var(--m1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
  margin-bottom: 0;      /* elimina separación extra */
}
a.ad:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
a.ad img {
  width: 110px;
  height: 110px;
  flex: 0 0 110px;       /* ancho fijo */
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
}
a.ad > div {
  flex: 1 1 auto;
  min-width: 0;
}

/* Título */
a.ad h4 {
  font-size: 1rem;
  margin: 0 0 2px 0;     /* más compacto */
  color: #111827;
  word-break: break-word;
  line-height: 1.2;
}

/* Mensaje de recomendación (⭐ Tu mejor opción ⭐) */
.ad-msg {
  display:inline-block;
  font-size:.8rem;
  font-weight:700;
  margin: 0 0 4px 0;     /* menos separación */
}

/* Descripción */
.ad-desc {
  display: block;
  font-size: .83rem;
  color: #4b5563;
  line-height: 1.2;      /* antes 1.3 */
  margin-bottom: 4px;    /* más compacto */
  word-break: break-word;
}

/* Etiquetas de color */
.ad-msg .ad-text {
  background:linear-gradient(90deg,var(--m1),var(--m2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ad-msg.subcategoria .ad-text { background:none; -webkit-text-fill-color:#1238DE; }
.ad-msg.categoria .ad-text { background:none; -webkit-text-fill-color:#d97706; }
.ad-msg.seccion   .ad-text { background:none; -webkit-text-fill-color:#dc2626; }
.ad-msg.municipio .ad-text { background:none; -webkit-text-fill-color:#047857; }

.pill {
  display: inline-block;
  font-size: .75rem;
  padding: 3px 9px;
  background: linear-gradient(90deg, var(--m1), var(--m2));
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  margin-top: 4px;
  float: right; /* 👈 fuerza pill a la derecha */
}

/* Ajuste escritorio: imágenes un poco más pequeñas */
@media(min-width:992px){
  a.ad img {
    width:100px;
    height:100px;
    flex-basis:100px;
  }
}

.perfil-gratuito {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 10px rgba(0,0,0,.05);
  margin-bottom: 20px;
  max-width: 750px;   /* ajusta este valor */
  margin: 0 auto;     /* centra el contenedor */
}

.perfil-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2px;
}

.perfil-nombre {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0px;
}

.perfil-verif.ok {
  color: #059669;
  font-weight: 600;
  font-size: 1rem;
}
.perfil-verif.no {
  color: #b91c1c;
  font-weight: 600;
  font-size: 1rem;
}

.badge.free {
  background: #ede9fe;
  color: #6d28d9;
  font-weight: 700;
  font-size: .8rem;
  padding: 6px 12px;
  border-radius: 999px;
}

.perfil-desc {
  margin: 10px 0 20px;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.5;
}

.perfil-datos .dato {
  margin-bottom: 16px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  color: var(--muted);
}

.perfil-datos strong {
  display: block;
  font-size: .95rem;
  color: #374151;
  margin-bottom: 4px;
}

.acciones {
  margin-top: 20px;
}

.phone-list li {
  margin: 10px 0;   /* antes 6px → más aire */
  font-size: 1rem;  /* un poquito más grande */
}

.badge.domicilio {
  background: #f3f4f6;  /* gris muy claro */
  color: #374151;       /* gris oscuro */
  font-weight: 600;
  font-size: .85rem;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-block;
  margin-top: 8px;
}


.badge.small {
  font-size: 0.75rem;   /* más pequeño */
  padding: 3px 8px;     /* menos padding */
  font-weight: 500;
}


/* Caja de descripción (wrap) */
.perfil-desc-box { position: relative; }

/* Contenedor que se recorta */
.perfil-desc-box .perfil-desc-container {
  position: relative;
  max-height: 200px;           /* límite inicial (~10–12 líneas) */
  overflow: hidden;
  transition: max-height .3s ease;
}

/* Efecto “fade” sutil al final cuando está recortado (opcional bonito) */
/* Degradado SOLO si hay overflow y el botón está visible */
.perfil-desc-box.has-overflow .perfil-desc-container:not(.expanded)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff);
  pointer-events: none;
}

/* Cuando se expande, sin límite */
.perfil-desc-box .perfil-desc-container.expanded { max-height: none; }

/* Texto de la descripción (mantengo tu estilo) */
.perfil-desc-box .perfil-desc {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
}
.perfil-desc-box .perfil-desc p { margin-bottom: 10px; }

/* Botón */
.btn-ver-mas {
  display: block;          /* se vuelve un bloque */
  margin: 8px auto 0;      /* margen arriba y centrado en horizontal */
  background: none;
  border: none;
  color: var(--m1);
  font-weight: 600;
  cursor: pointer;
  text-align: center;      /* asegura alineación del texto */
}


/* Atributo HTML hidden (por si tu CSS global no lo respeta) */
[hidden] { display: none !important; }

.perfil-header{
  display: block;          /* apilado vertical */
  margin-bottom: 0px;
}

.perfil-top-right{
  display: flex;
  justify-content: flex-end; /* badge a la derecha */
  margin-bottom: 6px;        /* espacio entre badge y nombre */
}


@media (max-width: 768px) {
  .perfil-datos .dato p {
    font-size: 0.85rem;   /* más pequeño solo en móvil */
    color: var(--muted);      /* gris más claro */
  }
}

/* --- Botones en fila --- */
.btns-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Botones base */
.btns-row .btn,
.btns-row button {
  flex: unset;            /* ❌ ya no se estiran todos iguales en PC */
  min-width: 120px;       /* ancho mínimo uniforme */
  text-align: center;
  padding: 10px 14px;
}

/* --- En móvil --- */
@media (max-width: 768px) {
  .btns-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Llamar y Compartir ocupan 50% cada uno */
  .btns-row .btn.call,
  .btns-row .btn.primary {
    flex: 1 1 calc(50% - 5px);
  }

  /* Reclamar ocupa ancho completo y baja */
  .btns-row .btn-reclamar {
    flex: 1 1 100%;
    margin-top: 30px;  /* espacio extra */
  }
}



/* Botón Reclamar */
.btn-reclamar {
  background: #fff;
  border: 2px solid #f59e0b; /* naranja */
  color: #b45309;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-reclamar:hover {
  background: #fef3c7;
  border-color: #d97706;
}

/* Garantiza oculto inicial, incluso si otra hoja pisa .modal */
[hidden] { display: none !important; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;

  /* No mostrar por defecto; se mostrará con .is-open */
  display: none;
  justify-content: center;
  align-items: center;
}

.modal.is-open {
  display: flex;            /* centrado con flex cuando está abierto */
}

.modal-contenido {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  max-width: 450px;
  width: 90%;
  position: relative;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
}

.modal-cerrar {
  position: absolute;
  top: 8px; right: 12px;
  background: none; border: none;
  font-size: 1.5rem; cursor: pointer;
  color: #6b7280;
}



/* Título modal */
#reclamar_title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ink);
}

/* Botón WhatsApp */
.btn-whatsapp {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 20px;
  background: #10b981;
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s ease;
}
.btn-whatsapp:hover { background: #059669; }

/* Aviso de privacidad */
.aviso-priv {
  font-size: .82rem;
  color: #6b7280;
  margin-top: 18px;
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
}

.ad-promo {
  display: inline-block;   /* ocupa solo lo necesario */
  margin-top: 2px;         /* muy poquito margen arriba */
  font-weight: 700;
  font-size: 0.95rem;
  color: #bb078a;
  line-height: 1.4;
}

.upsell-box {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); /* morado más suave */
  border-radius: 16px;
  padding: 28px 30px;
  color: #fff;
  margin: 30px auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  max-width: 750px;
  text-align: left;
}

.upsell-box h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center;
}

.upsell-box .subtext {
  font-size: 0.95rem;
  margin-bottom: 20px;
  color: #f3f4f6;
  text-align: center;
}

.upsell-box ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.upsell-box ul li {
  margin-bottom: 14px;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-upgrade {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 12px 28px;
  background: #facc15;
  color: #111827;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 999px;
  text-decoration: none;
  transition: all .2s ease;
}

.btn-upgrade:hover {
  background: #eab308;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

@media(max-width: 480px) {
  .btn-upgrade {
    font-size: 0.9rem;   /* un poco más chico */
    padding: 10px 20px;  /* menos ancho */
    white-space: nowrap; /* evita salto de línea */
  }
}

.upsell-box .subtext {
  font-size: 0.85rem;  /* más chico que el 0.95rem anterior */
  margin-bottom: 18px;
  color: #f3f4f6;
  text-align: center;
}

@media(max-width: 480px) {
  .upsell-box .subtext {
    font-size: 0.8rem;  /* aún más compacto en celular */
  }
}


/* ======== App Banner ======== */
.app-banner {
  background: linear-gradient(135deg, #f9f9f9 0%, #f1f1f1 100%);
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 30px 15px;
}

.titulo-app {
  font-size: 20px;
  font-weight: 700;
  color: #2d2d2d;
  margin-bottom: 10px;
}

.subtexto-app {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
}

.btn-app-install {
  background: #2d90cf;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 25px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.btn-app-install:hover {
  background: #1b6fa3;
  transform: translateY(-2px);
}

#btnInstalarApp {
  border-radius: 50px;        /* redondeado tipo pill */
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  padding: 3px 10px;
}

#btnInstalarApp:hover {
  background-color: #4c1d95;  /* tu morado de marca */
  color: #fff;
  border-color: #4c1d95;
}

/* ================== BOTÓN REPORTAR ================== */

/* Escritorio: ancho ajustado al texto */
.report-card .report-btn {
  flex: 0 0 auto !important;   /* no crecer en flexbox */
  display: inline-block !important;
  width: auto !important;
  white-space: nowrap;         /* evita salto de línea en el texto */
  font-weight: 600;
  text-align: center;

}

/* En móviles: ancho completo */
@media (max-width: 480px) {
  .report-card .report-btn {
    flex: 1 1 100% !important;
    display: block !important;
    width: 100% !important;
    text-align: center;
    font-size: 0.9rem;
    padding: 8px 16px;
  }
}