/* Rafael's approved traffic mockup. All rules are isolated to Traffic. */
@font-face{font-family:TrafficCaveat;src:url('../fonts/caveat.woff2') format('woff2'),url('../fonts/caveat.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
.service-trafego-pago{--traffic-gutter:clamp(24px,4.6vw,120px)}
.service-trafego-pago .traffic-context-label{display:flex;align-items:center;gap:12px;margin:0 0 10px;line-height:1;letter-spacing:.2em;font-size:10px}
.service-trafego-pago .traffic-context-label:after{display:none}
.service-trafego-pago .traffic-context-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#ffc100;color:#080808;flex-shrink:0}
.service-trafego-pago .service-section-2 .traffic-context-icon{border-radius:50%}
.service-trafego-pago .traffic-context-icon .icon,.service-trafego-pago .traffic-context-icon>svg{width:22px;height:22px}
.service-trafego-pago .traffic-channel-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.service-trafego-pago .traffic-channel-card{padding:0;overflow:hidden;background:#101010;border:1px solid #454545;border-radius:12px;display:flex;flex-direction:column}
.service-trafego-pago .traffic-channel-card .channel-art{width:100%;margin:0;aspect-ratio:2.75;border-radius:0;overflow:hidden}
.service-trafego-pago .traffic-channel-card .channel-art img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center 15%;border-radius:0}
.service-trafego-pago .traffic-channel-copy{padding:12px 14px 16px}
.service-trafego-pago .traffic-channel-heading{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center}
.service-trafego-pago .traffic-channel-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:#ffc100}
.service-trafego-pago .traffic-channel-icon>img,.service-trafego-pago .traffic-channel-icon>svg{display:block;width:100%;height:100%;object-fit:contain}
.service-trafego-pago .traffic-channel-heading h3{font-size:15px;line-height:1.18;letter-spacing:-.015em;text-transform:uppercase;margin:0 0 2px}
.service-trafego-pago .traffic-channel-heading .traffic-channel-role{color:#ffc100;font-size:13px;line-height:1.3;margin:0}
.service-trafego-pago .traffic-channel-description{font-size:14px;line-height:1.4;margin:12px 0 0;color:#eee}
.service-trafego-pago .traffic-channels-heading>.eyebrow:after{display:none}
@media(prefers-reduced-motion:no-preference){.service-trafego-pago .traffic-remarketing-symbol{animation:traffic-remarketing-cycle 12s linear infinite}}
@keyframes traffic-remarketing-cycle{to{transform:rotate(360deg)}}
@media(min-width:1024px){
 .service-trafego-pago .traffic-context-pair{max-width:none;width:100%;padding:0!important;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));background:#fff}
 .service-trafego-pago .traffic-context-pair .layout-split{padding:clamp(24px,3vw,60px)!important;min-height:clamp(242px,17vw,430px);border-radius:12px;background:#fafaf8}
 .service-trafego-pago .traffic-context-pair .layout-split.dark{background:#080808}
 .service-trafego-pago .traffic-context-pair .layout-split>.page-split{display:block;min-height:0;width:100%;max-width:none}
 .service-trafego-pago .traffic-context-pair .layout-split .page-copy{width:51%!important;max-width:51%!important;padding:0!important}
 .service-trafego-pago .traffic-context-pair .layout-split h2{font-size:clamp(23px,1.85vw,46px);line-height:1.1;margin:0;letter-spacing:-.035em}
 .service-trafego-pago .traffic-context-pair .layout-split .page-lead{font-size:clamp(12.5px,.95vw,20px);line-height:1.4;margin:12px 0 0;max-width:none}
 .service-trafego-pago .traffic-context-pair .layout-split .page-visual{width:63%!important;height:100%!important;margin:0!important;align-items:center}
 .service-trafego-pago .traffic-context-pair .layout-split .page-visual img{height:100%;width:100%;object-fit:cover;object-position:right top;mask-image:linear-gradient(90deg,transparent,#000 23%,#000);-webkit-mask-image:linear-gradient(90deg,transparent,#000 23%,#000)}
 .service-trafego-pago .traffic-context-pair .layout-split:after{background:linear-gradient(90deg,#fafaf8 15%,#fafaf8f5 38%,#fafaf87a 52%,transparent 61%)}
 .service-trafego-pago .traffic-context-pair .layout-split.dark:after{background:linear-gradient(90deg,#080808 15%,#080808f5 38%,#08080872 52%,transparent 61%)}
 .service-trafego-pago .service-section-3{padding:30px 0 36px;position:relative;overflow:visible;isolation:isolate}
 .service-trafego-pago .service-section-3>.container{width:calc(100% - 2 * var(--traffic-gutter));max-width:none}
 .service-trafego-pago .service-section-3 .page-copy{padding:0}
 .service-trafego-pago .traffic-channels-heading{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(0,1fr);gap:0 36px;align-items:center}
 .service-trafego-pago .traffic-channels-heading>.eyebrow{grid-column:1;margin:0 0 8px;font-size:10px}
 .service-trafego-pago .traffic-channels-heading>h2{grid-column:1;font-size:clamp(27px,2.45vw,52px);line-height:1.15;margin:0;max-width:none}
 .service-trafego-pago .traffic-channels-heading>.page-lead{grid-column:2;grid-row:1 / span 2;font-size:clamp(14px,1vw,20px);line-height:1.4;margin:0}
 .service-trafego-pago .traffic-channel-cards{margin-top:22px}
 .service-trafego-pago .service-section-4{--traffic-scene-width:66vw;--traffic-scene-overhang:3.7145vw;position:relative;isolation:auto;overflow:visible;padding:0;min-height:clamp(300px,24.3vw,680px)}
 .service-trafego-pago .service-section-4>.page-split{display:block;min-height:clamp(300px,24.3vw,680px);position:static;max-width:none;width:calc(100% - 2 * var(--traffic-gutter))}
 .service-trafego-pago .service-section-4 .page-copy{width:32%;max-width:32%;padding:clamp(24px,2.1vw,54px) 0;position:relative;z-index:2}
 .service-trafego-pago .service-section-4 .page-copy>.eyebrow{display:none}
 .service-trafego-pago .service-section-4 .page-copy>h2{font-size:clamp(25px,2.1vw,49px);line-height:1.1;letter-spacing:-.035em}
 .service-trafego-pago .service-section-4 .page-copy>.page-lead{font-size:clamp(14px,1vw,22px);line-height:1.45;margin:16px 0 0;max-width:90%}
 .service-trafego-pago .service-section-4 .page-visual{position:absolute!important;inset:calc(-1 * var(--traffic-scene-overhang)) 0 0!important;width:100%!important;height:calc(100% + var(--traffic-scene-overhang))!important;display:block;overflow:hidden;z-index:1;aspect-ratio:auto}
 .service-trafego-pago .service-section-4 .page-visual img{display:block;width:var(--traffic-scene-width);height:auto;margin-left:auto;aspect-ratio:1672/941;object-fit:contain;mask-image:linear-gradient(90deg,transparent,#000 8%,#000),url('../images/trafego-estrategia-contour-mask.png'),linear-gradient(180deg,transparent 10%,#000 10%);mask-size:100% 100%;mask-repeat:no-repeat;mask-composite:intersect,add;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000),url('../images/trafego-estrategia-contour-mask.png'),linear-gradient(180deg,transparent 10%,#000 10%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-in,source-over}
 .service-trafego-pago .traffic-channel-heading{grid-template-columns:clamp(36px,2.5vw,56px) minmax(0,1fr)}
 .service-trafego-pago .traffic-channel-icon{width:clamp(36px,2.5vw,56px);height:clamp(36px,2.5vw,56px)}
 .service-trafego-pago .traffic-channel-heading h3{font-size:clamp(15px,.95vw,22px)}
 .service-trafego-pago .traffic-channel-heading .traffic-channel-role{font-size:clamp(13px,.9vw,19px)}
 .service-trafego-pago .traffic-channel-description{font-size:clamp(14px,1vw,20px)}
}
@media(min-width:1024px) and (max-width:1199px){
 .service-trafego-pago .traffic-context-pair{grid-template-columns:1fr}
 .service-trafego-pago .traffic-context-pair .layout-split{min-height:235px}
 .service-trafego-pago .traffic-context-pair .layout-split .page-copy{width:49%!important;max-width:49%!important}
 .service-trafego-pago .traffic-context-pair .layout-split .page-visual{width:54%!important}
 .service-trafego-pago .traffic-channel-heading h3{font-size:13px}
 .service-trafego-pago .traffic-channel-role,.service-trafego-pago .traffic-channel-description{font-size:12px}
 .service-trafego-pago .traffic-channels-heading>h2{font-size:27px}
 .service-trafego-pago .traffic-channels-heading>.page-lead{font-size:13px}
 .service-trafego-pago .service-section-4 .page-copy{width:35%;max-width:35%}
 .service-trafego-pago .service-section-4 .page-copy>h2{font-size:26px}
}
@media(max-width:1023px){
 .service-trafego-pago .service-section-3 .page-copy{padding:0}
 .service-trafego-pago .traffic-channels-heading>.page-lead{margin:14px 0 0}
 .service-trafego-pago .traffic-channel-card .channel-art{aspect-ratio:2.5}
 .service-trafego-pago .traffic-channel-cards{grid-template-columns:1fr}
 .service-trafego-pago .traffic-channel-copy{padding:16px 18px 20px}
 .service-trafego-pago .traffic-channel-heading h3{font-size:16px}
 .service-trafego-pago .traffic-channel-description{font-size:15px}
}
@media(min-width:768px) and (max-width:1023px){
 .service-trafego-pago .traffic-context-pair{display:grid;gap:16px}
 .service-trafego-pago .traffic-context-pair .layout-split{padding:24px;min-height:235px}
 .service-trafego-pago .traffic-context-pair .layout-split>.page-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center}
 .service-trafego-pago .traffic-context-pair .page-copy{width:100%;max-width:100%;padding:0}
 .service-trafego-pago .traffic-context-pair .page-visual{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:auto;margin:0;grid-column:2;grid-row:1}
 .service-trafego-pago .traffic-context-pair .page-visual img{width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain}
 .service-trafego-pago .traffic-context-pair h2{font-size:24px}
 .service-trafego-pago .traffic-context-pair .page-lead{font-size:13px;line-height:1.4;margin:12px 0 0}
 .service-trafego-pago .traffic-channel-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
 .service-trafego-pago .traffic-channel-copy{padding:12px}
 .service-trafego-pago .traffic-channel-heading{grid-template-columns:28px minmax(0,1fr);gap:6px}
 .service-trafego-pago .traffic-channel-icon{width:28px;height:28px}
 .service-trafego-pago .traffic-channel-heading h3{font-size:13px}
 .service-trafego-pago .traffic-channel-heading .traffic-channel-role{font-size:12px}
 .service-trafego-pago .traffic-channel-description{font-size:13px}
 .service-trafego-pago .service-section-4 .page-visual{width:100vw!important;max-width:none;margin-inline:calc((100% - 100vw)/2)!important;max-height:none}
 .service-trafego-pago .service-section-4 .page-visual img{width:100%;height:auto;max-height:none}
}

/* Compact horizontal journeys on the same pale background as the mockup. */
.service-trafego-pago .service-section-5,.service-trafego-pago .service-section-6{background:#fafaf8 url('../images/traffic-process-paper.svg') center/cover;padding:18px 0}
.service-trafego-pago .service-section-6{border-top:1px solid #eeece5}
.service-trafego-pago .service-section-5>.container,.service-trafego-pago .service-section-6>.container{width:calc(100% - 2 * var(--traffic-gutter));max-width:none}
.service-trafego-pago .service-section-5 .page-copy,.service-trafego-pago .service-section-6 .page-copy{padding:0}
.service-trafego-pago .traffic-process-heading>.eyebrow{margin:0 0 9px}
.service-trafego-pago .traffic-process-heading>h2{font-size:clamp(24px,2.05vw,42px);line-height:1.14;max-width:none;margin:0}
.service-trafego-pago .traffic-process-heading>.page-lead{font-size:clamp(13px,1vw,19px);line-height:1.4;margin:0}
.service-trafego-pago .traffic-process-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:16px 0 0}
.service-trafego-pago .traffic-process-step{position:relative;display:grid;grid-template-columns:clamp(42px,3.2vw,64px) minmax(0,1fr);gap:10px;align-items:start;padding:12px;background:#ffffffc7;border-color:#eeece6;border-radius:12px;min-height:0}
.service-trafego-pago .traffic-process-step:after{display:none}
.service-trafego-pago .traffic-process-step .page-card-icon{width:clamp(42px,3.2vw,64px);height:clamp(42px,3.2vw,64px);border-radius:18px;background:#ffe7a4}
.service-trafego-pago .traffic-process-step .page-card-icon .icon{width:65%;height:65%}
.service-trafego-pago .traffic-process-copy{min-width:0}
.service-trafego-pago .traffic-process-step .step-number{display:block;position:static;float:none;margin:0 0 1px;color:#54545a;font-size:clamp(11px,.8vw,16px);line-height:1.2}
.service-trafego-pago .traffic-process-step h3{font-size:clamp(12px,.95vw,20px);line-height:1.2;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 4px}
.service-trafego-pago .traffic-process-step p{font-size:clamp(12px,.9vw,18px);line-height:1.35;margin:0;color:#686871}
.service-trafego-pago .traffic-step-arrow{position:absolute;right:-19px;top:50%;transform:translateY(-50%);width:19px;height:19px;z-index:2;color:#343438;pointer-events:none}
.service-trafego-pago .traffic-step-arrow .icon{width:19px;height:19px}
.service-trafego-pago .traffic-journey-note{font-family:TrafficCaveat,cursive;font-weight:500;font-size:clamp(20px,1.7vw,34px);line-height:1.05;color:#292929;transform:rotate(-7deg);margin:0}
.service-trafego-pago .traffic-journey-note svg{display:block;width:85%;height:auto;max-height:50px;margin:8px 0 0 auto;color:#eab000}
/* One continuous photograph across the final call to action. */
.service-trafego-pago .page-cta.traffic-final-cta:has(.cta-art){position:relative;display:flex;align-items:center;isolation:isolate;background:#080808;min-height:clamp(260px,20vw,440px);padding:26px 0;overflow:hidden}
.service-trafego-pago .traffic-final-cta>.cta-art{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;z-index:0;display:block}
.service-trafego-pago .traffic-final-cta>.cta-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 63%;mask-image:none;-webkit-mask-image:none}
.service-trafego-pago .page-cta.traffic-final-cta:has(.cta-art):after{content:'';display:block;position:absolute;inset:0;background:linear-gradient(90deg,#080808d9 0%,#0808088c 41%,#08080818 65%,#08080815);z-index:1;pointer-events:none}
.service-trafego-pago .page-cta.traffic-final-cta:has(.cta-art)>.container{position:relative;z-index:2;display:block;width:calc(100% - 2 * var(--traffic-gutter));max-width:none;margin-inline:auto;padding:0}
.service-trafego-pago .traffic-final-copy{width:55%;max-width:none}
.service-trafego-pago .traffic-final-copy h2{font-size:clamp(28px,2.4vw,48px);line-height:1.08;max-width:none;margin:0}
.service-trafego-pago .traffic-final-cta .traffic-final-copy>p{max-width:90%;font-size:clamp(14px,1.03vw,19px);line-height:1.4;margin:12px 0 0;color:#f0f0f0}
.service-trafego-pago .traffic-final-copy .button-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:16px 0 0}
.service-trafego-pago .traffic-final-cta .button{position:static;transform:none;max-width:none;margin:0;padding:12px 18px;min-height:46px;font-size:clamp(12px,.9vw,16px);gap:12px;white-space:nowrap;flex-shrink:1}
.service-trafego-pago .traffic-final-cta .button-outline{border:1px solid #ffc100;background:#0808089c;color:#fff}
.service-trafego-pago .traffic-final-cta .traffic-final-note{position:absolute;right:0;top:50%;width:14%;max-width:none;margin:0;transform:translateY(-50%) rotate(-6deg);font-family:TrafficCaveat,cursive;font-weight:500;font-size:clamp(21px,1.7vw,32px);line-height:1.1;color:#fff}
.service-trafego-pago .traffic-final-note svg{display:block;color:#ffc100;width:90%;height:auto;max-height:60px;margin-top:12px}
@media(min-width:1024px){
 .service-trafego-pago .service-section-5 .traffic-process-heading{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,1fr);gap:0 24px;align-items:center}
 .service-trafego-pago .service-section-5 .traffic-process-heading>.eyebrow{grid-column:1}
 .service-trafego-pago .service-section-5 .traffic-process-heading>h2{grid-column:1}
 .service-trafego-pago .service-section-5 .traffic-process-heading>.page-lead{grid-column:2;grid-row:1 / span 2}
 .service-trafego-pago .service-section-5 .traffic-process-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(110px,10vw,180px);gap:20px;align-items:center}
}
@media(min-width:768px) and (max-width:1023px){
 .service-trafego-pago .traffic-process-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .service-trafego-pago .traffic-step-arrow{display:none}
 .service-trafego-pago .traffic-process-heading>.page-lead{margin:12px 0 0}
 .service-trafego-pago .traffic-process-step h3,.service-trafego-pago .traffic-process-step p{font-size:14px}
 .service-trafego-pago .traffic-journey-note{display:none}
 .service-trafego-pago .traffic-final-copy{width:68%}
 .service-trafego-pago .traffic-final-cta .traffic-final-note{display:none}
}
@media(max-width:767px){
 .service-trafego-pago .traffic-process-steps{grid-template-columns:1fr;gap:16px}
 .service-trafego-pago .traffic-process-step{grid-template-columns:50px minmax(0,1fr);padding:16px;gap:14px}
 .service-trafego-pago .traffic-process-step .page-card-icon{width:50px;height:50px}
 .service-trafego-pago .traffic-process-step h3,.service-trafego-pago .traffic-process-step p{font-size:14px}
 .service-trafego-pago .traffic-process-heading>.page-lead{margin:12px 0 0}
 .service-trafego-pago .traffic-step-arrow{right:calc(50% - 9px);top:auto;bottom:-18px;transform:rotate(90deg)}
 .service-trafego-pago .traffic-journey-note,.service-trafego-pago .traffic-final-cta .traffic-final-note{display:none}
 .service-trafego-pago .page-cta.traffic-final-cta:has(.cta-art){min-height:500px;align-items:flex-start;padding:30px 0}
 .service-trafego-pago .traffic-final-copy{width:100%}
 .service-trafego-pago .traffic-final-cta .traffic-final-copy>p{max-width:100%;font-size:15px}
 .service-trafego-pago .page-cta.traffic-final-cta:has(.cta-art):after{background:linear-gradient(180deg,#080808eb,#080808b3 65%,#08080855)}
 .service-trafego-pago .traffic-final-cta>.cta-art img{object-position:72% 65%}
 .service-trafego-pago .traffic-final-copy .button-row{align-items:flex-start;flex-direction:column}
 .service-trafego-pago .traffic-final-cta .button{width:auto;white-space:normal}
}
