/* =====================================================================
   public.css · Estilos de la página que ve la gente.
   Todo se controla con variables --pg-* que setea render.js.
   Los estilos de botón cambian según [data-btn].
   ===================================================================== */

.pl-root{
  --pg-bg:#0E0F13; --pg-text:#F4F5F7; --pg-muted:#9BA0AC; --pg-accent:#7C6BF5;
  --pg-radius:16px; --pg-fdisplay:'Sora'; --pg-fbody:'Inter';
  --pg-avatar:96px; --pg-gap:13px; --pg-btnpad:15px 16px; --pg-btnfont:15.5px;
  min-height:100dvh;
}
.pl-page{
  min-height:100dvh; background:var(--pg-bg); color:var(--pg-text);
  font-family:var(--pg-fbody),sans-serif;
  display:flex; justify-content:center; position:relative;
  padding:0 22px 56px; background-attachment:fixed;
}
.pl-inner{width:100%;max-width:520px;position:relative;z-index:2;display:flex;flex-direction:column;}
.pl-fx{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%;}

/* -------- Header / perfil -------- */
.pl-head{padding:56px 0 8px;text-align:center;display:flex;flex-direction:column;align-items:center;}
.pl-avatar{width:var(--pg-avatar);height:var(--pg-avatar);overflow:hidden;flex-shrink:0;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800;
  font-family:var(--pg-fdisplay);
  background:color-mix(in srgb,var(--pg-accent) 22%, transparent);
  color:var(--pg-accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pg-accent) 20%,transparent),
             0 10px 34px color-mix(in srgb,var(--pg-accent) 22%,transparent),
             0 8px 28px rgba(0,0,0,.28);}
.pl-avatar.shape-circle{border-radius:50%;}
.pl-avatar.shape-rounded{border-radius:24px;}
.pl-avatar.shape-square{border-radius:6px;}
.pl-avatar img{width:100%;height:100%;object-fit:cover;}
.pl-name{font-family:var(--pg-fdisplay),sans-serif;font-weight:800;font-size:25px;letter-spacing:-.02em;
  line-height:1.15;display:inline-flex;align-items:center;gap:7px;justify-content:center;}
.pl-verif{width:19px;height:19px;border-radius:50%;background:var(--pg-accent);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.pl-verif svg{width:12px;height:12px;}
.pl-sub{color:var(--pg-muted);font-size:14px;line-height:1.55;margin-top:9px;max-width:90%;font-weight:500;}

/* -------- Fila de redes -------- */
.pl-socials{display:flex;gap:12px;margin-top:18px;}
.pl-soc{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--pg-text);background:color-mix(in srgb,var(--pg-text) 8%,transparent);transition:.15s;cursor:pointer;}
.pl-soc:hover{background:var(--pg-accent);color:#fff;transform:translateY(-2px);}
.pl-soc svg{width:20px;height:20px;}

/* -------- Bloques -------- */
.pl-blocks{margin-top:26px;display:flex;flex-direction:column;gap:var(--pg-gap);}

/* animaciones de entrada */
.pl-blocks > *{opacity:0;transform:translateY(16px);animation:pl-fadeUp .4s ease forwards;}
@keyframes pl-fadeUp{to{opacity:1;transform:translateY(0);}}
.pl-blocks > *:nth-child(1){animation-delay:.05s;}
.pl-blocks > *:nth-child(2){animation-delay:.1s;}
.pl-blocks > *:nth-child(3){animation-delay:.15s;}
.pl-blocks > *:nth-child(4){animation-delay:.2s;}
.pl-blocks > *:nth-child(5){animation-delay:.25s;}
.pl-blocks > *:nth-child(6){animation-delay:.3s;}
.pl-blocks > *:nth-child(7){animation-delay:.35s;}
.pl-blocks > *:nth-child(8){animation-delay:.4s;}
.pl-blocks > *:nth-child(9){animation-delay:.45s;}
.pl-blocks > *:nth-child(10){animation-delay:.5s;}
.pl-blocks > *:nth-child(n+11){animation-delay:.55s;}
.pl-head{opacity:0;animation:pl-fadeUp .5s ease .05s forwards;}

/* botón base */
.pl-btn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border-radius:var(--pg-radius);padding:var(--pg-btnpad);transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background .18s;
  font-family:var(--pg-fbody);transform-style:preserve-3d;will-change:transform;}
.pl-btn:active{transform:scale(.98);}
/* profundidad al pasar por encima (sin transform para no pelear con el tilt) */
.pl-root[data-btn="glass"] .pl-btn:hover,
.pl-root[data-btn="soft"] .pl-btn:hover,
.pl-root[data-btn="fill"] .pl-btn:hover,
.pl-root[data-btn="outline"] .pl-btn:hover{box-shadow:0 12px 32px rgba(0,0,0,.24);}
.pl-ic{width:44px;height:44px;border-radius:calc(var(--pg-radius) * .6);flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--pg-accent) 16%,transparent);color:var(--pg-accent);overflow:hidden;transition:transform .18s cubic-bezier(.2,.8,.3,1);}
.pl-btn:hover .pl-ic{transform:scale(1.08);}
.pl-ic svg{width:22px;height:22px;} .pl-ic.emoji{font-size:22px;background:color-mix(in srgb,var(--pg-text) 8%,transparent);} .pl-ic img{width:100%;height:100%;object-fit:cover;}
.pl-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.pl-tt{font-weight:600;font-size:var(--pg-btnfont,15.5px);line-height:1.2;}
.pl-ds{font-size:12.5px;color:var(--pg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pl-ch{flex-shrink:0;opacity:.4;transition:.15s;}
.pl-ch svg{width:18px;height:18px;}
.pl-btn:hover .pl-ch{opacity:.9;transform:translateX(3px);}

/* estilos de botón */
.pl-root[data-btn="glass"] .pl-btn{background:color-mix(in srgb,var(--pg-text) 6%,transparent);border:1px solid color-mix(in srgb,var(--pg-text) 12%,transparent);backdrop-filter:blur(10px);}
.pl-root[data-btn="glass"] .pl-btn:hover{background:color-mix(in srgb,var(--pg-text) 10%,transparent);}
.pl-root[data-btn="fill"] .pl-btn{background:var(--pg-accent);color:#fff;}
.pl-root[data-btn="fill"] .pl-ic{background:rgba(255,255,255,.18);color:#fff;} .pl-root[data-btn="fill"] .pl-ds{color:rgba(255,255,255,.8);}
.pl-root[data-btn="soft"] .pl-btn{background:color-mix(in srgb,var(--pg-accent) 14%,transparent);}
.pl-root[data-btn="outline"] .pl-btn{background:transparent;border:1.5px solid color-mix(in srgb,var(--pg-text) 22%,transparent);}
.pl-root[data-btn="outline"] .pl-btn:hover{border-color:var(--pg-accent);}
.pl-root[data-btn="shadow"] .pl-btn{background:color-mix(in srgb,var(--pg-text) 4%,transparent);border:1px solid color-mix(in srgb,var(--pg-text) 10%,transparent);box-shadow:4px 4px 0 color-mix(in srgb,var(--pg-text) 22%,transparent);}
.pl-root[data-btn="shadow"] .pl-btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 color-mix(in srgb,var(--pg-text) 26%,transparent);}
.pl-root[data-btn="shadow"] .pl-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 color-mix(in srgb,var(--pg-text) 22%,transparent);}

/* destacado con glow + pulso + brillo que barre */
.pl-btn.hot{outline:2px solid var(--pg-accent);outline-offset:2px;position:relative;overflow:hidden;
  box-shadow:0 0 16px color-mix(in srgb,var(--pg-accent) 35%,transparent),
             0 0 40px color-mix(in srgb,var(--pg-accent) 15%,transparent);
  animation:pl-glow 2.5s ease-in-out infinite;}
.pl-btn.hot::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,#fff 28%,transparent),transparent);
  transform:skewX(-18deg);animation:pl-sheen 3.4s ease-in-out infinite;}
@keyframes pl-glow{
  0%,100%{box-shadow:0 0 16px color-mix(in srgb,var(--pg-accent) 35%,transparent),0 0 40px color-mix(in srgb,var(--pg-accent) 15%,transparent);}
  50%{box-shadow:0 0 24px color-mix(in srgb,var(--pg-accent) 50%,transparent),0 0 60px color-mix(in srgb,var(--pg-accent) 25%,transparent);}
}
@keyframes pl-sheen{0%{left:-70%;}55%{left:140%;}100%{left:140%;}}

/* bloques especiales */
.pl-header{font-family:var(--pg-fdisplay);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pg-muted);margin:14px 0 2px;padding-left:4px;}
.pl-text{color:var(--pg-muted);font-size:14px;line-height:1.6;padding:2px 4px;}
.pl-imgwrap{display:block;border-radius:var(--pg-radius);overflow:hidden;}
.pl-img{width:100%;display:block;}
.pl-video{border-radius:var(--pg-radius);overflow:hidden;aspect-ratio:16/9;}
.pl-video iframe{width:100%;height:100%;border:0;display:block;}

/* separador */
.pl-divider{height:1px;background:color-mix(in srgb,var(--pg-text) 12%,transparent);margin:10px 0;}

/* banner / aviso */
.pl-banner{border-radius:var(--pg-radius);padding:14px 18px;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.45;}
.pl-banner strong{font-weight:700;}
.pl-banner span{opacity:.85;font-size:13px;}
.pl-banner--warning{background:rgba(232,184,75,.15);border:1px solid rgba(232,184,75,.35);color:#E8B84B;}
.pl-banner--danger{background:rgba(240,103,75,.15);border:1px solid rgba(240,103,75,.35);color:#F0674B;}
.pl-banner--info{background:rgba(59,91,219,.15);border:1px solid rgba(59,91,219,.35);color:#6B8AF5;}
.pl-banner--success{background:rgba(90,224,160,.15);border:1px solid rgba(90,224,160,.35);color:#5AE0A0;}

/* estado (abierto/cerrado) */
.pl-status{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--pg-radius);
  background:color-mix(in srgb,var(--pg-text) 5%,transparent);font-size:14px;font-weight:600;}
.pl-status-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;animation:pulse-dot 2s ease infinite;}
.pl-status--open .pl-status-dot{background:#5AE0A0;box-shadow:0 0 8px rgba(90,224,160,.5);}
.pl-status--closed .pl-status-dot{background:#F0674B;box-shadow:0 0 8px rgba(240,103,75,.5);}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.5;}}

/* FAQ acordeón */
.pl-faq{border-radius:var(--pg-radius);background:color-mix(in srgb,var(--pg-text) 6%,transparent);overflow:hidden;}
.pl-faq summary{padding:14px 18px;font-weight:600;font-size:15px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.pl-faq summary::-webkit-details-marker{display:none;}
.pl-faq summary::after{content:"＋";font-size:16px;color:var(--pg-muted);transition:transform .2s;}
.pl-faq[open] summary::after{content:"－";}
.pl-faq-body{padding:0 18px 16px;font-size:14px;line-height:1.6;color:var(--pg-muted);}

/* horarios */
.pl-hours{border-radius:var(--pg-radius);background:color-mix(in srgb,var(--pg-text) 6%,transparent);padding:16px 18px;}
.pl-hours-title{font-weight:700;font-size:14px;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.pl-hours-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13.5px;
  border-bottom:1px solid color-mix(in srgb,var(--pg-text) 8%,transparent);}
.pl-hours-row:last-child{border-bottom:none;}
.pl-hours-day{font-weight:600;}
.pl-hours-time{color:var(--pg-muted);}

/* countdown */
.pl-countdown{border-radius:var(--pg-radius);background:color-mix(in srgb,var(--pg-accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--pg-accent) 25%,transparent);padding:18px;text-align:center;}
.pl-countdown-label{font-weight:700;font-size:14px;margin-bottom:12px;}
.pl-countdown-timer{display:flex;justify-content:center;gap:12px;}
.pl-cd-unit{display:flex;flex-direction:column;align-items:center;min-width:52px;}
.pl-cd-n{font-family:var(--pg-fdisplay);font-weight:800;font-size:28px;line-height:1;color:var(--pg-accent);}
.pl-cd-l{font-size:11px;color:var(--pg-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em;}

/* galería */
.pl-gal-title{font-weight:700;font-size:14px;margin-bottom:10px;}
.pl-gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.pl-gal-item{border-radius:calc(var(--pg-radius) * .7);overflow:hidden;aspect-ratio:1;}
.pl-gal-item img{width:100%;height:100%;object-fit:cover;display:block;}
.pl-gal-grid .pl-gal-item:first-child:nth-last-child(1){grid-column:1/-1;aspect-ratio:16/9;}
.pl-gal-grid .pl-gal-item:first-child:nth-last-child(3){grid-column:1/-1;aspect-ratio:16/9;}

/* grupo de botones */
.pl-btngroup-title{font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--pg-muted);margin-bottom:8px;padding-left:4px;}
.pl-btngroup-row{display:flex;gap:8px;flex-wrap:wrap;}
.pl-btn--mini{flex:1;min-width:0;justify-content:center;padding:12px 14px;}
.pl-btn--mini .pl-tt{font-size:13.5px;text-align:center;}

/* WA multi-línea */
.pl-wamulti-list{display:flex;flex-direction:column;gap:10px;}

/* formulario simple */
.pl-form{border-radius:var(--pg-radius);background:color-mix(in srgb,var(--pg-text) 6%,transparent);padding:18px;display:flex;flex-direction:column;gap:10px;}
.pl-form-title{font-weight:700;font-size:15px;}
.pl-form-input{width:100%;background:color-mix(in srgb,var(--pg-text) 8%,transparent);border:1px solid color-mix(in srgb,var(--pg-text) 14%,transparent);
  border-radius:calc(var(--pg-radius) * .6);padding:12px 14px;color:var(--pg-text);font-size:14px;font-family:var(--pg-fbody);resize:vertical;}
.pl-form-input:focus{outline:none;border-color:var(--pg-accent);}
.pl-form-input::placeholder{color:var(--pg-muted);}
.pl-form-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:var(--pg-radius);
  background:var(--pg-accent);color:#fff;font-weight:700;font-size:14px;border:none;cursor:pointer;transition:.14s;}
.pl-form-btn:hover{filter:brightness(1.1);}
.pl-form-btn:active{transform:scale(.98);}
.pl-form-btn svg{width:20px;height:20px;}

/* spotify embed */
.pl-spotify{border-radius:var(--pg-radius);overflow:hidden;}
.pl-spotify iframe{display:block;border-radius:12px;}

/* mapa embebido */
.pl-mapembed-title{font-weight:700;font-size:14px;margin-bottom:8px;}
.pl-mapembed-frame{border-radius:var(--pg-radius);overflow:hidden;}
.pl-mapembed-frame iframe{display:block;}

.pl-foot{margin-top:36px;text-align:center;font-size:11px;color:var(--pg-muted);opacity:.55;letter-spacing:.03em;font-family:var(--pg-fdisplay);}

.pl-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(16px);background:var(--pg-accent);color:#fff;
  font-weight:700;font-size:13px;padding:11px 20px;border-radius:30px;opacity:0;pointer-events:none;transition:.24s;z-index:99;box-shadow:0 12px 30px rgba(0,0,0,.3);}
.pl-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* fondo animado (gradiente que se mueve) */
.pl-bg-anim .pl-page{background-size:200% 200%;animation:pl-bgMove 12s ease infinite;}
@keyframes pl-bgMove{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* preview del admin: sin animación de entrada (evita parpadeo al editar) */
.pl-no-anim .pl-blocks > *{opacity:1!important;transform:none!important;animation:none!important;}
.pl-no-anim .pl-head{opacity:1!important;animation:none!important;}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* ===== facades (carga liviana: el player entra al tocar) ===== */
.pl-facade{position:relative;cursor:pointer;border:none;}
.pl-video.pl-facade{width:100%;aspect-ratio:16/9;border-radius:var(--pg-radius);overflow:hidden;
  background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;}
.pl-video.pl-facade::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25);transition:.2s;}
.pl-video.pl-facade:hover::before{background:rgba(0,0,0,.12);}
.pl-play{position:relative;width:58px;height:58px;border-radius:50%;background:var(--pg-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .18s cubic-bezier(.2,.8,.3,1);}
.pl-play svg{width:26px;height:26px;margin-left:3px;}
.pl-facade:hover .pl-play{transform:scale(1.1);}
.pl-play.sm{width:42px;height:42px;flex-shrink:0;}
.pl-play.sm svg{width:20px;height:20px;}
.pl-spotify-facade{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;
  border-radius:var(--pg-radius);background:linear-gradient(120deg,#0f3d24,#123018);border:1px solid rgba(30,215,96,.35);color:#fff;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s;}
.pl-spotify-facade:hover{box-shadow:0 12px 30px rgba(0,0,0,.3);}
.pl-sp-ic{width:44px;height:44px;border-radius:12px;background:#1ED760;color:#0A0A0A;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pl-sp-ic svg{width:24px;height:24px;}
.pl-sp-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.pl-sp-tx b{font-size:15px;} .pl-sp-tx small{font-size:12px;opacity:.75;}

/* avatar con pop de entrada */
.pl-avatar{animation:pl-avatarPop .55s cubic-bezier(.2,.9,.3,1.2) .05s backwards;}
@keyframes pl-avatarPop{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:scale(1);}}
.pl-no-anim .pl-avatar{animation:none!important;}

/* botón compartir de la página pública */
.pl-share{position:absolute;top:16px;right:0;width:38px;height:38px;border-radius:50%;
  background:color-mix(in srgb,var(--pg-text) 8%,transparent);color:var(--pg-text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;z-index:5;}
.pl-share:hover{background:var(--pg-accent);color:#fff;transform:translateY(-2px);}
.pl-share svg{width:18px;height:18px;}

/* fix: el share vive DENTRO de la tarjeta, y no aparece en la preview del admin */
.pl-inner{position:relative;}
.pl-no-anim .pl-share{display:none;}

/* ===== LAYOUTS DE BOTÓN ===== */
/* Píldoras: redondo total, texto centrado */
.pl-root[data-layout="pills"] .pl-btn:not(.pl-btn--hero){border-radius:999px!important;justify-content:center;text-align:center;}
.pl-root[data-layout="pills"] .pl-btn:not(.pl-btn--hero) .pl-tx{flex:0 1 auto;}
.pl-root[data-layout="pills"] .pl-btn:not(.pl-btn--hero) .pl-ch{display:none;}
.pl-root[data-layout="pills"] .pl-btn:not(.pl-btn--hero) .pl-ic{width:34px;height:34px;border-radius:50%;}

/* --- Grilla compartida: grid/stars (3 cols), cards (2 cols) ---
   La grilla va en .pl-blocks; los wrappers [data-block-id] que NO contienen
   un .pl-btn (o contienen un hero) se estiran a ancho completo con :has(). */
.pl-root[data-layout="grid"] .pl-blocks,
.pl-root[data-layout="stars"] .pl-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;justify-items:center;}
.pl-root[data-layout="cards"] .pl-blocks{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--pg-gap);}
/* wrappers sin botón → ancho completo */
.pl-root[data-layout="grid"] .pl-blocks > *:not(:has(> .pl-btn:not(.pl-btn--hero))),
.pl-root[data-layout="stars"] .pl-blocks > *:not(:has(> .pl-btn:not(.pl-btn--hero))),
.pl-root[data-layout="cards"] .pl-blocks > *:not(:has(> .pl-btn:not(.pl-btn--hero))){grid-column:1/-1;}
/* hero → ancho completo */
.pl-root[data-layout="grid"] .pl-blocks > *:has(> .pl-btn--hero),
.pl-root[data-layout="stars"] .pl-blocks > *:has(> .pl-btn--hero),
.pl-root[data-layout="cards"] .pl-blocks > *:has(> .pl-btn--hero){grid-column:1/-1;}

/* Pelotas (grid) y Estrellas (stars): ícono grande + nombre abajo */
.pl-root[data-layout="grid"] .pl-btn:not(.pl-btn--hero),
.pl-root[data-layout="stars"] .pl-btn:not(.pl-btn--hero){
  flex-direction:column;gap:9px;background:transparent!important;border:none!important;box-shadow:none!important;padding:6px 2px;width:100%;}
.pl-root[data-layout="grid"] .pl-btn:not(.pl-btn--hero) .pl-ic,
.pl-root[data-layout="stars"] .pl-btn:not(.pl-btn--hero) .pl-ic{
  width:64px;height:64px;border-radius:50%;
  background:color-mix(in srgb,var(--pg-accent) 20%,transparent);
  border:1.5px solid color-mix(in srgb,var(--pg-accent) 45%,transparent);
  box-shadow:0 8px 22px rgba(0,0,0,.28);transition:transform .18s cubic-bezier(.2,.8,.3,1);}
.pl-root[data-layout="grid"] .pl-btn:not(.pl-btn--hero) .pl-ic svg,
.pl-root[data-layout="stars"] .pl-btn:not(.pl-btn--hero) .pl-ic svg{width:26px;height:26px;}
.pl-root[data-layout="grid"] .pl-btn:not(.pl-btn--hero):hover .pl-ic,
.pl-root[data-layout="stars"] .pl-btn:not(.pl-btn--hero):hover .pl-ic{transform:scale(1.12) translateY(-2px);}
.pl-root[data-layout="grid"] .pl-btn:not(.pl-btn--hero) .pl-tx,
.pl-root[data-layout="stars"] .pl-btn:not(.pl-btn--hero) .pl-tx{align-items:center;text-align:center;}
.pl-root[data-layout="grid"] .pl-btn:not(.pl-btn--hero) .pl-tt,
.pl-root[data-layout="stars"] .pl-btn:not(.pl-btn--hero) .pl-tt{font-size:12.5px;line-height:1.25;}
.pl-root[data-layout="grid"] .pl-btn:not(.pl-btn--hero) .pl-ds,
.pl-root[data-layout="stars"] .pl-btn:not(.pl-btn--hero) .pl-ds{display:none;}
.pl-root[data-layout="grid"] .pl-btn:not(.pl-btn--hero) .pl-ch,
.pl-root[data-layout="stars"] .pl-btn:not(.pl-btn--hero) .pl-ch{display:none;}
.pl-root[data-layout="grid"] .pl-btn.hot:not(.pl-btn--hero),
.pl-root[data-layout="stars"] .pl-btn.hot:not(.pl-btn--hero){outline:none;animation:none;}
.pl-root[data-layout="grid"] .pl-btn.hot:not(.pl-btn--hero) .pl-ic,
.pl-root[data-layout="stars"] .pl-btn.hot:not(.pl-btn--hero) .pl-ic{outline:2px solid var(--pg-accent);outline-offset:3px;animation:pl-glow 2.5s ease-in-out infinite;}

/* Estrellas: clip-path de estrella de 5 puntas en el ícono */
.pl-root[data-layout="stars"] .pl-btn:not(.pl-btn--hero) .pl-ic{
  border-radius:0;border:none;width:68px;height:68px;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}

/* Cuadrados (cards): tarjetas cuadradas en grilla de 2 */
.pl-root[data-layout="cards"] .pl-btn:not(.pl-btn--hero){
  flex-direction:column;align-items:center;text-align:center;justify-content:center;
  aspect-ratio:1;gap:12px;padding:16px 10px;width:100%;}
.pl-root[data-layout="cards"] .pl-btn:not(.pl-btn--hero) .pl-ic{width:52px;height:52px;}
.pl-root[data-layout="cards"] .pl-btn:not(.pl-btn--hero) .pl-ic svg{width:26px;height:26px;}
.pl-root[data-layout="cards"] .pl-btn:not(.pl-btn--hero) .pl-tx{align-items:center;text-align:center;}
.pl-root[data-layout="cards"] .pl-btn:not(.pl-btn--hero) .pl-tt{font-size:13.5px;}
.pl-root[data-layout="cards"] .pl-btn:not(.pl-btn--hero) .pl-ds{display:none;}
.pl-root[data-layout="cards"] .pl-btn:not(.pl-btn--hero) .pl-ch{display:none;}
.pl-root[data-layout="cards"] .pl-btn.hot:not(.pl-btn--hero){outline-offset:2px;}

/* Tarjeta HERO: bloque grande con imagen de fondo (siempre ancho completo) */
.pl-btn--hero{position:relative;min-height:150px;align-items:flex-end;background-size:cover;background-position:center;overflow:hidden;border:none!important;}
.pl-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.72));pointer-events:none;}
.pl-hero-tx{position:relative;display:flex;flex-direction:column;gap:3px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5);}
.pl-btn--hero .pl-tt{font-size:19px;font-family:var(--pg-fdisplay);}
.pl-btn--hero .pl-ds{font-size:13px;opacity:.9;}
.pl-btn--hero:hover{transform:scale(1.015);}

/* Colores de botón personalizados */
.pl-root[data-custombtn="1"] .pl-btn:not(.pl-btn--hero){background:var(--pg-btnbg)!important;color:var(--pg-btntx)!important;border-color:color-mix(in srgb,var(--pg-btntx) 18%,transparent)!important;}
.pl-root[data-custombtn="1"] .pl-btn:not(.pl-btn--hero) .pl-tt,
.pl-root[data-custombtn="1"] .pl-btn:not(.pl-btn--hero) .pl-ds{color:var(--pg-btntx);}
/* grid y stars: botón transparente, color al ícono */
.pl-root[data-custombtn="1"][data-layout="grid"] .pl-btn:not(.pl-btn--hero),
.pl-root[data-custombtn="1"][data-layout="stars"] .pl-btn:not(.pl-btn--hero){background:transparent!important;}
.pl-root[data-custombtn="1"][data-layout="grid"] .pl-btn:not(.pl-btn--hero) .pl-ic,
.pl-root[data-custombtn="1"][data-layout="stars"] .pl-btn:not(.pl-btn--hero) .pl-ic{background:var(--pg-btnbg);color:var(--pg-btntx);}

/* =====================================================================
   Skeleton de carga · SOLO página pública (index.html).
   El markup vive estático dentro de #root y lo pisa Render.render().
   Los colores salen de --pl-boot-* (cache del último tema visto) y caen
   al default oscuro si es la primera visita. Clases inertes en el admin.
   ===================================================================== */
.pl-skel{min-height:100dvh;display:flex;justify-content:center;padding:0 22px 56px;}
.pl-skel-inner{width:100%;max-width:520px;display:flex;flex-direction:column;}
.pl-skel-head{padding:56px 0 8px;display:flex;flex-direction:column;align-items:center;}
.pl-skel-avatar{width:96px;height:96px;border-radius:50%;margin-bottom:16px;}
.pl-skel-name{width:170px;height:25px;border-radius:8px;}
.pl-skel-sub{width:230px;height:13px;border-radius:7px;margin-top:15px;}
.pl-skel-blocks{margin-top:26px;display:flex;flex-direction:column;gap:13px;}
.pl-skel-btn{height:54px;border-radius:16px;}
.pl-skel-avatar,.pl-skel-line,.pl-skel-btn{
  position:relative;overflow:hidden;
  background:color-mix(in srgb,var(--pl-boot-text,#F4F5F7) 8%,transparent);
}
/* brillo: overlay con transform (compuesto en GPU, no repinta el layout) */
.pl-skel-avatar::after,.pl-skel-line::after,.pl-skel-btn::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--pl-boot-text,#F4F5F7) 11%,transparent),transparent);
  animation:pl-shimmer 1.6s ease-in-out infinite;
}
@keyframes pl-shimmer{to{transform:translateX(100%);}}
@media (prefers-reduced-motion:reduce){
  .pl-skel-avatar::after,.pl-skel-line::after,.pl-skel-btn::after{animation:none;display:none;}
  .pl-skel-avatar,.pl-skel-line,.pl-skel-btn{
    background:color-mix(in srgb,var(--pl-boot-text,#F4F5F7) 11%,transparent);}
}

/* -------- Estado "no se encontró la página" -------- */
.pl-empty{min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:40px 26px;gap:6px;
  font-family:'Inter',system-ui,sans-serif;color:#F4F5F7;}
.pl-empty-ic{width:66px;height:66px;border-radius:20px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#8B7BFF,#5B4BD6);
  box-shadow:0 14px 34px rgba(124,107,245,.32);}
.pl-empty-ic svg{width:32px;height:32px;color:#fff;}
.pl-empty h1{font-size:20px;font-weight:700;letter-spacing:-.02em;}
.pl-empty p{font-size:14.5px;line-height:1.55;color:#9BA0AC;max-width:330px;}