/* ===== Tokens ===== */
:root{
  --bg: #101d2e;
  --bg-alt: #0b1522;
  --bg-soft: #14243a;
  --panel: rgba(255,255,255,0.045);
  --panel-border: rgba(255,255,255,0.09);
  --cyan: #35e0d0;
  --cyan-deep: #1a7d74;
  --cyan-dim: rgba(53,224,208,0.32);
  --gold: #d1a860;
  --text: #eef2f6;
  --text-dim: #9fb0c3;
  --text-faint: #64768c;
  --radius-lg: 1.9rem;
  --ease: cubic-bezier(0.32,0.72,0,1);
  --font-head: "Space Grotesk", sans-serif;
  --font-body: "Plus Jakarta Sans", sans-serif;
  --shell: min(1220px, 92vw);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
h1,h2,h3{font-family:var(--font-head);font-weight:600;letter-spacing:-0.02em;line-height:1.08;}

.grain{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  display:inline-block;
  padding:.35rem .9rem;
  border-radius:999px;
  border:1px solid var(--panel-border);
  background:var(--panel);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan);
  font-weight:600;
  margin-bottom:1.25rem;
}

/* ===== Character system (transparent cutout, bottom-faded into bg + ambient glow) ===== */
.char{position:relative;display:inline-block;}
.char img{position:relative;z-index:1;width:100%;height:auto;}
.char::before{ /* ambient glow behind, integrates character with page */
  content:"";position:absolute;left:50%;top:2%;
  width:88%;height:82%;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 42%, var(--cyan-dim), transparent 70%);
  opacity:.3;filter:blur(30px);z-index:0;
}
/* El hero (char-lg) es una figura de pie angosta y alta: se dimensiona por ALTURA, no por
   ancho, si no se escalaría enorme de alto. El ancho se deriva del aspect-ratio. */
.char-lg{width:auto;max-width:100%;}
.char-lg img{height:min(72vh,660px);width:auto;max-width:100%;}
.char-md{width:min(300px,70vw);}
.char-sm{width:min(180px,44vw);}
.char-sm::before{opacity:.22;filter:blur(20px);}

/* ===== Nav ===== */
.nav-pill{
  position:fixed;top:1.25rem;left:50%;transform:translateX(-50%);
  z-index:40;width:min(960px,92vw);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.6rem .7rem .6rem 1.25rem;
  background:rgba(16,29,46,0.72);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--panel-border);
  border-radius:999px;
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.nav-pill.scrolled{background:rgba(11,21,34,0.9);box-shadow:0 10px 30px rgba(0,0,0,0.3);}
.nav-logo{display:flex;align-items:center;gap:.6rem;font-family:var(--font-head);font-weight:700;font-size:1.02rem;flex-shrink:0;}
.nav-logo-badge{
  display:grid;place-items:center;width:2rem;height:2rem;border-radius:.65rem;
  background:linear-gradient(155deg,var(--cyan),var(--cyan-deep));
  color:#06201c;font-size:.72rem;font-weight:700;font-family:var(--font-head);
}
.nav-links{display:flex;gap:1.8rem;font-size:.88rem;color:var(--text-dim);}
.nav-links a{transition:color .3s var(--ease);position:relative;}
.nav-links a:hover{color:var(--text);}
.nav-actions{display:flex;align-items:center;gap:1.2rem;flex-shrink:0;}
.nav-login{font-size:.88rem;color:var(--text-dim);transition:color .3s var(--ease);}
.nav-login:hover{color:var(--text);}
.nav-burger{display:none;}

.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.7rem .7rem .7rem 1.3rem;border-radius:999px;
  font-size:.88rem;font-weight:600;font-family:var(--font-body);
  background:var(--text);color:var(--bg-alt);cursor:pointer;border:none;
  transition:transform .5s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.btn-icon{
  display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;
  background:rgba(14,20,32,0.12);transition:transform .5s var(--ease);
}
.btn:hover .btn-icon{transform:translate(2px,-2px) scale(1.06);}
.btn:active{transform:scale(.98);}
.btn-small{padding:.5rem .5rem .5rem 1.05rem;font-size:.82rem;}
.btn-small .btn-icon{width:1.6rem;height:1.6rem;}
.btn-primary{background:var(--cyan);color:#04231f;box-shadow:0 8px 24px rgba(53,224,208,0.22);}
.btn-primary:hover{box-shadow:0 12px 32px rgba(53,224,208,0.34);}
.btn-primary .btn-icon{background:rgba(4,35,31,0.14);}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--panel-border);padding:.7rem 1.3rem;}
.btn-ghost:hover{border-color:var(--cyan-dim);background:var(--panel);}
/* "Vista previa" queda así una fracción de segundo mientras se termina de guardar un
   arrastre de posición/zoom — evita que abra con datos más viejos que lo que se acaba de
   mover (ver marcarGuardando en catalogo-web.html). pointer-events:none de una vez bloquea
   el click, no hace falta lógica aparte para impedirlo. */
.btn-disabled{opacity:.45;pointer-events:none;cursor:default;}
.btn-large{padding:.95rem .95rem .95rem 1.7rem;font-size:1rem;}

.nav-overlay{
  position:fixed;inset:0;z-index:39;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  background:rgba(11,21,34,0.94);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s var(--ease);
}
.nav-overlay.open{opacity:1;visibility:visible;}
.overlay-link{
  font-family:var(--font-head);font-size:1.6rem;font-weight:600;
  opacity:0;transform:translateY(2.5rem);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.nav-overlay.open .overlay-link{opacity:1;transform:translateY(0);}
.nav-overlay.open .overlay-link:nth-child(2){transition-delay:.05s;}
.nav-overlay.open .overlay-link:nth-child(3){transition-delay:.1s;}
.nav-overlay.open .overlay-link:nth-child(4){transition-delay:.15s;}
.nav-overlay.open .overlay-link:nth-child(5){transition-delay:.2s;}
.overlay-link-cta{color:var(--cyan);}

/* ===== Hero ===== */
.hero{position:relative;min-height:100dvh;display:flex;align-items:center;padding:9rem 1.5rem 3rem;overflow:hidden;}
.hero-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 60% at 76% 40%, var(--cyan-dim), transparent 68%);opacity:.2;}
.hero-inner{position:relative;z-index:1;width:var(--shell);margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center;}
.hero-copy h1{font-size:clamp(2.4rem,4.8vw,3.7rem);margin-bottom:1.4rem;}
.hero-sub{color:var(--text-dim);font-size:1.1rem;max-width:36rem;margin-bottom:2rem;}
.hero-sub strong{color:var(--text);}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.2rem;}
.hero-note{font-size:.8rem;color:var(--text-faint);}
.hero-art{display:flex;justify-content:center;align-items:center;}

/* ===== Trust band ===== */
.trust-band{border-top:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border);background:var(--bg-alt);}
.trust-inner{width:var(--shell);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.4rem;padding:1.2rem 1rem;}
.trust-item{font-size:.9rem;color:var(--text-dim);}
.trust-item b{color:var(--cyan);font-family:var(--font-head);}
.trust-dot{width:4px;height:4px;border-radius:50%;background:var(--text-faint);opacity:.5;}

/* ===== Sections generic ===== */
section{padding:7rem 1.5rem;position:relative;}
.section-head{width:min(740px,100%);margin:0 auto 3.5rem;text-align:center;}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);}
.section-sub{color:var(--text-dim);margin-top:.9rem;font-size:1.02rem;}

/* ===== Steps (Cómo funciona) ===== */
.steps-grid{width:var(--shell);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.step{
  position:relative;overflow:hidden;
  border-radius:calc(var(--radius-lg) + .2rem);
  background:linear-gradient(180deg, var(--bg-soft), var(--bg-alt));
  border:1px solid var(--panel-border);
  transition:transform .5s var(--ease),border-color .4s var(--ease);
  padding-top:1rem;
}
.step:hover{transform:translateY(-6px);border-color:var(--cyan-dim);}
.step-art{
  position:relative;display:flex;justify-content:center;align-items:flex-end;
  height:16rem;margin-bottom:-.5rem;
}
.step-art::before{ /* glow behind character */
  content:"";position:absolute;left:50%;top:8%;width:70%;height:80%;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 45%, var(--cyan-dim), transparent 70%);
  opacity:.28;filter:blur(26px);
}
.step-art img{position:relative;z-index:1;width:auto;height:100%;}
.step-body{position:relative;z-index:2;padding:0 1.7rem 2rem;}
.step-num{display:inline-block;font-family:var(--font-head);color:var(--cyan);font-size:.78rem;font-weight:700;letter-spacing:.08em;}
.step h3{font-size:1.22rem;margin:.5rem 0 .5rem;}
.step p{color:var(--text-dim);font-size:.94rem;}

/* ===== Bento features ===== */
.bento{width:var(--shell);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.card{padding:.35rem;border-radius:calc(var(--radius-lg) + .35rem);background:var(--panel);border:1px solid var(--panel-border);}
.card-inner{padding:2.3rem 2rem;border-radius:var(--radius-lg);background:var(--bg-alt);height:100%;box-shadow:inset 0 1px 1px rgba(255,255,255,0.06);}
.card-icon{color:var(--cyan);font-size:1.1rem;}
.card h3{font-size:1.22rem;margin:1rem 0 .6rem;}
.card p{color:var(--text-dim);font-size:.94rem;}

/* ===== Hub grid ===== */
.hub-grid{width:var(--shell);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;}
.hub-card{display:block;padding:.3rem;border-radius:calc(var(--radius-lg) + .3rem);border:1px solid var(--panel-border);background:var(--panel);transition:transform .5s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);}
.hub-card-active:hover{transform:translateY(-6px);border-color:var(--cyan-dim);box-shadow:0 0 0 1px var(--cyan-dim),0 16px 34px -16px color-mix(in srgb,var(--cyan) 45%,transparent);}
.hub-card-inner{padding:1.8rem 1.5rem;border-radius:var(--radius-lg);background:var(--bg-alt);height:100%;min-height:12rem;display:flex;flex-direction:column;}
.hub-tag{align-self:flex-start;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);border:1px solid var(--panel-border);border-radius:999px;padding:.25rem .7rem;margin-bottom:1rem;}
.hub-tag-live{color:#04231f;background:var(--cyan);border-color:transparent;font-weight:700;}
.hub-card h3{font-size:1.1rem;margin-bottom:.4rem;}
.hub-card p{font-size:.85rem;color:var(--text-dim);flex-grow:1;}
.hub-price{font-family:var(--font-head);color:var(--cyan);font-weight:700;font-size:1.1rem;margin-top:1rem;}
.hub-card-soon{opacity:.5;}

/* Variante con imagen arriba (estilo tarjeta de curso/producto).
   display:flex en el wrapper es a propósito: con display:block (el default de .hub-card),
   dentro de un grid `.hub-card-inner{height:100%}` puede calcular mal su alto durante el
   sizing de la fila del grid (el % se resuelve contra un alto indefinido) y el contenido se
   desborda por debajo del borde de la tarjeta. Con flex column, el wrapper siempre crece
   para contener a la imagen + el bloque de texto/botones, sin importar cuánto midan. */
.hub-card-producto{display:flex;flex-direction:column;}
.hub-card-producto .hub-card-inner{border-radius:0 0 var(--radius-lg) var(--radius-lg);height:auto;min-height:auto;flex:1;}
.hub-card-media{
  position:relative;overflow:hidden;aspect-ratio:16/11;flex-shrink:0;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  /* Luz inferior tenue (antes era muy fuerte y "lavaba" los chibis navy) + un halo suave
     detrás del personaje para que se separe del fondo sin quitarle protagonismo. */
  background:radial-gradient(46% 42% at 50% 100%, color-mix(in srgb,var(--cyan) 13%, transparent), transparent 72%),
             radial-gradient(52% 60% at 50% 46%, rgba(255,255,255,0.05), transparent 70%),
             linear-gradient(160deg,var(--bg-soft),var(--bg-alt));
  display:flex;align-items:flex-end;justify-content:center;
}
.hub-card-media img{width:auto;height:auto;max-width:62%;max-height:94%;position:relative;z-index:1;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5));}
.hub-descargas{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;}
.hub-descargas .btn{justify-content:space-between;width:100%;}
/* Lista de PDF del combo: cada uno con "Ver" y "Descargar" */
.pdf-list{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem;}
.pdf-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;}
.pdf-nombre{font-size:.9rem;font-weight:600;color:var(--text);}
.pdf-nombre small{font-weight:400;color:var(--text-faint);font-size:.78rem;}
.pdf-acciones{display:flex;gap:.4rem;flex-shrink:0;}
.pdf-acciones .btn{padding:.4rem .7rem;font-size:.8rem;}

/* ===== Catálogo deep-dive ===== */
.catalogo{background:var(--bg-alt);}
.catalogo-inner{width:var(--shell);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center;}
.catalogo-lead{color:var(--text-dim);font-size:1.05rem;margin-bottom:1.5rem;}
.catalogo-list{margin:0 0 2rem;display:flex;flex-direction:column;gap:.9rem;}
.catalogo-list li{position:relative;padding-left:1.7rem;color:var(--text-dim);font-size:.98rem;}
.catalogo-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--cyan);font-weight:700;}
.catalogo-price-box{display:flex;align-items:center;gap:.8rem;margin-bottom:2rem;}
.catalogo-price{font-family:var(--font-head);font-size:2.8rem;font-weight:700;color:var(--cyan);line-height:1;}
.catalogo-price-note{color:var(--text-faint);font-size:.82rem;line-height:1.3;}

/* phone mockup */
.catalogo-visual{position:relative;display:flex;justify-content:center;}
.phone{
  position:relative;width:min(300px,72vw);aspect-ratio:9/18.5;
  background:#05101d;border-radius:2.4rem;padding:.6rem;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 40px 70px rgba(0,0,0,0.55),inset 0 1px 2px rgba(255,255,255,0.1);
}
.phone-notch{position:absolute;top:.6rem;left:50%;transform:translateX(-50%);width:32%;height:1.1rem;background:#05101d;border-radius:0 0 1rem 1rem;z-index:2;}
.phone-screen{background:var(--bg);border-radius:1.9rem;height:100%;overflow:hidden;padding:1.4rem 1rem 1rem;}
.cat-head{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;}
.cat-avatar{width:2.2rem;height:2.2rem;border-radius:.7rem;background:linear-gradient(155deg,var(--cyan),var(--cyan-deep));display:grid;place-items:center;color:#06201c;font-weight:700;font-size:.72rem;font-family:var(--font-head);flex-shrink:0;}
.cat-head strong{display:block;font-size:.82rem;}
.cat-head span{font-size:.66rem;color:var(--text-faint);}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
.cat-item{background:var(--bg-soft);border:1px solid var(--panel-border);border-radius:.9rem;padding:.5rem;display:flex;flex-direction:column;}
.cat-thumb{width:100%;aspect-ratio:1;border-radius:.6rem;margin-bottom:.5rem;}
.cat-thumb.t1{background:linear-gradient(135deg,#3a5a7a,#24384f);}
.cat-thumb.t2{background:linear-gradient(135deg,#7a5a3a,#4f3824);}
.cat-thumb.t3{background:linear-gradient(135deg,#3a7a6a,#244f45);}
.cat-thumb.t4{background:linear-gradient(135deg,#5a3a7a,#38244f);}
.cat-name{font-size:.68rem;color:var(--text);font-weight:500;}
.cat-price{font-size:.72rem;color:var(--cyan);font-family:var(--font-head);font-weight:700;margin:.15rem 0 .4rem;}
.cat-order{font-size:.62rem;text-align:center;background:var(--cyan);color:#04231f;border-radius:999px;padding:.25rem;font-weight:700;}
.catalogo-peek{position:absolute;right:-2%;bottom:-6%;z-index:3;}

/* ===== CTA final ===== */
.cta-final-inner{
  width:min(1000px,100%);margin:0 auto;position:relative;overflow:hidden;
  border-radius:calc(var(--radius-lg) + .6rem);border:1px solid var(--panel-border);
  background:linear-gradient(150deg,rgba(53,224,208,0.1),rgba(11,21,34,0.4) 55%);
  padding:3rem 3rem 3rem 0;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:1.5rem;align-items:center;
}
.cta-final-art{display:flex;justify-content:center;align-items:flex-end;}
.cta-final-copy{padding-right:1rem;}
.cta-final-copy h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.7rem;}
.cta-final-copy p{color:var(--text-dim);margin-bottom:1.6rem;max-width:30rem;}

/* ===== Contactos (teléfono con botones de redes) =====
   El teléfono es un mockup en CSS por ahora; luego se puede reemplazar por la imagen
   generada del personaje sosteniendo el teléfono, dejando los botones sobre la pantalla. */
.contact-inner{
  width:min(1000px,100%);margin:0 auto;display:flex;gap:clamp(2rem,5vw,4rem);
  align-items:center;justify-content:center;flex-wrap:wrap;
}
.contact-phone-wrap{
  /* El wrap reserva el espacio de la IMAGEN COMPLETA (mano+teléfono), no solo del teléfono —
     si el wrap solo mide el teléfono, la mano (más alta que el wrap) se desborda visualmente
     hacia la sección siguiente porque nada reserva su espacio real en el layout. */
  flex-shrink:0;position:relative;
  width:min(560px,88vw);aspect-ratio:1102/1351;
}
.contact-phone-wrap::before{
  content:"";position:absolute;inset:8% 4%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--cyan) 20%, transparent), transparent 75%);
}
.contact-hand{
  position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.5));pointer-events:none;user-select:none;
}
.contact-phone{
  position:absolute;left:47.55%;top:.35%;width:45.01%;height:71.23%;
  background:linear-gradient(160deg,#182c42,#0c1725);border-radius:1.1rem;
  padding:.35rem;border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,0.14);
}
.contact-phone-notch{
  position:absolute;top:.75rem;left:50%;transform:translateX(-50%);
  width:34%;height:.5rem;border-radius:999px;background:rgba(0,0,0,.55);z-index:2;
}
.contact-screen{
  height:100%;border-radius:2.15rem;background:linear-gradient(175deg,#0c1826,#0a141f);
  padding:1.6rem .8rem .9rem;display:flex;flex-direction:column;gap:.55rem;overflow:hidden;
}
.contact-screen-head{display:flex;align-items:center;gap:.6rem;padding:.2rem .4rem .7rem;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:.3rem;}
.contact-screen-badge{
  width:2.1rem;height:2.1rem;border-radius:.7rem;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(155deg,var(--cyan),var(--cyan-deep));color:#06201c;font-family:var(--font-head);font-weight:700;font-size:.8rem;
}
.contact-screen-name{display:flex;flex-direction:column;line-height:1.2;}
.contact-screen-name strong{font-size:.9rem;}
.contact-screen-name span{font-size:.68rem;color:var(--cyan);}
.contact-links{display:flex;flex-direction:column;gap:.5rem;}
.contact-screen-hint{margin-top:auto;text-align:center;font-size:.72rem;color:var(--text-faint);padding-top:.7rem;}
.contact-social{
  display:flex;align-items:center;gap:.65rem;padding:.6rem .7rem;border-radius:.9rem;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.07);
  transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.contact-social:hover{transform:translateX(3px);background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.14);}
.contact-ico{width:2rem;height:2rem;border-radius:.6rem;flex-shrink:0;display:grid;place-items:center;}
.contact-ico svg{width:1.15rem;height:1.15rem;}
.contact-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1;text-align:left;}
.contact-txt strong{font-size:.82rem;color:var(--text);}
.contact-txt small{font-size:.66rem;color:var(--text-faint);}
.contact-arrow{color:var(--text-faint);font-size:.85rem;flex-shrink:0;}
/* Colores de marca por red */
.s-wa .contact-ico,.s-grupo .contact-ico{background:rgba(37,211,102,.16);color:#25d366;}
.s-ig .contact-ico{background:rgba(225,48,108,.16);color:#f0518b;}
.s-tt .contact-ico{background:rgba(255,255,255,.1);color:#f4f4f5;}
.s-tg .contact-ico{background:rgba(34,158,217,.16);color:#3aaee0;}

.contact-copy{flex:1;min-width:min(320px,100%);}
.contact-copy h3{font-size:clamp(1.4rem,2.5vw,1.9rem);margin-bottom:.7rem;}
.contact-copy p{color:var(--text-dim);margin-bottom:1rem;max-width:32rem;}
.contact-note{font-size:.85rem;color:var(--text-faint);}
@media (max-width:820px){
  .contact-inner{flex-direction:column;text-align:center;align-items:stretch;}
  .contact-copy{order:-1;min-width:0;width:100%;}
  .contact-copy p{margin-left:auto;margin-right:auto;}
  /* En mobile el teléfono queda más angosto (el wrap ya no puede crecer más que el viewport) —
     achicar el contenido interno para que las 5 filas + el hint quepan sin recortarse.
     Ojo: usar % (relativo al contenedor ya sin el padding de la sección), NUNCA vw acá —
     vw no descuenta el padding lateral de la sección y desborda el viewport. */
  .contact-phone-wrap{width:min(400px,100%);margin:0 auto;}
  .contact-screen{padding:1.3rem .45rem .45rem;gap:.22rem;}
  .contact-screen-head{gap:.35rem;padding:.05rem .15rem .35rem;margin-bottom:.15rem;}
  .contact-screen-badge{width:1.4rem;height:1.4rem;font-size:.6rem;border-radius:.5rem;}
  .contact-screen-name strong{font-size:.68rem;}
  .contact-screen-name span{font-size:.5rem;}
  .contact-links{gap:.2rem;}
  .contact-social{padding:.28rem .4rem;gap:.4rem;border-radius:.65rem;}
  .contact-ico{width:1.35rem;height:1.35rem;border-radius:.45rem;}
  .contact-ico svg{width:.78rem;height:.78rem;}
  .contact-txt strong{font-size:.6rem;white-space:nowrap;}
  .contact-txt small{font-size:.48rem;}
  .contact-arrow{font-size:.62rem;}
  .contact-screen-hint{font-size:.52rem;padding-top:.2rem;}
}

/* ===== Footer ===== */
.footer{padding:4.5rem 1.5rem 2rem;background:var(--bg-alt);}
.footer-inner{width:var(--shell);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--panel-border);}
.footer-brand p{color:var(--text-faint);font-size:.88rem;margin-top:.8rem;max-width:22rem;}
.footer-col h4{font-family:var(--font-head);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);margin-bottom:1rem;}
.footer-col a{display:block;color:var(--text-dim);font-size:.92rem;margin-bottom:.7rem;transition:color .3s var(--ease);}
.footer-col a:hover{color:var(--text);}
.footer-bottom{width:var(--shell);margin:0 auto;padding-top:2rem;color:var(--text-faint);font-size:.8rem;}

/* ===== Scroll reveal ===== */
.reveal{opacity:0;transform:translateY(2.2rem);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);}
.reveal.in-view{opacity:1;transform:translateY(0);filter:blur(0);}
.reveal-delay-1.in-view{transition-delay:.1s;}
.reveal-delay-2.in-view{transition-delay:.2s;}
.reveal-delay-3.in-view{transition-delay:.3s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none;}
}

/* ===== Responsive ===== */
@media (max-width:920px){
  .nav-links{display:none;}
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:.32rem;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--panel);border:1px solid var(--panel-border);cursor:pointer;}
  .nav-burger span{width:1rem;height:2px;background:var(--text);margin:0 auto;transition:transform .5s var(--ease);}
  .nav-burger.open span:first-child{transform:translateY(4px) rotate(45deg);}
  .nav-burger.open span:last-child{transform:translateY(-4px) rotate(-45deg);}
  .nav-actions .nav-login{display:none;}

  .hero-inner{grid-template-columns:1fr;text-align:center;}
  .hero-copy{order:2;}
  .hero-art{order:1;}
  .char-lg img{height:min(46vh,420px);}
  .hero-sub{margin-left:auto;margin-right:auto;}
  .hero-actions{justify-content:center;}

  .steps-grid{grid-template-columns:1fr;max-width:26rem;}
  .bento{grid-template-columns:1fr;}
  .hub-grid{grid-template-columns:1fr 1fr;}
  .catalogo-inner{grid-template-columns:1fr;text-align:center;}
  .catalogo-list{text-align:left;max-width:30rem;margin-left:auto;margin-right:auto;}
  .catalogo-price-box{justify-content:center;}
  .catalogo-visual{margin-top:1rem;}
  .catalogo-peek{display:none;}

  .cta-final-inner{grid-template-columns:1fr;text-align:center;padding:2.6rem 1.6rem;}
  .cta-final-art{order:1;}
  .cta-final-copy{order:2;padding-right:0;}
  .cta-final-copy p{margin-left:auto;margin-right:auto;}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2rem;}
}
/* ===== Auth pages (cuenta/) ===== */
.auth-page{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:8rem 1.5rem 3rem;position:relative;overflow:hidden;
}
.auth-glow{position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 45% at 50% 20%, var(--cyan-dim), transparent 70%);opacity:.2;}
.auth-shell{width:min(920px,100%);display:grid;grid-template-columns:.85fr 1.15fr;
  border-radius:calc(var(--radius-lg) + .5rem);border:1px solid var(--panel-border);
  background:var(--bg-alt);overflow:hidden;}
.auth-visual{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(80% 70% at 50% 20%, var(--bg-soft), var(--bg-alt));
  padding:2rem 1.5rem 0;
}
.auth-visual .char{width:min(240px,80%);}
.auth-visual-copy{position:absolute;top:2rem;left:1.8rem;right:1.8rem;}
.auth-visual-copy .eyebrow{margin-bottom:.6rem;}
.auth-visual-copy p{color:var(--text-dim);font-size:.9rem;max-width:16rem;}
.auth-form{padding:3rem 2.8rem;}
.auth-form h1{font-size:1.7rem;margin-bottom:.4rem;}
.auth-form > p{color:var(--text-dim);font-size:.92rem;margin-bottom:2rem;}
.field{margin-bottom:1.2rem;}
.field label{display:block;font-size:.82rem;color:var(--text-dim);margin-bottom:.5rem;font-weight:500;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.input-wrap{position:relative;}
.input-wrap input{
  width:100%;padding:.85rem 1rem;border-radius:.9rem;
  background:var(--bg);border:1px solid var(--panel-border);color:var(--text);
  font-family:var(--font-body);font-size:.95rem;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.input-wrap input::placeholder{color:var(--text-faint);}
.input-wrap input:focus{outline:none;border-color:var(--cyan);background:var(--bg-soft);}
.input-wrap input.invalid{border-color:#e0685f;}
.field-hint{font-size:.76rem;color:var(--text-faint);margin-top:.4rem;}
.field-error{font-size:.76rem;color:#ff8f86;margin-top:.4rem;display:none;}
.field-error.show{display:block;}
.pw-toggle{
  position:absolute;right:.9rem;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:.78rem;
  font-family:var(--font-body);padding:.2rem;
}
.pw-toggle:hover{color:var(--text-dim);}
.auth-submit{width:100%;justify-content:center;margin-top:.5rem;}
.auth-alert{
  display:none;padding:.8rem 1rem;border-radius:.8rem;font-size:.86rem;margin-bottom:1.2rem;
  background:rgba(224,104,95,0.12);border:1px solid rgba(224,104,95,0.3);color:#ff8f86;
}
.auth-alert.show{display:block;}
.auth-alert.ok{background:rgba(53,224,208,0.1);border-color:var(--cyan-dim);color:var(--cyan);}
.auth-foot{margin-top:1.8rem;font-size:.9rem;color:var(--text-dim);text-align:center;}
.auth-foot a{color:var(--cyan);font-weight:600;}
.auth-foot a:hover{text-decoration:underline;}
.auth-back{display:inline-flex;align-items:center;gap:.4rem;color:var(--text-faint);font-size:.85rem;margin-bottom:1.5rem;}
.auth-back:hover{color:var(--text-dim);}

@media (max-width:720px){
  .auth-shell{grid-template-columns:1fr;}
  .auth-visual{display:none;}
  .auth-form{padding:2.4rem 1.6rem;}
  .field-row{grid-template-columns:1fr;}
}

@media (max-width:560px){
  .hub-grid{grid-template-columns:1fr;}
  section{padding:5rem 1.25rem;}
  .nav-pill{padding:.5rem .5rem .5rem 1rem;}
  .footer-inner{grid-template-columns:1fr;}
  .trust-inner{gap:.9rem;}
}

/* ===== Editor de catálogo (cuenta/catalogo-web.html) ===== */
.ed-wrap{width:min(920px,94vw);margin:0 auto;padding:9rem 0 5rem;}
.ed-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem;}
.ed-panel{
  background:var(--bg-alt);border:1px solid var(--panel-border);border-radius:calc(var(--radius-lg) + .3rem);
  padding:2rem 2.2rem;margin-bottom:1.6rem;
}
.ed-panel h2{font-size:1.15rem;margin-bottom:.3rem;}
.ed-panel > p.ed-sub{color:var(--text-dim);font-size:.88rem;margin-bottom:1.5rem;}
.ed-status{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.2rem 1.5rem;border-radius:1.2rem;margin-bottom:1.6rem;
  background:rgba(224,168,96,0.08);border:1px solid rgba(224,168,96,0.28);
}
.ed-status.ok{background:rgba(53,224,208,0.08);border-color:var(--cyan-dim);}
.ed-status strong{display:block;font-size:.95rem;margin-bottom:.2rem;}
/* Escopado a .ed-status-text (no ".ed-status span" a secas): los botones que viven
   como hermanos dentro de .ed-status también tienen <span> adentro — con el selector
   genérico, este texto atenuado le ganaba por herencia al color oscuro que .btn-primary
   pone en el botón, dejando el texto del botón casi ilegible. */
.ed-status-text span{color:var(--text-dim);font-size:.85rem;}
.ed-status-actions{display:flex;gap:.6rem;flex-wrap:wrap;}
.ed-link-box{display:flex;align-items:center;gap:.6rem;margin-top:.6rem;}
.ed-link-box input{
  flex:1;padding:.55rem .8rem;border-radius:.7rem;background:var(--bg);border:1px solid var(--panel-border);
  color:var(--cyan);font-size:.82rem;font-family:var(--font-body);
}
.ed-copy{font-size:.8rem;padding:.55rem 1rem;border-radius:.7rem;background:var(--panel);border:1px solid var(--panel-border);color:var(--text-dim);cursor:pointer;}
.ed-copy:hover{color:var(--text);}
/* Selector de moneda extra (multidivisa), en la misma tarjeta que el link para compartir. */
.ed-moneda{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--panel-border);}
.ed-moneda label{display:block;font-size:.82rem;color:var(--text-dim);margin-bottom:.5rem;font-weight:500;}
.ed-moneda .field-hint{margin-top:.5rem;margin-bottom:0;}
.ed-moneda select:disabled{opacity:.6;cursor:wait;}
.ed-moneda-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
@media (max-width:560px){ .ed-moneda-grid{grid-template-columns:1fr;} }
.ed-moneda-check{
  display:flex;align-items:flex-start;gap:.55rem;padding:.7rem .9rem;
  border-radius:.8rem;background:var(--bg);border:1px solid var(--panel-border);
  cursor:pointer;transition:border-color .2s var(--ease);
}
.ed-moneda-check:has(input:checked){border-color:var(--cyan-dim);}
.ed-moneda-check input{flex-shrink:0;width:1.05rem;height:1.05rem;margin-top:.15rem;accent-color:var(--cyan);cursor:pointer;}
.ed-moneda-check input:disabled{cursor:wait;}
/* Nombre y tasa van en su propia columna, aparte del checkbox — así la tasa SIEMPRE
   cae en su propia línea debajo del nombre, sin depender de que el texto alcance a
   envolver bien dentro de un flex-wrap (eso envolvía distinto según el largo de cada
   nombre de moneda, se veía inconsistente entre una tarjeta y otra). */
.ed-moneda-check-info{display:flex;flex-direction:column;gap:.2rem;min-width:0;}
.ed-moneda-check-nombre{font-size:.85rem;color:var(--text);}
.ed-moneda-check-tasa{font-size:.72rem;color:var(--text-faint);}

/* Colores disponibles de un producto (editor): casillas chicas en cuadrícula, cada una
   con su punto de color real — así el vendedor reconoce el color de un vistazo, no solo
   por el nombre. */
.color-swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.5rem;}
.color-swatch{
  display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;border-radius:.7rem;
  background:var(--bg);border:1px solid var(--panel-border);cursor:pointer;
  transition:border-color .2s var(--ease);
}
.color-swatch.sel{border-color:var(--cyan-dim);background:color-mix(in srgb, var(--cyan) 8%, var(--bg));}
.color-swatch input{position:absolute;opacity:0;width:0;height:0;}
.color-swatch-dot{
  display:block;width:1.1rem;height:1.1rem;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,0.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15);
}
.color-swatch-nombre{font-size:.82rem;color:var(--text-dim);}
.color-swatch.sel .color-swatch-nombre{color:var(--text);}

.chip-list{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.2rem;}
.chip{
  display:flex;align-items:center;gap:.5rem;padding:.5rem .5rem .5rem 1rem;border-radius:999px;
  background:var(--bg);border:1px solid var(--panel-border);font-size:.85rem;
}
.chip button{
  width:1.3rem;height:1.3rem;border-radius:50%;border:none;background:var(--panel);color:var(--text-faint);
  cursor:pointer;font-size:.75rem;line-height:1;
}
.chip button:hover{background:rgba(224,104,95,0.18);color:#ff8f86;}
.chip-add{display:flex;gap:.6rem;}
.chip-add input{flex:1;}

.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.1rem;}
.prod-card{
  border-radius:1.3rem;overflow:hidden;background:var(--bg);border:1px solid var(--panel-border);
  transition:border-color .3s var(--ease);
}
.prod-card:hover{border-color:var(--cyan-dim);}
.prod-thumb{aspect-ratio:1;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8%;box-sizing:border-box;}
.prod-thumb img{width:100%;height:100%;object-fit:contain;}
.prod-thumb-empty{color:var(--text-faint);font-size:.75rem;}
.prod-body{padding:.9rem 1rem 1rem;}
.prod-body h4{font-size:.94rem;margin-bottom:.2rem;}
.prod-cat{font-size:.72rem;color:var(--text-faint);margin-bottom:.4rem;}
.prod-price{font-family:var(--font-head);color:var(--cyan);font-weight:700;font-size:1.05rem;}
.prod-actions{display:flex;gap:.5rem;margin-top:.7rem;}
.prod-actions button{
  flex:1;font-size:.76rem;padding:.45rem;border-radius:.6rem;border:1px solid var(--panel-border);
  background:var(--panel);color:var(--text-dim);cursor:pointer;
}
.prod-actions button:hover{color:var(--text);}
.prod-actions button.danger:hover{color:#ff8f86;border-color:rgba(224,104,95,0.4);}
.add-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  min-height:11rem;border-radius:1.3rem;border:1.5px dashed var(--panel-border);color:var(--text-dim);
  cursor:pointer;background:transparent;font-size:.86rem;transition:border-color .3s var(--ease),color .3s var(--ease);
}
.add-card:hover{border-color:var(--cyan-dim);color:var(--cyan);}
.add-card .plus{font-size:1.6rem;font-family:var(--font-head);}

.modal-overlay{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(6,12,20,0.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s var(--ease);padding:1.5rem;
}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal-box{
  width:min(460px,100%);max-height:88vh;overflow-y:auto;
  background:var(--bg-alt);border:1px solid var(--panel-border);border-radius:var(--radius-lg);
  padding:2rem;transform:translateY(1rem);transition:transform .35s var(--ease);
}
.modal-overlay.open .modal-box{transform:translateY(0);}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;}
.modal-head h3{font-size:1.15rem;}
.modal-close{background:none;border:none;color:var(--text-faint);font-size:1.3rem;cursor:pointer;line-height:1;}
.modal-close:hover{color:var(--text);}
.file-input{
  display:flex;align-items:center;gap:1rem;padding:.7rem;border-radius:.9rem;border:1px dashed var(--panel-border);
  background:var(--bg);cursor:pointer;
}
.file-preview{width:3.2rem;height:3.2rem;border-radius:.6rem;background:var(--bg-soft);object-fit:contain;padding:3px;box-sizing:border-box;flex-shrink:0;}
.file-input span{font-size:.82rem;color:var(--text-dim);}
.modal-actions{display:flex;gap:.8rem;margin-top:1.5rem;}
.modal-actions .btn{flex:1;justify-content:center;}
.btn-outline{background:transparent;border:1px solid var(--panel-border);color:var(--text-dim);}
.btn-outline:hover{color:var(--text);}
.select-wrap select{
  width:100%;padding:.85rem 1rem;border-radius:.9rem;background:var(--bg);border:1px solid var(--panel-border);
  color:var(--text);font-family:var(--font-body);font-size:.95rem;
}

@media (max-width:640px){
  .ed-wrap{padding-top:7.5rem;}
  .ed-panel{padding:1.5rem 1.4rem;}
}

/* ===== Catálogo público (catalogo/ver.html) ===== */
.pub-header{
  width:min(1000px,94vw);margin:0 auto;padding:3.4rem 0 1.7rem;text-align:center;
}
.pub-avatar{
  width:6.6rem;height:6.6rem;border-radius:1.7rem;margin:0 auto 1.2rem;
  display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:2.15rem;
  background:linear-gradient(155deg,var(--cyan),var(--cyan-deep));color:#06201c;
  box-shadow:0 14px 34px -10px color-mix(in srgb,var(--cyan) 60%, transparent),
             0 0 0 1px color-mix(in srgb,var(--cyan) 22%, transparent),
             inset 0 1px 0 rgba(255,255,255,0.28);
}
/* El resplandor de color (box-shadow con --cyan) es para cuando se ve la INICIAL sobre
   el degradado — le da profundidad a ese cuadrito plano. Con una foto de logo real se
   veía como una mancha de color rompiendo el borde limpio de la imagen. En su lugar, un
   marco sólido y nítido (mismo color que los precios, sin difuminar) — enmarca la foto
   en vez de ensuciarla, y de paso tapa el borde "cortado" que se veía sin marco. */
/* Envoltorio del logo con foto real: overflow:hidden fijo, para que el zoom (transform:
   scale en la FOTO de adentro, ver .pub-avatar-img) recorte contra este marco quieto en
   vez de agrandar también el marco redondeado. */
.pub-avatar-wrap{
  overflow:hidden;
  box-shadow:0 0 0 3px var(--avatar-marco, var(--cyan)), 0 10px 24px -10px rgba(0,0,0,0.4);
}
/* min-width/min-height:0 — sin esto, una foto de logo alta (retrato/cuerpo completo,
   más alta que ancha) fuerza al ITEM de grid a crecer más allá del 6.6rem fijo de
   .pub-avatar (el mismo comportamiento por defecto de grid/flex que ya se arregló en
   .pub-card para descripciones largas). El marco terminaba más alto que ancho, y el
   recorte que se veía ya no coincidía con lo que mostraba el editor (que no usa grid).
   min-height:0 obliga a respetar el 100%/100% del padre en vez del alto natural de la foto. */
.pub-avatar-img{width:100%;height:100%;min-width:0;min-height:0;display:block;}
.pub-avatar.pub-avatar-circulo{border-radius:50%;}
/* "Mostrar completo": el logo no se recorta, así que puede quedar espacio alrededor
   (sobre todo si no es cuadrado). Ahí el degradado cian de fondo se ve raro detrás de
   colores/transparencias que no controlamos — usamos un fondo neutro que ya se adapta
   al tema elegido en vez del degradado pensado para las iniciales. */
.pub-avatar-completo{background:var(--bg-soft);}
.pub-header h1{font-size:clamp(2rem,4.6vw,2.7rem);margin-bottom:.55rem;line-height:1.08;}
.pub-header .sub{color:var(--text-dim);font-size:.96rem;}
.pub-direccion{color:var(--text-faint);font-size:.85rem;margin-top:.4rem;}
@media (max-width:560px){
  .pub-avatar{width:5.4rem;height:5.4rem;border-radius:1.4rem;font-size:1.75rem;}
}
.pub-socials{display:flex;justify-content:center;gap:.7rem;margin-top:1.2rem;}
.pub-social{
  display:flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:999px;
  background:var(--panel);border:1px solid var(--panel-border);color:var(--text-dim);font-size:.82rem;
  transition:color .3s var(--ease),border-color .3s var(--ease),filter .3s var(--ease),box-shadow .3s var(--ease);
}
.pub-social:hover{color:var(--cyan);border-color:var(--cyan-dim);}
.pub-social svg{width:1rem;height:1rem;flex-shrink:0;}
/* Cada red con su color de marca — así se distinguen de un vistazo en vez de ser
   todas el mismo pill genérico. El botón "Pedir por WhatsApp" del carrito ya usa el
   verde de WhatsApp (.cart-wa); acá van las que faltaban. */
.pub-social-instagram{
  background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  border-color:transparent;color:#fff;
}
.pub-social-instagram:hover{filter:brightness(1.1);color:#fff;border-color:transparent;}
.pub-social-facebook{background:#1877f2;border-color:transparent;color:#fff;}
.pub-social-facebook:hover{background:#2f89ff;color:#fff;border-color:transparent;}
.pub-social-telegram{background:#26a5e4;border-color:transparent;color:#fff;}
.pub-social-telegram:hover{background:#3bb4ee;color:#fff;border-color:transparent;}
.pub-social-tiktok{background:#010101;border:1px solid #292929;color:#fff;box-shadow:inset 0 0 0 1px rgba(37,244,238,.18);}
.pub-social-tiktok:hover{color:#fff;border-color:#292929;box-shadow:inset 0 0 0 1px rgba(37,244,238,.4),inset 2px 0 0 0 rgba(254,44,85,.3);}

.pub-cats{
  position:sticky;top:0;z-index:20;background:rgba(17,30,47,0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--panel-border);padding:.85rem 0;
}
.pub-cats-inner{width:min(1000px,94vw);margin:0 auto;display:flex;gap:.7rem;align-items:center;}
/* La fila de categorías/colores se desliza horizontal en pantallas angostas, pero antes
   el último pill quedaba cortado en seco justo en el borde de la pantalla — sin ninguna
   pista de que hay más para deslizar, se veía como una pared partida a la mitad. El
   degradado (mask-image) difumina los dos extremos a transparente, y el padding le da
   aire al último pill para que no quede pegado al borde/difuminado. */
.pub-cats-pills{
  display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;flex:1;padding:.15rem 1.1rem;
  mask-image:linear-gradient(to right, transparent, black 2.2rem, black calc(100% - 2.2rem), transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, black 2.2rem, black calc(100% - 2.2rem), transparent);
}
.pub-cats-pills::-webkit-scrollbar{display:none;}
/* Flechas para deslizar categorías/colores con mouse: en el teléfono ya se desliza con
   el dedo (display:none de base, nunca aparecen ahí), pero en computadora sin pantalla
   táctil no había ninguna forma de llegar a lo que quedaba escondido del lado derecho.
   Cada una se muestra sola (clase .visible, puesta por JS) solo cuando de verdad hay
   más contenido para ese lado — con pocas categorías que ya caben, ninguna aparece. */
.pub-cats-arrow{
  display:none;flex-shrink:0;width:1.8rem;height:1.8rem;border-radius:50%;
  align-items:center;justify-content:center;padding:0;
  background:var(--panel);border:1px solid var(--panel-border);color:var(--text-dim);
  font-size:1.1rem;line-height:1;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.pub-cats-arrow:hover{color:var(--text);border-color:var(--cyan-dim);}
@media (hover:hover) and (pointer:fine){
  .pub-cats-arrow{display:flex;}
  .pub-cats-arrow.visible{opacity:1;pointer-events:auto;}
}
.pub-cat-pill{
  flex-shrink:0;padding:.58rem 1.15rem;border-radius:999px;font-size:.84rem;white-space:nowrap;cursor:pointer;
  background:color-mix(in srgb,var(--text) 6%, transparent);border:1px solid var(--panel-border);color:var(--text-dim);
  font-weight:500;transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .18s var(--ease);
}
.pub-cat-pill:hover{color:var(--text);border-color:var(--cyan-dim);transform:translateY(-1px);}
.pub-cat-pill.active{
  background:var(--cyan);border-color:transparent;color:#04231f;font-weight:700;
  box-shadow:0 6px 16px -6px color-mix(in srgb,var(--cyan) 60%, transparent);
}
/* Filtro de color: misma pinta que las píldoras de categoría (clase aparte para que el
   listener de categorías nunca las capture por accidente), con un punto de color real
   al lado del nombre. */
.pub-color-pill{
  display:flex;align-items:center;gap:.4rem;flex-shrink:0;padding:.5rem 1rem .5rem .7rem;
  border-radius:999px;font-size:.84rem;white-space:nowrap;cursor:pointer;
  background:color-mix(in srgb,var(--text) 6%, transparent);border:1px solid var(--panel-border);color:var(--text-dim);
  font-weight:500;transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .18s var(--ease);
}
.pub-color-pill:hover{color:var(--text);border-color:var(--cyan-dim);transform:translateY(-1px);}
.pub-color-pill.active{
  background:var(--cyan);border-color:transparent;color:#04231f;font-weight:700;
  box-shadow:0 6px 16px -6px color-mix(in srgb,var(--cyan) 60%, transparent);
}
.pub-color-pill-dot{
  display:block;width:.85rem;height:.85rem;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,0.35);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15);
}
/* Buscador de productos: solo aparece cuando hay bastantes (lo decide ver.html). */
.pub-search-wrap{width:min(1000px,94vw);margin:1rem auto 0;}
.pub-cats-search{position:relative;flex-shrink:0;width:min(280px,100%);}
.pub-cats-search::before{
  content:"⌕";position:absolute;left:.7rem;top:50%;transform:translateY(-50%);
  color:var(--text-faint);font-size:1rem;pointer-events:none;
}
.pub-cats-search input{
  width:100%;padding:.6rem .9rem .6rem 1.9rem;border-radius:999px;font-size:.85rem;
  background:var(--panel);border:1px solid var(--panel-border);color:var(--text);
  transition:border-color .25s var(--ease);
}
.pub-cats-search input:focus{outline:none;border-color:var(--cyan-dim);}
.pub-cats-search input::placeholder{color:var(--text-faint);}
@media (max-width:560px){
  .pub-cats-search{width:100%;}
}

.pub-grid{width:min(1000px,94vw);margin:0 auto;padding:2rem 0 7rem;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.1rem;}
/* Si el dueño eligió un color de fondo de fotos propio, se usa para TODA la tarjeta
   (foto + nombre/precio) — así queda como un bloque sólido y prolijo, en vez de una
   caja de foto de un color pegada a un pie de tarjeta de otro color distinto. */
/* Tarjeta con la misma profundidad "premium" que ya usa el resto del sitio (.hub-card):
   sombra suave + luz sutil arriba (inset) para que no se vea plana, y un pequeño
   levantamiento al pasar el mouse para que se sienta interactiva. */
.pub-card{
  border-radius:1.3rem;overflow:hidden;background:var(--thumb-bg, var(--bg-alt));border:1px solid var(--panel-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px -20px rgba(0,0,0,0.6);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  color:var(--card-text, var(--text));
  /* Sin esto, un texto sin espacios (una palabra pegada muy larga en el nombre o la
     descripción) puede forzar la columna del grid a ensancharse — los ítems de grid por
     defecto no se encogen por debajo del contenido ("min-width:auto"). Con min-width:0 la
     tarjeta SIEMPRE respeta el ancho de su columna, sin importar qué texto le pongan. */
  min-width:0;
}
.pub-card:hover{
  transform:translateY(-3px);
  border-color:var(--cyan-dim);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 20px 36px -18px color-mix(in srgb, var(--cyan) 28%, transparent), 0 14px 26px -16px rgba(0,0,0,0.55);
}
/* Recuadro de la foto con relieve real: luz arriba + sombra abajo hacia adentro, como una
   foto enmarcada — antes el anillo era casi imperceptible (5% de opacidad), sobre todo
   contra un color de fondo de fotos oscuro/negro elegido por el dueño. */
.pub-thumb{
  aspect-ratio:1;background:var(--thumb-bg, var(--bg-soft));overflow:hidden;padding:7%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  /* Las esquinas de arriba ya salen redondeadas porque .pub-card las recorta a su propio
     radio — acá solo hacía falta redondear las de ABAJO (antes rectas: el recuadro de la
     foto termina a la mitad de la tarjeta, no en un borde que .pub-card recorte). */
  border-bottom-left-radius:1rem; border-bottom-right-radius:1rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 -14px 22px -18px rgba(0,0,0,0.5);
}
/* La FOTO en sí (no solo el recuadro que la contiene) también necesita su propio
   redondeo — muchas fotos de producto tienen su propio fondo (blanco/gris) de estudio,
   así que sin esto se ve un rectángulo de esquinas rectas flotando dentro del marco
   redondeado, que es justo lo que se notaba mal.
   object-fit:cover (no "contain"): con "contain", una foto con mucho fondo vacío
   alrededor del producto (común en fotos de ropa) se ve chiquita y perdida dentro del
   marco, mientras la foto de al lado —recortada más de cerca— llena todo el cuadro. El
   catálogo se veía disparejo, cada tarjeta a una escala distinta. Con "cover" TODAS las
   fotos llenan el marco por igual, sin importar cuánto aire tenga cada una alrededor. */
.pub-thumb img{width:100%;height:100%;object-fit:cover;border-radius:1.3rem;}
.pub-thumb-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:.75rem;}
.pub-body{padding:1rem;min-width:0;}
.pub-body h3{font-size:.95rem;margin-bottom:.3rem;overflow-wrap:anywhere;}
.pub-desc{font-size:.78rem;color:var(--card-text-faint, var(--text-faint));margin-bottom:.6rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
/* Puntos de color en la tarjeta: solo informativos (el filtro real vive arriba, en las
   píldoras) — así el cliente ve de un vistazo en qué colores viene sin abrir nada. */
.pub-card-colores{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.5rem;}
.pub-color-dot{
  display:block;width:.9rem;height:.9rem;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,0.3);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15);
}
.pub-ver-detalles{
  display:block;background:none;border:none;padding:0;margin:0 0 .6rem;cursor:pointer;
  font-size:.76rem;font-weight:600;color:var(--cyan);text-decoration:underline;
  text-underline-offset:2px;
}
.pub-ver-detalles:hover{color:var(--cyan-deep);}
.pub-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem .6rem;flex-wrap:wrap;}
/* El precio ahora es una "etiqueta" con fondo tenue del color de precios, en vez de
   texto suelto — le da más peso visual, como un sticker de precio real. */
.pub-price{
  font-family:var(--font-head);color:var(--cyan);font-weight:700;font-size:1rem;
  background:color-mix(in srgb, var(--cyan) 13%, transparent);
  border-radius:.6rem;padding:.32rem .6rem;letter-spacing:.01em;
}
.pub-price-consultar{
  background:transparent;padding:0;border-radius:0;
}
/* Precio convertido (multidivisa): va debajo del precio en soles, no al lado — con
   ambos en fila se repetía el problema de overflow que ya arreglamos en .pub-row. */
.pub-price-block{display:flex;flex-direction:column;gap:.3rem;min-width:0;}
.pub-price-divisa{font-size:.74rem;color:var(--card-text-faint, var(--text-faint));font-weight:500;}
.pub-add{
  width:2.3rem;height:2.3rem;border-radius:50%;border:none;color:#04231f;
  background:linear-gradient(155deg,var(--cyan),var(--cyan-deep));
  box-shadow:0 6px 14px -4px color-mix(in srgb, var(--cyan) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.32);
  font-size:1.15rem;font-weight:700;cursor:pointer;transition:transform .3s var(--ease), box-shadow .3s var(--ease);flex-shrink:0;
}
.pub-add:hover{transform:scale(1.08);box-shadow:0 8px 18px -4px color-mix(in srgb, var(--cyan) 65%, transparent), inset 0 1px 0 rgba(255,255,255,0.32);}
.pub-stepper{display:flex;align-items:center;gap:.5rem;flex-shrink:0;}
.pub-stepper button{width:1.9rem;height:1.9rem;border-radius:50%;border:1px solid var(--panel-border);background:var(--panel);color:var(--text);cursor:pointer;}
.pub-stepper span{font-size:.9rem;font-weight:600;min-width:1.2rem;text-align:center;}

.pub-empty{width:min(1000px,94vw);margin:0 auto;padding:4rem 1rem;text-align:center;color:var(--text-dim);}

/* Galería del producto (vista pública): tira de miniaturas que cambian la foto principal */
.pub-gallery{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.65rem;}
.pub-gal-thumb{
  width:2.7rem;height:2.7rem;border-radius:.55rem;overflow:hidden;padding:4px;cursor:pointer;flex-shrink:0;
  background:var(--bg-soft);border:1.5px solid transparent;transition:border-color .2s var(--ease),transform .15s var(--ease);
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;
}
.pub-gal-thumb:hover{transform:translateY(-1px);}
.pub-gal-thumb.sel{border-color:var(--cyan);}
.pub-gal-thumb img{width:100%;height:100%;object-fit:contain;display:block;}

/* El glow usa el color del tema (color-mix sobre --cyan), no un teal fijo — antes un
   catálogo con acento morado mostraba un botón morado con halo verde (se veía roto). El
   spread negativo mantiene el halo pegado al botón, sin el borde recortado que se notaba. */
.cart-fab{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:45;
  display:flex;align-items:center;gap:.6rem;padding:.9rem 1.45rem;border-radius:999px;
  background:var(--cyan);color:#04231f;border:none;cursor:pointer;font-weight:700;font-size:.92rem;
  box-shadow:0 10px 26px -8px color-mix(in srgb,var(--cyan) 55%, transparent),
             0 2px 6px rgba(0,0,0,0.18);
  transform:translateY(6rem);transition:transform .4s var(--ease),box-shadow .3s var(--ease);
}
.cart-fab.show{transform:translateY(0);}
.cart-fab:hover{box-shadow:0 14px 32px -8px color-mix(in srgb,var(--cyan) 70%, transparent),0 2px 6px rgba(0,0,0,0.2);}
.cart-fab-badge{background:#04231f;color:var(--cyan);width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;font-size:.78rem;flex-shrink:0;}
.cart-fab-icon{flex-shrink:0;}

.cart-overlay{
  position:fixed;inset:0;z-index:60;background:rgba(6,12,20,0.7);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s var(--ease);
}
.cart-overlay.open{opacity:1;visibility:visible;}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(400px,90vw);
  background:var(--bg-alt);border-left:1px solid var(--panel-border);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .4s var(--ease);
}
.cart-overlay.open .cart-drawer{transform:translateX(0);}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid var(--panel-border);}
.cart-head h3{font-size:1.1rem;}
.cart-items{flex:1;overflow-y:auto;padding:.5rem 1.5rem 1rem;}
.cart-item{display:grid;grid-template-columns:3.4rem 1fr;column-gap:.9rem;row-gap:.55rem;padding:1.05rem 0;border-bottom:1px solid var(--panel-border);}
.cart-item-thumb{grid-row:1 / span 2;width:3.4rem;height:3.4rem;border-radius:.7rem;background:var(--bg-soft);object-fit:contain;padding:3px;box-sizing:border-box;flex-shrink:0;}
.cart-item-info{grid-column:2;min-width:0;}
.cart-item-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;}
.cart-item-info h4{font-size:.88rem;line-height:1.3;}
.cart-item-price{font-size:.78rem;color:var(--text-faint);margin-top:.2rem;}
.cart-item-remove{
  flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:50%;border:none;background:none;
  color:var(--text-faint);font-size:.7rem;cursor:pointer;display:grid;place-items:center;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.cart-item-remove:hover{background:color-mix(in srgb,#e5484d 16%, transparent);color:#e5484d;}
.cart-item-actions{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
.cart-stepper{display:flex;align-items:center;gap:.6rem;background:var(--panel);border:1px solid var(--panel-border);border-radius:999px;padding:.25rem .5rem;}
.cart-stepper button{
  width:1.5rem;height:1.5rem;border-radius:50%;border:none;background:var(--bg-alt);color:var(--text);
  cursor:pointer;font-size:.95rem;line-height:1;display:grid;place-items:center;flex-shrink:0;
  transition:background .2s var(--ease);
}
.cart-stepper button:hover{background:var(--cyan);color:#04231f;}
.cart-stepper span{font-size:.85rem;font-weight:700;min-width:1.1rem;text-align:center;}
.cart-item-sub{font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--text);}
.cart-empty{text-align:center;color:var(--text-faint);padding:3rem 1rem;font-size:.9rem;}
.cart-foot{padding:1.3rem 1.5rem 1.6rem;border-top:1px solid var(--panel-border);}
.cart-total{display:flex;justify-content:space-between;align-items:center;font-size:1.05rem;}
.cart-total b{font-family:var(--font-head);color:var(--cyan);font-size:1.3rem;}
.cart-total-divisa{text-align:right;font-size:.82rem;color:var(--text-faint);margin-bottom:1.1rem;}
.cart-wa{width:100%;justify-content:center;background:#25d366;color:#052e16;}

/* Multidivisa: el CLIENTE elige su moneda al entrar (no el vendedor una fija para
   todos) — z-index por encima del carrito por si acaso, aunque en la práctica nunca
   coinciden abiertos a la vez. */
.moneda-overlay{
  position:fixed;inset:0;z-index:70;background:rgba(6,12,20,0.75);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:1.2rem;box-sizing:border-box;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease);
}
.moneda-overlay.open{opacity:1;visibility:visible;}
.moneda-modal{
  width:min(420px,100%);max-height:85vh;overflow-y:auto;background:var(--bg-alt);
  border:1px solid var(--panel-border);border-radius:1.3rem;padding:1.6rem;
  box-shadow:0 24px 60px -20px rgba(0,0,0,0.6);box-sizing:border-box;
}
.moneda-modal h3{font-size:1.15rem;margin-bottom:.5rem;}
.moneda-modal > p{color:var(--text-dim);font-size:.86rem;margin-bottom:1.2rem;}
.moneda-opciones{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem;}
.moneda-opcion{
  text-align:left;padding:.8rem 1rem;border-radius:.9rem;background:var(--panel);
  border:1px solid var(--panel-border);color:var(--text);font-size:.92rem;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.moneda-opcion:hover{border-color:var(--cyan-dim);}
.moneda-opcion.sel{border-color:var(--cyan);background:color-mix(in srgb, var(--cyan) 12%, transparent);}
.moneda-skip{
  display:block;width:100%;text-align:center;padding:.6rem;background:none;border:none;
  color:var(--text-faint);font-size:.82rem;cursor:pointer;text-decoration:underline;
}
.moneda-skip:hover{color:var(--text-dim);}

/* Pill para cambiar de moneda después (aparece en el encabezado del catálogo). */
.pub-moneda-pill{
  margin-top:.9rem;padding:.5rem 1.1rem;border-radius:999px;background:var(--panel);
  border:1px solid var(--panel-border);color:var(--text-dim);font-size:.82rem;cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.pub-moneda-pill:hover{border-color:var(--cyan-dim);color:var(--text);}

/* "Ver detalles": foto + nombre + descripción COMPLETA (sin el clamp de 2 líneas de la
   tarjeta) + colores + precio + control de cantidad, en un modal centrado — mismo
   patrón que .moneda-overlay. */
.detalle-overlay{
  position:fixed;inset:0;z-index:70;background:rgba(6,12,20,0.75);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:1.2rem;box-sizing:border-box;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease);
}
.detalle-overlay.open{opacity:1;visibility:visible;}
.detalle-modal{
  position:relative;width:min(420px,100%);max-height:88vh;overflow-y:auto;background:var(--bg-alt);
  border:1px solid var(--panel-border);border-radius:1.3rem;padding:1.6rem;
  box-shadow:0 24px 60px -20px rgba(0,0,0,0.6);box-sizing:border-box;
}
.detalle-cerrar{position:absolute;top:1rem;right:1rem;z-index:1;background:var(--panel);border-radius:50%;width:2rem;height:2rem;display:grid;place-items:center;}
.detalle-foto{
  aspect-ratio:1;width:100%;border-radius:1.1rem;overflow:hidden;margin-bottom:1rem;
  background:var(--thumb-bg, var(--bg-soft));
}
.detalle-foto img{width:100%;height:100%;object-fit:cover;}
/* Galería completa (todas las fotos del producto, no solo la portada) — mismas
   miniaturas .pub-gal-thumb que ya usa la tarjeta chica, reutilizadas tal cual. */
.detalle-gallery{margin-top:-.4rem;}
.detalle-categoria{
  display:inline-block;padding:.25rem .65rem;border-radius:.5rem;margin-bottom:.5rem;
  background:color-mix(in srgb, var(--cyan) 13%, transparent);color:var(--cyan);
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
}
.detalle-modal h3{font-size:1.15rem;margin-bottom:.5rem;padding-right:2rem;}
/* Separador entre el nombre y la descripción: una etiqueta chica + una línea que la
   acompaña, para que quede claro dónde termina el título y empieza el texto largo. */
.detalle-desc-label{display:flex;align-items:center;gap:.6rem;margin:.6rem 0 .5rem;}
.detalle-desc-label span{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan);white-space:nowrap;}
.detalle-desc-label::after{content:'';flex:1;height:1px;background:var(--panel-border);}
.detalle-desc{color:var(--text-dim);font-size:.9rem;line-height:1.5;margin-bottom:1rem;overflow-wrap:anywhere;}
.detalle-colores{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-bottom:1.2rem;}
/* Separa el precio/botón de todo lo de arriba (nombre, descripción, colores) — sin
   etiqueta, a diferencia de .detalle-desc-label, porque acá no hace falta nombrar nada. */
.detalle-separador{height:1px;background:var(--panel-border);margin-bottom:1.1rem;}
.detalle-color{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--text-dim);}
.detalle-color-dot{
  display:block;width:1rem;height:1rem;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,0.3);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15);
}

@media (max-width:640px){
  .pub-grid{grid-template-columns:repeat(2,1fr);gap:.8rem;}
  .cart-fab{right:1rem;bottom:1rem;}
}

.panel-logout{font-size:.85rem;color:var(--text-dim);border:1px solid var(--panel-border);border-radius:999px;padding:.55rem 1.2rem;background:var(--panel);cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease);}
.panel-logout:hover{color:var(--text);border-color:var(--cyan-dim);}

/* ===== Pago (cuenta/pago.html) y Admin (admin/index.html) ===== */
.pago-summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.5rem;background:var(--bg);border-radius:1.1rem;border:1px solid var(--panel-border);margin-bottom:1.8rem;}
.pago-summary span{color:var(--text-dim);font-size:.85rem;}
.pago-summary b{display:block;font-size:1.05rem;}
.pago-price{font-family:var(--font-head);color:var(--cyan);font-size:1.5rem;font-weight:700;}
.qr-box{
  width:min(260px,80%);margin:0 auto 1.6rem;padding:1rem;background:#fff;border-radius:1.2rem;
  display:flex;align-items:center;justify-content:center;
}
.qr-box img{width:100%;border-radius:.4rem;}
.qr-missing{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--text-faint);font-size:.8rem;padding:1rem;
}
.pago-steps{counter-reset:paso;margin-bottom:1.8rem;}
.pago-steps li{
  counter-increment:paso;position:relative;padding-left:2.4rem;margin-bottom:1rem;color:var(--text-dim);font-size:.92rem;
}
.pago-steps li::before{
  content:counter(paso);position:absolute;left:0;top:-.1rem;width:1.7rem;height:1.7rem;border-radius:50%;
  background:var(--panel);border:1px solid var(--panel-border);color:var(--cyan);font-weight:700;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);
}
.pago-wa{width:100%;justify-content:center;background:#25d366;color:#052e16;}

.admin-login{width:min(380px,92vw);margin:8rem auto 0;}
.admin-table{width:100%;border-collapse:collapse;margin-top:1rem;}
.admin-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);padding:.6rem .8rem;border-bottom:1px solid var(--panel-border);}
.admin-table td{padding:.8rem;border-bottom:1px solid var(--panel-border);font-size:.88rem;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table button{font-size:.78rem;padding:.45rem .9rem;border-radius:.6rem;background:var(--cyan);color:#04231f;border:none;cursor:pointer;font-weight:600;}
.admin-empty{text-align:center;padding:3rem 1rem;color:var(--text-faint);}

/* ===== Panel admin v2 ===== */
.adm-tabs{display:flex;gap:.4rem;margin-bottom:1.6rem;flex-wrap:wrap;}
.adm-tab{
  font-family:var(--font-head);font-size:.88rem;font-weight:600;padding:.6rem 1.3rem;border-radius:999px;
  background:var(--panel);border:1px solid var(--panel-border);color:var(--text-dim);cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.adm-tab:hover{color:var(--text);}
.adm-tab.active{background:var(--cyan);border-color:transparent;color:#04231f;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.9rem;margin-bottom:1.6rem;}
.stat-card{
  background:var(--panel);border:1px solid var(--panel-border);border-radius:1.1rem;padding:1.1rem 1.2rem;
}
.stat-card b{display:block;font-family:var(--font-head);font-size:1.6rem;font-weight:700;line-height:1.1;}
.stat-card span{font-size:.75rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;}
.stat-card.ok b{color:var(--cyan);}
.stat-card.warn b{color:#f0b95a;}
.stat-card.accent b{color:#8ab8ff;}
.stat-card.gold b{color:var(--gold);}
.adm-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap;}
.adm-pills{display:flex;gap:.4rem;}
.adm-pill{
  font-size:.8rem;padding:.45rem 1rem;border-radius:999px;background:none;
  border:1px solid var(--panel-border);color:var(--text-dim);cursor:pointer;
}
.adm-pill.active{background:var(--cyan);border-color:transparent;color:#04231f;font-weight:600;}
.adm-search{
  flex:1;min-width:200px;max-width:320px;background:var(--bg);border:1px solid var(--panel-border);
  border-radius:.8rem;padding:.6rem 1rem;color:var(--text);font-size:.88rem;font-family:var(--font-body);
}
.adm-search:focus{outline:none;border-color:var(--cyan-dim);}
.adm-scroll{overflow-x:auto;}
.adm-scroll .admin-table{min-width:640px;}
.td-sub{color:var(--text-faint);font-size:.78rem;}
.td-acciones{display:flex;gap:.4rem;justify-content:flex-end;}
.td-acciones button{white-space:nowrap;}
/* Botón kebab (⋮) por usuario */
.act-kebab{
  width:2.1rem;height:2.1rem;border-radius:.55rem;background:none;border:1px solid var(--panel-border);
  color:var(--text-dim);cursor:pointer;font-size:1.3rem;line-height:1;font-weight:700;
  display:grid;place-items:center;padding:0;transition:background .2s,border-color .2s,color .2s;
}
.act-kebab:hover,.act-kebab[aria-expanded="true"]{color:var(--text);border-color:var(--cyan-dim);background:rgba(53,224,208,0.08);}
/* Menú flotante de acciones (position:fixed, se coloca por JS) */
.kebab-menu{
  position:fixed;z-index:120;min-width:230px;padding:.4rem;
  background:var(--bg-alt);border:1px solid var(--panel-border);border-radius:.8rem;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:.1rem;
}
.kebab-group-label{font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);padding:.4rem .7rem .2rem;}
.kebab-item{
  display:block;width:100%;text-align:left;font-size:.84rem;font-weight:500;
  padding:.55rem .7rem;border-radius:.5rem;background:none;border:none;color:var(--text);
  cursor:pointer;font-family:var(--font-body);transition:background .15s;
}
.kebab-item:hover{background:rgba(255,255,255,0.06);}
.kebab-item.is-on{color:var(--cyan);}
.kebab-item.is-danger{color:#ff8f86;}
.kebab-item.is-danger:hover{background:rgba(224,104,95,0.12);}
.kebab-item.is-muted{color:var(--text-faint);cursor:default;font-size:.78rem;}
.kebab-item.is-muted:hover{background:none;}
.kebab-sep{height:1px;background:var(--panel-border);margin:.35rem .3rem;}
/* Interruptor encender/apagar de una herramienta (fila con label + switch) */
.kebab-switchrow{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;width:100%;
  padding:.55rem .7rem;border-radius:.5rem;background:none;border:none;color:var(--text);
  cursor:pointer;font-family:var(--font-body);text-align:left;transition:background .15s;
}
.kebab-switchrow:hover:not(.is-disabled){background:rgba(255,255,255,0.06);}
.kebab-switchrow.is-disabled{cursor:default;opacity:.55;}
.kebab-switch-label{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.kebab-switch-label strong{font-size:.86rem;font-weight:600;}
.kebab-switch-label small{font-size:.7rem;color:var(--text-faint);margin-top:.1rem;}
.kebab-switch{
  position:relative;flex-shrink:0;width:2.6rem;height:1.5rem;border-radius:999px;
  background:rgba(255,255,255,0.14);transition:background .2s var(--ease);
}
.kebab-switch.on{background:var(--cyan);}
.kebab-switch-knob{
  position:absolute;top:.18rem;left:.18rem;width:1.14rem;height:1.14rem;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .2s var(--ease);
}
.kebab-switch.on .kebab-switch-knob{transform:translateX(1.1rem);}
.kebab-switchrow[role="switch"]:focus-visible{outline:2px solid var(--cyan-dim);outline-offset:1px;}
.adm-section{padding:0;}
.act-primary,.admin-table button.act-primary{font-size:.78rem;padding:.45rem .9rem;border-radius:.6rem;background:var(--cyan);color:#04231f;border:none;cursor:pointer;font-weight:600;}
.act-ghost,.admin-table button.act-ghost{font-size:.78rem;padding:.45rem .9rem;border-radius:.6rem;background:none;border:1px solid var(--panel-border);color:var(--text-dim);cursor:pointer;font-weight:500;}
.act-ghost:hover{color:var(--text);border-color:var(--cyan-dim);}
.act-danger,.admin-table button.act-danger{font-size:.78rem;padding:.45rem .9rem;border-radius:.6rem;background:none;border:1px solid rgba(224,104,95,0.35);color:#ff8f86;cursor:pointer;font-weight:500;}
.act-danger:hover{background:rgba(224,104,95,0.12);}
.admin-table button:disabled,.act-primary:disabled,.act-ghost:disabled,.act-danger:disabled{opacity:.5;cursor:wait;}
.badge{display:inline-block;font-size:.72rem;font-weight:600;padding:.2rem .7rem;border-radius:999px;}
.badge-ok{background:rgba(53,224,208,0.14);color:var(--cyan);}
.badge-pend{background:rgba(240,185,90,0.14);color:#f0b95a;}
.log-list li{padding:.7rem 0;border-bottom:1px solid var(--panel-border);font-size:.88rem;color:var(--text-dim);}
.log-list li:last-child{border-bottom:none;}
.log-accion{
  display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:.15rem .6rem;border-radius:.5rem;margin-right:.6rem;background:var(--panel);color:var(--cyan);
}
.log-accion.log-eliminar_usuario{color:#ff8f86;}
.log-accion.log-desactivar{color:#f0b95a;}
.toast{
  position:fixed;bottom:1.4rem;left:50%;transform:translate(-50%,150%);z-index:300;
  background:var(--bg-soft);border:1px solid var(--cyan-dim);color:var(--text);
  padding:.8rem 1.4rem;border-radius:.9rem;font-size:.88rem;box-shadow:0 12px 30px rgba(0,0,0,.4);
  transition:transform .35s var(--ease),opacity .35s var(--ease);max-width:90vw;
  opacity:0;visibility:hidden;pointer-events:none;
}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible;}
.toast.error{border-color:rgba(224,104,95,0.5);}

/* ===== FAQ (landing) ===== */
.faq{width:min(760px,92vw);margin:0 auto;padding:5rem 0 6rem;}
.faq-item{border:1px solid var(--panel-border);border-radius:1.1rem;background:var(--panel);margin-bottom:.8rem;overflow:hidden;}
.faq-item summary{
  list-style:none;cursor:pointer;padding:1.1rem 1.4rem;font-family:var(--font-head);font-weight:600;
  font-size:.98rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';color:var(--cyan);font-size:1.2rem;flex-shrink:0;transition:transform .3s var(--ease);}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{padding:0 1.4rem 1.2rem;color:var(--text-dim);font-size:.92rem;}
.skip-link{
  position:absolute;top:-100px;left:1rem;z-index:400;background:var(--cyan);color:#04231f;
  padding:.6rem 1.2rem;border-radius:.7rem;font-weight:600;transition:top .2s;
}
.skip-link:focus{top:1rem;}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px;border-radius:.4rem;
}

/* ===== Botón flotante de WhatsApp ===== */
.wa-float{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:200;
  width:3.6rem;height:3.6rem;border-radius:50%;background:#25d366;color:#052e16;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(37,211,102,.4);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.wa-float:hover{transform:scale(1.08);box-shadow:0 14px 32px rgba(37,211,102,.5);}
@media (max-width:640px){
  .wa-float{right:1rem;bottom:1rem;width:3.2rem;height:3.2rem;}
}

.adm-tab-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.35rem;
  margin-left:.4rem;padding:0 .35rem;border-radius:999px;background:#f0b95a;color:#2b1c00;
  font-size:.7rem;font-weight:700;vertical-align:middle;
}
.adm-tab.active .adm-tab-badge{background:#04231f;color:#f0b95a;}

.card-num{
  display:inline-block;font-family:var(--font-head);font-size:1.3rem;font-weight:700;
  color:var(--cyan);letter-spacing:.02em;margin-bottom:.6rem;opacity:.85;
}

/* ===== Selector de plantilla (editor de catálogo) ===== */
.tpl-picker{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
.tpl-option{
  position:relative;display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.1rem;
  border-radius:1rem;border:1px solid var(--panel-border);background:var(--bg);cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.tpl-option input{position:absolute;opacity:0;}
.tpl-option:has(input:checked){border-color:var(--cyan);background:rgba(53,224,208,0.07);}
.tpl-option-title{font-weight:600;font-size:.9rem;}
.tpl-option-desc{font-size:.78rem;color:var(--text-faint);}
@media (max-width:560px){ .tpl-picker{grid-template-columns:1fr;} }

/* ===== Precio opcional ("Consultar precio") ===== */
.pub-price-consultar{
  font-family:var(--font-body);color:var(--text-faint);font-weight:600;font-size:.82rem;
  font-style:italic;
}
.pub-consultar{
  display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;
  border-radius:999px;border:1px solid var(--cyan-dim);color:var(--cyan);font-size:.78rem;
  font-weight:600;white-space:nowrap;flex-shrink:0;transition:background .25s var(--ease);
}
.pub-consultar:hover{background:rgba(53,224,208,0.1);}

/* ===== Plantilla "Portafolio de servicios" (más editorial, sin grid de precios fijo) ===== */
.tpl-servicios .pub-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.6rem;}
.tpl-servicios .pub-thumb{aspect-ratio:4/5;}
.tpl-servicios .pub-body{padding:1.2rem 1.3rem 1.4rem;}
.tpl-servicios .pub-body h3{font-size:1.05rem;}
.tpl-servicios .pub-desc{-webkit-line-clamp:3;font-size:.82rem;}
@media (max-width:640px){
  .tpl-servicios .pub-grid{grid-template-columns:1fr 1fr;gap:.8rem;}
}

/* ===== Plantilla "Revista" (masonry: fotos a su alto natural, muy visual) =====
   Usa columnas CSS: cada tarjeta conserva la proporción real de su foto, dando el
   look editorial de mosaico irregular. */
.tpl-revista .pub-grid{display:block;column-count:3;column-gap:1.1rem;}
.tpl-revista .pub-card{break-inside:avoid;margin-bottom:1.1rem;display:inline-block;width:100%;}
.tpl-revista .pub-thumb{aspect-ratio:auto;padding:0;}
.tpl-revista .pub-thumb img{height:auto;display:block;object-fit:initial;}
@media (max-width:900px){ .tpl-revista .pub-grid{column-count:2;} }
@media (max-width:560px){ .tpl-revista .pub-grid{column-count:1;} }

/* ===== Plantilla "Lista" (filas: foto al lado, ideal para menús y catálogos largos) ===== */
.tpl-lista .pub-grid{grid-template-columns:1fr;gap:.8rem;}
.tpl-lista .pub-card{display:flex;align-items:stretch;}
.tpl-lista .pub-thumb{width:36%;max-width:160px;aspect-ratio:1;flex-shrink:0;}
.tpl-lista .pub-body{flex:1;display:flex;flex-direction:column;justify-content:center;}
.tpl-lista .pub-body h3{font-size:1.02rem;}
@media (min-width:900px){
  .tpl-lista .pub-grid{grid-template-columns:1fr 1fr;gap:.9rem 1.4rem;}
}

.ed-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;}
.ed-panel-head h2{margin-bottom:.3rem;}
.ed-panel-head .ed-sub{margin-bottom:0;}
.ed-panel-head .btn{flex-shrink:0;cursor:pointer;}

/* ===== Fondo animado (estrellas estáticas + partículas vivas, ambas ultraligeras) =====
   Capa 1 (.bg-stars): un solo <div> con una textura tileada de puntos — un único paint,
   cero JS, cero costo de animación. Da densidad de "cielo estrellado" al instante.
   Capa 2 (.bg-anim, de script.js): pocas partículas de acento que flotan y titilan
   (transform+opacity, compuestas en GPU) — el toque "vivo" de tecnología. */
.bg-stars{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22320%22%3E%3Ccircle%20cx%3D%22283.5%22%20cy%3D%22261.6%22%20r%3D%221.55%22%20fill%3D%22white%22%20fill-opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%22179.8%22%20cy%3D%22230.7%22%20r%3D%221.16%22%20fill%3D%22white%22%20fill-opacity%3D%220.14%22%2F%3E%3Ccircle%20cx%3D%22225.0%22%20cy%3D%22249.9%22%20r%3D%221.28%22%20fill%3D%22white%22%20fill-opacity%3D%220.26%22%2F%3E%3Ccircle%20cx%3D%22237.2%22%20cy%3D%22303.2%22%20r%3D%221.59%22%20fill%3D%22white%22%20fill-opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%2258.5%22%20cy%3D%2243.2%22%20r%3D%221.22%22%20fill%3D%22white%22%20fill-opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%2252.2%22%20cy%3D%22141.3%22%20r%3D%220.84%22%20fill%3D%22white%22%20fill-opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%22214.6%22%20cy%3D%2213.0%22%20r%3D%221.10%22%20fill%3D%22white%22%20fill-opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%22138.6%22%20cy%3D%22234.9%22%20r%3D%220.63%22%20fill%3D%22white%22%20fill-opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22152.1%22%20cy%3D%2256.5%22%20r%3D%221.47%22%20fill%3D%22white%22%20fill-opacity%3D%220.20%22%2F%3E%3Ccircle%20cx%3D%22109.0%22%20cy%3D%22244.2%22%20r%3D%220.81%22%20fill%3D%22white%22%20fill-opacity%3D%220.13%22%2F%3E%3Ccircle%20cx%3D%22313.5%22%20cy%3D%2259.2%22%20r%3D%221.23%22%20fill%3D%22white%22%20fill-opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%2297.9%22%20cy%3D%22208.7%22%20r%3D%220.58%22%20fill%3D%22white%22%20fill-opacity%3D%220.15%22%2F%3E%3Ccircle%20cx%3D%22133.8%22%20cy%3D%22250.2%22%20r%3D%221.46%22%20fill%3D%22white%22%20fill-opacity%3D%220.29%22%2F%3E%3Ccircle%20cx%3D%22156.6%22%20cy%3D%2249.5%22%20r%3D%221.54%22%20fill%3D%22white%22%20fill-opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%22103.0%22%20cy%3D%22171.3%22%20r%3D%221.12%22%20fill%3D%22white%22%20fill-opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%22182.3%22%20cy%3D%22244.4%22%20r%3D%221.58%22%20fill%3D%22white%22%20fill-opacity%3D%220.33%22%2F%3E%3Ccircle%20cx%3D%22201.1%22%20cy%3D%2299.0%22%20r%3D%221.19%22%20fill%3D%22white%22%20fill-opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%2260.6%22%20cy%3D%22157.6%22%20r%3D%220.52%22%20fill%3D%22white%22%20fill-opacity%3D%220.14%22%2F%3E%3Ccircle%20cx%3D%22147.9%22%20cy%3D%22120.1%22%20r%3D%220.80%22%20fill%3D%22white%22%20fill-opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%2220.5%22%20cy%3D%22101.1%22%20r%3D%220.93%22%20fill%3D%22white%22%20fill-opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%22184.2%22%20cy%3D%2260.9%22%20r%3D%220.61%22%20fill%3D%22white%22%20fill-opacity%3D%220.33%22%2F%3E%3Ccircle%20cx%3D%22243.8%22%20cy%3D%2290.6%22%20r%3D%220.96%22%20fill%3D%22white%22%20fill-opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%22148.0%22%20cy%3D%22269.1%22%20r%3D%221.49%22%20fill%3D%22white%22%20fill-opacity%3D%220.15%22%2F%3E%3Ccircle%20cx%3D%2247.0%22%20cy%3D%2294.6%22%20r%3D%221.03%22%20fill%3D%22white%22%20fill-opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%2243.4%22%20cy%3D%2249.2%22%20r%3D%220.59%22%20fill%3D%22white%22%20fill-opacity%3D%220.50%22%2F%3E%3Ccircle%20cx%3D%22157.0%22%20cy%3D%22176.3%22%20r%3D%221.39%22%20fill%3D%22white%22%20fill-opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22182.4%22%20cy%3D%22152.0%22%20r%3D%221.41%22%20fill%3D%22white%22%20fill-opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%2280.1%22%20cy%3D%22209.3%22%20r%3D%221.53%22%20fill%3D%22white%22%20fill-opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22260.9%22%20cy%3D%2236.2%22%20r%3D%221.37%22%20fill%3D%22white%22%20fill-opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22163.8%22%20cy%3D%22126.5%22%20r%3D%221.38%22%20fill%3D%22white%22%20fill-opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22247.1%22%20cy%3D%22144.3%22%20r%3D%221.20%22%20fill%3D%22white%22%20fill-opacity%3D%220.27%22%2F%3E%3Ccircle%20cx%3D%2232.8%22%20cy%3D%2262.0%22%20r%3D%221.07%22%20fill%3D%22white%22%20fill-opacity%3D%220.20%22%2F%3E%3Ccircle%20cx%3D%22204.4%22%20cy%3D%22231.3%22%20r%3D%220.57%22%20fill%3D%22white%22%20fill-opacity%3D%220.29%22%2F%3E%3Ccircle%20cx%3D%22117.8%22%20cy%3D%2267.4%22%20r%3D%221.44%22%20fill%3D%22white%22%20fill-opacity%3D%220.51%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:repeat;background-size:320px 320px;
}
body.fondo-marfil .bg-stars, body.fondo-arena .bg-stars, body.fondo-personalizado-claro .bg-stars{opacity:.16;}

/* "Papel de fondo": empapelado FIJO (no anima) con figuras del rubro, tileado — es la capa
   más al fondo de todas, detrás incluso del cielo de estrellas base y de cualquier
   animación de movimiento. Un solo background-image, cero costo de repintado. */
.bg-papel{position:fixed;inset:0;z-index:-3;pointer-events:none;background-repeat:repeat;}
/* Cuando hay un papel de rubro activo, el cielo de estrellas base se apaga para no competir
   visualmente con el nuevo empapelado (ambos ocupan el mismo rol de "textura de fondo"). */
body.papel-activo .bg-stars{display:none;}
/* El papel "Estrellas" es especial: reusa exactamente el mismo patrón que ya lleva toda la
   web (el que le gusta), solo que más visible que la versión "de serie" y a la escala que
   el dueño elija. */
body.papel-estrellas .bg-stars{display:block;opacity:.85;}
body.fondo-marfil.papel-estrellas .bg-stars, body.fondo-arena.papel-estrellas .bg-stars,
body.fondo-personalizado-claro.papel-estrellas .bg-stars{opacity:.35;}

.bg-anim{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bg-anim span{
  position:absolute;top:0;border-radius:50%;
  animation:bg-sube linear infinite,bg-titila 3.4s ease-in-out infinite;will-change:transform,opacity;
}
.bg-anim span.grande{box-shadow:0 0 10px 2px currentColor;}
@keyframes bg-sube{
  from{transform:translate3d(0,106vh,0);}
  to{transform:translate3d(var(--dx,0),-6vh,0);}
}
@keyframes bg-titila{
  0%,100%{opacity:var(--op-min,.2);}
  50%{opacity:var(--op-max,.6);}
}
@media (prefers-reduced-motion:reduce){ .bg-anim{display:none;} }

/* ===== Panel del usuario: Mis herramientas ===== */
.panel-hub{padding:1.2rem 1.5rem 1.5rem;}
.panel-sec-head{width:var(--shell);margin:0 auto 1.1rem;}
.panel-sec-head h2{font-size:1.12rem;}
.panel-sec-head p{color:var(--text-faint);font-size:.85rem;margin-top:.15rem;}
.hub-card-owned{border-color:var(--cyan-dim);transition:transform .5s var(--ease),border-color .4s var(--ease);}
.hub-card-owned:hover{transform:translateY(-6px);border-color:var(--cyan);}
.hub-card-owned .hub-card-inner{background:linear-gradient(165deg, rgba(53,224,208,0.1), var(--bg-alt) 55%);}
.hub-tag-owned{color:var(--cyan);border-color:var(--cyan-dim);font-weight:700;}
.hub-meta{font-size:.78rem;color:var(--text-faint);margin-top:1rem;}

/* ===== Editor: panel de Diseño ===== */
.tpl-picker-4{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;}
@media (max-width:640px){ .tpl-picker-4{grid-template-columns:1fr 1fr;} }
.fondo-mini{width:100%;height:2.2rem;border-radius:.6rem;border:1px solid var(--panel-border);margin-bottom:.4rem;}
.fondo-mini.f-nocturno{background:linear-gradient(135deg,#101d2e,#0b1522);}
.fondo-mini.f-carbon{background:linear-gradient(135deg,#121212,#050505);}
.fondo-mini.f-marfil{background:linear-gradient(135deg,#f6f1e7,#efe7d8);}
.fondo-mini.f-arena{background:linear-gradient(135deg,#efe4d4,#e3d2ba);}
.fondo-mini.f-esmeralda{background:linear-gradient(135deg,#0e2a20,#071812);}
.fondo-mini.f-vino{background:linear-gradient(135deg,#2a121c,#160a10);}
.fondo-mini.f-abismo{background:linear-gradient(135deg,#0e1a2e,#070f1c);}
.fondo-mini.f-grafito{background:linear-gradient(135deg,#20232a,#0e0f12);}
.fondo-mini.f-personalizado{
  background:
    conic-gradient(from 180deg, #ff5c8a, #ffd23f, #3ddc84, #4da3ff, #7c5cff, #ff5c8a);
}
.dis-lluvia-opts{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--panel-border);}
.dis-color-row{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;}
.dis-color-row input[type="color"]{
  width:3rem;height:3rem;border-radius:.75rem;border:2px solid var(--panel-border);cursor:pointer;
  padding:0;background:none;flex-shrink:0;transition:transform .2s var(--ease),border-color .2s var(--ease);
}
.dis-color-row input[type="color"]:hover{transform:scale(1.06);border-color:var(--cyan-dim);}
.dis-color-row input[type="color"]::-webkit-color-swatch-wrapper{padding:3px;}
.dis-color-row input[type="color"]::-webkit-color-swatch{border:none;border-radius:.5rem;}
.dis-color-row input[type="color"]::-moz-color-swatch{border:none;border-radius:.5rem;}
.dis-color-hex{font-family:var(--font-head);font-size:.9rem;font-weight:700;color:var(--text);letter-spacing:.02em;min-width:5.5rem;}
.dis-color-auto-btn{
  font-size:.78rem;color:var(--text-faint);background:none;border:none;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;transition:color .2s var(--ease);
}
.dis-color-auto-btn:hover{color:var(--cyan);}
/* El recuadro se queda contenido dentro del panel (mismo look que el resto del editor:
   bordes redondeados, con margen) — no se estira a pantalla completa, eso rompía el
   diseño del panel. Lo que sí replica de la portada real es la PROPORCIÓN ancho/alto
   (mismo "zoom"/recorte visible), calculada en JS según el ancho de pantalla actual
   (ver actualizarProporcionPortada) y aplicada como --portada-ratio. Con eso, aunque el
   recuadro se vea más chico, la porción de foto que se ve dentro es la misma que en la
   portada real — solo en miniatura. */
.portada-editor{
  position:relative;width:100%;aspect-ratio:var(--portada-ratio, 3.4/1);
  border-radius:.9rem;overflow:hidden;margin-bottom:.4rem;display:none;
}
.portada-preview{width:100%;height:100%;object-fit:cover;object-position:50% 50%;cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none;display:block;}
.portada-editor.arrastrando .portada-preview{cursor:grabbing;}
.portada-editor-hint{position:absolute;left:.6rem;bottom:.6rem;padding:.3rem .6rem;border-radius:.5rem;background:rgba(0,0,0,.55);color:#fff;font-size:.72rem;pointer-events:none;opacity:0;transition:opacity .2s var(--ease);}
.portada-editor:hover .portada-editor-hint{opacity:1;}
.portada-pos-guardando{font-size:.72rem;color:var(--text-faint);margin:.1rem 0 .8rem;display:none;}

.logo-editor{position:relative;width:8rem;height:8rem;border-radius:1.4rem;overflow:hidden;margin-bottom:.4rem;display:none;}
.logo-preview{width:100%;height:100%;object-fit:cover;object-position:50% 50%;cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none;display:block;}
.logo-editor.arrastrando .logo-preview{cursor:grabbing;}
.logo-editor.logo-editor-circulo{border-radius:50%;}
.logo-preview.logo-preview-completo{object-fit:contain;background:var(--bg-soft);}
.logo-editor:hover .portada-editor-hint{opacity:1;}

/* Encuadre de foto de producto: cuadrado (misma proporción 1:1 que .pub-thumb en el
   catálogo real), con arrastre en las dos direcciones + zoom — a diferencia de
   portada/logo, que solo mueven verticalmente. */
.foto-editor{
  position:relative;width:100%;max-width:13rem;aspect-ratio:1;border-radius:1.1rem;
  overflow:hidden;margin-bottom:.6rem;background:var(--bg-soft);display:none;
}
.foto-editor-img{
  width:100%;height:100%;object-fit:cover;cursor:grab;touch-action:none;
  user-select:none;-webkit-user-drag:none;display:block;transform-origin:center;
}
.foto-editor.arrastrando .foto-editor-img{cursor:grabbing;}
.foto-editor-hint{
  position:absolute;left:.6rem;bottom:.6rem;padding:.3rem .6rem;border-radius:.5rem;
  background:rgba(0,0,0,.55);color:#fff;font-size:.72rem;pointer-events:none;
  opacity:0;transition:opacity .2s var(--ease);
}
.foto-editor:hover .foto-editor-hint{opacity:1;}
.foto-zoom-row{display:none;align-items:center;gap:.6rem;margin-bottom:.4rem;max-width:13rem;}
.foto-zoom-row input[type="range"]{flex:1;accent-color:var(--cyan);}
.foto-zoom-icon{flex-shrink:0;font-size:.85rem;}
.foto-zoom-row span:last-child{font-size:.78rem;color:var(--text-faint);min-width:2.8rem;text-align:right;flex-shrink:0;}

.preview-banner{position:sticky;top:0;z-index:50;width:100%;box-sizing:border-box;padding:.7rem 1rem;text-align:center;font-size:.82rem;background:var(--cyan);color:#0a1520;font-weight:600;}
.preview-banner a{color:#0a1520;text-decoration:underline;text-underline-offset:2px;margin-left:.4rem;}

/* Galería del producto (editor): miniaturas de las fotos extra + botón para agregar */
.galeria-editor{display:flex;gap:.55rem;flex-wrap:wrap;}
.gal-item{position:relative;width:4.4rem;height:4.4rem;border-radius:.7rem;overflow:hidden;background:var(--bg-soft);border:1px solid var(--panel-border);padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;}
.gal-item img{width:100%;height:100%;object-fit:contain;display:block;}
.gal-item .gal-del{
  position:absolute;top:3px;right:3px;width:1.35rem;height:1.35rem;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,0.62);color:#fff;font-size:.72rem;line-height:1;display:grid;place-items:center;
}
.gal-item .gal-del:hover{background:rgba(220,40,60,0.85);}
.gal-badge{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,0.58);color:#fff;font-size:.56rem;text-align:center;padding:2px 0;letter-spacing:.04em;}
.gal-add{
  width:4.4rem;height:4.4rem;border-radius:.7rem;border:1.5px dashed var(--panel-border);background:none;
  color:var(--text-faint);cursor:pointer;font-size:1.5rem;transition:border-color .2s var(--ease),color .2s var(--ease);
}
.gal-add:hover{border-color:var(--cyan-dim);color:var(--cyan);}
.gal-hint{font-size:.78rem;color:var(--text-faint);}

/* ===== Temas del catálogo público =====
   El acento (--cyan) lo pone ver.html como estilo inline en <body>;
   de él se derivan tonos con color-mix. Los fondos re-mapean los tokens. */
body.pub-tema{
  --cyan-deep: color-mix(in srgb, var(--cyan) 55%, #000);
  --cyan-dim: color-mix(in srgb, var(--cyan) 32%, transparent);
  /* Color del fondo animado: por defecto sigue al color principal, pero ver.html lo
     puede pisar con un tono distinto si el dueño eligió "Color de la animación". */
  --anim-color: var(--cyan);
}
body.fondo-carbon{
  --bg:#0d0d0f; --bg-alt:#151517; --bg-soft:#1d1d21;
  --panel:rgba(255,255,255,0.05); --panel-border:rgba(255,255,255,0.1);
}
body.fondo-marfil, body.fondo-arena{
  --text:#20242c; --text-dim:#4d5766; --text-faint:#8a93a2;
  --panel:rgba(0,0,0,0.04); --panel-border:rgba(0,0,0,0.11);
}
body.fondo-marfil{ --bg:#f6f1e7; --bg-alt:#fdfaf4; --bg-soft:#ece4d3; }
body.fondo-arena{ --bg:#efe4d4; --bg-alt:#f9f2e7; --bg-soft:#e2d3bc; }
/* Fondos oscuros de color / neutros: panel translúcido neutro (como carbón) para que
   no herede el tinte navy del tema por defecto. */
body.fondo-esmeralda, body.fondo-vino, body.fondo-abismo, body.fondo-grafito{
  --panel:rgba(255,255,255,0.05); --panel-border:rgba(255,255,255,0.11);
}
body.fondo-esmeralda{ --bg:#0a1f18; --bg-alt:#0e2a20; --bg-soft:#123528; }
body.fondo-vino{ --bg:#1c0d13; --bg-alt:#26121b; --bg-soft:#331826; }
body.fondo-abismo{ --bg:#0a1220; --bg-alt:#0e1b2e; --bg-soft:#12253d; }
body.fondo-grafito{ --bg:#16181c; --bg-alt:#1d2025; --bg-soft:#26292f; }
body.fondo-marfil .pub-cats, body.fondo-arena .pub-cats{background:color-mix(in srgb, var(--bg) 85%, transparent);}
body.fondo-carbon .pub-cats,
body.fondo-esmeralda .pub-cats, body.fondo-vino .pub-cats,
body.fondo-abismo .pub-cats, body.fondo-grafito .pub-cats{background:color-mix(in srgb, var(--bg) 84%, transparent);}
body.fondo-marfil .grain, body.fondo-arena .grain{opacity:0.05;}
/* Fondo "Personalizado": la paleta la calcula ver.html en JS (color-mix a partir del
   color elegido); acá solo falta el fondo translúcido de la barra de categorías y,
   si el color resultó claro, atenuar el grano igual que en los fondos claros curados. */
body.fondo-personalizado .pub-cats{background:color-mix(in srgb, var(--bg) 84%, transparent);}
body.fondo-personalizado-claro .grain{opacity:0.05;}

/* Fuentes elegibles (las carga ver.html según el tema) */
body.fuente-elegante{ --font-head:"Playfair Display", Georgia, serif; }
body.fuente-redonda{ --font-head:"Baloo 2", sans-serif; --font-body:"Nunito", sans-serif; }
body.fuente-clasica{ --font-head:"Lora", Georgia, serif; }
body.fuente-editorial{ --font-head:"Fraunces", Georgia, serif; }
body.fuente-tecno{ --font-head:"Space Mono", ui-monospace, monospace; }
body.fuente-manuscrita{ --font-head:"Caveat", "Segoe Script", cursive; }
body.fuente-titan{ --font-head:"Sora", var(--font-head), sans-serif; }

/* "Destellos": campo de estrellas real (JS genera cada punto — igual costo que
   .bg-anim de partículas). Cada estrella titila con su propio delay/duración
   aleatorios, así se ve vivo en vez de un solo destello sincronizado; solo
   anima opacity, compuesto en GPU, cero repintado. */
.bg-destellos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bg-destellos span{
  position:absolute;border-radius:50%;box-shadow:0 0 4px 1px currentColor;
  animation:destellos-twinkle ease-in-out infinite;will-change:opacity;
}
@keyframes destellos-twinkle{0%,100%{opacity:.1;}50%{opacity:var(--op-max,.9);}}
@media (prefers-reduced-motion:reduce){ .bg-destellos{display:none;} }

/* "Bruma": 3 manchas de color grandes con blur real (no degradado simulado), cada
   una con su propio recorrido de varios puntos (no solo ida y vuelta) para que el
   movimiento se sienta orgánico. JS solo pone posición inicial y tono de cada una;
   la animación es puramente transform, compuesta en GPU sobre una sola capa con blur. */
.bg-bruma{position:fixed;inset:-10%;z-index:-1;pointer-events:none;overflow:hidden;filter:blur(46px);}
.bg-bruma span{position:absolute;border-radius:50%;will-change:transform;}
.bg-bruma span:nth-child(1){animation:bruma-a 21s ease-in-out infinite;}
.bg-bruma span:nth-child(2){animation:bruma-b 26s ease-in-out infinite;}
.bg-bruma span:nth-child(3){animation:bruma-c 18s ease-in-out infinite;}
@keyframes bruma-a{
  0%{transform:translate3d(0,0,0) scale(1);}
  30%{transform:translate3d(22vw,10vh,0) scale(1.3);}
  62%{transform:translate3d(6vw,-16vh,0) scale(0.85);}
  100%{transform:translate3d(0,0,0) scale(1);}
}
@keyframes bruma-b{
  0%{transform:translate3d(0,0,0) scale(1.1);}
  35%{transform:translate3d(-18vw,14vh,0) scale(0.9);}
  70%{transform:translate3d(-8vw,-12vh,0) scale(1.25);}
  100%{transform:translate3d(0,0,0) scale(1.1);}
}
@keyframes bruma-c{
  0%{transform:translate3d(0,0,0) scale(0.95);}
  40%{transform:translate3d(14vw,-14vh,0) scale(1.2);}
  75%{transform:translate3d(-10vw,8vh,0) scale(0.85);}
  100%{transform:translate3d(0,0,0) scale(0.95);}
}
@media (prefers-reduced-motion:reduce){ .bg-bruma{display:none;} }

/* "Ondas": anillos que nacen en el centro y se expanden hasta desvanecerse — varios
   anillos con delay negativo escalonado (JS) para que siempre haya al menos uno
   visible, nunca un hueco vacío. Solo transform+opacity, GPU puro. */
.bg-ondas{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bg-ondas span{
  position:absolute;left:50%;top:30%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;border:2px solid currentColor;
  animation:ondas-expandir ease-out infinite;will-change:transform,opacity;
}
@keyframes ondas-expandir{
  0%{transform:scale(1);opacity:.6;}
  100%{transform:scale(34);opacity:0;}
}
@media (prefers-reduced-motion:reduce){ .bg-ondas{display:none;} }

/* "Lluvia": formas o emojis (según el rubro elegido) que cruzan la pantalla en la
   dirección elegida — un solo transform por elemento (traslado + rotación juntos:
   mezclarlos en animaciones separadas rompe el cálculo de posición en Chrome), cada
   uno con su propio delay negativo para que arranque ya "en movimiento". La posición
   base (arriba/abajo/lateral) la pone JS según la dirección elegida. */
.bg-lluvia{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bg-lluvia span{position:absolute;display:flex;align-items:center;justify-content:center;line-height:1;will-change:transform;}
.bg-lluvia span svg{width:100%;height:100%;overflow:visible;}
@keyframes lluvia-abajo{
  0%{transform:translateY(0) rotate(0deg);}
  100%{transform:translateY(120vh) rotate(var(--rot,360deg));}
}
@keyframes lluvia-arriba{
  0%{transform:translateY(0) rotate(0deg);}
  100%{transform:translateY(-120vh) rotate(var(--rot,360deg));}
}
@keyframes lluvia-lateral{
  0%{transform:translateX(0) rotate(0deg);}
  100%{transform:translateX(116vw) rotate(var(--rot,360deg));}
}
@keyframes lluvia-diagonal{
  0%{transform:translate3d(0,0,0) rotate(0deg);}
  100%{transform:translate3d(26vw,120vh,0) rotate(var(--rot,360deg));}
}
@media (prefers-reduced-motion:reduce){ .bg-lluvia{display:none;} }

/* "Burbujas": suben con un vaivén lateral de 4 puntos (no una simple línea recta) y un
   brillo interno tipo vidrio — un solo transform por burbuja, GPU puro. */
.bg-burbujas{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bg-burbujas span{
  position:absolute;bottom:-12vh;border-radius:50%;box-sizing:border-box;
  border:2.4px solid currentColor;
  background:radial-gradient(circle at 30% 26%, color-mix(in srgb, currentColor 78%, transparent), transparent 62%);
  will-change:transform;animation:burbuja-subir linear infinite;
}
@keyframes burbuja-subir{
  0%{transform:translate3d(0,0,0);}
  25%{transform:translate3d(var(--w1,3vw),-30vh,0);}
  50%{transform:translate3d(var(--w2,-3vw),-58vh,0);}
  75%{transform:translate3d(var(--w1,3vw),-86vh,0);}
  100%{transform:translate3d(0,-120vh,0);}
}
@media (prefers-reduced-motion:reduce){ .bg-burbujas{display:none;} }

/* "Constelación": puntos que titilan (misma técnica que Destellos) más un puñado de
   líneas entre los más cercanos que aparecen y desaparecen — sensación de red viva.
   Las líneas son un solo <span> rotado (transform-origin en su punto de partida),
   nada de SVG ni recálculo por frame: todo geometría fija calculada una vez en JS. */
.bg-constelacion{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bg-constelacion .cx-punto{
  position:absolute;width:4.5px;height:4.5px;border-radius:50%;background:currentColor;
  box-shadow:0 0 7px 2px currentColor;animation:destellos-twinkle ease-in-out infinite;will-change:opacity;
}
.bg-constelacion .cx-linea{
  position:absolute;height:1.5px;background:currentColor;transform-origin:0 50%;
  animation:constelacion-flicker ease-in-out infinite;will-change:opacity;
}
@keyframes constelacion-flicker{0%,100%{opacity:0;}45%,55%{opacity:.8;}}
@media (prefers-reduced-motion:reduce){ .bg-constelacion{display:none;} }

/* "Cometas": meteoros grandes con cabeza brillante y estela larga, repartidos por toda
   la pantalla — el ángulo de cada uno se fija UNA vez en el <span> envoltorio (sin animar)
   y el cuerpo adentro solo se traslada en su propio eje local (translateX), así el vuelo
   queda perfectamente diagonal sin pelear rotate contra translate3d en el mismo keyframe. */
.bg-cometas{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bg-cometas .cometa-wrap{position:absolute;}
.bg-cometas .cometa-cuerpo{
  position:absolute;width:var(--len,150px);height:2.4px;border-radius:3px;
  background:linear-gradient(90deg, transparent, currentColor 60%, #fff);
  box-shadow:0 0 8px 1.5px currentColor;
  will-change:transform,opacity;animation:cometa-cruzar linear infinite;
}
.bg-cometas .cometa-cuerpo::after{
  content:"";position:absolute;right:-2.5px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-radius:50%;background:#fff;box-shadow:0 0 14px 3px currentColor;
}
@keyframes cometa-cruzar{
  0%{transform:translateX(0);opacity:0;}
  8%{opacity:1;}
  34%{opacity:1;}
  46%{transform:translateX(var(--dist,90vmax));opacity:0;}
  100%{transform:translateX(var(--dist,90vmax));opacity:0;}
}
@media (prefers-reduced-motion:reduce){ .bg-cometas{display:none;} }

/* "Remolino": puntos que orbitan alrededor de 2-3 centros — el truco clásico de CSS
   (rotar, trasladar el radio, rotar de vuelta) hace que el punto orbite sin girar sobre
   sí mismo. Un solo transform, GPU puro. */
.bg-remolino{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bg-remolino span{
  position:absolute;width:11px;height:11px;border-radius:50%;background:currentColor;
  box-shadow:0 0 6px 1px currentColor;
  will-change:transform;animation:remolino-orbita linear infinite;
}
@keyframes remolino-orbita{
  from{transform:rotate(0deg) translateX(var(--radio,80px)) rotate(0deg);}
  to{transform:rotate(360deg) translateX(var(--radio,80px)) rotate(-360deg);}
}
@media (prefers-reduced-motion:reduce){ .bg-remolino{display:none;} }

/* "Copos": nieve en 3 capas de profundidad (lejos = chico/lento/tenue, cerca =
   grande/rápido/claro) — la diferencia de capas es lo que da sensación de volumen,
   no solo puntos cayendo todos igual. Un solo transform por copo, GPU puro. */
.bg-copos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bg-copos span{
  position:absolute;top:-6vh;border-radius:50%;background:currentColor;
  will-change:transform;animation:copos-caer linear infinite;
}
@keyframes copos-caer{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(var(--dx,0),118vh,0);}
}
@media (prefers-reduced-motion:reduce){ .bg-copos{display:none;} }

/* "Confeti": cintas con degradado metálico (claro-color-oscuro, puesto en JS) que caen
   con un giro 3D real — rotateZ (voltereta en pantalla) + rotateY (voltereta sobre su
   propio eje, la que simula que atrapa la luz) a la vez, no un solo rotate plano. Mezclado
   con lentejuelas redondas para romper la monotonía de "puros cuadraditos". */
.bg-confeti{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;perspective:700px;}
.bg-confeti span{
  position:absolute;top:-6vh;will-change:transform;animation:confeti-caer linear infinite;
}
@keyframes confeti-caer{
  0%{transform:translate3d(0,0,0) rotateZ(0deg) rotateY(0deg);}
  100%{transform:translate3d(var(--dx,4vw),118vh,0) rotateZ(var(--rot,360deg)) rotateY(var(--roty,900deg));}
}
@media (prefers-reduced-motion:reduce){ .bg-confeti{display:none;} }

/* "Nubes": siluetas reales de nube (SVG de elipses superpuestas, JS) cruzando en 3 capas
   de profundidad — lejos/chicas/tenues a cerca/grandes/marcadas, igual que Copos pero en
   horizontal. Reemplaza a la vieja "Aurora": esa era un blur sin forma reconocible. */
.bg-nubes{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bg-nubes span{
  position:absolute;left:-30%;background-repeat:no-repeat;background-size:contain;
  will-change:transform;animation:nube-flotar linear infinite;
}
@keyframes nube-flotar{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(160vw,0,0);}
}
@media (prefers-reduced-motion:reduce){ .bg-nubes{display:none;} }

/* "Rejilla": puntos fijos en cuadrícula (posiciones en JS) que laten en oleada diagonal
   — el delay de cada uno depende de fila+columna, así el pulso viaja por la pantalla. */
.bg-rejilla{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bg-rejilla span{
  position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:currentColor;will-change:transform,opacity;animation:rejilla-latido ease-in-out infinite;
}
@keyframes rejilla-latido{
  0%,100%{transform:scale(1);opacity:.14;}
  50%{transform:scale(2.4);opacity:.75;}
}
@media (prefers-reduced-motion:reduce){ .bg-rejilla{display:none;} }

/* "Radar": pantalla real de radar — mira en cruz + 4 anillos concéntricos + un haz de dos
   capas (línea nítida al frente sobre una estela ancha y tenue detrás, no un triángulo
   sólido de un tono plano) + punto central que pulsa como origen del barrido. */
.bg-radar{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bg-radar .radar-cruz{position:absolute;left:50%;top:50%;background:currentColor;opacity:.07;transform:translate(-50%,-50%);}
.bg-radar .radar-cruz-h{width:150vmax;height:1px;}
.bg-radar .radar-cruz-v{width:1px;height:150vmax;}
.bg-radar .radar-anillo{
  position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid currentColor;opacity:.14;
  transform:translate(-50%,-50%);
}
.bg-radar .radar-haz-grupo{position:absolute;left:50%;top:50%;width:0;height:0;will-change:transform;animation:radar-barrer 6s linear infinite;}
.bg-radar .radar-linea{
  position:absolute;left:0;top:0;width:38vmax;height:2px;transform-origin:0 50%;
  background:linear-gradient(90deg, currentColor, transparent);
}
.bg-radar .radar-linea-frente{height:2.4px;box-shadow:0 0 9px 1px currentColor;}
.bg-radar .radar-centro{
  position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  background:currentColor;box-shadow:0 0 10px 2px currentColor;
  animation:radar-pulso 2.4s ease-in-out infinite;
}
@keyframes radar-barrer{ to{transform:rotate(360deg);} }
@keyframes radar-pulso{ 0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1);} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.5);} }
@media (prefers-reduced-motion:reduce){ .bg-radar{display:none;} }

/* Portada / encabezado del catálogo público */
.pub-portada{position:relative;width:100%;height:clamp(150px,30vw,290px);overflow:hidden;}
.pub-portada img{width:100%;height:100%;object-fit:cover;}
.pub-portada::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,var(--bg));}
.pub-header.con-portada{padding-top:0;margin-top:-2.6rem;position:relative;z-index:1;}

/* ===== Revisión de importación de PDF ===== */
.revision-item{display:flex;gap:1.2rem;align-items:flex-start;margin-bottom:1rem;transition:opacity .25s var(--ease);}
.revision-item-fuera{opacity:.45;}
.revision-thumb{
  width:6rem;height:6rem;border-radius:1rem;overflow:hidden;background:var(--bg-soft);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
}
.revision-thumb img{width:100%;height:100%;object-fit:cover;}
.revision-campos{flex:1;min-width:0;display:flex;flex-direction:column;gap:.7rem;}
.revision-campos .field{margin-bottom:0;}
.revision-quitar{flex-shrink:0;align-self:flex-start;margin-top:.2rem;}
@media (max-width:640px){
  .revision-item{flex-wrap:wrap;}
  .revision-thumb{width:100%;height:10rem;}
  .revision-quitar{margin-left:auto;}
}