/* ============================================================
   DISEÑO WEB · diseno-web.html, versión 3 (oct 2026)
   Ilustraciones SVG animadas en el lenguaje de las tarjetas del home
   (.pillus / .il-*): hero "web que vende y que podés operar" y una
   escena por cada tarjeta de "Diseñada para dos personas".

   Las coreografías solo corren con .en-vista (lo pone el JS al entrar
   en pantalla). Sin JS o con movimiento reducido se ve el cuadro final
   de cada historia, que resume la idea.
   ============================================================ */

/* ---------- Hero: texto a la izquierda, escena a la derecha ---------- */
.dw-hero-ilus{display:block;width:100%;max-width:600px;margin:var(--sp-md) auto 0}
.dw-hero-ilus svg{display:block;width:100%;height:auto;overflow:visible}
/* H1 siempre en 2 líneas: ocupa todo el ancho; debajo, bajada + botón a la
   izquierda y la escena a la derecha. Bajada del hero a 1,25 rem. */
.page-hero--v2 .page-hero__title{max-width:none;font-size:clamp(1.3rem,.35rem + 4.3vw,4.4rem);text-wrap:balance}
.page-hero--v2 .page-hero__subtitle{font-size:1.25rem;max-width:46ch}
@media (min-width:1000px){
  .page-hero--v2 .page-hero__container{
    display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto 1fr;column-gap:var(--sp-md);align-items:start;
  }
  /* la bajada va pegada al H1 y el botón enseguida; la escena se centra a la derecha */
  .page-hero--v2 .page-hero__container>.page-hero__subtitle{margin-top:0}
  .page-hero--v2 .page-hero__container>*{grid-column:1}
  .page-hero--v2 .page-hero__container>.page-hero__title{grid-column:1 / -1}
  .page-hero--v2 .page-hero__container>.dw-hero-ilus{grid-column:2;grid-row:2 / span 2;margin:0;align-self:center}
}

.dw-ilus *,.dw-hero-ilus *,.dw-prob-ilus *{transform-box:fill-box;transform-origin:center}
.dw-ilus text,.dw-hero-ilus text,.dw-prob-ilus text{font-family:var(--font-display);font-weight:600;fill:var(--muted)}

/* piezas propias */
.dw-url{fill:rgba(6,5,18,.6)}
.dw-txt{fill:var(--text) !important}
.dw-mint{fill:var(--mint) !important}
.dw-ink{fill:var(--ink) !important}
.dw-lav{fill:var(--lavender) !important}
.dw-cta{fill:var(--mint)}
.dw-panel{fill:rgba(27,24,57,.97);stroke:var(--line-strong)}
.dw-input{fill:#100E24;stroke:var(--line-strong)}
.dw-cover{fill:#100E24}
.dw-caret{stroke:var(--mint);stroke-width:1.4}
.dw-ok rect{fill:rgba(62,230,168,.12);stroke:var(--mint)}
.dw-ok path{fill:none;stroke:var(--mint);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dw-toast rect{fill:var(--surface-2);stroke:rgba(62,230,168,.5)}
.dw-wa{fill:#25D366}
.dw-wa-i{fill:none;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.dw-ring{fill:none;stroke:var(--mint);stroke-width:1.5;opacity:0}
.dw-sombra{fill:rgba(6,5,18,.55)}
.dw-bar{fill:rgba(169,164,248,.35)}
.dw-bar--m{fill:var(--mint);transform-origin:50% 100%}
.dw-chip rect{fill:var(--mint)}
.dw-chip text{fill:var(--ink) !important;font-weight:700}
.dw-track{fill:rgba(169,164,248,.25)}
.dw-track--on{fill:var(--mint)}
.dw-knob,.dw-knob-f{fill:#fff}
.dw-badge rect{fill:var(--mint)}
.dw-banner{fill:rgba(62,230,168,.28)}
.dw-carga{fill:var(--mint);transform-origin:0 50%}
.dw-tel{fill:rgba(19,16,41,.95);stroke:var(--line-strong)}
.dw-row{fill:rgba(6,5,18,.45);stroke:var(--line)}
.dw-row--tu{fill:rgba(62,230,168,.08);stroke:rgba(62,230,168,.6)}
.dw-fav{fill:rgba(169,164,248,.4)}
.dw-fav--tu{fill:url(#dw-grad)}
.dw-lupa{fill:none;stroke:var(--lavender);stroke-width:1.6;stroke-linecap:round}

/* las ilustraciones de las tarjetas usan la caja .pillus del home */
.feature-card .pillus{height:clamp(140px,17vw,190px);margin-bottom:1.25rem}
@media (min-width:1200px){.feature-card .pillus{height:150px}}

/* ============================================================
   HERO · cambiar un precio desde el panel y que entre una consulta
   ============================================================ */
.dwh{--d:10s}
/* cuadro final (sin animación): precio nuevo publicado y consulta recibida */
.dwh .dw-p-old{opacity:0}
.dwh .dw-i-old{opacity:0}
.dwh .dw-cover{transform:translateX(44px)}
.dwh .dw-caret-g{transform:translateX(30px)}
.dwh .dw-caret{opacity:0}
.dwh .dwh-cursor{transform:translate(474px,392px)}

.en-vista .dwh .dwh-cursor{animation:dwh-cursor var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dwh-cursor{
  0%,6%{transform:translate(560px,430px)}
  16%,42%{transform:translate(352px,309px)}
  50%,57%{transform:translate(370px,346px)}
  70%,100%{transform:translate(474px,392px)}
}
.en-vista .dwh .dw-c1{animation:dw-click1 var(--d) ease-out infinite}
@keyframes dw-click1{0%,17%{opacity:0;transform:scale(.3)}19%{opacity:1}27%,100%{opacity:0;transform:scale(1.9)}}
.en-vista .dwh .dw-c2{animation:dw-click2 var(--d) ease-out infinite}
@keyframes dw-click2{0%,52%{opacity:0;transform:scale(.3)}54%{opacity:1}62%,100%{opacity:0;transform:scale(1.9)}}
.en-vista .dwh .dw-input--precio{animation:dwh-foco var(--d) linear infinite}
@keyframes dwh-foco{0%,17%{stroke:var(--line-strong)}19%,46%{stroke:var(--iris)}48%,100%{stroke:var(--line-strong)}}
.en-vista .dwh .dw-i-old{animation:dwh-iold var(--d) linear infinite}
@keyframes dwh-iold{0%,20%{opacity:1}22%,93%{opacity:0}97%,100%{opacity:1}}
.en-vista .dwh .dw-cover{animation:dwh-cover var(--d) steps(4,end) infinite}
@keyframes dwh-cover{0%,24%{transform:translateX(0)}38%,94%{transform:translateX(44px)}95%,100%{transform:translateX(0)}}
.en-vista .dwh .dw-caret-g{animation:dwh-caretg var(--d) steps(4,end) infinite}
@keyframes dwh-caretg{0%,24%{transform:translateX(0)}38%,94%{transform:translateX(30px)}95%,100%{transform:translateX(0)}}
.en-vista .dwh .dw-caret{animation:dwh-caret var(--d) linear infinite}
@keyframes dwh-caret{0%,19%{opacity:0}20%,46%{opacity:1}48%,100%{opacity:0}}
.en-vista .dwh .dw-pub{animation:dwh-pub var(--d) linear infinite}
@keyframes dwh-pub{0%,52%{fill:var(--mint)}54%{fill:#fff}58%,100%{fill:var(--mint)}}
.en-vista .dwh .dw-ok{animation:dwh-ok var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dwh-ok{0%,55%{opacity:0;transform:translateX(-8px)}60%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
.en-vista .dwh .dw-p-old{animation:dwh-pold var(--d) linear infinite}
@keyframes dwh-pold{0%,60%{opacity:1}63%,93%{opacity:0}97%,100%{opacity:1}}
.en-vista .dwh .dw-p-new{animation:dwh-pnew var(--d) linear infinite}
@keyframes dwh-pnew{0%,60%{opacity:0}63%,93%{opacity:1}97%,100%{opacity:0}}
.en-vista .dwh .dw-ring{animation:dwh-ring var(--d) ease-out infinite}
@keyframes dwh-ring{0%,60%{opacity:0;transform:scale(.96)}64%{opacity:1;transform:scale(1.03)}76%,100%{opacity:0;transform:scale(1)}}
.en-vista .dwh .dw-toast{animation:dwh-toast var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dwh-toast{0%,70%{opacity:0;transform:translateY(-10px)}76%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
.en-vista .dwh .dw-p-new,.en-vista .dwh .dw-ring{transform-origin:center}

/* ============================================================
   TARJETA 1 · Diseñada para convertir: un clic y una consulta más
   ============================================================ */
.dwf-conv{--d:6s}
.dwf-conv .dw-n12{opacity:0}
.dwf-conv .dwh-cursor{transform:translate(132px,124px)}
.en-vista .dwf-conv .dwh-cursor{animation:dwc-cursor var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dwc-cursor{0%,6%{transform:translate(170px,140px)}26%,34%{transform:translate(60px,80px)}52%,100%{transform:translate(132px,124px)}}
.en-vista .dwf-conv .dw-c1{animation:dwc-click var(--d) ease-out infinite}
@keyframes dwc-click{0%,29%{opacity:0;transform:scale(.3)}31%{opacity:1}40%,100%{opacity:0;transform:scale(1.9)}}
.en-vista .dwf-conv .dw-cta{animation:dwc-cta var(--d) linear infinite}
@keyframes dwc-cta{0%,29%{fill:var(--mint)}31%{fill:#fff}35%,100%{fill:var(--mint)}}
.en-vista .dwf-conv .dw-n12{animation:dwc-n12 var(--d) linear infinite}
@keyframes dwc-n12{0%,40%{opacity:1}42%,93%{opacity:0}97%,100%{opacity:1}}
.en-vista .dwf-conv .dw-n13{animation:dwc-n13 var(--d) linear infinite}
@keyframes dwc-n13{0%,40%{opacity:0}42%,93%{opacity:1}97%,100%{opacity:0}}
.en-vista .dwf-conv .dw-bar--m{animation:dwc-bar var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dwc-bar{0%,40%{transform:scaleY(0)}54%,93%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
.en-vista .dwf-conv .dw-chip{animation:dwc-chip var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dwc-chip{0%,41%{opacity:0;transform:translateY(5px) scale(.7)}48%,88%{opacity:1;transform:none}94%,100%{opacity:0}}

/* ============================================================
   TARJETA 2 · Autogestionable: un interruptor y la web cambia
   ============================================================ */
.dwf-auto{--d:6.4s}
.dwf-auto .dw-knob{transform:translateX(10px)}
.dwf-auto .dwh-cursor{transform:translate(262px,124px)}
.en-vista .dwf-auto .dwh-cursor{animation:dwa-cursor var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dwa-cursor{0%,6%{transform:translate(290px,140px)}24%,32%{transform:translate(264px,72px)}50%,100%{transform:translate(262px,124px)}}
.en-vista .dwf-auto .dw-c1{animation:dwa-click var(--d) ease-out infinite}
@keyframes dwa-click{0%,27%{opacity:0;transform:scale(.3)}29%{opacity:1}38%,100%{opacity:0;transform:scale(1.9)}}
.en-vista .dwf-auto .dw-knob{animation:dwa-knob var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dwa-knob{0%,28%{transform:none}34%,93%{transform:translateX(10px)}98%,100%{transform:none}}
.en-vista .dwf-auto .dw-track--on{animation:dwa-track var(--d) linear infinite}
@keyframes dwa-track{0%,28%{opacity:0}33%,93%{opacity:1}98%,100%{opacity:0}}
.en-vista .dwf-auto .dw-banner{animation:dwa-banner var(--d) linear infinite}
@keyframes dwa-banner{0%,36%{fill:rgba(108,99,255,.22)}42%,93%{fill:rgba(62,230,168,.28)}98%,100%{fill:rgba(108,99,255,.22)}}
.en-vista .dwf-auto .dw-badge{animation:dwa-badge var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dwa-badge{0%,38%{opacity:0;transform:scale(.6)}44%{opacity:1;transform:scale(1.12)}48%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .dwf-auto .dw-ok{animation:dwa-ok var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dwa-ok{0%,46%{opacity:0;transform:translateY(4px)}52%,93%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ============================================================
   TARJETA 3 · Rápida y responsive: carga al toque, en cualquier pantalla
   ============================================================ */
.dwf-rap{--d:6s}
.dwf-rap .dw-t1,.dwf-rap .dw-t2{opacity:0}
.en-vista .dwf-rap .dw-carga{animation:dwr-carga var(--d) ease-out infinite}
@keyframes dwr-carga{0%,4%{transform:scaleX(0)}20%,93%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
.en-vista .dwf-rap .dw-s1{animation:dwr-s1 var(--d) cubic-bezier(.16,1,.3,1) infinite}
.en-vista .dwf-rap .dw-s2{animation:dwr-s2 var(--d) cubic-bezier(.16,1,.3,1) infinite}
.en-vista .dwf-rap .dw-s3{animation:dwr-s3 var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dwr-s1{0%,7%{opacity:0;transform:translateY(5px)}12%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes dwr-s2{0%,11%{opacity:0;transform:translateY(5px)}16%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes dwr-s3{0%,15%{opacity:0;transform:translateY(5px)}20%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .dwf-rap .dw-t1{animation:dwr-t1 var(--d) linear infinite}
.en-vista .dwf-rap .dw-t2{animation:dwr-t2 var(--d) linear infinite}
.en-vista .dwf-rap .dw-t3{animation:dwr-t3 var(--d) linear infinite}
@keyframes dwr-t1{0%,2%{opacity:0}3%,9%{opacity:1}10%,100%{opacity:0}}
@keyframes dwr-t2{0%,9%{opacity:0}10%,16%{opacity:1}17%,100%{opacity:0}}
@keyframes dwr-t3{0%,16%{opacity:0}17%,93%{opacity:1}98%,100%{opacity:0}}
.en-vista .dwf-rap .dw-m1{animation:dwr-m1 var(--d) cubic-bezier(.16,1,.3,1) infinite}
.en-vista .dwf-rap .dw-m2{animation:dwr-m2 var(--d) cubic-bezier(.16,1,.3,1) infinite}
.en-vista .dwf-rap .dw-m3{animation:dwr-m3 var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dwr-m1{0%,26%{opacity:0;transform:translateX(-8px)}34%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes dwr-m2{0%,32%{opacity:0;transform:translateX(-8px)}40%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes dwr-m3{0%,38%{opacity:0;transform:translateX(-8px)}46%,93%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ============================================================
   TARJETA 4 · Lista para posicionar: tu web sube al primer resultado
   ============================================================ */
.dwf-seo{--d:7s}
.en-vista .dwf-seo .dw-cover{animation:dws-cover var(--d) steps(6,end) infinite}
@keyframes dws-cover{0%,4%{transform:translateX(0)}26%,94%{transform:translateX(108px)}96%,100%{transform:translateX(0)}}
.dwf-seo .dw-cover{transform:translateX(108px)}
.en-vista .dwf-seo .dw-tu{animation:dws-tu var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dws-tu{0%,36%{transform:translateY(48px)}54%,93%{transform:none}98%,100%{transform:translateY(48px)}}
.en-vista .dwf-seo .dw-otro{animation:dws-otro var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dws-otro{0%,36%{transform:translateY(-24px)}54%,93%{transform:none}98%,100%{transform:translateY(-24px)}}
.en-vista .dwf-seo .dw-chip{animation:dws-chip var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dws-chip{0%,54%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.15)}64%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
.en-vista .dwf-seo .dw-row--tu{animation:dws-brillo var(--d) linear infinite}
@keyframes dws-brillo{0%,52%{stroke:rgba(62,230,168,.25)}58%,93%{stroke:rgba(62,230,168,.75)}98%,100%{stroke:rgba(62,230,168,.25)}}


/* ============================================================
   PROBLEMA · tu negocio vende bien, tu web no lo refleja y el
   clic se lo lleva un competidor peor que se ve mejor
   ============================================================ */
.dw-problema{display:grid;gap:var(--sp-md);align-items:center}
.dw-problema .section-lead{max-width:52ch}
@media (min-width:1000px){.dw-problema{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sp-lg)}}
.dw-prob-ilus svg{display:block;width:100%;max-width:620px;height:auto;margin-inline:auto;overflow:visible}

.dw-pb{fill:var(--mint);transform-origin:50% 100%}
.dw-pb1{opacity:.35}.dw-pb2{opacity:.5}.dw-pb3{opacity:.65}.dw-pb4{opacity:.8}
.dw-sube rect{fill:rgba(62,230,168,.12);stroke:rgba(62,230,168,.45)}
.dw-sube text{fill:var(--mint) !important}
.dw-lenta{fill:var(--danger);transform-origin:0 50%;transform:scaleX(.55)}
.dw-spin-p{fill:none;stroke:rgba(255,92,135,.22);stroke-width:2.5}
.dw-spin{fill:none;stroke:var(--danger);stroke-width:2.5;stroke-linecap:round}
.dw-mal rect{fill:rgba(255,92,135,.14);stroke:rgba(255,92,135,.55)}
.dw-mal circle{fill:var(--danger)}
.dw-mal text{fill:var(--danger) !important}
.dw-row--comp{fill:rgba(62,230,168,.07);stroke:rgba(62,230,168,.6)}
.dw-gana{transform:translateY(-5px)}
.dw-pierde rect{fill:var(--danger)}
.dw-pierde text{fill:#fff !important;font-weight:700}
.dwp .dwh-cursor{transform:translate(392px,302px)}

.dwp{--d:9s}
.en-vista .dwp .dw-pb{animation:dwp-b var(--d) cubic-bezier(.16,1,.3,1) infinite}
.en-vista .dwp .dw-pb2{animation-delay:.12s}.en-vista .dwp .dw-pb3{animation-delay:.24s}
.en-vista .dwp .dw-pb4{animation-delay:.36s}.en-vista .dwp .dw-pb5{animation-delay:.48s}
@keyframes dwp-b{0%,3%{transform:scaleY(0)}14%,93%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
.en-vista .dwp .dw-tend{animation:dwp-tend var(--d) ease-in-out infinite}
@keyframes dwp-tend{0%,14%{stroke-dashoffset:1}26%,93%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
.en-vista .dwp .dw-sube{animation:dwp-sube var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dwp-sube{0%,22%{opacity:0;transform:translateY(4px)}28%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .dwp .dw-lenta{animation:dwp-lenta var(--d) ease-out infinite}
@keyframes dwp-lenta{0%{transform:scaleX(0)}24%{transform:scaleX(.42)}50%,93%{transform:scaleX(.55)}98%,100%{transform:scaleX(0)}}
.en-vista .dwp .dw-spin-g{animation:dwp-spin 1.1s linear infinite}
@keyframes dwp-spin{to{transform:rotate(360deg)}}
.en-vista .dwp .dw-mal1{animation:dwp-mal1 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
.en-vista .dwp .dw-mal2{animation:dwp-mal2 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
.en-vista .dwp .dw-mal3{animation:dwp-mal3 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
.en-vista .dwp .dw-mal4{animation:dwp-mal4 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes dwp-mal1{0%,20%{opacity:0;transform:scale(.6)}25%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes dwp-mal2{0%,27%{opacity:0;transform:scale(.6)}32%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes dwp-mal3{0%,34%{opacity:0;transform:scale(.6)}39%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes dwp-mal4{0%,41%{opacity:0;transform:scale(.6)}46%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .dwp .dwh-cursor{animation:dwp-cursor var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dwp-cursor{0%,46%{transform:translate(262px,384px)}56%,61%{transform:translate(132px,300px)}69%,100%{transform:translate(392px,302px)}}
.en-vista .dwp .dw-c1{animation:dwp-click var(--d) ease-out infinite}
@keyframes dwp-click{0%,69%{opacity:0;transform:scale(.3)}71%{opacity:1}79%,100%{opacity:0;transform:scale(1.9)}}
.en-vista .dwp .dw-gana{animation:dwp-gana var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes dwp-gana{0%,69%{transform:none}74%,93%{transform:translateY(-5px)}98%,100%{transform:none}}
.en-vista .dwp .dw-pierde{animation:dwp-pierde var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes dwp-pierde{0%,73%{opacity:0;transform:translateY(5px) scale(.8)}78%,93%{opacity:1;transform:none}98%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .dw-ilus *,.dw-hero-ilus *,.dw-prob-ilus *{animation:none !important}
}

/* 4 tarjetas: 4 columnas o 2×2, nunca 3 + 1 suelta */
.features .features__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1200px){.features .features__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:620px){.features .features__grid{grid-template-columns:1fr}}

/* Montevideo / Punta del Este / todo el país, en formato FAQ */
.geo .dw-faq-head{position:sticky;top:7rem}
.geo .dw-faq-head .section-title{position:static;margin-bottom:var(--sp-sm);font-size:clamp(1.8rem,1.1rem + 1.9vw,3.1rem)}
.geo .dw-faq-head .section-lead{font-size:var(--fs-base)}
@media (max-width:899px){.geo .dw-faq-head{position:static}}

/* título de la FAQ en columna lateral: máximo 3 líneas */
@media (min-width:900px){ .faq2__wrap .section-title{font-size:clamp(2rem,.6rem + 3vw,3.5rem)} }
@media (min-width:900px) and (max-width:1199px){ .faq2__wrap .section-title{font-size:calc(.2rem + 3.2vw)} }

/* GSAP: mientras carga, el hero no se muestra (evita el parpadeo) */
.gsap-pre .page-hero__title,.gsap-pre .page-hero__subtitle,.gsap-pre .page-hero__ctas,.gsap-pre .dw-hero-ilus{visibility:hidden}
/* máscaras de SplitText: un poco de aire abajo para no cortar la g, la y ni la p */
:has(> .g-linea){padding-bottom:.12em;margin-bottom:-.12em}

/* ============================================================
   CIERRE · degradado que se desliza a la derecha + destello cada tanto,
   letras blancas sobre una versión más profunda del degradado
   (blanco ≥ 3,7:1 en todo el recorrido: texto grande AA)
   ============================================================ */
.cierre2{background:#2F7FD8;isolation:isolate}
.cierre2::after{
  content:'';position:absolute;top:0;bottom:0;left:-100%;width:200%;z-index:-2;pointer-events:none;
  /* período = 50 % de la capa: al correrla media capa el loop no se nota */
  background:linear-gradient(90deg,#5B4FE0 0%,#2F7FD8 8%,#0A9672 16%,#0A9672 34%,#2F7FD8 42%,#5B4FE0 50%,#2F7FD8 58%,#0A9672 66%,#0A9672 84%,#2F7FD8 92%,#5B4FE0 100%);
  animation:cierre-flujo 16s linear infinite;
}
@keyframes cierre-flujo{from{transform:translateX(0)}to{transform:translateX(50%)}}
/* el halo pasa a ser un destello que cruza cada ~7 s */
.cierre2::before{
  width:28%;height:auto;top:-30%;bottom:-30%;left:0;translate:none;border-radius:0;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transform:translateX(-160%) skewX(-18deg);
  animation:cierre-destello 7s cubic-bezier(.45,0,.2,1) 1.5s infinite;
}
@keyframes cierre-destello{0%,68%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(520%) skewX(-18deg)}}
.cierre2 .container{z-index:1}
.cierre2__title{color:#fff;text-shadow:0 2px 18px rgba(6,5,18,.22)}
.cierre2__title em{color:#C8FFE9;text-decoration-color:#C8FFE9}
.cierre2__text{color:rgba(255,255,255,.96);text-shadow:0 1px 10px rgba(6,5,18,.2)}
.cierre2 .btn--tinta{box-shadow:0 14px 34px rgba(6,5,18,.35)}
.cierre2 .btn--borde-tinta{color:#fff;border-color:rgba(255,255,255,.75)}
.cierre2 .btn--borde-tinta:hover{border-color:#fff;background:rgba(255,255,255,.14);color:#fff}
.cierre2 .btn:focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){.cierre2::after,.cierre2::before{animation:none}}

/* polvo de partículas del home detrás del hero (lo anima js/v2.js) */
.page-hero--v2 .hero__particles{z-index:0}
.page-hero--v2 .page-hero__container{z-index:1}

/* "Tu web no refleja / lo que vendés" siempre en 2 líneas: el tamaño se
   adapta al ancho de la columna (12,6cqi = "Tu web no refleja" a lo ancho) */
.dw-problema > div:first-child{container-type:inline-size}
.dw-problema .section-title{max-width:none;font-size:min(var(--fs-2xl),12.6cqi)}

/* Hero centrado (diseño web): la escena arriba, un 30% más chica,
   y debajo título, bajada y botón centrados */
.page-hero--v2.page-hero--centro .page-hero__container{display:flex;flex-direction:column;align-items:center;text-align:center}
.page-hero--centro .dw-hero-ilus{order:-1;width:min(405px,70%);max-width:none;margin:0 auto var(--sp-md)}
.page-hero--centro .page-hero__title{margin-inline:auto}
.page-hero--centro .page-hero__subtitle{margin-inline:auto;max-width:52ch}
.page-hero--centro .page-hero__ctas{justify-content:center}
.page-hero--v2.page-hero--centro .page-hero__subtitle{font-size:16px}
/* título del hero centrado a 3rem, siempre en 2 líneas (corte con <br>): --h1-k es el
   largo de la línea más larga en "em", así en celular se achica lo justo para entrar */
.page-hero--v2.page-hero--centro .page-hero__title{font-size:min(3rem,calc((100vw - 40px) / var(--h1-k,13.2)));max-width:none}
/* escena 16:9 (tiendas): un poco más ancha para conservar la misma superficie que la 4:3 */
.page-hero--centro .dw-hero-ilus:has(.ech){width:min(470px,86%)}