/*
Theme Name: Pinheiropar
Theme URI: https://pinheiropar.com.br
Author: Alpina Digital
Author URI: https://alpina.digital
Description: Tema custom one-page para Pinheiropar — Importadora de ferragens, ferramentas e produtos industriais (Passo Fundo / RS). 11 seções com 5 Custom Post Types alimentados via Meta Box (free). Compatível com PHP 8.0+ e WordPress 6.0+.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pinheiropar
Tags: business, industrial, one-page, custom-colors, custom-menu, featured-images
*/

/* =================================================================
   PINHEIRO PAR — DESIGN TOKENS (Red + Yellow Edition)
   ================================================================= */
:root{
  --c-red:        #B8141C;
  --c-red-deep:   #8B0F15;
  --c-red-hover:  #D11820;
  --c-yellow:     #FFCC00;
  --c-yellow-d:   #E6B800;
  --c-cream:      #FAF7F2;
  --c-cream-alt:  #F0EBE2;
  --c-black:      #0A0A0A;
  --c-white:      #FFFFFF;
  --c-gray:       #6B6B6B;

  --f-display:   "Anton", "Archivo Black", "Bebas Neue", system-ui, sans-serif;
  --f-body:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-yellow: 0 10px 30px rgba(255,204,0,.30);
  --shadow-red: 0 10px 30px rgba(184,20,28,.30);
  --container: 1280px;
  --gutter: 24px;
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  overflow-x:clip; overflow-x:hidden;
  width:100%;
}
section[id]{ scroll-margin-top:88px; }
section{ overflow:hidden; }
body{
  margin:0; background:var(--c-red); color:var(--c-white);
  font-family:var(--f-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; width:100%; position:relative;
  overflow-wrap:break-word; word-wrap:break-word;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:transparent; color:inherit}

.container{
  width:100%; max-width:var(--container); margin:0 auto;
  padding-left:var(--gutter); padding-right:var(--gutter);
}

/* Display headlines */
.h-display{
  font-family:var(--f-display); font-weight:400; letter-spacing:.005em;
  text-transform:uppercase; line-height:.95;
}
.h1{ font-size:clamp(40px, 6.2vw, 88px); }
.h2{ font-size:clamp(32px, 4.2vw, 56px); line-height:.98; }
.h3{ font-size:clamp(20px, 1.8vw, 28px); line-height:1.1; font-weight:700; font-family:var(--f-body); letter-spacing:-.01em; text-transform:none; }

/* Tag (eyebrow) — contextual variants */
.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-weight:700; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--c-yellow);
}
.tag::before{
  content:""; display:block; width:32px; height:2px; background:var(--c-yellow);
}
.tag--red{ color:var(--c-red); }
.tag--red::before{ background:var(--c-red); }
.tag--dark{ color:var(--c-black); }
.tag--dark::before{ background:var(--c-black); }
.tag--white{ color:var(--c-white); }
.tag--white::before{ background:var(--c-white); }

/* Pulse alert (urgency) */
.tag--alert{ color:var(--c-yellow); }
.tag--alert::before{ background:var(--c-yellow); }
.tag--alert::after{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--c-yellow);
  display:inline-block; margin-left:6px;
  animation:pulseYellow 1.4s infinite;
}
@keyframes pulseYellow{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,204,0,.7);}
  50%{ box-shadow:0 0 0 8px rgba(255,204,0,0);}
}

.eyebrow{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.7); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 28px; font-weight:700; font-size:14px; letter-spacing:.05em;
  text-transform:uppercase; border-radius:var(--r-sm);
  transition:transform .25s var(--ease), background-color .25s var(--ease),
             color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  min-height:48px; white-space:nowrap; text-align:center; line-height:1.2;
}
@media (max-width:640px){
  .btn{ white-space:normal; padding:14px 20px; font-size:13px; }
  .btn svg{ width:16px; height:16px; }
}
.btn svg{ width:18px; height:18px; flex-shrink:0; overflow:visible; display:block; }
.btn--primary{ background:var(--c-yellow); color:var(--c-black); }
.btn--primary:hover{ background:var(--c-yellow-d); transform:translateY(-2px); box-shadow:var(--shadow-yellow); }
.btn--outline{ background:transparent; color:var(--c-white); border:2px solid var(--c-white); }
.btn--outline:hover{ background:var(--c-white); color:var(--c-red); }
.btn--red{ background:var(--c-red); color:var(--c-white); }
.btn--red:hover{ background:var(--c-red-hover); transform:translateY(-2px); box-shadow:var(--shadow-red); }
.btn--outline-red{ background:transparent; color:var(--c-red); border:2px solid var(--c-red); }
.btn--outline-red:hover{ background:var(--c-red); color:var(--c-white); }
.btn--dark{ background:var(--c-black); color:var(--c-yellow); }
.btn--dark:hover{ background:#222; transform:translateY(-2px); }
.btn--outline-dark{ background:transparent; color:var(--c-black); border:2px solid var(--c-black); }
.btn--outline-dark:hover{ background:var(--c-black); color:var(--c-yellow); }

/* Section base */
section{ position:relative; padding:clamp(72px, 9vw, 128px) 0; }
section.red{ background:var(--c-red); color:var(--c-white); }
section.red-deep{ background:var(--c-red-deep); color:var(--c-white); }
section.cream{ background:var(--c-cream); color:var(--c-black); }
section.yellow{ background:var(--c-yellow); color:var(--c-black); }
section.black{ background:var(--c-black); color:var(--c-white); }

/* ===== S1 HEADER ===== */
.header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(184,20,28,.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.12);
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.header.scrolled{ background:rgba(139,15,21,.96); border-color:rgba(255,204,0,.25); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px var(--gutter);
  max-width:1440px; margin:0 auto;
  transition: padding .25s var(--ease);
}
.header.scrolled .header-inner{ padding-top:8px; padding-bottom:8px; }
.header.scrolled .brand img{ height:38px; }
@media (max-width:640px){
  .header.scrolled .header-inner{ padding-top:6px; padding-bottom:6px; }
  .header.scrolled .brand img{ height:30px; }
}
.brand{ display:inline-flex; align-items:center; }
.brand img{ height:50px; width:auto; transition:height .25s var(--ease); }

.nav{ display:flex; gap:6px; }
.nav a{
  padding:10px 14px; font-size:14px; font-weight:500; color:#fff;
  position:relative; transition:color .2s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--c-yellow); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav a:hover{ color:var(--c-yellow); }
.nav a:hover::after{ transform:scaleX(1); }

.header-cta{ display:flex; align-items:center; gap:10px; }

.menu-toggle{
  display:none; width:48px; height:48px; min-height:48px; padding:0;
  align-items:center; justify-content:center;
  background:var(--c-yellow); color:var(--c-black);
  border:0; border-radius:var(--r-sm);
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.menu-toggle:hover{ background:var(--c-yellow-d); transform:translateY(-1px); }
.menu-toggle svg{
  width:24px; height:24px; flex-shrink:0; overflow:visible; display:block;
  transition:transform .25s var(--ease);
}
.menu-toggle.is-open svg{ transform:rotate(90deg); }
.menu-toggle .icon-close{ display:none; }
.menu-toggle.is-open .icon-open{ display:none; }
.menu-toggle.is-open .icon-close{ display:block; }

/* Mobile menu overlay */
.mobile-menu{
  position:fixed; inset:0; z-index:55; background:var(--c-red);
  padding:80px 24px 32px; transform:translateY(-100%);
  transition:transform .35s var(--ease); display:flex; flex-direction:column;
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{
  display:block; padding:18px 0; font-family:var(--f-display); font-size:32px;
  text-transform:uppercase; color:#fff; border-bottom:1px solid rgba(255,255,255,.18);
}
.mobile-menu a:hover{ color:var(--c-yellow); }
.mobile-menu .btn{
  margin-top:32px; justify-content:center; border-bottom:0;
  font-family:var(--f-body); font-size:14px;
  color:var(--c-black); padding:18px 24px;
}
.mobile-menu .btn:hover{ color:var(--c-black); }

/* ===== S2 HERO ===== */
.hero{
  min-height:100vh; padding:0;
  display:flex; align-items:center;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,204,0,.05), transparent 55%),
    linear-gradient(135deg, var(--c-red) 0%, var(--c-red-deep) 100%);
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events:none;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-image:url("assets/parafusos-telha-2.jpg");
  background-size:cover; background-position:center;
  opacity:.22; filter:grayscale(.6) contrast(1.15);
  mix-blend-mode:luminosity;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(184,20,28,.35), rgba(139,15,21,.88));
}

.hero-inner{
  position:relative; z-index:2;
  max-width:1280px; margin:0 auto; padding:110px var(--gutter) 72px;
  width:100%;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:12px; margin-bottom:16px;
  font-size:13px; letter-spacing:.25em; text-transform:uppercase;
  color:var(--c-yellow); font-weight:700;
}
.hero-eyebrow::before{ content:""; width:42px; height:2px; background:var(--c-yellow); }
.hero h1{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(38px, 9vw, 90px); line-height:.9; text-transform:uppercase;
  margin:0 0 20px; max-width:14ch; color:#fff;
}
.hero h1 .y{ color:var(--c-yellow); }
.hero-sub{
  max-width:62ch; color:rgba(255,255,255,.85); font-size:clamp(15px, 1.3vw, 19px);
  line-height:1.55; margin:0 0 24px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* Hero arrow flair */
.hero-arrow{
  position:absolute; right:0; top:50%; transform:translate(20%, -50%) rotate(-12deg);
  font-family:var(--f-display); font-size:clamp(140px, 22vw, 320px);
  color:var(--c-yellow); opacity:.10; pointer-events:none; z-index:1;
  letter-spacing:-.04em; line-height:1;
  max-width:100%;
}

/* Scroll indicator */
.scroll-ind{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.7);
  z-index:2; pointer-events:none;
}
.scroll-ind .line{
  width:1px; height:48px; background:linear-gradient(180deg, transparent, var(--c-yellow));
  animation:scrollPulse 2s infinite var(--ease);
  transform-origin:top;
}
@keyframes scrollPulse{
  0%{ transform:scaleY(0); opacity:0;}
  30%{ opacity:1;}
  100%{ transform:scaleY(1); opacity:0;}
}

/* ===== S3 SOBRE (cream) ===== */
.about{ background:var(--c-cream); color:var(--c-black); }
.about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}

/* ===== Carousel ===== */
.about-carousel-wrap{ position:relative; }
.about-carousel{
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-md);
  background:var(--c-red-deep); isolation:isolate;
}
.about-carousel::before{
  content:""; position:absolute; inset:auto -24px -24px auto; width:160px; height:160px;
  background:var(--c-red); z-index:0;
}
.about-carousel::after{
  content:""; position:absolute; left:-2px; top:-2px;
  width:80px; height:80px; border-top:3px solid var(--c-red); border-left:3px solid var(--c-red);
  z-index:3;
}
.about-slides{ position:absolute; inset:0; }
.about-slide{
  position:absolute; inset:0; margin:0; opacity:0;
  transform:translateX(20px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.about-slide.active{ opacity:1; transform:translateX(0); pointer-events:auto; z-index:1; }
.about-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.12) contrast(1.05);
}
.about-caption{
  position:absolute; left:16px; bottom:16px; z-index:2;
  background:var(--c-red); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:8px 14px; border-radius:var(--r-sm);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* Carousel controls */
.about-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(10,10,10,.55); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; line-height:1; z-index:4;
  transition:background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px);
}
.about-nav:hover{ background:var(--c-yellow); color:var(--c-black); border-color:var(--c-yellow); transform:translateY(-50%) scale(1.06); }
.about-prev{ left:14px; }
.about-next{ right:14px; }
.about-dots{
  display:flex; gap:8px; justify-content:center; margin-top:18px;
  padding:0;
}
.about-dots .dot{
  width:28px; height:28px; padding:0; border:0;
  background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.about-dots .dot::before{
  content:""; display:block;
  width:10px; height:10px; border-radius:50%;
  border:2px solid var(--c-red); background:transparent;
  opacity:.35; transition:all .25s var(--ease);
}
.about-dots .dot:hover::before{ opacity:.7; }
.about-dots .dot.active::before{
  background:var(--c-red); opacity:1; width:28px; border-radius:6px;
}

@media (prefers-reduced-motion: reduce){
  .about-slide{ transition:opacity 0s !important; transform:none !important; }
}

.about h2{ margin:18px 0 24px; color:var(--c-black); }
.about p{ color:#3a3a3a; font-size:17px; line-height:1.7; max-width:54ch; margin:0 0 16px; }
.about .segments{
  display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-red); font-weight:700; margin-top:20px; line-height:1.7;
}
.pills{ display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 8px; }
.pill{
  padding:10px 16px; border:1px solid var(--c-red); color:var(--c-red);
  font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  border-radius:999px; background:rgba(184,20,28,.06); cursor:default;
}
.pill--filled{ background:var(--c-red); color:#fff; }

/* ===== S4 BIG NUMBERS (red-deep) ===== */
.numbers{
  background:var(--c-red-deep); color:#fff;
  border-top:1px solid var(--c-yellow); border-bottom:1px solid var(--c-yellow);
  padding:80px 0;
}
.numbers-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:0;
}
.num{
  text-align:center; padding:24px 16px; position:relative;
}
.num + .num::before{
  content:""; position:absolute; left:0; top:20%; bottom:20%; width:1px;
  background:rgba(255,255,255,.18);
}
.num strong{
  display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(64px, 8vw, 120px); line-height:.9; color:var(--c-yellow);
  letter-spacing:-.01em;
}
.num span{ display:block; margin-top:10px; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.82); }

/* ===== S5 PRODUCTS (cream) ===== */
.products{ background:var(--c-cream); color:var(--c-black); }
.products .section-head{ display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:48px; }
.products h2{ max-width:18ch; color:var(--c-black); }
.products-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.product-card{
  background:#fff; color:var(--c-black); border:1px solid #e6e0d6;
  border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  position:relative; text-decoration:none;
}
.product-card:hover{
  transform:translateY(-6px); border-color:var(--c-red);
  box-shadow:0 20px 50px rgba(184,20,28,.18), 0 0 0 1px var(--c-red);
}
.product-thumb{
  aspect-ratio:4/3; background:var(--c-cream-alt); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.product-thumb svg{ width:50%; height:auto; color:#9a8f7f; transition:transform .4s var(--ease), color .3s var(--ease); }
.product-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.product-card:hover .product-thumb svg{ transform:scale(1.06); color:var(--c-red); }
.product-card:hover .product-thumb img{ transform:scale(1.05); }
.product-card.featured .badge{
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--c-yellow); color:var(--c-black);
  font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 10px; border-radius:var(--r-sm);
}
.product-body{ padding:24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-body h3{ font-size:22px; font-weight:800; margin:0; letter-spacing:-.01em; }
.product-body p{ color:#5a5a5a; font-size:14px; line-height:1.55; margin:0 0 12px; flex:1; }
.product-cta{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  color:var(--c-black); text-transform:uppercase; letter-spacing:.08em; padding-top:8px;
  border-top:1px solid #ececec; margin-top:8px;
}
.product-cta svg{ width:14px; height:14px; transition:transform .25s var(--ease), color .25s var(--ease); }
.product-card:hover .product-cta{ color:var(--c-red); }
.product-card:hover .product-cta svg{ transform:translateX(4px); color:var(--c-red); }

.products .section-foot{ display:flex; justify-content:center; margin-top:56px; }

/* ===== S6 PROMOTIONS (red) ===== */
.promos{ background:var(--c-red); color:#fff; position:relative; }
.promos::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:3px 3px; pointer-events:none;
}
.promos .section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:40px; flex-wrap:wrap;
}
.promos h2{ max-width:20ch; margin:0; color:#fff; }
.promos-carousel{
  position:relative; overflow:hidden;
}
.promo-track{
  display:flex; gap:20px;
  transition:transform .6s var(--ease);
  will-change:transform;
}
.promo-card{
  flex:0 0 calc((100% - 60px) / 4);
}
.promo-controls{
  display:flex; gap:8px; align-items:center;
}
.promo-nav{
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.25);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1;
  transition:background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.promo-nav:hover{ background:var(--c-yellow); color:var(--c-black); border-color:var(--c-yellow); }
.promo-nav:disabled{ opacity:.3; cursor:not-allowed; }
.promo-dots{
  display:flex; gap:8px; justify-content:center; margin-top:28px;
}
.promo-dots .dot{
  width:28px; height:28px; padding:0; border:0;
  background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.promo-dots .dot::before{
  content:""; display:block;
  width:10px; height:10px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); background:transparent;
  transition:all .25s var(--ease);
}
.promo-dots .dot.active::before{
  background:var(--c-yellow); border-color:var(--c-yellow); width:28px; border-radius:6px;
}
.promo-card{
  background:linear-gradient(180deg, var(--c-red-deep), #6a0a10);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-md);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  text-decoration:none; color:inherit;
}
.promo-card:hover{
  transform:translateY(-4px); border-color:var(--c-yellow);
  box-shadow:0 14px 30px rgba(0,0,0,.25);
}
.promo-thumb{ aspect-ratio:4/3; background:rgba(0,0,0,.18); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.promo-thumb::before{
  content:""; position:absolute;
  top:0; left:0; right:0; height:0;
  background:var(--c-yellow);
  transition:height .3s var(--ease);
  z-index:5; pointer-events:none;
}
.promo-card:hover .promo-thumb::before{ height:6px; }
.promo-thumb svg{ width:45%; color:rgba(255,255,255,.35); }
.promo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.promo-discount{
  position:absolute; top:12px; right:12px; background:var(--c-yellow);
  font-family:var(--f-display); font-size:22px; padding:6px 10px;
  border-radius:var(--r-sm); color:var(--c-black); z-index:2;
}
.promo-body{ padding:18px 20px 22px; }
.promo-body h3{ font-size:16px; margin:0 0 12px; font-weight:700; letter-spacing:-.01em; color:#fff; }
.promo-prices{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.promo-prices del{ color:rgba(255,255,255,.55); font-size:13px; }
.promo-prices strong{
  font-family:var(--f-display); font-size:34px; color:var(--c-yellow); line-height:1;
}
.promo-cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  color:var(--c-yellow); font-weight:700; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase;
}

/* ===== S6b PRODUTOS EM DESTAQUE (cream) ===== */
.featured-section{ background:var(--c-cream-alt); color:var(--c-black); }
.featured-section .section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:40px; flex-wrap:wrap;
}
.featured-section h2{ max-width:20ch; margin:0; color:var(--c-black); }
.featured-controls{ display:flex; gap:8px; }
.featured-nav{
  width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.05); color:var(--c-black);
  border:1px solid rgba(0,0,0,.15);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1;
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.featured-nav:hover{ background:var(--c-red); color:#fff; border-color:var(--c-red); }
.featured-nav:disabled{ opacity:.3; cursor:not-allowed; }
.featured-carousel{ position:relative; overflow:hidden; }
.featured-track{
  display:flex; gap:20px;
  transition:transform .6s var(--ease); will-change:transform;
}
.featured-card{
  flex:0 0 calc((100% - 60px) / 4);
  background:#fff; color:var(--c-black);
  border:1px solid #e6e0d6;
  border-radius:var(--r-md);
  overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; text-align:left; padding:0;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  font:inherit; position:relative;
}
.featured-card:hover{
  transform:translateY(-6px);
  border-color:var(--c-red);
  box-shadow:0 20px 50px rgba(184,20,28,.18);
}
.featured-thumb{
  aspect-ratio:4/3; background:var(--c-cream); position:relative;
  display:flex; align-items:center; justify-content:center;
  color:#9a8f7f; transition:color .3s var(--ease);
  overflow:hidden;
}
.featured-thumb::before{
  content:""; position:absolute;
  top:0; left:0; right:0; height:0;
  background:var(--c-red);
  transition:height .3s var(--ease);
  z-index:5; pointer-events:none;
}
.featured-card:hover .featured-thumb::before{ height:6px; }
.featured-thumb svg{ width:48%; height:auto; transition:transform .4s var(--ease); }
.featured-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.featured-card:hover .featured-thumb{ color:var(--c-red); }
.featured-card:hover .featured-thumb svg{ transform:scale(1.06); }
.featured-card:hover .featured-thumb img{ transform:scale(1.05); }
.featured-tag{
  position:absolute; top:12px; left:12px;
  background:var(--c-yellow); color:var(--c-black);
  font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 9px; border-radius:var(--r-sm);
  z-index:2;
}
.featured-body{ padding:20px; flex:1; display:flex; flex-direction:column; }
.featured-body h3{ font-size:17px; margin:0 0 6px; font-weight:800; color:var(--c-black); line-height:1.25; }
.featured-body p{ font-size:13px; color:#5a5a5a; margin:0 0 14px; flex:1; line-height:1.5; }
.featured-cta{
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-red); display:inline-flex; align-items:center; gap:6px;
  padding-top:12px; border-top:1px solid #ececec;
}
.featured-cta svg{ width:12px; height:12px; transition:transform .25s var(--ease); }
.featured-card:hover .featured-cta svg{ transform:translateX(4px); }
.featured-dots{
  display:flex; gap:8px; justify-content:center; margin-top:28px;
}
.featured-dots .dot{
  width:28px; height:28px; padding:0; border:0;
  background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.featured-dots .dot::before{
  content:""; display:block;
  width:10px; height:10px; border-radius:50%;
  border:2px solid var(--c-red); background:transparent;
  opacity:.4; transition:all .25s var(--ease);
}
.featured-dots .dot.active::before{
  background:var(--c-red); opacity:1; width:28px; border-radius:6px;
}

/* ===== Modal de produto ===== */
.modal{
  position:fixed; inset:0; z-index:110;
  background:rgba(10,10,10,.7);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.modal.open{ opacity:1; visibility:visible; transition-delay:0s; }
.modal-dialog{
  background:#fff; color:var(--c-black);
  border-radius:var(--r-lg); max-width:780px; width:100%;
  max-height:90vh; overflow-y:auto; position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  transform:translateY(20px) scale(.96);
  transition:transform .35s var(--ease);
  display:flex; flex-direction:row; align-items:stretch;
}
.modal.open .modal-dialog{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:40px; height:40px; padding:0; border-radius:50%;
  background:rgba(255,255,255,.95); color:var(--c-black);
  border:1px solid rgba(0,0,0,.08);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.modal-close:hover{ background:var(--c-red); color:#fff; transform:rotate(90deg); }
.modal-close svg{ width:18px; height:18px; }
.modal-image{
  width:300px; flex-shrink:0;
  background:var(--c-cream-alt);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-red); border-right:1px solid #ececec;
  overflow:hidden;
}
.modal-image svg{ width:150px; height:150px; max-width:none; }
.modal-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.modal-body{ padding:28px 28px 26px; flex:1; min-width:0; display:flex; flex-direction:column; }
.modal-body .tag{ margin-bottom:4px; }
.modal-body h3{
  font-family:var(--f-display); font-size:26px; line-height:1.05;
  text-transform:uppercase; font-weight:400;
  margin:4px 0 10px; color:var(--c-black);
}
.modal-body > p{ color:#3a3a3a; font-size:14px; line-height:1.55; margin:0 0 14px; }
.modal-specs{
  list-style:none; padding:0; margin:0 0 16px;
  display:grid; gap:4px;
}
.modal-specs li{
  display:flex; gap:12px; padding:7px 12px;
  background:var(--c-cream); border-radius:var(--r-sm);
  font-size:13px; line-height:1.35;
}
.modal-specs strong{
  min-width:100px; color:var(--c-red); font-weight:700;
}
.modal-specs span{ color:#333; }
.modal-cta{ width:100%; justify-content:center; padding:12px 20px; min-height:42px; }

/* Flipbook modal — variante mais larga */
.modal-dialog--large{
  max-width:min(95vw, 1200px);
  width:1200px;
  max-height:92vh;
  padding:0;
  background:var(--c-cream);
}
.modal--flipbook .modal-dialog{ background:var(--c-cream); }
#flipbookContainer{
  width:100%; height:80vh; min-height:480px;
  background:var(--c-cream);
}
#flipbookContainer iframe{
  width:100%; height:100%; border:0; display:block;
}
.flipbook-fallback-msg{
  display:flex; align-items:center; justify-content:center;
  height:100%; padding:32px; text-align:center; color:var(--c-gray);
  font-size:14px;
}
@media (max-width:1024px){
  #flipbookContainer{ height:75vh; }
}

@media (max-width:1024px){
  .featured-section .section-head{ flex-direction:column; align-items:flex-start; gap:20px; }
  .featured-card{ flex:0 0 calc((100% - 20px) / 2); }
}
@media (max-width:640px){
  .featured-card{ flex:0 0 100%; }
  .modal{ padding:12px; }
  .modal-dialog{ flex-direction:column; }
  .modal-image{
    width:100%; aspect-ratio:4/3; height:auto;
    border-right:0; border-bottom:1px solid #ececec;
  }
  .modal-image svg{ width:130px; height:130px; }
  .modal-body{ padding:18px 18px 20px; }
  .modal-body h3{ font-size:22px; margin:4px 0 8px; }
  .modal-body > p{ font-size:13px; margin:0 0 12px; }
  .modal-specs{ gap:3px; margin:0 0 14px; }
  .modal-specs li{ flex-direction:column; gap:1px; padding:6px 10px; font-size:12px; }
  .modal-specs strong{ min-width:0; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
}

/* ===== S7 MVV (cream) ===== */
.mvv{ background:var(--c-cream); color:var(--c-black); }
.mvv h2{ color:var(--c-black); }
.mvv-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;
}
.mvv-card{
  background:#fff; padding:36px 28px; border-radius:var(--r-md);
  border-left:4px solid var(--c-red); position:relative; overflow:hidden;
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
.mvv-card::before{
  content:""; position:absolute; inset:0; background:var(--c-red); z-index:0;
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.mvv-card > *{ position:relative; z-index:1; }
.mvv-card:hover::before{ transform:scaleX(1); }
.mvv-card svg{ width:36px; height:36px; color:var(--c-red); margin-bottom:18px; transition:color .35s var(--ease); }
.mvv-card h3{ margin:0 0 10px; font-size:22px; font-weight:800; letter-spacing:-.01em; }
.mvv-card p{ font-size:15px; line-height:1.6; color:#444; margin:0; transition:color .35s var(--ease); }
.mvv-card:hover{ color:#fff; }
.mvv-card:hover p{ color:rgba(255,255,255,.92); }
.mvv-card:hover svg{ color:var(--c-yellow); }
.mvv-values{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.mvv-values li{
  display:flex; align-items:center; gap:12px;
  font-size:15px; font-weight:600; color:#222;
  transition:color .35s var(--ease);
}
.mvv-values li svg{
  width:18px; height:18px; flex-shrink:0; color:var(--c-red);
  margin:0; transition:color .35s var(--ease);
}
.mvv-card:hover .mvv-values li{ color:#fff; }
.mvv-card:hover .mvv-values li svg{ color:var(--c-yellow); }

/* ===== S8 BRANDS (black — marquee contínuo) ===== */
.brands{ background:var(--c-black); color:#fff; }
.brands h2{ max-width:22ch; color:#fff; margin:0 0 48px; }
.brands-marquee{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brands-strip{
  display:flex; gap:64px; align-items:center;
  width:max-content;
  animation: brandMarquee 60s linear infinite;
}
.brands-strip:hover{ animation-play-state:paused; }
.brand-logo{
  height:64px; width:auto; max-width:180px;
  flex-shrink:0; display:inline-block;
  object-fit:contain;
  background:#fff; padding:8px 16px;
  border-radius:6px;
  filter:saturate(.9);
  opacity:.85;
  transition:transform .25s var(--ease), opacity .25s var(--ease), filter .25s var(--ease);
}
.brand-logo:hover{ filter:saturate(1.1); opacity:1; transform:scale(1.05); }
.brand-logo--text{
  font-family:var(--f-display); font-size:32px; color:#bdbdbd;
  letter-spacing:.04em; text-transform:uppercase; line-height:1;
  white-space:nowrap; padding:0 8px;
  background:transparent; border-radius:0;
}
.brand-logo--text:hover{ color:var(--c-yellow); transform:none; }
@keyframes brandMarquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .brands-strip{
    animation:none; flex-wrap:wrap; justify-content:center; gap:32px;
    width:auto;
  }
}
@media (max-width:640px){
  .brands-strip{ gap:40px; animation-duration:45s; }
  .brand-logo{ height:48px; max-width:140px; padding:6px 12px; }
  .brand-logo--text{ font-size:24px; padding:0 8px; }
}

/* ===== S9 CATALOG (yellow) ===== */
.catalog{ background:var(--c-yellow); color:var(--c-black); overflow:hidden; }
.catalog::before{
  content:""; position:absolute; left:-40px; top:-40px; width:200px; height:200px;
  border:8px solid rgba(184,20,28,.12); border-radius:50%;
}
.catalog-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.catalog-mock{
  perspective:1200px; display:flex; align-items:center; justify-content:center;
  min-height:480px;
}
.catalog-mock .book{
  width:280px; height:380px; background:var(--c-red);
  border-radius:6px 14px 14px 6px;
  transform:rotateY(-22deg) rotateX(2deg) rotate(-1deg);
  box-shadow:
    -10px 0 0 -2px rgba(0,0,0,.18),
    -22px 12px 60px rgba(139,15,21,.45),
    inset 14px 0 0 var(--c-red-deep);
  position:relative; padding:36px 28px; color:#fff;
  display:flex; flex-direction:column; justify-content:space-between;
  border-left:6px solid var(--c-yellow);
  transition:transform .5s var(--ease);
}
.catalog-mock:hover .book{ transform:rotateY(-14deg) rotateX(2deg) rotate(-1deg); }
.book-tag{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--c-yellow); }
.book h3{ font-family:var(--f-display); font-size:42px; line-height:.9; margin:14px 0 0; text-transform:uppercase; }
.book-foot{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.book::after{
  content:"2026"; position:absolute; right:16px; bottom:16px;
  font-family:var(--f-display); color:var(--c-yellow); font-size:18px;
}
.catalog h2{ margin:18px 0 18px; max-width:14ch; color:var(--c-black); }
.catalog p{ font-size:17px; line-height:1.55; max-width:46ch; margin:0 0 28px; }
.catalog .cta-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* ===== S10 CONTACT (red-deep) ===== */
.contact{ background:var(--c-red-deep); color:#fff; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.contact-photo{
  aspect-ratio:16/10; background:rgba(0,0,0,.25); border-radius:var(--r-md); margin-bottom:32px;
  overflow:hidden; position:relative;
}
.contact-photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.05); }
.contact-photo::after{
  content:""; position:absolute; inset:auto auto 0 0; width:140px; height:6px; background:var(--c-yellow);
}
.contact h2{ margin:18px 0 28px; max-width:18ch; color:#fff; }
.contact-list{ list-style:none; padding:0; margin:0 0 32px; display:grid; gap:16px; }
.contact-list li{ display:flex; gap:16px; align-items:flex-start; }
.contact-list .ico{
  width:42px; height:42px; flex-shrink:0; border-radius:var(--r-sm);
  background:rgba(255,204,0,.12); display:flex; align-items:center; justify-content:center;
  color:var(--c-yellow); border:1px solid rgba(255,204,0,.3);
}
.contact-list .ico svg{ width:20px; height:20px; flex-shrink:0; overflow:visible; display:block; }
.contact-list small{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-bottom:2px; }
.contact-list strong{ font-size:16px; color:#fff; font-weight:600; line-height:1.4; }
.contact-list a[href^="tel:"]{ color:inherit; text-decoration:none; transition:color .2s var(--ease); }
.contact-list a[href^="tel:"]:hover{ color:var(--c-yellow); }
footer ul a[href^="tel:"]{ color:#cfcfcf; text-decoration:none; transition:color .2s var(--ease); }
footer ul a[href^="tel:"]:hover{ color:var(--c-yellow); }

.contact-map{
  position:sticky; top:96px; border-radius:var(--r-md); overflow:hidden;
  border:1px solid rgba(255,255,255,.10); background:var(--c-red-deep); aspect-ratio:3/4;
  min-height:520px;
}
.contact-map iframe{ width:100%; height:100%; display:block; border:0;
  filter:invert(.88) hue-rotate(160deg) saturate(1.4) brightness(.95) contrast(.95);
}
.contact-cta{ margin-top:24px; }

/* ===== S11 FOOTER (black) ===== */
footer{ background:var(--c-black); color:#fff; padding:64px 0 0; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px;
}
footer h3{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--c-yellow); margin:0 0 16px; font-weight:700;
}
.footer-brand p{ color:#bdbdbd; font-size:14px; line-height:1.6; max-width:32ch; margin:14px 0 0; }
footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
footer ul a{ font-size:14px; color:#cfcfcf; transition:color .2s var(--ease); }
footer ul a:hover{ color:var(--c-yellow); }
.socials{ display:flex; gap:10px; }
.socials a{
  width:42px; height:42px; border:1px solid rgba(255,204,0,.35);
  border-radius:var(--r-sm); display:inline-flex; align-items:center; justify-content:center;
  color:var(--c-yellow); transition:all .25s var(--ease);
}
.socials a:hover{ background:var(--c-yellow); color:var(--c-black); border-color:var(--c-yellow); }
.socials svg{ width:18px; height:18px; }
.footer-bar{
  margin-top:64px; padding:32px 0;
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg, var(--c-red) 0%, var(--c-red) 50%, var(--c-yellow) 50%, var(--c-yellow) 100%) 1;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
  font-size:13px; color:#9a9a9a; line-height:1.5;
}
.footer-bar .copyright{ text-align:left; }
.footer-bar .alpina-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; color:#7a7a7a;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.footer-bar .alpina-badge:hover{ color:var(--c-yellow); transform:translateY(-2px); }
.footer-bar .alpina-badge svg{ width:24px; height:24px; }
.footer-bar .privacy-link{
  text-align:right; color:#cfcfcf;
  transition:color .25s var(--ease);
}
.footer-bar .privacy-link:hover{ color:var(--c-yellow); }
@media (max-width:640px){
  .footer-bar{
    grid-template-columns:1fr; text-align:center; gap:16px; padding:28px 0;
  }
  .footer-bar .copyright,
  .footer-bar .privacy-link{ text-align:center; }
  .footer-bar .alpina-badge{ margin:0 auto; }
}

/* ===== Floating WhatsApp ===== */
.wa-float{
  position:fixed;
  right:max(28px, env(safe-area-inset-right, 28px));
  bottom:max(28px, env(safe-area-inset-bottom, 28px));
  z-index:80;
  width:64px; height:64px; padding:0; border-radius:50%;
  background:var(--c-yellow); color:var(--c-black);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,.4), 0 0 0 8px rgba(255,204,0,.18);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  animation:waPulse 2.4s infinite;
}
.wa-float svg{ width:30px; height:30px; flex-shrink:0; overflow:visible; display:block; }
.wa-float:hover{ transform:scale(1.08); box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 14px rgba(255,204,0,.22); }
@keyframes waPulse{
  0%,100%{ box-shadow:0 12px 30px rgba(0,0,0,.4), 0 0 0 0 rgba(255,204,0,.6); }
  60%{ box-shadow:0 12px 30px rgba(0,0,0,.4), 0 0 0 18px rgba(255,204,0,0); }
}

/* ===== Cookie banner ===== */
.cookie{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:70;
  background:rgba(10,10,10,.96);
  border:1px solid transparent;
  border-image:linear-gradient(90deg, var(--c-red), var(--c-yellow)) 1;
  border-radius:var(--r-md); padding:18px 20px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  max-width:980px; margin:0 auto;
  transform:translateY(160%); transition:transform .4s var(--ease);
}
.cookie.show{ transform:translateY(0); }
.cookie p{ margin:0; font-size:13px; color:#dcdcdc; flex:1 1 240px; min-width:0; }
.cookie p a{ color:var(--c-yellow); text-decoration:underline; }
.cookie-actions{ display:flex; gap:8px; }
.cookie button{
  padding:10px 16px; border-radius:var(--r-sm); font-size:13px; font-weight:700;
  letter-spacing:.04em;
}
.cookie .accept{ background:var(--c-yellow); color:var(--c-black); }
.cookie .decline{ background:transparent; color:#cfcfcf; border:1px solid rgba(255,255,255,.20); }
.cookie .accept:hover{ background:var(--c-yellow-d); }

/* ===== Loading screen ===== */
.loader{
  position:fixed; inset:0; z-index:120; background:var(--c-red);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px;
  transition:opacity .5s ease .2s, visibility 0s linear .8s;
}
.loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader img{ height:50px; width:auto; max-width:240px; opacity:.95; }
.loader-bar{
  width:240px; height:3px; background:rgba(255,255,255,.18); border-radius:2px; overflow:hidden;
}
.loader-bar span{ display:block; height:100%; background:var(--c-yellow); width:0%; transition:width .25s linear; }
.loader-tag{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.8); }

/* ===== Reveal animation ===== */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.40s; }

/* ===== RESPONSIVE ===== */
/* ============ TABLET (≤1024px) ============ */
@media (max-width:1024px){
  .nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .header-cta .btn:not(.menu-toggle){ display:none; }
  .about-grid{ grid-template-columns:1fr; gap:48px; }
  .numbers-grid{ grid-template-columns:1fr 1fr; }
  .num + .num:nth-child(3)::before{ display:none; }
  .num:nth-child(3),.num:nth-child(4){ border-top:1px solid rgba(255,255,255,.18); padding-top:32px; margin-top:12px; }
  .products-grid{ grid-template-columns:1fr 1fr; }
  .promo-card{ flex:0 0 calc((100% - 20px) / 2); }
  .mvv-grid{ grid-template-columns:1fr; }
  .brands .section-head{ align-items:flex-start; }
  .catalog-grid{ grid-template-columns:1fr; gap:48px; }
  .contact-grid{ grid-template-columns:1fr; }
  .contact-map{ position:relative; top:auto; min-height:380px; aspect-ratio:16/10; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }

  /* Promo/brand controls fall below H2 instead of beside it */
  .promos .section-head,
  .brands .section-head{ flex-direction:column; align-items:flex-start; gap:20px; }
}

/* ============ Tablet vertical (641–1024) hero tuning ============ */
@media (min-width:641px) and (max-width:1024px){
  .hero h1{ font-size:72px; }
}

/* ============ MOBILE (≤640px) ============ */
@media (max-width:640px){
  :root{ --gutter:18px; }

  /* Header */
  .brand img{ height:40px; }

  /* Hero */
  .hero{ min-height:auto; }
  .hero-inner{ padding:120px 18px 96px; }
  .hero-eyebrow{ font-size:11px; margin-bottom:20px; }
  .hero-eyebrow::before{ width:28px; }
  .hero h1{ font-size:42px; line-height:.92; margin-bottom:20px; }
  .hero-sub{ font-size:15px; margin-bottom:28px; }
  .hero-cta{ flex-direction:column; align-items:stretch; gap:12px; }
  .hero-cta .btn{ justify-content:center; width:100%; }
  .hero-arrow{ display:none; }
  .scroll-ind{ display:none; }

  /* Section paddings tighter on mobile */
  section{ padding:64px 0; }

  /* Typography down-scale */
  .h1{ font-size:38px; }
  .promos h2,.products h2,.about h2,.brands h2,.contact h2,.catalog h2,.mvv h2{ font-size:32px; }
  .num strong{ font-size:60px; }

  /* About carousel — nav buttons smaller and inset properly */
  .about-prev{ left:10px; }
  .about-next{ right:10px; }
  .about-nav{ width:40px; height:40px; font-size:22px; }
  .about-caption{ left:12px; bottom:12px; font-size:10px; padding:6px 10px; }

  /* Products & Promo grids */
  .products-grid{ grid-template-columns:1fr; }
  .promo-card{ flex:0 0 100%; }

  /* Catalog */
  .catalog-mock{ min-height:340px; }
  .catalog-mock .book{ width:200px; height:280px; padding:24px 20px; }
  .book h3{ font-size:26px; }

  /* Contact */
  .contact-photo{ aspect-ratio:16/11; }
  .contact-list .ico{ width:38px; height:38px; }
  .contact-list strong{ font-size:15px; }
  .contact-map{
    margin-left:calc(-1 * var(--gutter));
    margin-right:calc(-1 * var(--gutter));
    width:calc(100% + (var(--gutter) * 2));
    border-radius:0; border-left:0; border-right:0;
    min-height:340px;
  }

  /* MVV */
  .mvv-card{ padding:28px 22px; }
  .mvv-card h3{ font-size:20px; }

  /* Footer */
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .footer-brand p{ max-width:none; }

  /* Cookie banner full-bleed on mobile */
  .cookie{ left:12px; right:12px; bottom:12px; padding:14px 16px; }
  .cookie p{ font-size:12px; }
  .cookie-actions{ width:100%; justify-content:flex-end; }

  /* Mobile menu links smaller */
  .mobile-menu a{ font-size:28px; padding:14px 0; }
}

/* ============ Small phones (≤480px) ============ */
@media (max-width:480px){
  .hero h1{ font-size:38px; }
  .hero-inner{ padding:110px 18px 80px; }
  .wa-float{
    width:58px; height:58px;
    right:max(20px, env(safe-area-inset-right, 20px));
    bottom:max(20px, env(safe-area-inset-bottom, 20px));
  }
  .wa-float svg{ width:28px; height:28px; }
  .brand img{ height:35px; }
}