/*colores creados para usar dentro de la aplicacion*/
:root {
    --blanco: #ffffff;
    --negro: #000000;
    --rojo: #7f0e1b;
    --transparente: rgb(0,0,0,0);
    --rosa: #4a0065;
    --morado: #6400b6;
    --azul: #00c3ff;
}

/*Normalizacion de tamaños en rem*/
html{
    font-size: 62.5%;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body{
    font-size: 16px; /* 1rem = 10px */
    font-family: 'Inter', sans-serif;
    background-color: var(--negro);
}

/*color de navegacion princiapl*/
.navPrincipal-bg {
    background-color: var(--negro);
}

/*margen y altura de la navegacion princiapl*/
.navPrincipal-bg .contenedorPrincipal {
    margin: 0 3rem;
    height: 7rem;
}

/*tipo de display y acomodo en navegacion principal*/
.navPrincipal-bg .navegacionPrincipal {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navPrincipal-bg .navegacionPrincipal div {
    display: flex;
    justify-content: space-between;
}

/*configuracion de la navegacion principal*/
.navPrincipal-bg .navegacionPrincipal a {
   text-decoration: none;
   border: .1rem solid transparent;
}

/*configuracion del logo en la navegacion princiapl*/
.navPrincipal-bg .navegacionPrincipal div.logo a {
    font-size: 2.49rem;
    padding: 1.3rem 1.5rem;
    font-weight: bold;
    color: var(--morado);
}

.navPrincipal-bg .navegacionPrincipal div.logo b {
    color: var(--rojo)
}

/*hover especial para el logo de la navegacion principal*/
.navPrincipal-bg .navegacionPrincipal div.logo a:hover{
    border-bottom-color: var(--rosa);
}

/*padding de la seccion de busqueda en la navegacion princiapl y margin para centrarlo*/
.navPrincipal-bg .navegacionPrincipal div.busqueda {
    padding: 1rem;
    margin-left: -10rem;
}

/*Seccion de busqueda principal, aqui se modifica todo el aspecto, tamaño, fuente, eventos, etc.*/
.navPrincipal-bg .navegacionPrincipal div.busqueda input[type="text"] {
    width: 53rem;
    height: 4rem;
    font-size: 1.55rem;
    border-width: 0rem;
    background-color: var(--negro);
    color: var(--blanco);
    border-bottom: .1rem solid transparent;
    border-bottom-color: var(--morado);
    outline: none;
}

.navPrincipal-bg .navegacionPrincipal div.busqueda .btn-buscar {
  background-color: var(--negro);
  color: var(--blanco);
  border: none;
  width: 4rem;
  height: 4rem;
  border-bottom: .1rem solid transparent;
  border-bottom-color: var(--morado);
  cursor: pointer;
  align-items: center;
}

.navPrincipal-bg .navegacionPrincipal div.busqueda .btn-buscar:hover {
  color: var(--morado);
}

/* --- HEADER INTELIGENTE (Smart Sticky) --- */
.header-inteligente {
    position: fixed; /* Se queda pegado a la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* Siempre encima de todo */
    transition: transform 0.3s ease-in-out; /* Animación suave */
    box-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Sombra para resaltar */
}

/* Clase que oculta el menú hacia arriba */
.header-inteligente.oculto {
    transform: translateY(-100%); /* Lo mueve fuera de la pantalla hacia arriba */
}

/* Ajuste para el espaciador (evita saltos de contenido) */
#headerSpacer {
    display: block;
    width: 100%;
    /* La altura se calculará con JS automáticamente */
}

.btn-eliminar {
position: absolute;
top: 10px;
right: 10px;
background-color: rgba(220, 53, 69, 0.9);
color: white;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
font-weight: bold;
cursor: pointer;
z-index: 10;
display: none; /* Oculto por defecto */
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
transition: transform 0.2s;
}
.btn-eliminar:hover {
transform: scale(1.1);
background-color: red;
}

/*Configuracion del menu de opciones*/
.navPrincipal-bg .navegacionPrincipal .menu {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.navPrincipal-bg .navegacionPrincipal .menu .menu-desplegable {
  display: none;
  position: absolute;
  width: 14rem;
  top: 110%;
  right: 3.1rem;
  top: -.1rem;
  background-color: var(--negro);
  list-style: none;
  padding: 0;
  margin: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 100;
}

.navPrincipal-bg .navegacionPrincipal .menu .menu-desplegable li a {
  display: block;
  padding: 1rem 1.5rem;
  color: var(--blanco);
  text-decoration: none;
}

.navPrincipal-bg .navegacionPrincipal .menu .menu-desplegable li a:hover {
  color: var(--morado);
}

.navPrincipal-bg .navegacionPrincipal .menu:hover .menu-desplegable {
  display: block;
}

/*color de la navegacion secundaria*/
.navSecundaria-bg {
    /*background-color: var(--verdeBandera);*/
    background-color: var(--negro);
}

/*tamaño de la navegacion secundaria en el panel princiapl*/
.navSecundaria-bg .contenedorSecundario {
    max-width: 75rem;
    margin: 0 auto;
}

/*acomodo del contenido de la navegacion secundaria*/
.navSecundaria-bg .navegacionSecundaria {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navSecundaria-bg .navegacionSecundaria div {
    display: flex;
    justify-content: space-between;
}

/*configuracion de acomodo y aspecto de la navegacion secundaria del panel principal*/
.navSecundaria-bg .navegacionSecundaria a {
    padding: 1.58rem;
    color: var(--blanco);
    text-decoration: none;
    text-align: center;
    font-size: 1.5rem;
    border: .2rem solid transparent;
}
.navSecundaria-bg .navegacionSecundaria a:hover {
    border-bottom-color: var(--blanco);
    cursor: pointer;
}

/* --- MENÚ DESPLEGABLE MODERNO (APPLE STYLE - COLUMNAS DE 5) --- */

.categorias-wrapper {
    position: relative;
    display: inline-block;
}

/* Botón Principal */
.btn-categorias {
    background: transparent;
    border: .2rem solid transparent;
    color: var(--blanco);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 1.58rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}


.categorias-wrapper:hover .btn-categorias {
    border-bottom-color: var(--blanco);
}

/* --- CONTENEDOR FLOTANTE (DOBLE DE GRANDE) --- */
/* --- ESTILOS GLOBALES (MODIFICADO PARA ESTAR EN EL BODY) --- */
.dropdown-moderno {
    /* CAMBIO CLAVE: Fixed para flotar sobre todo */
    position: fixed; 
    top: 150px;      /* Distancia desde el techo de la página */
    left: 50%;      /* Centrado horizontal */
    
    /* Centrado perfecto + Estado inicial animado (un poco más arriba) */
    transform: translateX(-50%) translateY(-10px); 
    
    /* Estética */
    background-color: var(--negro); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--rosa);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    padding: 30px; 
    
    /* Capa superior absoluta */
    z-index: 200000 !important;
    
    /* Estado inicial: Oculto */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* CLASE ACTIVO (Cuando JS lo abre) */
.dropdown-moderno.activo {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    /* Mantenemos el centrado horizontal y bajamos a posición 0 */
    transform: translateX(-50%) translateY(0);
}


/* --- LA REJILLA MÁGICA (FLUJO VERTICAL) --- */
.grid-categorias {
    display: grid !important;
    
    /* ESTO ES LO VITAL: Rellena columnas (hacia abajo) primero */
    grid-auto-flow: column !important;
    
    /* Fuerza exactamente 5 items por columna. El 6to se va a la siguiente. */
    grid-template-rows: repeat(5, min-content) !important;
    
    /* Crea 4 columnas del mismo ancho */
    grid-template-columns: repeat(4, 1fr) !important;
    
    /* Espaciado generoso */
    column-gap: 40px; 
    row-gap: 15px;
    
    width: 100%;
}

/* Estilo de los enlaces */
.grid-categorias a {
    color: #777676 !important;
    text-decoration: none;
    font-size: 1.5rem; /* Texto más grande y legible */
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left !important;
    border: none !important;
    
    /* Asegura que se comporten como bloque */
    display: block; 
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-categorias a:hover {
    color: var(--blanco) !important;
    background-color: rgba(100, 0, 182, 0.2); /* Fondo morado suave al pasar mouse */
    transform: translateX(2px);
}

/* Decoración triángulo */
.dropdown-moderno::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 40px;
    width: 16px;
    height: 16px;
    background-color: var(--negro);
    transform: rotate(45deg);
    border-left: 1px solid var(--rosa);
    border-top: 1px solid var(--rosa);
}


/*color del adorno de la navegacion secundaria*/
.linea_navegacion2 {
    width: auto;
    height: .1rem;
    background: radial-gradient(circle, var(--morado) 30%, var(--negro));
}

.cuerpo {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}


/*contenedor de publicaciones estaticas*/
.cuerpo .Pcontenedor {
    flex: 100%; /* ocupa todo el espacio restante */
    min-height: 150rem;
    max-width: 106rem;
}

.sombra {
    box-shadow: 0px 5px 15px 0px var(--morado);
    -webkit-box-shadow: 0px 5px 15px 0px var(--morado);
    -moz-box-shadow: 0px 5px 15px 0px var(--morado);
    background-color: var(--negro);
    padding: 2rem;
    border-radius: 1rem;
}

/* --- NUEVO DISEÑO MASONRY ESTABLE (FLEX) --- */
.seccion {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start; /* Importante: Alinea arriba */
    width: 100%;
    padding: 1rem;
}

/* Las columnas que crearemos con JS */
.masonry-columna {
    flex: 1; /* Todas las columnas ocupan el mismo ancho */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Espacio vertical entre fotos */
    min-width: 0; /* Evita desbordamientos */
}

/* En modo búsqueda, las columnas JS desaparecen visualmente (display contents)
   o simplemente el JS no las crea (veremos eso en la lógica) */


@keyframes entradaSuave {
    from {
        opacity: 0;
        transform: scale(0.98); /* Un zoom muy sutil */
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


.publicacion {
    /* --- ELIMINADO: content-visibility y contain (CAUSANTES DEL BUG) --- */
    
    /* Estructura Sólida */
    position: relative;
    display: block; /* Importante: block es más estable que inline-block */
    width: 100%;
    margin-bottom: 1.5rem;
    
    /* Animación (Se mantendrá en PC, se anulará en Móvil más abajo) */
    opacity: 0; 
    animation: entradaSuave 0.8s ease-out forwards;

    /* Estilos visuales */
    background-color: var(--negro);
    border: 1px solid var(--negro);
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: 0 1px 5px var(--morado);
    
    /* Evita cortes en columnas si usas layout tipo periódico */
    break-inside: avoid; 
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}


.publicacion img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  
  /* IMPORTANTE: Altura mínima para evitar saltos de layout */
  min-height: 200px; 
  
  /* CAMBIO CLAVE: Fondo transparente. 
     Si el iPhone tarda en renderizar, mejor que se vea transparente a que se vea un cuadro negro */
  background-color: transparent; 
  
  object-fit: cover;
  
  /* Truco de aceleración de hardware para evitar parpadeos */
  transform: translateZ(0);
  will-change: opacity;
}

.publicacion p {
  /*font-size: 1.3rem;
  color: var(--blanco);
  margin: 0;
  white-space: pre-wrap;*/
  display: none;
}

.publicacion:hover {
    box-shadow: 0 4px 15px var(--morado);
    border-color: var(--morado);
}

/* --- PROTECCIÓN DE IMÁGENES --- */
img {
    /* Evita que se pueda seleccionar la imagen como texto */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

    /* Evita que se pueda arrastrar la imagen (Drag & Drop) */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    
    /* Deshabilita el menú contextual táctil en móviles (mantener presionado) */
    -webkit-touch-callout: none;
}

/* Capa transparente invisible para bloquear clic derecho directo en la img */
.publicacion .proteccion-capa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Encima de la imagen */
    background: transparent;
}

/* --- MODO BÚSQUEDA (Orden Izquierda -> Derecha) --- */
/* Ajuste para el modo búsqueda (Grid) */
.seccion.modo-search {
    display: grid; /* Cambia a Grid solo al buscar */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

.seccion.modo-search .masonry-columna {
    display: contents; 
}

/* 1. Opcional: Hacer las tarjetas idénticas */
.seccion.modo-search .publicacion {
height: 100%; /* Ocupar todo el alto de la celda */
display: flex;
flex-direction: column;
justify-content: space-between;
}

/* 2. Forzar altura uniforme para eliminar huecos */
.seccion.modo-search .publicacion img {
height: 300px; /* Puedes ajustar este valor (ej. 250px o 350px) */
object-fit: cover; /* Clave: Corta los bordes sobrantes sin deformar la foto */
object-position: center; /* Enfoca la parte de arriba (usualmente caras/cabezas) */
}

/* --- PUBLICIDAD LATERAL DINÁMICA --- */

/* Contenedores Verticales (Izquierda y Derecha) */
.cuerpo .LPublicidad, 
.cuerpo .RPublicidad {
    display: flex;
    flex-direction: column; /* Uno debajo del otro */
    gap: 30rem;
    margin: auto;
    margin-top: 4rem;
    width: 190px; /* ANCHO FIJO IMPORTANTE */
    min-width: 190px; /* Evita que se aplasten */
    flex-shrink: 0;
}

/* Clase maestra para el anuncio individual */
/* Clase maestra para el anuncio individual */
.ad-unit {
    width: 100%;
    
    /* ANTES: height: 40rem;  <-- ESTO ERA EL PROBLEMA (Fijo) */
    /* AHORA: Se adapta al contenido */
    height: auto; 
    min-height: 250px; /* Altura mínima para que no colapse si tarda en cargar */
    
    background-color: var(--negro);
    border-radius: 1rem;
    box-shadow: 0px 2px 15px 0px var(--rojo);
    border: 1px solid #333;
    
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    
    /* CENTRADO FLEXIBLE (Para que el banner de 160px quede al centro de tu columna de 190px) */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ESTILO DE LA IMAGEN DENTRO DEL ANUNCIO */
.ad-unit img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esto hace que se comporte igual que background-size: cover */
    display: block;
}

.ad-unit:hover {
    box-shadow: 0px 5px 20px 0px var(--rojo);
}

/* Etiqueta pequeña */
.ad-label {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0,0,0,0.8);
    color: #888;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1000;
}

/* Botones para ir hacia adelanta y hacia atras */
.anteriorSiguiente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 11.68rem;
    margin: 2.5rem auto auto auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: var(--negro);
    border-radius: 1rem;
}

.anteriorSiguiente .anterior {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    background-color: var(--rojo);
    cursor: pointer;
}

.anteriorSiguiente .pagina {
    color: var(--blanco);
    text-align: center;
    cursor: pointer;
}

.anteriorSiguiente .siguiente {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    background-color: var(--rojo);
    cursor: pointer;
}

.anteriorSiguiente .anterior:hover {
    background-color: var(--rosa);
}

.anteriorSiguiente .siguiente:hover {
    background-color: var(--rosa);
}

/*Boton de volver al inicio*/
.volverBoton {
    max-width: 11.68rem;
    margin: 2.5rem auto auto auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: var(--morado);
    border-radius: 1rem;
    text-align: center;
    cursor: pointer;
}

.volverBoton a {
    text-decoration: none;
    color: var(--blanco);
    font-size: 1.4rem;
}

.volverBoton:hover {
    background-color: var(--rosa);
}

.linea_footer {
    margin: auto;
    width: 130rem;
    height: .1rem;
    background-color: var(--morado);
    margin-top: 2rem;
}

/*Caracteristicas del footer*/
.contenedorFooter {
    height: 27rem;
    padding: 2rem;
    margin-top: 1rem;
    display: flex;
    justify-content: left;
    text-align: left;
    font-size: 1.5rem;
    color: var(--blanco);
    border-bottom: 1rem solid transparent;
    border-bottom-color: var(--rojo);
    background-image: linear-gradient(to bottom, var(--negro) 35%, var(--rojo));
}

.contenedorFooter div {
    padding: 2rem 2rem 2rem 5rem;
}

.contenedorFooter .ayudaFooter {
    padding-left: 15rem;
}

.contenedorFooter div a {
    color: var(--gris-claro);
    display: block;
    text-align: left;
    text-decoration: none;
    padding: .3rem;
}

.contenedorFooter div a:hover {
    text-decoration-line: underline;
}

.contenedorFooter .frase {
    padding-left: 60rem;
    padding-top: 16rem;
}

.contenedorFooter .frase a{
    font-style: italic;
    color: var(--negro);
}

.contenedorFooter .frase a:hover{
    text-decoration: none;
}


.contenedorFooter .redesSociales svg {
    object-fit: contain; /* Asegura que el SVG no se deforme ni se recorte */
    overflow: visible; /* Asegura que el SVG no se recorte por su propio bounding box */
    display: block; /* Evita espacios innecesarios */
    margin: .1rem;
}

.contenedorFooter .redesSociales svg:hover {
    stroke: var(--morado);
}

/* ===== ESTILOS TOAST ===== */
.toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 15px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s, transform 0.3s;
    max-width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.toast.success {
    background-color: #28a745;
    border-left: 4px solid #218838;
}

.toast.error {
    background-color: #dc3545;
    border-left: 4px solid #c82333;
}

.toast.warning {
    background-color: #ffc107;
    color: #212529;
    border-left: 4px solid #e0a800;
}

/* Asegurar que el toast esté por encima de los modales */
.modal {
    z-index: 9999; /* Los modales por debajo del toast */
}

.toast {
    z-index: 10000; /* Toast por encima de todo */
}

/* contenido legal del footer */
.legal {
    width: auto;
    background-color: var(--rojo);
    text-align: center;
    padding: 1rem;
}

.legal a {
    text-decoration: none;
    padding-inline: 1.5rem;
    color: var(--blanco);
}

.legal a:hover {
    text-decoration-line: underline;
}

/*visor en pantalla grande*/
.visor {
position: fixed;
z-index: 10000; /* Asegura estar encima de todo */
left: 0; 
top: 0;
width: 100%; 
height: 100%;
background-color: rgba(0,0,0,0.95); /* Fondo casi negro */
display: none;
justify-content: center;
align-items: center;
backdrop-filter: blur(8px); /* Efecto de desenfoque elegante */
animation: fadeInVisor 0.3s ease;
}

.visor.activo { 
display: flex; 
}

.visor img {
max-width: 90%;
max-height: 85%;
border-radius: 8px;
box-shadow: 0 0 50px rgba(100, 0, 182, 0.2); /* Resplandor morado sutil */
border: 1px solid #333;
object-fit: contain;
transition: transform 0.1s ease-out; /* Esto hace el zoom fluido */
transform-origin: center center;     /* El zoom se hace hacia el centro */
}

.visor .cerrar {
position: absolute; 
top: 20px; 
right: 30px;
font-size: 45px; 
color: #888; 
cursor: pointer; 
transition: 0.3s;
line-height: 1;
z-index: 10001;
}

.visor .cerrar:hover { 
color: var(--rojo); 
transform: scale(1.1); 
}

.visor .anterior, .visor .siguiente {
cursor: pointer; 
position: absolute; 
top: 50%;
padding: 20px; 
color: #888; 
font-weight: bold; 
font-size: 50px;
transition: 0.3s; 
user-select: none; 
transform: translateY(-50%);
z-index: 10001;
}

.visor .anterior { 
left: 20px; 
}

.visor .siguiente { 
right: 20px; 
}

.visor .anterior:hover, .visor .siguiente:hover { 
color: var(--morado); 
transform: translateY(-50%) scale(1.2); 
}

@keyframes fadeInVisor {
from { opacity: 0; }
to { opacity: 1; }
}


/* Estilos para modales */
.modal {
    display: none;
    position: fixed;
    z-index: 1000; /* Asegura que esté encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(2px);
    animation: fadeIn 0.3s ease;
}

.modal-contenido {
    background-color: var(--negro); /* Fondo oscuro elegante */
    border: 1px solid var(--morado);
    margin: auto;
    padding: 3rem;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 0 25px rgba(100, 0, 182, 0.4);
    position: relative;
    animation: slideIn 0.3s ease;
    color: var(--blanco);
    text-align: center;
}

/* Animaciones que faltaban */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.cerrar-modal {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    transition: 0.3s;
}
.cerrar-modal:hover { color: var(--rojo); }

.modal-titulo {
    color: var(--morado);
    font-size: 2.4rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #333;
    padding-bottom: 1rem;
}

/* Asegura que cuando JS ponga style="display:block", se vea */
.modal[style*="display: block"] {
    display: flex !important; /* O flex/block según prefieras */
    align-items: center;
    justify-content: center;
}

/* === Estilos para modal de reportes === */
#modalReporte .modal-contenido {
  max-width: 600px;
  padding: 2rem;
  border-radius: 10px;
  background: var(--negro);
  color: #333;
  text-align: center;
}

#modalReporte h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  font-weight: bold;
  color: var(--morado);
}

#modalReporte textarea {
  width: 100%;
  min-height: 120px;
  padding: 1rem;
  background-color: #222;
  color: white;
  border: 1px solid #444;
  border-radius: 6px;
  font-size: 1.4rem;
  resize: vertical;
  outline: none;
  transition: border 0.2s;
}

#modalReporte textarea:focus {
  border-color: var(--rosa, --morado);
  box-shadow: 0 0 5px rgba(157, 24, 245, 0.5);
}

#modalReporte button {
  margin-top: 1.2rem;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 6px;
  background: var(--morado, --rosa);
  color: var(--blanco);
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

#modalReporte button:hover {
  background: var(--rosa);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Para el footer legal */
.legal a {
    cursor: pointer;
    transition: color 0.3s;
}

/* === VERIFICACIÓN DE EDAD === */
.modal-edad-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000; /* Fondo sólido para tapar el contenido */
    z-index: 99999; /* Por encima de TODO, incluso del Toast */
    display: none; /* Se activa con JS */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px); /* Efecto elegante si el fondo tuviera transparencia */
}

.modal-edad-contenido {
    background-color: var(--negro);
    border: 1px solid var(--rojo); /* Borde rojo de advertencia */
    padding: 3rem;
    width: 90%;
    max-width: 500px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 30px rgba(127, 14, 27, 0.4); /* Resplandor rojo */
    animation: fadeIn 0.5s ease;
}

.icono-advertencia {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.modal-edad-contenido h2 {
    color: var(--rojo);
    font-family: 'Inter', sans-serif;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.texto-legal-edad p {
    color: var(--blanco);
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: #cccccc;
}

.botones-edad {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 2.5rem;
}

.btn-aceptar {
    background-color: var(--morado);
    color: white;
    border: none;
    padding: 1.2rem 2rem;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1.4rem;
}

.btn-aceptar:hover {
    background-color: var(--rosa);
    transform: scale(1.05);
}

.btn-rechazar {
    background-color: transparent;
    color: #666;
    border: 1px solid #444;
    padding: 1.2rem 2rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1.4rem;
}

.btn-rechazar:hover {
    border-color: var(--blanco);
    color: var(--blanco);
}

/* --- BOTÓN LIKE UNIFICADO --- */
.btn-like {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s; /* Quitamos 'all' para no chocar con animaciones */
    z-index: 10;
    color: #ccc;
    padding: 0;

    /* Estado Inicial: Invisible */
    opacity: 0; 
    transform: scale(0);

    /* Animación de entrada (IGUAL PARA TODOS) */
    animation: entradaTriunfal 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 0.8s; 
}

.btn-like:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Estado Activo (Rojo) */
/* QUITAMOS LOS !IMPORTANT DE AQUÍ PARA QUE RESPETE EL DELAY */
.btn-like.activo {
    color: #ff0055;
    border-color: #ff0055;
    background: rgba(255, 0, 85, 0.1);
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.6);
}

/* Clase Latido (Click) */
.btn-like.latido {
    /* Al dar click, cambiamos la animación de entrada por la de latido */
    animation: like-pulse 0.4s ease-in-out;

    /* IMPORTANTE: Aseguramos que sea visible mientras late */
    opacity: 1; 
    transform: scale(1);
}

@keyframes entradaTriunfal {
    to { opacity: 1; transform: scale(1); }
}

@keyframes like-pulse { 
    0% { transform: scale(1); opacity: 1; } 
    50% { transform: scale(1.4); opacity: 1; } 
    100% { transform: scale(1); opacity: 1; } 
}



/*Medias queries para normalizar la navegacion web en diferentes dispositivos*/
/* --- MEDIA QUERY: DISPOSITIVOS MÓVILES (Celulares y Tablets) --- */
@media screen and (max-width: 950px) {

    html {
        font-size: 50%; /* Reduce base a 8px */
    }

    body {
        position: relative;
        z-index: 0;
    }


    /* BLINDAJE DEL HEADER: Asegura que todo el menú esté encima del contenido */
    .navPrincipal-bg {
        position: relative !important; 
        z-index: 5000 !important;
        
        /* 1. Evita que el header se convierta en una jaula para el menú fixed */
        transform: none !important; 
        perspective: none !important;
        filter: none !important;
        
        /* 2. Permite que el menú se salga de los bordes del header */
        overflow: visible !important; 
    }

    /* 1. NAVEGACIÓN PRINCIPAL (Header) */
    .navPrincipal-bg .contenedorPrincipal {
        margin: 0 1rem;
        padding: 1rem 2.5rem;
        height: auto;
        /* Flex wrap permite que el logo quede arriba y la búsqueda baje si es necesario */
        flex-wrap: wrap; 
        overflow: visible !important; 
        z-index: 5001 !important;
        position: relative !important;
        transform: none !important;
    }
    
    /* Logo más visible y centrado o a la izquierda */
    .navPrincipal-bg .navegacionPrincipal div.logo a {
        font-size: 2.2rem;
        margin-left: 0; /* Quitar margen gigante de escritorio */
        padding: 0.5rem;
    }

    /* Barra de búsqueda: Ocupa casi todo el ancho */
    .navPrincipal-bg .navegacionPrincipal div.busqueda {
        order: 3; /* La bajamos si no cabe */
        margin-left: 0;
        width: 100%; /* Full width en móvil */
        margin-top: 1rem;
        justify-content: center;
    }

    .navPrincipal-bg .navegacionPrincipal div.busqueda input[type="text"] {
        width: 85%; /* Espacio para el botón */
        font-size: 1.6rem;
        padding: 0.5rem;
    }

    .navPrincipal-bg .navegacionPrincipal .menu .menu-desplegable {
        font-size: 1.6rem;
        margin: 0.5rem;
    }

    /* 2. NAVEGACIÓN SECUNDARIA (SCROLL HORIZONTAL) */
    .navSecundaria-bg {
        overflow-x: auto; /* Permite scroll horizontal */
        overflow-y: hidden;
        white-space: nowrap; /* Evita que los items bajen de línea */
        -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
        
        /* Ocultar barra de scroll fea pero mantener funcionalidad */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */

        position: relative !important;
        z-index: 4999 !important;
    }
    
    .navSecundaria-bg::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .navSecundaria-bg .contenedorSecundario {
        width: auto; /* Deja que crezca */
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Alinear a la izquierda */
        padding: 0 1rem;
        gap: 1rem; /* Espacio entre botones */
    }

    /* Ajuste de los enlaces del menú secundario */
    .navSecundaria-bg .navegacionSecundaria {
        display: flex;
        width: auto;
    }

    .navSecundaria-bg .navegacionSecundaria a,
    .btn-categorias {
        flex-shrink: 0; /* Evita que se aplasten */
    }

    /* --- INICIO DEL PARCHE PARA IPHONE (Solo afecta a la galería) --- */

    .masonry-columna {
        display: contents !important;
    }

    /* 2. GRID NATIVO (Sólido como una roca en iOS) */
    .seccion {
        display: grid !important;
        grid-template-columns: 1fr 1fr; /* 50% y 50% */
        gap: 10px;
        align-items: start; /* Alinea arriba para que no se estiren */
        width: 100%;
        padding: 5px;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Como ya no existen las 'masonry-columna' en el HTML móvil, 
       las fotos caerán directo aquí y el grid las acomodará. */
       
    .publicacion {
        margin: 0 !important;
        width: 100% !important;
        /* Estilos de estabilidad */
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        animation: none !important;
        background-color: var(--negro);
        border: 1px solid #333;
        z-index: 0 !important;
    }
    
    .publicacion img {
        background-color: transparent !important;
        min-height: 150px; /* Evita saltos */
        width: 100%;
        height: auto;
    }
    
    /* --- MENÚ CATEGORÍAS MÓVIL (CORREGIDO) --- */
    
    .categorias-wrapper {
        position: static; 
    }

    /* DENTRO DEL MEDIA QUERY (MÓVIL) */

    .dropdown-moderno {
        top: 155px !important; 
        left: 5% !important;
        width: 90% !important;
        margin-left: 0; 
        
        /* --- AQUÍ ACTIVAMOS EL SCROLL SOLO PARA MÓVIL --- */
        max-height: 320px !important; /* Altura para aprox 4 filas */
        overflow-y: auto !important;    /* Scroll activado */
        
        transform: translateZ(1000px) !important; 
    }

    .grid-categorias {
        /* EN MÓVIL CAMBIAMOS EL FLUJO PARA QUE EL SCROLL FUNCIONE */
        display: grid !important;
        grid-auto-flow: row !important; /* Llenar de lado a lado y bajar */
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas */
        grid-template-rows: auto !important; /* Filas infinitas */
        
        row-gap: 10px !important;
        column-gap: 10px !important;
        padding-bottom: 20px; /* Espacio final */
    }
    
    .dropdown-moderno.activo {
        /* Mantenemos el truco 3D al abrir */
        transform: translateZ(1000px) !important;
        -webkit-transform: translateZ(1000px) !important;
    }

    /* === ESTILOS DEL SCROLLBAR OSCURO === */
    .dropdown-moderno::-webkit-scrollbar {
        width: 3px; /* Ancho de la barra */
    }
    
    .dropdown-moderno::-webkit-scrollbar-track {
        background: #111; /* Fondo del riel (casi negro) */
    }
    
    .dropdown-moderno::-webkit-scrollbar-thumb {
        background: transparent; /* Color de la barra (gris oscuro) */
        border-radius: 3px;
    }
    
    .dropdown-moderno::-webkit-scrollbar-thumb:hover {
        background: #666; /* Un poco más claro al tocar */
    }

    /* DESACTIVAR HOVER (Para que no parpadee al tocar) */
    .categorias-wrapper:hover .dropdown-moderno {
        opacity: 0;
        visibility: hidden;
    }
    /* Excepción: Si tiene la clase .activo, se muestra sí o sí */
    .categorias-wrapper:hover .dropdown-moderno.activo {
        opacity: 1;
        visibility: visible;
    }

    /* Dentro de @media screen and (max-width: 950px) */
    
    .grid-categorias a {
        /* 1. FLEXBOX (Centrado total) */
        display: flex !important;
        align-items: center;
        justify-content: center;
        
        /* 2. REINICIO DE RESTRICCIONES (Clave para arreglar el corte) */
        white-space: normal !important;  /* Permite 2 o más líneas */
        overflow: visible !important;    /* Deja ver todo el texto */
        text-overflow: clip !important;  /* Quita los puntos suspensivos (...) */
        height: auto !important;         /* Deja que el botón crezca lo necesario */
        min-height: 60px;                /* Altura mínima para botones de 1 línea */
        
        /* 3. ESPACIADO */
        padding: 8px 5px;                /* Espacio interno para que no toque bordes */
        margin: 0;
        
        /* 4. TEXTO */
        font-size: 1.3rem;
        line-height: 1.2;                /* Interlineado ajustado */
        text-align: center !important;
        color: #ccc;
        
        /* 5. VISUAL */
        background-color: rgba(255,255,255,0.08); 
        border-radius: 8px;
        text-decoration: none;
        
        /* Asegura que ocupe toda la celda del grid */
        width: 100%; 
    }
    
    /* Ocultar triángulo decorativo en móvil */
    .dropdown-moderno::before { display: none; }
    

    /* 3. CUERPO Y PUBLICIDAD */
    .cuerpo {
        display: block; /* Quitar flex para que no busque columnas laterales */
        padding: 0 1rem;
        position: relative !important;
        z-index: 1 !important; /* Bajamos el cuerpo al mínimo */
    }

    /* Ocultar publicidad lateral en móvil (ocupa mucho espacio) */
    .cuerpo .LPublicidad, 
    .cuerpo .RPublicidad {
        display: none !important;
    }

    /* 4. GALERÍA DE IMÁGENES (MASONRY) */
    .cuerpo .Pcontenedor {
        margin: 1rem auto;
        width: 100%;
    }

    .visor {
        z-index: 999999 !important; /* Más alto que todo lo demás */
    }

    .visor img {
        /* Ajuste para que la imagen del visor no se corte en celular */
        max-height: 80vh !important;
        max-width: 95vw !important;
        object-fit: contain !important;
        background-color: transparent !important;
    }
    
    .visor .cerrar {
        top: 10px;
        right: 20px;
        font-size: 35px;
    }

    /* 6. FOOTER Y LEGALES */
    .contenedorFooter {
        flex-direction: column; /* Apilar verticalmente */
        height: auto;
        padding: 2rem 1rem;
        text-align: center;
    }

    .contenedorFooter div, 
    .contenedorFooter .ayudaFooter, 
    .contenedorFooter .redesSociales,
    .contenedorFooter .frase {
        padding: 1rem 0;
        padding-left: 0 !important; /* Forzar quitado de padding izquierdo */
        text-align: center;
    }

    .contenedorFooter .frase {
        padding-top: 2rem;
    }

    .linea_footer {
        width: 90%;
    }

    .legal {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding-bottom: 3rem; /* Espacio para scroll */
    }

    /* SOLUCIÓN: Espacio extra al final del scroll */
    .grid-categorias::after {
        content: "";
        display: block;
        height: 20px; /* Altura del espacio extra abajo */
        grid-column: 1 / -1; /* Ocupa todo el ancho */
    }

}