/* ============================================================
   PORTFOLIO FOTÓGRAFO — styles.css
   Estructura:
   1. Variables & Reset
   2. Tipografía base
   3. Navbar
   4. Hero
   5. Sección Sesiones (biblioteca)
   6. Vista interna de sesión (overlay)
   7. Visor de foto individual (lightbox)
   8. Sección Precios
   9. Sección Formulario de Reserva
   10. Sección Contacto
   11. Footer
   12. Panel Admin (overlay)
   13. Utilidades & Animaciones
   14. Responsive (mobile)
   ============================================================ */


/* ──────────────────────────────────────────────
   1. VARIABLES & RESET
   Define todos los colores, fuentes y tamaños
   en un solo lugar para editar fácilmente.
   ────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Paleta oscura */
  --bg:          #0D0D0D;   /* Fondo principal negro profundo */
  --bg-alt:      #161616;   /* Fondo alternativo, un tono más claro */
  --bg-card:     #1C1C1C;   /* Fondo de cards/paneles */
  --border:      #2E2E2E;   /* Color de bordes sutiles */
  --stone:       #6B6259;   /* Acento tierra/piedra cálido */
  --stone-lt:    #9E9285;   /* Versión más clara del acento */
  --text:        #E8E4DE;   /* Texto principal (crema suave, no blanco puro) */
  --text-mid:    #7A7570;   /* Texto secundario / metadatos */
  --text-dim:    #444;      /* Texto muy atenuado */
  --white:       #FFFFFF;

  /* Tipografía */
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Inter', sans-serif;

  /* Transición estándar */
  --trans: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}


/* ──────────────────────────────────────────────
   2. TIPOGRAFÍA BASE
   Clases reutilizables de texto usadas
   en múltiples secciones.
   ────────────────────────────────────────────── */

/* Etiqueta pequeña de sección (ej: "Portafolio", "Contacto") */
.section-label {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--stone-lt);
  margin-bottom: 48px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.section-label::after {
  content: '';
  flex: 1;
  max-width: 56px;
  height: 1px;
  background: var(--stone);
  opacity: 0.5;
}

/* Título principal de cada sección */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.12;
  color: var(--text);
  margin-bottom: 16px;
}

/* Subtítulo/descripción bajo el título */
.section-sub {
  font-size: 14px;
  color: var(--text-mid);
  font-weight: 300;
  max-width: 460px;
  line-height: 1.8;
  margin-bottom: 48px;
}


/* ──────────────────────────────────────────────
   3. NAVBAR
   Barra de navegación fija en la parte superior.
   Se oscurece al hacer scroll (.scrolled).
   ────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 56px;
  transition: background var(--trans), border-color var(--trans);
  border-bottom: 1px solid transparent;
}

/* Clase que se agrega via JS cuando el usuario hace scroll */
nav.scrolled {
  background: rgba(13, 13, 13, 0.94);
  backdrop-filter: blur(10px);
  border-color: var(--border);
}

/* Logo / nombre en la navbar */
.nav-logo {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}

/* Links de navegación */
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}
.nav-links a {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
  text-decoration: none;
  transition: color var(--trans);
}
.nav-links a:hover { color: var(--text); }

/* Botón "Admin" en la navbar — más discreto */
.nav-admin-btn {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--border);
  padding: 7px 14px;
  cursor: pointer;
  transition: all var(--trans);
}
.nav-admin-btn:hover { color: var(--text); border-color: var(--stone); }


/* ──────────────────────────────────────────────
   4. HERO
   Pantalla completa de bienvenida con
   nombre, descripción y CTA.
   ────────────────────────────────────────────── */
#hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 56px;
  position: relative;
  overflow: hidden;
}

/* Línea vertical decorativa a la derecha */
.hero-line {
  position: absolute;
  top: 0; right: 120px;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--stone) 30%, var(--stone) 70%, transparent);
  opacity: 0.18;
}

.hero-content { position: relative; z-index: 1; max-width: 700px; }

.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-lt);
  margin-bottom: 28px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 108px);
  font-weight: 300;
  line-height: 0.95;
  color: var(--text);
  margin-bottom: 36px;
}
.hero-title em {
  font-style: italic;
  color: var(--stone-lt);
}

.hero-sub {
  font-size: 14px;
  color: var(--text-mid);
  font-weight: 300;
  letter-spacing: 0.03em;
  margin-bottom: 52px;
  max-width: 380px;
  line-height: 1.9;
}

/* Botón principal del hero */
.hero-cta {
  display: inline-block;
  padding: 15px 40px;
  border: 1px solid var(--stone);
  color: var(--text);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all var(--trans);
}
.hero-cta:hover {
  background: var(--stone);
  color: var(--bg);
  border-color: var(--stone);
}

/* Indicador de scroll animado en la parte inferior */
.hero-scroll {
  position: absolute;
  bottom: 40px; left: 56px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-scroll-line {
  width: 40px;
  height: 1px;
  background: var(--stone);
  animation: scrollPulse 2.4s ease-in-out infinite;
  transform-origin: left;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleX(1); opacity: 0.4; }
  50% { transform: scaleX(0.4); opacity: 1; }
}


/* ──────────────────────────────────────────────
   5. SECCIÓN SESIONES (BIBLIOTECA)
   Grid de tarjetas, una por sesión fotográfica.
   Al hacer clic se abre el overlay de sesión.
   ────────────────────────────────────────────── */
#sesiones {
  padding: 96px 56px;
  background: var(--bg);
}

/* Grid responsivo de cards */
.sessions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* Card individual de sesión */
.session-card {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  aspect-ratio: 4/3;
  border: 1px solid var(--border);
  transition: transform var(--trans), box-shadow var(--trans);
}
.session-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Imagen de portada de la sesión */
.session-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.75);
  transition: filter var(--trans), transform var(--trans);
}
.session-card:hover .session-thumb {
  filter: brightness(0.95);
  transform: scale(1.04);
}

/* Overlay con nombre y metadatos sobre la imagen */
.session-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
}

.session-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.03em;
}
.session-meta {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 5px;
}

/* Flecha que aparece al hover */
.session-arrow {
  position: absolute;
  top: 20px; right: 20px;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 15px;
  opacity: 0;
  transition: opacity var(--trans), border-color var(--trans);
}
.session-card:hover .session-arrow { opacity: 1; border-color: rgba(255,255,255,0.7); }

/* Estado vacío: cuando no hay sesiones cargadas todavía */
.sessions-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  color: var(--text-dim);
  border: 1px dashed var(--border);
}
.sessions-empty p { margin-bottom: 10px; }
.sessions-empty strong { color: var(--text-mid); }


/* ──────────────────────────────────────────────
   6. VISTA INTERNA DE SESIÓN (OVERLAY)
   Se superpone sobre toda la página al abrir
   una sesión. Muestra todas las fotos en grid.
   ────────────────────────────────────────────── */
#session-view {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  overflow-y: auto;
}
#session-view.active { display: block; }

/* Cabecera fija con título y botón cerrar */
.sv-header {
  position: sticky;
  top: 0;
  background: rgba(13,13,13,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 20px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

.sv-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 300;
  color: var(--text);
}

/* Botón para cerrar el overlay de sesión */
.sv-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-mid);
  cursor: pointer;
  padding: 10px 22px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all var(--trans);
}
.sv-close:hover { border-color: var(--stone); color: var(--text); }

.sv-body { padding: 40px 56px; }

/* Barra de metadatos (fecha, ubicación, cantidad) */
.sv-meta-bar {
  display: flex;
  gap: 28px;
  margin-bottom: 36px;
  font-size: 12px;
  color: var(--text-mid);
  letter-spacing: 0.08em;
  flex-wrap: wrap;
}

/* Grid masonry de fotos dentro de la sesión */
.sv-grid {
  columns: 3;
  gap: 10px;
}
.sv-grid img {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  break-inside: avoid;
  object-fit: cover;
  cursor: pointer;
  filter: brightness(0.88);
  transition: filter var(--trans), transform var(--trans);
  border: 1px solid var(--border);
}
.sv-grid img:hover { filter: brightness(1); }

/* Mensaje cuando la sesión no tiene fotos cargadas */
.sv-no-photos {
  text-align: center;
  padding: 80px;
  color: var(--text-dim);
  font-size: 14px;
}


/* ──────────────────────────────────────────────
   7. VISOR DE FOTO INDIVIDUAL (LIGHTBOX)
   Aparece al hacer clic en una foto dentro
   de la sesión. Muestra la foto a pantalla completa.
   ────────────────────────────────────────────── */
#photo-lb {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.97);
  align-items: center;
  justify-content: center;
}
#photo-lb.active { display: flex; }

#photo-lb img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

#photo-lb-close {
  position: absolute;
  top: 24px; right: 32px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
  transition: color var(--trans);
}
#photo-lb-close:hover { color: #fff; }


/* ──────────────────────────────────────────────
   8. SECCIÓN PRECIOS / PAQUETES
   Cards con los paquetes que ofrecés.
   Editables desde el panel admin.
   ────────────────────────────────────────────── */
#precios {
  padding: 96px 56px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

/* Grid de cards de precios */
.prices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

/* Card individual de precio */
.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color var(--trans), transform var(--trans);
  position: relative;
}
.price-card:hover {
  border-color: var(--stone);
  transform: translateY(-3px);
}

/* Badge "Más popular" para el paquete destacado */
.price-badge {
  position: absolute;
  top: -1px; right: 28px;
  background: var(--stone);
  color: var(--bg);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 12px;
}

/* Nombre del paquete */
.price-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 6px;
}

/* Precio */
.price-amount {
  font-size: 32px;
  font-weight: 300;
  color: var(--stone-lt);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.price-currency {
  font-size: 14px;
  color: var(--text-mid);
  margin-bottom: 28px;
}

/* Separador */
.price-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 24px;
}

/* Lista de características del paquete */
.price-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  margin-bottom: 32px;
}
.price-features li {
  font-size: 13px;
  color: var(--text-mid);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.price-features li::before {
  content: '—';
  color: var(--stone);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Botón de reserva en la card de precio */
.price-cta {
  display: block;
  text-align: center;
  padding: 12px;
  border: 1px solid var(--stone);
  color: var(--text);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all var(--trans);
  cursor: pointer;
  background: none;
  width: 100%;
}
.price-cta:hover { background: var(--stone); color: var(--bg); }


/* ──────────────────────────────────────────────
   9. SECCIÓN FORMULARIO DE RESERVA
   Formulario simple que arma un mensaje
   y redirige a WhatsApp al enviarlo.
   ────────────────────────────────────────────── */
#reserva {
  padding: 96px 56px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.reserva-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}

.reserva-info p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.9;
  margin-bottom: 16px;
}

/* Campos del formulario */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.form-group label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 13px 16px;
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--trans);
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--stone);
}
.form-group select option { background: var(--bg-card); }
.form-group textarea { resize: vertical; min-height: 100px; }

/* Botón de envío — redirige a WhatsApp */
.form-submit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 36px;
  background: none;
  border: 1px solid var(--stone);
  color: var(--text);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--trans);
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}
.form-submit:hover { background: var(--stone); color: var(--bg); }


/* ──────────────────────────────────────────────
   10. SECCIÓN CONTACTO
   Links directos a redes, email y WhatsApp.
   ────────────────────────────────────────────── */
#contacto {
  padding: 96px 56px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.contact-intro {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text);
}

.contact-links { display: flex; flex-direction: column; }

/* Link de contacto individual */
.contact-link {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: padding-left var(--trans);
}
.contact-link:first-child { border-top: 1px solid var(--border); }
.contact-link:hover { padding-left: 10px; }
.contact-link:hover .cl-icon { border-color: var(--stone); }

/* Ícono del link de contacto */
.cl-icon {
  width: 42px; height: 42px;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: border-color var(--trans);
}

.cl-info { flex: 1; }
.cl-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: 2px;
}
.cl-value { font-size: 14px; color: var(--text); }

.cl-arrow {
  color: var(--text-dim);
  font-size: 14px;
  transition: transform var(--trans), color var(--trans);
}
.contact-link:hover .cl-arrow { transform: translateX(5px); color: var(--stone-lt); }


/* ──────────────────────────────────────────────
   11. FOOTER
   Barra inferior con copyright y créditos.
   ────────────────────────────────────────────── */
footer {
  padding: 28px 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}
footer a { color: var(--text-dim); text-decoration: none; transition: color var(--trans); }
footer a:hover { color: var(--stone-lt); }


/* ──────────────────────────────────────────────
   12. PANEL ADMIN
   Overlay para agregar/editar sesiones y precios
   sin tocar el código. Protegido con contraseña.
   ────────────────────────────────────────────── */

/* Fondo oscuro semitransparente */
.admin-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.88);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.admin-overlay.active { display: flex; }

/* Panel contenedor */
.admin-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Header del panel */
.admin-header {
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}
.admin-header h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
}
.admin-close {
  background: none;
  border: none;
  color: var(--text-mid);
  font-size: 20px;
  cursor: pointer;
  transition: color var(--trans);
}
.admin-close:hover { color: var(--text); }

/* Tabs del panel (Sesiones / Precios) */
.admin-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.admin-tab {
  flex: 1;
  padding: 14px;
  background: none;
  border: none;
  color: var(--text-mid);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--trans);
  border-bottom: 2px solid transparent;
}
.admin-tab.active { color: var(--text); border-bottom-color: var(--stone); }

/* Contenido de cada tab */
.admin-body { padding: 28px 32px; }
.admin-tab-content { display: none; }
.admin-tab-content.active { display: block; }

/* Formularios dentro del admin */
.admin-form { display: flex; flex-direction: column; gap: 16px; }
.admin-form .form-group { margin-bottom: 0; }
.admin-form input,
.admin-form select,
.admin-form textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 14px;
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  width: 100%;
  transition: border-color var(--trans);
}
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus { border-color: var(--stone); }

/* Fila de dos columnas en el formulario admin */
.admin-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Botón principal del admin */
.admin-btn {
  padding: 12px 24px;
  background: var(--stone);
  color: var(--bg);
  border: none;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--trans);
  align-self: flex-start;
}
.admin-btn:hover { opacity: 0.85; }
.admin-btn-secondary {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-mid);
}
.admin-btn-secondary:hover { opacity: 1; border-color: var(--stone-lt); color: var(--text); }

/* Lista de items en el admin (sesiones o paquetes) */
.admin-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.admin-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.admin-list-item span { flex: 1; font-size: 13px; }
.admin-list-item small { font-size: 11px; color: var(--text-mid); }
.admin-item-del {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  transition: color var(--trans);
}
.admin-item-del:hover { color: #c0392b; }

/* Alerta de info dentro del admin */
.admin-note {
  font-size: 12px;
  color: var(--text-mid);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--stone);
  padding: 12px 16px;
  line-height: 1.7;
  margin-bottom: 20px;
}
.admin-note a { color: var(--stone-lt); }

/* Separador de sección dentro del admin */
.admin-section-title {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-lt);
  margin-bottom: 14px;
  margin-top: 8px;
}

/* Pantalla de login del admin */
.admin-login {
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}
.admin-login h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
}
.admin-login p { font-size: 13px; color: var(--text-mid); }
.admin-login input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 20px;
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  width: 100%;
  max-width: 300px;
  text-align: center;
  letter-spacing: 0.1em;
  transition: border-color var(--trans);
}
.admin-login input:focus { border-color: var(--stone); }
.admin-login-error { color: #e74c3c; font-size: 12px; display: none; }
.admin-login-error.visible { display: block; }

/* Toast / notificación de guardado */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--stone);
  color: var(--bg);
  padding: 12px 28px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 999;
  transition: transform 0.3s ease;
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); }


/* ──────────────────────────────────────────────
   13. UTILIDADES & ANIMACIONES
   ────────────────────────────────────────────── */

/* Fade-in al cargar elementos del grid */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ──────────────────────────────────────────────
   14. RESPONSIVE (MOBILE)
   Ajustes para pantallas menores a 768px.
   ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .reserva-layout,
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  nav { padding: 18px 24px; }
  .nav-links { gap: 18px; }
  #hero { padding: 0 24px; }
  #sesiones,
  #precios,
  #reserva,
  #contacto { padding: 64px 24px; }
  .sv-header { padding: 16px 24px; }
  .sv-body { padding: 24px; }
  .sv-grid { columns: 2; }
  footer { flex-direction: column; gap: 10px; text-align: center; padding: 24px; }
  .admin-row { grid-template-columns: 1fr; }
  .admin-body { padding: 20px; }
}

@media (max-width: 480px) {
  .nav-links { display: none; }
  .sv-grid { columns: 1; }
  .sessions-grid { grid-template-columns: 1fr; }
}


/* ──────────────────────────────────────────────
   ESTILOS ADICIONALES — Editor de fotos admin
   ────────────────────────────────────────────── */

/* Grid del editor de fotos */
.photo-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

/* Item individual en el editor */
.photo-editor-item {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.photo-editor-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: filter var(--trans);
}
.photo-editor-item:hover img { filter: brightness(0.6); }

/* Badge de "Portada" sobre la imagen */
.photo-badge-portada {
  position: absolute;
  top: 6px; left: 6px;
  background: var(--stone);
  color: var(--bg);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  pointer-events: none;
}

/* Botones de acción sobre cada foto (aparecen al hover) */
.photo-actions {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  gap: 4px;
  padding: 8px 6px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  opacity: 0;
  transition: opacity var(--trans);
}
.photo-editor-item:hover .photo-actions { opacity: 1; }

.photo-action-btn {
  flex: 1;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 5px 4px;
  cursor: pointer;
  transition: background var(--trans);
  text-align: center;
}
.photo-action-btn:hover { background: rgba(255,255,255,0.25); }
.photo-action-del { flex: 0 0 32px; }
.photo-action-del:hover { background: rgba(192,57,43,0.6) !important; }

/* Animación de la barra de progreso de subida */
@keyframes progressAnim {
  from { width: 20%; }
  to   { width: 90%; }
}