/* =========================================================
   GALERIA.CSS (FINAL) — Diseñado para tu JS actual
   Clases usadas por tu JS:
   .contactNice, .msgCard, .gItem, .chipMini, .filter
   ========================================================= */

/* ---------- Reset + base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background:#fbf7ff;
  color:#1d1b22;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button,input{ font:inherit; }
button{ cursor:pointer; border:none; background:none; }
p{ margin:0; }

/* ---------- Tema ---------- */
:root{
  --bg:#fbf7ff;
  --card: rgba(255,255,255,.84);
  --text:#1d1b22;
  --muted:#5b5566;

  --celeste:#9ad9ff;
  --turquesa:#4fe3d5;
  --lila:#b7a7ff;
  --rosa:#ffb3d9;

  --stroke:1px solid rgba(120,80,180,.14);
  --stroke2:1px solid rgba(0,0,0,.06);

  --shadow: 0 18px 45px rgba(20,10,40,.10);
  --shadow2: 0 10px 28px rgba(20,10,40,.08);

  --r: 18px;
  --r2: 26px;

  --wa: #17b169;          /* verde esmeralda */
  --wa2:#0ea75c;
}

/* ---------- Container ---------- */
.container{
  width:min(1120px, calc(100% - 32px));
  margin:0 auto;
}

/* ---------- Topbar ---------- */
.topbar{
  background: linear-gradient(90deg, rgba(154,217,255,.38), rgba(79,227,213,.18), rgba(255,179,217,.22));
  border-bottom: var(--stroke);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 0;
}
.topbar__msg{
  font-weight: 950;
  color: rgba(29,27,34,.88);
  letter-spacing: -.01em;
}
.topbar__wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(23,177,105,.25);
  background: rgba(23,177,105,.12);
  box-shadow: 0 10px 20px rgba(20,10,40,.06);
  text-decoration:none;
  font-weight: 950;
  color: var(--wa2);
}
.topbar__wa::before{ content:"🟢"; }

/* ---------- Header / nav ---------- */
.header{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  border-bottom: var(--stroke);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}
.brand__logo{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: contain;
  background: rgba(255,255,255,.85);
  border: var(--stroke);
  box-shadow: 0 12px 24px rgba(20,10,40,.08);
}
.brand__text strong{
  display:block;
  line-height:1.05;
  letter-spacing:-.01em;
}
.brand__text span{
  display:block;
  margin-top:2px;
  color: var(--muted);
  font-weight: 850;
  font-size: 13px;
}

.nav{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.nav__link{
  text-decoration:none;
  font-weight: 950;
  color: rgba(29,27,34,.78);
  padding: 9px 12px;
  border-radius: 999px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.nav__link:hover{
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 26px rgba(20,10,40,.10);
  transform: translateY(-1px);
}
.nav__link.is-active{
  background: linear-gradient(135deg, rgba(183,167,255,.22), rgba(154,217,255,.20));
  border: var(--stroke);
  color: rgba(29,27,34,.92);
}

/* CTA WhatsApp header */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: var(--stroke);
  background: rgba(255,255,255,.86);
  font-weight: 950;
  text-decoration:none;
}
.btn--primary{
  border-color: rgba(23,177,105,.25);
  background: linear-gradient(135deg, rgba(23,177,105,.18), rgba(79,227,213,.14));
  color: #0b6a3a;
}
.btn--primary::before{ content:"🟢"; }

.nav__toggle{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: var(--stroke);
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 24px rgba(20,10,40,.08);
  font-weight: 950;
}

/* ---------- Main section background ---------- */
.section{
  position:relative;
  padding: 26px 0;
}
.section::before{
  content:"";
  position:absolute;
  inset:-50px 0 auto 0;
  height: 280px;
  background:
    radial-gradient(900px 260px at 10% 10%, rgba(183,167,255,.26), transparent 60%),
    radial-gradient(850px 260px at 90% 0%, rgba(154,217,255,.22), transparent 60%),
    radial-gradient(780px 260px at 60% 45%, rgba(79,227,213,.18), transparent 60%);
  pointer-events:none;
}

.section__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  margin: 6px 0 14px;
}
.section__head h2{
  margin:0 0 6px;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -.03em;
  line-height: 1.03;
}
.section__head p{
  color: var(--muted);
  max-width: 70ch;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: var(--stroke);
  background: rgba(255,255,255,.84);
  box-shadow: var(--shadow2);
  font-weight: 950;
  white-space: nowrap;
}

/* ---------- Contact card que renderiza tu JS ---------- */
#contactCard{
  margin: 12px 0 16px;
}
.contactNice{
  border-radius: var(--r2);
  border: var(--stroke);
  background:
    radial-gradient(600px 200px at 15% 0%, rgba(79,227,213,.16), transparent 60%),
    radial-gradient(600px 200px at 90% 20%, rgba(255,179,217,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow: var(--shadow2);
  padding: 16px 18px;
}
.contactNice__name{
  font-weight: 1000;
  letter-spacing:-.02em;
  font-size: 18px;
  margin-bottom: 8px;
}
.contactNice__row{
  color: rgba(29,27,34,.86);
  font-weight: 750;
  margin: 6px 0;
}

/* ---------- Head de bloque ---------- */
.blockHead{
  margin: 16px 0 10px;
  padding: 14px 16px;
  border-radius: var(--r2);
  border: var(--stroke);
  background: linear-gradient(135deg, rgba(183,167,255,.20), rgba(255,179,217,.12));
}
.blockHead h3{
  margin:0 0 6px;
  font-size: 20px;
  letter-spacing:-.01em;
}
.blockHead p{ color: var(--muted); }

/* =========================================================
   MENSAJES (msgCard) — ahora sí se ven PRO
   ========================================================= */
#msgRow.msgRow{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.msgCard{
  border-radius: var(--r2);
  border: var(--stroke);
  background: var(--card);
  box-shadow: var(--shadow2);
  overflow:hidden;
  display:grid;
  grid-template-columns: 220px 1fr;
  min-height: 170px;
}
.msgCard__img{
  padding: 0;
  border: 0;
  background: transparent;
  width: 100%;
  height: 100%;
}
.msgCard__img img{
  width:100%;
  height:100%;
  object-fit: cover;
}
.msgCard__body{
  padding: 12px 14px 14px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.msgCard__body strong{
  font-size: 16px;
  letter-spacing:-.01em;
  line-height: 1.15;
}
.msgCard__body span{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.msgCard__actions{
  margin-top: auto;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Botones mini para mensajes */
.btn--mini{
  padding: 9px 12px;
  border-radius: 999px;
  border: var(--stroke);
  background: rgba(255,255,255,.90);
  box-shadow: 0 10px 20px rgba(20,10,40,.06);
  font-weight: 950;
  text-decoration:none;
}
.msgCard__actions a.btn--mini{
  border-color: rgba(23,177,105,.25);
  background: rgba(23,177,105,.12);
  color: #0b6a3a;
}
.msgCard__actions a.btn--mini::before{ content:"🟢"; }

/* =========================================================
   Buscador + filtros (chips bonitos)
   ========================================================= */
.filters{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
#search{
  flex: 1 1 340px;
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 14px;
  border: var(--stroke);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 26px rgba(20,10,40,.08);
  outline:none;
}
#search:focus{
  border-color: rgba(120,80,180,.26);
}

#filters.filters{
  flex: 2 1 560px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter{
  border: var(--stroke);
  background: rgba(255,255,255,.90);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 950;
  box-shadow: 0 12px 22px rgba(20,10,40,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.filter:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(20,10,40,.10);
}
.filter.is-active{
  background: linear-gradient(135deg, rgba(183,167,255,.26), rgba(79,227,213,.18));
  border-color: rgba(79,227,213,.45);
}

/* =========================================================
   GALERÍA (gItem) — aquí estaba lo feo: ahora queda premium
   ========================================================= */
#galleryGrid.masonry{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

/* Card */
.gItem{
  border-radius: var(--r2);
  border: var(--stroke);
  background: var(--card);
  box-shadow: var(--shadow2);
  overflow:hidden;
  transition: transform .14s ease, box-shadow .14s ease;
}
.gItem:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(20,10,40,.14);
}

/* Imagen (uniforme) */
.gItem__btn{
  width:100%;
  padding: 12px; /* marco */
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(183,167,255,.18), transparent 60%),
    radial-gradient(700px 220px at 90% 20%, rgba(79,227,213,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
}

.gItem__btn img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  border: var(--stroke2);
  box-shadow: 0 12px 28px rgba(20,10,40,.10);
}

/* Caption */
.gItem__cap{
  padding: 12px 14px 14px;
}
.gItem__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.gItem__top strong{
  font-size: 15px;
  letter-spacing:-.01em;
  line-height: 1.2;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp: 2;            /* evita cards gigantes */
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* Chip tipo */
.chipMini{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: var(--stroke);
  background: rgba(183,167,255,.14);
  font-weight: 950;
  font-size: 12px;
  color: rgba(29,27,34,.82);
}

/* Descripción: corta y bonita */
.gItem__desc{
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  display:-webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* =========================================================
   CTA + footer
   ========================================================= */
.cta{
  padding: 22px 0 34px;
}
.cta__inner{
  border-radius: var(--r2);
  border: var(--stroke);
  background:
    radial-gradient(900px 320px at 20% 0%, rgba(79,227,213,.18), transparent 55%),
    radial-gradient(900px 320px at 85% 20%, rgba(255,179,217,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow: var(--shadow);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.cta__inner h2{
  margin:0 0 6px;
  letter-spacing:-.02em;
}
.cta__inner p{
  color: var(--muted);
}

.footer{
  border-top: var(--stroke);
  background: rgba(255,255,255,.62);
}
.footer__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding: 18px 0;
}
.footer__links{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.footer__links a{
  text-decoration:none;
  font-weight: 950;
  color: rgba(29,27,34,.78);
}
.footer__links a:hover{ text-decoration: underline; }

/* =========================================================
   Lightbox
   ========================================================= */
.lightbox{
  position: fixed;
  inset:0;
  display:none;
  z-index: 9999;
}
.lightbox.is-open{ display:block; }
.lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(10,8,18,.62);
  backdrop-filter: blur(6px);
}
.lightbox__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(980px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 10px;
  border-radius: 22px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox__img{
  width:100%;
  max-height: calc(100vh - 90px);
  object-fit: contain;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
}
.lightbox__close{
  position:absolute;
  top:10px;
  right:10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color:#fff;
  font-size: 18px;
  font-weight: 950;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px){
  #galleryGrid.masonry{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px){
  #msgRow.msgRow{ grid-template-columns: 1fr; }
  .msgCard{ grid-template-columns: 1fr; }
  .msgCard__img img{ height: 210px; }
}

@media (max-width: 820px){
  .nav__toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .nav{
    position: absolute;
    right: 16px;
    top: 74px;
    width: min(420px, calc(100vw - 32px));
    display:none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px;
    background: rgba(255,255,255,.90);
    border: var(--stroke);
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(20,10,40,.16);
  }
  .nav.is-open{ display:flex; }
  .section__head{ flex-direction: column; }
  #galleryGrid.masonry{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta__inner{ flex-direction: column; align-items:flex-start; }
}

@media (max-width: 520px){
  .container{ width: min(1120px, calc(100% - 20px)); }
  #galleryGrid.masonry{ grid-template-columns: 1fr; }
  .footer__inner{ flex-direction: column; }
}
/* =========================================================
   UX/UI BOOST — zona filtros + cards (pegar al final)
   ========================================================= */

/* --- Sección filtros: que no se vea “vacía” --- */
.filters{
  margin-top: 16px !important;
  padding: 14px;
  border-radius: var(--r2);
  border: var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.60));
  box-shadow: 0 18px 45px rgba(20,10,40,.08);
}

/* “Banda” arriba del grid (se siente más pro) */
#galleryGrid.masonry{
  margin-top: 18px !important;
  position: relative;
}

/* Compacta un poco el grid para que no se vea “abandonado” */
#galleryGrid.masonry{
  gap: 12px !important;
}

/* --- Cards: más “premium” --- */
.gItem{
  background:
    radial-gradient(600px 200px at 20% 0%, rgba(183,167,255,.16), transparent 60%),
    radial-gradient(600px 200px at 90% 20%, rgba(79,227,213,.12), transparent 60%),
    rgba(255,255,255,.86) !important;
  box-shadow: 0 14px 34px rgba(20,10,40,.10) !important;
}

.gItem:hover{
  transform: translateY(-3px) scale(1.005);
  box-shadow: 0 24px 60px rgba(20,10,40,.16) !important;
}

/* Imagen: ocupa mejor, más presencia */
.gItem__btn{
  padding: 12px !important;
}
.gItem__btn img{
  aspect-ratio: 16 / 10 !important; /* más moderno y menos “cuadrado” */
  border-radius: 18px !important;
  box-shadow: 0 16px 34px rgba(20,10,40,.14) !important;
}

/* Encabezado de la card con mejor jerarquía */
.gItem__cap{
  padding: 12px 16px 16px !important;
}

.gItem__top{
  align-items: center !important;
}

.gItem__top strong{
  -webkit-line-clamp: 3 !important;
  max-width: 100%;
}
.gItem__desc{
  -webkit-line-clamp: 7 !important;
}


/* Chip: más bonito */
.chipMini{
  background: rgba(154,217,255,.18) !important;
  border-color: rgba(154,217,255,.35) !important;
  color: rgba(29,27,34,.84) !important;
}

/* Descripción: más líneas y mejor legibilidad */
.gItem__desc{
  margin-top: 10px !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 6 !important; /* antes 4 */
  opacity: .95;
}

/* --- Micro-acciones dentro de cada card (sin tocar tu HTML actual)
   Si en el futuro agregas .gItem__actions desde JS, esto ya lo estiliza.
*/
.gItem__actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.gItem__actions .btnMini{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: var(--stroke);
  background: rgba(255,255,255,.92);
  font-weight: 950;
  text-decoration:none;
  box-shadow: 0 12px 22px rgba(20,10,40,.08);
}
.gItem__actions .btnMini:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(20,10,40,.12);
}
.gItem__actions .btnMini--wa{
  border-color: rgba(23,177,105,.26);
  background: rgba(23,177,105,.12);
  color: #0b6a3a;
}
.gItem__actions .btnMini--wa::before{ content:"🟢"; }

/* --- Responsive: menos “aire” en desktop grande --- */
@media (min-width: 1200px){
  #galleryGrid.masonry{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* En móvil: cards más llenitas, menos huecos */
@media (max-width: 520px){
  .filters{ padding: 12px; }
  .gItem__cap{ padding: 12px 14px 14px !important; }
  .gItem__desc{ -webkit-line-clamp: 8 !important; }
}

/* Logo mini sobre la imagen (marca) */
.gItem__btn{
  position: relative;
}

.gItem__btn::after{
  content:"";
  position:absolute;
  right: 18px;
  bottom: 18px;
  width: 40px;
  height: 40px;
  border-radius: 14px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(120,80,180,.18);
  box-shadow: 0 14px 30px rgba(20,10,40,.18);

  background-image: url("../img/logo.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size: 85% 85%;
}
/* ================================
   FIX PRO: filtros + grid + botones
   Pegar al FINAL de galeria.css
   ================================ */

/* Barra de filtros (ya no hay .filters dentro de .filters) */
.filtersBar{
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--r2);
  border: var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.62));
  box-shadow: 0 18px 45px rgba(20,10,40,.08);
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}
.filtersBar__search{
  flex: 1 1 320px;
  min-width: 220px;
}
.filtersBar__chips{
  flex: 2 1 560px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Asegura que el input se vea bien dentro de la barra */
.filtersBar #search{
  width:100%;
}

/* GRID: cards más anchas y naturales */
#galleryGrid.masonry{
  margin-top: 18px !important;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 14px !important;
  align-items: start;
}

/* En pantallas grandes, evita que se hagan demasiadas columnas */
@media (min-width: 1200px){
  #galleryGrid.masonry{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Card un poquito más “robusta” */
.gItem{
  min-height: 360px;
}

/* Imagen con overlay de logo (mini) */
.gItem__btn{
  position: relative;
}

/* “Watermark” logo */
.gItem__btn::after{
  content:"";
  position:absolute;
  right: 18px;
  bottom: 18px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background:
    rgba(255,255,255,.78)
    url("../img/logo.png") center / 80% no-repeat;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 12px 26px rgba(20,10,40,.18);
  opacity: .92;
  pointer-events:none;
}

/* Botones dentro de cards: fuerza visibilidad */
.gItem__actions{
  display:flex !important;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.btnMini{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: var(--stroke);
  background: rgba(255,255,255,.92);
  font-weight: 950;
  text-decoration:none;
  box-shadow: 0 12px 22px rgba(20,10,40,.08);
  color: rgba(29,27,34,.92);
}

.btnMini:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(20,10,40,.12);
}

.btnMini--wa{
  border-color: rgba(23,177,105,.26);
  background: rgba(23,177,105,.12);
  color: #0b6a3a;
}
.btnMini--wa::before{ content:"🟢"; }

/* Lightbox meta bonito */
.lightbox__panel{
  flex-direction: column;
  gap: 10px;
}
#lightboxMeta{
  width: min(980px, calc(100vw - 24px));
  color: #fff;
}
.lbMeta{
  width:100%;
  padding: 10px 12px 0;
}
.lbMeta__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.lbMeta__title{
  font-weight: 950;
  letter-spacing: -.01em;
}
.lbMeta__chip{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  font-weight: 950;
  font-size: 12px;
}
.lbMeta__desc{
  margin-top: 8px;
  opacity: .92;
  line-height: 1.4;
}
.lbMeta__actions{
  margin-top: 10px;
}

/* Mobile: cards grandes y cómodas */
@media (max-width: 520px){
  #galleryGrid.masonry{
    grid-template-columns: 1fr !important;
  }
  .gItem{
    min-height: unset;
  }
}
/* =========================================================
   PATCH UX — Cards más anchas + logo + botones visibles
   (pegar al FINAL del archivo)
   ========================================================= */

/* 1) Grid: que no se vean "angostas" */
#galleryGrid.masonry{
  /* en pantallas medianas/grandes, menos columnas => cards más anchas */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ultra wide: 4 columnas (no 5) para que no adelgacen */
@media (min-width: 1200px){
  #galleryGrid.masonry{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 1100px){
  #galleryGrid.masonry{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  #galleryGrid.masonry{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  #galleryGrid.masonry{ grid-template-columns: 1fr; }
}

/* 2) Card: fondo más "premium" (que no se vea vacía) */
.gItem{
  position: relative;
  background:
    radial-gradient(700px 220px at 15% 0%, rgba(183,167,255,.18), transparent 60%),
    radial-gradient(700px 220px at 90% 15%, rgba(79,227,213,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80)) !important;
}

/* 3) Mini-logo dentro de la card (watermark bonito) */
.gItem::after{
  content:"";
  position:absolute;
  right: 14px;
  top: 14px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.65)),
    url("../img/logo.png");
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 12px 26px rgba(20,10,40,.12);
  opacity: .95;
  pointer-events:none;
}

/* 4) Imagen: más presencia y sin deformar */
.gItem__btn img{
  aspect-ratio: 16 / 10 !important;
  object-fit: cover;
}

/* 5) Botones: garantizar que SE VEAN siempre */
.gItem__cap{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.gItem__actions{
  display:flex !important;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* Estilo base botones (por si no aplica el selector anterior) */
.btnMini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: var(--stroke);
  background: rgba(255,255,255,.94);
  font-weight: 950;
  text-decoration:none;
  box-shadow: 0 12px 22px rgba(20,10,40,.08);
  color: rgba(29,27,34,.92);
}

.btnMini:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(20,10,40,.12);
}

.btnMini--wa{
  border-color: rgba(23,177,105,.26);
  background: rgba(23,177,105,.12);
  color: #0b6a3a;
}
.btnMini--wa::before{ content:"🟢"; }

/* 6) Evita que algo "se corte abajo": más aire al final */
.section{
  padding-bottom: 44px;
}
footer.footer{
  margin-top: 10px;
}
/* Evita saltos raros con sticky + blur en algunos móviles */
.header{ will-change: transform; }
/* =========================================================
   Comentarios
   ========================================================= */
.comments{
  padding: 14px 0 34px;
}
.comments__inner{
  border-radius: var(--r2);
  border: var(--stroke);
  background:
    radial-gradient(900px 320px at 15% 0%, rgba(154,217,255,.18), transparent 55%),
    radial-gradient(900px 320px at 85% 20%, rgba(255,179,217,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80));
  box-shadow: var(--shadow2);
  padding: 16px;
}

.comments__head h3{
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -.01em;
}
.comments__head p{ margin:0; color: var(--muted); }

.cForm{ margin-top: 12px; display:flex; flex-direction: column; gap: 12px; }

.cForm__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 700px){
  .cForm__grid{ grid-template-columns: 1fr; }
}

.cField span{
  display:block;
  font-weight: 950;
  margin-bottom: 6px;
  color: rgba(29,27,34,.86);
}
.cField input, .cField textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: var(--stroke);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 26px rgba(20,10,40,.06);
  outline:none;
}
.cField input:focus, .cField textarea:focus{
  border-color: rgba(120,80,180,.26);
}

.cForm__actions{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}
.cForm__hint{
  color: var(--muted);
  font-weight: 750;
}

/* Lista */
.cList{
  margin-top: 14px;
  display:grid;
  gap: 12px;
}
.cItem{
  border-radius: var(--r2);
  border: var(--stroke);
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 26px rgba(20,10,40,.08);
  padding: 12px 14px;
}
.cItem__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.cItem__name{
  font-weight: 1000;
}
.cItem__meta{
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}
.cItem__text{
  margin-top: 8px;
  color: rgba(29,27,34,.84);
  line-height: 1.45;
}
.section{ padding-bottom: 52px; }
.section::before{ height: 220px; } /* baja el “manchón” superior para que no invada */
/* ===========================
   Lightbox con comentarios
=========================== */
.lightbox__panel{
  width: min(980px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

/* Imagen arriba, pero limitada */
.lightbox__img{
  width: 100%;
  max-height: calc(100vh - 320px); /* deja espacio para meta/comentarios */
  object-fit: contain;
  border-radius: 16px;
}

/* Meta abajo con scroll si se necesita */
.lightbox__meta{
  width: 100%;
  max-height: 240px;
  overflow: auto;
  padding: 12px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
}

/* Inputs dentro del lightbox (hermosos y legibles) */
.lightbox__meta .cField span{ color: rgba(255,255,255,.92); }
.lightbox__meta .cField input,
.lightbox__meta .cField textarea{
  background: rgba(255,255,255,.92);
  color: #1d1b22;
}

.lightbox__meta .cItem{
  background: rgba(255,255,255,.90);
  color: #1d1b22;
}


/* En pantallas chicas, aún más compacto */
@media (max-width: 520px){
  .lightbox__panel{
    width: calc(100vw - 18px) !important;
    max-height: calc(100vh - 80px) !important;
  }
  .lightbox__img{
    max-height: calc(100vh - 190px) !important;
  }
}