/* --------------------------------------------------
   styles.css — Paleta, utilidades y layout base
   Diseño: Apple-like, minimal, accesible.
   -------------------------------------------------- */

/* Paleta (variables principales) */
:root {
  --bg: #fbfbfc;              /* fondo claro */
  --surface: #ffffff;         /* tarjetas / superficies */
  --muted: #f2f4f7;           /* superficies apagadas */
  --text: #0b1220;            /* texto principal */
  --muted-text: #5b6470;      /* texto secundario */
  --accent: rgba(26,157,219,1); /* tu celeste */
  --accent-soft: rgba(26,157,219,0.12);
  --glass: rgba(255,255,255,0.6);

  --radius: 14px;
  --shadow-1: 0 6px 18px rgba(11,18,32,0.06);
  --shadow-2: 0 18px 40px rgba(11,18,32,0.08);
  --max-width: 1200px;
  --space: 1rem;
}

/* Dark theme */
.theme-dark {
  --bg: #0b0f14;
  --surface: #0f151b;
  --muted: #0b1116;
  --text: #e6eef6;
  --muted-text: #98a6b3;
  --accent-soft: rgba(26,157,219,0.08);
}

/* Reset base */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

/* Accessibility helpers */
.sr-only {
  border:0 !important;
  clip:rect(1px,1px,1px,1px) !important;
  height:1px !important; width:1px !important;
  overflow:hidden; padding:0 !important; position:absolute !important; white-space:nowrap !important;
}
.visually-hidden { display:none !important; }

/* Container */
.container {
  width: min(92%, var(--max-width));
  margin: 0 auto;
}

/* Header (keeps your provided structure) */
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
  backdrop-filter: blur(6px);
  position: sticky;
  top:0;
  z-index: 2000;
}
.logo-anclaje { color: var(--accent); font-weight:700; font-size:1.4rem; text-decoration:none; letter-spacing:0.2px; }
.logo-header { width:2.7rem; height:auto; border-radius:8px; }

/* Nav links: keep minimal */
.nav-links { list-style:none; display:flex; gap:1.8rem; align-items:center; margin:0; padding:0; }
.nav-links a { color:var(--text); text-decoration:none; font-weight:500; }
.menu-toggle { display:none; background:none; border:0; font-size:1.5rem; cursor:pointer; }

/* Hero compact */
.hero-section { padding:2.25rem 1.25rem; display:flex; gap:1.75rem; align-items:center; justify-content:space-between; max-width: var(--max-width); margin:0 auto; }
.hero-compact .hero-text { flex:1; }
.hero-compact .hero-image { flex:0 0 240px; }
.hero-title { font-size:1.8rem; color:var(--accent); margin:0 0 0.6rem; font-weight:600; }
.hero-subtitle { color:var(--muted-text); margin-bottom:0.6rem; }
.hero-lead { color:var(--muted-text); margin-top:0.35rem; }

/* Controls section */
.controls { padding: 1rem; background: transparent; max-width:var(--max-width); margin:0 auto; }
.controls-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.view-info { color:var(--muted-text); font-size:0.95rem; }

/* Controls actions */
.controls-actions { display:flex; gap:0.75rem; align-items:center; }
#filter-select { padding:0.5rem 0.6rem; border-radius:10px; border:1px solid rgba(11,18,32,0.06); background:var(--surface); }
#toggle-theme { padding:0.45rem 0.6rem; border-radius:10px; border:0; cursor:pointer; background:var(--surface); box-shadow:var(--shadow-1); }

/* Gallery Masonry (simple columns) */
.gallery-section { padding:1rem; max-width:var(--max-width); margin:0 auto 2rem; }
.masonry { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; align-items:start; }

/* Card */
.card {
  background: var(--surface);
  border-radius: calc(var(--radius) - 4px);
  overflow:hidden;
  box-shadow: var(--shadow-1);
  transition: transform 220ms ease, box-shadow 220ms ease;
  cursor: pointer;
  display:flex;
  flex-direction:column;
}
.card:focus-within,
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); outline: none; }

/* Card image (responsive) */
.card img { width:100%; height:auto; display:block; object-fit:cover; aspect-ratio: 4/3; }

/* Card meta */
.card-meta { padding:0.65rem 0.85rem; display:flex; justify-content:space-between; align-items:center; gap:0.5rem; }
.card-title { font-size:0.95rem; color:var(--text); }
.card-sub { font-size:0.82rem; color:var(--muted-text); }

/* Empty note */
.empty-note { text-align:center; padding:1.25rem; color:var(--muted-text); background:var(--muted); border-radius:12px; }







/* LIGHTBOX */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: rgba(0,0,0,0.65);
  z-index: 3000;
  padding: 1.5rem;
  backdrop-filter: blur(4px);
}

.lightbox.active {
  display: flex;
}

/* CONTENIDO */
.lb-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(90%, 900px);
  max-height: 80vh;
  gap: 0.8rem;
}

/* IMAGEN PRINCIPAL */
.lb-content img {
  max-width: 100%;
  max-height: 65vh;       /* Evita que ocupe todo */
  width: auto;
  height: auto;
  object-fit: contain;    /* Respeta aspecto */
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* CAPTION */
#lb-caption {
  color: #e5e5e5;
  font-size: 0.95rem;
  text-align: center;
  max-width: 90%;
}

/* BOTONES (DESKTOP) */
.lb-close,
.lb-nav {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  padding: 0.65rem 1rem;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: 0.25s;
  font-size: 1rem;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

.lb-close:hover,
.lb-nav:hover {
  background: rgba(255,255,255,0.25);
}

/* Ubicación desktop */
.lb-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}

/* Botones laterales desktop */
#lb-prev { margin-right: 1rem; }
#lb-next { margin-left: 1rem; }

/* ----------------------------- */
/* RESPONSIVE PARA CELULARES */
/* ----------------------------- */

@media (max-width: 680px) {

  .lightbox {
    padding: 0.8rem;
  }

  .lb-content {
    max-height: 70vh;
  }

  .lb-content img {
    max-height: 55vh;     /* Deja espacio abajo */
  }

  /* Botonera abajo */
  .lb-nav,
  .lb-close {
    position: static !important;
    width: auto;
    margin: 0.3rem;
  }

  /* Contenedor de botones en fila */
  .lightbox-controls {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 0.8rem;
    flex-wrap: wrap;
  }

  #lb-caption {
    margin-bottom: 0.5rem;
  }
}


/* Ocultar botones móviles por defecto (solo aparecen en móvil) */
.lightbox-controls {
  display: none;
}

/* En móvil ocultar botones PC y mostrar botones móviles */
@media (max-width: 680px) {

  /* Mostrar botones móviles */
  .lightbox-controls {
    display: flex;
  }

  /* Ocultar botones PC */
  #lb-prev,
  #lb-next,
  #lb-close {
    display: none !important;
  }
}











/* Footer */
.derechos { padding:1rem; text-align:center; color:var(--muted-text); }

/* Focus visible for keyboard users */
:focus { outline: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: 2px; border-radius:8px; }

/* Responsive tweaks */
@media (max-width: 900px) {
  .hero-section { flex-direction:column; text-align:center; gap:0.8rem; }
  .hero-compact .hero-image { order: -1; width:100%; }
  .nav-links { display:none; }
  .menu-toggle { display:block; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}