/* =========================================================================
   Viaje tras Viaje — Design System
   Modo B (adaptar): estructura y secciones heredadas del referente "Voynara"
   (template de viajes, Webflow). Capa de marca (colores + logo) = Viaje tras Viaje.
   Tipografia, escala, espaciado, container, radios y layout = heredados.
   ========================================================================= */

/* Fuentes auto-hospedadas (variables, subset latin). Independientes de la red. */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/inter-tight-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/nunito-sans-latin.woff2") format("woff2");
}

:root {
  /* ---------------------------------------------------------------------
     COLOR — capa de marca (paleta Viaje tras Viaje, remapeada por rol)
     --------------------------------------------------------------------- */
  --color-primary: #16293A;        /* navy: dominante, botones, secciones oscuras, titulares */
  --color-primary-hover: #0F1E2B;  /* navy oscurecido 12% (hover) */
  --color-accent: #C27A3C;         /* caramelo: CTA, eyebrows, highlights (rol del gold) */
  --color-accent-hover: #A8662E;   /* caramelo oscurecido (hover) */
  --color-accent-soft: #F0E2D2;    /* fondo suave derivado del caramelo (chips, badges) */

  --color-rust: #9F4A33;           /* terracota: acento secundario */
  --color-pine: #436157;           /* verde pizarra: acento, badges */
  --color-steel: #4F7196;          /* azul acero: acento */
  --color-sand: #C9B693;           /* arena: superficie calida */
  --color-mint: #ADD2CD;           /* menta: superficie/tinte claro */
  --color-mocha: #8C7058;          /* mocha: acento apagado */

  /* ---------------------------------------------------------------------
     SUPERFICIES Y NEUTRALES (heredado/derivado del referente)
     --------------------------------------------------------------------- */
  --bg: #F5F1EA;                   /* fondo de pagina, crema calido */
  --surface: #FFFFFF;              /* tarjetas */
  --surface-muted: #EFE9DD;        /* panel calido suave (cajas internas) */
  --surface-sand: #EDE6D6;         /* panel arena claro */
  --dark: #16293A;                 /* secciones oscuras = navy de marca */
  --dark-2: #11202E;               /* navy mas profundo (tarjetas sobre oscuro) */

  /* ---------------------------------------------------------------------
     TEXTO
     --------------------------------------------------------------------- */
  --text: #25333D;                 /* cuerpo */
  --text-strong: #16293A;          /* titulares */
  --text-muted: #5E6B73;           /* secundario */
  --text-subtle: #8A949A;          /* terciario / captions */
  --text-on-dark: #F5F1EA;         /* texto sobre fondo oscuro */
  --text-muted-on-dark: rgba(245,241,234,.72);

  /* ---------------------------------------------------------------------
     BORDES
     --------------------------------------------------------------------- */
  --border: #E4DCCD;               /* hairline calido */
  --border-soft: #ECE5D8;
  --border-on-dark: rgba(245,241,234,.14);
  --border-focus: var(--color-accent);

  /* ---------------------------------------------------------------------
     SEMANTICOS
     --------------------------------------------------------------------- */
  --success: #2F7D55;
  --success-bg: #E7EFEA;
  --error: #C2402E;
  --rating: var(--color-accent); /* estrellas */

  /* ---------------------------------------------------------------------
     TIPOGRAFIA (heredada del referente)
     --------------------------------------------------------------------- */
  --font-heading: "Inter Tight", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;

  --fs-h1: clamp(2.4rem, 1.4rem + 3.6vw, 4.5rem);   /* 38 -> 72 */
  --fs-h2: clamp(1.9rem, 1.2rem + 2.4vw, 3.25rem);  /* 30 -> 52 */
  --fs-h3: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);     /* 24 -> 32 */
  --fs-h4: 1.5rem;                                  /* 24 */
  --fs-body-l: 1.25rem;   /* 20 */
  --fs-body: 1.125rem;    /* 18 */
  --fs-body-m: 1rem;      /* 16 */
  --fs-body-s: 0.875rem;  /* 14 */
  --fs-eyebrow: 0.8125rem;/* 13 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.65;
  --ls-eyebrow: 0.12em;
  --ls-heading: normal;   /* titulos sin tracking, como el referente (Inter Tight display) */
  --ls-subtitle: 0.0357em; /* solo subtitulos pequenos llevan este tracking */

  /* ---------------------------------------------------------------------
     ESPACIADO  (base 4/8)
     --------------------------------------------------------------------- */
  --space-xs: 10px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 48px;
  --space-section: clamp(64px, 4vw + 40px, 120px); /* respiro vertical de seccion */

  /* gaps de grid */
  --gap-xs: 10px;
  --gap-s: 16px;
  --gap-m: 24px;
  --gap-l: 32px;
  --gap-xl: 48px;

  /* ---------------------------------------------------------------------
     CONTAINER Y REJILLA
     --------------------------------------------------------------------- */
  --container: 1470px;          /* ancho maximo de pagina */
  --container-content: 1120px;  /* ancho de bloques de texto/contenido */
  --container-pad: 24px;        /* padding lateral */

  /* ---------------------------------------------------------------------
     RADIOS
     --------------------------------------------------------------------- */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-button: 2px;   /* botones casi rectos (decision del referente) */
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     SOMBRAS  (sistema mayormente flat; tarjetas con hairline + sombra sutil)
     --------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(22,41,58,.05);
  --shadow-card: 0 1px 2px rgba(22,41,58,.04), 0 10px 30px rgba(22,41,58,.07);
  --shadow-lift: 0 18px 50px rgba(22,41,58,.14);

  /* ---------------------------------------------------------------------
     TRANSICIONES
     --------------------------------------------------------------------- */
  --transition: .35s ease;
}

/* =========================================================================
   BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--text-strong);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 .4em;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* =========================================================================
   LAYOUT HELPERS
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--content { max-width: var(--container-content); }

.section { padding-block: var(--space-section); }
.section--dark { background: var(--dark); color: var(--text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--text-on-dark); }
.section--muted { background: var(--surface-muted); }

.grid { display: grid; gap: var(--gap-l); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); align-items: center; }

@media (max-width: 991px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Responsive ===== Muchas secciones traen grid-template-columns en estilo
   inline; por eso aqui se usa !important: un inline solo lo gana otra regla con
   !important. Asi los layouts de 2-3 columnas colapsan de verdad en movil. */
@media (max-width: 860px) {
  /* splits (hero, about, mission, contacto...) a una sola columna */
  .split { grid-template-columns: 1fr !important; gap: var(--gap-l) !important; }

  /* nav movil: aparece la hamburguesa, los links pasan a un panel desplegable */
  .navbar { position: relative; }
  .navbar .container { gap: 12px; padding-block: 10px; }
  .nav-logo img { height: 32px !important; }
  .nav-logo .wordmark { font-size: 1.15rem; }

  /* especificidad con .navbar para ganarle a los defaults de desktop, que en el
     archivo van despues de este media query (los @media no suben especificidad) */
  .navbar .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    border: 0; border-radius: 10px;
    background: var(--color-primary); color: var(--text-on-dark); cursor: pointer;
  }
  .navbar .nav-bar-cta { display: none; }   /* la CTA del bar se mueve dentro del menu */

  .navbar .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
    padding: var(--space-xs) var(--container-pad) var(--space-m);
    display: none;
  }
  .navbar.nav-open .nav-menu { display: flex; }
  .nav-menu .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-menu .nav-links a { display: block; padding: 15px 2px; border-bottom: 1px solid var(--border-soft); font-size: 1.05rem; }
  .navbar .nav-menu-cta { display: inline-flex; justify-content: center; margin-top: var(--space-m); }
}

@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }   /* el strip queda 2x2 */
  .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* grids con columnas inline */

  /* filas en linea (precio + enlace, titulo + flechas, etc.) que envuelvan en vez de salirse */
  [style*="justify-content:space-between"] { flex-wrap: wrap; }

  .container { padding-inline: 18px; }
  h1, h2 { overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  .topbar .container { gap: 10px; }
  .grid-4 { grid-template-columns: 1fr !important; }   /* en pantallas muy chicas, el strip apila */
}

/* =========================================================================
   EYEBROW  (etiqueta con linea, omnipresente en el referente)
   ========================================================================= */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-s);
}
.eyebrow::before { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .8; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .8; }

.section-head { max-width: 720px; }
.section-head--center { margin-inline: auto; text-align: center; }

/* =========================================================================
   BOTONES
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-medium);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn svg { width: 1em; height: 1em; }

.btn-primary { background: var(--color-primary); color: var(--text-on-dark); border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.btn-secondary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.btn-secondary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: var(--text-on-dark); }

.btn-ghost-light { background: rgba(245,241,234,.16); color: var(--text-on-dark); border-color: transparent; }
.btn-ghost-light:hover { background: rgba(245,241,234,.28); }

.btn--block { width: 100%; }

/* link con flecha */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-accent); font-weight: var(--fw-semibold);
}
.link-arrow:hover { color: var(--color-accent-hover); }

/* =========================================================================
   TARJETAS
   ========================================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  overflow: hidden;
}
.card--pad { padding: var(--space-l); }
.card--soft { box-shadow: var(--shadow-card); border-color: transparent; }
.card--dark { background: var(--dark-2); color: var(--text-on-dark); border-color: var(--border-on-dark); }
/* Las tarjetas son superficie clara: sus titulos van oscuros aunque la seccion
   sea oscura (anula el .section--dark h*). Las tarjetas oscuras conservan claro. */
.card h1, .card h2, .card h3, .card h4 { color: var(--text-strong); }
.card--dark h1, .card--dark h2, .card--dark h3, .card--dark h4 { color: var(--text-on-dark); }
.card-media { aspect-ratio: 16/11; object-fit: cover; width: 100%; }

/* =========================================================================
   BADGES / PILLS / CHIPS
   ========================================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-size: var(--fs-body-s); font-weight: var(--fw-medium);
  background: var(--color-accent-soft); color: var(--color-accent-hover);
}
.badge--easy { background: var(--success-bg); color: var(--success); }
.badge--pine { background: var(--color-pine); color: #fff; }
.badge--gold { background: var(--color-accent); color: #fff; }

.pill-label {
  display: inline-flex; align-items: center;
  padding: 7px 16px; border-radius: var(--radius-pill);
  background: rgba(20,20,20,.45); color: #fff; backdrop-filter: blur(6px);
  font-size: var(--fs-body-s); font-weight: var(--fw-medium);
}

.chip {
  display: inline-flex; align-items: center;
  padding: 8px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: transparent;
  font-size: var(--fs-body-s); font-weight: var(--fw-medium); color: var(--text);
  cursor: pointer;
}
.chip--active { background: var(--surface); border-color: var(--color-primary); color: var(--text-strong); }

/* icono en cuadro/circulo (cards de feature, listas) */
.icon-box {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--radius-m);
  background: var(--surface-muted); color: var(--color-primary);
}
.icon-box svg { width: 22px; height: 22px; }
.icon-circle {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--surface-muted); color: var(--color-primary);
}
.icon-circle svg { width: 20px; height: 20px; }

/* =========================================================================
   FORMULARIOS
   ========================================================================= */
.field-label {
  display: block; font-size: var(--fs-body-s); font-weight: var(--fw-semibold);
  color: var(--text-strong); margin-bottom: 8px;
}
.input, .textarea, select.input {
  width: 100%; padding: 12px 14px;
  background: var(--surface-sand); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  font-family: var(--font-body); font-size: var(--fs-body-m);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:focus, .textarea:focus {
  outline: none; border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(194,122,60,.18); /* derivado del caramelo de marca */
}
.textarea { min-height: 120px; resize: vertical; }

/* =========================================================================
   NAV / TOPBAR
   ========================================================================= */
.topbar {
  font-size: var(--fs-body-s); color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
}
.topbar .container { display: flex; justify-content: space-between; padding-block: 8px; }

.navbar { background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.navbar .container { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; }
.nav-logo { display: inline-flex; align-items: center; gap: 10px; }
.nav-logo .wordmark { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 1.35rem; color: var(--text-strong); letter-spacing: .01em; }
.nav-menu { display: flex; align-items: center; gap: 30px; }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: var(--fs-body-m); font-weight: var(--fw-medium); color: var(--text); }
.nav-links a:hover { color: var(--color-accent); }
.nav-toggle { display: none; }     /* hamburguesa: solo en movil */
.nav-menu-cta { display: none; }   /* CTA dentro del menu: solo en movil */

/* =========================================================================
   UTILIDADES
   ========================================================================= */
/* Sobre fondo oscuro el caramelo del eyebrow contrasta poco: va en el mismo
   claro que el titulo (--text-on-dark). Se distingue por mayusculas + tracking + linea. */
.eyebrow.on-dark, .section--dark .eyebrow { color: var(--text-on-dark); }
.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.divider { height: 1px; background: var(--border); border: 0; margin: var(--space-m) 0; }
.stars { color: var(--rating); letter-spacing: 2px; }
.media-overlay { position: relative; }
.media-overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,41,58,0) 35%, rgba(22,41,58,.72) 100%); }
.media-overlay > * { position: relative; z-index: 1; }

/* Scrim: utilidad para CUALQUIER bloque con foto de fondo y texto encima
   (heroes, banners, oferta, mission, etc.). Tinte navy + profundidad vertical
   + refuerzo a la izquierda: garantiza contraste del texto claro sobre cualquier
   foto (clara u oscura). Funciona sola o combinada con .media-overlay (a la que
   le sustituye el gradiente de abajo por el velo completo).
   Las tarjetas pequenas NO llevan .scrim: conservan su gradiente de abajo. */
.scrim { position: relative; }
.scrim > * { position: relative; z-index: 1; }
.scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13,25,38,.42) 0%, rgba(13,25,38,.66) 100%),
    linear-gradient(90deg, rgba(13,25,38,.40) 0%, rgba(13,25,38,0) 70%);
}

/* tarjeta de destino destacado (strip del hero) — del referente: foto + subtitulo crema + lugar blanco sobre velo negro */
.feat-card { position: relative; display: block; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 3/4; background-size: cover; background-position: center; }
.feat-card__veil { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: var(--space-m); background: linear-gradient(0deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.30) 32%, rgba(0,0,0,0) 55%); }
.feat-card__tag { color: #f3f0e7; font-size: var(--fs-body-m); margin-bottom: 4px; }
.feat-card__name { color: #fff; margin: 0; font-size: var(--fs-h4); line-height: var(--lh-heading); }

/* =========================================================================
   Movimiento (caracter del referente Webflow IX2): reveals al scroll +
   micro-interacciones de hover. Sin librerias. Curva del referente:
   cubic-bezier(.445,.05,.55,.95). Respeta prefers-reduced-motion.
   ========================================================================= */
:root { --ease-ref: cubic-bezier(.445, .05, .55, .95); }

@media (prefers-reduced-motion: no-preference) {

  /* --- Reveals al entrar en viewport ---
     Solo se ocultan cuando <html> tiene .motion (lo agrega un script inline
     en el head antes del paint). El failsafe .motion-done los muestra siempre,
     aunque motion.js no cargue, para no dejar contenido invisible. */
  .motion:not(.motion-done) :is(.section-head, .grid, .split > *, [data-reveal]) {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ease-ref), transform .7s var(--ease-ref);
    will-change: opacity, transform;
  }
  .motion :is(.section-head, .grid, .split > *, [data-reveal]).is-visible {
    opacity: 1;
    transform: none;
  }

  /* --- Hover: lift + zoom de foto SOLO en tarjetas clicables (no en heroes
     full-bleed, que tambien usan .media-overlay como seccion) --- */
  .feat-card, a.media-overlay {
    transition: transform .45s var(--ease-ref), box-shadow .45s ease;
  }
  .feat-card:hover, a.media-overlay:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lift);
  }
  .feat-card::before, a.media-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    transition: transform .6s var(--ease-ref);
    z-index: 0;
  }
  .feat-card:hover::before, a.media-overlay:hover::before { transform: scale(1.06); }

  /* --- Hover: nudge de la flecha en botones y links --- */
  .btn svg, .link-arrow svg { transition: transform .3s ease; }
  .btn:hover svg, .link-arrow:hover svg { transform: translateX(4px); }
}

/* =========================================================================
   LIGHTBOX (galeria a pantalla completa) — usado en paginas de experiencia.
   Cualquier <a class="lb" href="foto" data-caption="..."> entra al set.
   Depende de lightbox.js. Tokens de marca, sin librerias.
   ========================================================================= */
.lb-set { display: none; }                 /* contenedor de fotos extra (solo alimenta el set) */
.lb-trigger { cursor: zoom-in; }
.lb-hint {                                 /* pill "ver galeria" sobre el hero */
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--space-m); padding: 9px 16px; border-radius: var(--radius-pill);
  background: rgba(245,241,234,.16); color: #fff; backdrop-filter: blur(6px);
  font-size: var(--fs-body-s); font-weight: var(--fw-medium);
}
.lb-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(13,25,38,.93);
  display: flex; align-items: center; justify-content: center;
}
.lb-overlay[hidden] { display: none; }
.lb-stage { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb-img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: var(--radius-m); box-shadow: var(--shadow-lift); }
.lb-cap { color: var(--text-on-dark); font-size: var(--fs-body-s); text-align: center; margin: 0; max-width: 60ch; }
.lb-close, .lb-prev, .lb-next {
  position: fixed; z-index: 1001; border: 0; cursor: pointer;
  width: 52px; height: 52px; border-radius: var(--radius-pill);
  background: rgba(245,241,234,.14); color: #fff;
  font-size: 1.7rem; line-height: 1; display: grid; place-items: center;
  transition: background-color var(--transition);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--color-accent); }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lb-count { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); color: var(--text-muted-on-dark); font-size: var(--fs-body-s); letter-spacing: .04em; }
@media (max-width: 640px) {
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
  .lb-close, .lb-prev, .lb-next { width: 44px; height: 44px; }
}