html { scroll-behavior: smooth; }
::selection { background: var(--c4); color: var(--c1); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c1); }
::-webkit-scrollbar-thumb { background: var(--c3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--c4); }
.glass {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
}
.hero-overlay {
background: linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.95) 100%);
}
/* Galería tipo masonry con CSS columns */
.masonry {
column-count: 1;
column-gap: 1rem;
}
@media (min-width: 640px) { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }
.masonry > * {
break-inside: avoid;
margin-bottom: 1rem;
}
.foto-tile {
position: relative;
overflow: hidden;
cursor: zoom-in;
}
.foto-tile img {
transition: transform .6s ease;
display: block;
width: 100%;
}
.foto-tile:hover img {
transform: scale(1.05);
}
/* Lightbox */
#lightbox {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(5,5,5,.96);
display: none;
align-items: center;
justify-content: center;
}
#lightbox.abierto { display: flex; }
#lightbox img { max-height: 88vh; max-width: 90vw; object-fit: contain; }
#lightbox .lb-nav {
position: absolute;
top: 50%; transform: translateY(-50%);
font-size: 2.5rem; color: #fff; opacity: .7; cursor: pointer; padding: 1rem;
}
#lightbox .lb-nav:hover { opacity: 1; }
/* Dropzone de subida en el admin */
.dropzone {
border: 2px dashed rgba(255,255,255,.25);
transition: border-color .2s, background-color .2s;
}
.dropzone.dragover {
border-color: var(--c4);
background: rgba(201,162,75,.08);
}
.progress-bar-fill {
transition: width .2s ease;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ============================================================
Movimiento: Ken Burns, scroll-reveal, glow dorado, subrayado
animado y grano de película. Todo lo automático respeta
prefers-reduced-motion; el reveal además depende de html.js-ready
(agregado por un script inline en ) para que si JavaScript
no carga, el contenido se vea de inmediato en vez de quedar oculto.
============================================================ */
/* Ken Burns: zoom lento y continuo en la foto de fondo del hero */
@media (prefers-reduced-motion: no-preference) {
.kenburns {
animation: kenburns 24s ease-in-out infinite alternate;
will-change: transform;
}
}
@keyframes kenburns {
from { transform: scale(1); }
to { transform: scale(1.09); }
}
/* Revelado al hacer scroll */
.reveal { opacity: 1; transform: none; }
html.js-ready .reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
html.js-ready .reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
transition-delay: calc(var(--i, 0) * 90ms);
}
html.js-ready .reveal-left { transform: translateX(-32px); }
html.js-ready .reveal-right { transform: translateX(32px); }
html.js-ready .reveal.is-visible {
opacity: 1;
transform: none;
}
}
/* Resplandor dorado en botones/CTAs principales */
.btn-glow {
transition: box-shadow .35s ease, transform .35s ease;
}
.btn-glow:hover, .btn-glow:focus-visible {
box-shadow: 0 0 30px -4px rgba(201,162,75,.55);
transform: translateY(-2px);
}
/* Línea dorada que se "dibuja" bajo los títulos al aparecer */
.title-underline {
position: relative;
display: inline-block;
}
.title-underline::after {
content: '';
position: absolute;
left: 0; bottom: -10px;
height: 2px;
width: 56px;
background: var(--c4, #c9a24b);
}
@media (prefers-reduced-motion: no-preference) {
html.js-ready .title-underline::after {
width: 0;
transition: width 1s cubic-bezier(.2,.7,.2,1) .2s;
}
html.js-ready .reveal.is-visible .title-underline::after {
width: 56px;
}
}
/* Anillo de pulso sutil detrás del botón flotante de WhatsApp */
.pulso-glow { position: relative; }
.pulso-glow::before {
content: '';
position: absolute; inset: 0;
border-radius: 999px;
background: inherit;
z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
.pulso-glow::before {
animation: pulso 2.6s ease-out infinite;
}
}
@keyframes pulso {
0% { opacity: .55; transform: scale(1); }
100% { opacity: 0; transform: scale(1.9); }
}
/* Grano fino sobre todo el sitio, look de foto/película análoga */
.grano-overlay {
position: fixed;
inset: 0;
z-index: 60;
pointer-events: none;
opacity: .045;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 180px 180px;
}