/* ============================================================
   Publinovo — Publicidad en Redes Sociales (prs-)
   Estilos exclusivos de la página. Hereda tokens de styles.css
   ============================================================ */

/* ---------- Fondo suave compartido ---------- */
.prs-soft{ background:var(--bg-soft) }

/* ============================================================
   1 · HERO
   ============================================================ */
.prs-hero{ position:relative; overflow:hidden; padding-block:clamp(40px,5vw,64px) clamp(64px,8vw,110px);
  background:
    radial-gradient(120% 120% at 90% -10%, rgba(28,157,215,.10), transparent 55%),
    radial-gradient(90% 90% at -5% 110%, rgba(140,198,63,.12), transparent 55%), var(--bg) }
.prs-hero__blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none }
.prs-hero__blob--1{ width:380px; height:380px; top:-140px; right:-100px; background:rgba(28,157,215,.35) }
.prs-hero__blob--2{ width:320px; height:320px; bottom:-130px; left:-110px; background:rgba(140,198,63,.35) }

.prs-crumbs{
  display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap; font-family:var(--ff-head);
  font-size:13px; font-weight:500; color:var(--ink-3); margin-bottom:clamp(28px,3.4vw,44px);
}
.prs-crumbs a{ color:var(--ink-3); transition:color .2s }
.prs-crumbs a:hover{ color:var(--blue-d) }
.prs-crumbs span[aria-current]{ color:var(--green-d); font-weight:600 }
.prs-crumbs i{ font-style:normal; color:var(--line-2) }

.prs-hero__grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(36px,5vw,72px); align-items:center; position:relative; z-index:1 }
.prs-badge{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px; margin-bottom:24px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  font-family:var(--ff-head); font-weight:500; font-size:13.5px; color:var(--ink-2); box-shadow:var(--shadow-sm) }
.prs-badge .dot{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(140,198,63,.25); animation:pulse 2s infinite }
.prs-hero__copy h1{ font-size:clamp(34px,4.6vw,56px); letter-spacing:-.03em }
.prs-hero__copy .lead{ margin-top:20px; max-width:540px }

.prs-price-flash{ display:inline-flex; align-items:center; gap:16px; padding:12px 22px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm) }
.prs-price-flash small{ display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-family:var(--ff-head); font-weight:600 }
.prs-price-flash b{ font-family:var(--ff-head); font-size:26px; color:var(--ink); letter-spacing:-.02em }
.prs-price-flash b span{ font-size:14px; font-weight:600; color:var(--ink-3) }
.prs-hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:28px }

/* --- Mockup de feed gestionado --- */
.prs-hero__media{ position:relative; display:flex; justify-content:center }
.prs-feed{ width:min(340px,100%); background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden }
.prs-feed__bar{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line) }
.prs-feed__av{ width:40px; height:40px; border-radius:50%; background:var(--grad); display:grid; place-items:center; color:#fff; font-family:var(--ff-head); font-weight:700; font-size:15px }
.prs-feed__who b{ display:block; font-family:var(--ff-head); font-size:14.5px; line-height:1.2 }
.prs-feed__who small{ font-size:12px; color:var(--ink-3) }
.prs-feed__check{ margin-left:auto; width:22px; height:22px; border-radius:50%; background:var(--blue); display:grid; place-items:center; color:#fff }
.prs-feed__check svg{ width:12px; height:12px }
.prs-feed__img{ background:var(--grad-soft); overflow:hidden }
.prs-feed__img img{ width:100%; height:auto; display:block }
.prs-feed__acts{ display:flex; gap:14px; padding:13px 18px 5px; color:var(--ink-2) }
.prs-feed__acts svg{ width:22px; height:22px }
.prs-feed__likes{ padding:0 18px 16px; font-size:13.5px; color:var(--ink-2) }
.prs-feed__likes b{ font-family:var(--ff-head) }

.prs-float{ position:absolute; display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--shadow-md); padding:13px 17px; z-index:2 }
.prs-float small{ display:block; font-size:11.5px; color:var(--ink-3) }
.prs-float b{ font-family:var(--ff-head); font-size:15px; color:var(--ink); line-height:1.15; display:block }
.prs-float__ic{ flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center }
.prs-float__ic svg{ width:21px; height:21px }
.prs-float--1{ top:96px; left:max(-14px, calc(50% - 248px)); animation:floaty 5s ease-in-out infinite }
.prs-float--1 .prs-float__ic{ background:linear-gradient(140deg,#9BD24B,#6FAE2A) }
.prs-float--2{ bottom:112px; right:max(-14px, calc(50% - 248px)); animation:floaty 6s ease-in-out infinite .7s }
.prs-float--2 .prs-float__ic{ background:linear-gradient(140deg,#34AEE3,#1683BB) }

/* ============================================================
   2 · PROBLEMA
   ============================================================ */
.prs-pain{ padding-block:clamp(56px,7vw,96px) }
.prs-pain__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(24px,3vw,48px); align-items:center }
.prs-pain__list{ display:flex; flex-direction:column; gap:14px }
.prs-pain__item{ display:flex; gap:15px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:18px 20px; box-shadow:var(--shadow-sm) }
.prs-pain__item .ic{ flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--bg-soft-2); color:var(--ink-2) }
.prs-pain__item .ic svg{ width:22px; height:22px }
.prs-pain__item p{ font-size:15.5px; color:var(--ink-2); line-height:1.55 }
.prs-pain__item p b{ color:var(--ink) }
.prs-pain__copy .lead{ margin-top:18px }
.prs-pain__copy .eyebrow{ margin-bottom:14px }
.prs-pain__copy h2{ font-size:clamp(28px,3.8vw,42px) }
.prs-pain__note{ margin-top:18px; font-size:15.5px; color:var(--ink-2) }
.prs-pain__note b{ color:var(--green-d) }

/* ============================================================
   3 · QUÉ INCLUYE
   ============================================================ */
.prs-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.prs-feat{ display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px; transition:transform .25s, box-shadow .25s }
.prs-feat:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md) }
.prs-feat__ic{ flex:none; width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background:var(--grad-soft); color:var(--blue-d) }
.prs-feat__ic svg{ width:24px; height:24px }
.prs-feat h3{ font-size:17px; margin-bottom:7px }
.prs-feat p{ font-size:14.5px; color:var(--ink-3); line-height:1.55 }

/* ============================================================
   4 · PROCESO
   ============================================================ */
.prs-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,28px); position:relative }
.prs-step{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center }
.prs-step:not(:last-child)::before{
  content:""; position:absolute; top:38px; left:calc(50% + 46px); right:calc(-50% + 46px);
  height:2px; background:repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px); z-index:0;
}
.prs-step__node{
  position:relative; z-index:1; width:76px; height:76px; border-radius:22px;
  display:grid; place-items:center; background:#fff; border:1.5px solid var(--line);
  box-shadow:var(--shadow-sm); color:var(--blue-d);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s, color .4s, background .4s;
}
.prs-step__node svg{ width:34px; height:34px; transition:transform .4s cubic-bezier(.2,.7,.2,1) }
.prs-step__num{
  position:absolute; top:-9px; right:-9px; z-index:2;
  width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-family:var(--ff-head); font-weight:700; font-size:12px;
  box-shadow:0 6px 14px -5px rgba(43,45,58,.5); transition:background .4s;
}
.prs-step:hover .prs-step__node{
  transform:translateY(-6px); border-color:transparent; background:var(--grad); color:#fff;
  box-shadow:0 20px 38px -14px rgba(28,157,215,.5);
}
.prs-step:hover .prs-step__node svg{ transform:scale(1.1) }
.prs-step:hover .prs-step__num{ background:var(--green-d) }
.prs-step h3{ font-size:18px; margin:22px 0 9px }
.prs-step p{ font-size:14px; color:var(--ink-3); line-height:1.58; max-width:26ch }

/* ============================================================
   5 · PLANES
   ============================================================ */
.prs-plans .plan{ padding-top:40px }

.plan__per{ font-size:13px; color:var(--ink-3); margin-top:-14px; margin-bottom:8px }
.plan.featured .plan__per{ color:rgba(255,255,255,.6) }
.plan__posts{ display:flex; align-items:center; gap:12px; margin:4px 0 16px; padding:13px 16px;
  background:var(--grad-soft); border-radius:var(--r-md); font-size:14px; color:var(--ink-2) }
.plan__posts b{ font-family:var(--ff-head); color:var(--ink); display:block; font-size:15px; line-height:1.25 }
.plan__posts svg{ width:22px; height:22px; color:var(--blue-d); flex:none }
.plan.featured .plan__posts{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.75) }
.plan.featured .plan__posts b{ color:#fff }
.plan.featured .plan__posts svg{ color:var(--green) }

.plan .btn{ width:100% }

.prs-finePrint{ max-width:820px; margin:34px auto 0; text-align:center; font-size:13.5px; color:var(--ink-3); line-height:1.7 }
.prs-finePrint b{ color:var(--ink-2) }

/* --- Mini tabla comparativa --- */
.prs-compare{ max-width:860px; margin:clamp(40px,5vw,56px) auto 0; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm) }
.prs-compare table{ width:100%; border-collapse:collapse; font-size:14.5px }
.prs-compare th, .prs-compare td{ padding:14px 18px; text-align:center; border-top:1px solid var(--line) }
.prs-compare thead th{ border-top:0; background:var(--bg-soft); font-family:var(--ff-head); font-size:13.5px; color:var(--ink) }
.prs-compare tbody th{ text-align:left; font-family:var(--ff-head); font-weight:500; font-size:13.5px; color:var(--ink-2) }
.prs-compare td{ color:var(--ink-2) }
.prs-compare td b{ font-family:var(--ff-head); color:var(--ink) }
.prs-compare .yes{ color:var(--green-d); font-weight:700 }
.prs-compare .no{ color:var(--muted) }

/* ============================================================
   6 · PRUEBA SOCIAL
   ============================================================ */
.prs-proof{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:920px; margin-inline:auto }
.prs-pcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s }
.prs-pcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md) }
.prs-pcard__body{ padding:26px 28px 28px; display:flex; flex-direction:column; flex:1 }
.prs-pcard__head{ display:flex; align-items:center; gap:14px; margin-bottom:14px }
.prs-pcard__logo{ height:38px; width:auto; object-fit:contain }
.prs-pcard__head b{ font-family:var(--ff-head); font-size:18px; display:block; line-height:1.2 }
.prs-pcard__head small{ font-size:13px; color:var(--ink-3) }
.prs-pcard__live{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; flex:none;
  font-family:var(--ff-head); font-weight:600; font-size:12px; color:var(--green-d);
  background:rgba(140,198,63,.12); border:1px solid rgba(140,198,63,.35);
  padding:6px 12px; border-radius:var(--r-pill); white-space:nowrap }
.prs-pcard__live .dot{ width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 3px rgba(140,198,63,.25); animation:pulse 2s infinite }
.prs-pcard p{ font-size:14.5px; color:var(--ink-3); line-height:1.6 }
.prs-pcard__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px;
  padding:16px 18px; background:var(--bg-soft); border-radius:var(--r-md) }
.prs-pcard__stats > div{ text-align:center }
.prs-pcard__stats > div + div{ border-left:1px solid var(--line-2); padding-left:14px }
.prs-pcard__stats b{ display:block; font-family:var(--ff-head); font-size:21px; font-weight:700;
  color:var(--blue-d); line-height:1.1; letter-spacing:-.02em }
.prs-pcard__stats > div:first-child b{ color:var(--green-d) }
.prs-pcard__stats small{ display:block; font-size:11.5px; color:var(--ink-3); line-height:1.35; margin-top:5px }
.prs-pcard__links{ display:flex; gap:10px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line) }
.prs-pcard__links a{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-head); font-weight:600;
  font-size:13.5px; color:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:9px 16px;
  transition:color .2s, border-color .2s, background .2s, transform .2s }
.prs-pcard__links a svg{ width:16px; height:16px }
.prs-pcard__links a:hover{ transform:translateY(-2px); color:#fff; border-color:transparent }
.prs-pcard__links a.fb:hover{ background:#1877F2 }
.prs-pcard__links a.ig:hover{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF) }

/* ============================================================
   7 · FAQ
   ============================================================ */
.prs-faq{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:14px }
.prs-faq__item{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:box-shadow .25s }
.prs-faq__item[open]{ box-shadow:var(--shadow-sm) }
.prs-faq__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 22px; font-family:var(--ff-head); font-weight:600; font-size:16.5px; color:var(--ink) }
.prs-faq__item summary::-webkit-details-marker{ display:none }
.prs-faq__item summary::after{ content:"+"; flex:none; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; background:var(--bg-soft-2); color:var(--ink-2);
  font-weight:600; font-size:19px; transition:transform .25s, background .25s, color .25s }
.prs-faq__item[open] summary::after{ transform:rotate(45deg); background:var(--ink); color:#fff }
.prs-faq__item p{ padding:0 22px 22px; font-size:15px; color:var(--ink-2); line-height:1.7 }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .prs-hero__grid{ grid-template-columns:1fr }
  .prs-hero__media{ margin-top:10px }
  .prs-pain__grid{ grid-template-columns:1fr }
  .prs-feats{ grid-template-columns:repeat(2,1fr) }
  .prs-flow{ grid-template-columns:repeat(2,1fr); gap:40px 24px }
  .prs-step:not(:last-child)::before{ display:none }
}
@media (max-width:680px){
  .prs-feats{ grid-template-columns:1fr }
  .prs-proof{ grid-template-columns:1fr; max-width:480px }
  .prs-float--1{ left:-6px } .prs-float--2{ right:-6px }
  .prs-compare{ display:none }
}
@media (max-width:560px){
  .prs-flow{ grid-template-columns:1fr; max-width:340px; margin-inline:auto; gap:34px }
  .prs-hero__actions .btn{ flex:1 }
}