html, body {
  margin: 0;
  padding: 0;
}
.fx-header { margin-top: 0; }

/* Evita inflado de texto en iOS y fija base del header */
.fx-head{
  font-size: 1rem;
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Botones/links del header: tamaños estables en móvil */
.fx-head a,
.fx-head .btn{
  font: inherit;                 /* hereda 1rem */
  min-height: 44px;              /* accesible táctil */
  padding: .55em 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Si quieres fluidez, usa clamp sin permitir subidas locas */
@media (max-width: 768px){
  .fx-head a,
  .fx-head .btn{
    font-size: clamp(.875rem, 2.8vw, 1rem);
  }
}


/* ===== Layout general ===== */
#contenedor, #cuerpo, #contenido {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  /* padding: 0 12px !important;*/
  box-sizing: border-box;
}

#contenido {
  display: grid !important;
  grid-template-columns: 1fr;   /* móvil: una columna */
  gap: 20px;
  padding: 0 10px;        /* separación interna izquierda/derecha */
}

@media (min-width: 992px) {
  #contenido { grid-template-columns: 1fr 1fr !important; } /* escritorio: 50% + 50% */
}

.columnabanner, .columnaderecha {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* ===== DESTACADOS ===== */
.grid-destacados {
  display: grid;
  grid-template-columns: 1fr; /* siempre una tarjeta por fila */
  gap: 24px;
}

.grid-destacados .thumb {
  aspect-ratio: 16/9;  /* alto de cada tarjeta (ajusta si quieres más/menos alto) */
  background: #000;
}

.grid-destacados .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;  /* llena el cuadro, recorta si hace falta */
  display: block;
}



/* ===== Restaurar panel negro en las cards (DESTACADOS y NOVEDADES) ===== */

/* La tarjeta vuelve a ser una caja oscura */
.card{
  background: #11131a !important;          /* fondo general oscuro */
  border: 1px solid #1f2430 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* La zona de la imagen no deja márgenes raros */
.card .thumb{ display:block !important; margin:0 !important; }
.card .thumb img{ display:block !important; }

/* Panel inferior (texto + botones) en negro */
.card .body{
  background: #0b0f14 !important;          /* << panel negro */
  padding: 12px !important;
  color: #e5e7eb !important;               /* texto claro encima del negro */
}

/* Aseguramos colores de textos dentro del panel */
.card .title{ color: #e5e7eb !important; }
.card .meta{ color: #94a3b8 !important; }

/* Línea sutil entre imagen y panel (opcional) */
.card .thumb{ border-bottom: 1px solid #1f2430 !important; }


/* === Restaurar botones en las cards (WhatsApp / Llamar / Ver perfil) === */

/* Contenedor de acciones en forma de fila */
.card .actions{
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin-top:12px !important;
}

/* Si por lo que sea no existe .actions, que cualquier enlace dentro del panel se vea tipo botón */
.card .body a,
.card .actions a,
.btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:0 16px !important;
  border-radius:12px !important;
  border:1px solid #2a2f3a !important;
  background:#111827 !important;
  color:#e5e7eb !important;
  text-decoration:none !important;
  font-weight:600 !important;
}

/* Botón principal (Ver perfil) */
.btn-cta,
.card .body a[href*="perfil"],
.card .actions a[href*="perfil"]{
  background:#0e7490 !important;
  border-color:#0e7490 !important;
}

/* Estados hover */
.card .body a:hover,
.card .actions a:hover,
.btn:hover{ border-color:#3b4250 !important; }
.btn-cta:hover,
.card .body a[href*="perfil"]:hover{ background:#0f91ad !important; }

/* No subrayar enlaces dentro del panel negro */
.card .body a:link,
.card .body a:visited{ text-decoration:none !important; }

/* Asegurar tipografía del panel */
.card .title{ color:#e5e7eb !important; }
.card .meta{ color:#94a3b8 !important; }

/* Ocultar correctamente números “sr-only” si se imprimen en la card */
.sr-only{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important;
  border:0 !important;
}

/***** RESTAURAR LOOK “BUENO” DE DESTACADOS + FILTRO *****/

/* — Panel de filtro: fijo arriba, sin superponerse a la imagen — */
.filtro-wrap{
  position: static !important;
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 12px 0 16px !important;   /* separa del primer destacado */
  z-index: 1 !important;
}
.filtro-wrap input[type="text"]{
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 1px solid #2a2f3a !important;
  background: #0b0e14 !important;
  color: #e5e7eb !important;
}
.filtro-wrap button{
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #2a2f3a !important;
  background: #0e7490 !important;
  color: #fff !important;
  cursor: pointer !important;
}

/* — Card: fondo y radios como en la referencia buena — */
.card{
  background: #11131a !important;
  border: 1px solid #1f2430 !important;
  border-radius: 12px !important;    /* menos “bola”, más recto */
  overflow: hidden !important;
  box-shadow: none !important;
}
.card .thumb{
  display:block !important;
  margin:0 !important;
  border-bottom: 1px solid #1f2430 !important;
}
.card .thumb img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-top-left-radius:12px !important;
  border-top-right-radius:12px !important;
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

/* — Panel negro inferior (texto + botones) — */
.card .body{
  background:#0b0f14 !important;     /* tono negro panel */
  padding:14px !important;
  color:#e5e7eb !important;
}
.card .title{ color:#e5e7eb !important; }
.card .meta{ color:#94a3b8 !important; }

/* — Botones como en la referencia buena — */
.card .actions{
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin-top:12px !important;
}
.card .actions a,
.card .body a,
.btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:48px !important;          /* altura similar a la buena */
  padding:0 18px !important;
  border-radius:12px !important;
  border:1px solid #2a2f3a !important;
  background:#111827 !important;
  color:#e5e7eb !important;
  text-decoration:none !important;
  font-weight:600 !important;
}
.btn-cta,
.card .actions a[href*="perfil"],
.card .body a[href*="perfil"]{
  background:#0e7490 !important;
  border-color:#0e7490 !important;
}
.card .actions a:hover,
.card .body a:hover{ border-color:#3b4250 !important; }
.btn-cta:hover,
.card .actions a[href*="perfil"]:hover{ background:#0f91ad !important; }

/* — Tamaño y encuadre del bloque de foto (mantiene el “hero” ancho) — */
.grid-destacados .thumb{ aspect-ratio:16/9 !important; background:#000 !important; }

/* — Seguridad: nada del filtro se superpone a la card — */
.filtro-wrap, .card { position: relative !important; }


/* ====== LAYOUT 50/50 SOLO EN PANTALLA HORIZONTAL (desktop / tablet apaisado) ====== */
#contenido{ display:grid !important; grid-template-columns:1fr; gap:20px; }
@media (min-width: 992px){
  #contenido{ grid-template-columns: 1fr 1fr !important; }  /* 50% + 50% */
}
.columnabanner,.columnaderecha{
  width:100% !important; margin:0 !important; padding:0 !important; float:none !important;
}

/* ====== DESTACADOS: UNA CARD POR FILA Y FOTO ENTERA (SIN RECORTAR) ====== */
/* en todos los tamaños */
.grid-destacados{ display:grid !important; grid-template-columns:1fr !important; gap:24px !important; }

/* Importante: quitamos el alto fijo por relación de aspecto para que la imagen marque la altura */
.grid-destacados .thumb{
  width:100% !important;
  height:auto !important;       /* deja que crezca en vertical según la imagen */
  aspect-ratio: auto !important;
  background:#000;              /* “letterbox” si sobra hueco */
}

/* La imagen se ve ENTERA y usa todo el ancho disponible */
.grid-destacados .thumb img{
  display:block !important;
  width:100% !important;
  height:auto !important;       /* mantiene proporción original */
  object-fit: contain !important;/* NO recorta, “se ve entera” */
}

/* (Opcional) en pantallas amplias, hazla todavía más grande limitando por alto de viewport */
@media (min-width: 992px){
  .grid-destacados .thumb img{
    max-height: 72vh;           /* sube/baja este valor a tu gusto */
  }
}

/* ====== NOVEDADES: 2 POR FILA EN ESCRITORIO, 1 EN MÓVIL ESTRECHO ====== */
.grid-novedades{ display:grid !important; gap:16px !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
@media (max-width:600px){
  .grid-novedades{ grid-template-columns:1fr !important; }
}




/************ DESBLOQUEO DE ANCHOS FIJOS EN COLUMNAS ************/

/* Layout 50/50 en escritorio, apilado en móvil */
#contenido{
  display:grid !important;
  grid-template-columns:1fr;      /* móvil */
  gap:20px;
  align-items:start;
}
@media (min-width:992px){
  #contenido{ grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
}

/* Las columnas no imponen límites ni floats */
.columnabanner, .columnaderecha{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;        /* para que el grid pueda contraer */
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  display:block !important;
}

/* CUALQUIER wrapper antiguo dentro de columna: 100% de ancho */
.columnabanner > *, .columnaderecha > *{
  width:100% !important;
  max-width:none !important;
}

/* Título/sección: sin floats y a todo el ancho */
.seccion{
  display:block !important;
  float:none !important;
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}

/* Viejos bloques que suelen tener width fijo: libéralos */
.banner_portada, #idchica {
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/************ DESTACADOS: QUE EL PANEL/ CARD OCUPEN TODA LA COLUMNA ************/

.grid-destacados{
  display:grid !important;
  grid-template-columns:1fr !important;   /* 1 card por fila */
  gap:24px !important;
}

.columnabanner .card{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  border-radius:12px !important;
}


.columnabanner .thumb{
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;           /* que la imagen marque la altura */
  background:#000;
}
.columnabanner .thumb img{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;          /* “se ve entera” */
  display:block !important;
} 


/* Panel inferior (texto+botones) debe estirar a 100% */
.card .body{
  width:100% !important;
  box-sizing:border-box !important;
}

/************ NOVEDADES: 2 por fila en escritorio, 1 en móvil estrecho ************/
.grid-novedades{
  display:grid !important;
  gap:16px !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}
@media (max-width:600px){
  .grid-novedades{ grid-template-columns:1fr !important; }


  /***** FIX DURO: liberar .columnabanner del max-width:470px *****/
#contenido { display: grid !important; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 992px){
  #contenido { grid-template-columns: 1fr 1fr !important; } /* 50/50 */
}

/* Gana por especificidad y anula anchos viejos */
#contenido .columnabanner{
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  float: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Por si lo fijan en hijos envoltorios */
#contenido .columnabanner > *,
#contenido .columnabanner .seccion,
#contenido .columnabanner .banner_portada,
#contenido .columnabanner #idchica{
  max-width: none !important;
  width: 100% !important;
}

/* Destacados: una card por fila y la imagen marcando la altura (entera) */
#contenido .columnabanner .grid-destacados{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}
#contenido .columnabanner .thumb{ width:100% !important; height:auto !important; aspect-ratio:auto !important; }
#contenido .columnabanner .thumb img{ width:100% !important; height:auto !important; object-fit:contain !important; display:block !important; }
}

/* ===== NOVEDADES – foto a TODO el ancho de su columna ===== */

/* Grid: 2 en vertical, 3 en formato ancho (como ya querías) */
.grid-novedades{
  display:grid !important;
  gap:16px !important;
  grid-template-columns:repeat(2,1fr) !important;
}
@media (orientation: landscape) and (min-width:992px){
  .grid-novedades{ grid-template-columns:repeat(3,1fr) !important; }
}

/* Quita límites heredados de wrappers viejos (idchica/banner) */
.grid-novedades #idchica,
.grid-novedades .banner_portada,
.grid-novedades .card { 
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
}

/* Asegura que el primer <a> que envuelve la imagen ocupa el 100% */
.grid-novedades #idchica > a:first-child,
.grid-novedades .card > a:first-child,
.grid-novedades .thumb{
  display:block !important;
  width:100% !important;
}

/* La IMAGEN se estira al ancho del contenedor (escalando) */
.grid-novedades .thumb img,
.grid-novedades #idchica img,
.grid-novedades img.idchicaimg{
  display:block !important;
  width:100% !important;      /* ocupa todo el ancho de la columna */
  height:auto !important;     /* mantiene proporción al crecer */
  object-fit:cover !important;/* si el alto es menor, rellena recortando un poco */
  border:0 !important;        /* elimina marcos blancos antiguos */
}

/* (Opcional) Si quieres altura uniforme tipo mosaico, descomenta: */

.grid-novedades .thumb,
.grid-novedades #idchica > a:first-child{
  aspect-ratio:4/5 !important;    background:#000;
}
.grid-novedades .thumb img,
.grid-novedades #idchica img{ height:100% !important; }

/* Anular el límite heredado de main.css */
.grid-novedades .idchicaimg,
.grid-novedades #idchica img,
.grid-novedades .thumb img{
  max-width: none !important;
  width: 100% !important;
  height: auto !important;      /* mantiene proporción */
  object-fit: cover !important; /* llena el ancho, recortando un poco si hace falta */
  box-shadow: none !important;
  margin-bottom: 8px !important;
}

/* Asegura que el contenedor de la imagen también ocupa todo el ancho */
.grid-novedades #idchica > a:first-child,
.grid-novedades .thumb{
  display: block !important;
  width: 100% !important;
}

/* ——— Burbuja azul sobre la foto en NOVEDADES usando #star ——— */
.grid-novedades #idchica{ position: relative !important; }

/* Posiciona la burbuja encima, en la esquina superior-izquierda */
.grid-novedades #idchica #star{
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;         /* pon right:10px si prefieres la derecha */
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;          /* que no bloquee clics a la imagen */
}

/* Tamaño/estilo del “chicle” (usa tu PNG/SVG actual) */
.grid-novedades #idchica #star img{
  display: block !important;
  height: 28px !important;       /* ajusta a tu gusto */
  width: auto !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Oculta el texto “Perfil reactivado / Nuevo perfil” que queda debajo de la foto */
.grid-novedades #idchica > a + br + a{
  display: none !important;
}


/* ===== NOVEDADES: burbuja azul abajo a la derecha ===== */
.grid-novedades .thumb{
  position: relative !important;
}

.grid-novedades .thumb .badge{
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;   /* esquina inferior derecha */
  z-index: 2 !important;

  background: #0ea5b7 !important;
  color: #fff !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
  pointer-events: none !important;
}


/* Capa de botones sobre la imagen de destacados */
.grid-destacados .thumb{
  position: relative;
}

.grid-destacados .overlay-buttons{
  position: absolute;
  bottom: 12px;        /* pegado abajo */
  left: 50%;           /* centrado horizontal */
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;

  /* fondo semitransparente para mejorar legibilidad */
  background: rgba(0,0,0,0.4);
  padding: 6px 12px;
  border-radius: 12px;
}

/* Botones adaptados dentro del overlay */
.grid-destacados .overlay-buttons .btn{
  flex: unset;            /* no ocupar todo */
  padding: 6px 12px;
  height: auto;
  font-size: 0.6rem;
  border-radius: 8px;
}

/* Panel compacto bajo el banner (Destacados) */
.card .body-compact{
  background:#0b0f14;
  padding:10px 14px;
  border-top:1px solid #1f2430;
}

.card .body-compact .info-line{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  color:#e5e7eb;
  font-size:1rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis; /* corta con … si se pasa de ancho */
}

.card .body-compact .name{ font-weight:700; }
.card .body-compact .city{ color:#9fb0c5; }
.card .body-compact .sep{ opacity:.55; }


/* ===== Botones de DESTACADOS solo en móvil vertical ===== */
@media (max-width: 768px) and (orientation: portrait) {
  /* contenedor un poco más fino */
  .grid-destacados .overlay-buttons{
    gap: 4px !important;
    padding: 3px 4px !important;
    border-radius: 8px !important;
  }
  /* PISAR tamaños heredados de .btn (que tienen min-height grande) */
  .grid-destacados .overlay-buttons .btn{
    min-height: 30px !important;   /* antes: 40–48px */
    padding: 2px 8px !important;
    font-size: 0.70rem !important;
    line-height: 1.1 !important;
    border-radius: 6px !important;
  }
  /* CTA un pelín más marcado pero igual de compacto */
  .grid-destacados .overlay-buttons .btn-cta{
    min-height: 32px !important;
    padding: 3px 10px !important;
    font-size: 0.72rem !important;
  }
}

/* Overlay de botones en DESTACADOS */
.grid-destacados .overlay-buttons {
  position: absolute;
  bottom: 4px;                  /* más pegados al borde inferior */
  left: 0;
  right: 0;                     /* ahora ocupa todo el ancho */
  margin: 0 4px;                /* 4px de margen a izquierda/derecha */
  display: flex;
  justify-content: center;      /* centra los botones en la franja */
  gap: 8px;
  background: rgba(0,0,0,0.45); /* gris translúcido */
  padding: 4px 0;               /* altura interna justa */
  border-radius: 6px;           /* esquinas suaves */
  z-index: 3;
}

/* Botones dentro del overlay */
.grid-destacados .overlay-buttons .btn {
  flex: 1;                      /* todos ocupan el mismo ancho */
  text-align: center;
  font-size: 0.8rem;
  padding: 4px 0;
  border-radius: 4px;
}

.grid-destacados .overlay-buttons {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 90%; /* se adapta al ancho de la foto, no del contenedor */
  max-width: 98%;
  display: flex;
  justify-content: center;
  gap: 6px;
  background: rgba(0,0,0,0.6);
  padding: 2px 0;
  border-radius: 6px;
}

/* Faldón inferior de las tarjetas */
.card .body {
  padding: 6px 10px;   /* menos espacio arriba/abajo */
}

.card .title {
  font-size: 1rem;     /* un poco más pequeño */
  margin: 2px 0;       /* menos margen vertical */
  line-height: 1.2;    /* más compacto */
}

.card .meta {
  font-size: 0.85rem;  /* un poco más discreto */
  margin: 0;           /* sin márgenes extra */
  line-height: 1.2;    /* ajustado */
}

/* El enlace ocupa toda la card y hereda estilos de texto */
.card .card-link{
  display:block;
  height:100%;
  color:inherit;
  text-decoration:none;
}

/* Accesibilidad teclado: foco visible en toda la tarjeta */
.card .card-link:focus-visible{
  outline:2px solid rgba(255,255,255,.6);
  outline-offset:2px;
  border-radius:12px;
}

/* Evita que la imagen “absorba” clics en algunos navegadores */
.card .thumb img{ pointer-events:none; }


/* La card debe ser posicionada para poder cubrirla con el enlace */
.card { position: relative; }

/* Capa de enlace que hace clicable toda la tarjeta */
.card .card-cover{
  position: absolute;
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  z-index: 1;             /* por debajo de los botones */
  display: block;
  text-indent: -9999px;   /* no muestra texto */
  background: transparent;/* no tapa visualmente nada */
}

/* Aseguramos que los botones y el badge queden por ENCIMA del cover */
.overlay-buttons{ position: relative; z-index: 3; }
.badge{ position: absolute; z-index: 2; }

/* Evitar que la imagen “robe” eventos (no imprescindible, pero ayuda) */
.thumb img{ pointer-events: none; }

/* Accesibilidad: foco visible al tabular sobre la tarjeta */
.card .card-cover:focus-visible{
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Badge con puntito de color delante del texto */
/* base */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-weight:600;
  font-size:.85rem;
  line-height:1;
}

/* ✅ una sola regla para el punto, sin background-color */
.badge .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
  margin-right:4px;
  /* aro negro para contraste en cualquier fondo */
  box-shadow: 0 0 0 2px #000;
}

/* colores (deben ir DESPUÉS de la base) */
.badge-promo .dot{      background:#FFD600; } /* amarillo */
.badge-reactivado .dot{ background:#43A047; } /* verde */
.badge-ubicacion .dot{  background:#1E88E5; } /* azul */
.badge-nuevo .dot{      background:#E53935; } /* rojo */

/* sin puntito */
.badge-default .dot{ display:none; }
/* Ajustar unión de cabecera con el contenido en newhome */
#cuerpo, #contenido {
  /*background: #8a3d57;   /* malva/morado de tu layout */
  padding-top: 8px;      /* mismo respiro que en nficha/nrank */
  padding-top: 8px;
}
/* 1) El fondo en toda la zona bajo el header debe ser el malva */
body, #contenedor, #cuerpo, #contenido{ 
  background:#8a3d57 !important; 
  margin:0; 
  padding:0;
}

/* 2) Nada de margen arriba en el primer bloque tras el header */
.fx-header + *{ margin-top:0 !important; }

/* 3) Si hay una barra/separador justo debajo, la neutralizamos */
.fx-header + * > .separador,
.fx-header + * > .separator,
.fx-header + * > .barra,
.fx-header + * > .bar,
.fx-header + * > .hr,
.fx-header + * > hr{
  display:none !important;
  height:0 !important;
  border:0 !important;
  background:transparent !important;
  margin:0 !important;
  padding:0 !important;
}

/* 4) Por si fuera un “div” con fondo negro estrecho */
.fx-header + * > div[style*="background:#000"],
.fx-header + * > div[style*="background: #000"],
.fx-header + * > div[style*="background-color:#000"],
.fx-header + * > div[style*="background-color: #000"]{
  background:#8a3d57 !important;
  height:auto !important;
}

#contenido {
  border: none !important;
  box-shadow: none !important;
  padding:6px;
}
/* Ocultar cualquier overlay antiguo en destacados */
.grid-destacados .overlay-buttons{ display:none !important; }

/* Asegurar que los botones del faldón son clicables sobre la card-cover */
.card{ position: relative; }
.card-cover{ position:absolute; inset:0; z-index:1; }
.card .body{ position:relative; z-index:2; }  /* faldón por encima */

/* Faldón compacto (si no lo tenías ya) */
.card .body-compact{
  background:#0b0f14;
  padding:10px 14px;
  border-top:1px solid #1f2430;
}
.card .body-compact .info-line{
  display:flex; align-items:center; gap:6px; margin:0;
  color:#e5e7eb; font-size:1rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.card .body-compact .name{ font-weight:700; }
.card .body-compact .city{ color:#9fb0c5; }
.card .body-compact .sep{ opacity:.55; }

/* Botones en el faldón */
.card .actions{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;
}
.card .actions .btn{
  min-height:38px; padding:0 14px; border-radius:10px;
  border:1px solid #2a2f3a; background:#111827; color:#e5e7eb;
  font-weight:600; text-decoration:none; line-height:38px;
}
.card .actions .btn-cta{ background:#0e7490; border-color:#0e7490; }

/* Un pelín más compactos en desktop si hace falta */
@media (min-width: 992px){
  .card .actions .btn{ min-height:36px; line-height:36px; padding:0 12px; }
}
/* Botones genéricos del faldón */
.card .actions .btn{
  min-height:20px;          /* más bajos por defecto (móvil) */
  line-height:20px;
  padding:0 2px;
  border-radius:6px;
  font-size:0.65rem;
}

/* En escritorio (pantallas grandes) un pelín más altos */
@media (min-width: 768px){
  .card .actions .btn{
    min-height:38px;
    line-height:38px;
    padding:0 14px;
    font-size:0.9rem;
  }
}
/* 1) Todos los botones del faldón, NEUTROS por defecto */
.grid-destacados .card .actions .btn:not(.btn-cta){
  background: #111827 !important;
  border: 1px solid #2a2f3a !important;
  color: #e5e7eb !important;
}

/* 2) El CTA "Ver perfil" SIEMPRE azul, por encima de cualquier otra regla */
.grid-destacados .card .actions .btn-cta{
  background: #0e7490 !important;
  border-color: #0e7490 !important;
  color: #fff !important;
  font-weight: 600;
}

/* 3) Por si alguna regla antigua coloreaba el primer botón del grupo */
.grid-destacados .card .actions .btn:first-child{
  background: #111827 !important;
  border-color: #2a2f3a !important;
  color: #e5e7eb !important;
}

/* === Forzar botones del faldón más finos en MÓVIL === */
@media (max-width: 767.98px){

  /* El contenedor no estira la fila */
  .grid-destacados .card .actions{
    align-items: center !important;
  }

  /* Neutraliza cualquier alto previo muy “duro” */
  .grid-destacados .card .actions a.btn,
  .grid-destacados .card .actions a.btn.btn,
  .grid-destacados .card .actions a.btn.btn.js,
  .grid-destacados .card .actions a.btn.btn-cta{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 26px !important;        /* << alto fijo finito */
    min-height: 0 !important;       /* neutraliza min-height previos */
    line-height: 24px !important;   /* texto centrado */
    padding: 0 8px !important;      /* más estrechos */
    font-size: 0.8rem !important;  /* letra más pequeña */
    border-radius: 6px !important;
  }
}
body {
  background:#000 !important;   /* negro solo como base */
  margin:0;
  padding:0;
}

#contenedor, #cuerpo, #contenido {
  background:#8a3d57 !important; /* siguen en malva */
}