/* Base reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background-color: #f4f3ef;
  color: #000;
  font-family: 'Barlow', sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
}

/* Elevar contenido por encima de los canvas de fondo */
header, section, footer {
  position: relative;
  z-index: 2; /* por encima de .grain-bg (0) y .ink-bg (1) */
}

/* Film Grain (estático) */
.grain-bg {
  position: fixed;
  inset: 0;
  z-index: 0;                 /* fondo */
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: soft-light; /* overlay/multiply/soft-light según gusto */
}

/* Ink trail encima del grano, pero debajo del contenido */
.ink-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: transparent;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .ink-bg { filter: grayscale(20%); }
}

/* FLOATING PANEL */
.top-floating-panel {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 60px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  z-index: 999;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}

/* BANNER MARQUEE */
.banner {
  position: relative; width: 100%;
  aspect-ratio: 4 / 1; overflow: hidden;
  min-height: 180px; margin-top: 60px;
}

.marquee {
  /* la imagen ocupa el alto de cada fila */
  background-image: url('ivonne-spectreb.png');
  background-repeat: repeat-x;
  background-position-y: center;
  background-size: auto 100%;
  position: absolute; width: 100%; height: 33.333%;

  /* animación controlada por variables */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--duration, 12s);
  will-change: background-position;
}

.row1 { top: 0;        animation-name: marquee; }
.row2 { top: 33.333%;  animation-name: marquee-reverse; }
.row3 { top: 66.666%;  animation-name: marquee; }

/* Nos movemos exactamente el ancho del tile real */
@keyframes marquee {
  to { background-position-x: calc(-1 * var(--tile, 600px)); }
}
@keyframes marquee-reverse {
  to { background-position-x: var(--tile, 600px); }
}

/* Respeto a reduce motion */
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none !important; }
}

/* HERO */
.hero { margin-top: 50px; text-align: center; padding: 2rem 1rem; }
.subtitle {
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1rem;
  color: #222; text-shadow: 0 0 4px rgba(0,0,0,0.1); margin-bottom: 1.8rem;
}
.slogan {
  color: #111; font-size: 2rem; text-shadow: 0 0 4px rgba(0,0,0,0.12);
  margin-bottom: 1.5rem; font-weight: normal;
}
.buttons { margin-top: 2rem; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.btn {
  border: 1px solid #111; border-radius: 0; padding: 0.6rem 1.2rem;
  color: #111; text-decoration: none; transition: 0.3s; font-size: 0.95rem;
}
.btn:hover { background: #111; color: #f4f3ef; }

/* GALLERY */
.gallery { padding: 1rem; }

.gallery-container {
  max-width: 1200px; margin: 0 auto; padding: 0 1rem;
}

/* Rejilla: todos los cuadros parten del mismo tamaño base */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* base estable */
  gap: 0.7rem;
  padding-bottom: 4rem;
}

/* Cada obra: define el 1:1 y evita que el contenido afecte el layout */
.item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: visible;      /* permitir sombra exterior */
  isolation: isolate;     /* stacking limpio para ::after */
  z-index: 0;

  /* sin sombra por defecto */
  filter: none;
  transition: filter .25s ease;
}

/* Imagen / Video: ocupan 100% del cuadro, no alteran el flujo */
.item > img,
.item > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* rellena el 1:1 sin deformar */
  display: block;
  z-index: 1;         /* debajo del overlay, encima de la textura */
  cursor: zoom-in;
}

/* Sombra exterior SOLO al hover/focus/touch */
.item:hover,
.item:focus-within,
.item.touch-show {
  filter:
    drop-shadow(0 24px 42px rgba(0,0,0,.28))
    drop-shadow(0 8px 18px rgba(0,0,0,.16));
}

/* Textura/acuarela exterior (aparece en hover/touch) */
.item::after {
  content: "";
  position: absolute;
  inset: -22px;               /* se sale del marco */
  border-radius: 14px;
  pointer-events: none;
  z-index: 0;                 /* detrás de img/video (z=1) y overlay (z=2) */
  background:
    radial-gradient(150px 100px at 20% 30%, rgba(0,0,0,0.20), rgba(0,0,0,0) 60%),
    radial-gradient(130px 90px  at 80% 65%, rgba(0,0,0,0.18), rgba(0,0,0,0) 65%),
    radial-gradient(180px 120px at 50% 100%, rgba(0,0,0,0.14), rgba(0,0,0,0) 60%);
  filter: blur(18px);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity .28s ease, transform .28s ease, filter .28s ease;
  mix-blend-mode: multiply;
}
.item:hover::after,
.item:focus-within::after,
.item.touch-show::after {
  opacity: 1;
  transform: scale(1.02);
  filter: blur(16px);
}

/* Overlay de cada obra (título + técnica) */
.overlay {
  pointer-events: none;           /* deja pasar los clics para el zoom */
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s ease;
  z-index: 2;                     /* encima de la imagen */
}
.item:hover .overlay,
.item:active .overlay,
.item:focus-within .overlay,
.item.touch-show .overlay { opacity: 1; }
.overlay span {
  color: #fff; text-align: center;
  padding: 0.5rem 1rem;
}

/* FULLSCREEN VIEWER */
#fullscreen-viewer {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.95);
  display: none; justify-content: center; align-items: center;
  z-index: 10000;
}
#fullscreen-viewer.visible { display: flex; }

#fullscreen-viewer img {
  max-width: 95vw; max-height: 95vh; width: auto; height: auto;
  transform: translate(0, 0) scale(1);
  transform-origin: center center;
  transition: transform 0.15s ease; will-change: transform;
  cursor: zoom-in;
}

#fullscreen-viewer video#fullscreen-video {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Botón cerrar del visor */
#fullscreen-viewer .close-viewer {
  position: absolute; top: 14px; right: 16px;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff;
  font-size: 22px; line-height: 42px; cursor: pointer; z-index: 10001;
}
#fullscreen-viewer .close-viewer:hover { background: rgba(255,255,255,0.22); }

body.no-scroll { overflow: hidden; }

/* Espaciado para footer fijo */
body::after { content: ''; display: block; height: 120px; }

/* FOOTER */
footer {
  text-align: center;
  padding: 0.9rem;
  font-size: 0.9rem;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.4); /* transparente */
  backdrop-filter: blur(6px);           /* mismo efecto que arriba */
  -webkit-backdrop-filter: blur(6px);   /* compatibilidad Safari */
  z-index: 999; /* encima de canvas */
}

footer a { color: #111; text-decoration: none; }

footer a.mail-link { text-decoration: underline; }


/* Brillo/sombra exterior para botones y links: SOLO al hover/focus/active */
a.btn {
  position: relative; z-index: 0;
  background: transparent;
  transition: filter .2s ease;
  filter: none; /* sin sombra por defecto */
}
a.btn:hover,
a.btn:focus-visible,
a.btn:active {
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.18));
}
a.btn::after {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 10px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(100px 60px at 30% 20%, rgba(0,0,0,0.16), rgba(0,0,0,0) 65%),
    radial-gradient(90px 55px  at 70% 80%, rgba(0,0,0,0.12), rgba(0,0,0,0) 60%);
  filter: blur(10px);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity .22s ease, transform .22s ease;
  mix-blend-mode: multiply;
}
a.btn:hover::after,
a.btn:focus-visible::after,
a.btn:active::after {
  opacity: 1;
  transform: scale(1.02);
}

.ink-bg { touch-action: none; }

/* ——— Responsive ——— */

/* Tablets grandes y portátiles pequeños */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

/* Tablets y móviles grandes */
@media (max-width: 768px) {
  .slogan { font-size: 1.5rem; padding: 0 1rem; }
  .subtitle { font-size: 0.9rem; }
  .buttons { flex-direction: column; gap: 0.6rem; }
  .btn { font-size: 0.9rem; padding: 0.5rem 1rem; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  footer { font-size: 0.75rem; padding: 0.6rem; }
}

/* Pantallas medianas y móviles en vertical */
@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .slogan { font-size: 1.2rem; padding: 0 0.5rem; }
  .subtitle { font-size: 0.8rem; letter-spacing: 0.05rem; }
  .buttons { gap: 0.5rem; }
  .btn { font-size: 0.85rem; padding: 0.4rem 0.8rem; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .overlay span { font-size: 0.8rem; padding: 0.3rem 0.6rem; }
  .gallery-container { padding: 0 0.75rem; }
  footer { font-size: 0.7rem; padding: 0.5rem; }
}