/* =====================================================================
   v21 · Planes compactos, ejemplos ilustrativos y planes mensuales
   ===================================================================== */
.plan12 .plan-for{min-height:0;margin-top:2px}
.plan12 .plan-badge{margin-bottom:10px}
.plan-price{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:10px;margin:14px 0 12px;padding:12px 0;border-block:1px solid #e9e1f6}
.plan12.fav .plan-price{border-color:#ffffff30}
.plan-price .plan-launch{grid-column:1/-1;margin:0 0 6px}
.plan-price .price{margin:0!important;padding:0!important;border:0!important}
.plan-price .price b{font-size:clamp(34px,3vw,44px)!important}
.plan-price .plan-once{grid-column:1;margin:2px 0 0}
.plan-price .plan-eta{grid-column:2;grid-row:2/4;align-self:end;margin:0;white-space:nowrap}
.plan12 ul.plan-short{margin:0 0 6px!important;padding:0;border:0!important;gap:4px!important}
.plan12 ul.plan-short li{font-size:14.5px;line-height:1.35;padding-block:3px!important}
.plan-more{margin:0 0 14px}
.plan-more summary{cursor:pointer;list-style:none;font:600 13px Outfit,sans-serif;color:#6c2bff;padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.plan-more summary::-webkit-details-marker{display:none}
.plan-more summary:after{content:' ▾'}
.plan-more[open] summary:after{content:' ▴'}
.plan12.fav .plan-more summary{color:var(--lime)}
.plan-more ul{margin:6px 0 0!important;border:0!important}
.plan-more li{font-size:13px!important;line-height:1.45!important;opacity:.9}
/* Miniatura del ejemplo */
.plan-demo{position:relative;display:block;width:100%;margin:0 0 14px;padding:0;border:0;border-radius:14px;background:none;cursor:zoom-in;-webkit-tap-highlight-color:transparent;text-align:left}
.plan-demo:focus-visible{outline:3px solid #6c2bff;outline-offset:3px}
.pd-site{display:flex;flex-direction:column;gap:4cqw;container-type:inline-size;aspect-ratio:16/8.6;padding:4cqw;border-radius:14px;border:1px solid #e5d9f2;background:#fff;overflow:hidden;box-shadow:0 8px 20px #4a17c914;transition:transform .3s ease,box-shadow .3s ease}
.plan12.fav .pd-site{border-color:#ffffff40}
@media(hover:hover){.plan-demo:hover .pd-site{transform:translateY(-3px);box-shadow:0 14px 28px #4a17c926}}
.pd-tag{position:absolute;right:8px;bottom:8px;padding:4px 8px;border-radius:8px;background:#12101fd9;color:#fff;font:600 10.5px var(--mono)}
.pd-site i,.pd-site em,.pd-site b,.pd-site small,.pd-site span{display:block;font-style:normal}
.pd-nav{display:flex!important;align-items:center;gap:2.4cqw}
.pd-nav b{font:800 4.6cqw Outfit,sans-serif;color:#12101f;margin-right:auto}
.pd-nav i{width:7cqw;height:1.4cqw;border-radius:9px;background:#d9d2e4}
.pd-nav em{padding:1.2cqw 3cqw;border-radius:99px;font:700 3.2cqw Outfit,sans-serif;color:#fff;background:#6c2bff}
.pd-hero{border-radius:2.6cqw;padding:4cqw;display:grid!important;gap:1.4cqw;justify-items:start}
.pd-hero small{font:700 2.6cqw var(--mono);letter-spacing:.08em;opacity:.8}
.pd-hero b{font:800 5.6cqw/1.05 Outfit,sans-serif;max-width:80%}
.pd-hero em{padding:1.2cqw 3cqw;border-radius:99px;font:700 3cqw Outfit,sans-serif}
.pd-dark{background:linear-gradient(120deg,#1e2126,#383d47);color:#fff}.pd-dark em{background:#25d366;color:#fff}
.pd-green{background:linear-gradient(120deg,#0f9d76,#58c9a4);color:#fff}.pd-green em{background:#fff;color:#0f6b52}
.pd-row3{display:grid!important;grid-template-columns:repeat(3,1fr);gap:2cqw}
.pd-row3 i{height:7cqw;border-radius:1.6cqw;background:#f1ecfa}
.pd-svc i{background:#e3f4ec}
.pd-gal{display:grid!important;grid-template-columns:repeat(4,1fr);gap:1.6cqw}
.pd-gal i{aspect-ratio:1;border-radius:1.6cqw;background:linear-gradient(135deg,#ffb26b,#ff7a1a)}
.pd-gal i:nth-child(2){background:linear-gradient(135deg,#8ecbff,#3b82f6)}.pd-gal i:nth-child(3){background:linear-gradient(135deg,#fde68a,#f59e0b)}.pd-gal i:nth-child(4){background:linear-gradient(135deg,#c4b5fd,#7c3aed)}
.pd-contact{display:flex!important;gap:2cqw}.pd-contact i{flex:1;height:5cqw;border-radius:99px;background:#efe9f8}.pd-contact i.wa{background:#25d366;flex:1.4}
.pd-faq{display:grid!important;gap:1.4cqw}.pd-faq i{height:4.4cqw;border-radius:1.4cqw;border:1px solid #e3d8f6}
.pd-map{position:relative;height:12cqw;border-radius:2cqw;background:repeating-linear-gradient(35deg,#e8eee4 0 6cqw,#dfe7da 6cqw 12cqw)}
.pd-map .pin{position:absolute;left:46%;top:18%;width:4cqw;height:4cqw;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#ea4335}
.pd-full{background:#fbefe6}
.pd-full .pd-nav b{color:#5a3a2a}.pd-full .pd-nav em{background:#c9765a}
.pd-filters{display:flex!important;gap:1.6cqw}
.pd-filters i{padding:1cqw 2.6cqw;border-radius:99px;background:#fff;font:600 2.8cqw Outfit,sans-serif;color:#5a3a2a;border:1px solid #f0d6c4}
.pd-filters i.on{background:#5a3a2a;color:#fff}
.pd-shop{display:grid!important;grid-template-columns:repeat(4,1fr);gap:2cqw;flex:1}
.pd-shop>span{display:grid!important;grid-template-rows:1fr auto auto;gap:1cqw;padding:1.6cqw;border-radius:2cqw;background:#fff}
.pd-shop>span>i{border-radius:1.4cqw;background:linear-gradient(135deg,#f3c6a5,#c9765a);min-height:8cqw}
.pd-shop>span:nth-child(2)>i{background:linear-gradient(135deg,#f9d9a5,#d99a4e)}.pd-shop>span:nth-child(3)>i{background:linear-gradient(135deg,#e7c3c3,#b86a6a)}.pd-shop>span:nth-child(4)>i{background:linear-gradient(135deg,#ead7b8,#a37a4c)}
.pd-shop b{font:700 2.8cqw var(--mono);color:#5a3a2a}
.pd-shop em{padding:.8cqw 0;border-radius:99px;background:#25d366;color:#fff;font:700 2.6cqw Outfit,sans-serif;text-align:center}
.pd-pdf{position:absolute;right:5cqw;top:22cqw;padding:1.4cqw 2.4cqw;border-radius:1.6cqw;background:#e2483d;color:#fff;font:800 3cqw var(--mono);transform:rotate(6deg);box-shadow:0 2cqw 4cqw #0003}
.pd-site.pd-full{position:relative}
/* Ventana del ejemplo */
.pd-dlg{max-width:640px}
.pd-dlg h2{margin:6px 0 2px}
.pd-biz{color:var(--muted);margin:0 0 16px}
.pd-big .pd-site{aspect-ratio:16/9;border-radius:18px;box-shadow:0 14px 34px #4a17c926}
.pd-k{margin:18px 0 8px;font:700 12px var(--mono);letter-spacing:.08em;color:#6c2bff}
.pd-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pd-list li{display:flex;gap:10px;align-items:baseline;font-size:15px}
.pd-list li b{display:grid;place-items:center;flex:0 0 22px;height:22px;border-radius:50%;background:var(--lime);color:var(--ink);font:700 12px var(--mono)}
.pd-foot{margin:16px 0 14px;font-size:13px;color:var(--muted)}
.pd-go{width:100%}
/* Planes mensuales */
.monthly21{max-width:1080px;margin:28px auto 0;padding:24px;border-radius:24px;background:linear-gradient(135deg,#f6f1ff,#eefcd9);border:1px solid #e4d8f6}
.m21-head h3{font-size:clamp(20px,2vw,26px);margin:6px 0 6px}
.m21-head p:not(.addons20-k){margin:0;color:var(--muted);font-size:15px;max-width:70ch}
.m21-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.m21{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:18px;background:#fff;border:1px solid #e4d8f6;box-shadow:var(--e1)}
.m21-hi{border:2px solid var(--lime)}
.m21-for{font:600 11.5px var(--mono);color:#6c2bff;letter-spacing:.04em}
.m21-name{font:700 20px Outfit,sans-serif}
.m21-price{display:flex;align-items:baseline;gap:4px}
.m21-price b{font:700 32px var(--mono);letter-spacing:-.03em}
.m21-price span{font:500 14px var(--mono);color:var(--muted)}
.m21 ul{list-style:none;margin:4px 0 10px;padding:0;display:grid;gap:4px}
.m21 li{font-size:14px;padding-left:20px;position:relative}
.m21 li:before{content:'✓';position:absolute;left:0;color:#6c2bff;font-weight:700}
.m21 .button{margin-top:auto;min-height:42px}
.m21-note{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
@media(max-width:760px){
 .plan-demo{margin-bottom:10px}
 .pd-tag{font-size:9.5px;right:6px;bottom:6px}
 .plan-price{margin:10px 0 8px;padding:8px 0}
 .plan-price .price b{font-size:30px!important}
 .plan-price .plan-eta{font-size:12px;padding:4px 8px}
 .plan12 ul.plan-short li{font-size:13.5px;padding-block:1px!important}
 .plan-more{margin-bottom:10px}
 .plan12 .plan-badge{margin-bottom:6px}
 .plan12.fav .plan-ya{top:auto!important;bottom:auto;right:6px;width:54px;transform:translateY(-62%)}
 .monthly21{margin:18px 0 0;padding:16px}
 .m21-cards{grid-template-columns:1fr}
 .m21-head h3{font-size:19px}.m21-head p:not(.addons20-k){font-size:13.5px}
 .m21{padding:14px}.m21-price b{font-size:26px}
 .pd-dlg{padding:20px 16px}
}
/* correcciones */
.plan-demo,.pd-big{container-type:inline-size}
.pd-site{container-type:normal}
.plan-price .plan-launch{justify-self:start}
.plan-price .price{grid-column:1/-1}
.plan-price .price b{white-space:nowrap}
.plan-price .plan-once{grid-column:1;grid-row:3;align-self:center}
.plan-price .plan-eta{grid-column:2;grid-row:3;align-self:center}