:root {
  --navy: #021742;
  --navy-soft: #132855;
  --blue: #3573e4;
  --blue-deep: #003979;
  --yellow: #ffd800;
  --yellow-soft: #ffe878;
  --paper: #ffffff;
  --ink: #021742;
  --muted: #b8c5d9;
  --line: rgba(255, 255, 255, 0.14);
  --condensed: 'Barlow Condensed', Impact, sans-serif;
  --sans: 'DM Sans', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.container { width: min(1180px, calc(100% - 64px)); margin: 0 auto; position: relative; z-index: 1; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 20; padding: 10px 14px; transform: translateY(-150%); background: var(--yellow); color: var(--navy); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; top: 0; width: 100%; z-index: 10; border-bottom: 1px solid var(--line); color: white; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 96px; }
.brand img { display: block; width: 132px; max-height: 67px; height: auto; object-fit: contain; object-position: left center; }
.main-nav { display: flex; align-items: center; gap: 34px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.main-nav a:not(.nav-cta) { opacity: 0.82; transition: color 0.2s ease, opacity 0.2s ease; }
.main-nav a:not(.nav-cta):hover { color: var(--yellow); opacity: 1; }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--blue); color: white; }
.whatsapp-logo { display: inline-flex; width: 19px; height: 19px; flex: 0 0 auto; }
.whatsapp-logo svg { display: block; width: 100%; height: 100%; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 10px; }
.menu-toggle span { display: block; width: 25px; height: 2px; margin: 5px 0; background: white; }

.section-dark { background: var(--navy); color: white; }
.section-light { background: var(--paper); color: var(--navy); }
.hero { position: relative; min-height: 620px; padding: 155px 0 84px; overflow: hidden; background-image: linear-gradient(90deg, rgba(2,23,66,.98) 0%, rgba(2,23,66,.86) 34%, rgba(2,23,66,.58) 66%, rgba(2,23,66,.38) 100%), url('assets/optimized/hero-tubos.webp'); background-position: 57% center; background-size: cover; }
.hero-grid-pattern, .about-grid-pattern { position: absolute; inset: 0; opacity: 0.2; background-image: linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 116px 116px; mask-image: linear-gradient(to right, transparent, #000 30%, #000 75%, transparent); }
.hero-content { max-width: 1180px; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 13px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; }
.eyebrow span, .section-kicker span { display: block; width: 31px; height: 3px; background: var(--blue); }
.hero h1, h2, h3 { font-family: var(--condensed); text-transform: uppercase; }
.hero h1 { max-width: 760px; margin: 30px 0 26px; font-size: clamp(5rem, 10vw, 9rem); font-weight: 800; line-height: .9; letter-spacing: -0.025em; }
em { color: var(--blue); font-style: normal; }
.hero em, .about em { color: var(--yellow); }
.hero-conditions { margin: -13px 0 14px; color: rgba(241,242,246,.72); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-subtitle { margin: 0; font-size: 1.08rem; color: #f1f2f6; }
.hero-subtitle span { color: var(--yellow); padding: 0 9px; }
.hero-actions { display: flex; align-items: center; gap: 35px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 55px; padding: 0 24px; border: 1px solid transparent; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-3px); }
.button span:last-child { font-size: 1.25rem; line-height: 0; }
.button-yellow { background: var(--yellow); color: var(--navy); }
.product-section .button-yellow { background: var(--blue); color: white; }
.button-dark { background: var(--navy); color: white; }
.button-dark:hover { background: var(--navy-soft); }
.text-link { display: inline-flex; align-items: center; gap: 22px; border-bottom: 1px solid currentColor; padding-bottom: 11px; font-size: .77rem; font-weight: 700; letter-spacing: .03em; }
.text-link span { font-size: 1.3rem; }
.text-link:hover { color: var(--yellow); }

.benefits { padding: 84px 0 88px; }
.section-kicker { color: currentColor; opacity: .86; }
.section-kicker span { background: currentColor; }
.benefits h2, .product-section h2, .about h2 { margin: 30px 0 45px; font-size: clamp(4rem, 7vw, 7rem); line-height: .82; letter-spacing: -.02em; }
.benefits h2 { margin-bottom: 34px; white-space: nowrap; }
.benefits h2 em { color: var(--blue); }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 30px; }
.benefit-card { position: relative; min-height: 246px; padding: 25px 27px; overflow: hidden; background: var(--navy); color: white; }
.benefit-card-yellow { background: var(--navy); color: white; }
.benefit-card-dark { background: var(--navy); color: white; }
.benefit-card-outline { border: 1px solid rgba(255,255,255,.2); }
.card-icon { display: flex; align-items: center; width: 34px; height: 34px; margin-bottom: 30px; color: white; }
.card-icon svg { display: block; width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.benefit-card h3 { min-height: 42px; display: flex; align-items: flex-end; margin: 0 0 8px; font-size: 2.4rem; line-height: .88; }
.benefit-card p { max-width: 250px; min-height: 42px; margin: 0; font-size: .86rem; line-height: 1.42; }
.card-number { display: none; }
.benefits > .container > .button { display: flex; width: fit-content; min-height: 60px; margin: 0 auto; padding: 0 28px; }
.benefits > .container > .button-dark { background: var(--blue); color: white; }

.product-section { padding: 108px 0 118px; overflow: hidden; }
.product-section-light { padding: 78px 0 78px; }
#produtos { padding: 94px 0 92px; background: var(--paper); color: var(--navy); border-top: 1px solid rgba(2,23,66,.16); border-bottom: 1px solid rgba(2,23,66,.16); }
#produtos .section-kicker-light { color: var(--navy); }
.section-kicker-light { color: white; }
.section-kicker-light span { background: var(--blue); }
.product-section.section-dark { background: var(--blue-deep); }
.product-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.product-heading-row h2 { margin-bottom: 45px; }
#produtos .product-heading-row h2 { flex: 0 1 780px; max-width: 780px; margin-bottom: 32px; font-size: clamp(3.5rem, 6vw, 6rem); line-height: .96; white-space: nowrap; }
#produtos .carousel-button { border-color: rgba(2,23,66,.45); color: var(--navy); }
.product-section-light .product-heading-row h2 { flex: 0 1 auto; max-width: none; margin: 24px 0 24px; font-size: clamp(3.6rem, 5.2vw, 5.2rem); line-height: .94; white-space: nowrap; }
.product-section-light .product-heading-row h2 em { color: var(--blue); }
.carousel-controls { display: flex; align-items: center; gap: 17px; padding-bottom: 49px; }
.carousel-button { display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: white; cursor: pointer; font-size: 1.3rem; transition: background .2s ease, color .2s ease; }
.carousel-button:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
.carousel-button-dark { border-color: rgba(17,27,54,.4); color: var(--navy); }
.carousel-count { min-width: 64px; font: 500 .8rem var(--condensed); letter-spacing: .08em; }
.carousel-count strong { font-size: 1.35rem; }
.product-carousel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 41px; }
#produtos .product-carousel { margin-bottom: 24px; }
.product-section-light .product-carousel { margin-bottom: 18px; }
.product-card { min-width: 0; }
.product-card-link { display: block; color: inherit; }
.product-photo picture, .about-photo picture { display: block; width: 100%; height: 100%; }
.brand picture { display: block; }
.product-photo { position: relative; display: block; height: 285px; overflow: hidden; }
#produtos .product-photo { height: auto; aspect-ratio: 4 / 5; }
.product-section-light .product-photo { height: auto; aspect-ratio: 4 / 5; }
.product-photo-image::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(2,23,66,.02) 24%, rgba(2,23,66,.3) 100%); content: ''; }
.product-photo-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transition: transform .3s ease; }
.product-photo-image:hover img { transform: scale(1.03); }
.product-meta { display: grid; grid-template-columns: 26px 1fr 28px; align-items: center; gap: 11px; padding-top: 14px; border-top: 1px solid var(--line); }
#produtos .product-meta, .product-section-light .product-meta { min-height: 58px; padding-top: 18px; border-color: rgba(2,23,66,.18); }
#produtos .product-meta > span:first-child, .product-section-light .product-meta > span:first-child { color: #71809b; opacity: 1; }
#produtos .product-meta h3, #produtos .product-arrow, .product-section-light .product-meta h3, .product-section-light .product-arrow { color: var(--navy); }
.product-meta > span:first-child { font: 700 .8rem var(--condensed); opacity: .65; }
.product-meta h3 { margin: 0; font-size: 1.55rem; line-height: .9; }
#produtos .product-meta h3, .product-section-light .product-meta h3 { min-height: 34px; display: flex; align-items: flex-start; }
.product-arrow { text-align: right; font-size: 1.3rem; }
.product-section-light { color: var(--navy); background: var(--paper); }
.product-section-light > .container > .button-dark { background: var(--blue); color: white; }
#produtos > .container > .button { display: flex; width: fit-content; margin: 0 auto; }
.product-section-light > .container > .button { display: flex; width: fit-content; margin: 0 auto; }

@media (min-width: 901px) {
  #produtos .carousel-controls, .product-section-light .carousel-controls { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .product-photo-image img { transition: none; }
  .product-photo-image:hover img { transform: none; }
  #produtos .product-carousel, .product-section-light .product-carousel { scroll-behavior: auto; }
}

.about { position: relative; padding: 82px 0 72px; overflow: hidden; background: var(--paper); color: var(--navy); border-top: 1px solid rgba(2,23,66,.18); }
.about .section-kicker-light { color: var(--navy); }
.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 72px; }
.about-content { min-width: 0; }
.about h2 { max-width: none; margin: 24px 0 28px; font-size: clamp(3.4rem, 5vw, 5rem); line-height: .88; white-space: nowrap; }
.about h2 em { color: var(--blue); }
.about-copy { align-self: start; padding: 0; }
.about-copy p { max-width: 540px; margin: 0 0 12px; color: var(--navy-soft); font-size: 1rem; line-height: 1.55; }
.about-cta { margin-top: 18px; align-self: flex-start; }
.about-photo { position: relative; display: flex; grid-column: auto; align-items: stretch; height: 380px; margin-top: 0; overflow: hidden; }
.about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }

.site-footer { background: var(--navy); color: white; }
.footer-main { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 45px; padding: 48px 0 42px; }
.footer-brand { align-self: start; }
.footer-column { display: flex; flex-direction: column; gap: 9px; }
.footer-label { margin-bottom: 8px; color: var(--yellow); font-size: .7rem; font-weight: 700; letter-spacing: .15em; }
.footer-column address, .footer-column a { font-size: .88rem; font-style: normal; line-height: 1.7; }
.footer-column a:hover { color: var(--yellow); }
.footer-whatsapp { margin-top: 7px; color: var(--yellow); font-weight: 700; }
.footer-bottom { border-top: 1px solid var(--line); color: var(--muted); font-size: .74rem; }
.footer-bottom .container { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 16px 0; text-align: center; }
.floating-cta { position: fixed; z-index: 8; right: 25px; bottom: 25px; display: inline-flex; align-items: center; gap: 10px; padding: 15px 18px; background: var(--yellow); color: var(--navy); box-shadow: 0 14px 30px rgba(0,0,0,.18); font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

@media (max-width: 900px) {
  .container { width: min(100% - 40px, 700px); }
  .header-inner { min-height: 79px; }
  .menu-toggle { display: block; }
  .main-nav { position: absolute; top: 79px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 20px; background: var(--navy); border-bottom: 1px solid var(--line); }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 16px 0; }
  .main-nav .nav-cta { text-align: center; }
  .hero { min-height: 600px; padding-top: 143px; padding-bottom: 76px; }
  .hero h1 { max-width: 680px; font-size: clamp(4.6rem, 10vw, 7.5rem); }
  #produtos { padding: 78px 0 78px; }
  #produtos .product-heading-row h2 { max-width: 100%; white-space: normal; }
  .product-section-light { padding: 64px 0 66px; }
  .product-section-light .product-heading-row h2 { max-width: 100%; white-space: normal; }
  .benefits { padding: 68px 0 72px; }
  .benefits h2 { white-space: normal; }
  .benefits-grid, .product-carousel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card { display: none; }
  .product-card.is-active, .product-card.is-next { display: block; }
  .about { padding: 68px 0 70px; }
  .about-layout { grid-template-columns: 1fr; gap: 24px; }
  .about h2 { max-width: 100%; white-space: normal; }
  .about-copy { align-self: start; padding-top: 0; }
  .about-photo { grid-column: auto; height: 320px; margin-top: 8px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .container { width: calc(100% - 36px); }
  .hero { min-height: 560px; padding: 126px 0 78px; }
  .hero h1 { max-width: 100%; margin: 28px 0 24px; font-size: clamp(4.2rem, 19vw, 6.2rem); line-height: .9; }
  .hero-subtitle { max-width: 280px; font-size: .95rem; line-height: 1.5; }
  .hero-subtitle span { padding: 0 3px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 25px; margin-top: 32px; }
  .hero { background-image: linear-gradient(90deg, rgba(2,23,66,.98) 0%, rgba(2,23,66,.86) 34%, rgba(2,23,66,.58) 66%, rgba(2,23,66,.38) 100%), url('assets/optimized/hero-tubos-768.webp'); background-position: 62% center; }
  .benefits { padding: 58px 0 64px; }
  .product-section { padding: 75px 0 82px; }
  .about { padding: 58px 0 60px; }
  .benefits h2, .product-section h2, .about h2 { font-size: clamp(3.8rem, 17vw, 5.5rem); }
  .benefits h2 { line-height: .9; }
  .benefits-grid, .product-carousel { grid-template-columns: 1fr; }
  .benefit-card { min-height: 228px; padding: 23px 22px; }
  .card-icon { margin-bottom: 24px; }
  .benefit-card h3 { font-size: 2.25rem; }
  .product-heading-row { display: block; }
  .product-heading-row h2 { margin-bottom: 25px; }
  .about h2 { max-width: 100%; font-size: clamp(3.8rem, 16vw, 5.3rem); line-height: .98; white-space: normal; }
  .about-photo { height: 250px; margin-top: 6px; }
  .carousel-controls { padding-bottom: 30px; }
  .product-photo { height: 300px; }
  .product-card.is-next { display: none; }
  #produtos { padding: 70px 0 72px; }
  .product-section-light { padding: 60px 0 62px; }
  #produtos .product-carousel, .product-section-light .product-carousel { display: flex; gap: 16px; margin-bottom: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  #produtos .product-carousel::-webkit-scrollbar, .product-section-light .product-carousel::-webkit-scrollbar { display: none; }
  #produtos .product-card, .product-section-light .product-card { display: block; flex: 0 0 100%; scroll-snap-align: start; }
  #produtos .product-card.is-next, .product-section-light .product-card.is-next { display: block; }
  #produtos .product-photo { aspect-ratio: 4 / 5; }
  .product-section-light .product-photo { aspect-ratio: 4 / 5; }
  .product-section-light .product-heading-row h2 { font-size: clamp(3.4rem, 15vw, 5.2rem); }
  .product-meta h3 { font-size: 1.4rem; }
  .footer-main { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 34px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom .container { align-items: center; flex-direction: column; gap: 7px; padding: 14px 0; }
  .floating-cta { right: 15px; bottom: 15px; padding: 14px 16px; }
}
