/* 4. Venta. Idea de diseño: la venta es un recorrido. Cada pantalla abre con una pieza de flujo
   (chevrones, embudo en peldaños, tablero, línea de tiempo) que se lee en 3 segundos, con el estado
   en palabra y forma además de color. Todas las clases llevan el prefijo p4-. */

/* ---------- base de las piezas ---------- */
.p4-hero{display:flex;flex-direction:column;gap:22px;margin:-20px;padding:28px;border-radius:18px;background:linear-gradient(180deg,#F9F4F6 0,#fff 170px);color:#1D1D1F}
.p4-hero p{margin:0}
.p4-cab{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 24px}
.p4-ey{font-size:13px;line-height:18px;font-weight:600;color:#7A1230;margin-bottom:6px}
.p4-h{margin:0;font-size:32px;line-height:38px;font-weight:700;letter-spacing:-.03em}
.p4-h2{font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.02em}
.p4-acc{color:#7A1230}
.p4-sub{font-size:15px;line-height:22px;color:#6E6E73;margin-top:6px}
.p4-lb{font-size:12px;line-height:16px;font-weight:600;color:#6E6E73;margin-bottom:8px}
.p4-big{font-size:60px;line-height:64px;font-weight:700;letter-spacing:-.04em;color:#7A1230}
.p4-cifra-f{display:flex;align-items:center;gap:16px}
.p4-cifra-t b{display:block;font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.02em}
.p4-cifra-t small{display:block;font-size:13px;line-height:18px;color:#6E6E73}
.p4-acc-b{display:flex;flex-wrap:wrap;gap:8px}
.p4-i{display:inline-block;vertical-align:-3px;flex:none}
.p4-sd{font-size:12px;line-height:16px;color:#6E6E73}
.p4-vacio{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px 0}
.p4-vacio-b{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.p4-hechos{display:flex;flex-wrap:wrap;gap:10px 32px;margin:0}
.p4-hechos div{min-width:0}
.p4-hechos dt{font-size:12px;line-height:16px;font-weight:600;color:#6E6E73}
.p4-hechos dd{margin:2px 0 0;font-size:17px;line-height:22px;font-weight:600}
.p4-hechos-v{gap:12px 28px;padding-top:6px}
.p4-hechos-v dd{font-size:22px;line-height:28px;letter-spacing:-.02em}
.p4-peso-b{display:flex;gap:2px;height:16px}
.p4-peso-b i{display:block;height:100%;border-radius:4px}
.p4-ley{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;line-height:16px;color:#424245}
.p4-ley span{display:inline-flex;align-items:center;gap:6px}
.p4-peso-b+.p4-ley{margin-top:8px}
.p4-sw{display:inline-block;width:10px;height:10px;border-radius:3px}

/* marcas de estado: forma distinta para cada estado */
.p4-m{display:inline-block;width:10px;height:10px;flex:none;background:currentColor;border-radius:50%}
.p4-m-ok{color:#1B7A33}
.p4-m-warn{color:#9A4F00;border-radius:2px;transform:rotate(45deg)}
.p4-m-bad{color:#C4001A;border-radius:0;clip-path:polygon(0 0,100% 0,50% 100%)}
.p4-m-none{color:#6E6E73;background:none;box-shadow:inset 0 0 0 1.5px currentColor}
.p4-fg{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:16px;font-weight:600;color:#424245}
.p4-fg-w{color:#9A4F00}
.p4-fg-ok{color:#1B7A33}
.p4-flag{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:16px;font-weight:600;color:#C4001A}
.p4-est{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:16px;font-weight:600;color:#6E6E73}
.p4-hecho .p4-est{color:#1B7A33}

/* ---------- ayuda para rellenar ---------- */
.p4-ayuda{margin:-20px;padding:18px 24px;border-radius:18px;background:#F9F4F6}
.p4-ay-t{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:15px;line-height:20px;font-weight:600;color:#7A1230}
.p4-ay-l{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:21px;color:#1D1D1F}
.p4-ej{display:block;color:#6E6E73}

/* ---------- Acción Funnel: chevrones ---------- */
.p4-flujo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.p4-et{min-width:0;border-radius:14px}
.p4-et.p4-hot{background:rgba(196,0,26,.05)}
.p4-et-b{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;height:100%;padding:0 0 12px;border:0;border-radius:14px;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background .15s ease-out}
.p4-et-b:hover{background:rgba(122,18,48,.05)}
.p4-chev{display:flex;align-items:center;gap:10px;width:calc(100% + 15px);min-height:84px;padding:10px 22px 10px 30px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%,18px 50%)}
.p4-et:first-child .p4-chev{padding-left:16px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%)}
.p4-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.7);color:#1D1D1F;font-size:13px;font-weight:700}
.p4-nom b{display:block;font-size:16px;line-height:20px;font-weight:700;letter-spacing:-.01em}
.p4-nom small{display:block;font-size:12px;line-height:16px}
.p4-c1{background:#F4E3E8;color:#1D1D1F}
.p4-c2{background:#E3B8C5;color:#1D1D1F}
.p4-c3{background:#C9798F;color:#1D1D1F}
.p4-c4,.p4-c5{background:#A32A4E;color:#fff}
.p4-c6{background:#7A1230;color:#fff}
.p4-obj,.p4-estado,.p4-lns,.p4-flag{padding:0 12px 0 16px}
.p4-obj{font-size:13px;line-height:18px;color:#424245;min-height:36px}
.p4-lns{display:flex;flex-direction:column;gap:4px}
.p4-ln{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 6px;font-size:13px;line-height:18px}
.p4-ln-n{display:inline-flex;align-items:center;gap:6px;color:#424245}
.p4-ln-v{white-space:nowrap}
.p4-ln-v b{font-weight:700}

/* ---------- Canales: 9 familias ---------- */
.p4-fams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.p4-fam{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:16px;border:0;border-radius:16px;background:#F5F5F7;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:box-shadow .15s ease-out,transform .15s ease-out}
.p4-fam:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(-1px)}
.p4-fam-on{background:#fff;box-shadow:inset 0 0 0 1.5px #E3B8C5,0 1px 2px rgba(0,0,0,.03)}
.p4-fam-h{display:flex;align-items:center;gap:10px}
.p4-fam-h b{flex:1;min-width:0;font-size:16px;line-height:20px;font-weight:600}
.p4-fn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#F4E3E8;color:#7A1230;font-size:13px;font-weight:700}
.p4-fam-c{font-size:12px;line-height:16px;font-weight:600;color:#6E6E73}
.p4-fam-on .p4-fam-c{color:#7A1230}
.p4-chips{display:flex;flex-wrap:wrap;gap:6px}
.p4-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;background:#fff;color:#6E6E73;font-size:12px;line-height:16px}
.p4-chip.p4-on{background:#7A1230;color:#fff;font-weight:600}
.p4-chip.p4-pr{background:none;box-shadow:inset 0 0 0 1px #6E6E73}
.p4-chip small{font-size:11px;margin-left:2px}
.p4-fam-i{font-size:12px;line-height:16px;font-weight:600;color:#7A1230}

/* ---------- Puentes ---------- */
.p4-sv-w{min-width:0}
.p4-sv{width:100%;height:auto}
.p4-sv text{font-family:-apple-system,BlinkMacSystemFont,Inter,sans-serif}
.p4-sv-n{font-size:16px;font-weight:700;fill:#1D1D1F}
.p4-sv-nh{font-size:16px;font-weight:700;fill:#fff}
.p4-sv-s{font-size:12px;fill:#6E6E73}
.p4-sv-sh{font-size:12px;fill:#fff}
.p4-sv-e{font-size:12px;font-weight:600;fill:#7A1230}
.p4-pls{list-style:none;margin:0;padding:0;display:none;grid-template-columns:minmax(0,1fr);gap:12px}
.p4-pl{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;background:#F5F5F7}
.p4-pl b{font-size:15px;line-height:20px}
.p4-pl-v{font-size:13px;font-weight:600;color:#7A1230}
.p4-pl-m{font-size:14px;line-height:20px}
.p4-pl small{font-size:12px;line-height:16px;color:#6E6E73}

/* ---------- Funnel: embudo en peldaños ---------- */
.p4-emb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.p4-pa{display:grid;grid-template-columns:150px minmax(0,1fr) 112px 128px;gap:14px;align-items:center;padding:6px 10px;border-radius:10px}
.p4-pa.p4-hot{background:rgba(196,0,26,.05)}
.p4-pa-n{font-size:15px;line-height:20px;font-weight:600}
.p4-pa-n small{display:block;font-size:12px;line-height:16px;font-weight:400;color:#6E6E73}
.p4-pa-z{display:flex;justify-content:center}
.p4-pa-t{display:block;height:40px;background:#F4E3E8;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,9px 100%);overflow:hidden}
.p4-pa-t i{display:block;height:100%;background:#A32A4E;animation:p4g .6s cubic-bezier(.2,.8,.2,1)}
.p4-pa-v{font-size:14px;text-align:right}
.p4-pa-v b{font-size:18px;font-weight:700}
.p4-pa-e{justify-self:end}
@keyframes p4g{from{width:0}}

/* ---------- Plan y montaje ---------- */
.p4-foco{display:flex;align-items:flex-start;gap:10px;max-width:360px;padding:12px 16px;border-radius:14px;background:#FDECEE;color:#C4001A}
.p4-foco p{display:flex;flex-direction:column;font-size:14px;line-height:20px}
.p4-foco b{font-weight:600}
.p4-foco span{color:#1D1D1F}
.p4-semana{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.p4-dia{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;background:#F5F5F7}
.p4-dia.p4-hecho{background:#fff;box-shadow:inset 0 0 0 1.5px #E3B8C5}
.p4-dia-t{font-size:16px;line-height:20px;font-weight:700;letter-spacing:-.01em}
.p4-dia-d{flex:1;font-size:14px;line-height:20px;color:#424245}
.p4-dia-p{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.p4-metas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.p4-metas li{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:#F5F5F7;font-size:14px}
.p4-metas li.p4-hecho{background:#E9F6EC}
.p4-regla{font-size:14px;line-height:20px;color:#6E6E73}
.p4-mont{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.p4-mc{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;background:#F5F5F7}
.p4-mc-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.p4-mc-h b{font-size:17px;line-height:22px;font-weight:600}
.p4-mc-h span{font-size:13px;font-weight:600;color:#6E6E73}
.p4-mc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.p4-mc li{display:flex;align-items:flex-start;gap:10px;color:#6E6E73}
.p4-mc li.p4-hecho{color:#1B7A33}
.p4-mc li.p4-sig{color:#7A1230}
.p4-mc li span b{display:block;font-size:14px;line-height:19px;font-weight:600;color:#1D1D1F}
.p4-mc li small{font-size:12px;line-height:16px}

/* ---------- Pipeline: tablero ---------- */
.p4-tab{overflow-x:auto;padding-bottom:6px}
.p4-grs,.p4-cols{display:grid;grid-template-columns:repeat(var(--p4-cols,7),minmax(140px,1fr));gap:8px;min-width:0}
.p4-grs{margin-bottom:8px}
.p4-gr{padding:4px 10px;border-radius:999px;background:#F4E3E8;color:#7A1230;font-size:12px;line-height:16px;font-weight:600;text-align:center}
.p4-col{display:flex;flex-direction:column;gap:8px;min-width:0;padding:8px;border-radius:14px;background:#F0F0F2}
.p4-col-h{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0;font-size:13px;line-height:18px;font-weight:700}
.p4-col-h b{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 6px;border-radius:999px;background:#fff;font-size:12px}
.p4-col-g{display:none;margin:0;font-size:11px;line-height:14px;color:#6E6E73}
.p4-col-v{margin:0;font-size:12px;line-height:16px;color:#6E6E73;padding:6px 4px}
.p4-lead{display:flex;flex-direction:column;align-items:stretch;gap:5px;width:100%;padding:11px;border:0;border-radius:12px;background:#fff;font:inherit;color:#1D1D1F;text-align:left;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:box-shadow .15s ease-out,transform .15s ease-out}
.p4-lead:hover{box-shadow:0 6px 18px rgba(0,0,0,.12);transform:translateY(-1px)}
.p4-lead-t{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.p4-lead-t b{font-size:15px;line-height:20px;font-weight:600}
.p4-lead-t em{font-style:normal;font-size:11px;line-height:14px;color:#6E6E73}
.p4-lead-n{font-size:12px;line-height:16px;color:#6E6E73}
.p4-lead-a{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 5px;font-size:13px;line-height:17px;color:#1D1D1F}
.p4-lead-a .p4-i{margin-top:2px;color:#7A1230}
.p4-lead-a span{flex:1 1 80px;min-width:0}
.p4-lead-a u{flex:none;margin-left:18px;text-decoration:none;font-size:12px;line-height:16px;color:#6E6E73}
.p4-lead-a u.p4-hoy{color:#7A1230;font-weight:700}
.p4-perd{background:#FAFAFB}

/* ---------- Setting y cierre ---------- */
.p4-closers{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.p4-closers li{display:flex;align-items:baseline;gap:10px;padding:8px 14px;border-radius:999px;background:#F5F5F7;font-size:14px}
.p4-closers span{color:#6E6E73}

/* ---------- Nutrición: línea de tiempo ---------- */
.p4-lt{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.p4-lt-i{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);gap:0 22px;padding-bottom:16px}
.p4-lt-i::before{content:"";position:absolute;left:125px;top:6px;bottom:-6px;width:2px;background:#E3B8C5}
.p4-lt-i:last-child::before{display:none}
.p4-lt-i::after{content:"";position:absolute;left:119px;top:6px;width:14px;height:14px;border-radius:50%;background:#7A1230;box-shadow:0 0 0 4px #fff}
.p4-lt-c{padding-top:3px;font-size:13px;line-height:18px;font-weight:700;color:#7A1230;text-align:right}
.p4-lt-b{display:flex;flex-direction:column;gap:6px;margin-left:24px;padding:14px 16px;border-radius:14px;background:#F5F5F7}
.p4-lt-i.p4-hot .p4-lt-b{background:rgba(196,0,26,.05)}
.p4-lt-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.p4-lt-h b{font-size:17px;line-height:22px;font-weight:600}
.p4-cn{display:inline-flex;align-items:center;gap:4px}
.p4-lt-p{font-size:15px;line-height:22px}
.p4-lt-q{font-size:13px;line-height:18px;color:#6E6E73}
.p4-lt-m{display:grid;grid-template-columns:minmax(80px,200px) auto auto;gap:12px;align-items:center;justify-content:start;font-size:13px;font-weight:600}
.p4-lt-s{display:flex;align-items:flex-start;gap:6px;font-size:13px;line-height:18px;color:#424245}
.p4-lt-s .p4-i{margin-top:2px;color:#6E6E73}

/* ---------- Contenido ---------- */
.p4-pod{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:20px;align-items:stretch}
.p4-pod-t{display:flex;flex-direction:column;gap:2px;padding:20px;border-radius:16px;background:#F4E3E8}
.p4-cita{margin-top:12px;padding-left:12px;border-left:3px solid #A32A4E;font-size:15px;line-height:22px}
.p4-rk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.p4-rk li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 36px minmax(0,150px);gap:12px;align-items:center;min-height:44px}
.p4-rk-n{font-size:14px;line-height:18px;font-weight:600}
.p4-rk-n small{display:block;overflow:hidden;font-size:12px;line-height:16px;font-weight:400;color:#6E6E73;white-space:nowrap;text-overflow:ellipsis}
.p4-rk li b{text-align:right;font-size:16px}
.p4-rk-b{display:block;height:14px;border-radius:0 4px 4px 0;background:#F2F2F5}
.p4-rk-b i{display:block;height:100%;border-radius:0 4px 4px 0;background:#A32A4E}

/* ---------- Micros ---------- */
.p4-micros{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:10px}
.p4-mi{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;height:100%;padding:16px;border:0;border-radius:16px;background:#F5F5F7;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:box-shadow .15s ease-out,transform .15s ease-out}
.p4-mi:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(-1px)}
.p4-mi.p4-hot{background:#fff;box-shadow:inset 0 0 0 2px #A32A4E}
.p4-mi-e{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:16px;font-weight:600;color:#7A1230}
.p4-mi-n{font-size:20px;line-height:26px;letter-spacing:-.02em}
.p4-mi-f{font-size:13px;color:#6E6E73}
.p4-mi-t{min-height:40px;font-size:14px;line-height:20px}
.p4-plan .p4-mi-t{color:#6E6E73}
.p4-mi-i b{font-size:22px;letter-spacing:-.02em}
.p4-mi-d{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:12px;line-height:16px;color:#6E6E73}
.p4-mi-d b{color:#1D1D1F}

/* ---------- foco y movimiento ---------- */
.p4-et-b:focus-visible,.p4-fam:focus-visible,.p4-lead:focus-visible,.p4-mi:focus-visible{outline:3px solid rgba(122,18,48,.45);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.p4-pa-t i{animation:none}.p4-fam:hover,.p4-lead:hover,.p4-mi:hover{transform:none}}

/* ---------- pantallas estrechas ---------- */
@media (max-width:1100px){
.p4-fams,.p4-mont{grid-template-columns:repeat(2,minmax(0,1fr))}
.p4-semana{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
.p4-hero{padding:20px 16px;gap:18px}
.p4-h{font-size:26px;line-height:32px}
.p4-big{font-size:44px;line-height:48px}
.p4-flujo{grid-template-columns:minmax(0,1fr);gap:10px}
.p4-et{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.07)}
.p4-et.p4-hot{background:#FDF3F4}
.p4-chev,.p4-et:first-child .p4-chev{width:100%;clip-path:none;border-radius:14px 14px 0 0;padding:10px 14px;min-height:60px}
.p4-fams,.p4-mont,.p4-semana{grid-template-columns:minmax(0,1fr)}
.p4-sv-w{display:none}
.p4-pls{display:grid}
.p4-pa{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
.p4-pa-z{grid-column:1/-1;order:3}
.p4-grs{display:none}
.p4-cols{grid-template-columns:minmax(0,1fr)}
.p4-col-g{display:block}
.p4-tab{overflow-x:visible}
.p4-lt-i{grid-template-columns:minmax(0,1fr);padding-left:20px;padding-bottom:14px}
.p4-lt-i::before{left:6px}
.p4-lt-i::after{left:0}
.p4-lt-c{text-align:left;padding:0 0 4px 0}
.p4-lt-b{margin-left:0}
.p4-lt-m{grid-template-columns:minmax(0,1fr);gap:6px}
.p4-pod{grid-template-columns:minmax(0,1fr)}
.p4-rk li{grid-template-columns:minmax(0,1fr) 32px;gap:4px 10px}
.p4-rk-b{grid-column:1/-1;order:3}
.p4-rk-f{grid-column:1/-1;order:4}
.p4-foco{max-width:none}
}