<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet data-dc-atomics>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Murecho:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  body { margin: 0; background: #f7f4ee; font-family: 'Murecho', sans-serif; }
  * { box-sizing: border-box; }
  a { color: #fe9900; text-decoration: none; }
  a:hover { color: #ffca01; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
</style>
</helmet>
<div style="{{ pageWrapStyle }}">

  <header style="{{ headerStyle }}">
    <div style="{{ headerInnerStyle }}">
      <a href="Home.dc.html" style="{{ logoLinkStyle }}"><img src="uploads/imgi_1_logotipowhite.png" alt="Estores Brigantinos" style="{{ logoImgStyle }}"/></a>
      <sc-if value="{{ notMobile }}" hint-placeholder-val="{{ true }}">
        <nav style="{{ navStyle }}">
          <sc-for list="{{ navItems }}" as="item" hint-placeholder-count="5">
            <a href="{{ item.href }}" style="{{ item.active }}">{{ item.label }}</a>
          </sc-for>
        </nav>
      </sc-if>
      <sc-if value="{{ notMobile }}" hint-placeholder-val="{{ true }}">
        <a href="Contactos.dc.html" style="{{ ctaHeaderStyle }}">Pedir orçamento</a>
      </sc-if>
      <sc-if value="{{ mobile }}" hint-placeholder-val="{{ false }}">
        <button onClick="{{ toggleMenu }}" style="{{ burgerStyle }}" aria-label="Menu">
          <span style="{{ burgerLineStyle }}"></span>
          <span style="{{ burgerLineStyle }}"></span>
          <span style="{{ burgerLineStyle }}"></span>
        </button>
      </sc-if>
    </div>
    <sc-if value="{{ menuOpen }}" hint-placeholder-val="{{ false }}">
      <nav style="{{ mobileNavStyle }}">
        <sc-for list="{{ navItems }}" as="item" hint-placeholder-count="5">
          <a href="{{ item.href }}" style="{{ mobileLinkStyle }}" onClick="{{ closeMenu }}">{{ item.label }}</a>
        </sc-for>
        <a href="Contactos.dc.html" style="{{ ctaMobileStyle }}" onClick="{{ closeMenu }}">Pedir orçamento</a>
      </nav>
    </sc-if>
  </header>

  <section style="{{ heroStyle }}">
    <div style="{{ heroOverlayStyle }}"></div>
    <div style="{{ heroContentStyle }}">
      <h1 style="{{ heroTitleStyle }}">Conforto e elegância para a sua casa</h1>
      <p style="{{ heroSubStyle }}">Estores, toldos e portadas feitos à medida, com instalação profissional em Bragança e toda a região. Mais de {{ anosMercado }} anos a proteger e valorizar espaços.</p>
      <a href="Contactos.dc.html" style="{{ heroCtaStyle }}">Pedir orçamento</a>
    </div>
  </section>

  <section style="{{ bannerSectionStyle }}">
    <div style="{{ bannerSlideStyle }}">
      <div style="{{ bannerOverlayStyle }}"></div>
      <div style="{{ bannerTextWrapStyle }}">
        <span style="{{ bannerKickerStyle }}">{{ currentBanner.kicker }}</span>
        <h2 style="{{ bannerTitleStyle }}">{{ currentBanner.title }}</h2>
        <p style="{{ bannerBodyStyle }}">{{ currentBanner.text }}</p>
        <a href="{{ currentBanner.href }}" style="{{ bannerCtaStyle }}">{{ currentBanner.cta }}</a>
      </div>
    </div>
    <div style="{{ bannerDotsStyle }}">
      <sc-for list="{{ bannerSlides }}" as="slide" hint-placeholder-count="2">
        <button onClick="{{ slide.select }}" style="{{ slide.dotStyle }}" aria-label="Slide"></button>
      </sc-for>
    </div>
  </section>

  <section style="{{ aboutSectionStyle }}">
    <div style="{{ aboutInnerStyle }}">
      <div style="{{ aboutTextColStyle }}">
        <span style="{{ kickerStyle }}">Sobre nós</span>
        <h2 style="{{ sectionTitleDarkStyle }}">Estores Brigantinos</h2>
        <p style="{{ bodyTextStyle }}">Somos uma empresa de Bragança especializada em estores, toldos e portadas feitos à medida. Cada projeto é pensado para o espaço do cliente, unindo funcionalidade, durabilidade e um acabamento que valoriza qualquer ambiente, seja residencial, comercial ou de escritório.</p>
        <p style="{{ bodyTextStyle }}">Trabalhamos com materiais resistentes e sistemas fiáveis, garantindo soluções de proteção solar e térmica que duram e que se mantêm bonitas ano após ano.</p>
        <p style="{{ closingLineStyle }}">Escolha a Estores Brigantinos: qualidade que se vê e se sente em cada instalação.</p>
        <div style="{{ aboutCtaRowStyle }}">
          <a href="Empresa.dc.html" style="{{ secondaryBtnStyle }}">Saiba mais</a>
          <div style="{{ counterBlockStyle }}">
            <span style="{{ counterNumberStyle }}">{{ anosMercado }}+</span>
            <span style="{{ counterLabelStyle }}">Anos a servir Bragança e região</span>
          </div>
        </div>
      </div>
      <div style="{{ aboutPhotosStyle }}">
        <div style="{{ aboutPhotoBig }}"><span style="{{ photoLabelStyle }}">Fachada da loja / oficina</span></div>
        <div style="{{ aboutPhotoRowStyle }}">
          <div style="{{ aboutPhotoSmall1 }}"><span style="{{ photoLabelStyle }}">Equipa em instalação</span></div>
          <div style="{{ aboutPhotoSmall2 }}"><span style="{{ photoLabelStyle }}">Pormenor de acabamento</span></div>
        </div>
      </div>
    </div>
  </section>

  <section style="{{ diffSectionStyle }}">
    <div style="{{ diffInnerStyle }}">
      <h2 style="{{ sectionTitleCenterStyle }}">Porque escolher a Estores Brigantinos</h2>
      <div style="{{ diffGridStyle }}">
        <div style="{{ diffCardStyle }}">
          <div style="{{ diffIconWrapStyle }}">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#2c302e" strokeWidth="1.8"><path d="M2 12l4-4 3 3 5-5 4 4M2 16l4-4 3 3 5-5 4 4" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          <h3 style="{{ diffTitleStyle }}">Atendimento próximo</h3>
          <p style="{{ diffTextStyle }}">Orçamento no local, medição precisa e acompanhamento até à instalação final.</p>
        </div>
        <div style="{{ diffCardStyle }}">
          <div style="{{ diffIconWrapStyle }}">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#2c302e" strokeWidth="1.8"><path d="M12 2l8 3v6c0 5-3.5 8.5-8 11-4.5-2.5-8-6-8-11V5l8-3z" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          <h3 style="{{ diffTitleStyle }}">Materiais de qualidade</h3>
          <p style="{{ diffTextStyle }}">Estruturas em alumínio e tecidos resistentes à intempérie, pensados para durar.</p>
        </div>
        <div style="{{ diffCardStyle }}">
          <div style="{{ diffIconWrapStyle }}">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#2c302e" strokeWidth="1.8"><path d="M4 21V9l8-6 8 6v12M9 21v-6h6v6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          <h3 style="{{ diffTitleStyle }}">Acabamento cuidado</h3>
          <p style="{{ diffTextStyle }}">Cada peça é ajustada ao milímetro para um resultado limpo e profissional.</p>
        </div>
        <div style="{{ diffCardStyle }}">
          <div style="{{ diffIconWrapStyle }}">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#2c302e" strokeWidth="1.8"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M3 9h18M8 2v4M16 2v4M8 14h2M8 17h2" strokeLinecap="round"/></svg>
          </div>
          <h3 style="{{ diffTitleStyle }}">Prazos cumpridos</h3>
          <p style="{{ diffTextStyle }}">Compromisso com datas de instalação claras, sem surpresas.</p>
        </div>
      </div>
    </div>
  </section>

  <section style="{{ catSectionStyle }}">
    <div style="{{ catInnerStyle }}">
      <span style="{{ kickerStyle }}">As nossas soluções</span>
      <h2 style="{{ sectionTitleDarkStyle }}">Categorias</h2>
      <p style="{{ catIntroStyle }}">Da proteção solar à privacidade, temos a solução certa para cada janela, varanda ou espaço exterior.</p>
      <div style="{{ catGridStyle }}">
        <sc-for list="{{ categories }}" as="cat" hint-placeholder-count="4">
          <a href="{{ cat.href }}" style="{{ catCardStyle }}">
            <div style="{{ cat.photoStyle }}"></div>
            <div style="{{ catCardBodyStyle }}">
              <span style="{{ catTagStyle }}">{{ cat.tag }}</span>
              <h3 style="{{ catNameStyle }}">{{ cat.name }}</h3>
              <p style="{{ catDescStyle }}">{{ cat.desc }}</p>
              <span style="{{ catLinkStyle }}">Ver todos →</span>
            </div>
          </a>
        </sc-for>
      </div>
    </div>
  </section>

  <section style="{{ testimSectionStyle }}">
    <div style="{{ testimInnerStyle }}">
      <span style="{{ kickerLightStyle }}">Avaliações Google</span>
      <h2 style="{{ sectionTitleLightStyle }}">O que dizem os nossos clientes</h2>
      <div style="{{ testimGridStyle }}">
        <sc-for list="{{ testimonials }}" as="t" hint-placeholder-count="3">
          <div style="{{ testimCardStyle }}">
            <div style="{{ starsRowStyle }}">★★★★★</div>
            <p style="{{ testimTextStyle }}">{{ t.text }}</p>
            <span style="{{ testimNameStyle }}">{{ t.name }}</span>
          </div>
        </sc-for>
      </div>
    </div>
  </section>

  <section style="{{ ctaBandStyle }}">
    <h2 style="{{ ctaBandTitleStyle }}">Peça já o seu orçamento</h2>
    <p style="{{ ctaBandTextStyle }}">Diga-nos o que precisa e entramos em contacto para agendar uma visita técnica gratuita.</p>
    <a href="Contactos.dc.html" style="{{ ctaBandBtnStyle }}">Enviar pedido</a>
  </section>

  <footer style="{{ footerStyle }}">
    <div style="{{ footerGridStyle }}">
      <div style="{{ footerColStyle }}">
        <img src="uploads/imgi_1_logotipowhite.png" alt="Estores Brigantinos" style="{{ footerLogoStyle }}"/>
        <p style="{{ footerDescStyle }}">Soluções em estores, toldos e portadas, com qualidade, design moderno e confiança, para transformar o seu espaço.</p>
      </div>
      <div style="{{ footerColStyle }}">
        <h4 style="{{ footerHeadStyle }}">Links rápidos</h4>
        <sc-for list="{{ navItems }}" as="item" hint-placeholder-count="5">
          <a href="{{ item.href }}" style="{{ footerLinkStyle }}">{{ item.label }}</a>
        </sc-for>
      </div>
      <div style="{{ footerColStyle }}">
        <h4 style="{{ footerHeadStyle }}">Morada</h4>
        <p style="{{ footerTextStyle }}">Zona Industrial das Cantarias<br/>Av. Dr. Mário Soares, nº 1<br/>5300-423 Bragança</p>
        <h4 style="{{ footerHeadStyle }}">Horário</h4>
        <p style="{{ footerTextStyle }}">Segunda a Sexta<br/>8:30h – 12:00h · 14:00h – 18:30h<br/>Sábado e Domingo: Fechado</p>
      </div>
      <div style="{{ footerColStyle }}">
        <h4 style="{{ footerHeadStyle }}">Contactos</h4>
        <p style="{{ footerTextStyle }}">273 332 702<br/><span style="{{ footerNoteStyle }}">Chamada para Rede Fixa Nacional</span></p>
        <p style="{{ footerTextStyle }}">geral@estoresbrigantinos.pt</p>
      </div>
    </div>
    <div style="{{ footerBottomStyle }}">© {{ year }} Estores Brigantinos. Todos os direitos reservados.</div>
  </footer>
</div>

</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1440},&quot;anosMercado&quot;:{&quot;editor&quot;:&quot;int&quot;,&quot;default&quot;:20,&quot;tsType&quot;:&quot;number&quot;,&quot;min&quot;:1,&quot;max&quot;:60}}">
const MOBILE_BP = 900;
const img = (id, w) => `https://images.unsplash.com/${id}?auto=format&fit=crop&w=${w || 1000}&q=60`;
const layered = (grad, id) => id
  ? { backgroundImage: `linear-gradient(0deg, rgba(20,22,18,.08), rgba(20,22,18,.02)), url(${img(id)}), ${grad}`, backgroundSize: 'cover, cover, cover', backgroundPosition: 'center, center, center' }
  : { background: grad };

class Component extends DCLogic {
  state = { width: 1400, menuOpen: false, bannerIndex: 0 };

  componentDidMount() {
    this.onResize = () => this.setState({ width: window.innerWidth });
    window.addEventListener('resize', this.onResize);
    this.onResize();
    this.bannerTimer = setInterval(() => {
      this.setState(s => ({ bannerIndex: (s.bannerIndex + 1) % 2 }));
    }, 5500);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.onResize);
    clearInterval(this.bannerTimer);
  }

  renderVals() {
    const mobile = this.state.width < MOBILE_BP;
    const notMobile = !mobile;
    const dark = '#2c302e', yellow = '#ffca01', orange = '#fe9900', cream = '#f7f4ee';
    const path = (typeof window !== 'undefined' && window.location.pathname.split('/').pop()) || 'Home.dc.html';

    const navItems = [
      { label: 'Home', href: 'Home.dc.html' },
      { label: 'Produtos', href: 'Produtos.dc.html' },
      { label: 'Projetos', href: 'Projetos.dc.html' },
      { label: 'Empresa', href: 'Empresa.dc.html' },
      { label: 'Contactos', href: 'Contactos.dc.html' }
    ].map(n => ({ ...n, active: { color: n.href === (path || 'Home.dc.html') ? yellow : '#fff', fontWeight: 600, fontSize: 15, letterSpacing: '.2px' } }));

    const categoriesRaw = [
      { name: 'Estores', tag: 'Interior & Exterior', href: 'Estores.dc.html', desc: 'Estores interiores e exteriores, manuais ou motorizados, para controlar luz e privacidade com estilo.', grad: 'linear-gradient(155deg,#4a4f47 0%,#2c302e 60%,#1c1f1d 100%)' },
      { name: 'Toldos', tag: 'Varandas & Esplanadas', href: 'Toldos.dc.html', desc: 'Toldos articulados, retrácteis e fixos, resistentes ao vento, ideais para varandas e esplanadas.', grad: 'linear-gradient(155deg,#fe9900 0%,#d97e06 60%,#2c302e 100%)' },
      { name: 'Portadas', tag: 'Segurança & Isolamento', href: 'Portadas.dc.html', desc: 'Soluções robustas em alumínio para proteção, segurança e isolamento térmico.', grad: 'linear-gradient(155deg,#565b53 0%,#2c302e 60%,#14150f 100%)' },
      { name: 'Fachadas têxteis', tag: 'Cortinas de vidro', href: 'Fachadas.dc.html', desc: 'Fecho de espaços exteriores mantendo luz natural e proteção contra vento e chuva.', grad: 'linear-gradient(155deg,#ffca01 0%,#e0ac10 60%,#2c302e 100%)' }
    ];
    const catPhotoIds = { Estores: 'photo-1600210492493-0946911123ea', Toldos: 'photo-1600566753086-00f18fb6b3ea', Portadas: 'photo-1600607687939-ce8a6c25118c', 'Fachadas têxteis': 'photo-1571508601891-ca5e7a713859' };
    const categories = categoriesRaw.map(c => ({ ...c, photoStyle: { height: 190, borderRadius: '14px 14px 0 0', ...layered(c.grad, catPhotoIds[c.name]) } }));

    const bannerSlidesRaw = [
      { kicker: 'Toldos', title: 'Proteção solar sem abrir mão do estilo', text: 'Toldos resistentes ao vento e ao sol, com acabamento premium para varandas, esplanadas e jardins.', cta: 'Ver toldos', href: 'Toldos.dc.html', grad: 'linear-gradient(120deg,#2c302e 0%,#3a3f3c 45%,#fe9900 100%)', photoId: 'photo-1615873968403-89e068629265' },
      { kicker: 'Estores', title: 'Estores que se adaptam ao seu espaço', text: 'Modelos interiores e exteriores, manuais ou motorizados, com controlo total de luz e privacidade.', cta: 'Ver estores', href: 'Estores.dc.html', grad: 'linear-gradient(120deg,#2c302e 0%,#3a3f3c 45%,#ffca01 100%)', photoId: 'photo-1600121848594-d8644e57abab' }
    ];
    const bannerSlides = bannerSlidesRaw.map((s, i) => ({
      ...s,
      select: () => this.setState({ bannerIndex: i }),
      dotStyle: { width: this.state.bannerIndex === i ? 28 : 10, height: 4, borderRadius: 2, border: 'none', background: this.state.bannerIndex === i ? yellow : 'rgba(255,255,255,.4)', cursor: 'pointer', transition: 'all .3s' }
    }));
    const currentBanner = { ...bannerSlidesRaw[this.state.bannerIndex] };

    const testimonials = [
      { name: 'Cliente Google', text: '[Aguarda a inserção de avaliações reais do Google Meu Negócio]' },
      { name: 'Cliente Google', text: '[Aguarda a inserção de avaliações reais do Google Meu Negócio]' },
      { name: 'Cliente Google', text: '[Aguarda a inserção de avaliações reais do Google Meu Negócio]' }
    ];

    const heroPad = mobile ? '110px 20px 56px' : '160px 64px 96px';
    const sectionPadH = mobile ? 20 : 64;

    return {
      mobile, notMobile,
      pageWrapStyle: { background: cream, minHeight: '100vh', overflowX: 'hidden' },

      headerStyle: { position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50, background: dark, boxShadow: '0 2px 18px rgba(0,0,0,.18)' },
      headerInnerStyle: { maxWidth: 1360, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: mobile ? '10px 18px' : '10px 32px', gap: 24 },
      logoLinkStyle: { display: 'flex', alignItems: 'center' },
      logoImgStyle: { height: mobile ? 40 : 48, width: 'auto', display: 'block' },
      navStyle: { display: 'flex', gap: 30, alignItems: 'center' },
      ctaHeaderStyle: { background: yellow, color: dark, fontWeight: 700, fontSize: 14, padding: '11px 22px', borderRadius: 8, whiteSpace: 'nowrap' },
      burgerStyle: { background: 'none', border: 'none', display: 'flex', flexDirection: 'column', gap: 5, padding: 8, cursor: 'pointer' },
      burgerLineStyle: { width: 24, height: 2, background: '#fff', display: 'block' },
      mobileNavStyle: { display: 'flex', flexDirection: 'column', background: dark, padding: '8px 18px 20px', gap: 4, borderTop: '1px solid rgba(255,255,255,.08)' },
      mobileLinkStyle: { color: '#fff', fontWeight: 600, fontSize: 16, padding: '12px 4px', borderBottom: '1px solid rgba(255,255,255,.08)' },
      ctaMobileStyle: { marginTop: 12, background: yellow, color: dark, fontWeight: 700, fontSize: 15, padding: '13px 20px', borderRadius: 8, textAlign: 'center' },
      toggleMenu: () => this.setState(s => ({ menuOpen: !s.menuOpen })),
      closeMenu: () => this.setState({ menuOpen: false }),
      menuOpen: this.state.menuOpen,

      heroStyle: { position: 'relative', background: `radial-gradient(1100px 500px at 85% -10%, rgba(254,153,0,.35), transparent 60%), linear-gradient(160deg,#2c302e 0%,#23261f 55%,#181a17 100%)`, padding: heroPad, display: 'flex', alignItems: 'center' },
      heroOverlayStyle: { position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.04) 0, transparent 3px)', backgroundSize: '26px 26px' },
      heroContentStyle: { position: 'relative', maxWidth: 720, margin: mobile ? '0' : '0 auto', width: '100%' },
      heroTitleStyle: { fontFamily: "'Archivo',sans-serif", fontWeight: 800, color: '#fff', fontSize: mobile ? 36 : 58, lineHeight: 1.06, margin: '0 0 20px', letterSpacing: '-.5px' },
      heroSubStyle: { color: 'rgba(255,255,255,.82)', fontSize: mobile ? 16 : 19, lineHeight: 1.6, maxWidth: 560, margin: '0 0 32px' },
      heroCtaStyle: { display: 'inline-block', background: yellow, color: dark, fontWeight: 700, fontSize: mobile ? 15 : 16, padding: mobile ? '14px 26px' : '16px 34px', borderRadius: 9 },

      bannerSectionStyle: { position: 'relative' },
      bannerSlideStyle: { position: 'relative', minHeight: mobile ? 360 : 420, ...layered(currentBanner.grad, currentBanner.photoId), display: 'flex', alignItems: 'center', overflow: 'hidden' },
      bannerOverlayStyle: { position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(0,0,0,.35), transparent 70%)' },
      bannerTextWrapStyle: { position: 'relative', maxWidth: 1360, width: '100%', margin: '0 auto', padding: mobile ? '0 20px' : '0 64px' },
      bannerKickerStyle: { color: yellow, fontWeight: 700, fontSize: 13, letterSpacing: '1.5px', textTransform: 'uppercase' },
      bannerTitleStyle: { fontFamily: "'Archivo',sans-serif", color: '#fff', fontWeight: 800, fontSize: mobile ? 28 : 42, margin: '10px 0 14px', maxWidth: 520, lineHeight: 1.12 },
      bannerBodyStyle: { color: 'rgba(255,255,255,.85)', fontSize: mobile ? 15 : 17, maxWidth: 460, lineHeight: 1.6, margin: '0 0 26px' },
      bannerCtaStyle: { display: 'inline-block', background: '#fff', color: dark, fontWeight: 700, fontSize: 15, padding: '13px 26px', borderRadius: 8 },
      bannerDotsStyle: { position: 'absolute', bottom: 20, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 8 },

      aboutSectionStyle: { padding: mobile ? '56px 20px' : '96px 64px', background: cream },
      aboutInnerStyle: { maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.05fr .95fr', gap: mobile ? 36 : 64, alignItems: 'center' },
      aboutTextColStyle: {},
      kickerStyle: { color: orange, fontWeight: 700, fontSize: 13, letterSpacing: '1.5px', textTransform: 'uppercase' },
      sectionTitleDarkStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 800, fontSize: mobile ? 30 : 40, margin: '10px 0 20px', letterSpacing: '-.3px' },
      bodyTextStyle: { color: '#4d514c', fontSize: mobile ? 15.5 : 16.5, lineHeight: 1.7, margin: '0 0 16px' },
      closingLineStyle: { color: dark, fontWeight: 700, fontSize: mobile ? 16 : 18, margin: '20px 0 28px', lineHeight: 1.5 },
      aboutCtaRowStyle: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 28 },
      secondaryBtnStyle: { display: 'inline-block', border: `2px solid ${dark}`, color: dark, fontWeight: 700, fontSize: 15, padding: '13px 26px', borderRadius: 8 },
      counterBlockStyle: { display: 'flex', flexDirection: 'column', borderLeft: `3px solid ${yellow}`, paddingLeft: 16 },
      counterNumberStyle: { fontFamily: "'Archivo',sans-serif", fontWeight: 800, fontSize: 34, color: dark, lineHeight: 1 },
      counterLabelStyle: { color: '#6b6f69', fontSize: 13, maxWidth: 160 },
      aboutPhotosStyle: { display: 'grid', gap: 14 },
      aboutPhotoBig: { height: mobile ? 200 : 260, borderRadius: 16, ...layered('linear-gradient(150deg,#4a4f47,#2c302e)', 'photo-1600607687939-ce8a6c25118c'), display: 'flex', alignItems: 'flex-end', padding: 16 },
      aboutPhotoRowStyle: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 },
      aboutPhotoSmall1: { height: mobile ? 120 : 150, borderRadius: 16, ...layered('linear-gradient(150deg,#fe9900,#2c302e)', 'photo-1512918728675-ed5a9ecdebfd'), display: 'flex', alignItems: 'flex-end', padding: 14 },
      aboutPhotoSmall2: { height: mobile ? 120 : 150, borderRadius: 16, ...layered('linear-gradient(150deg,#ffca01,#2c302e)', 'photo-1560448204-e02f11c3d0e2'), display: 'flex', alignItems: 'flex-end', padding: 14 },
      photoLabelStyle: { color: 'rgba(255,255,255,.85)', fontSize: 12.5, fontWeight: 600 },

      diffSectionStyle: { padding: mobile ? '52px 20px' : '90px 64px', background: '#efeae0' },
      diffInnerStyle: { maxWidth: 1280, margin: '0 auto' },
      sectionTitleCenterStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 800, fontSize: mobile ? 28 : 36, textAlign: 'center', margin: '0 0 40px' },
      diffGridStyle: { display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(4,1fr)', gap: 20 },
      diffCardStyle: { background: '#fff', borderRadius: 14, padding: '30px 24px', boxShadow: '0 4px 20px rgba(44,48,46,.06)' },
      diffIconWrapStyle: { width: 52, height: 52, borderRadius: 12, background: '#fdeec4', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 },
      diffTitleStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 700, fontSize: 18, margin: '0 0 8px' },
      diffTextStyle: { color: '#65695f', fontSize: 14.5, lineHeight: 1.6, margin: 0 },

      catSectionStyle: { padding: mobile ? '52px 20px' : '96px 64px', background: cream },
      catInnerStyle: { maxWidth: 1280, margin: '0 auto', textAlign: mobile ? 'left' : 'center' },
      catIntroStyle: { color: '#5a5e56', fontSize: mobile ? 15.5 : 17, maxWidth: 620, margin: mobile ? '0 0 32px' : '0 auto 44px', lineHeight: 1.6 },
      catGridStyle: { display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(4,1fr)', gap: 22, textAlign: 'left' },
      catCardStyle: { background: '#fff', borderRadius: 16, overflow: 'hidden', boxShadow: '0 6px 24px rgba(44,48,46,.08)', display: 'block' },
      catCardBodyStyle: { padding: '20px 20px 24px' },
      catTagStyle: { color: orange, fontWeight: 700, fontSize: 11.5, letterSpacing: '.6px', textTransform: 'uppercase' },
      catNameStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 700, fontSize: 20, margin: '6px 0 8px' },
      catDescStyle: { color: '#65695f', fontSize: 14, lineHeight: 1.55, margin: '0 0 14px' },
      catLinkStyle: { color: dark, fontWeight: 700, fontSize: 13.5 },

      testimSectionStyle: { padding: mobile ? '52px 20px' : '96px 64px', background: dark },
      testimInnerStyle: { maxWidth: 1280, margin: '0 auto', textAlign: 'center' },
      kickerLightStyle: { color: yellow, fontWeight: 700, fontSize: 13, letterSpacing: '1.5px', textTransform: 'uppercase' },
      sectionTitleLightStyle: { fontFamily: "'Archivo',sans-serif", color: '#fff', fontWeight: 800, fontSize: mobile ? 28 : 36, margin: '10px 0 40px' },
      testimGridStyle: { display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3,1fr)', gap: 20, textAlign: 'left' },
      testimCardStyle: { background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.1)', borderRadius: 14, padding: '24px 22px' },
      starsRowStyle: { color: yellow, fontSize: 16, marginBottom: 12, letterSpacing: 2 },
      testimTextStyle: { color: 'rgba(255,255,255,.75)', fontSize: 14.5, lineHeight: 1.6, fontStyle: 'italic', margin: '0 0 14px' },
      testimNameStyle: { color: '#fff', fontWeight: 700, fontSize: 14 },

      ctaBandStyle: { background: `linear-gradient(120deg,${yellow},${orange})`, padding: mobile ? '48px 20px' : '64px 64px', textAlign: 'center' },
      ctaBandTitleStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 800, fontSize: mobile ? 26 : 34, margin: '0 0 12px' },
      ctaBandTextStyle: { color: '#3a3f3c', fontSize: mobile ? 15 : 17, margin: '0 0 26px' },
      ctaBandBtnStyle: { display: 'inline-block', background: dark, color: '#fff', fontWeight: 700, fontSize: 16, padding: '15px 34px', borderRadius: 9 },

      footerStyle: { background: '#1c1f1d', padding: mobile ? '48px 20px 24px' : '72px 64px 28px' },
      footerGridStyle: { maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.3fr 1fr 1fr 1fr', gap: 36 },
      footerColStyle: {},
      footerLogoStyle: { height: 40, marginBottom: 14 },
      footerDescStyle: { color: 'rgba(255,255,255,.6)', fontSize: 14, lineHeight: 1.6, maxWidth: 280 },
      footerHeadStyle: { fontFamily: "'Archivo',sans-serif", color: '#fff', fontWeight: 700, fontSize: 15, margin: '0 0 16px' },
      footerLinkStyle: { display: 'block', color: 'rgba(255,255,255,.65)', fontSize: 14, marginBottom: 10 },
      footerTextStyle: { color: 'rgba(255,255,255,.65)', fontSize: 14, lineHeight: 1.7, margin: '0 0 16px' },
      footerNoteStyle: { color: 'rgba(255,255,255,.4)', fontSize: 12 },
      footerBottomStyle: { maxWidth: 1280, margin: '40px auto 0', paddingTop: 20, borderTop: '1px solid rgba(255,255,255,.08)', color: 'rgba(255,255,255,.4)', fontSize: 12.5, textAlign: 'center' },

      anosMercado: this.props.anosMercado ?? 20,
      year: new Date().getFullYear(),
      navItems, categories, bannerSlides, currentBanner, testimonials
    };
  }
}

</script>
</body>
</html>
