/* Pixelativo Comercial — piezas compartidas: portada de marca madre y secciones de sector.
   Usa las variables y componentes de registro.css (cargarlo antes). */

/* ===== Portada: marca madre ===== */
.madre{max-width:var(--ancho);margin:0 auto;padding:0 var(--lado)}
.madre-hero{padding:clamp(40px,8vw,88px) 0 28px;text-align:center;display:grid;justify-items:center;gap:14px}
.madre-hero h1{font-family:var(--f-disp);font-weight:800;font-size:clamp(34px,7vw,64px);line-height:1.03;letter-spacing:-.025em;margin:0;max-width:16ch}
.madre-hero h1 span{color:var(--cian)}
.madre-hero .hero-sub{margin:0 auto;max-width:640px;text-align:center}
.madre-logo{width:64px;height:64px}
.madre-logo svg{width:100%;height:100%}

.sectores-tit{font-family:var(--f-disp);font-weight:800;font-size:clamp(22px,4vw,28px);text-align:center;margin:20px 0 18px}
.sectores{list-style:none;margin:0 auto;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));max-width:1040px}
.sector{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;min-height:96px;padding:18px 18px;border-radius:18px;height:100%;
  background:var(--panel);border:1px solid var(--borde);color:var(--tinta);text-decoration:none;position:relative;
  transition:border-color .2s,transform .2s,background .2s}
.sector:hover{border-color:var(--cian);transform:translateY(-2px)}
.sector .s-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--borde);color:var(--cian2)}
.sector .s-ico .ico{width:28px;height:28px}
.sector .s-txt{display:grid;gap:2px}
.sector .s-txt b{font-family:var(--f-disp);font-size:20px;font-weight:800;letter-spacing:-.01em}
.sector .s-txt span{font-size:13.5px;color:var(--gris)}
.sector.abierto{background:linear-gradient(160deg,rgba(63,169,208,.18),var(--panel) 70%);border-color:rgba(63,169,208,.6)}
.sector.abierto .s-ico{background:var(--cian);color:#04131C;border-color:transparent}
.sector .s-estado{position:absolute;top:10px;right:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px 8px;white-space:nowrap}
.sector .s-txt{padding-right:64px}
.sector .s-txt b{text-wrap:balance;line-height:1.15}
.sector.abierto .s-estado{background:rgba(37,211,102,.14);color:#4BE38A;border:1px solid rgba(37,211,102,.4)}
.sector.pronto .s-estado{background:var(--panel2);color:var(--gris);border:1px solid var(--borde)}
.sector.pronto{opacity:.88}
.sectores-nota{text-align:center;color:var(--gris);font-size:14px;margin:16px auto 0;max-width:560px}

.madre-motor{margin:44px auto 0;max-width:1040px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.madre-motor li{list-style:none;background:var(--panel);border:1px solid var(--borde);border-radius:18px;padding:16px;display:grid;gap:6px;color:var(--gris)}
.madre-motor li b{color:var(--tinta);font-size:17px}
.madre-motor{padding:0}

/* ===== Sección de sector: dolor del vendedor ===== */
.dolores{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.dolores li{background:var(--panel);border:1px solid var(--borde);border-radius:18px;padding:16px 18px;display:grid;gap:10px;align-content:start}
.dolores q{font-family:var(--f-disp);font-weight:600;font-size:18px;line-height:1.3;color:var(--tinta);quotes:"«" "»"}
.dolores p{margin:0;color:var(--gris);font-size:15px;padding-top:10px;border-top:1px dashed var(--borde)}
.dolores p b{color:var(--cian2)}

/* Tres pasos en una fila en pantallas grandes */
@media (min-width:900px){ .pasos.pasos-3{grid-template-columns:repeat(3,1fr)} }

/* ===== Testimonios ===== */
.testimonios{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.testimonio{margin:0;background:var(--panel);border:1px solid var(--borde);border-radius:18px;padding:18px;display:grid;gap:12px;align-content:space-between}
.testimonio blockquote{margin:0;font-size:16px;line-height:1.5;color:var(--tinta)}
.testimonio blockquote::before{content:"«"}
.testimonio blockquote::after{content:"»"}
.testimonio figcaption{display:grid;gap:2px;font-size:14px;color:var(--gris)}
.testimonio figcaption b{color:var(--tinta);font-size:15px}

/* ===== WhatsApp del sector ===== */
.cta-wa{text-align:center;display:grid;justify-items:center;gap:6px}
.cta-wa .lead-txt{margin-left:auto;margin-right:auto;max-width:560px}
.btn-wa-sector{background:linear-gradient(180deg,#34E07A,var(--verde));color:#06301A;font-size:17px;min-height:54px;padding:14px 22px}
.wa-flotante{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:15;
  display:inline-flex;align-items:center;gap:8px;padding:12px 16px 12px 14px;border-radius:999px;text-decoration:none;font-weight:700;
  background:linear-gradient(180deg,#34E07A,var(--verde));color:#06301A;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.wa-flotante .ico{width:22px;height:22px}
@media (max-width:640px){ .wa-flotante span{display:none} .wa-flotante{padding:14px} }
body.en-estado .wa-flotante{display:none}

/* El número del paso va arriba a la derecha: el título no debe pasar por debajo */
.pasos.pasos-3 li > b{padding-right:40px}