/* WhatsApp Flows en la página de Plantillas: tarjeta «Nuevo» y demo interactiva (assets/js/flows-demo.js). */
.fl-tarjeta{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;background:linear-gradient(135deg,#2A1626 0%,#5A1449 60%,#9B1772 100%);color:#fff;border-radius:24px;padding:34px 36px;box-shadow:0 22px 50px rgba(42,22,38,.25);position:relative;overflow:hidden;}
.fl-tarjeta::after{content:'';position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(243,118,72,.45),transparent 70%);pointer-events:none;}
.fl-nuevo{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:5px 12px;border-radius:999px;}
.fl-nuevo i{width:7px;height:7px;border-radius:50%;background:#FF9BD4;box-shadow:0 0 10px #FF9BD4;}
.fl-tarjeta h2{color:#fff;margin:12px 0 8px;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.12;}
.fl-sub{font-size:1.08rem;color:#F6DDEC;margin:0 0 10px;}
.fl-desc{color:#E3CFDB;margin:0 0 20px;line-height:1.55;}
.fl-ctas{display:flex;gap:10px;flex-wrap:wrap;}
.fl-ctas .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45);}
.fl-nota{font-size:.78rem;color:#CDB6C4;margin:12px 0 0;}
.fl-trio{display:grid;gap:10px;position:relative;z-index:1;}
.fl-paso{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:14px 16px;}
.fl-paso b{display:block;font-family:var(--font-headline);font-size:1rem;}
.fl-paso span{font-size:.86rem;color:#E3CFDB;}
.fl-paso em{font-style:normal;width:38px;height:38px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;background:rgba(255,255,255,.14);}
.fl-mas{text-align:center;font-weight:700;color:#FF9BD4;font-size:.9rem;margin:-4px 0;}
@media (max-width:860px){ .fl-tarjeta{grid-template-columns:1fr;padding:26px 22px;} }

/* demo */
.fd{margin-top:34px;display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start;}
.fd[hidden]{display:none;}
.fd-chips{grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap;}
.fd-chip{font:inherit;font-size:.86rem;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:border-color .15s,color .15s,background-color .15s;}
.fd-chip:hover{border-color:var(--border-hover);color:var(--primary);}
.fd-chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff;}
.fd-info .fd-sector{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);background:var(--primary-tint);padding:4px 10px;border-radius:999px;}
.fd-info h3{margin:10px 0 6px;font-size:1.4rem;}
.fd-desc{color:var(--text-secondary);margin:0 0 18px;}
.fd-despues-t{font-weight:600;margin:0 0 8px;}
.fd-despues{margin:0;padding:0;list-style:none;counter-reset:p;display:grid;gap:8px;}
.fd-despues li{counter-increment:p;display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 12px;color:var(--text-secondary);font-size:.92rem;transition:border-color .3s,background-color .3s,color .3s;}
.fd-despues li::before{content:counter(p);flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:700;background:var(--surface-alt);color:var(--primary);}
.fd-despues.hecho li{border-color:var(--success);background:var(--success-tint);color:var(--text);}
.fd-despues.hecho li::before{content:'✓';background:var(--success);color:#fff;}
.fd-tel{position:relative;width:340px;height:620px;border-radius:38px;border:9px solid #1A161A;background:#F6EFF3;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 50px rgba(43,42,41,.2);}
.fd-cab{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#2A1626;color:#fff;}
.fd-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#C81591,#F37648);display:grid;place-items:center;font-size:.78rem;font-weight:700;}
.fd-quien b{display:block;font-size:.92rem;} .fd-quien span{font-size:.72rem;color:#E5CFDF;}
.fd-chat{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:8px;background-image:radial-gradient(rgba(200,21,145,.07) 1.2px,transparent 1.2px);background-size:22px 22px;}
.fd-b{align-self:flex-start;max-width:88%;background:#fff;border-radius:14px;border-top-left-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.08);overflow:hidden;font-size:.9rem;line-height:1.4;}
.fd-b p{margin:0;padding:9px 11px;color:#241E22;}
.fd-out{align-self:flex-end;background:#FBE6F2;border-top-left-radius:14px;border-top-right-radius:4px;}
.fd-enviado{font-weight:600;color:#AD0F7A !important;}
.fd-cta{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;border:0;border-top:1px solid #EEE3EB;background:#fff;color:#C81591;font:inherit;font-weight:600;font-size:.9rem;padding:10px;cursor:pointer;}
.fd-cta:hover:not(:disabled){background:#FEF6FA;}
.fd-cta:disabled{color:#8A8189;cursor:default;}
.fd-cta svg,.fd-ib svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* manito guía (decorativa): la punta del índice va en left/top; se repite 3 veces y se va */
.fd-mano{position:absolute;z-index:6;width:40px;margin:-2.7px 0 0 -14.5px;pointer-events:none;opacity:0;transform-origin:14.5px 2.7px;filter:drop-shadow(0 4px 6px rgba(42,22,38,.3));animation:fd-mano 1.6s ease-in-out 3;}
.fd-mano svg{display:block;width:40px;height:auto;}
.fd-mano path{fill:#fff;stroke:#2A1626;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;}
.fd-mano .fd-mano-l{fill:none;stroke-width:1.6;}
.fd-toque{position:absolute;left:14.5px;top:2.7px;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(200,21,145,.28);opacity:0;animation:fd-toque 1.6s ease-out 3;}
.fd-cta-guia{animation:fd-cta-guia 1.6s ease-in-out 3;}
.fd-mano.quieta{opacity:1;animation:none;}
.fd-mano.quieta .fd-toque{animation:none;}
@keyframes fd-mano{0%{opacity:0;transform:translate(16px,22px);}22%,40%{opacity:1;transform:translate(0,0) scale(1);}50%{transform:translate(0,2px) scale(.86);}62%{transform:translate(0,0) scale(1);}84%{opacity:1;transform:translate(0,0);}100%{opacity:0;transform:translate(6px,8px);}}
@keyframes fd-toque{0%,46%{opacity:0;transform:scale(.3);}52%{opacity:1;transform:scale(.6);}82%,100%{opacity:0;transform:scale(1.5);}}
@keyframes fd-cta-guia{0%,44%,72%,100%{background:#fff;}52%{background:#FCE7F3;}}
@media (prefers-reduced-motion:reduce){ .fd-mano{opacity:1;animation:none;} .fd-toque,.fd-cta-guia{animation:none;} }
.fd-otra{margin:0 12px 8px;font:inherit;font-size:.82rem;font-weight:600;color:var(--primary);background:#fff;border:1px solid var(--border);border-radius:999px;padding:7px;cursor:pointer;}
.fd-rotulo{margin:0;padding:7px 10px 9px;text-align:center;font-size:.7rem;color:#8A8189;background:#F6EFF3;}
.fd-hoja{position:absolute;inset:44px 0 0;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(20,10,18,.25);display:flex;flex-direction:column;animation:fd-sube .25s ease-out;}
@keyframes fd-sube{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ .fd-hoja{animation:none;} }
.fd-hoja-cab{display:flex;align-items:center;gap:6px;padding:10px 10px 8px;border-bottom:1px solid #EEE3EB;font-size:.95rem;}
.fd-ib{width:34px;height:34px;border-radius:50%;border:0;background:none;display:grid;place-items:center;cursor:pointer;color:#241E22;}
.fd-ib:hover{background:#F6EFF3;}
.fd-hoja-cuerpo{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px;font-size:.88rem;color:#241E22;}
.fd-hoja-cuerpo h4{margin:0;font-size:1.05rem;}
.fd-hoja-cuerpo p{margin:0;color:#4C4650;}
.fd-caption{font-size:.78rem;}
.fd-campo{display:flex;flex-direction:column;gap:5px;}
.fd-campo label{font-weight:600;font-size:.82rem;}
.fd-campo input:not([type=checkbox]):not([type=radio]),.fd-campo select,.fd-campo textarea{font:inherit;font-size:.9rem;padding:9px 10px;border:1px solid #DCCFD8;border-radius:10px;background:#fff;color:#241E22;width:100%;}
.fd-campo input:focus,.fd-campo select:focus,.fd-campo textarea:focus{outline:2px solid #C81591;outline-offset:0;border-color:#C81591;}
.fd-campo fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.fd-campo legend{font-weight:600;font-size:.82rem;margin-bottom:4px;}
.fd-op{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border:1px solid #EEE3EB;border-radius:10px;cursor:pointer;font-weight:400 !important;}
.fd-op input{accent-color:#C81591;margin-top:2px;}
.fd-op b{font-weight:500;} .fd-op small{display:block;color:#8A8189;font-size:.76rem;}
.fd-ayuda{color:#8A8189;font-size:.76rem;}
.fd-aviso{color:#B4231F !important;background:#FCEBEA;border-radius:10px;padding:8px 10px;font-size:.82rem;}
.fd-pie{margin:8px 14px 14px;font:inherit;font-weight:600;font-size:.95rem;color:#fff;background:#C81591;border:0;border-radius:999px;padding:12px;cursor:pointer;}
.fd-pie:hover{background:#AD0F7A;}
@media (max-width:860px){ .fd{grid-template-columns:1fr;} .fd-tel{margin:0 auto;width:min(340px,100%);} }