/* ============================================================
   Publinovo — Landing "Creación de Páginas Web"
   Hereda tokens y componentes de styles.css.
   Solo añade lo específico de esta landing.
   ============================================================ */

/* ---------- Utilidades locales ---------- */
.dpw-soft{ background:var(--bg-soft) }
/* acercar "Tu sitio empresarial" con "Todo incluido": recortar el hueco blanco */
.dpw-deliver{ padding-bottom:clamp(30px,3.5vw,48px) }
.dpw-incl{ padding-top:clamp(30px,3.5vw,48px) }

/* ============================================================
   1 · HERO (split: copy + mockup)
   ============================================================ */
.dpw-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(28px,4vw,52px) clamp(56px,7vw,96px);
  background:
    radial-gradient(110% 120% at 92% -10%, rgba(28,157,215,.12), transparent 55%),
    radial-gradient(95% 110% at -8% 115%, rgba(140,198,63,.16), transparent 55%),
    linear-gradient(135deg, #f4faee 0%, #eef7f4 50%, #ecf6fb 100%);
}
.dpw-hero__blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; z-index:0 }
.dpw-hero__blob--1{ width:340px; height:340px; top:-120px; right:-80px; background:radial-gradient(circle, rgba(28,157,215,.30), transparent 70%) }
.dpw-hero__blob--2{ width:300px; height:300px; bottom:-130px; left:-90px; background:radial-gradient(circle, rgba(140,198,63,.30), transparent 70%) }
.dpw-hero .wrap{ position:relative; z-index:2 }

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

.dpw-hero__grid{
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(32px,5vw,64px); align-items:center;
}
.dpw-badge{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; margin-bottom:22px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  font-family:var(--ff-head); font-size:13px; font-weight:600; color:var(--ink-2); box-shadow:var(--shadow-sm);
}
.dpw-badge .dot{ width:9px; height:9px; border-radius:50%; background:#8CC63F; box-shadow:0 0 0 4px rgba(140,198,63,.25); animation:pulse 2s infinite }
.dpw-hero__copy h1{ font-size:clamp(34px,4.8vw,56px); letter-spacing:-.03em; text-wrap:balance }
.dpw-hero__copy .lead{ margin-top:20px; max-width:54ch }

/* flash de precio en el hero */
.dpw-price-flash{
  display:inline-flex; align-items:center; gap:18px; margin-top:26px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 20px; box-shadow:var(--shadow-md);
}
.dpw-price-flash__nums{ display:flex; align-items:baseline; gap:12px }
.dpw-price-flash__old{ font-family:var(--ff-head); font-weight:600; font-size:19px; color:var(--muted); text-decoration:line-through }
.dpw-price-flash__now{ font-family:var(--ff-head); font-weight:700; font-size:38px; line-height:1; letter-spacing:-.02em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.dpw-price-flash__now small{ font-size:15px; font-weight:600; color:var(--ink-3); -webkit-text-fill-color:var(--ink-3) }
.dpw-price-flash__tag{
  font-family:var(--ff-head); font-weight:700; font-size:13px; letter-spacing:.04em; color:#fff;
  background:var(--grad); padding:8px 14px; border-radius:var(--r-pill); box-shadow:var(--shadow-brand);
}

.dpw-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px }
.dpw-hero__chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3vw,36px) }
.dpw-chip{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 16px 9px 13px; box-shadow:var(--shadow-sm); font-size:13.5px; color:var(--ink-2);
}
.dpw-chip b{ font-family:var(--ff-head); color:var(--ink); font-weight:700 }
.dpw-chip svg{ width:17px; height:17px; color:var(--green-d); flex:none }

/* media / mockup */
.dpw-hero__media{ position:relative; display:flex; justify-content:center }
.dpw-hero__mock{
  position:relative; width:min(100%,520px); aspect-ratio:1/1;
  display:grid; place-items:center;
}
/* halo de color difuso detrás del mockup — efecto llamativo, sin recuadro */
.dpw-hero__mock::before{
  content:""; position:absolute; inset:-4%;
  border-radius:var(--r-xl);
  background:
    radial-gradient(60% 60% at 30% 26%, rgba(28,157,215,.40), transparent 68%),
    radial-gradient(58% 58% at 74% 78%, rgba(140,198,63,.38), transparent 68%);
  filter:blur(46px); opacity:.85; z-index:0;
  animation:dpw-glow 8s ease-in-out infinite;
}
/* (aro punteado retirado: la imagen ahora es una foto completa, no un recorte) */
.dpw-hero__mock::after{ content:none }
.dpw-hero__mock img{
  position:relative; z-index:1;
  width:100%; height:auto; display:block;
  border-radius:var(--r-xl);
  box-shadow:0 30px 60px -22px rgba(28,40,64,.34), 0 10px 24px -16px rgba(28,40,64,.22);
  animation:dpw-floaty 6s ease-in-out infinite;
}
@keyframes dpw-floaty{ 50%{ transform:translateY(-16px) } }
@keyframes dpw-glow{ 50%{ transform:scale(1.07); opacity:1 } }

.dpw-float{
  position:absolute; z-index:2; background:#fff; border-radius:var(--r-md); box-shadow:var(--shadow-md);
  padding:13px 17px; display:flex; align-items:center; gap:12px; border:1px solid var(--line);
}
.dpw-float small{ display:block; font-size:11px; color:var(--ink-3) }
.dpw-float b{ font-family:var(--ff-head); font-size:15px; color:var(--ink) }
.dpw-float__ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none; color:#fff }

.dpw-float__ic svg{ width:21px; height:21px }
.dpw-float--1{ top:6%; left:-4%; animation:dpw-bob 5s ease-in-out infinite }
.dpw-float--2{ bottom:8%; right:-4%; animation:dpw-bob 5s ease-in-out infinite .8s }
@keyframes dpw-bob{ 50%{ transform:translateY(-9px) } }
@media (prefers-reduced-motion:reduce){ .dpw-float--1,.dpw-float--2,.dpw-hero__mock img,.dpw-hero__mock::before,.dpw-hero__mock::after{ animation:none } }

/* ============================================================
   2 · ELEMENTOS INCLUIDOS
   ============================================================ */
.dpw-feats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,22px);
}
.dpw-feat{
  display:flex; gap:16px; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,2vw,26px);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.dpw-feat:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent }
.dpw-feat__ic{
  width:50px; height:50px; flex:none; border-radius:var(--r-md);
  display:grid; place-items:center; background:var(--grad-soft); color:var(--blue-d);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.dpw-feat:hover .dpw-feat__ic{ transform:translateY(-2px) scale(1.06) rotate(-4deg) }
.dpw-feat__ic--wa{ background:rgba(37,211,102,.14); color:#1faa52 }
.dpw-feat__ic svg{ width:26px; height:26px }
.dpw-feat h3{ font-size:17px; margin-bottom:6px; letter-spacing:-.01em }
.dpw-feat p{ font-size:14px; color:var(--ink-3); line-height:1.55 }

/* franja destacada: dominio + hosting gratis */
.dpw-bonus{
  display:flex; align-items:center; gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(20px,2.4vw,28px); padding:clamp(22px,2.6vw,32px) clamp(24px,3vw,40px);
  border-radius:var(--r-xl); position:relative; overflow:hidden;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(28,157,215,.20), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(140,198,63,.16), transparent 55%), var(--ink);
  box-shadow:var(--shadow-lg);
}
.dpw-bonus__ic{
  width:64px; height:64px; flex:none; border-radius:var(--r-md);
  display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
}
.dpw-bonus__ic svg{ width:34px; height:34px }
.dpw-bonus__txt{ flex:1; min-width:0 }
.dpw-bonus__txt h3{ color:#fff; font-size:clamp(20px,2.1vw,27px); letter-spacing:-.02em }
.dpw-bonus__txt .grad-text{ background:linear-gradient(120deg,#a6d957,#5bc4e6); -webkit-background-clip:text; background-clip:text }
.dpw-bonus__txt p{ color:rgba(255,255,255,.74); font-size:14.5px; line-height:1.55; margin-top:8px; max-width:64ch }
.dpw-bonus__tag{
  flex:none; align-self:flex-start; font-family:var(--ff-head); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:#0e1320;
  background:linear-gradient(120deg,#a6d957,#5bc4e6); padding:8px 16px; border-radius:var(--r-pill);
}

/* ============================================================
   3 · QUÉ ENTREGAMOS (portada + secciones)
   ============================================================ */
.dpw-deliver__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center;
}
.dpw-deliver__intro h2{ font-size:clamp(28px,3.4vw,42px); margin:14px 0 18px; letter-spacing:-.02em; text-wrap:balance }
.dpw-deliver__intro .lead{ max-width:48ch }
.dpw-deliver__note{
  margin:18px 0 26px; padding:14px 18px; border-radius:var(--r-md);
  background:var(--bg-soft); border:1px solid var(--line);
  font-size:14.5px; color:var(--ink-2);
}

.dpw-sections{ display:flex; flex-direction:column; gap:12px }
.dpw-sec{
  display:flex; gap:18px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px 20px; box-shadow:var(--shadow-sm);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.dpw-sec:hover{ transform:translateX(5px); box-shadow:var(--shadow-md); border-color:transparent }
.dpw-sec__num{
  font-family:var(--ff-head); font-weight:700; font-size:16px; color:#fff; flex:none;
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--grad); box-shadow:var(--shadow-brand);
}
.dpw-sec h3{ font-size:17px; margin-bottom:3px }
.dpw-sec p{ font-size:13.5px; color:var(--ink-3); line-height:1.5 }

/* ============================================================
   4 · PROCESO (flujo horizontal)
   ============================================================ */
.dpw-flow{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,28px); position:relative;
}
.dpw-step{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center }
.dpw-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;
}
.dpw-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);
  color:var(--blue-d); box-shadow:var(--shadow-sm);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s, color .4s, background .4s;
}
.dpw-step__node svg{ width:34px; height:34px }
.dpw-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:13px;
  box-shadow:0 6px 14px -5px rgba(43,45,58,.5); transition:background .4s;
}
.dpw-step:hover .dpw-step__node{
  transform:translateY(-6px); border-color:transparent; background:var(--grad); color:#fff;
  box-shadow:0 20px 38px -14px rgba(28,157,215,.5);
}
.dpw-step:hover .dpw-step__num{ background:var(--green-d) }
.dpw-step h3{ font-size:18px; margin:22px 0 9px }
.dpw-step p{ font-size:14px; color:var(--ink-3); line-height:1.58; max-width:24ch }

/* ============================================================
   5 · PRECIO / OFERTA
   ============================================================ */
.dpw-pricing__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,3vw,40px); align-items:stretch;
}

/* tarjeta de plan (oscura, destacada) */
.dpw-plan{
  position:relative; overflow:hidden;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(28,157,215,.20), transparent 55%),
    radial-gradient(80% 110% at 0% 100%, rgba(140,198,63,.16), transparent 55%), var(--ink);
  color:#fff; border-radius:var(--r-xl); padding:clamp(30px,3.4vw,46px);
  box-shadow:var(--shadow-lg);
}
.dpw-plan__flag{
  display:inline-block; font-family:var(--ff-head); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:#0e1320;
  background:linear-gradient(120deg,#a6d957,#5bc4e6); padding:7px 14px; border-radius:var(--r-pill); margin-bottom:20px;
}
.dpw-plan__title{ color:#fff; font-size:clamp(24px,2.4vw,32px); letter-spacing:-.02em }
.dpw-plan__sub{ color:rgba(255,255,255,.72); font-size:15.5px; margin-top:8px }
.dpw-plan__price{ display:flex; align-items:flex-end; gap:16px; margin:26px 0 6px }
.dpw-plan__old{ font-family:var(--ff-head); font-weight:600; font-size:24px; color:rgba(255,255,255,.45); text-decoration:line-through }
.dpw-plan__now{ display:flex; align-items:baseline; gap:8px }
.dpw-plan__now b{ font-family:var(--ff-head); font-weight:700; font-size:clamp(48px,6vw,68px); line-height:.9; letter-spacing:-.03em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }
.dpw-plan__now span{ font-family:var(--ff-head); font-weight:600; font-size:18px; color:rgba(255,255,255,.7) }
.dpw-plan__once{ color:rgba(255,255,255,.55); font-size:13.5px; margin-bottom:26px }
.dpw-plan__list{ display:flex; flex-direction:column; gap:13px; margin-bottom:30px }
.dpw-plan__list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color:rgba(255,255,255,.9) }
.dpw-plan__list svg{ width:20px; height:20px; flex:none; margin-top:1px; color:#a6d957 }
.dpw-plan__hl b{ color:#fff; font-weight:700 }
.dpw-plan__hl{ font-weight:600 }
.dpw-plan__cta{ width:100%; }
.dpw-plan__guarantee{ text-align:center; color:rgba(255,255,255,.55); font-size:13px; margin-top:16px }

/* extras (claro) */
.dpw-extras{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(28px,3.2vw,42px); display:flex; flex-direction:column;
}
.dpw-extras__title{ font-size:clamp(20px,2vw,25px); letter-spacing:-.02em }
.dpw-extras__intro{ color:var(--ink-3); font-size:14.5px; line-height:1.55; margin:12px 0 24px }
.dpw-extras__list{ display:flex; flex-direction:column; gap:18px; margin-bottom:26px }
.dpw-extras__list li{ display:flex; gap:15px; align-items:flex-start }
.dpw-extras__ic{
  width:46px; height:46px; flex:none; border-radius:var(--r-md);
  display:grid; place-items:center; background:var(--grad-soft); color:var(--blue-d);
}
.dpw-extras__ic svg{ width:23px; height:23px }
.dpw-extras__list b{ display:block; font-family:var(--ff-head); font-size:16px; color:var(--ink); margin-bottom:2px }
.dpw-extras__list span{ font-size:13.5px; color:var(--ink-3); line-height:1.5 }
.dpw-extras__cta{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-head); font-weight:600; font-size:14.5px; color:var(--blue-d);
  padding:12px 22px; border-radius:var(--r-pill); border:1.5px solid var(--line-2);
  transition:border-color .25s, color .25s, background .25s, transform .25s;
}
.dpw-extras__cta:hover{ border-color:transparent; color:#fff; background:var(--grad); transform:translateX(2px) }

/* campo opcional del formulario — NO usa .lf-field para que app.js no lo
   valide como obligatorio. Replica el estilo de input de la sección oscura. */
.lf-optional{ margin-top:18px }
.lf-optional input, .lf-optional textarea{
  width:100%; height:58px; padding:0 20px; border:1.5px solid transparent;
  border-radius:14px; background:#fff; color:var(--ink); font-family:var(--ff-body); font-size:15.5px;
  transition:box-shadow .2s, border-color .2s; -webkit-appearance:none; appearance:none;
}
.lf-optional textarea{
  height:auto; min-height:124px; padding:16px 20px; line-height:1.5; resize:vertical;
}
.lf-optional input::placeholder, .lf-optional textarea::placeholder{ color:var(--muted) }
.lf-optional input:focus, .lf-optional textarea:focus{ outline:none; border-color:#5bc4e6; box-shadow:0 0 0 4px rgba(91,196,230,.22) }

/* ============================================================
   7 · FAQ (acordeón nativo)
   ============================================================ */
.dpw-faq{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:14px }
.dpw-faq__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:4px 22px; box-shadow:var(--shadow-sm); transition:box-shadow .25s, border-color .25s;
}
.dpw-faq__item[open]{ box-shadow:var(--shadow-md); border-color:transparent }
.dpw-faq__item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; font-family:var(--ff-head); font-weight:600; font-size:16.5px; color:var(--ink);
}
.dpw-faq__item summary::-webkit-details-marker{ display:none }
.dpw-faq__item summary::after{
  content:"+"; flex:none; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-size:22px; font-weight:400; line-height:1;
  background:var(--grad-soft); color:var(--blue-d); transition:transform .3s, background .3s, color .3s;
}
.dpw-faq__item[open] summary::after{ content:"−"; background:var(--grad); color:#fff; transform:rotate(180deg) }
.dpw-faq__item p{ padding:0 0 20px; color:var(--ink-2); font-size:15px; line-height:1.65; max-width:62ch }

/* ============================================================
   6 · PORTAFOLIO — slider de sitios creados
   ============================================================ */
.dpw-port{ overflow:hidden; padding-bottom:clamp(34px,4vw,60px) }
.dpw-pricing{ padding-top:clamp(34px,4vw,60px) }
.dpw-port__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  max-width:none; margin:0 0 clamp(28px,3.4vw,40px); text-align:left;
}
.dpw-port__head .eyebrow{ margin-bottom:14px }
.dpw-port__head h2{ font-size:clamp(28px,4vw,44px); letter-spacing:-.02em; text-wrap:balance }
.dpw-port__head p{ margin-top:14px; max-width:52ch }
.dpw-port__nav{ display:flex; gap:10px; flex:none }
.dpw-port__btn{
  width:52px; height:52px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:#fff; border:1.5px solid var(--line-2);
  color:var(--ink); transition:background .25s, color .25s, border-color .25s, transform .2s, opacity .25s;
}
.dpw-port__btn svg{ width:22px; height:22px }
.dpw-port__btn:hover{ border-color:transparent; background:var(--grad); color:#fff; transform:translateY(-2px) }
.dpw-port__btn:disabled{ opacity:.32; pointer-events:none }

/* viewport con scroll-snap horizontal */
.dpw-port__viewport{
  display:flex; gap:clamp(18px,2vw,26px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:6px 0 14px;
  /* sangría a los lados para que las tarjetas respiren dentro del .wrap */
  margin-inline:calc(-1 * var(--gut)); padding-inline:var(--gut);
  cursor:grab;
}
.dpw-port__viewport::-webkit-scrollbar{ display:none }
.dpw-port__viewport.is-dragging{ cursor:grabbing; scroll-snap-type:none }
.dpw-port__viewport.is-snapping{ scroll-snap-type:none }
.dpw-port__viewport.is-dragging *{ pointer-events:none }

/* tarjeta = marco de navegador */
.dpw-site{
  flex:0 0 clamp(290px,80vw,420px); scroll-snap-align:start;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm); transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.dpw-site:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent }

.dpw-site__bar{
  display:flex; align-items:center; gap:8px; padding:12px 16px;
  background:var(--bg-soft); border-bottom:1px solid var(--line);
}
.dpw-site__dot{ width:11px; height:11px; border-radius:50%; flex:none }
.dpw-site__dot--1{ background:#ff5f57 } .dpw-site__dot--2{ background:#febc2e } .dpw-site__dot--3{ background:#28c840 }
.dpw-site__url{
  display:inline-flex; align-items:center; gap:8px; margin-left:8px; flex:1; min-width:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:7px 14px; font-family:var(--ff-head); font-size:12.5px; font-weight:500; color:var(--ink-2);
}
.dpw-site__url svg{ width:13px; height:13px; flex:none; color:var(--green-d) }
.dpw-site__url span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.dpw-site__shot{ position:relative; aspect-ratio:1000/672; overflow:hidden; background:var(--grad-soft) }
.dpw-site__shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .7s cubic-bezier(.2,.7,.2,1) }
.dpw-site:hover .dpw-site__shot img{ transform:scale(1.06) }
.dpw-site__sector{
  position:absolute; bottom:14px; right:14px; z-index:1;
  font-family:var(--ff-head); font-weight:600; font-size:12px; letter-spacing:.02em; color:var(--ink);
  background:rgba(255,255,255,.94); padding:6px 13px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm);
}

.dpw-site__body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1 }
.dpw-site__name{ font-size:20px; letter-spacing:-.01em }
.dpw-site__desc{ font-size:14px; color:var(--ink-3); line-height:1.55; margin:9px 0 16px; flex:1 }
.dpw-site__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px }
.dpw-site__chip{
  font-family:var(--ff-head); font-weight:600; font-size:11.5px; color:var(--ink-2);
  background:var(--grad-soft); border:1px solid var(--line); padding:5px 11px; border-radius:var(--r-pill);
}
.dpw-site__visit{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  font-family:var(--ff-head); font-weight:600; font-size:14.5px; color:var(--blue-d);
  padding:11px 20px; border-radius:var(--r-pill); border:1.5px solid var(--line-2);
  transition:border-color .25s, color .25s, background .25s, transform .2s;
}
.dpw-site__visit svg{ width:16px; height:16px; transition:transform .25s }
.dpw-site__visit:hover{ border-color:transparent; color:#fff; background:var(--grad) }
.dpw-site__visit:hover svg{ transform:translate(2px,-2px) }

/* barra de progreso del slider */
.dpw-port__progress{
  position:relative; height:4px; border-radius:4px; background:var(--line);
  margin-top:clamp(20px,2.4vw,30px); overflow:hidden;
}
.dpw-port__bar{
  position:absolute; top:0; left:0; height:100%; border-radius:4px;
  background:var(--grad); width:30%; transition:left .25s ease, width .25s ease;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:760px){
  .dpw-port__head{ flex-direction:column; align-items:flex-start; gap:18px }
  .dpw-port__nav{ display:none }
}
@media (max-width:980px){
  .dpw-hero__grid{ grid-template-columns:1fr; gap:40px }
  .dpw-hero__media{ order:1 }
  .dpw-feats{ grid-template-columns:repeat(2,1fr) }
  .dpw-deliver__grid{ grid-template-columns:1fr; gap:36px }
  .dpw-pricing__grid{ grid-template-columns:1fr }
  .dpw-flow{ grid-template-columns:repeat(2,1fr); gap:40px 24px }
  .dpw-step:not(:last-child)::before{ display:none }
}
@media (max-width:520px){
  .dpw-plan__price{ flex-direction:column; align-items:flex-start; gap:4px }
  .dpw-plan__now{ align-items:baseline; gap:8px; flex-wrap:nowrap }
  .dpw-plan__now b{ font-size:clamp(40px,12vw,54px) }
  .dpw-price-flash{ flex-direction:column; align-items:flex-start; gap:10px }
  .dpw-price-flash__nums{ flex-direction:column; align-items:flex-start; gap:2px }
  .dpw-price-flash__old{ font-size:16px }
  .dpw-price-flash__now{ font-size:30px; white-space:nowrap }
  .dpw-price-flash__tag{ align-self:flex-start }
}
@media (max-width:620px){
  .dpw-bonus{ flex-direction:column; text-align:center }
  .dpw-bonus__tag{ align-self:center }
  .dpw-feats{ grid-template-columns:1fr; max-width:440px; margin-inline:auto }
  .dpw-flow{ grid-template-columns:1fr; max-width:340px; margin-inline:auto; gap:34px }
  .dpw-price-flash{ width:fit-content }
  .dpw-float{ transform:scale(.85) }
  .dpw-float--1{ left:-2% }
  .dpw-float--2{ right:-2% }
}