body {
  margin: 0;
  font-family: Arial, sans-serif;
  min-height: 100vh;
  background: linear-gradient(
    to bottom,
    #000000 0%,   /* negro arriba */
    #1a1a1a 10%,  /* gris muy oscuro de transición */
    #5a0000 40%,   /* rojo vino / rojo muy oscuro */
    #b22222 65%,   /* rojo ladrillo */
    #ff8c69 90%,   /* salmón (anaranjado rosado) */
    #000000 100%  /* vuelve a negro en el pie */
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #f5f5f5;
  overflow-x: hidden;
}




body.menu-abierto {
  overflow: hidden;
}

.barra-superior {
  background-color: #1a1a1a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
  position: sticky;
  top: 0;
  z-index: 1100;
}

.menu-izquierda {
  display: flex;
  align-items: center;
  gap: 15px;
}

.menu-toggle {
  font-size: 22px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

.menu-derecha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.busqueda {
  padding: 6px;
  border-radius: 6px;
  border: none;
}

.btn-publica {
  background-color: white;
  color: #1a1a1a;
  padding: 6px 10px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

.menu-lateral {
  position: fixed;
  top: 0;
  left: -260px;
  width: 260px;
  height: 100vh;
  background-color:  #5a0000!important;  /*  claro */
  color: #000; /* texto negro para contraste */
  padding: 20px 20px 20px 20px;
  transition: left 0.3s ease;
  z-index: 2000;
  overflow-y: auto;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
}


.menu-lateral.abierto {
  left: 0;
}

.menu-lateral h3 {
  margin-top: 0;
  font-size: 18px;
  margin-bottom: 20px;
  color: #ff4e50;
  text-align: center;
}

@media (max-width: 768px) {
  .menu-lateral {
    transform: translateX(-100%);
    width: 240px;  /* o cualquier tamaño */
    left: 0;       /* ya no importa */
  }

  .menu-lateral.abierto {
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .menu-lateral {
    padding-top: 10px;
  }
}


.menu-instruccion {
  margin-top: -10px;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
}


.filtro-grupo {
  margin-bottom: 25px;
}

.filtro-grupo p {
  font-weight: bold;
  margin-bottom: 8px;
  color: #e97fe0;
  font-size: 15px;
  display: block;
  visibility: visible;
}

.filtro-grupo button {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 10px;
  background: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease;
}

.filtro-grupo button:hover {
  background-color: #ff4e50;
  color: white;
}

.contenedor {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px;
}

@media (min-width: 768px) {
  .galeria {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .galeria {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1200px) {
  .galeria {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ------------------------------------------------------------------
 * 🛠️ Corrección para dispositivos móviles
 *
 * En las páginas principales (por ejemplo, index.html y escort-punta-arenas.html)
 * se añadió un margen izquierdo fijo de 220px mediante un atributo `style` para
 * dejar espacio al menú lateral. Ese margen funciona bien en escritorio, pero en
 * pantallas pequeñas provoca un desplazamiento horizontal no deseado: el
 * contenido se desplaza hacia la derecha y se genera una barra de scroll
 * horizontal. Para evitarlo sin modificar el HTML original, utilizamos un
 * media query que elimina ese margen en pantallas de hasta 768px de ancho.
 *
 * El uso de `!important` garantiza que la regla tenga mayor prioridad que el
 * estilo inline. Así, el contenedor ocupa todo el ancho disponible en móviles
 * y se elimina el desplazamiento lateral. Esta corrección respeta el diseño
 * original en resoluciones mayores, donde el margen sigue siendo necesario.
 */
@media (max-width: 768px) {
  .contenedor {
    margin-left: 0 !important;
  }
}

.card {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease;
  position: relative;
}

.card:hover {
  transform: scale(1.05);
}

.card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.info {
  padding: 8px;
  background: rgba(0, 0, 0, 0.6);
}

.info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #f3f3f3;
}

.info p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #cccccc;
}

.precio {
  position: absolute;
  background: #ff4e50;
  color: #fff;
  padding: 2px 6px;
  font-size: 12px;
  top: 6px;
  left: 6px;
  border-radius: 3px;
  font-weight: bold;
}


.galeria-perfil {
  display: grid;
  gap: 10px;
  margin: 20px 0;
  grid-template-columns: repeat(2, 1fr); /* base: 2 columnas en celular */
}


.galeria-perfil img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  border-radius: 8px;
  background-color: #000; /* fondo si sobra espacio */
}




@media (min-width: 768px) {
  .galeria-perfil {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .galeria-perfil {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1200px) {
  .galeria-perfil {
    grid-template-columns: repeat(5, 1fr); /* 5 columnas en notebooks/PC */
  }
}

.acciones-contacto a {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.acciones-contacto a[href*="wa.me"] {
  background-color: #25D366; /* verde WhatsApp */
  color: Black;
}

.acciones-contacto a[href*="wa.me"]:hover {
  background-color: #1ebe5b;
}

.acciones-contacto a[href^="tel:"] {
  background-color: #25D366;
  color: black;
}

.acciones-contacto a[href^="tel:"]:hover {
  background-color: #e03e40;
}


.calificacion {
  background: #1e1e40;
  color: white;
  padding: 30px;
  border-radius: 12px;
  max-width: 900px;
  margin: 40px auto;
}

.calificacion h2, .calificacion h3 {
  text-align: center;
}

.resumen-calificacion {
  text-align: center;
  margin-bottom: 20px;
}

.estrellas-promedio {
  font-size: 28px;
  color: gold;
  letter-spacing: 5px;
  margin-bottom: 8px;
}

.seleccion-estrellas {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.seleccion-estrellas label {
  font-size: 22px;
  color: #888;
  cursor: pointer;
}

.seleccion-estrellas input[type="radio"] {
  display: none;
}

.seleccion-estrellas label:hover,
.seleccion-estrellas input[type="radio"]:checked + label {
  color: gold;
}

.calificacion textarea {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  display: block;
  padding: 10px;
  background: #151527;
  color: white;
  border: none;
  border-radius: 6px;
}

.calificacion button {
  display: block;
  margin: 20px auto 0;
  padding: 10px 30px;
  background-color: orange;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  cursor: pointer;
}


/* Estilo para ampliar imagen en Lightbox2 */
.lb-dataContainer {
  max-width: 95vw !important;
}

.lb-outerContainer {
  max-height: 95vh !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lb-image {
  max-height: 100vh !important;
  max-width: 100vw !important;
  width: auto !important;
  height: 95vh !important;
  object-fit: contain !important;
  border-radius: 10px;
}


.btn-publica {
  background-color: gold;
  color: black;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-publica:hover {
  background-color: #d4af37; /* un dorado más oscuro al pasar el mouse */
}

/* =======================================================
   Botón “Publícate” adaptado para dispositivos móviles
   -------------------------------------------------------
   En pantallas grandes (escritorio/tablet) el botón se muestra en
   el encabezado. Para móviles, lo ocultamos y mostramos una versión
   situada al final de cada página, justo antes del pie de página.
======================================================= */

/* Estilo base para la variante móvil: hereda colores del botón original */
.btn-publica-mobile {
  background-color: gold;
  color: black;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
  display: none; /* por defecto se oculta; se mostrará en móviles */
}

.btn-publica-mobile:hover {
  background-color: #d4af37;
}

/* Oculta el botón del encabezado en móviles y muestra el botón móvil */
@media (max-width: 768px) {
  header .btn-publica {
    display: none;
  }
  .btn-publica-mobile {
    display: block;
    margin: 30px auto;
    text-align: center;
    width: fit-content;
  }
}

/* Oculta el botón móvil en resoluciones de escritorio */
@media (min-width: 769px) {
  .btn-publica-mobile {
    display: none;
  }
}


.estado-perfil {
  background: #1e1e40;
  color: white;
  padding: 25px;
  margin: 40px 0;
  border-radius: 12px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.estado-contenido p {
  margin: 12px 0;
  font-size: 16px;
  padding: 10px;
  border-radius: 6px;
}

.verificado {
  background: #2d9c4b; /* verde confianza */
  font-weight: bold;
}

.disponibilidad {
  background: #3b229c; /* morado para diferenciar */
}


.perfil-videos {
  background: #1e1e40;
  color: white;
  padding: 25px;
  margin: 40px 0;
  border-radius: 12px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.perfil-videos h3 {
  text-align: center;
  margin-bottom: 20px;
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 por fila */
  gap: 14px;
}

@media (max-width: 900px) {
  .videos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .videos-grid { grid-template-columns: 1fr; }
}

.video-item {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: #151527;
  cursor: pointer;
}

.video-item img {
  width: 100%;
  aspect-ratio: 16/9;  /* mantiene proporción rectangular */
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

.video-item:hover img {
  transform: scale(1.03);
}

.video-badge {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  pointer-events: none;
  font-size: 14px;
  line-height: 1;
}


/* =========================
   ✅ Responsive definitivo
   Fotos: 5 en desktop, 4 laptop, 3 tablet, 2 celular
   Videos: 3 desktop, 2 tablet, 1 celular
   (Se coloca al final para que sobrescriba reglas previas)
========================= */

/* FOTOS (galería del perfil) */
.galeria-perfil {
  display: grid;
  gap: 10px;
  margin: 20px 0;
  grid-template-columns: repeat(2, 1fr); /* base: móvil = 2 columnas */
}

@media (min-width: 768px) {
  .galeria-perfil { grid-template-columns: repeat(3, 1fr); } /* tablet */
}
@media (min-width: 992px) {
  .galeria-perfil { grid-template-columns: repeat(4, 1fr); } /* laptop */
}
@media (min-width: 1200px) {
  .galeria-perfil { grid-template-columns: repeat(5, 1fr); } /* desktop */
}

/* Miniaturas de foto más prolijas (todas del mismo tamaño visual) */
.galeria-perfil img {
  width: 100%;
  height: auto;              /* deja que el alto sea natural */
  aspect-ratio: 3 / 4;       /* recuadro vertical prolijo */
  object-fit: cover;         /* rellena el recuadro con recorte elegante */
  border-radius: 8px;
  background-color: #000;    /* fondo por si la imagen tarda */
}
/* Si prefieres que NUNCA recorte (aunque queden barras), usa contain:
.galeria-perfil img { object-fit: contain; }
*/

/* VIDEOS (grilla) */
.videos-grid {
  display: grid;
  grid-template-columns: 1fr;   /* base: móvil = 1 por fila */
  gap: 14px;
}
@media (min-width: 900px) {
  .videos-grid { grid-template-columns: repeat(2, 1fr); }  /* tablet */
}
@media (min-width: 1200px) {
  .videos-grid { grid-template-columns: repeat(3, 1fr); }  /* desktop */
}

/* Miniatura de video */
.video-item {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: #151527;
  cursor: pointer;
}
.video-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.video-item:hover img { transform: scale(1.03); }

.video-badge {
  position: absolute;
  bottom: 8px; right: 10px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  pointer-events: none;
  font-size: 14px;
  line-height: 1;
}

/* =====================================================
   🎯 Pie de página
   El pie de página incluye una barra de llamada a la acción
   y un bloque inferior con varias columnas: descripción,
   enlaces internos, portales asociados y datos de contacto.
   Está inspirado en el diseño proporcionado y utiliza los
   colores principales del sitio.
===================================================== */

.site-footer {
  background-color: #0d0d23; /* base oscura para el pie */
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 60px;
}

/* Barra de llamado a la acción */
.site-footer .cta-bar {
  background-color: #a19206;
  text-align: center;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.site-footer .cta-bar p {
  margin: 0;
  font-weight: bold;
  font-size: 16px;
}

.site-footer .cta-button {
  display: inline-block;
  border: 2px solid #fff;
  color: #fff;
  padding: 8px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.site-footer .cta-button:hover {
  background-color: #fff;
  color: #e6d889;
}

/* Bloque principal del pie */
.site-footer .footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  padding: 40px 20px;
  background-color: #0f1030;
}

/* Columnas genéricas */
.site-footer .footer-col {
  flex: 1 1 220px;
  min-width: 200px;
}

.site-footer .footer-col h3,
.site-footer .footer-col h4 {
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: bold;
  color: #ffffff;
}

.site-footer .footer-col p {
  margin: 0 0 10px 0;
  color: #cfcfe5;
}

.site-footer .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer .footer-col li {
  margin-bottom: 8px;
  color: #cfcfe5;
}

.site-footer .footer-col a {
  color: #e4e28a;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer .footer-col a:hover {
  text-decoration: underline;
  color: #ffa7a8;
}

/* Iconos de contacto */
.site-footer .footer-contact .icon {
  margin-right: 6px;
}

/* Barra inferior */
.site-footer .footer-bottom {
  background-color: #0d0d23;
  text-align: center;
  padding: 15px 10px;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/*
 * Acordeón de ciudades dentro del menú lateral.
 * Los paneles se crean dinámicamente en el script cuando se hace clic en una región.
 * Al activarse (clase .activo) se muestran y contienen los botones de ciudad.
 */
.panel-ciudades {
  display: none;
  margin: 8px 0 12px 10px;
  padding-left: 8px;
  border-left: 2px solid rgba(255,255,255,0.25);
}
.panel-ciudades.activo {
  display: block;
}
.panel-ciudades .btn-ciudad {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 8px 10px;
  background: #2b2b2b;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease;
}
.panel-ciudades .btn-ciudad:hover {
  background-color: #ff4e50;
}

/* Botón deshabilitado visual (usado para Categorías) */
button.deshabilitado {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === Drawer abierto cuando el nav tiene la clase .abierto === */
.menu-lateral.abierto { left: 0; }

/* === Flyout a la derecha para los submenús (Región / Ciudad / Categorías) === */
.menu-lateral { position: fixed; } /* ya lo tienes, lo reafirmamos */
.menu-lateral .submenu {
  position: absolute;
  top: 80px;                   /* baja un poco desde el tope interior del nav */
  left: calc(100% + 8px);      /* aparece a la derecha del nav */
  display: none;
  width: 260px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  background: #9911cf;
  border-radius: 8px;
  padding: 10px;
  z-index: 2100;
}
.menu-lateral .submenu.activo { display: block; }

/* Botón de "Ciudad" deshabilitado visualmente */
button.deshabilitado { opacity: .5; cursor: not-allowed; }



/* ===== Acordeón de Regiones (ya lo tienes) ===== */
.panel-ciudades {
  display: none;
  margin: 8px 0 12px 10px;
  padding-left: 8px;
  border-left: 2px solid rgba(255,255,255,0.25);
}
.panel-ciudades.activo { display: block; }
.panel-ciudades .btn-ciudad {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 8px 10px;
  background: #2b2b2b;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background-color .2s ease;
}
.panel-ciudades .btn-ciudad:hover { background-color: #ff4e50; }

/* ===== Acordeón de Categorías (NUEVO) ===== */
#panel-categorias {
  display: none;                 /* oculto por defecto */
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #1f1f1f;           /* panel interno */
  border: 1px solid rgba(255,255,255,.08);
}
#panel-categorias.activo { display: block; }

#panel-categorias p {
  font-weight: bold;
  margin: 12px 0 8px;
  color: #e97fe0;
  font-size: 15px;
}

/*
 * Panel de provincias dentro de un grupo.
 * Similar al acordeón de ciudades, este nivel intermedio se usa cuando
 * un grupo contiene más de una provincia. Se indenta ligeramente
 * respecto al grupo y contiene botones de provincia y sus paneles de
 * municipios.
 */
.panel-provincias {
  display: none;
  margin: 8px 0 12px 10px;
  padding-left: 8px;
  border-left: 2px solid rgba(255,255,255,0.25);
}
.panel-provincias.activo {
  display: block;
}

/* Botones de provincia en el segundo nivel del menú */
.panel-provincias .btn-provincia {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 8px 10px;
  background: #2b2b2b;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background-color .2s ease;
}
.panel-provincias .btn-provincia:hover {
  background-color: #ff4e50;
}
/* Reutiliza el estilo de botones del menú lateral */
#panel-categorias .btn-tipo,
#panel-categorias .btn-nacionalidad {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 10px;
  background: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  transition: background-color .2s ease;
}
#panel-categorias .btn-tipo:hover,
#panel-categorias .btn-nacionalidad:hover {
  background-color: #ff4e50;
}

/* Botón deshabilitado (ya lo usabas) */
button.deshabilitado { opacity: .5; cursor: not-allowed; }

/* =============================================================
   Ajustes para compactar las categorías y nacionalidades en el
   menú lateral. Estas reglas se colocan al final para aumentar
   su precedencia y utilizan selectores más específicos para
   sobreescribir las propiedades definidas anteriormente en
   #panel-categorias .btn-tipo y .btn-nacionalidad.
   El objetivo es mostrar dos botones por fila con menos espacio
   vertical y mejorar la visibilidad del menú completo.
============================================================= */

/* Cuadrículas para agrupar los botones de tipo y nacionalidad.
   Se establece explicitamente el display y la distribución en 2
   columnas dentro del panel de categorías. */
#panel-categorias .grid-categorias,
#panel-categorias .grid-nacionalidades {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 4px;
  row-gap: 2px;
}

/* Botones de tipo y nacionalidad dentro de las cuadrículas.
   Se ajustan para reducir su altura y el espacio entre ellos. */
#panel-categorias .grid-categorias .btn-tipo,
#panel-categorias .grid-nacionalidades .btn-nacionalidad {
  margin: 2px 0 !important;
  padding: 4px 2px !important;
  font-size: 0.85em !important;
  line-height: 1.1 !important;
  width: 100%;
  box-sizing: border-box;
}

/* Ajuste de los encabezados "Tipo" y "Nacionalidad" dentro del panel
   para acercar secciones y minimizar espacios verticales. */
#panel-categorias p {
  margin: 6px 0 4px 0 !important;
  font-weight: bold;
}

/* En pantallas pequeñas (menos de 600px) las cuadrículas se
   convierten en una sola columna para una mejor legibilidad. */
@media (max-width: 600px) {
  #panel-categorias .grid-categorias,
  #panel-categorias .grid-nacionalidades {
    grid-template-columns: 1fr !important;
  }

  /*
   * Ajustes responsivos para la página principal (index.html)
   * ---------------------------------------------------------
   * En dispositivos móviles, las tarjetas de la galería del
   * inicio (clase `.galeria`) se ven demasiado alargadas debido
   * a que la altura de las imágenes está fija en 220px. Para
   * que las miniaturas mantengan una relación de aspecto más
   * armónica y no se distorsionen cuando el ancho disponible
   * disminuye, eliminamos la altura fija y especificamos un
   * aspect-ratio vertical. También eliminamos el margen
   * izquierdo aplicado inline en el contenedor principal para
   * que el contenido aproveche todo el ancho en pantallas
   * pequeñas.
   */
  .galeria .card img {
    height: auto;
    aspect-ratio: 3 / 4; /* recuadro vertical prolijo */
    object-fit: cover;
  }

  .contenedor {
    margin-left: 0 !important;
  }
}