/*
  BUME CMS — hoja de utilidades.
  NOTA IMPORTANTE: esta hoja es un subconjunto de utilidades escrito a mano
  (sintaxis inspirada en Tailwind) para que el sitio funcione sin necesidad
  de un paso de build en el servidor. Si en el futuro se agregan clases
  nuevas en los templates que no existan aquí, hay que añadirlas a mano o
  migrar a un build real de Tailwind (tailwind.config.js + build local,
  subiendo el CSS ya compilado — Node solo se usaría en la máquina de
  desarrollo, nunca en el hosting).
*/

:root {
  --bume-black: #111111;
  --bume-ink: #14120F;
  --bume-white: #FFFFFF;
  --bume-ivory: #F7F3EA;
  --bume-ivory-deep: #ECE3D1;
  --bume-bronze: #9C7C4B;
  --bume-bronze-light: #C7A87A;
  --font-sans: 'Poppins', system-ui, sans-serif;
  --font-serif: 'Cormorant Garamond', serif;
  --ease-signature: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
html, body { margin: 0; padding: 0; max-width: 100%; }
body { overflow-x: hidden; }

/* Scrollbar de marca (el scrollbar gris por defecto del sistema desentonaba
   contra la paleta blanco/negro/ivory — se ve como un margen sucio a la derecha) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bume-ivory); }
::-webkit-scrollbar-thumb { background: var(--bume-bronze-light); border: 2px solid var(--bume-ivory); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--bume-bronze); }
html { scrollbar-width: thin; scrollbar-color: var(--bume-bronze-light) var(--bume-ivory); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font: inherit; }
ul, ol { margin: 0; padding: 0; }
/* El navegador le pone a <figure> un margen por defecto (1em 40px); como el
   ancho ya se controla con clases (w-full, max-w-4xl mx-auto), ese margen
   nativo solo estorba: descentra la imagen y, en "ancho completo", la
   desplaza y la recorta contra su contenedor. */
figure { margin: 0; }
::selection { background: var(--bume-ink); color: var(--bume-ivory); }

/* Foco de teclado visible siempre (accesibilidad) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--bume-bronze);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Colores genéricos (paleta base) ---------- */
.text-white { color: #fff; }
.bg-white { background-color: #fff; }
.text-black { color: #000; }
.bg-black { background-color: #000; }
.border-white { border-color: #fff; }
.hover\:bg-white:hover { background-color: #fff; }
.hover\:text-white:hover { color: #fff; }

.bg-whatsapp { background-color: #25D366; }

/* ---------- Colores de marca ---------- */
.bg-bume-black { background-color: var(--bume-black); }
.bg-bume-white { background-color: var(--bume-white); }
.bg-bume-ivory { background-color: var(--bume-ivory); }
.text-bume-black { color: var(--bume-black); }
.text-bume-white { color: var(--bume-white); }
.text-bume-ivory { color: var(--bume-ivory); }
.fill-bume-black { fill: var(--bume-black); }
.fill-white { fill: #fff; }
.fill-current { fill: currentColor; }
.border-bume-black { border-color: var(--bume-black); }
.border-bume-black\/8 { border-color: rgba(17,17,17,.08); }
.border-bume-black\/10 { border-color: rgba(17,17,17,.1); }
.border-bume-black\/20 { border-color: rgba(17,17,17,.2); }
.bg-bume-white\/95 { background-color: rgba(255,255,255,.95); }
.bg-black\/45 { background-color: rgba(0,0,0,.45); }
.bg-white\/40 { background-color: rgba(255,255,255,.4); }
.bg-white\/90 { background-color: rgba(255,255,255,.9); }
.text-white\/60 { color: rgba(255,255,255,.6); }
.text-white\/50 { color: rgba(255,255,255,.5); }
.text-white\/70 { color: rgba(255,255,255,.7); }
.text-white\/80 { color: rgba(255,255,255,.8); }
.border-white\/10 { border-color: rgba(255,255,255,.1); }
.border-white\/40 { border-color: rgba(255,255,255,.4); }
.bg-white\/10 { background-color: rgba(255,255,255,.1); }
.hover\:bg-white\/10:hover { background-color: rgba(255,255,255,.1); }
.hover\:border-white:hover { border-color: #fff; }
.bg-neutral-50 { background-color: #fafafa; }
.bg-neutral-100 { background-color: #f5f5f5; }
.text-neutral-400 { color: #a3a3a3; }
.text-neutral-500 { color: #737373; }
.text-neutral-600 { color: #525252; }
.bg-green-50 { background-color: #f0fdf4; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.bg-red-50 { background-color: #fef2f2; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.text-red-800 { color: #991b1b; }
.hover\:text-red-800:hover { color: #991b1b; }

/* ---------- Layout / display ---------- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.top-full { top: 100%; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }

/* Escala completa de desplazamiento para position:fixed/absolute — usada por
   la burbuja de WhatsApp, el cierre de popups, flechas/puntos de carrusel, etc.
   (bug real detectado: estas clases se usaban en varios templates pero nunca
   se habían definido, así que esos elementos con position:fixed no se
   anclaban a ninguna esquina). */
.top-1 { top: .25rem; } .bottom-1 { bottom: .25rem; } .left-1 { left: .25rem; } .right-1 { right: .25rem; }
.top-2 { top: .5rem; } .bottom-2 { bottom: .5rem; } .left-2 { left: .5rem; } .right-2 { right: .5rem; }
.top-3 { top: .75rem; } .bottom-3 { bottom: .75rem; } .left-3 { left: .75rem; } .right-3 { right: .75rem; }
.top-4 { top: 1rem; } .bottom-4 { bottom: 1rem; } .left-4 { left: 1rem; } .right-4 { right: 1rem; }
.top-5 { top: 1.25rem; } .bottom-5 { bottom: 1.25rem; } .left-5 { left: 1.25rem; } .right-5 { right: 1.25rem; }
.top-6 { top: 1.5rem; } .bottom-6 { bottom: 1.5rem; } .left-6 { left: 1.5rem; } .right-6 { right: 1.5rem; }
.top-8 { top: 2rem; } .bottom-8 { bottom: 2rem; } .left-8 { left: 2rem; } .right-8 { right: 2rem; }
.top-10 { top: 2.5rem; } .bottom-10 { bottom: 2.5rem; } .left-10 { left: 2.5rem; } .right-10 { right: 2.5rem; }
.top-14 { top: 3.5rem; } .bottom-14 { bottom: 3.5rem; } .left-14 { left: 3.5rem; } .right-14 { right: 3.5rem; }
.top-20 { top: 5rem; } .bottom-20 { bottom: 5rem; } .left-20 { left: 5rem; } .right-20 { right: 5rem; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }
.z-50 { z-index: 50; }
.z-\[999\] { z-index: 999; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.shrink-0 { flex-shrink: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.top-1\/2 { top: 50%; }
.left-1\/2 { left: 50%; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.-translate-x-1\/2 { transform: translateX(-50%); }
.w-2\.5 { width: .625rem; }
.h-2\.5 { height: .625rem; }
.bg-white\/60 { background-color: rgba(255,255,255,.6); }
.bg-white\/80 { background-color: rgba(255,255,255,.8); }
.max-h-\[85vh\] { max-height: 85vh; }
.h-\[50vh\] { height: 50vh; }
.h-\[60vh\] { height: 60vh; }
.h-\[70vh\] { height: 70vh; }
@media (min-width: 768px) {
  .md\:h-\[70vh\] { height: 70vh; }
  .md\:h-\[85vh\] { height: 85vh; }
}
.js-carousel-dot.is-active { background-color: #fff; }

.gap-2 { gap: .5rem; }
.gap-1\.5 { gap: .375rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-20 { gap: 5rem; }
.gap-y-10 { row-gap: 2.5rem; }
.gap-x-6 { column-gap: 1.5rem; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.col-span-full { grid-column: 1 / -1; }
.md\:col-span-2 { }
@media (min-width: 768px) { .md\:col-span-2 { grid-column: span 2 / span 2; } }

.divide-y > * + * { border-top: 1px solid #e5e5e5; }
.border { border: 1px solid #e5e5e5; }
.border-t { border-top: 1px solid #e5e5e5; }
.border-b { border-bottom: 1px solid #e5e5e5; }
.rounded { border-radius: 4px; }
.rounded-full { border-radius: 9999px; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.shadow-lg { box-shadow: 0 10px 25px rgba(0,0,0,.12); }

/* ---------- Espaciado ---------- */
.p-1 { padding: .25rem; } .p-2 { padding: .5rem; }
.p-3 { padding: .75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-7 { padding: 1.75rem; } .p-8 { padding: 2rem; } .p-10 { padding: 2.5rem; }
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: .25rem; padding-right: .25rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.pr-4 { padding-right: 1rem; }
.py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-3\.5 { padding-top: .875rem; padding-bottom: .875rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.mt-0\.5 { margin-top: .125rem; }
.mt-1 { margin-top: .25rem; } .mt-1\.5 { margin-top: .375rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; } .mt-20 { margin-top: 5rem; } .mt-24 { margin-top: 6rem; }
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; }
.mb-7 { margin-bottom: 1.75rem; } .mb-8 { margin-bottom: 2rem; } .mb-9 { margin-bottom: 2.25rem; } .mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; } .mb-14 { margin-bottom: 3.5rem; } .mb-16 { margin-bottom: 4rem; }
.ml-4 { margin-left: 1rem; } .ml-8 { margin-left: 2rem; }
.mr-1 { margin-right: .25rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-1 { margin-left: .25rem; }
.space-y-1 > * + * { margin-top: .25rem; }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-7 > * + * { margin-top: 1.75rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.pl-4 { padding-left: 1rem; }
.pb-1 { padding-bottom: .25rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-14 { padding-bottom: 3.5rem; }
.pt-1 { padding-top: .25rem; }
.pt-2 { padding-top: .5rem; }
.pt-3 { padding-top: .75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-20 { padding-top: 5rem; }

/* ---------- Tamaños ---------- */
.w-full { width: 100%; } .h-full { height: 100%; }
.w-3 { width: .75rem; } .h-3 { height: .75rem; }
.w-4 { width: 1rem; } .h-4 { height: 1rem; }
.w-5 { width: 1.25rem; } .h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; } .h-6 { height: 1.5rem; }
.w-7 { width: 1.75rem; } .h-7 { height: 1.75rem; }
.w-10 { width: 2.5rem; } .h-10 { height: 2.5rem; }
.w-11 { width: 2.75rem; } .h-11 { height: 2.75rem; }
.w-12 { width: 3rem; } .h-12 { height: 3rem; }
.w-14 { width: 3.5rem; } .h-14 { height: 3.5rem; }
.w-16 { width: 4rem; } .h-16 { height: 4rem; }
.w-32 { width: 8rem; }
.w-64 { width: 16rem; }
.h-20 { height: 5rem; }
.h-28 { height: 7rem; }
.h-64 { height: 16rem; }
.h-80 { height: 20rem; }
.min-h-screen { min-height: 100vh; }
.min-h-\[68vh\] { min-height: 68vh; }
.min-h-\[70vh\] { min-height: 70vh; }
.min-h-\[200px\] { min-height: 200px; }
@media (min-width: 768px) {
  .md\:min-h-\[92vh\] { min-height: 92vh; }
  .md\:min-h-\[86vh\] { min-height: 86vh; }
}
.min-w-\[220px\] { min-width: 220px; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-9xl { max-width: 96rem; }
.max-w-sm { max-width: 24rem; }
.max-w-xl { max-width: 36rem; }
.max-w-\[85\%\] { max-width: 85%; }

/* ---------- Tipografía ---------- */
.font-sans { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }
.italic { font-style: italic; }
.font-medium { font-weight: 500; }
.font-mono { font-family: 'Courier New', monospace; }
.uppercase { text-transform: uppercase; }
.normal-case { text-transform: none; }
.tracking-normal { letter-spacing: normal; }
.tracking-wide { letter-spacing: .04em; }
.tracking-widest { letter-spacing: .12em; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-lg { font-size: 1.125rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }
.whitespace-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.antialiased { -webkit-font-smoothing: antialiased; }
.leading-relaxed { line-height: 1.65; }
.leading-tight { line-height: 1.15; }
.underline { text-decoration: underline; }

/* ---------- Objetos multimedia ---------- */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.h-auto { height: auto; }

/* ---------- Transiciones / interacción ---------- */
.transition { transition: all .2s ease; }
.transition-opacity { transition: opacity .5s ease; }
.duration-500 { transition-duration: .5s; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:visible { visibility: visible; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(.25rem); }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: .5; }
.opacity-60 { opacity: .6; }
.opacity-90 { opacity: .9; }
.invisible { visibility: hidden; }
.cursor-move { cursor: move; }
.hover\:opacity-60:hover { opacity: .6; }
.hover\:opacity-70:hover { opacity: .7; }
.hover\:opacity-90:hover { opacity: .9; }
.hover\:bg-neutral-50:hover { background-color: #fafafa; }
.hover\:bg-bume-ivory:hover { background-color: var(--bume-ivory); }
.hover\:bg-bume-black:hover { background-color: var(--bume-black); }
.hover\:text-white:hover { color: #fff; }
.hover\:text-bume-black:hover { color: var(--bume-black); }
.backdrop-blur { backdrop-filter: blur(6px); }
.readonly, input[readonly] { color: #737373; }

/* ---------- Botones sólidos / contorno reutilizados en bloques ---------- */
.bg-transparent { background-color: transparent; }

/* ---------- Buscador rápido de columnas responsivas ---------- */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; }
  .md\:w-64 { width: 16rem; }
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:h-full { height: 100%; }
  .md\:text-4xl { font-size: 2.25rem; }
  .md\:text-6xl { font-size: 3.75rem; }
  .md\:text-xl { font-size: 1.25rem; }
  .md\:flex-row { flex-direction: row; }
  .md\:items-end { align-items: flex-end; }
  .md\:text-5xl { font-size: 3rem; }
  .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .md\:gap-20 { gap: 5rem; }
  .md\:row-span-2 { grid-row: span 2 / span 2; }
  .md\:h-20 { height: 5rem; }
  .md\:p-10 { padding: 2.5rem; }
}
.js-popup-gallery.grid { grid-auto-rows: 11rem; }
@media (max-width: 767px) {
  .md\:flex ~ #mobile-menu-toggle { display: block; }
}

/* ---------- Prosa (bloque de texto enriquecido) ---------- */
.prose-bume { font-family: var(--font-sans); font-weight: 300; font-size: 1.05rem; line-height: 1.85; color: #2A2823; }
.prose-bume p { margin: 0 0 1.15rem; }
.prose-bume a { text-decoration: none; border-bottom: 1px solid var(--bume-bronze); color: var(--bume-ink); }
.prose-bume ul, .prose-bume ol { margin: 0 0 1.15rem 1.25rem; }
.prose-bume li { margin-bottom: .4rem; }
.prose-bume h2 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 1.1rem; line-height: 1.15; }
.prose-bume h3 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.4rem; margin: 1.5rem 0 .75rem; }
.prose-bume strong { font-weight: 600; color: var(--bume-ink); }
/* CKEditor no guarda el tamaño de letra "Chico/Grande/Enorme" como un estilo
   en línea, sino como una de estas clases — sin esta regla, el tamaño se ve
   bien dentro del editor (que sí trae su propio CSS) pero desaparece en el
   sitio público, que no lo tenía. Mismos valores que usa el editor. */
.prose-bume .text-tiny { font-size: .7em; }
.prose-bume .text-small { font-size: .85em; }
.prose-bume .text-big { font-size: 1.4em; }
.prose-bume .text-huge { font-size: 1.8em; }
/* Mismo caso para el resaltador de texto (marcador/pluma): son clases, no
   estilos en línea. Mismos colores que usa el editor. */
.prose-bume .marker-yellow { background-color: #fdfd77; }
.prose-bume .marker-green { background-color: #62f962; }
.prose-bume .marker-pink { background-color: #fc7899; }
.prose-bume .marker-blue { background-color: #72ccfd; }
.prose-bume .pen-red { color: #e71313; background-color: transparent; }
.prose-bume .pen-green { color: #128a00; background-color: transparent; }

/* ---------- Lightbox de galería (Magnific Popup): fade al cambiar de imagen ---------- */
/* Magnific Popup inserta un <img class="mfp-img"> nuevo en cada navegación de la
   galería (no reutiliza el nodo), así que esta animación se dispara sola cada vez. */
.mfp-img { animation: bume-mfp-fade .35s ease; }
@keyframes bume-mfp-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Contenido embebido (bloque html_iframe: cotizador, tour virtual, etc.) ---------- */
/* Sin overflow:hidden: el contenido nunca se recorta, la sección crece a lo que el embed necesite. */
.embed-iframe-wrap { width: 100%; height: max(var(--embed-height, 800px), 88vh); }
.embed-iframe-wrap iframe,
.embed-iframe-wrap embed,
.embed-iframe-wrap object { width: 100%; height: 100%; border: none; display: block; }

/* ---------- Aviso de vista previa de borrador (solo admin/editor) ---------- */
.draft-preview-banner {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--bume-bronze); color: #fff; font-family: var(--font-sans);
  font-size: .78rem; font-weight: 500; letter-spacing: .02em; padding: .6rem 1rem; text-align: center;
}

/* ---------- Preloader: logo animado (se dibuja y luego se rellena) ---------- */
.bume-preloader {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bume-ink); transition: opacity .6s ease;
}
.bume-preloader.is-hidden { opacity: 0; pointer-events: none; }
.bume-preloader-mark { filter: drop-shadow(0 0 24px rgba(156,124,75,.25)); }
/* Estado por defecto (sin JS / antes de que GSAP cargue): el logo completo, quieto, sin animación rota. */
.bl-fill { fill: #fff; opacity: 1; }
.bl-stroke { display: none; fill: none; stroke: #fff; stroke-width: 12; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Skeleton placeholders para imágenes con lazy-load ---------- */
img[loading="lazy"] { background: #f0f0f0; }

/* ---------- Media picker (selector de biblioteca en formularios de bloques) ---------- */
/* Antes era una fila horizontal (miniatura + texto + botón) sin flex-wrap:
   en formularios con varias imágenes en grilla (galería) esa fila no cabía
   en el ancho de cada celda y el botón terminaba sobremontado sobre la
   miniatura. Apilado en columna, cada pieza usa el ancho completo de su
   celda y nunca se superpone, sin importar cuán angosta sea la columna. */
.media-picker { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.media-picker .media-picker-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; border: 1px solid #e5e5e5; background: #fafafa; }
.media-picker .media-picker-btn { border: 1px solid #111; padding: .35rem .75rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; border-radius: 4px; }
.media-picker .media-picker-btn:hover { background: #111; color: #fff; }
.media-picker-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.media-picker-modal { background: #fff; border-radius: 18px; width: 90%; max-width: 720px; max-height: 80vh; overflow-y: auto; padding: 1.5rem; }
.media-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: 1rem; }
.media-picker-grid .item { cursor: pointer; border: 2px solid transparent; border-radius: 4px; padding: .25rem; text-align: center; }
.media-picker-grid .item:hover { border-color: #111; }
.media-picker-grid img { width: 100%; height: 80px; object-fit: cover; border-radius: 3px; }
.media-picker-grid .item span { display: block; font-size: .65rem; margin-top: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .media-picker-grid { grid-template-columns: repeat(2, 1fr); } }

/* Selector visual de íconos (ver initIconPickers en admin.js): un <select>
   nativo no puede mostrar el SVG de cada opción, así que se oculta y en su
   lugar se pinta un botón + panel con buscador que sí muestra ícono y
   etiqueta de cada una, para elegir viendo el ícono en vez de solo el nombre. */
.icon-picker { position: relative; width: 100%; }
.icon-picker-native-select { display: none; }
.icon-picker-trigger {
  display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
  border: 1px solid rgba(16,16,16,.14); border-radius: 10px; padding: .55rem .8rem;
  background: #fff; font-size: .88rem; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease;
}
.icon-picker-trigger:hover { border-color: rgba(16,16,16,.28); }
.icon-picker-trigger[aria-expanded="true"] { border-color: var(--bume-bronze); box-shadow: 0 0 0 3px rgba(156,124,75,.12); }
.icon-picker-trigger-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--bume-bronze); display: flex; align-items: center; justify-content: center; }
.icon-picker-trigger-icon svg { width: 100%; height: 100%; }
.icon-picker-trigger-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; }
.icon-picker-trigger-label:empty::before { content: '— Sin ícono —'; color: #999; }
.icon-picker-trigger-chevron { flex-shrink: 0; color: rgba(16,16,16,.4); }
.icon-picker-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: min(360px, 92vw);
  background: #fff; border: 1px solid rgba(16,16,16,.12); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16,16,16,.16); padding: .7rem;
}
.icon-picker-panel.hidden { display: none; }
.icon-picker-search {
  width: 100%; border: 1px solid rgba(16,16,16,.14); border-radius: 8px; padding: .45rem .7rem;
  font-size: .82rem; margin-bottom: .6rem;
}
.icon-picker-search:focus { border-color: var(--bume-bronze); outline: none; box-shadow: 0 0 0 3px rgba(156,124,75,.12); }
.icon-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; max-height: 260px; overflow-y: auto; }
.icon-picker-option {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center;
  border: 1px solid transparent; border-radius: 8px; padding: .5rem .3rem; cursor: pointer; background: transparent;
  transition: background .15s ease, border-color .15s ease;
}
.icon-picker-option:hover { background: var(--bume-ivory); }
.icon-picker-option.is-selected { border-color: var(--bume-bronze); background: var(--bume-ivory); }
.icon-picker-option.hidden { display: none; }
.icon-picker-option-icon { width: 22px; height: 22px; color: var(--bume-ink); display: flex; align-items: center; justify-content: center; }
.icon-picker-option-icon svg { width: 100%; height: 100%; }
.icon-picker-option-label { font-size: .64rem; line-height: 1.2; color: #555; word-break: break-word; }
@media (max-width: 480px) {
  .icon-picker-panel { width: min(300px, 92vw); }
  .icon-picker-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Selector de país con banderita (WhatsApp / teléfonos): mismo patrón que
   el selector de íconos de arriba — el código de país nunca se escribe a
   mano, solo se elige de esta lista, y el <select> real queda oculto. */
.phone-input-group { display: flex; gap: .5rem; align-items: flex-start; }
.phone-input-group .country-picker { flex: 0 0 auto; width: auto; }
.phone-input-group input[type="tel"] { flex: 1 1 auto; min-width: 0; }
.country-picker { position: relative; }
.country-picker-native-select { display: none; }
.country-picker-trigger {
  display: flex; align-items: center; gap: .4rem; text-align: left; white-space: nowrap;
  border: 1px solid rgba(16,16,16,.14); border-radius: 10px; padding: .55rem .7rem;
  background: #fff; font-size: .88rem; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease;
}
.country-picker-trigger:hover { border-color: rgba(16,16,16,.28); }
.country-picker-trigger[aria-expanded="true"] { border-color: var(--bume-bronze); box-shadow: 0 0 0 3px rgba(156,124,75,.12); }
.country-picker-trigger-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; background: #eee; flex-shrink: 0; }
.country-picker-trigger-dial { color: #333; font-weight: 500; }
.country-picker-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: min(280px, 92vw);
  background: #fff; border: 1px solid rgba(16,16,16,.12); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16,16,16,.16); padding: .7rem;
}
.country-picker-panel.hidden { display: none; }
.country-picker-list { display: flex; flex-direction: column; gap: .1rem; max-height: 260px; overflow-y: auto; }
.country-picker-option {
  display: flex; align-items: center; gap: .55rem; text-align: left; width: 100%;
  border: 1px solid transparent; border-radius: 8px; padding: .45rem .5rem; cursor: pointer; background: transparent;
  font-size: .82rem; color: #333; transition: background .15s ease, border-color .15s ease;
}
.country-picker-option:hover { background: var(--bume-ivory); }
.country-picker-option.is-selected { border-color: var(--bume-bronze); background: var(--bume-ivory); }
.country-picker-option.hidden { display: none; }
.country-picker-option-flag { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; background: #eee; flex-shrink: 0; }
.country-picker-option-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.illustrated-map-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 460px;
  background-color: var(--bume-ivory);
  background-image: var(--map-image);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(156,124,75,.35);
}

.leaflet-map-frame { z-index: 0; }
.leaflet-map-frame .leaflet-control-attribution {
  background: rgba(255,255,255,.82); font-size: .65rem; padding: .1rem .5rem; border-radius: 4px 0 0 0;
  color: rgba(16,16,16,.55); box-shadow: none;
}
.leaflet-map-frame .leaflet-control-attribution a { color: rgba(16,16,16,.65); }

.link-picker { display: flex; flex-direction: column; gap: .5rem; }
.link-picker-field { width: 100%; border: 1px solid rgba(16,16,16,.14); border-radius: 7px; padding: .5rem .7rem; font-size: .85rem; background: #fff; }
.link-picker-field:focus { border-color: var(--bume-bronze); box-shadow: 0 0 0 3px rgba(156,124,75,.12); outline: none; }

.block-picker-modal { max-width: 780px; }
.block-picker-category { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bume-bronze, #9a7b4f); font-weight: 600; margin: 1.1rem 0 .6rem; }
.block-picker-category:first-of-type { margin-top: .25rem; }
.block-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.block-picker-card { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; text-align: left; border: 1px solid rgba(16,16,16,.1); border-radius: 12px; padding: .85rem .9rem; background: #fff; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.block-picker-card:hover { border-color: var(--bume-black, #101010); box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); }
.block-picker-card-icon { width: 34px; height: 34px; border-radius: 7px; background: #F5F1E8; display: flex; align-items: center; justify-content: center; color: var(--bume-black, #101010); }
.block-picker-card-label { font-size: .85rem; font-weight: 600; }
.block-picker-card-desc { font-size: .72rem; color: #767676; line-height: 1.35; }
@media (max-width: 640px) { .block-picker-grid { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================
   SISTEMA DE DISEÑO BUME — capa de firma visual
   Editorial inmobiliario: seriales itálicas grandes, cifras
   fantasma numeradas para el portafolio de desarrollos,
   reglas finas en vez de sombras, zoom lento en imágenes.
   ========================================================= */

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--bume-bronze);
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; display: inline-block; }
.eyebrow-center { justify-content: center; }
.eyebrow-center::before { display: none; }
.eyebrow-center::after { content: ''; width: 28px; height: 1px; background: currentColor; display: inline-block; }

.section-head { max-width: 46rem; margin: 0 auto 3rem; text-align: center; }
.section-head .eyebrow { margin-bottom: .9rem; }
.section-title { font-family: var(--font-serif); font-style: italic; font-weight: 500; line-height: 1.05; letter-spacing: -.01em; }

.hairline { border: none; border-top: 1px solid rgba(16,16,16,.12); margin: 0; }
.hairline-light { border-top-color: rgba(255,255,255,.18); }

/* ---------- Botones firma ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: 1rem 2.1rem; border: 1px solid currentColor; border-radius: 999px; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease-signature), box-shadow .3s var(--ease-signature), transform .3s var(--ease-signature);
}
.btn:hover { box-shadow: 0 10px 24px rgba(16,14,10,.16); transform: translateY(-1px); }
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: currentColor;
  transform: translateY(101%); transition: transform .45s var(--ease-signature);
}
.btn-primary { color: var(--bume-white); background: var(--bume-ink); border-color: var(--bume-ink); }
.btn-primary::before { background: var(--bume-bronze); }
.btn-primary:hover { color: var(--bume-white); }
.btn-outline-light { color: var(--bume-white); border-color: rgba(255,255,255,.7); }
.btn-outline-light::before { background: var(--bume-white); }
.btn-outline-light:hover { color: var(--bume-ink); }
.btn-outline-dark { color: var(--bume-ink); border-color: var(--bume-ink); }
.btn-outline-dark::before { background: var(--bume-ink); }
.btn-outline-dark:hover { color: var(--bume-white); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: scale(.98); }

/* ---------- Header / navegación ---------- */
.bume-header { transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease; }
.bume-header.is-scrolled { box-shadow: 0 1px 0 rgba(16,16,16,.06); }
.section-subnav {
  -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
}
.section-subnav::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .section-subnav > div { gap: 1.25rem; padding-left: 1rem; padding-right: 1rem; }
}
.section-subnav a { position: relative; padding-bottom: .35rem; color: rgba(16,16,16,.5); transition: color .3s ease; }
.section-subnav a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--bume-bronze); transition: width .3s var(--ease-signature); }
.section-subnav a.is-active { color: var(--bume-ink); }
.section-subnav a.is-active::after { width: 100%; }
.bume-nav-link { position: relative; padding-block: .35rem; }
.bume-nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-signature);
}
.bume-nav-link:hover::after, .bume-nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.bume-dropdown {
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .3s var(--ease-signature), transform .3s var(--ease-signature), visibility .3s;
}
.group:hover .bume-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.bume-logo-mark { transition: opacity .3s ease; }

/* ---------- Hero ---------- */
.bume-hero { position: relative; overflow: hidden; background: var(--bume-ink); isolation: isolate; }
.bume-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* El "zoom lento" (Ken Burns) está pensado para una <img> estática: es una
   simple transformación que el navegador compone en la GPU sin esfuerzo.
   Un <video> ya está pintando fotogramas continuamente por sí solo; sumarle
   la misma animación de transform provoca micro-tirones/temblor visibles
   que no pasan con una imagen. Por eso el zoom solo se aplica a la <img>. */
img.bume-hero-media { animation: bume-kenburns 18s ease-in-out infinite alternate; will-change: transform; }
video.bume-hero-media { backface-visibility: hidden; }
@keyframes bume-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.bume-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,14,10,.35) 0%, rgba(16,14,10,.15) 38%, rgba(16,14,10,.75) 100%);
}
.bume-hero-content { position: relative; z-index: 2; }
.bume-hero-title {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: 1.02; letter-spacing: -.01em;
  text-shadow: 0 2px 40px rgba(0,0,0,.25);
}
.bume-hero-sub { font-family: var(--font-sans); font-weight: 300; letter-spacing: .01em; line-height: 1.45; }
.bume-scrolldown {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 2;
  width: 1px; height: 46px; background: rgba(255,255,255,.5); overflow: hidden;
}
.bume-scrolldown::after {
  content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: #fff;
  animation: bume-scrolldown 2.2s ease-in-out infinite;
}
@keyframes bume-scrolldown { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }

/* ---------- Reveal en scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-signature), transform .9s var(--ease-signature); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Antes de que JS agregue "is-visible", estas tarjetas no tenían ningún
   estado inicial oculto — se veían completas desde el primer instante y,
   justo al entrar en pantalla, se disparaba la animación cuyo fotograma
   "from" es opacity:0: eso las hacía parpadear (visibles → de golpe
   invisibles → aparecen otra vez). Ocultarlas desde antes evita el salto. */
.reveal-stagger > * { opacity: 0; }
.reveal-stagger.is-visible > * { animation: bume-fade-up .8s var(--ease-signature) both; }
.reveal-stagger.is-visible > *:nth-child(1) { animation-delay: .02s; }
.reveal-stagger.is-visible > *:nth-child(2) { animation-delay: .12s; }
.reveal-stagger.is-visible > *:nth-child(3) { animation-delay: .22s; }
.reveal-stagger.is-visible > *:nth-child(4) { animation-delay: .32s; }
.reveal-stagger.is-visible > *:nth-child(5) { animation-delay: .42s; }
@keyframes bume-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Índice editorial (firma visual: portafolio numerado) ---------- */
.index-card { position: relative; display: block; overflow: hidden; }
.index-num {
  font-family: var(--font-serif); font-style: italic; font-size: clamp(3rem, 7vw, 5rem);
  line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.7);
  position: absolute; top: 1.25rem; left: 1.25rem; z-index: 3; transition: transform .5s var(--ease-signature);
}
.index-card:hover .index-num { transform: translateX(6px); }
.index-media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--bume-ivory-deep); }
.index-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-signature); filter: saturate(1.02); }
.index-card:hover .index-media img { transform: scale(1.06); }
.index-media .index-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,14,10,0) 45%, rgba(16,14,10,.72) 100%); }
.index-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 1.25rem 1.4rem; color: var(--bume-white); }
.index-caption .name { font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; }
.index-caption .see-more { display: inline-flex; align-items: center; gap: .4em; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; margin-top: .4rem; opacity: 0; transform: translateY(6px); transition: all .35s var(--ease-signature); }
.index-card:hover .index-caption .see-more { opacity: 1; transform: translateY(0); }

/* ---------- Tarjetas / columnas ---------- */
.bume-card { position: relative; }
.bume-card-media { overflow: hidden; background: var(--bume-ivory-deep); }
.bume-card-media img { transition: transform .7s var(--ease-signature); }
.bume-card:hover .bume-card-media img { transform: scale(1.05); }

/* ---------- Íconos de amenidades (sistema propio, sin librería externa) ---------- */
.amenity-icon {
  width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: var(--bume-ivory); border: 1px solid rgba(16,16,16,.08); color: var(--bume-bronze);
  transition: background .35s ease, color .35s ease, transform .35s var(--ease-signature);
}
.amenity-item:hover .amenity-icon { background: var(--bume-ink); color: var(--bume-bronze-light); transform: translateY(-4px); }
.amenity-icon svg { width: 24px; height: 24px; }

/* ---------- Galería con lightbox ---------- */
.doc-download-card { border-radius: 14px; transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s var(--ease-signature); }
.doc-download-card:hover { box-shadow: 0 12px 28px rgba(16,16,16,.1); transform: translateY(-2px); }

/* ---------- Badge "Próximamente" (desarrollos) ---------- */
.coming-soon-badge {
  display: inline-flex; align-items: center; gap: .5em;
  background: linear-gradient(135deg, var(--bume-ink) 0%, #2b241a 45%, var(--bume-bronze) 100%);
  color: #fff; font-family: var(--font-sans); font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; line-height: 1;
  padding: .5rem .9rem; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(16,14,10,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
  white-space: nowrap;
}
.coming-soon-badge .dot { position: relative; width: 6px; height: 6px; border-radius: 999px; background: var(--bume-bronze-light); flex-shrink: 0; }
.coming-soon-badge .dot::before {
  content: ''; position: absolute; inset: -4px; border-radius: 999px; background: var(--bume-bronze-light);
  opacity: .55; animation: coming-soon-ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes coming-soon-ping { 0% { transform: scale(1); opacity: .55; } 75%, 100% { transform: scale(2.2); opacity: 0; } }

.coming-soon-badge-corner { position: absolute; top: .85rem; left: .85rem; z-index: 6; }
.coming-soon-clickable { cursor: pointer; }

.gallery-item { position: relative; overflow: hidden; display: block; border-radius: 10px; }
.gallery-item img { transition: transform .7s var(--ease-signature); }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after {
  content: ''; position: absolute; inset: 0; background: rgba(16,14,10,0); transition: background .35s ease;
}
.gallery-item:hover::after { background: rgba(16,14,10,.18); }
.gallery-item .zoom-mark {
  position: absolute; right: .75rem; bottom: .75rem; width: 32px; height: 32px; border-radius: 999px;
  background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.7); transition: all .3s var(--ease-signature);
}
.gallery-item:hover .zoom-mark { opacity: 1; transform: scale(1); }

/* ---------- Video ---------- */
.video-trigger .play-ring {
  width: 84px; height: 84px; border-radius: 999px; border: 1px solid rgba(255,255,255,.8);
  display: flex; align-items: center; justify-content: center; transition: all .4s var(--ease-signature);
}
.video-trigger:hover .play-ring { background: var(--bume-white); transform: scale(1.08); }
.video-trigger:hover .play-ring svg { fill: var(--bume-ink); }
.video-trigger .play-ring svg { transition: fill .3s ease; }

/* ---------- Carrusel ---------- */
.bume-carousel-caption { font-family: var(--font-serif); font-style: italic; }
.bume-carousel-arrow { transition: background .3s ease, transform .3s var(--ease-signature); }
.bume-carousel-arrow:hover { background: var(--bume-white); transform: translateY(-50%) scale(1.08); }
.bume-carousel-dot { transition: all .3s ease; }
.bume-carousel-dot.is-active { width: 22px; border-radius: 999px; }

/* ---------- Formularios firma ---------- */
.field { position: relative; }
.field label { display: block; font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(16,16,16,.5); margin-bottom: .5rem; }
.field input, .field textarea, .field select {
  width: 100%; border: none; border-bottom: 1px solid rgba(16,16,16,.25); background: transparent;
  padding: .65rem .1rem; font-family: var(--font-sans); font-size: 1rem; transition: border-color .3s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--bume-ink); outline: none; }
.field-light label { color: rgba(255,255,255,.6); }
.field-light input, .field-light textarea, .field-light select { color: #fff; border-bottom-color: rgba(255,255,255,.35); }
.field-light input:focus, .field-light textarea:focus, .field-light select:focus { border-color: #fff; }

/* ---------- Footer ---------- */
.bume-footer a.footer-link { position: relative; }
.bume-footer a.footer-link:hover { color: var(--bume-bronze-light); }
.social-chip { width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; transition: all .3s var(--ease-signature); }
.social-chip:hover { background: var(--bume-bronze); border-color: var(--bume-bronze); transform: translateY(-3px); }

/* ---------- Blog: like, compartir, comentarios ---------- */
.social-chip-dark { width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(16,16,16,.15); color: var(--bume-ink); display: flex; align-items: center; justify-content: center; transition: all .3s var(--ease-signature); cursor: pointer; }
.social-chip-dark:hover { background: var(--bume-bronze); border-color: var(--bume-bronze); color: var(--bume-white); transform: translateY(-3px); }

.like-btn {
  display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.1rem;
  border: 1px solid rgba(16,16,16,.15); border-radius: 999px; background: transparent;
  color: var(--bume-ink); font-family: var(--font-sans); font-size: .85rem; cursor: pointer;
  transition: all .3s var(--ease-signature);
}
.like-btn svg { fill: none; transition: fill .3s var(--ease-signature), stroke .3s var(--ease-signature); }
.like-btn:hover { border-color: var(--bume-bronze); color: var(--bume-bronze); }
.like-btn.is-liked { border-color: var(--bume-bronze); color: var(--bume-bronze); }
.like-btn.is-liked svg { fill: var(--bume-bronze); stroke: var(--bume-bronze); }

/* ---------- WhatsApp: burbuja flotante y modal ---------- */
.wa-fab {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
  width: 60px; height: 60px; border-radius: 999px;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(16,14,10,.28), 0 2px 8px rgba(37,211,102,.35);
  transition: transform .3s var(--ease-signature), box-shadow .3s var(--ease-signature);
}
.wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 36px rgba(16,14,10,.32), 0 4px 14px rgba(37,211,102,.45); }
.wa-fab:active { transform: scale(.97); }
.wa-fab-ring {
  position: absolute; inset: 0; border-radius: 999px; background: #25D366;
  animation: wa-ping 2.8s ease-out infinite;
}
@keyframes wa-ping {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}

.wa-modal {
  position: relative; background: var(--bume-white); width: 100%; max-width: 25rem;
  padding: 2.75rem 2.25rem 2.25rem; text-align: center; border-radius: 20px;
  box-shadow: 0 40px 90px rgba(16,14,10,.4);
  animation: bume-pop-in .45s var(--ease-signature);
}
.wa-modal-close {
  position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; color: rgba(16,16,16,.4);
  transition: all .25s ease;
}
.wa-modal-close:hover { background: var(--bume-ivory); color: var(--bume-ink); }
.wa-modal-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 999px; background: #25D366; box-shadow: 0 8px 20px rgba(37,211,102,.35);
}
.wa-modal .field { text-align: left; }
.wa-submit {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: #25D366; color: #fff; padding: 1rem; font-family: var(--font-sans);
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px; transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.wa-submit:hover { box-shadow: 0 10px 24px rgba(37,211,102,.35); }
.wa-submit:hover { background: #1EBE5A; }
.wa-submit:active { transform: scale(.98); }

/* ---------- Popup ---------- */
.bume-popup-overlay {
  position: fixed; inset: 0; z-index: 70; padding: 1.5rem;
  background: rgba(20,18,15,.6); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
/* Selector compuesto (mayor especificidad que .hidden por sí sola) para garantizar que
   SIEMPRE se oculte sin importar el orden en que aparezcan las reglas en este archivo. */
.bume-popup-overlay.hidden { display: none; }
.bume-popup-card {
  position: relative; background: var(--bume-white); width: 100%; max-width: 32rem; max-height: 88vh;
  overflow-y: auto; overflow-x: hidden; border-radius: 20px;
  animation: bume-pop-in .45s var(--ease-signature); box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
/* Tamaño del modal, elegido por popup desde el panel de admin. */
.bume-popup-card--sm { max-width: 24rem; }
.bume-popup-card--md { max-width: 32rem; }
.bume-popup-card--lg { max-width: 40rem; }
.bume-popup-card--xl { max-width: 54rem; }
/* Los bloques de contenido están pensados para páginas completas (mucho padding vertical);
   dentro de un popup compacto se recortan a un espaciado fijo y más generoso que el hueco
   angosto de antes, sin importar el bloque que sea. */
.bume-popup-card section { padding: 2.5rem 2.25rem !important; }
.bume-popup-card .bume-hero { min-height: 0 !important; }
/* Caso especial: una imagen "ancho completo" dentro de un popup debe llegar de
   borde a borde (sin el padding fijo de arriba), típico de un popup-banner promocional. */
.bume-popup-card section.popup-bleed-eligible { padding: 0 !important; }
/* Los bloques con columnas (imagen+texto, tarjetas, íconos...) usan clases
   "md:grid-cols-*" que reaccionan al ancho de la PANTALLA, no al del popup:
   en escritorio, ese punto de quiebre se activa aunque el modal sea angosto,
   apretando cada columna a un ancho absurdo y volviendo el popup altísimo.
   En los tamaños chico/mediano se fuerza una sola columna para aprovechar
   todo el ancho disponible; grande/extra grande sí tienen espacio real para
   dos columnas y las conservan. */
.bume-popup-card--sm .grid, .bume-popup-card--md .grid { grid-template-columns: 1fr !important; }
.bume-popup-card .grid { gap: 1.5rem !important; }
/* Mismo problema con los títulos (text-3xl md:text-5xl): a ese tamaño se
   desbordan en un modal angosto. Un tamaño fijo y compacto siempre cabe. */
.bume-popup-card .section-title { font-size: 1.5rem !important; line-height: 1.3 !important; margin-bottom: .75rem !important; }
/* La imagen del bloque "Imagen + Texto" trae una proporción fija 4:5 pensada
   para una columna de página completa; dentro de un popup se deja que la
   imagen use su propia proporción natural, completa y sin recortar. */
.bume-popup-card .bume-card-media { aspect-ratio: auto !important; max-height: 55vh; }
@keyframes bume-pop-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ---------- Zona de arrastrar y soltar (subida de archivos) ---------- */
.dropzone {
  position: relative; border: 1.5px dashed rgba(16,16,16,.22); border-radius: 16px; background: var(--bume-ivory);
  padding: 2.25rem 1.5rem; text-align: center; transition: border-color .25s ease, background .25s ease;
}
.dropzone:hover { border-color: var(--bume-bronze); }
.dropzone.is-dragover { border-color: var(--bume-bronze); background: #FBF6EC; }
.dropzone-icon { width: 52px; height: 52px; margin: 0 auto .9rem; border-radius: 999px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.06); color: var(--bume-bronze); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone-filename { font-size: .8rem; color: var(--bume-bronze); font-weight: 600; margin-top: .5rem; }

/* ---------- Utilidades de color adicionales para la firma ---------- */
.text-bronze { color: var(--bume-bronze); }
.bg-ivory-deep { background-color: var(--bume-ivory-deep); }
.bg-ink { background-color: var(--bume-ink); }
.bg-ink\/60 { background-color: rgba(20,18,15,.6); }

/* =========================================================
   PANEL DE ADMINISTRACIÓN — capa de pulido visual
   ========================================================= */

.admin-shell { background: #F6F5F2; }

/* Sidebar */
.admin-sidebar { background: var(--bume-ink); transition: width .25s ease; }
.admin-sidebar-link {
  display: flex; align-items: center; gap: .75rem; padding: .7rem 1.5rem; font-size: .84rem;
  color: rgba(255,255,255,.62); border-left: 2px solid transparent; transition: all .25s ease;
}
.admin-sidebar-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.admin-sidebar-link.is-active { color: #fff; background: rgba(255,255,255,.07); border-left-color: var(--bume-bronze); }
.admin-sidebar-link svg { width: 18px; height: 18px; opacity: .85; flex-shrink: 0; }

.admin-sidebar-collapse-toggle {
  margin-left: auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; color: rgba(255,255,255,.6); flex-shrink: 0; transition: background .2s ease, transform .25s ease;
}
.admin-sidebar-collapse-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Colapsado (escritorio): un riel angosto solo con íconos, sin textos, para
   aprovechar más ancho de pantalla en el contenido. */
.admin-sidebar.is-collapsed { width: 4.5rem; }
.admin-sidebar.is-collapsed .admin-sidebar-hide-collapsed { display: none; }
.admin-sidebar.is-collapsed .admin-sidebar-link { justify-content: center; padding: .7rem; }
.admin-sidebar.is-collapsed .admin-sidebar-collapse-toggle { margin: 0 auto; }
.admin-sidebar.is-collapsed .admin-sidebar-collapse-toggle svg { transform: rotate(180deg); }

/* Barra superior y telón de fondo solo para móvil (ver @media más abajo):
   en pantallas chicas el sidebar deja de competir por ancho en una fila y
   se convierte en un panel deslizante que se abre por encima del contenido. */
.admin-mobile-bar { display: none; }
.admin-sidebar-backdrop { display: none; }

@media (max-width: 767px) {
  .admin-mobile-bar {
    display: flex; align-items: center; gap: .9rem; background: var(--bume-ink); color: #fff;
    padding: 1rem 1.25rem; position: sticky; top: 0; z-index: 45;
  }
  .admin-mobile-bar-toggle { color: #fff; display: flex; }
  /* El sidebar deja de ser una columna en flujo (ya no compite por ancho con
     <main>) y se vuelve un panel fijo que entra/sale deslizándose. */
  .admin-sidebar {
    position: fixed !important; top: 0; left: 0; height: 100vh !important; width: 16rem !important;
    z-index: 60; transform: translateX(-100%); transition: transform .3s var(--ease-signature);
  }
  .admin-sidebar.is-mobile-open { transform: translateX(0); }
  /* El colapso de escritorio no aplica en móvil: siempre completo dentro del panel. */
  .admin-sidebar.is-collapsed .admin-sidebar-hide-collapsed { display: revert; }
  .admin-sidebar-collapse-toggle { display: none; }
  .admin-sidebar-backdrop.is-visible { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55; }
  /* El contenido usa el mismo padding que en escritorio (p-8/md:p-10); en un
     teléfono eso deja muy poco ancho real para el contenido. */
  main.admin-main { padding: 1.1rem .9rem; }
}

/* Tarjetas */
.admin-card { background: #fff; border-radius: 16px; border: 1px solid rgba(16,16,16,.06); box-shadow: 0 1px 2px rgba(16,16,16,.03); }
.admin-card-hover { transition: box-shadow .25s ease, transform .25s ease; }
.admin-card-hover:hover { box-shadow: 0 8px 24px rgba(16,16,16,.08); transform: translateY(-2px); }

.stat-card { position: relative; padding: 1.5rem 1.6rem; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bume-bronze); }
.stat-card .stat-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--bume-ivory); color: var(--bume-bronze); display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.stat-card .stat-value { font-family: var(--font-serif); font-style: italic; font-size: 2.4rem; line-height: 1; color: var(--bume-ink); }
.stat-card .stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(16,16,16,.45); margin-top: .5rem; }

/* Botones de panel (más compactos que los del sitio público) */
.admin-btn {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding: .65rem 1.2rem; border-radius: 999px;
  transition: all .2s ease; cursor: pointer; margin-bottom: 1rem;
}
.admin-btn-primary { background: var(--bume-ink); color: #fff; }
.admin-btn-primary:hover { background: #000; box-shadow: 0 6px 16px rgba(16,16,16,.25); transform: translateY(-1px); }
.admin-btn-ghost { background: transparent; color: var(--bume-ink); border: 1px solid rgba(16,16,16,.15); }
.admin-btn-ghost:hover { background: rgba(16,16,16,.04); }
.admin-btn-danger { color: #b91c1c; }
.admin-btn-danger:hover { background: #fef2f2; }

/* Filas de lista */
.admin-row { transition: background .2s ease; }
.admin-row:hover { background: #FAFAF8; }
/* Estas filas de listado (páginas, popups, carruseles, usuarios...) ponen
   título a la izquierda y botones de acción a la derecha en una sola fila;
   en pantallas angostas ese renglón no cabe y los botones se salen del
   contenedor. Se apilan en columna y los botones pueden pasar a una
   segunda línea en vez de desbordar horizontalmente. */
@media (max-width: 640px) {
  .admin-row.flex { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .admin-row.flex > div:last-child { flex-wrap: wrap; width: 100%; }
}

/* Estado vacío */
.empty-state { text-align: center; padding: 3.5rem 1.5rem; }
.empty-state .empty-icon { width: 56px; height: 56px; margin: 0 auto 1.1rem; border-radius: 999px; background: var(--bume-ivory); color: var(--bume-bronze); display: flex; align-items: center; justify-content: center; }
.empty-state p.empty-title { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--bume-ink); margin-bottom: .35rem; }
.empty-state p.empty-hint { font-size: .82rem; color: rgba(16,16,16,.45); }

/* Badges de estado */
.badge { display: inline-flex; align-items: center; gap: .35em; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: .3rem .65rem; border-radius: 999px; }
.badge-live { background: #ECFDF5; color: #059669; }
.badge-live::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: #059669; }
.badge-draft { background: #F3F4F6; color: #6B7280; }
.badge-draft::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: #9CA3AF; }
.badge-danger { background: #FEF2F2; color: #DC2626; }
.badge-danger::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: #DC2626; }

/* Formularios de panel */
.admin-field label { display: block; font-size: .74rem; font-weight: 600; color: #444; margin-bottom: .4rem; }
.admin-field input[type="text"], .admin-field input[type="email"], .admin-field input[type="password"],
.admin-field input[type="number"], .admin-field input[type="date"], .admin-field input[type="tel"],
.admin-field input[type="url"], .admin-field textarea, .admin-field select {
  width: 100%; border: 1px solid rgba(16,16,16,.14); border-radius: 10px; padding: .6rem .8rem; font-size: .88rem;
  background: #fff; transition: border-color .2s ease, box-shadow .2s ease;
}
.admin-field input:focus, .admin-field textarea:focus, .admin-field select:focus {
  border-color: var(--bume-bronze); box-shadow: 0 0 0 3px rgba(156,124,75,.12); outline: none;
}

/* Acordeón de secciones (desarrollos) */
.accordion-panel { border: 1px solid rgba(16,16,16,.08); border-radius: 14px; overflow: hidden; background: #fff; }
.accordion-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.1rem 1.4rem; text-align: left; }
.accordion-trigger:hover { background: #FAFAF8; }
.accordion-chevron { transition: transform .3s var(--ease-signature); }
.accordion-trigger[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }

/* Bloque del editor (páginas / header / footer / desarrollos) */
.block-row { border: 1px solid rgba(16,16,16,.08); border-radius: 14px; overflow: hidden; background: #fff; }
.block-row-head { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.1rem; background: #FAFAF8; border-bottom: 1px solid rgba(16,16,16,.06); }
.block-type-icon { width: 30px; height: 30px; border-radius: 7px; background: var(--bume-ivory); color: var(--bume-bronze); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.block-drag-handle { cursor: grab; color: rgba(16,16,16,.3); }
.block-drag-handle:active { cursor: grabbing; }
.block-row.sortable-ghost { opacity: .4; }

/* En pantallas angostas estas cabeceras (título/ícono + acciones a la
   derecha, todo en una sola fila sin wrap) se salen del contenedor: los
   botones quedan cortados o fuerzan scroll horizontal de toda la página.
   Se apilan en columna y el grupo de acciones puede pasar a más de una
   línea en vez de desbordar. */
@media (max-width: 640px) {
  .block-row-head { flex-direction: column; align-items: flex-start; gap: .65rem; }
  .block-row-head > div:last-child { flex-wrap: wrap; width: 100%; }
  .accordion-trigger { flex-wrap: wrap; gap: .5rem; padding: 1rem 1.1rem; }
  .accordion-trigger > span:first-child { flex-wrap: wrap; min-width: 0; flex: 1 1 100%; }
  /* Cabecera de sección de desarrollo: form de renombrar + subir/bajar/eliminar
     + toggle del acordeón, todo junto — la peor ofensora en móvil. */
  .dev-section-head { flex-wrap: wrap; }
  .dev-section-head form.flex-1 { flex: 1 1 100%; }
  .dev-section-actions { flex-wrap: wrap; }
}

/* Login */
.admin-login-shell { position: relative; background: var(--bume-ink); overflow: hidden; }
.admin-login-backdrop {
  position: fixed; inset: 0; background-size: cover; background-position: center;
  filter: saturate(.85) brightness(.85); transform: scale(1.04);
}
.admin-login-backdrop-scrim {
  position: fixed; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,16,16,.55) 0%, rgba(16,16,16,.72) 55%, rgba(16,16,16,.92) 100%),
    radial-gradient(circle at 50% 15%, rgba(16,16,16,.2) 0%, rgba(16,16,16,.6) 70%);
}
.admin-login-rule { display: inline-block; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--bume-bronze), transparent); }
.admin-login-card {
  background: rgba(255,255,255,.97); width: 100%; padding: 2.4rem 2.35rem 2.1rem; border-radius: 4px;
  box-shadow: 0 50px 120px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06) inset;
  border-top: 2px solid var(--bume-bronze);
  animation: admin-login-rise .5s ease both;
}
@keyframes admin-login-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .admin-login-card { animation: none; } }

/* ---------- Vista previa en vivo (editor de bloques) ---------- */
.block-editor-shell { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.block-editor-shell.has-preview > .admin-card:first-child { width: 100%; }
@media (min-width: 1280px) {
  .block-editor-shell.has-preview { flex-direction: row; }
  .block-editor-shell.has-preview > .admin-card:first-child { flex: 0 0 460px; width: 460px; }
  .block-editor-shell.has-preview > .preview-panel { flex: 1 1 auto; min-width: 0; }
}
.preview-panel { position: sticky; top: 1.25rem; width: 100%; overflow: hidden; display: flex; flex-direction: column; }
.preview-toolbar {
  display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.1rem;
  background: #FAFAF8; border-bottom: 1px solid rgba(16,16,16,.06); font-size: .78rem; font-weight: 500; color: #444;
}
.preview-dot { width: 7px; height: 7px; border-radius: 999px; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.18); display: inline-block; }
.preview-tool-btn { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: rgba(16,16,16,.5); transition: all .2s ease; }
.preview-tool-btn:hover { background: rgba(16,16,16,.06); color: var(--bume-ink); }
.preview-frame-wrap { flex: 1 1 auto; height: min(calc(100vh - 8rem), 760px); background: #fff; }
.preview-frame-wrap iframe { width: 100%; height: 100%; border: none; display: block; }