/* Plustag design system v2, shared by every page: brand tokens, header, controls, footer and interior components.
   The ribbon (violet to aqua) and the official wave backgrounds carry the brand; home.css adds the portada specifics. */
:root{
  --hp-violet:#7337f5;
  --hp-lavender:#8c66d2;
  --hp-ink:#2e1b60;
  --hp-aqua:#6acbd8;
  --hp-night:#170e35;
  --hp-paper:#f6f4ef;
  --hp-lilac:#ece4fb;
  --hp-text:#4a3f63;
  --hp-line:rgba(46,27,96,.12);
  --hp-ease:cubic-bezier(.16,1,.3,1);
  --hp-lift:0 1px 0 rgba(46,27,96,.05),0 34px 64px -40px rgba(46,27,96,.55);
  --hp-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .1 0 0 0 0 .38 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --hp-ribbon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 420'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c3a2ff'/%3E%3Cstop offset='.45' stop-color='%237337f5'/%3E%3Cstop offset='1' stop-color='%236acbd8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-30 350C150 410 290 380 410 270S620 50 840 60' fill='none' stroke='url%28%23g%29' stroke-width='54' stroke-linecap='round'/%3E%3Cpath d='M-30 328C150 388 290 358 410 248S620 28 840 38' fill='none' stroke='%23fff' stroke-opacity='.28' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  --hp-swoosh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M4 17C90 7 210 4 396 12' fill='none' stroke='%236acbd8' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E");
  --hp-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
}
body{background:var(--hp-paper);color:var(--hp-ink)}
::selection{background:#d9c7ff;color:var(--hp-ink)}
h1,main h2{text-wrap:balance}

/* Header: translucent, with an underline that marks the current section. */
.header{background:rgba(250,249,253,.74);border-bottom-color:rgba(46,27,96,.07);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px)}
#navigation>a[aria-current=page]:not(.button){color:var(--hp-violet)}
@media(min-width:901px){
  #navigation>a:not(.button){position:relative;padding-block:6px}
  #navigation>a:not(.button)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--hp-violet);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--hp-ease)}
  #navigation>a:not(.button):hover::after,#navigation>a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
}

/* Controls. */
.button{border:0;border-radius:999px;background:var(--hp-violet);padding:17px 30px;font-size:15px;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 14px 30px -14px rgba(115,55,245,.85);transition:background .35s var(--hp-ease),transform .35s var(--hp-ease),box-shadow .35s var(--hp-ease)}
.button:hover{background:var(--hp-ink);transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 18px 34px -16px rgba(46,27,96,.9)}
.button:active{transform:translateY(0);background:#24154d;box-shadow:0 6px 16px -10px rgba(46,27,96,.9)}
.button.small{padding:11px 20px;font-size:13px;box-shadow:0 10px 22px -14px rgba(115,55,245,.9)}
main .text-link{border:1px solid rgba(46,27,96,.2);border-radius:999px;padding:12px 22px;font-size:14px;font-weight:500;line-height:1.2;transition:background .3s var(--hp-ease),color .3s var(--hp-ease),border-color .3s var(--hp-ease)}
main .text-link:hover{background:var(--hp-ink);border-color:var(--hp-ink);color:#fff}
.eyebrow{font-size:12px;letter-spacing:.14em;color:var(--hp-ink);gap:12px}
main .section-heading .eyebrow::before{content:'';width:34px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--hp-violet),var(--hp-aqua));flex-shrink:0}

/* Page intro: every interior page opens on the brand wave, like the portada. */
.page-intro,.blog-intro,.legal-page:has(>.button){position:relative;isolation:isolate;overflow:hidden;margin-top:28px;padding:92px 72px 88px;border-radius:40px;background:var(--hp-noise),url('/assets/marca/onda-hero.jpg') 70% 40%/cover no-repeat,#efe9fb}
.page-intro::after,.blog-intro::after{content:'';position:absolute;right:-110px;bottom:-70px;z-index:-1;width:min(620px,52%);aspect-ratio:800/420;background:var(--hp-ribbon) center/contain no-repeat;-webkit-mask:linear-gradient(90deg,transparent 6%,#000 46%);mask:linear-gradient(90deg,transparent 6%,#000 46%);pointer-events:none}
.page-intro .eyebrow,.blog-intro .eyebrow,.article-header .eyebrow,.legal-page>.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:30px;padding:9px 16px 9px 12px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);box-shadow:0 8px 24px -16px rgba(46,27,96,.5);font-size:11px;letter-spacing:.15em}
.page-intro .eyebrow::before,.blog-intro .eyebrow::before,.article-header .eyebrow::before,.legal-page>.eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--hp-violet);flex-shrink:0}
.page-intro h1,.blog-intro h1{max-width:980px;font-size:clamp(44px,6vw,92px);line-height:.98;letter-spacing:-.058em}
.page-intro h1 em,.blog-intro h1 em{color:var(--hp-violet);background:var(--hp-swoosh) 0 96%/100% .2em no-repeat;padding-bottom:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.page-intro .lead,.blog-intro .lead{max-width:640px;margin-top:30px;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--hp-text)}
.blog-intro>p:not(.lead):not(.eyebrow){color:var(--hp-text)}
.inner-v13 .page-intro+.section,.inner-v13 .page-intro+.interior-content,.inner-v13 .page-intro+.case-layout,.inner-v13 .page-intro+.portfolio-collection,.inner-v13 .page-intro+.portfolio-gallery{padding-top:72px}
.portfolio-intro .portfolio-back,.breadcrumbs a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(46,27,96,.1);font-size:12px;font-weight:500;text-decoration:none;transition:background .3s,color .3s}
.portfolio-intro .portfolio-back{margin-bottom:26px}
.portfolio-intro .portfolio-back:hover,.breadcrumbs a:hover{background:var(--hp-ink);color:#fff}
.portfolio-intro .portfolio-index{border-top-color:rgba(46,27,96,.16);color:var(--hp-text);max-width:640px}
.breadcrumbs{align-items:center;padding-block:28px 0;color:var(--hp-text)}

/* Interior content: label on the left, substance on the right. */
.wrap.interior-content{max-width:none;padding-block:24px 40px}
.wrap.interior-content>section:not(.pluggi-feature){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;margin:0;padding-block:64px;border-top:1px solid var(--hp-line)}
.wrap.interior-content>section:first-child{border-top:0;padding-top:24px}
.wrap.interior-content>section:not(.pluggi-feature)>h2{grid-column:1;grid-row:1/span 9;align-self:start;margin:0;font-size:clamp(30px,3vw,46px);line-height:1.04;letter-spacing:-.05em}
.wrap.interior-content>section:not(.pluggi-feature)>:not(h2){grid-column:2}
.wrap.interior-content>section:has(.results-grid,.process-grid,.reasons-grid){display:block}
.wrap.interior-content>section:has(.results-grid,.process-grid,.reasons-grid)>h2{margin-bottom:44px;max-width:760px}
.interior-content p{font-size:18px;line-height:1.7;color:var(--hp-text)}
.interior-content p+p{margin-top:18px}
.interior-content ul{list-style:none;padding:0;margin:0;max-width:none}
.interior-content ul li{position:relative;margin:0;padding:18px 0 18px 48px;border-bottom:1px solid var(--hp-line);font-size:19px;line-height:1.45}
.interior-content ul li:first-child{padding-top:4px}
.interior-content ul li::before{content:'';position:absolute;left:0;top:calc(50% - 15px);width:30px;height:30px;border-radius:50%;background:var(--hp-check) center/16px no-repeat,var(--hp-violet)}
.interior-content ul li:first-child::before{top:calc(50% - 22px)}
.steps-list{list-style:none;counter-reset:step;padding:0;margin:0;max-width:none;display:grid;gap:14px}
.steps-list li{counter-increment:step;position:relative;margin:0;padding:24px 28px 24px 92px;border-radius:22px;background:#fff;box-shadow:var(--hp-lift);font-size:19px;line-height:1.45}
.steps-list li::before{content:counter(step,decimal-leading-zero);position:absolute;left:24px;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--hp-lilac);color:var(--hp-violet);font-size:15px;font-weight:700}
.steps-list li:last-child::before{background:var(--hp-violet);color:#fff}

/* Process (cómo trabajamos): four stages in brand colours. */
.process-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.process-grid li{position:relative;overflow:hidden;min-height:300px;display:flex;flex-direction:column;padding:32px 28px;border:0;border-radius:28px;background:#fff;box-shadow:var(--hp-lift)}
.process-grid li .eyebrow{display:block;margin:0 0 auto;font-size:64px;font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--hp-violet)}
.process-grid h3{margin:40px 0 12px;font-size:28px;letter-spacing:-.04em}
.process-grid li p{font-size:16px;line-height:1.55;color:inherit;opacity:.8}
.process-grid li:nth-child(2){background:var(--hp-violet);color:#fff}
.process-grid li:nth-child(3){background:var(--hp-aqua);color:var(--hp-night)}
.process-grid li:nth-child(4){background:var(--hp-ink) var(--hp-ribbon) right -90px bottom -70px/120% auto no-repeat;color:#fff}
.process-grid li:nth-child(n+2) .eyebrow{color:inherit;opacity:.9}

/* Nosotros: four traits as colour blocks, Pluggi on a lilac panel. */
.interior-content .reasons-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.interior-content .reasons-grid article{min-height:240px;display:flex;flex-direction:column;justify-content:flex-end;padding:30px 28px;border:0;border-radius:28px;background:#fff;box-shadow:var(--hp-lift)}
.interior-content .reasons-grid article:nth-child(1){background:var(--hp-ink);color:#fff}
.interior-content .reasons-grid article:nth-child(2){background:var(--hp-violet);color:#fff}
.interior-content .reasons-grid article:nth-child(3){background:var(--hp-aqua);color:var(--hp-night)}
.interior-content .reasons-grid h3{font-size:28px;line-height:1.08;letter-spacing:-.045em;margin-bottom:12px}
.interior-content .reasons-grid p{font-size:16px;color:inherit;opacity:.82}
.pluggi-feature{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;margin:40px 0;padding:72px;border-radius:40px;background:var(--hp-noise),radial-gradient(60% 80% at 100% 100%,rgba(106,203,216,.45),transparent 70%),var(--hp-lilac)}
.pluggi-feature h2{font-size:clamp(34px,3.6vw,54px);line-height:1.02;letter-spacing:-.05em;margin-bottom:24px}
.pluggi-feature img{max-height:380px;margin-inline:auto;filter:drop-shadow(0 30px 30px rgba(46,27,96,.18))}

/* Result cards (casos and service pages). */
.results-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.interior-content .results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.result-card{position:relative;border:0;border-radius:28px;background:#fff;box-shadow:var(--hp-lift);transition:transform .6s var(--hp-ease),box-shadow .6s var(--hp-ease)}
.result-card::before{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;padding:2px;background:linear-gradient(140deg,var(--hp-violet),var(--hp-aqua));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .45s;pointer-events:none}
.result-card:hover,.result-card:focus-within{transform:translateY(-6px);box-shadow:0 1px 0 rgba(46,27,96,.05),0 50px 80px -44px rgba(46,27,96,.65)}
.result-card:hover::before,.result-card:focus-within::before{opacity:1}
.result-card>a{border-radius:inherit;overflow:hidden}
.result-card>a:focus-visible{outline:3px solid var(--hp-violet);outline-offset:4px}
.result-card img{height:250px;transition:transform 1.1s var(--hp-ease)}
.result-card:hover img{transform:scale(1.06)}
.result-copy{gap:0;padding:26px 28px 24px}
.result-copy .eyebrow{min-height:0;margin:0 0 14px;font-size:11px;letter-spacing:.14em;color:#7a6c98}
.result-copy h3{font-size:clamp(46px,4vw,58px);line-height:.95;letter-spacing:-.055em;color:var(--hp-violet);font-variant-numeric:tabular-nums}
.result-label{margin-top:12px;font-size:17px;font-weight:600;color:var(--hp-ink)}
.result-channel{align-self:flex-start;margin:14px 0 22px;padding:6px 12px;border-radius:14px;background:#f1ecfd;font-size:12px;font-weight:500;color:var(--hp-violet);line-height:1.4}
.result-copy .text-link{position:relative;align-self:stretch;margin-top:auto;padding:16px 0 2px;border:0;border-top:1px solid #ece6f8;border-radius:0;font-size:13px;font-weight:600;background:none}
.result-copy .text-link::after{content:'';position:absolute;right:0;top:10px;width:34px;height:34px;border-radius:50%;background:linear-gradient(currentColor 0 0) center/12px 2px no-repeat,linear-gradient(currentColor 0 0) center/2px 12px no-repeat,#f1ecfd;color:var(--hp-violet);transition:background-color .35s,color .35s,rotate .5s var(--hp-ease)}
.result-copy .text-link:hover{background:none;color:var(--hp-ink)}
.result-card:hover .result-copy .text-link::after{background-color:var(--hp-violet);color:#fff;rotate:90deg}
.results-disclaimer{color:var(--hp-text)}
.case-filters{gap:10px;margin-bottom:44px}
.case-filters a{padding:12px 20px;border:1px solid rgba(46,27,96,.16);background:rgba(255,255,255,.6);font-weight:500;transition:background .3s,color .3s,border-color .3s}
.case-filters a:hover{border-color:var(--hp-ink)}
.case-filters a[aria-current="true"]{background:var(--hp-ink);border-color:var(--hp-ink);color:#fff}

/* Case study page: sticky photo, small labels, big figures. */
.case-layout{gap:72px;padding-top:72px}
.case-photo{top:120px}
.case-photo img{border-radius:32px;box-shadow:0 50px 90px -50px rgba(46,27,96,.7)}
.case-layout .interior-content section{margin:0;padding-block:30px;border-top:1px solid var(--hp-line)}
.case-layout .interior-content section:first-child{border-top:0;padding-top:0}
.case-layout .interior-content h2{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--hp-violet)}
.case-layout .interior-content h2::before{content:'';width:28px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--hp-violet),var(--hp-aqua))}
.case-layout .interior-content section>p{font-size:clamp(19px,1.7vw,24px);line-height:1.45;letter-spacing:-.015em;color:var(--hp-ink)}
.case-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:8px}
.case-stats>div{min-width:0;padding:22px 22px 20px;border-radius:22px;background:#fff;box-shadow:var(--hp-lift)}
.case-stats>div:first-child{background:var(--hp-ink);color:#fff}
.case-stats dt{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:inherit;opacity:.7}
.case-stats dd{margin-top:6px;font-size:clamp(30px,2.6vw,40px);font-weight:700;letter-spacing:-.05em;color:var(--hp-violet);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.case-stats>div:first-child dd{color:var(--hp-aqua)}
.case-layout .interior-content .results-disclaimer{margin-top:28px}
.case-layout .interior-content>.text-link{margin-top:20px}

/* Closing call to action on interior pages and articles. */
.section:has(>.article-cta){padding-block:48px 128px}
.article-cta{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;padding:80px 72px;border-radius:40px;color:var(--hp-ink);background:var(--hp-noise),url('/assets/marca/onda-contacto.jpg') 30% 50%/cover no-repeat,#ece5fb}
.article-cta::after{content:'';position:absolute;right:-120px;top:-40px;z-index:-1;width:min(560px,50%);aspect-ratio:800/420;background:var(--hp-ribbon) center/contain no-repeat;-webkit-mask:linear-gradient(90deg,transparent 8%,#000 50%);mask:linear-gradient(90deg,transparent 8%,#000 50%);pointer-events:none}
.article-cta .eyebrow{margin-bottom:18px}
.article-cta h2{max-width:760px;font-size:clamp(38px,4.6vw,68px);line-height:1;letter-spacing:-.055em;margin:0}
.article-cta p:not(.eyebrow){margin-top:22px;font-size:21px;color:var(--hp-text)}
.article-cta .button{margin-top:36px;color:#fff;font-size:15px}
.article-body .article-cta{padding:48px 40px;border-radius:30px}
.article-body .article-cta::after{display:none}
.article-body .article-cta h2{font-size:clamp(30px,3vw,40px)}

/* Services bento (portada and /servicios/). */
.services-grid{gap:20px}
.services-grid .service-card{min-height:330px;padding:38px 36px 32px;border:0;border-radius:30px;background:#fff;box-shadow:none;transition:transform .55s var(--hp-ease),box-shadow .55s var(--hp-ease)}
.services-grid .service-card::before{display:none}
.services-grid .service-card::after{background:radial-gradient(420px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(255,255,255,.55),transparent 65%);mix-blend-mode:soft-light}
.services-grid .service-card:hover,.services-grid .service-card:focus-within{transform:translateY(-6px);box-shadow:0 34px 60px -34px rgba(46,27,96,.55);border-color:transparent}
.services-grid .service-card:focus-within{outline:3px solid var(--hp-violet);outline-offset:4px}
.services-grid .card-top{position:static;margin:0}
.services-grid .service-icon{position:absolute;right:-6px;bottom:-34px;z-index:0;width:auto;height:auto;display:block;background:none;box-shadow:none;border-radius:0;font-size:210px;line-height:1;color:currentColor;opacity:.12;transform:rotate(-10deg);transition:transform .9s var(--hp-ease),opacity .5s}
.services-grid .service-card:hover .service-icon{transform:rotate(14deg) scale(1.06);opacity:.2;box-shadow:none}
.services-grid .service-card h3{font-size:clamp(28px,2.5vw,38px);line-height:1.04;letter-spacing:-.045em;margin-bottom:16px;max-width:420px;color:inherit}
.services-grid .service-card:hover h3{color:inherit}
.services-grid .service-card>p:not(.benefit){font-size:16px;line-height:1.55;color:inherit;opacity:.78;max-width:440px;margin-bottom:28px}
.services-grid .card-link{position:static;align-self:flex-start;gap:0;margin-top:auto;padding:11px 20px;border:1px solid currentColor;border-radius:999px;font-size:13.5px;color:inherit;transition:background .3s var(--hp-ease),color .3s var(--hp-ease),border-color .3s}
.services-grid .card-link::after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit}
.services-grid .card-link:focus-visible{outline:none}
.services-grid .service-card:hover .card-link{border-color:currentColor;color:inherit}
.services-grid .card-publicidad{background:var(--hp-ink) var(--hp-ribbon) right -70px bottom -96px/78% auto no-repeat!important;color:#fff}
.services-grid .card-publicidad .service-icon{display:none}
.services-grid .card-publicidad:hover .card-link{background:#fff;color:var(--hp-ink)!important;border-color:#fff!important}
.services-grid .card-consultoria{background:var(--hp-violet)!important;color:#fff}
.services-grid .card-consultoria:hover .card-link{background:#fff;color:var(--hp-violet)!important;border-color:#fff!important}
.services-grid .card-diseno{background:#e8e0fa!important;color:var(--hp-ink)}
.services-grid .card-contenido{background:var(--hp-aqua)!important;color:var(--hp-night)}
.services-grid .card-web{background:#fff!important;color:var(--hp-ink);box-shadow:inset 0 0 0 1px rgba(46,27,96,.1)!important}
.services-grid .card-web:hover{box-shadow:inset 0 0 0 1px rgba(46,27,96,.1),0 34px 60px -34px rgba(46,27,96,.55)!important}
.services-grid :is(.card-diseno,.card-contenido,.card-web):hover .card-link{background:var(--hp-ink);color:#fff!important;border-color:var(--hp-ink)!important}
.services-grid .card-contenido>p:not(.benefit){opacity:.86}

/* Portfolio folders, galleries and closing. */
.portfolio-grid{gap:28px}
.portfolio-deck{height:430px;border-radius:26px;border:0;transition:transform .6s var(--hp-ease),box-shadow .6s var(--hp-ease)}
.portfolio-card:hover .portfolio-deck{transform:translateY(-6px);box-shadow:0 34px 60px -36px rgba(46,27,96,.55)}
.portfolio-sheet{top:74px;height:300px;border-radius:6px}
.portfolio-tab{top:22px;left:24px;font-weight:600;letter-spacing:.12em}
.portfolio-open{margin:0 12px 12px;left:0;right:0;padding:13px 18px;border-radius:999px;border:0;background:rgba(255,255,255,.92);font-weight:500;font-size:13px;transition:background .3s,color .3s}
.portfolio-card:hover .portfolio-open{background:var(--hp-ink);color:#fff}
.portfolio-caption{padding-top:24px}
.portfolio-caption h3{font-size:32px;letter-spacing:-.045em}
.portfolio-caption p{font-size:14px}
.portfolio-collection .portfolio-deck{height:470px}
.portfolio-collection .portfolio-sheet{height:330px}
.portfolio-gallery{gap:24px}
.portfolio-piece a{border-radius:22px;background:#ebe5f5;box-shadow:var(--hp-lift);transition:transform .6s var(--hp-ease),box-shadow .6s var(--hp-ease)}
.portfolio-piece a:hover{transform:translateY(-6px);box-shadow:0 50px 80px -44px rgba(46,27,96,.65)}
.portfolio-piece a:hover img{filter:none}
.portfolio-piece figcaption{padding:14px 4px;font-size:12px;color:var(--hp-text)}
.portfolio-next{border-top-color:var(--hp-line);padding-block:44px 40px}
.portfolio-next>span{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hp-text)}
.portfolio-next>a{font-size:clamp(40px,6vw,88px);letter-spacing:-.055em;line-height:1;transition:color .35s}
.portfolio-next>a:hover{color:var(--hp-violet)}
.portfolio-next>a>span{display:grid;place-items:center;width:.9em;height:.9em;border-radius:50%;background:var(--hp-violet);color:#fff;font-size:.6em;transition:rotate .6s var(--hp-ease)}
.portfolio-next>a:hover>span{rotate:90deg}
.portfolio-cta{position:relative;isolation:isolate;overflow:hidden;margin-block:40px 128px;padding:80px 72px;border:0;border-radius:40px;text-align:left;background:var(--hp-noise),url('/assets/marca/onda-contacto.jpg') 30% 50%/cover no-repeat,#ece5fb}
.portfolio-cta::after{content:'';position:absolute;right:-120px;top:-40px;z-index:-1;width:min(560px,50%);aspect-ratio:800/420;background:var(--hp-ribbon) center/contain no-repeat;-webkit-mask:linear-gradient(90deg,transparent 8%,#000 50%);mask:linear-gradient(90deg,transparent 8%,#000 50%)}
.portfolio-cta h2{max-width:760px;font-size:clamp(38px,4.6vw,68px);line-height:1;letter-spacing:-.055em;margin-bottom:36px}

/* Blog. */
.blog-intro{margin-top:8px;max-width:none}
.blog-intro>.text-link{background:rgba(255,255,255,.6)}
.blog-list{border-top:0;padding-top:88px}
.blog-list .section-heading h2{font-size:clamp(34px,4vw,58px);line-height:1;letter-spacing:-.05em}
.blog-list .section-heading>p{color:var(--hp-text)}
.blog-grid{gap:24px}
.blog-card{position:relative;border:0;border-radius:28px;background:#fff;box-shadow:var(--hp-lift);transition:transform .6s var(--hp-ease),box-shadow .6s var(--hp-ease)}
.blog-card:hover,.blog-card:focus-within{transform:translateY(-6px);box-shadow:0 1px 0 rgba(46,27,96,.05),0 50px 80px -44px rgba(46,27,96,.6)}
.blog-card img{transition:transform 1.1s var(--hp-ease)}
.blog-card:hover img{transform:scale(1.05)}
.blog-card-copy{padding:26px 28px 28px}
.blog-category{display:inline-flex;gap:6px;padding:6px 12px;border-radius:999px;background:#f1ecfd;color:var(--hp-violet);font-size:12px}
.blog-card h3{font-size:24px;letter-spacing:-.035em;line-height:1.15}
.blog-card h3 a:hover{text-decoration:none;color:var(--hp-violet)}
.blog-card-copy>p:not(.blog-category){color:var(--hp-text);font-size:15px;line-height:1.6}
.article-header{margin-top:40px}
.article-header h1{font-size:clamp(38px,5vw,72px);line-height:1.02;letter-spacing:-.055em}
.article-meta{color:var(--hp-text)}
.article-cover{border-radius:32px;box-shadow:0 50px 90px -50px rgba(46,27,96,.6)}
.article-toc{top:120px;padding:24px;border:0;border-radius:24px;background:#fff;box-shadow:var(--hp-lift)}
.article-toc>p{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hp-violet);margin-bottom:14px}
.article-toc a{color:var(--hp-text);transition:color .25s}
.article-toc a:hover{color:var(--hp-violet);text-decoration:none}
.article-body{color:#33284d}
.article-body h2{font-size:clamp(28px,2.6vw,36px);letter-spacing:-.04em;color:var(--hp-ink)}
.article-body a{color:var(--hp-violet);text-decoration-thickness:1.5px}
.article-body .article-answer{border:0;border-radius:24px;padding:28px 30px 28px 36px;background:var(--hp-lilac);position:relative;overflow:hidden}
.article-body .article-answer::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--hp-violet),var(--hp-aqua))}
.table-scroll{border:0;border-radius:20px;background:#fff;box-shadow:var(--hp-lift)}
.table-scroll th{background:var(--hp-ink)}
.table-scroll tbody tr:nth-child(even){background:#f7f4fd}
.related{border-top:0}

/* Legal pages and the short confirmation pages. */
main.legal-page{padding-block:88px 128px}
.legal-page h1{font-size:clamp(44px,5.4vw,76px);line-height:1;letter-spacing:-.055em}
.legal-page h2{margin-top:44px;padding-top:36px;border-top:1px solid var(--hp-line);font-size:clamp(24px,2.2vw,30px);letter-spacing:-.035em}
.legal-page p,.legal-page li{font-size:17px;line-height:1.75;color:var(--hp-text)}
.legal-page a:not(.button):not(.text-link){color:var(--hp-violet)}
main.legal-page:has(>.button){max-width:none;min-height:0;margin-block:28px 128px;padding:110px 72px;background:var(--hp-noise),url('/assets/mascota-marketing.webp') right 4% center/min(40%,460px) auto no-repeat,url('/assets/marca/onda-hero.jpg') 70% 40%/cover no-repeat,#efe9fb}
.legal-page:has(>.button)>:not(.eyebrow){max-width:620px}
.legal-page:has(>.button) h1{font-size:clamp(44px,6vw,92px)}
.legal-page:has(>.button)>p:not(.eyebrow){font-size:20px}
.legal-page:has(>.button)>.button{margin:40px 14px 0 0}
.legal-page:has(>.button)>.text-link{margin-top:40px;background:rgba(255,255,255,.6)}

/* Footer: deep brand night with the ribbon. */
footer{position:relative;isolation:isolate;overflow:hidden;background:var(--hp-noise),radial-gradient(50% 70% at 0% 100%,rgba(115,55,245,.38),transparent 70%),var(--hp-night)}
footer::before{content:'';position:absolute;top:-30px;right:-140px;z-index:-1;width:min(700px,60vw);aspect-ratio:800/420;background:var(--hp-ribbon) center/contain no-repeat;opacity:.55;-webkit-mask:linear-gradient(90deg,transparent 10%,#000 55%);mask:linear-gradient(90deg,transparent 10%,#000 55%);pointer-events:none}
footer .footer-top>div:first-child>p{font-size:clamp(24px,2.3vw,32px);line-height:1.2;letter-spacing:-.035em;color:#fff}
footer .footer-top .footer-description{color:#cfc4e8}
.footer-label{color:var(--hp-aqua)}
footer a{transition:color .25s}
.footer-top a:hover{color:var(--hp-aqua)}
.footer-bottom{border-top-color:rgba(255,255,255,.14)}

/* Entrance and reduced motion. */
@keyframes hp-rise{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference){
  .page-intro>*,.blog-intro>*,.article-header>*,.legal-page:has(>.button)>*{animation:hp-rise .9s var(--hp-ease) both}
  .page-intro>:nth-child(2),.blog-intro>:nth-child(2),.article-header>:nth-child(2),.legal-page:has(>.button)>:nth-child(2){animation-delay:.08s}
  .page-intro>:nth-child(3),.blog-intro>:nth-child(3),.article-header>:nth-child(3),.legal-page:has(>.button)>:nth-child(3){animation-delay:.16s}
  .page-intro>:nth-child(n+4),.blog-intro>:nth-child(n+4),.article-header>:nth-child(n+4),.legal-page:has(>.button)>:nth-child(n+4){animation-delay:.24s}
}
@media(prefers-reduced-motion:reduce){
  .services-grid .service-card:hover,.services-grid .service-card:focus-within,.portfolio-card:hover .portfolio-deck,.result-card:hover,.result-card:focus-within,.blog-card:hover,.portfolio-piece a:hover{transform:none}
  .result-card img,.blog-card img,.portfolio-next>a>span{transition:none}
}

/* Responsive. */
@media(max-width:1100px){
  .services-grid .service-card{padding:32px 28px 28px}
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .interior-content .reasons-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-intro,.blog-intro,.article-cta,.portfolio-cta,main.legal-page:has(>.button){padding-inline:48px}
}
@media(max-width:900px){
  .services-grid .service-card:nth-child(n){grid-column:span 6}
  .services-grid .service-card:nth-child(1),.services-grid .service-card:nth-child(5){grid-column:span 12}
  .wrap.interior-content>section:not(.pluggi-feature){display:block}
  .wrap.interior-content>section:not(.pluggi-feature)>h2{margin-bottom:28px}
  .pluggi-feature{grid-template-columns:1fr;padding:48px}
  .case-layout{gap:40px}
  main.legal-page:has(>.button){background-size:auto,min(46%,300px) auto,cover,auto;background-position:0 0,right 4% bottom 24px,70% 40%,0 0;padding-bottom:260px}
}
@media(max-width:650px){
  .page-intro,.blog-intro,main.legal-page:has(>.button){margin-top:14px;padding:48px 24px 52px;border-radius:28px}
  .page-intro h1,.blog-intro h1{font-size:clamp(38px,10.4vw,56px)}
  .page-intro .eyebrow,.blog-intro .eyebrow,.article-header .eyebrow,.legal-page>.eyebrow{font-size:9.5px;letter-spacing:.12em;margin-bottom:24px}
  .page-intro::after,.blog-intro::after{width:90%;right:-40%;bottom:-40px;opacity:.7}
  .inner-v13 .page-intro+.section,.inner-v13 .page-intro+.interior-content,.inner-v13 .page-intro+.case-layout,.inner-v13 .page-intro+.portfolio-collection,.inner-v13 .page-intro+.portfolio-gallery{padding-top:40px}
  .wrap.interior-content>section:not(.pluggi-feature){padding-block:44px}
  .interior-content p{font-size:17px}
  .interior-content ul li{font-size:17px;padding-left:44px}
  .steps-list li{padding:20px 20px 20px 80px;font-size:17px}
  .steps-list li::before{left:18px;width:44px;height:44px}
  .process-grid,.interior-content .reasons-grid,.results-grid,.interior-content .results-grid{grid-template-columns:1fr}
  .process-grid li{min-height:0}
  .process-grid li .eyebrow{font-size:48px}
  .interior-content .reasons-grid article{min-height:0}
  .pluggi-feature{padding:36px 24px;border-radius:28px;gap:24px}
  .result-card>a{display:flex;flex-direction:column}
  .result-card img{height:220px;min-height:0}
  .result-copy{padding:22px 22px 20px}
  .result-copy h3{font-size:48px}
  .case-layout{padding-top:40px}
  .case-photo img{max-height:340px}
  .case-stats{grid-template-columns:1fr 1fr}
  .case-stats dd{font-size:28px}
  .section:has(>.article-cta){padding-block:24px 88px}
  .article-cta,.portfolio-cta{padding:48px 24px;border-radius:28px}
  .article-cta p:not(.eyebrow){font-size:18px}
  .article-cta .button,.portfolio-cta .button{width:100%;justify-content:center}
  .services-grid{gap:14px}
  .services-grid .service-card{min-height:0;padding:30px 24px 26px;border-radius:24px}
  .services-grid .service-card h3{font-size:30px}
  .services-grid .service-card>p:not(.benefit){font-size:15.5px;margin-bottom:24px}
  .services-grid .service-icon{font-size:150px;bottom:-26px}
  .services-grid .card-publicidad{background-size:120% auto!important;background-position:left 10% bottom -30px!important}
  .portfolio-deck,.portfolio-collection .portfolio-deck{height:410px}
  .portfolio-next>a{font-size:44px}
  .blog-list{padding-top:56px}
  .blog-card-copy{padding:22px}
  .article-cover{border-radius:20px}
  main.legal-page{padding-block:56px 88px}
  .legal-page:has(>.button)>.button,.legal-page:has(>.button)>.text-link{width:100%;justify-content:center;margin-right:0}
  main.legal-page:has(>.button){padding-bottom:240px}
  footer::before{width:120vw;right:-50vw;opacity:.35}
}