/* ===========================================================
   Portafolio público — se suma a styles.css (mismo tema otoñal)
   =========================================================== */
.pub {
  position: relative; z-index: 2; max-width: 1180px; margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
}
.pub-head { display: flex; justify-content: center; }
.pub-logo {
  width: min(170px, 46vw); height: auto; border-radius: 50%;
  filter: drop-shadow(0 10px 18px rgba(120, 50, 15, .35)); animation: flotarLogo 4s ease-in-out infinite alternate;
}
.pub-hero { animation: subir .65s var(--ease) both; }
.pub-hero h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.05; }
.pub-hero .quick:empty { display: none; }
.pub-filtros { animation: subir .65s var(--ease) both .08s; }
.pub-filtros .toolbar { margin-bottom: 0; }
.pub-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-cats:not(:empty) { margin-top: 14px; }
.pub-cat {
  border: 0; cursor: pointer; padding: 7px 14px; border-radius: 999px; font: 800 .88rem var(--font);
  background: rgba(255, 255, 255, .7); color: var(--ink-soft);
  transition: transform .25s var(--spring), background .2s, color .2s, box-shadow .2s;
}
.pub-cat:hover { transform: translateY(-2px); background: #fff; }
.pub-cat.on { background: linear-gradient(135deg, #f08a3c, var(--rust)); color: #fff; box-shadow: 0 8px 16px -8px rgba(184, 70, 31, .9); }

#catalogo .pf-card { cursor: pointer; }
.pub-precio { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; color: var(--rust); margin-top: 2px; }
.pub-precio.grande { font-size: 1.8rem; margin: 0; }

/* cargando */
.pub-esqueleto .pf-foto, .pub-esqueleto i {
  background: linear-gradient(90deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, .35) 100%) 0 0 / 200% 100%;
  animation: brillo 1.3s linear infinite; cursor: default;
}
.pub-esqueleto i { display: block; height: 14px; border-radius: 99px; width: 80%; }
.pub-esqueleto i + i { width: 45%; margin-top: 6px; }
@keyframes brillo { to { background-position: -200% 0; } }

/* ---------- detalle ---------- */
dialog.pub-dialog { width: min(920px, calc(100vw - 24px)); }
.pub-card { position: relative; }
.pub-cerrar { position: absolute; top: 22px; right: 14px; z-index: 3; background: rgba(255, 250, 241, .92); box-shadow: 0 4px 10px -4px rgba(70, 30, 10, .4); }
.pub-detalle { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow-y: auto; min-height: 0; }
.pub-galeria { position: relative; background: linear-gradient(135deg, #fff1dc, #fbd9ad); min-width: 0; }
.pub-slides {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 1;
}
.pub-slides::-webkit-scrollbar { display: none; }
.pub-slides > img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; display: block; }
.pub-slides > .pf-sinfoto { flex: 0 0 100%; font-size: 5rem; }
.pub-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; font-size: 1.5rem; font-weight: 900; background: rgba(255, 250, 241, .9); box-shadow: 0 4px 10px -4px rgba(70, 30, 10, .4); }
.pub-flecha:hover { transform: translateY(-50%) scale(1.1); }
.pub-flecha.izq { left: 10px; }
.pub-flecha.der { right: 10px; }
.pub-miniaturas { display: flex; gap: 8px; padding: 10px; overflow-x: auto; justify-content: center; background: rgba(255, 250, 241, .6); }
.pub-miniaturas button {
  flex: none; width: 54px; height: 54px; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  border: 3px solid transparent; background: #fbe6c8; opacity: .7; transition: opacity .2s, border-color .2s, transform .25s var(--spring);
}
.pub-miniaturas button:hover { opacity: 1; transform: scale(1.06); }
.pub-miniaturas button.on { border-color: var(--pumpkin); opacity: 1; }
.pub-miniaturas img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pub-info { padding: 26px 24px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.pub-info h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.1; padding-right: 36px; overflow-wrap: anywhere; }
.pub-badge { position: static; }
.pub-desc { margin: 4px 0 0; color: var(--ink-soft); font-weight: 600; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.pub-aviso { margin: 4px 0 0; font-size: .9rem; }
.pub-botones { margin-top: auto; padding-top: 12px; width: 100%; }
.pub-botones .btn { flex: 1 1 auto; }

@media (max-width: 760px) {
  .pub-detalle { grid-template-columns: minmax(0, 1fr); }
  .pub-info { padding: 18px 18px 20px; }
  .pub-info h2 { padding-right: 0; }
}
@media (max-width: 700px) {
  .pub { padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); gap: 16px; }
  .pub-hero { padding: 22px; }
  .pub-filtros .switch { width: 100%; }
  .pub-precio { font-size: 1.05rem; }
  .pub-miniaturas { justify-content: flex-start; }
  #toasts { right: 16px; left: 16px; justify-items: center; }
}