/* Página pública de la murga — publica/index.php REGLA DURA (patrón Splash): todo el color/tipografía sale de las variables que inyecta el desde private/temas.php. Acá NO va ningún color hardcodeado de marca: solo var(--brand), var(--fondo), etc. */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Utilidad: la pública no carga im.css, así que .oculto se define acá. Sin esto el lightbox (display:flex) nunca se ocultaba y tapaba la página. */ .oculto { display: none !important; } html { scroll-behavior: smooth; } body { font-family: var(--ff-body); background: var(--fondo); color: var(--texto); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* nunca scroll horizontal (el título/logo grande no debe empujar el ancho) */ } .pp-container { max-width: 960px; margin: 0 auto; padding: 0 24px; } /* ---- Nav ---- */ .pp-nav { position: sticky; top: 0; z-index: 10; background: var(--fondo); /* fallback sin color-mix */ background: color-mix(in srgb, var(--fondo) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--card-borde); } .pp-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; } .pp-marca { display: flex; align-items: center; gap: 10px; min-width: 0; } .pp-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 10px; } .pp-marca-nombre { font-family: var(--ff-display); font-weight: 800; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Botón de acceso a la gestión: visible y minimalista en la barra (reemplaza a la flecha desplegable; ya no hay que abrir nada). */ /* Solo ícono: chico y minimalista, con el color de marca (--brand resuelve al color propio del conjunto si se eligió uno en Apariencia, o al del tema). */ .pp-ingresar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--brand-mid); background: var(--brand-soft); color: var(--brand); text-decoration: none; transition: border-color 0.2s, transform 0.15s ease, filter 0.2s ease; } .pp-ingresar:hover { border-color: var(--brand); transform: translateY(-1px); filter: brightness(1.05); } .pp-ingresar svg { color: var(--brand); flex-shrink: 0; } /* Aviso de transición: barra full-width bajo la barra de navegación, cerrable. */ .pp-aviso { position: relative; padding: 11px 46px; text-align: center; font-size: 0.86rem; line-height: 1.4; color: var(--texto); background: var(--brand-soft); border-bottom: 1px solid var(--brand-mid); } .pp-aviso-txt strong { color: var(--brand); font-weight: 700; } .pp-aviso-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: none; border: none; cursor: pointer; color: var(--texto-suave); border-radius: 50%; transition: color 0.2s, background 0.2s; } .pp-aviso-x:hover { color: var(--texto); background: rgba(128,128,128,.18); } /* ---- Hero ---- */ .pp-hero { position: relative; overflow: hidden; background: linear-gradient(170deg, var(--brand-soft) 0%, var(--fondo) 65%); } /* Carrusel de portada: capas absolutas detrás del velo; la imagen de cada slide la inyecta el con nonce (.pp-slide-N). Con una sola foto queda una capa fija. */ .pp-slides { position: absolute; inset: 0; } .pp-slide { position: absolute; inset: 0; background-size: cover; /* El encuadre (background-position-x:50% + background-position-y por slide, escritorio y móvil) lo define el